Author: Jeremy Reis
Dreamweaver’s interface makes it easy to design and manage both simple and complex web sites by providing a point-and-click interface that simplifies most tasks. Designers can drag and drop page elements in Design view, while developers can work directly with the page’s code, making use of the various tools Dreamweaver provides for ensuring correct syntax.
As in previous versions of Dreamweaver, the Property Inspector lets you specify attributes for the text and objects you insert, but includes an additional view for working with CSS. Commands are available in the Dreamweaver menus, as well as the panel groups, which can be expanded, collapsed, floated and hidden as necessary.
Dreamweaver Workspaces
Dreamweaver CS4 makes it easy to customize the workspace for your particular workflow. It includes eight predefined workspace layouts targeted for application developers, coders and web designers, as well as the ability to create and save new workspaces. You can switch quickly between workspaces using the pop-up menu in the upper right-hand
portion of the screen:
The different workspaces all include the same elements (a Design or Code window, panels and toolbars), but Dreamweaver arranges them for enhanced workflow, displaying and hiding elements as appropriate for the development task. For example, the Designer workspace, which is used throughout this tutorial, features a large Document window with panels running vertically along the right side of the screen. The Property Inspector is displayed by default:
The App Developer workspace displays a split Design/Code view with the most common application development panels expanded along the left side of the screen. By default, the Property Inspector is not displayed:
The updated CS4 interface groups the Insert tools in a panel, but Classic view restores the earlier Dreamweaver interface, with the Insert bar running horizontally along the top of the Document window:
Dual Screen is ideal for users with two or more monitors. It displays the Document window with floating panels on the left side and the Code Inspector expanded on the right side:
If the workspace pop-up is hidden, you can switch workspaces by opening the Window menu and selecting Workspace Layout and then the layout you want to use.
As you display, hide, arrange and size workspace elements, you begin to customize a workspace that best suits your needs. You can save it by selecting New Workspace from the workspace pop-up menu. When prompted, give your workspace a name. The name appears at the top of the workspace menu:
To delete or rename your customized workspaces, select Manage Workspaces from the pop-up menu, then select the workspace from the dialog box that appears and click Rename or Delete as appropriate.
Document Window
The main workspace element in Dreamweaver is the Document window. This is where you add elements to your web page, either using Dreamweaver’s WYSIWYG (What You See Is What You Get) interface, or by typing the HTML code.
Dreamweaver uses tabs for organizing multiple open documents; the tabs appear from left to right at the top of the Document window, and can extend beyond the viewable area of the window. When this happens, arrows are displayed at both ends, which you can click to scroll horizontally through the tabs.
In the upper right-hand portion of the window, Dreamweaver displays the full path to the location of the current document.
At the bottom of the Document window, starting in the left corner, the Tag Selector displays the HTML code surrounding your cursor. You can select one of these tags (and the corresponding element on the page) simply by clicking it with your mouse.
The bottom right-hand portion of the window includes tool shortcuts and document information. The first three buttons let you switch between the Select tool, the Hand tool (which lets you pan around a document) and the Zoom tool. You can also entire a magnification directly into the field following the Zoom tool icon.
The Download Size/Download Time pop-up menu lets you select a window size for your document. The size of the window (along with the sizes of the objects included in your pages) impacts the speed at which a viewer can download the page. When you select a size from this menu, Dreamweaver automatically updates the speed displayed to the right of the menu.
Document Views
Dreamweaver offers three document views: Design view, Code view, and Split view, which displays both Design and Code views in a split window. In Design view (shown above), you can draw elements on the page, drag and drop images, and type text as you would in a word processor. The page appears as it will to viewers.
Code view lets you edit the code for a page:
Dreamweaver’s live syntax coloring helps you distinguish between different kinds of tags. In addition, when you type in Code view, Dreamweaver provides code hints based on the first few letters you type. For example, if you type a bracket (<), a menu pops up with a list of valid tags:
When you select a tag from the list, Dreamweaver inserts it into the document. For example, select a from the list and press Enter to insert it. Then press the space bar on your keyboard. Another menu pops up with a list of additional tags:
To complete the code to insert a hyperlink in your document, select href from the list and press Enter. Dreamweaver inserts the HTML code using the correct syntax, and even lets you browse for the file you’re linking to.
Notice that it also inserts the quotation marks that are required to enclose the link.
Tip:
To learn more about HTML tags, select Reference from the Help menu. This displays the O’Reilly HTML Reference book, which provides a list of HTML tags and their attributes. A number of books are available through this panel; you can see them by opening the Book menu:
Split view splits the Document window to display both Code and Design views. This is useful when you want to view the effects of any changes you’re making to the HTML code.
Tip:
Your changes may not appear in the Document window until you save the document or click the Refresh Document View button 
on the Document toolbar.
Dreamweaver CS4 also gives you the ability to customize how Split view is displayed. By default, the Code window appears over the Design window, but you can flip-flop them by selecting Design View on Top from the View menu. (To switch back, just uncheck the command in the menu by clicking on it again.)
Alternatively, you can split the window vertically rather than horizontally: from the View menu, select Split Vertically. When the window is split vertically, you have the option of displaying the Design view on the right (the default) or the left (by selecting Design View on Left from the View menu).
The Layout button on the main Dreamweaver menu bar includes a Split Code option, which splits the Code window into two separately scrollable regions. From this menu, you can also split the screen vertically.
Along the top of the window just below the document tabs, Code and Split views display buttons for opening files associated with the active file; for example, if you’ve attached a CSS file to the document you’re working in, a button for that file appears here, so you can click it to open the file and work directly in the CSS. If you’ve split the screen in two and open one of the associated files, it fills one region but not the other, so you can work in the two files side by side:
Recent Comments