Section 8.2. A Document Window with a View

8.2. A Document Window with a View

Dreamweaver provides three different ways of looking at your document window:

Design view

In Design view, Dreamweaver displays your web page similarly to the way that the page appears in a web browser, as Figure 8-4 shows. Use Design view to construct your page visually, but don't rely on it for a completely accurate representation of your page. It's more like a reliable estimate. The best way to see how your page actually looks is to test it in your preview browsers.

Figure 8-4. Design view gives you a graphical view of your page

Code view

In Code view, Dreamweaver displays the underlying code (e.g., HTML, CSS, JavaScript) of your web page, as Figure 8-5 shows. Code view works like a text editor, in that you can modify the code directly.

Figure 8-5. Code view shows the underlying code of your page

Split view (Code and Design view)

In Split view, the document window divides into two frames. The top frame shows the underlying code of the page, and the bottom frame gives the visual representation, as Figure 8-6 shows. Split view is a great way to learn HTML. You can draw the layout of your page and add content in the visual frame and then click in the code frame to see what's happening behind the scenes; or you can type HTML directly into the code frame and then click in the visual frame to see the results.

Figure 8-6. Get the best of both worlds with Split view

To switch among the views, use the buttons in the upper-left corner of the document window, as Figure 8-7 shows. For this book, you'll spend most of your time in Design view, which is the default choice.

Figure 8-7. These buttons switch among the document-window views