This chapter will familiarize you with Dreamweaver’s Document window and some common elements you’ll use within it. These topics will help orient those who are familiar with HTML or earlier versions of Dreamweaver, but may be new to Dreamweaver 4. Although you should plan your site before beginning serious production work, this chapter will help you perform quick edits on existing pages and get immediate hands-on experience. For those who prefer the “top-down” approach, refer to Part II, which covers site management.
Your use of Dreamweaver will rely heavily on the Dreamweaver user interface (UI) objects discussed in this chapter. Macromedia’s documentation variously refers to Dreamweaver’s UI components as panels , inspectors, editors, bars, windows, and palettes, and we follow those conventions when referring to them individually. For convenience, we use the term panels to refer to them collectively.
This chapter covers:
The Document window in its various views, plus its Toolbar and status bar
The Objects panel and its respective categories
The Property inspector and its selection of options
The Launcher bar used to access other Dreamweaver panels, such as the Behaviors, CSS Styles, HTML Styles, and Timelines panels.
In later chapters, we’ll cover the interface options that control such things as tables, layers, frames, forms, markers, rulers, gridlines, and tracing images. With these options, Dreamweaver stands above other visual development tools.
can be accessed
right-click on Windows or Ctrl-click on the
Macintosh. Use this shortcut when the book tells you to choose an
option from the contextual menu. These menus vary, depending on which
window or object you click.
Code and Design view (View → Code and Design), shown in Figure 1-1, shows the Code and Design panes simultaneously. Resize the two panes by dragging the horizontal line that separates them. Use the View → Design View on Top option to reverse the location of the panes.
You can switch view modes using the View → Switch Views command, Ctrl+Tab (Windows), or Opt+Tab (Macintosh). While in Code and Design view, the Switch Views command moves the cursor into the other pane; otherwise, it toggles between Code view and Design view.
Text can be typed directly into the Design pane. Dreamweaver automatically creates the necessary HTML when you insert objects using, say, the Objects panel. Edits performed in the Design pane are reflected immediately in the Code pane.
You can hand-edit the HTML code directly in the Code pane, but the visible results, if any, won’t appear in the Design pane until it is refreshed. The Design pane refreshes automatically when switching from Code view to Design view, but not when switching from Code view to Code and Design view.
This option helps to avoid hand-coding errors by highlighting unsupported and unmatched tags in yellow. Reevaluate the HTML in the Code pane by using the shortcuts in the preceding tip. The Design pane always highlights errors.
While in Code view, some menu options that are ordinarily available
in Design view are inactive. You can use some menu options, such as
those under the Insert menu in Code view. Use caution, however,
because they’ll insert HTML wherever your cursor is, which may
put the HTML in an invalid place, such as outside the
The Document window has a convenient
with icons for commonly used operations. Use View → Toolbar,
Ctrl+Shift+T (Windows), or Cmd+Shift+T (Mac) to ensure that the
Toolbar is visible. The Toolbar, which changes according to the type
and contents of your document, lets you switch among
view modes and access other common
functions as indicated in Figure 1-2.
at the bottom of the Document
window, as shown in Figure 1-3, contains the Tag
Selector, Window Size pop-up menu, and the Mini-launcher bar. It also
shows the current document’s size and estimated download time.
The status bar can be configured under Edit
→ Preferences → Status Bar or by clicking the
Edit Sizes option in the Window Size
selector as described in Chapter 18.
is visible only in Design view or when
the Design pane is active in Code and Design view. It displays the
HTML tags that control the currently selected item. The tag of the
exact selection is shown in bold, and you can change the selection by
clicking the other tags that appear in the Tag Selector. See Section 7.1.5 in Chapter 7.
Window Size pop-up
makes it easy to preview your pages at
various screen sizes. The usable screen area is usually less than the
monitor resolution due to the toolbars and borders associated with
typical browsers. Because HTML window sizes are fluid, this setting
has no bearing on the window size when the document is viewed in the
the window in which your HTML page is displayed.
The document size shown in the Status bar is the size of the HTML page plus the size of any images or media files used in the document. The download time estimate is based on a 28.8 Kbps connection, but the target connection speed can be configured under Edit → Preferences → Status Bar. Most users have a 56 Kbps connection, but a more limited number have faster connections (ISDN, DSL, cable, satellite, and T1).