CHAPTER ONE

Exploring the
Dreamweaver
Environment

Dreamweaver, with its multidimensional set of features for managing every

aspect of Web and page design and management, has never been famous for
an accessible environment. After five years of using and teaching Dream-
weaver nearly every day, I continue to stumble on (or have students dis-
cover) timesaving techniques, hidden features, and better or more conve-
Please cut nient ways to access frequently used techniques.
about 2 para- In this introductory chapter, I’ll survey the key elements of the Dream-
graphs weaver interface, and the best ways to access tools and features that you
need to survive while you build a complex (or basic) Web site.
I won’t waste our compact and precious space surveying features like
Dreamweaver’s Start Page. There’s nothing wrong with the Start Page, but
I’ll assume that you’re capable of clicking a link to a feature without my
explaining that the link launches the feature. (Of course, I’ll explain what
these features do throughout the book.)
One of the joys of Dreamweaver 8 is that the unfortunate separation of
the Mac and Windows versions that marred Dreamweaver MX 2004 has been
rectified. While Dreamweaver 8 for OS X and Dreamweaver 8 for Windows
each adopt the standards of the respective operating systems, they have the
same features. The minor and understandable exception is the availability
of a Homesite-type environment for Windows users, which I’ll explain in #1,
“Workspace Setup for Windows.”
I’m the kind of person who prefers to skip this chapter in a book; I’d
rather just click stuff, guess, and discover my way around an interface. For
some applications, that works. In other cases, I sheepishly return to the
“interface” chapter days, weeks, or years later. Prefer to throw darts at
Dreamweaver and see what works on your own? Go for it. When you get
frustrated trying to figure out how to separate tabbed panels, or you begin
to suspect that you’re stumbling through a maze to find form design tools
instead of using an easier approach, this chapter will be here waiting for
you.
That said, if there is a single chapter I’d advise reading all the way
through, it is this one. Why? Because a basic grounding in the sometimes
odd logic of the Dreamweaver interface can save you tons of stress and
strain, regardless of what you are doing in Dreamweaver.

Dreamweaver_ch_01(C).indd 1 5/18/06 4:31:19 PM

 2

#
1 Workspace Setup
for Windows
Windows users launching Dreamweaver 8 for the first time will
Designing Pages in be prompted to choose between Designer and Code workspaces.
Code view or the Code The Code workspace is for page designers who want to write their
Inspector own code—HTML (for page formatting) JavaScript (for animation
Dreamweaver 8’s Document win- and interactivity), CSS (for sitewide and page-specific formatting
dow provides three views: Code, rules), and so on. Most people use Dreamweaver because they don’t
Split, and Design. Code (and want to write their own code; they want to design page elements in
Split) views facilitate develop- a graphical environment and have Dreamweaver generate code for
ers who want to write their own them. To utilize the code-generation capabilities of Dreamweaver,
markup code, rather than have most users will want to choose the Designer workspace. And, of
Dreamweaver generate it. These course, you can flip between views.
views are covered in #2, “Explor-
ing the Document Window.” Tip
Dreamweaver’s Code Inspec- The Code workspace (not to be confused with Code view—which is
tor window—available in both available in both versions of Dreamweaver 8) is one of the few remaining
Windows and Mac versions—is differences between the Windows and Mac versions of Dreamweaver.
accessed from the Window Dreamweaver 8 for Windows and Dreamweaver 8 for Mac are essen-
menu (Window > Code Inspec- tially the same program. So why the Code workspace for Windows? Just
tor). The Code Inspector is a as humans have retained some anatomical attributes of our evolution-
highly functional code-writing ary ancestors, the two versions of Dreamweaver have minor differences
environment with a toolbar that due, in part, to the fact that Dreamweaver for Windows inherits a user
provides prompts as you enter base of designers who migrated to Dreamweaver through a Web design
code, and prepackaged code program called Homesite.
snippets. The Code Inspector Mainly to accommodate (former) Homesite designers, Dream-
allows you to collapse or expand weaver for Windows provides the Code workspace layout. When you
sections of coding, making it
launch Dreamweaver for Windows for the first time, the Workspace
easier to focus on and edit sec-
Setup dialog box prompts you to choose between Designer view
tions of code.
and Code view (Figure 1a).

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 2 5/18/06 4:31:20 PM

 3

Windows and Mac—

Tabbed Documents
Dreamweaver 8 equalizes the
Windows and Mac versions of
Dreamweaver, so that all essen-
tial features are available in both
versions. Both versions of Dream-
weaver allow you to view mul-
tiple open Web page documents
as tabs in the Document window.

