
toolbar's functionality can be broken down into the following categories: Show Code, Split, and Design Views: With a click of a single icon, Dreamweaver allows you to quickly switch from design to code view or even a combination of both. Live Data View: When a dynamic page is open in Dreamweaver, the live data view icon appears, allowing you to preview your page as if it were being run from a web server. Title Bar: Allows you to add a unique title to your page. Browser Compatibility Check: Displays a warning icon when Dreamweaver detects that the page structure will conflict with pre-configured target browsers. File Management: Allows you to quickly retrieve from and upload to a remote server. Also provides you with the ability to check into or out of source control (covered with more detail in Chapter 4, "Dreamweaver Site Management." Preview in Browser: This feature will launch your design within a pre-defined browser, allowing you to review your work. Refresh Design View: When in split view, this icon, when clicked, refreshes the design view. View Options: Provides numerous additional view options for both the code and design views. Options include viewing head content, rulers, guides, and more. In code view, these options change to allow word wrapping, line numbers, syntax coloring, and more. Visual Aids: Options available within this menu allow you to control visibility of visual aids, table borders, frame borders, image maps, table widths, as well as various layout block options. Now that you have a basic idea as to what features the Document toolbar provides, let's delve a bit deeper into the functionality that each feature exposes. Show Code, Split, and Design Views Whether you're a seasoned HTML developer or a converted print designer who prefers a visual representation of your web page, the Show Code, Split, and Design View options can accommodate your work style. Located in the top-left corner of the Document toolbar, the Show Code, Split, and Design View options allow you to work in the following views: Code View: As Figure 2.5 shows, when the Code view button is selected, the Document window converts to an HTML editor. Figure 2.5. Switch to code view when you want to work with the code for your web page. [View full size image] Design View: The Design view, which is the default view in which Dreamweaver opens, lets you visually add and place items in the Document window. Split Code/Design View: As Figure 2.6 shows, the Split Code/Design view gives you the best of both worlds. Not only do you have the option of working with the document's HTML, you can also work within the visual editing environment at the same time. Figure 2.6. The Split Code/Design view affords you the best of both HTML authoring and visual designing worlds. [View full size image] Live Data View The Live Data view is a tremendous time saving feature for web application developers. Typically, a web application developer would have to save their work