Operation Manual

Live View
Multiscreen
Preview/Debug in Browser
File Management
W3C Validation
Check Browser Compatibility
Visual Aids
Refresh Design View
Document Title
To the top
To the top
Render Screen Media Type
Render Print Media Type
Render Handheld Media Type
Render Projection Media Type
Render TTY Media Type
Render TV Media Type
Toggle Displaying Of CSS Styles
Design-time Style Sheets
To the top
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.
Displays a non-editable, interactive, browser based view of the document.
View the page as it would appear in screens of different sizes.
Allows you to preview or debug your document in a browser. Select a browser from the pop-up menu.
Displays the File Management pop-up menu.
Lets you validate the current document or a selected tag.
Lets you check if your CSS is compatible across different browsers.
Lets you use different visual aids to design your pages.
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.
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.
Standard toolbar overview
The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print
Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the equivalent menu commands.
Style Rendering toolbar overview
The Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in different media types if you use
media-dependent style sheets. It also contains a button that lets you enable or disable CSS styles. To display the toolbar, select
View > Toolbars > Style Rendering.
This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might specify a body rule for print
media and a different body rule for handheld devices. For more information on creating media-dependent style sheets, see the World Wide Web
Consortium website at www.w3.org/TR/CSS21/media.html.
By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered on a computer screen). You
can view the following media type renderings by clicking the respective buttons in the Style Rendering toolbar.
Shows you how the page appears on a computer screen.
Shows you how the page appears on a printed piece of paper.
Shows you how the page appears on a handheld device, such as a mobile phone or a BlackBerry device.
Shows you how the page appears on a projection device.
Shows you how the page appears on a teletype machine.
Shows you how the page appears on a television screen.
Lets you enable or disable CSS styles. This button works independently of the other media buttons.
Lets you specify a Design-time style sheet.
For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.
Browser Navigation toolbar overview
The Browser Navigation toolbar becomes active in Live view, and shows you the address of the page you’re looking at in the Document window.
Live view acts like a regular browser, so even if you browse to a site outside of your local site (for example, http://www.adobe.com), Dreamweaver
will load the page in the Document window.
34