Free Online Classes

Get a good understanding of how the Dreamweaver CS3 workspace works. If you are new to Dreamweaver, this is a must read tutorial before continuing to other tutorials.

Workspace overview

The Dreamweaver CS3 interface is designed to let you create web pages without having to frequently use the menu bar to access commands.

• The Insert bar contains various objects that can be inserted into a document. Each object is a HTML code with various attributes that can be applied. For example, clicking on the Image button in the Insert bar will let you insert an image and apply different image settings into the document.
• The Document toolbar contains buttons that let you view the document in different views and buttons that contains common operations such as previewing the page in an Internet browser.
• The Document window displays the contents of the document. It can be switched between three views: code, split, and design view using the buttons in the Document toolbar.
• The Panel groups are sets of panels grouped together that can be expanded or collapsed.
• The Files panel lets you browse and manage your file and folders on your computer or on a remote server.
• The Property inspector lets you view and edit the properties for the select object or text. For example, when you click on an image in the Document window, the settings for the image will appear in the Property inspector to let you view or change the settings.
• The tag selector shows the HTML tag the selected item is enclosed in and lets you select the contents of the tag by clicking on the tag in the tag selector.

Insert bar

The Insert bar holds buttons for creating and inserting objects into the document. The buttons are categorized using a tab system. Click on a category tab to view the set of buttons related to the tab.

• The Common category contains buttons for creating and inserting commonly used objects such as tables and images.
• The Layout category contains buttons related to the creation of the layout. You can insert div tags, Spry objects, tables, and frames.
• The Forms category contains buttons for creating forms and elements.
• The Data category contains buttons related to Spry data objects and various dynamic elements such as repeated regions, update forms, and record insertion.
• The Spry category contains buttons for creating Spry pages and widgets.
• The Text category contains buttons that let you insert and format text.
• The Favorites category is for you to customize with your favorite or most frequently used buttons.

Document toolbar

The document toolbar contains buttons that let you switch to three different view in your document window and contains buttons for viewing and transferring.

• The Code, Split, and Design view buttons let you switch the view in the Document window.
• The Document Title field lets you enter the title for your document. This title is displayed on the Internet browser's title bar.
• The File Management button opens the File Management menu containing commands for setting the status of the document.
• The Preview/Debug in browser button lets you preview your document in an Internet browser.
• The Refresh Design View button refreshes the document window. This is useful when you made a change in the Code view and want to view the changes in the Split view mode.
• The View options button contains visuals and information that you can turn on or off to help you when you're editing a document.
• The Visual Aids button contains visual aids that can be turned on or off.
• The Validate Markup button lets you check if the current document passes certain validations.
• The Check Browser Compatibility lets you check if the CSS code is compatible with different Internet browsers.

Document window

The Document window is where you do most of the editing for the current document. You can toggle between three different view modes by clicking on the buttons in the Document toolbar.

• The Code view button displays the code of the document.
• The Split view displays the Code and Design view together.
• The Design view displays the WYSIWYG (What you see is what you get) editor.

The Split view and Design view is not available if the document is a code-based file (ex. XML, JavaScript, CSS).

Property inspector

The Property inspector displays the properties related to the currently selected object in the Document window. For example, when you click on an image, the properties for the image will be displayed in the Property inspector. Inside the Property inspector, you can change the settings and perform various tasks related to the selected object.