O'Reilly logo

Dreamweaver 8: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Code View

Dreamweaver provides several different ways to view a page's HTML code:

  • Code view. In Code view, Dreamweaver displays your page's raw code.

  • Split view. This shows the HTML code and the "regular" Design view simultaneously (Figure 9-2).

  • Code inspector. The Code inspector is a floating code window that lets you use Design view in its full glory (not cut in half as in Split view), while still providing access to the code. (To open the Code inspector, choose Window Code Inspector, or press F10.) Code warriors who are into serious multitasking can also use the Code inspector to look at one area of code, while using the main document window to work on another area of code.

The rest of this chapter assumes that you're using Code view for HTML editing.

To move between Dreamweaver's different views, use the buttons in the Document toolbar (Figure 9-2) or choose a name from the View menu: Code, Design (the "regular" visual mode), or Code and Design (Split view).

In Split view (also called Code and Design view), the top half shows your page's HTML; the bottom half shows the WYSIWYG Design view. Selecting an object in the visual half (circled) also selects the corresponding HTML in the code half (the highlighted paragraph tag)—a great way to identify an object in your HTML. As you work in one half of the Split view, Dreamweaver updates the other half. Use the buttons (labeled) in the Document toolbar to jump between the different views. (Notice that the tag selector at the bottom of the document window [circled] also identifies the selected tag.)

Figure 9-2. In Split view (also called Code and Design view), the top half shows your page's HTML; the bottom half shows the WYSIWYG Design view. Selecting an object in the visual half (circled) also selects the corresponding HTML in the code half (the highlighted paragraph tag)—a great way to identify an object in your HTML. As you work in one half of the Split view, Dreamweaver updates the other half. Use the buttons (labeled) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required