3.

2 The Toolbar SYBSC SE: Web Technology

The Standard toolbar

When first enabled, the Standard toolbar appears across the top of the Dreamweaver window,
whether you’re in Design view or Code view. As shown in Figure 3-10, the Standard toolbar
offers some of the most frequently used editing commands, familiar to you from any word
processing program.

Figure 3-10: The Standard toolbar contains frequently used editing commands.

The first group of buttons you find on the Standard toolbar includes New Document, Open,
and Save. These create a new document, open an existing document, and save the current
document, respectively. The Save All button saves all open documents. The next set of buttons
includes Cut, Copy, and Paste. These enable you to place a selected item on the clipboard,
and paste it in another location. The final buttons on the Standard toolbar are the
all-important Undo and Redo. Undo removes the effects of the last action you performed, and
Redo repeats the most recent action or performs an undone action again.
The Standard toolbar itself is toggled on and off by choosing View Toolbars Standard. On
Windows, you can reposition the Standard toolbar by clicking one of the separator bars
between the toolbar buttons and then dragging. If you drag the standard toolbar away from
the edge of the window, it becomes a floating toolbar. You can dock the standard toolbar by

Page 1 of 5
3.2 The Toolbar SYBSC SE: Web Technology

dragging it to the top or bottom edge of the window. On a Macintosh, the Standard toolbar
cannot be repositioned.
The Document toolbar
The Document toolbar gives you quick access to commands that affect the entire document.
Like the Standard toolbar, you can hide and show the Document toolbar with a menu command:
View Toolbars Document. One of the Document toolbar’s best features is the
quick and easy access it offers to changing your Web page’s title, as shown in Figure 3-11.

Figure 3-11: The Document toolbar offers easy access to an important element of a
Web page, the title.

The first set of buttons in the Document toolbar is dedicated to the various views: Code,
Code and Design, and Design. These buttons are mutually exclusive, as only one view can be
shown at a time. To the right of the first three buttons is one more view-related button: Live
Data view. As previously explained, when Live Data view is enabled, Dreamweaver sends your
page to the testing server and incorporates the results in an editable format on the screen.
When you switch to Live Data view, another toolbar becomes visible; this is described later in
this chapter, in the section called “The Live Data toolbar.”

Next to the Live Data View button is a text field for displaying and altering the title of your
document. Dreamweaver, by default, titles every new page “Untitled Document.” Not only is it

Page 2 of 5
3.2 The Toolbar SYBSC SE: Web Technology

considered bad form to keep this default title, search engines need a relevant title to properly
index a site. To change a page title, enter the new text in the Title field and press Enter
(Return) to confirm your modification.
Managing files
The File Management button, next to the Title field, contains Web publishing–related commands.
While maintaining a Web site, you’ll often be required to make small alterations such
as changing a bit of text or rescaling an image. I prefer to post these changes as quickly as
possible to get the work off my virtual desk. The Get and Put options, along with the Check In
and Check Out options, found on the Document toolbar under File Management, greatly simplify
the process and speed up my work. Note that these commands are only available if you
have defined a remote site as part of your site definition.
Under the File Management button, you’ll find the following options:
 Turn off Read Only: Unlocks the current file for editing. This command is enabled only
 if the current document is marked as read-only. (On the Macintosh, the Turn off Read
 Only option is called Unlock.)
 Get: Transfers the remote file to the local site.
 Check Out: Marks the file as checked out and gets the remote file.
 Put: Transfers the local file to the remote site.
 Check In: Marks the file as checked in and puts the file to the remote site.
 Undo Check Out: Replaces the local version of the page with the remote version,
 effectively undoing any changes made on the local file.
 Design Notes: Opens the Design Notes dialog box for the current page.
 Locate in Site: Selects the current page in the file listings of the Site panel. This
 command is only enabled if the current file has been saved.
Previewing and debugging your file
Although Dreamweaver gives you a good representation of what your page will look like when
rendered in a browser, it’s not perfect—even with Live Data view. There are so many variations
among the different browser programs—not to mention versions—that you absolutely
must test your page throughout the development process. Dreamweaver gives you the tools
for both previewing your page and debugging it (should JavaScript errors appear)—and you
can access those tools right from the Document toolbar.
Selecting the Preview/Debug in Browser button on the Document toolbar presents a dynamic
list of available browsers. All of the browsers entered in Preferences appear first, with the
primary and secondary browsers leading the list. After the preview commands, Dreamweaver
displays debug options for all the supported browsers installed on the local system.