Figure 1a Choosing Designer view.

If, at any point, you want to switch to or from Code view in Dream-
weaver 8 for Windows, choose Window > Workspace Layout > Designer
to return to the normal Dreamweaver interface (Figure 1b).

Figure 1b Choosing
Designer mode.

1: Workspace Setup for Windows

#

Dreamweaver_ch_01(C).indd 3 5/18/06 4:31:21 PM

 4

#
2 Exploring the
Document Window
The Document window is the basic workspace in Dreamweaver. The
Choosing a Document Document window is where you design Web pages; you can create
Type (DTD) or paste text, embed images, define links, or place and sometimes
Dreamweaver 8 uses XHTML 1.0 create page elements like style sheets (that control the look of a
Transitional as the default docu- page), input forms, animation, and interactive objects (that react
ment type for HTML Web pages. to actions by a visitor). In short, the Document window is where
By generating XHTML-compat- you will spend the bulk of your time in Dreamweaver. Even if you
ible coding for your Web page, have some familiarity with creating pages in Dreamweaver, there
you allow your Web page to are many features rooted within the various elements of the Docu-
integrate cutting-edge dynamic ment window, so it is worthwhile to explore them in some detail.
data content—content that is
You’ll see the Document window when you open an existing Web
updated at a remote source and
page or when you create a new one. Use the File menu to open an
embedded (updated) in your Web
page. Such dynamic data sys- existing Web page (File > Open, or File > Open Recent to access a list
tems are issues that are decided of recently opened pages) or to create a new Web page (File > New).
at systemwide levels, not by a When you choose File > New, the New Document dialog opens.
Web page designer. But again, Throughout this book we will explore some of the more useful
by accepting Dreamweaver’s Categories of new documents, but the first and main type of new
default document type of XHTML document you’ll create in the New Document dialog is a Basic page,
1.0 Transitional, you embed the and the basic and main type of Web page you’ll create is an HTML
ability to interact with and dis- page (Figure 2a).
play dynamic data at any stage of
system development.

Figure 2a New Document dialog, with a new HTML Web page selected.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 4 5/18/06 4:31:21 PM

 5

Clicking the Create button in the New Document dialog gener-

ates a new page, and opens that page in the Document window.
As noted, the Document window is where you (and Dreamweaver)
do the bulk of your work. As a result, the Document window is
crammed with features. The objects floating around in the Docu-
ment window are mainly panels, menus, and toolbars, which we’ll
explore in the following How To’s in this chapter. But there are
plenty of useful (and sometimes unintuitive) features in just the
Document window that should be part of your design arsenal.
The Document window can display with three views: Code, Split,
and Design. Code view displays only code, and is used by designers
who wish to bypass Dreamweaver’s ability to generate code. Design
view hides most code, providing a graphical design interface. Split
view displays code on the top of the Document window, and a
graphical design environment on the bottom (Figure 2b).

Figure 2b Split view in the Document window displays code on top, and a
graphical design interface on the bottom.

2: Exploring the Document Window

#

Dreamweaver_ch_01(C).indd 5 5/18/06 4:31:22 PM

 6

There are a number of advantages to working in Split view, espe-

