• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Editing Code > About Code View and Split View

About Code View and Split View

Code view and Split view let you view the HTML code for your page directly in the Document window. Code view has the same features and functions as the Code inspector, including line numbers and word wrap. (Ditto for Split view, but with smaller screen real estate.)

The regular Document window view that shows what your page will look like in a browser is called Design view. To view just the code, click on the Show Code View button (Figure 4.16). To view the Code and the Design views in a frames-like split window, click on the Split button (Figure 4.17), which Dreamweaver sometimes wordily calls the Show Code and Design Views button.

Figure 4.16. To view HTML code in the Document window, click on the Show Code View button on the Document toolbar.


Figure 4.17. To view both Code and Design views— in what is also called Split view—in the Document window, click on the Show Code and Design Views button on the Document toolbar.


To switch back to Design view, click its button .

✓ Tips

  • Toggle between Code and Design views by pressing Ctrl+` (Command+` on the Mac). (Buh? That's the accent mark, the one on the same key as the ~, below the Esc key on most keyboards.)

  • You can also change views by selecting Code, Design, or Code and Design from the View menu (Figure 4.18).

    Figure 4.18. The View menu offers the same choices for viewing the page or the code in the Document window. In the View Options menu shown in Figure 4.20, you can also choose to keep the Design view on top of other windows.


About selections

As I described in Chapter 1, any selections you make in the Document window will also be made in the Code inspector (Figure 4.19), and vice versa. This of course applies to Code view as well.

Figure 4.19. When I select text in the Document window, the Code window in Split view also highlights the selection. This works the same way if you have the Code inspector open. (If you had Split view and the Code inspector open, you'd be selecting in three places at once!)


In Figure 4.19, I've selected some text and applied the <strong> tag, which then appears selected in the Tag selector.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint