User Interface

The Dreamweaver MX interface consists primarily of a document window and a series of dockable palettes (or panels) that allow you to format, edit and insert items in your document.

Let's review these windows and palettes in order to get familiar with the Dreamweaver user interface.

Document window

The document window shows your web page in any 1 of 3 possible views: Design View, Code View, and Split View. You can switch between these views by using a set of three toggle buttons in the main interface frame:

Here's how these 3 views of your page work:

Design View: This is a WYSIWYG (What You See Is What You Get) environment. In this view, you are shielded from the HTML source code. Dreamweaver writes that code while you type text and use menu and palette options in a manner similar to using a word processor.

Code View: This view shows the source code, allowing you to edit the HTML directly. Most of the menu and palette options are still available to you in this environment, making it a powerful mode.

Split View: This view divides the workspace, showing the Design View at bottom and the Code view above. You can work in either by clicking your mouse in that pane, making this the most flexible of the 3 views.

At the bottom of the document window, you'll find many useful tools and shortcuts. In the left-hand corner, Dreamweaver displays a list of the HTML tags that are currently open:

That list of open tags is context-sensitive. It changes as you reposition your cursor on the page. You can click on any tag to select it and all the content the tag acts on, or you can right-click (click and hold for Mac) to remove or edit the tag.

In the lower right, Dreamweaver displays the screen size of your design window, the file size, and estimated download time at a given connections speed (choose among connections speeds for this estimate in Dreamweaver's Preferences):