• 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, and with smaller screen real estate.)

The regular Document window WYSIWYG view is called Design view. To view just the code, click on the Code View button (Figure 4.16). To view the Code and the Design views in a frames-like split window, click on the Split view button (Figure 4.17), which Dreamweaver 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—what I call Split view—in the Document window, click on the Show Code and Design Views button on the Document toolbar.


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. You can also 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!)


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