Switching Document Views

As you develop your pages, you might need to view the source code generated by Dreamweaver. Perhaps a stray line break or other unseen character is ruining the effect you are trying to achieve, but you can't locate it in the Document window. By looking at the HTML source code, however, you can find and remove the line break easily.

Dreamweaver gives you three options for viewing your documents: Design view, which shows all the objects (text, images, tables, and so on) that you have added to your page; Code view, which shows only the HTML source code; and Split view, a combination of both Code and Design views. In the following exercise, you'll look at each of these views.

1.	Open the training.html document from the Lesson_16_Code/Training folder. The document toolbar is displayed at the top of the Document window on the Macintosh and above the Document window as its own panel in Windows. Tip If the document toolbar is not visible, choose View > Toolbars > Document.
2.	Click the Code button on the document toolbar. Tip You can also choose View > Code to switch to Code view. In Code view, you don't see the visual elements of the Web page as they would appear in a browser window. Instead, you see the HTML code in a text editor. The document toolbar contains the following code-related controls: Refresh Design View: This feature updates the Design view (the visual representation of your page) to reflect any changes you make in Code view while using Split view. View Options: This menu provides options that adjust the display of Code view. You can add line numbers for each line of code, enable wrapping to eliminate horizontal scrolling and make the code easier to view, and so on. You can customize any of these options by choosing Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and selecting the Code Format category. Note You can also open the Code inspector, which gives you the same options and controls as Code view. The difference is that the inspector opens in a separate window. Some developers use two monitors and place the Code inspector on one screen to simultaneously view the code as they work in the Design view of the Document window. This serves a function similar to the Split view, while giving more room for each view. To open the Code inspector, choose Window > Code Inspector or press the F10 key.
3.	Click the Split button in the document toolbar. Tip You can also switch to Split view by choosing View > Code and Design. In this view, you can see both the design and the code that creates the page. You can resize the HTML pane by dragging the border between the design and HTML panes. To change the location of the HTML pane, click the View Options button in the toolbar and choose Design View On Top from the menu. This menu also contains other options for adjusting the view, including rulers, visual aids, and the grid.
4.	Click the Design button in the toolbar.

Tip

You can also choose View > Design to switch to Design view.

Your Document window changes to Design view, which shows you all the visual elements of your page approximately as they will appear in the browser. As in the other document views, you can access several view options through the toolbar.