Getting Started with Adobe Dreamweaver CS5 - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 28

Below the Document toolbar is the workspace where you create and edit Web pages.
You can use the view buttons on the Document toolbar to change how the information is
displayed in the workspace. The three views are as follows:

• Design view. Displays the page as it will appear in a browser. Design view is the
primary view used for designing and creating a Web page. In Design view, all of the
HTML code is hidden so you can focus on how the fi nished product will look. In
Design view, the home page of the Old NextBest Fest site looks the same as it does in
a browser.
• Code view. Displays the underlying HTML and CSS code that Dreamweaver generates
as you create and edit a page. You can also enter or edit code in this view. Code view
is used primarily when you want to work directly with the HTML code.
• Split view. Divides the Document window into two vertical panes. The left pane shows
the underlying code and the right pane shows the page as it will appear in the browser.
You can move easily between the panes to either edit the code or change the design.
Split view is used primarily to debug or troubleshoot a page.

You can also use Split
view to divide the
Document window into
horizontal panes.

You'll look at the home page of the Old NextBest Fest site in the different views. The
fi lename of the home page is index.html because this page displays by default when the
user has not requested a specifi c fi le in the URL.

To display the Old NextBest Fest home page in different views:

◗

1. In the Files panel, double-click index.html . The Old NextBest Fest home page
opens in Split view. See Figure 1-14.

Figure 1-14 Home page in Split view

click t o switch
to Split view

design of the
open pag e

code o f the
open page

◗

2. On the Document toolbar, click the Design button. The home page is displayed in
Design view. See Figure 1-15.