Dreamweaver can preview in any browser you assign—however, the debugger

only works with specific browsers. As of this writing, only Internet Explorer 4
and later and Netscape 4.x are supported.

The final entry under the toolbar’s Preview/Debug in Browser button is Edit Browser List.
When invoked, this command opens the Preview in Browser category of Preferences,
enabling you to add, remove, or otherwise manage the browsers on your system in relation to
Dreamweaver.

Easy refresh and reference

The next two options on the Document toolbar are the Refresh button and the Reference button.
Use the Refresh button when you’ve altered code directly in the Code view and you’re
ready to apply those changes in the Design view; this option is especially useful when the
split-screen Code and Design view is in operation.
The Reference button opens the Reference panel, which contains reference documentation

Page 3 of 5
3.2 The Toolbar SYBSC SE: Web Technology

for HTML, JavaScript, style sheets, accessibility guidelines, and more. If a tag, attribute,
JavaScript object, or CSS style rule is selected, choosing the Reference button causes the
Reference panel to open to the pertinent entry.
Straightforward code navigation
Dreamweaver’s code editor offers a number of key features for programming and debugging
Web pages with increasingly complex JavaScript routines. Several of these features are
grouped under the Code Navigation button found on the toolbar. One such feature is the
capability to set breakpoints. Breakpoints are markers that temporarily halt the execution of
the code when running the JavaScript Debugger. When the program execution is stopped, you
can retrieve the current values of variables, and other information.
Although you can set breakpoints directly in the JavaScript Debugger, you can also set them
in Dreamweaver’s Code view. Position the cursor where you’d like the program to stop during
debugging and choose Set Breakpoint from the Code Navigation button. After the first
breakpoint
is set, two additional commands are dynamically added: Remove Breakpoint and
Remove All Breakpoints. Remove Breakpoint is only active when placed on the code line
where a breakpoint was previously applied.
The remainder of the menu items under the Code Navigation button display JavaScript functions
in the current page. Selecting any of these functions positions the cursor directly on
that piece of code in Code view. This capability makes it easy to quickly move from function
to function; it also tells you at a glance which functions are included in a page.
View options
View Options is a welcome but somewhat schizophrenic button found on the far right of the
Document toolbar. The options that it makes available depend on the view mode currently
employed. If, for example, you’re in Design view and choose View Options, you’re given the
option to hide various visual aids, such as table borders or frame borders, individually or all
at once. If, on the other hand, you’re in Code view, View Options toggles code-oriented functions
such as Word Wrap and Line Numbers. Best of all, if you’re in the split-screen Code and
Design view, you get both sets of view options! The view options (all of which act as toggles)
under Design view are as follows:
 Hide All Visual Aids
 Visual Aids Table Borders, Layer Borders, Frame Borders, Image Maps, and Invisible
 Elements
 Head Content
 Rulers
 Grid
 Tracing Image
 Design View on Top
When in Code view, the View Options are as follows:
 Word Wrap
 Line Numbers
 Highlight Invalid HTML
 Syntax Coloring
 Auto Indent
The Live Data toolbar
Dreamweaver’s Live Data view has its own toolbar, shown in Figure 3-12. Enabling the Auto
Refresh option forces Dreamweaver to update the data in the page whenever its data format
is altered. For example, if you include a date field in your page, you might want to alter the
format from something like March 31, 2002 to 31 March, 2002. The Auto Refresh option is
particularly helpful when your data is enclosed by a Repeat Region server behavior. Auto
Refresh, however, does not apply when the HTML formatting is modified; for example, making

Page 4 of 5
3.2 The Toolbar SYBSC SE: Web Technology

selected text bold or altering its color. To see the HTML format changes applied to all the Live
Data, you’ll need to select the Refresh button on the Live Data toolbar.

Figure 3-12: Live Data view has its own toolbar. Live Data toolbar

The Live Data toolbar also includes a field for entering URL parameters. This feature is handy
when the dynamic content on your page requires an argument passed from a form or other
method. By entering different values in the URL field, you can test your page under a variety
of different data conditions.

Page 5 of 5