Operation Manual

USING DREAMWEAVER

Workspace

Last updated 3/28/2012

“Open Related Files” on page 66

“General information about coding in Dreamweaver” on page 276

Document toolbar overview

The Document toolbar contains buttons that let you toggle between different views of your document quickly. The

toolbar also contains some common commands and options related to viewing the document and transferring it

between the local and remote sites. The illustration below shows the expanded Document toolbar.

A. Show Code view B. Show Code and Design view C. Show Design view D. Live Code view E. Check Browser Compatibility F. Live view

G. CSS Inspect mode H. Preview/Debug in Browser I. Visual Aids J. Refresh Design View K. Document Title L. File Management

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 Splits the Document window between the Code and the Design views. When you select

this combined view, the option Design View on Top becomes available in the View Options menu.

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

Note: If you are working with XML, JavaScript, CSS, or other code based file types, you cannot view the files in Design

view and the Design and Split buttons are dimmed out.

Live View Displays a non-editable, interactive, browser based view of the document.

Live Code View Displays the actual code used by the browser to execute the 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.

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.

Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to

select a code block’s opening or closing tags.

View Options Allows you to set options for Code view and Design view, including which view you want to 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.

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

Check Browser Compatibility Lets you check if your CSS is compatible across different browsers.