Create a Site Before cially for designers who are not comfortable or proficient in writing
Creating a Document their own code. Split view is a way to familiarize yourself with cod-
While you will spend the vast ing, since generated code appears as you create elements in the
majority of your time with graphical design window. And, even though Dreamweaver is the best
Dreamweaver in the Document existing program for generating HTML and other page layout code,
window designing Web pages, there are times when the only way to troubleshoot a design problem
the first step in creating a Web is to edit the code directly. If you edit code in Split view, you can
site is to define the site. Defin- see the effect by clicking in the lower (graphical) window.
ing a local Web site ensures Stripped of menus and panels, the main features available in the
that, as you embed files (like
Document window are rulers, the tag selector, and the status bar.
images) in your Web pages, and
Horizontal and vertical rulers provide a quick way to judge the size
as you define links between your
Web pages, the connections of your page and objects on it. Hide or change ruler attributes by
between these linked files will choosing View > Rulers from the menu. The View > Rulers submenu
be maintained. lets you show or hide rulers, and change unit of measurement from
Relying on Dreamweaver to the default pixels to centimeters or inches.
manage links between your The Tag selector, on the left side of the status bar on the bot-
files becomes even more useful tom of the Document window, allows you to select specific tags
when you upload Web pages to for editing in the Properties Inspector (the Properties Inspector is
a remote server (an intranet or examined in #3, “Viewing Panels and the Properties Inspector”). It
Internet site). is especially handy when you’re working with objects like tables or
If you are stepping into a Web embedded CSS (page design objects) and simply clicking an object
design project in which the local in the Document window itself can be difficult.
Dreamweaver site has already The right side of the status bar has some handy and exciting
been defined, you can create tools new to Dreamweaver 8.
additional pages within that site
without worrying about the site • The Select and Hand tools provide two ways to navigate
definition. If you are starting a around your document—with the Hand tool working like
new Web site from scratch, you similar tools in Photoshop or Illustrator—allowing you to
should define your site before grab a section of the page and drag it in or out of view.
saving Web pages. See Chap-
ter 3, Defining a Web Site, for
• The Zoom tool is a long demanded way to draw a marquee
details on how to define a local and enlarge a section of a page.
Web site. See Chapter 4, Con- • The Set Magnification drop-down menu is another way to
necting to a Remote Server, for define magnification.
information on how to connect
that local site to a remote site. • The Window size display tells you the size of your design
window—normally in pixels.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 6 5/18/06 4:31:23 PM

 7

• The File Size/Download Time display estimates download

time for the page parameters (Figure 2c). Setting Connection Speed
When you define download
speed in the Status Bar cat-
egory of the Preferences dialog,
you can choose from presets
in the drop-down menu. Oddly
enough, these presets don’t
include many typical download
speed options, like 256 kilobits
per second, which is the cur-
rent standard for DSL or cable
Internet connections. To define a
custom download speed, simply
Tag selector Set Magnification type a value into the Connection
Select tool window size drop-down menu Speed box.
Hand tool File Size/Download Time display
Zoom tool
Figure 2c The Tag Selector and status bar.

You can adjust the units displayed for window size, or the connec-
tion speed used to estimate download time in the Status Bar category
of the Preferences dialog. On the Mac, choose Dreamweaver > Prefer-
ences, and in Windows choose Edit > Preferences, and then select the
Status Bar category to edit these parameters (Figure 2d).

Figure 2d Editing status bar parameters.

2: Exploring the Document Window

#

Dreamweaver_ch_01(C).indd 7 5/18/06 4:31:24 PM

 8

#
3 Viewing Panels and
the Property Inspector
Many of the features explored in other chapters and How-Tos in
this book are available in panels—rectangular boxes that are nor-
mally aligned to the right of the Document window. While each
panel obviously controls different features of your Web site or Web
pages, panels have some features in common.
Dreamweaver panels all provide access to very different features.
But there are display elements common to all panels (Figure 3a).

Panel grip Panel title bar

Expand/contract triangle Panel context menu button
Panel tab Panel context menu

Figure 3a Elements of Dreamweaver panels.

You can drag panels from their default position on the right side
of the Document window by dragging on the Panel grip.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 8 5/18/06 4:31:24 PM

 9

You can separate tabbed panels by choosing Group Assets with

from the Panel context menu, and then choosing New panel group Looking Forward to a
(Figure 3b). Common Interface with
Adobe Suite!
The inability to intuitively drag
Dreamweaver panels into panel
groups (as can be done with
Adobe applications like Illus-
trator, Photoshop, Photoshop
Elements, InDesign, etc.) is, to
put it undiplomatically bluntly,
annoying. I repeatedly acclimate
myself to using the Group Layers
with option in the Panel context
menu, only to lose my instincts
after jumping into Illustrator to
design a page graphic.
With the acquisition of Dream-
Figure 3b Separating a panel from a tabbed group. weaver by Adobe, we can
expect that future versions of
Dreamweaver will integrate the
Similarly, group panels with other panels as tabbed groups by
more intuitive method of stack-
choosing Group Assets with from the Panel context menu and select- ing and tabbing panels available
ing another panel to which the selected panel will be grouped. in Adobe applications.
You can expand or contract panels using the Expand/contract tri-
angle. To hide (or unhide) all open panels, press the F4 function key.
Display panels by selecting them from the Window menu. Active
panels display with checkmarks next to them in the Window menu.
The Properties panel is a unique and special type of panel. It
is adaptive in that it allows you to edit properties of a selected
object, somewhat similar to the Object bar in many Adobe appli-
cations. For example, if you select text, the Properties Inspector
makes available options for formatting type, including type size,
type font, type style, and link attributes (Figure 3c).

#
3: Viewing Panels and the Property Inspector

Dreamweaver_ch_01(C).indd 9 5/18/06 4:31:25 PM

 10

Other Uses of the

Properties Inspector
You will likely use the Proper-
ties Inspector mainly to apply
attributes to text and images.
But the Properties Inspector also
adapts to and provides format-
ting options for other selected
page elements.
If you select a table, you can
Figure 3c With text selected, the Properties inspector allows you to define
define table size, number of
type attributes.
columns, number of rows, cell
padding (space between cell
content and the edge of a cell), Or, if you select an image, the Properties inspector makes
cell spacing (space between available image formatting attributes, like image size, ALT text
cells), table background color, (alternate text to make your image accessible to visitors or brows-
and other attributes. If you ers that cannot view images), or hotspots (clickable linked areas
select a table cell, you can within an image).
define horizontal and verti-
cal alignment, cell width and
height, cell background color,
and other alignment and color
attributes.
Input forms and their embedded
form fields have attributes that
can be edited in the Properties
Inspector as well.
More complex page design ele-
ments like DIV tags and Layers
also have definable attributes
that can be edited in the Proper-
ties Inspector.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 10 5/18/06 4:31:26 PM

 11

#
4 Examining the Standard
and Document Toolbars
Many of Dreamweaver’s page design tools are most easily accessed
through toolbars. The Standard toolbar has some basic tools that Page Title and Page
are common to almost any application. The Document toolbar, on File Name
the other hand, provides access to an underappreciated set of rather Every Web page has both a file
powerful page design and management tools. The toolbars reside name and a page title. The file
at the top of the Document window, and are displayed (if they are name is the “internal” name—
hidden) by choosing them from the View > Toolbars menu. the way the file is identified and
The tools in the Standard toolbar allow you to create new files, located within a Web site, and
open existing files, print code, copy, cut, paste, and undo or redo the way browsers find the file.
an action. All these features are accessible from either the File or File names must be supported
by Web servers, and therefore
Edit menus (Figure 4a).
developers often avoid special
Print Code Cut characters and stick to alpha-
Save All Copy numeric characters and lower-
Save Paste case in defining page file names.
Open Undo While file names are not the
New Redo main or most obvious way visi-
tors will identify a page, they’re
not hidden or secret, so that
should be kept in mind when
Figure 4a The Standard toolbar. assigning file names.
Page titles are not part of the
The Document toolbar collects some of the most frequently used process of identifying or linking
tools used for page design and management. The three buttons on a file; they are an attribute of
the left allow you to toggle between Code, Split, and Design view the page that describes or sum-
marizes the page content for
(these views are discussed for both Mac and Windows users in #1,
visitors. They can contain spe-
“Workspace Setup for Windows.”
cial characters, including punc-
The Document toolbar also provides a convenient way to define tuation and spaces.
a page title—the page “name” that displays in the title bar of a
As noted, every page has a page
visitor’s browser. You define a page title by typing the text to be
title, but unless you assign a
displayed as a title in the Title box in the Document toolbar. page title, the default “Untitled
Page” page title appears in
browser title bars.

4: Examining the Standard and Document Toolbars

#

Dreamweaver_ch_01(C).indd 11 5/18/06 4:31:26 PM

 12

The rest of the Document toolbar tools are used for managing
documents, document display, and file management (Figure 4b).

Browser preview
Manage files between local site and remote server
Validate Markup
Browser compatibility error indicator

View options Refresh Design

Page title View options
Visual aids
I changed
Figure 4b Entering a page title in the Document window.
this to 5
rather than
Tip 5a because
Managing documents and file management involves transferring files there is
between a local site on your computer and a remote site at a server. File only one
management is explored in detail in How-To #18, “Transferring Files.” figure for 5.
Okay?
The browser compatibility error indicator display is based on
options you choose in the Validate Markup tool menu. You can
choose from a variety of Web standards in the Settings menu avail-
able from this tool, and then choose actions (validating the open
document, selected files, or all of the files in your site).
The File Management tool is a shortcut for managing files between
your local computer and a remote server. Site management is explored
in detail in Chapter 4, “Connecting to a Remote Server.”
The Preview in Browser tool allows you to see how your page
will look in a Browser window. View options include displaying (or
hiding) rulers, guides, and grids. Visual Aids include displaying
borders of tables, frames, and CSS objects—borders that are not
displayed in browsers, but are handy for design purposes.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 12 5/18/06 4:31:27 PM

 13

#
5 Viewing Style
Rendering Toolbars
The Style Rendering toolbar is another exciting CSS designer-friendly
innovation in Dreamweaver 8. With the advent of Dreamweaver MX Printable CSS
2004, Dreamweaver made Cascading Style Sheets (CSS) the default By providing an alternate page
method for applying formatting to type. When you choose type attri- (or site) style sheet for printing,
butes in the Properties Inspector, Dreamweaver generates CSS code you can allow visitors to print
instead of older, less-flexible HTML formatting attributes. a printer-friendly version of the
The Style Rendering toolbar (Figure 5) facilitates quick tog- page that displays differently
gling between “bare” type (and other elements) and viewing the than the Web version of the
page with CSS formatting applied. Bare type is type stripped of all page. See #40, “Defining CSS
for Printable Pages,” in Chapter
formatting (colors, fonts, adjusted font sizes, line spacing, etc.).
8 for a full explanation of how
This allows you to easily isolate and work on page content and see
to create a CSS file to define a
I changed page content as it will display in browsing environments that do printable page.
this to 5 not support CSS formatting.
rather than Note
5a because Browsing environments that don’t support CSS formatting (or that apply
there is different CSS formatting than that defined by the Web designer) include
only one browsers configured for handicapped viewers (including people with
figure for 5. various vision disabilities), devices like cell phones or PDAs that do not
Okay? support a full set of CSS formatting options, or devices where the user
has elected to enforce their own style choices for personal reasons.

Render Projection Media Type

Render Handheld Media Type Render TTY Media Type
Render Print Media Type Render TV Media Type
Render Screen Media Toggle Displaying of CSS Styles

Figure 5 The Style Rendering toolbar.

The Style Rendering toolbar also allows you to toggle between

viewing digital and print formatting.

#
5: Viewing Style Rendering Toolbars

Dreamweaver_ch_01(C).indd 13 5/18/06 4:31:28 PM

 14

Tip
Dreamweaver allows you to generate separate sets of styles (CSS) for
digitally displayed content (viewed on a monitor) and print output. Gen-
erating CSS files for onscreen and print display are discussed in How-To
#
56, “ Creating and Updating an External Style Sheet File”

You can define additional CSS files for use with handheld media,
projection media (Web pages projected in full-screen slideshow
format), TTY format (media output that requires font defined in
points, not pixels), or TV media type.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 14 5/18/06 4:31:28 PM

 15

#
6 Using the
Insert Toolbars
The Insert toolbars are the ubiquitous blue-collar power tools
of Dreamweaver. As these toolbars provide access to the bulk of
Dreamweaver’s features, many developers keep them displayed at
all times for quick access to features that can also be found, less
conveniently, in Menu options or panels. Since a large percentage
of Dreamweaver features, ranging from everyday (inserting images)
to esoteric (detailed database management) are accessible from
the nine basic tabs in the Insert toolbars, they will be invoked
throughout this book. Here, the point is to get comfortable with
how the Insert toolbar works.
The Insert toolbars are a set of toolbars. You get the whole
package: Common, Layout, Forms, Text, HTML, Application, Flash
elements, and Favorites.
To display the Insert toolbars, choose View > Toolbars > Insert.
By default, the Insert toolbars display in Menu form—you use a
drop-down menu to switch between the eight different iterations
of the toolbar (Figure 6a).

Figure 6a Choosing from the set of Insert toolbars.

To view all Insert toolbars at once, as a tabbed version of the

toolbar, choose Show as Tabs from the toolbar menu. In tab view,
you can easily switch between the eight different toolbars by click-
ing a tab (Figure 6b).

Figure 6b The Insert toolbars, displayed as tabs.

#
6: Using the Insert Toolbars

Dreamweaver_ch_01(C).indd 15 5/18/06 4:31:29 PM

 16

To get back to untabbed menu view, choose Show as Menu from

the Insert toolbar context menu (Figure 6c).

Figure 6c Toggling from tab view to menu view.

While a full survey of the options in the Insert toolbars would

amount to a documentation of most of the features available in
Dreamweaver, I’ll point you to some of the easy-to-access features
in each Insert toolbar:
• Common: Define links, email links, page links (anchors),
tables, and media.
• Layout: Create the three main modes for page design in
Dreamweaver—tables, DIV tags, and Layers.
• Forms: Define input forms, form fields, and form handling
buttons.
• Text: Apply HTML styles to text and insert special characters.
• HTML: Define useful metatags like keywords and descriptions
for search engines.
• Application: Manage dynamic data from a linked data source.
• Flash elements: Insert Flash objects.
• Favorites: A customizable bar; Ctrl + Click to add features.

CHAPTER ONE Exploring the Dreamweaver Environment

Dreamweaver_ch_01(C).indd 16 5/18/06 4:31:29 PM