Dreamweaver MX: The Missing Manual

Code View

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

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

• Split view. This shows the HTML code and the “regular” Design view simultaneously (Figure 9-1).

  

  Figure 9-2. In Split view (also called Code and Design view), the top half shows the inner workings of your page’s HTML. The bottom half shows the “normal” Design view. Selecting an object in the visual half also selects the corresponding HTML in the code half—a great way to identify an object in your HTML. As you work in one half, Dreamweaver updates the corresponding code or design in the other. (You can switch the placement of the two halves by choosing ViewDesign View on Top.) Use the buttons in the document toolbar to jump between the different views. (Live Data view works with Dreamweaver’s dynamic Web site tools; see page 660.)

• Code inspector. Compared with Code view, this tool presents a rather cumbersome way to view a page’s code. For example, it only displays the code of one document at a time. (To access the Code inspector, choose Window→Others→Code Inspector, or press F3.)

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

To move between Dreamweaver’s different views, use the document toolbar (see Figure 9-1) or choose a name from the View menu: Code, Design (the “regular” visual mode), or Design ...