O'Reilly logo

Dreamweaver MX: 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 simply displays your page’s raw code.

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

    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.)

    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 WindowOthersCode 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 ...

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