The Document window, in Dreamweaver as in HomeSite, displays the current document as you create and edit it. When a document is maximized, document tabs appear at the bottom of the window for each open document.

The Document window has three view options:

Code view is the default view for the Document window in the HomeSite/Coder style of the integrated workspace. Working in Code view in Dreamweaver is the equivalent of working in the Edit tab of the Document window in HomeSite.

Design view is similar to the Browse view in HomeSite in that it shows a visual representation of the document. In Dreamweaver, however, the document in Design view is fully editable—you don't have to switch back and forth between Code and Design views to make changes.

Code and Design view shows code and design at the same time. This view makes it easy to make quick changes to your code and immediately see the results.

You can also see a visual representation of your document by using the Preview in Browser feature. This is the best way to see how your document will look in a browser—and it enables you to check links and rollovers, which you can't check in Design view. You can also choose to preview your document in different browsers.

To change views in the Document window, do one of the following:

	Choose View > Code, View > Design, or View > Code and Design.
	Click the Show Code View, Show Code and Design Views, or Show Design View button in the Document toolbar.

To view code in a separate window:

Choose Window > Others > Code Inspector.

To preview your document in a browser, do one of the following:

	Choose File > Preview in Browser, then choose one of the listed browsers.
	Note: If you haven't selected a browser yet, choose Edit > Preferences, and then select the Preview in Browser category on the left to select a browser.
	Press F12 to display the current document in the primary browser.
	Press Control+F12 to display the current document in the secondary browser.

 
Using the Insert bar
The Insert bar, similar to the HomeSite Quick bar, contains buttons for creating and inserting elements such as tables, layers, and images.

The Insert bar buttons are organized into tabs. There is an Insert bar tab with the same name as each HomeSite Quick bar tab, except Font and Lists. In Dreamweaver, these tabs are combined in the Text tab.

 
Using the View Options menu
Some of the coding options in the HomeSite Editor toolbar (also referred to as the "gutter") are grouped in the Dreamweaver View Options menu on the Document toolbar.

To set options to view your code:

1	Display at least one page in Code view or the Code inspector.
2	Choose View > Code View Options.
	A pop-up menu appears with a check mark beside each option that is already set.
3	Select any of the following options from the menu:

Line Numbers displays line numbers along the side of the code.

Highlight Invalid HTML causes Dreamweaver to highlight in yellow any invalid HTML that browsers don't support. When you select an invalid tag, the Property inspector displays information on how to correct the error.

Syntax Coloring turns code coloring on and off. To change the coloring scheme, see Setting coding preferences.

Auto Indent makes your code indent automatically when you press the Enter key while writing code. To change the indent spacing or tags that automatically indent, see Setting coding preferences.

If you don't find the HomeSite Editor toolbar item you're looking for in the Dreamweaver View Options menu, then it's probably in another location. The following table maps Editor toolbar items to Dreamweaver.

Note: Editor toolbar items that are not available in Dreamweaver are not included in the table.