The Workspace Layout

In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.

On the Macintosh, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can also appear as part of a floating workspace in which each document appears in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. Windows "snap" automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them.

The Document Window

The Document window shows the current document. You can select any of the following views:

Design view is a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser.

Code view is a hand-coding environment for writing and editing HTML, JavaScript, server-language code--such as PHP or ColdFusion Markup Language.

Code and Design view lets you view both Code view and Design view for the same document in a single window.

When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.

When the Document window is maximized in the integrated workspace layout (Windows only), it has no title bar; in that case the page title and the file’s path and filename appear in the title bar of the main workspace window.

Additionally, when a Document window is maximized, tabs appear at the top of the Document window area showing the filenames of all open documents. To switch to a document, click its tab.

The Document Toolbar

The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design view.

The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.

The following options appear in the Document toolbar:

Show Code View displays only the Code view in the Document window.

Show Code and Design Views displays Code view in part of the Document window and Design view in another part. When you select this combined view, the option Design View on Top becomes available in the View Options menu. Use this option to specify which view appears at the top of your Document window.

Show Design View displays only the Design view in the Document window.

Server Debug displays a report to help you debug the current ColdFusion page. The report includes errors, if any, in your page.

Document Title allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already has a title, it appears in this field.

No Browser/Check Errors enables you to check cross-browser compatibility.

Validate Markup lets you validate the current document or a selected tag.

File Management displays the File Management pop-up menu.

Preview/Debug in Browser allows you to preview or debug your document in a browser. Select a browser from the pop-up menu.

Refresh Design View refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.

View Options allows you to set options for Code view and Design view, including which view should appear above the other. Options in the menu are for the current view: Design view, Code view, or both.

Visual Aids lets you use different visual aids to design your pages.

The Status Bar

The status bar at the bottom of the Document window provides additional information about the document you are creating.

The tag selector shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire body of the document. To set the class or id attributes for a tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from the context menu. The tag selector is the preferable method for selecting tags because it ensures that you are always selecting the tag with accuracy.

The Hand tool lets you click the document and drag it in the Document window. Click the Select tool to disable the Hand tool.

The Zoom tool and Set Magnification pop-up menu let you set a magnification level for your document. The Window Size pop-up menu (visible in Design view only) lets you resize the Document window to predetermined or custom dimensions.

The Insert Bar

The Insert bar contains buttons for creating and inserting objects such as tables, layers, and images. When you roll the pointer over a button, a tooltip appears with the name of the button.

The buttons are organized into several categories, which you can switch on the left side of the Insert bar. Additional categories appear when the current document contains server code, such as ASP or CFML documents. When you start Dreamweaver, the category you were last working in opens.

Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the default action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, the next time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new option from the pop-up menu, the default action for the button changes.

The Insert bar is organized in the following categories:

The Common category enables you to create and insert the most commonly used objects, such as images and tables.

The Layout category enables you to insert tables, div tags, layers, and frames. You can also you choose among three views of tables: Standard (default), Expanded Tables, and Layout. When Layout mode is selected, you can use the Dreamweaver layout tools: Draw Layout Cell and Draw Layout Table.

The Forms category contains buttons for creating forms and inserting form elements.

The Text category enables you to insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.

The HTML category enables you to insert HTML tags for horizontal rules, head content, tables, frames, and scripts.

Server-code categories are available only for pages that use a particular server language, including ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP. Each of these categories provides server-code objects that you can insert in Code view.

The Application category enables you to insert dynamic elements such as recordsets, repeated regions, and record insertion and update forms.

The Flash elements category enables you to insert Macromedia Flash elements.

The Favorites category enables you to group and organize the Insert bar buttons you use the most in one common place.

The Coding Toolbar

The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snippets. The Coding toolbar is visible only in Code view and appears vertically on the left side of the Document window.

You cannot undock or move the Coding toolbar, but you can hide it.

The Property Inspector

The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. For example, if you select an image on your page, the Property inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the border around the image, if any, and so on).

The Property inspector is at the bottom of the workspace by default, but you can dock it at the top of the workspace if you want. Or, you can make it a floating panel in the workspace.

The Files Panel

You use the Files panel to view and manage the files in your Dreamweaver site.

When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files. When expanded, it displays the local site and either the remote site or testing server. The Files panel can also display a visual site map of the local site.

For Dreamweaver sites, you can also customize the Files panel by changing the view--either your local or remote site--that appears by default in the collapsed panel.

The CSS Styles Panel

The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.

You can resize any of the panes by dragging the borders between the panes.

In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule defining the selection.

In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.

Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

Back to Dreamweaver Home