Document Toolbar in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

The Document toolbar in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver contains tools to help you view your document in different modes, such as Code and Design, as well as address such items as the document title and browser compatibility.

  • Code View: Show the code and only the code using this view. Dreamweaver helps you to decipher code by color coding tags, attributes, CSS, and other elements.

  • Split View: Selecting this option splits the Document window between Code and Design views. This view can be extremely helpful because you see both the design and the code simultaneously.

    Control your view of the page from the Document toolbar.
    Control your view of the page from the Document toolbar.
  • Design View: This option displays your page in Design view in the Document window.

  • Live Code: When Live View is enabled, you can view the source code of your document as a user would see it in a browser but you can’t edit page code in this view.

  • Check Browser Compatibility: This menu shows options that let you check page integrity, such as accessibility, or whether your CSS rules are compatible across different browsers.

  • Live View: Live View renders your page as though it’s in a browser, free of borders, guides, and other visual aids. In Live View, you can’t edit the previewed content, but you can jump to Code, Split, or Design view and modify your page content.

  • Inspect: The new Inspect button works with Live View to reveal the CSS rules that format elements on your page. When you select an element on the page with Inspect enabled, the CSS Styles panel reveals the properties that format that element, and allows you to disable or modify specific properties and see the results.

  • Preview/Debug in Browser: Click this button to preview or debug your document in one of your installed Web browsers, Adobe’s BrowserLab, or Device Central.

  • Visual Aids: Click this button to select different visual aids (such as borders and guides) to help you see various elements and make designing your pages easier.

  • Refresh Design View: Click this button to refresh the document’s Design view after you make changes in Code view. Changes you make in Code view don’t appear automatically in Design view until you perform certain actions, such as save the file or click this button.

  • Document Title: Enter the name of your document in this field.

  • File Management: Click this button to display the File Management pop-up menu. Use this menu to check your document in or out when enabled for your site.

  • Previous Page/Next Page/Refresh/Address Bar: In Live View, these tools work just like they would in a Web browser and enable you to navigate between pages, refresh the page, and see the address of the current page. The address bar also works when Live View is not enabled, revealing the path to the document you’re currently working on.

  • Related Documents: Documents used by and attached to your page, such as external CSS and JavaScript files, are listed below (Mac) or above (Windows) the view selection (Code/Split/Design) buttons. You can click any listed document to edit the attached file in Split view without having to switch documents.

    • XML, JavaScript, CSS, and other code-based file types can only be viewed and edited in Code view; the Design and Split buttons appear dimmed out.

    • Refreshing also updates code features that are Document Object Model (DOM) dependent, such as the ability to select a code block’s opening or closing tags.

  • Live View Options: Click and select options from this menu to control how your document appears and works when Live View is enabled.