Mastering the Dreamweaver workspace

Until you have opened an existing page or created a new HTML page, the Dreamweaver tools and workspace will not be available. With a page open to enable the Dreamweaver workspace, the example in Figure 7 has been labeled for your reference.

Figure 7. Dreamweaver workspace shown with "split view" selected form the Document toolbar

You will see similarities between the FrontPage interface and Dreamweaver's workspace. Both have a document window with a choice of design view, code view, or a split view that lets you have the best of both, which you can select in Dreamweaver using the Document toolbar. You can select any element in your page using Dreamweaver's Tag Properties (see Figure 8) as you would by using the Quick Tag bar in FrontPage.

Figure 8. Tag properties on the left and page information on the right

The Page Information section displays page size, weight, and approximate download time, similar to FrontPage but without its target browser setting; Dreamweaver uses the Doctype to target specific web standards in writing HTML and CSS, instead of targeting specific browsers.

The primary differences between the FrontPage interface and the Dreamweaver workspace are as follows:

• Insert bar: Quick access to objects, page layout tools, form, text and applications
• Property inspector: Displays the attributes and style information for selected elements with the ability to modify the properties in the inspector
• Panels in the Panel Group: holds Dreamweaver panels for a variety of functions and management tools

The Document toolbar (see Figure 9) offers more than the ability to set the page view in the Document Window. You can run validation reports to check not only against the specified doctype but also for browser-specific issues. Previewing your page in the browsers you have installed on your computer is just one click away. Unlike FrontPage 2003, there is no Preview Pane, because previewing in your browser is much more accurate. If you use the rightmost button on the Document toolbar to turn off all Visual Aids in Design view, you will have a display that is as effective as the FrontPage Preview Pane.

Figure 9. Quick access to common web page tasks in the Document toolbar

The Panel Group opens with four panels by default (see Figure 10). Dreamweaver 8 uses Cascading Style Sheets (CSS) to format your web page display, as recommended by the World Wide Web Consortium (W3C), which sets web standards. The Application panel provides quick access to databases and other side applications depending on the server type you selected when you defined your site. If you are creating an HTML-only site, you can close this panel by using the menu button in the right corner, or, on theWindow menu, deselect Applications. The Tag inspector tells you at a glance what attributes the element you have selected is using, and allows you to add or change values.

Figure 10. Default panel group

You can expand or contract the individual panels by using the arrow next to the panel name. If you would like to have a larger document workspace, collapse the panels group using the arrow in the center of the left side of the panel group. The Window menu (see Figure 11) offers more panels that you can add to your group.

Figure 11. Window menu offering more panels available for common web tasks

At first glance, the Files panel (see Figure 12) appears similar to the FrontPage Folder List, but with more features. The Files panel not only provides access to your files and folders, but enables you to publish and view your remote website without leaving the main workspace. By using the Assets tab, you can see the colors, images, links, and other objects used in your site. In addition, from the last button on the Assets tab, you have access to Library items, which are more versatile than FrontPage Includes. The Snippets tab provides access to dozens of frequently used bits of code, such as pop-up form fields for months and days.

Figure 12. Site management tools for publishing and managing your site located in the Files panel

The Property inspector is roughly equivalent to the FrontPage Format toolbar combined with the FrontPage Hyperlink Wizard. In Figure 13, an anchor tag is shown in the Tag Selector to show you how quickly you can check a link address and see what styles the selected element is inheriting.

Figure 13. Property inspector showing properties of a hyperlink or other element

The Insert bar (see Figure 14) offers capabilities similar to the Insert > Web Component feature in FrontPage 2003, but does not rely on proprietary methods for inserting Flash, database interactions and other objects.

Figure 14. Most FrontPage users will find the tab layout for the Insert bar helpful in learning its features

Page 3 of 6

Previous Page

Next Page