Contents

Know more about this
(or any other) subject?

Show off your know-how at Quamut Wiki.

Web mastery.

Adobe Dreamweaver is the world’s most popular software for building and managing websites. This guide shows you how to use Dreamweaver CS3 (and earlier versions) to take your website skills to the next level. Learn how to:

Navigate the Dreamweaver CS3 workspace
Create, manage, and preview web pages in Dreamweaver
Use built-in Dreamweaver layouts to create a new website in minutes

The Dreamweaver CS3 Workspace

Adobe Dreamweaver CS3 is a powerful software program that allows you to manage all aspects of building and maintaining websites. The new Dreamweaver CS3 workspace contains various menus and panels that let you access all of Dreamweaver’s many features and tools. The most important parts of the Dreamweaver CS3 workspace are explained here and labeled in the image below.

The Menu Bar

The Menu bar at the top of the workspace contains drop-down menus for nearly every possible task, such as opening and saving files, changing views, inserting text and images, and so on, in Dreamweaver. Many, though not all, of these commands can also be executed by using keyboard shortcuts. (For a complete list of available shortcuts, see the Quamut guide to Dreamweaver CS3: Keyboard Shortcuts.)

The Insert Bar

Just below the Menu bar is the Insert bar. Its buttons let you insert various objects, such as images and tables, grouped into categories: Common, Layout, Forms, Data, Spry, Text, and Favorites. All the buttons in the Insert bar can also be found in the Menu bar’s Insert drop-down menu, but using the Insert bar is a faster way to access the Insert buttons.

The Document Window

The first screen you see when you start up Dreamweaver is the Start page. The Start page allows you to open recent files or create new files quickly. Once you’ve opened or created a page, the Start page is replaced by the Document window. The Document window is where you’ll do most of your work, such as creating and updating your website’s pages, in Dreamweaver. If you open more than one document, you can switch among all open documents by clicking on the tabs at the top of the Document window.

Code, Split, and Design View

At the top left of the Document window—just below the tabs for your open documents—is a menu that lets you choose between Design view, Code view, and Split view. The view that you choose affects the Document window’s appearance and functionality, as follows:

Design view is Dreamweaver’s WYSIWYG (“what you see is what you get”) view. Design view is helpful when creating web pages because it displays an approximation of how the page will look in an actual web browser. Plus, you don’t need to work directly with HTML (or other code) at all to make pages.
Code view is Dreamweaver’s advanced HTML code editing mode. It includes features such as code hinting, formatting, and highlighting. Whenever you’d like to manually write or edit HTML (or other web-related code, such as CSS or PHP), you’ll use Code view.
Split view splits the Document window into two panes stacked vertically. The top pane shows the page in Code view, and the bottom pane shows it in Design view. Split view is helpful when writing and editing code because it allows you to see the results of your work immediately in the Design portion of the view.

Tag Selector

Located at the bottom left corner of the Document window, the Tag Selector is a useful tool for viewing, selecting, and modifying HTML tags. Whenever you click within a document, the Tag Selector will display the HTML tags applied to the content that you clicked on. You can then click the tags in the Tag Selector to select the tag’s entire contents, or you can right-click (Ctrl+click on Mac) for various other options, such as deleting or changing the tag.

The Properties Inspector

The Properties inspector is found below the Document window and is the most commonly used panel in Dreamweaver. It shows you all the relevant properties of the content you click on in the Document window. For instance, if you click on an image in your page, the Properties inspector will show you all of the image’s HTML attributes, such as its size, border, alignment, and source. You can use the Properties inspector to view all of the options associated with each aspect of your code and then make whatever changes you’d like.

Other Panels

In addition to the Properties inspector, Dreamweaver contains many other panels you can use for more specific tasks. Certain panels, such as the commonly used Files panel, will open by default in the right column of the workspace. You can add panels to the workspace by going to the Window menu and clicking on the name of the panel you want.

Panels Groups

Some panels are grouped within one panel. For instance, the Files panel also contains the Assets and Snippets panels. To access these “hidden” panels, click the tabs at the top of the main panel. For instance, to access the Assets panel, you’d click the Assets tab at the top of the Files panel. To open the Files panel and select the Assets tab automatically, go to Window > Assets.

Moving Panels

In Dreamweaver CS3, you can move panels around the workspace to position them as you like. To do so, click on the “gripper” icon

in the panel’s top left corner, drag the panel, and drop it wherever you see dark highlighted lines appear. These lines indicate where you can neatly dock the panel without overlapping other panels.

How to Save Workspace Layouts

Once you’ve opened all the panels you plan to use and have moved them into positions you like, you can save your workspace configuration so that it automatically loads every time you start Dreamweaver.

Go to Window > Workspace Layout.
Choose Save Current and give your workspace a name.

Note that Dreamweaver will automatically load the last layout you used when you start the program.

Acknowledgments & Disclaimer

Next:
How to Define a Site in Dreamweaver

Download the PDF
for just $2.95

Dreamweaver CS3

► Complete guide
► Handy, portable format