Learnthat.com

Dreamweaver offers three document views: Design view, Code view, and Split view, which displays both Design and Code views in a split window. In Design view (shown above), you can draw individual layers and table cells on the page, drag and drop graphics, and type text as you would in a word processor. The page appears as it will to viewers.

Code view (shown below) lets you edit the HTML and any other code (such as scripts) included in the page.

Dreamweaver's live syntax coloring helps you distinguish between different kinds of tags. In addition, when you type in Code view, Dreamweaver provides code hints based on the first few letters you type. For example, if you type a bracket (<), a menu pops up with a list of valid tags:

When you select a tag from the list, Dreamweaver inserts it into the document. For example, select a from the list and press Enter to insert it. Then press the space bar on your keyboard. Another menu pops up with a list of additional elements.

To complete the code to insert a hyperlink in your document, select href from the list and press Enter. Dreamweaver inserts the HTML code using the correct syntax, and even lets you browse for the file you're linking to.

Notice that it also inserts the quotation marks that are required to enclose the link.

Tip:

To learn more about HTML tags, open the Reference panel of the Code panel group. Here, Macromedia has included the O'Reilly HTML Reference, which provides a list of HTML tags and their attributes.

Split view splits the Document window to display both Code and Design views. This is useful when you want to view the effects of any changes you're making to the HTML code.

Tip:

Your changes may not appear in the Document window until you save the document or click the Refresh Document View button  on the Document toolbar.