Exploring the Dreamwaver Environment

Document Window

The Document Window is the main workspace where web pages are created and edited using the panels and toolbars. Embedded within is the document toolbar that includes three main viewing options: Code, Split, and Design. These three viewing options help you view and manipulate your web pages.

Changing Views

Code View - This option allows you to view your web page's entire HTML coding as it is generated by Dreamweaver 8. Many designers use this option in order to enter or edit the HTML code.

Split View - This viewing option divides both the Design and Code view to allow you to see the HTML coding as you lay out your website. The upper pane displays your HTML code while the lower pane shows you the page as it will appear in the web browser. This view allows a designer excellent mobility between the coding and the layout. It is also best used when you want to debug or troubleshoot a web page.

Design View - This option is the primary view that allows you to view your web page the way it will appear in your web browser. Take note that when you are viewing your web page in this view, all of your HTML coding is hidden. The finish product should look the way it does in this viewing option.

Insert Toolbar

This toolbar is called the Insert toolbar which allows you to create new objects, which in Dreamweaver 8 is anything that is manually inserted onto your Document Window. The buttons found in this toolbar are organized into categories. When a category is selected, it appears at the top of the bar with the tab highlighted in white. The different categories appear above the icons

Common - Creates and inserts objects like images, templates, media elements, and tables.
Layout - Draws and inserts tables, layers, div tags, and frames, as well as switch between Standard view, Layout View, and Expanded Table View.
Forms - Creates and inserts form elements in pages that include interactive forms.
Text - Insert text and list formatting tags, such as bold <strong>, unordered list <ul>, and paragraph <p> or open the Font Tag Editor.
HTML -Applies HTML styles, such as headers, bolds, and italics.
Application - Inserts dynamic elements, such as record sets and repeated regions.
Flash Elements - Inserts Flash elements.
Favorites - This new feature helps you organize the most commonly used elements from the Insert Bar. This is helpful for designers who constantly use specific features in the Insert bar.

Property Inspector

The Property Inspector is a toolbar located beneath your Document Window. This toolbar contains a series of buttons for examining and editing attributes of any page element that is currently selected on your web page. Take note that your Property Inspector buttons and options may change to reflect any attributes of any selected element.

Status Bar

The Status bar is small panel located at the bottom of your Document Window. The Status bar in Dreamweaver consists of three things: the Tag Selector, Window Size menu, and Document Size/Estimated Download Time.

o Tag Selector - Pictured here - Shows your entire HTML tags as located and selected in your Document Window. You can also quickly select any HTML tag by simply clicking on any of the tag symbols. This is best when web pages become more dynamic and elaborate, you can keep track of all of your HTML tags.

o Window Size menu - This allows you to view your Document Window's current dimensions in pixels (i.e. 1058 x 700). These numbers can change when you resize your Document Window or you can set a specific dimension by manually resizing the window or by selecting a dimension from its drop down menu.

o Document Size/Estimated Download Time - Shows your web page's current size in kilobytes (K) and the approximate amount of time in seconds it would take to download the page over a 28-Kbps modem. (i.e. 4K/1sec).

Panel Group

Panels in Dreamweaver are grouped together into panel groups. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups. Panel groups can also be docked to the integrated application window (Windows only). This makes it easy to access the panels you need without cluttering your workspace.

CSS Styles Panel

The CSS Styles Panel lets you track the cascading style sheet rules and properties that affect a current page element (Current Mode), or the entire document (All Mode). A toggle button at the top of the panel allows you to switch between the two modes. You can also modify the CSS properties in both All and Current mode.

The Files Panel

You use the Files panel to view and manage the files in your Dreamweaver site. When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files. When expanded, it displays the local site and either the remote site or testing server. The Files panel can also display a visual site map of the local site. For Dreamweaver sites, you can also customize the Files panel by changing the view-either your local or remote site--that appears by default in the collapsed panel.