MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac Installation and operating instructions

macromedia
™
®
Using Dreamweaver

2
Trademarks
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be
registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or
phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and
may be registered in certain jurisdictions including internationally.
This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for
the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia
provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any
responsibility for the content on those third-party sites.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED
COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE.
THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY
NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER
RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.
Copyright © 2000 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or
converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc.
Part Number ZDW40M100
Acknowledgments
Project Management: Sheila McGinn
Writing: Kim Diezel, Valerie Hanscom, Jed Hartman, Emily Ricketts
Editing: Anne Szabla and Lisa Stanziano
Production Management: John “Zippy” Lehnus
Multimedia Design and Production: Aaron Begley and Noah Zilberberg
Print Production: Chris Basmajian, Paul Benkman, Caroline Branch, and Rebecca Godbois
Web Editing and Production: Jane Flint DeKoven and Jeff Harmon
Special thanks to Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin Conradi,
Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John Koch,
David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, and the Dreamweaver engineering and QA teams.
First Edition: November 2000
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

3
CONTENTS
INTRODUCTION
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installing Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Learning Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Web development workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Where to start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Typographical conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
What’s new in Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
HTML and Web technologies resources . . . . . . . . . . . . . . . . . . . . . . . 25
Accessibility and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
CHAPTER 1
Dreamweaver Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Take a guided tour of Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 28
The Dreamweaver work area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Set up the site structure for the tutorial . . . . . . . . . . . . . . . . . . . . . . . . 31
Define a local site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Create the site home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Design a page in Layout view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Add content to the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Work in Standard view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Use the Assets panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Insert Flash objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Create a template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Check your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
The next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Contents 4
CHAPTER 2
Dreamweaver Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . .71
About the Dreamweaver work area . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
About the different views in Dreamweaver . . . . . . . . . . . . . . . . . . . . . .73
Working with colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
About Web-safe colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Setting preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Using Dreamweaver with other applications . . . . . . . . . . . . . . . . . . . . .89
Basic Customizing in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . .90
CHAPTER 3
Planning and Setting Up Your Site . . . . . . . . . . . . . . 5
About site planning and design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95
Using Dreamweaver to set up a new site . . . . . . . . . . . . . . . . . . . . . . .102
Editing an existing Web site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
Editing a remote site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Removing a site from your list of sites . . . . . . . . . . . . . . . . . . . . . . . . .106
CHAPTER 4
Site Management and Collaboration . . . . . . . . . . . 107
About the Site window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Viewing and opening files in the Site window . . . . . . . . . . . . . . . . . . .112
About the site map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Using the site map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117
Setting up a remote site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
About WebDAV and SourceSafe integration . . . . . . . . . . . . . . . . . . . .127
Troubleshooting remote site setup. . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Using Check In/Check Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131
About Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134
Using reports to improve workflow . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Getting and putting files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143
Synchronizing the files on your local and remote sites . . . . . . . . . . . . .146

Contents 5
CHAPTER 5
Setting Up a Document . . . . . . . . . . . . . . . . . . . . . . . 14
Creating, opening, and saving HTML documents . . . . . . . . . . . . . . .150
Setting document properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Selecting elements in the Document window . . . . . . . . . . . . . . . . . . .154
Using visual guides in the design process. . . . . . . . . . . . . . . . . . . . . . .157
Viewing and editing head content. . . . . . . . . . . . . . . . . . . . . . . . . . . .159
About automating tasks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
CHAPTER 6
Designing Page Layout. . . . . . . . . . . . . . . . . . . . . . . . 167
About layout cells and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
Drawing layout cells and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170
Moving and resizing layout cells and tables . . . . . . . . . . . . . . . . . . . . .176
Formatting layout cells and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . .177
Setting layout width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Setting Layout View preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182
CHAPTER 7
Using Tables to Present Content . . . . . . . . . . . . . . . 183
Inserting a table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
Selecting table elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Formatting tables and cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Resizing tables and cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
Adding and removing rows and columns. . . . . . . . . . . . . . . . . . . . . . .196
Copying and pasting cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Sorting tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201
Exporting table data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202
CHAPTER 8
Using Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Deciding whether to use frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . .204
About creating frame-based Web pages . . . . . . . . . . . . . . . . . . . . . . . .205
Creating frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206
Selecting a frame or frameset. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
Saving frame and frameset files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211
About frame and frameset properties. . . . . . . . . . . . . . . . . . . . . . . . . .212
Controlling frame content with links . . . . . . . . . . . . . . . . . . . . . . . . .218
Handling browsers that can’t display frames . . . . . . . . . . . . . . . . . . . .219
Using behaviors with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220

Contents 6
CHAPTER 9
Managing and Inserting Assets. . . . . . . . . . . . . . . . . 221
Using the Assets panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Using favorite assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
CHAPTER 10
Inserting and Formatting Text . . . . . . . . . . . . . . . . . 233
Inserting text and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234
Creating lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237
Setting fonts, styles, color, and alignment . . . . . . . . . . . . . . . . . . . . . .238
Using HTML styles to format text . . . . . . . . . . . . . . . . . . . . . . . . . . .244
Using CSS style sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Converting CSS styles to HTML tags . . . . . . . . . . . . . . . . . . . . . . . . .256
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
Searching and replacing text, tags, and attributes. . . . . . . . . . . . . . . . .258
CHAPTER 11
Inserting Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
Inserting an image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .268
Setting image properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269
Creating image maps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273
Using an external image editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277
Applying behaviors to images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280
CHAPTER 12
Using Dreamweaver and Fireworks Together . . . 281
Getting Fireworks files into Dreamweaver. . . . . . . . . . . . . . . . . . . . . .282
Launching Fireworks from within Dreamweaver. . . . . . . . . . . . . . . . .285
Editing Fireworks files placed in Dreamweaver . . . . . . . . . . . . . . . . . .288
Optimizing Fireworks images and animations placed in Dreamweaver290
Updating Fireworks HTML placed in Dreamweaver. . . . . . . . . . . . . .293
Creating Web photo albums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293

Contents 7
CHAPTER 13
Inserting Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7
Inserting media objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297
Launching an external editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298
Using Design Notes with media objects . . . . . . . . . . . . . . . . . . . . . . .300
About Flash content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300
Using Flash button objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301
Using Flash text objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304
Setting Flash object properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305
Inserting Flash movies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
Inserting Generator objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309
About Shockwave movies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
Adding sound to a page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311
Inserting Netscape Navigator plugin content. . . . . . . . . . . . . . . . . . . .313
Inserting an ActiveX control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316
Inserting a Java applet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Using parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
Using behaviors to control media . . . . . . . . . . . . . . . . . . . . . . . . . . . .320
CHAPTER 14
Editing HTML in Dreamweaver . . . . . . . . . . . . . . . . 321
Understanding basic HTML tags . . . . . . . . . . . . . . . . . . . . . . . . . . . .322
Inserting comments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327
Using the Dreamweaver Reference panel. . . . . . . . . . . . . . . . . . . . . . .328
About Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Using the Code view (or Code inspector) . . . . . . . . . . . . . . . . . . . . . .330
Inserting scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335
Opening and editing non-HTML files in Dreamweaver . . . . . . . . . . .338
Editing an HTML tag in the Design view. . . . . . . . . . . . . . . . . . . . . .338
Setting code formatting preferences. . . . . . . . . . . . . . . . . . . . . . . . . . .343
Cleaning up HTML source code. . . . . . . . . . . . . . . . . . . . . . . . . . . . .347
Cleaning up Microsoft Word HTML . . . . . . . . . . . . . . . . . . . . . . . . .348
Using external HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .350

Contents 8
CHAPTER 15
Linking and Navigation . . . . . . . . . . . . . . . . . . . . . . . 353
About document locations and paths . . . . . . . . . . . . . . . . . . . . . . . . .354
Creating links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358
Managing links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
Creating jump menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .371
Attaching behaviors to links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .374
CHAPTER 16
Reusing Content with Templates
and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Creating templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .377
Defining a template’s editable regions . . . . . . . . . . . . . . . . . . . . . . . . .381
Creating documents based on templates . . . . . . . . . . . . . . . . . . . . . . .388
Updating pages based on a template . . . . . . . . . . . . . . . . . . . . . . . . . .391
Exporting and importing XML content . . . . . . . . . . . . . . . . . . . . . . .392
Creating, managing, and editing library items. . . . . . . . . . . . . . . . . . .396
Using server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404
CHAPTER 17
Using Dynamic Layers . . . . . . . . . . . . . . . . . . . . . . . 407
About layers and HTML code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408
Creating layers on your page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .409
Manipulating layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412
Setting layer properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417
Changing the stacking order of layers . . . . . . . . . . . . . . . . . . . . . . . . .420
Changing layer visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .420
Using tables and layers for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .421
Animating your layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .425
Behavior actions for controlling layers timelines . . . . . . . . . . . . . . . . .434

Contents 9
CHAPTER 18
Using Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Using the Behaviors panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436
About events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436
Attaching a behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439
About behaviors and text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441
Attaching a behavior to a timeline. . . . . . . . . . . . . . . . . . . . . . . . . . . .442
Changing a behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .442
Updating a behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .443
Creating new actions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .443
Downloading and installing third-party behaviors. . . . . . . . . . . . . . . .443
Using the behavior actions that come with Dreamweaver . . . . . . . . . .444
CHAPTER 19
Debugging JavaScript Code. . . . . . . . . . . . . . . . . . 473
Running the debugger. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Finding and fixing logical errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476
CHAPTER 20
Creating Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
About CGI scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482
About form objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482
Creating a form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .483
About form fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .485
Inserting checkboxes and radio buttons. . . . . . . . . . . . . . . . . . . . . . . .491
About lists and menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .493
About form buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .496
About form design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .498
Processing forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .499
Using behaviors with forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .500
CHAPTER 21
Testing and Publishing a Site . . . . . . . . . . . . . . . . . . 501
Checking for browser compatibility . . . . . . . . . . . . . . . . . . . . . . . . . .502
Using Behaviors to detect browsers and plugins. . . . . . . . . . . . . . . . . .503
Previewing in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .504
Checking links in a page or site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .506
Checking download time and size . . . . . . . . . . . . . . . . . . . . . . . . . . . .509
Using Reports to test a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .509

Contents 10
CHAPTER 22
Customizing Dreamweaver . . . . . . . . . . . . . . . . . . . . 513
Changing the default file type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .514
Modifying the Objects panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .515
Creating a simple object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .516
About customizing Dreamweaver menus. . . . . . . . . . . . . . . . . . . . . . .517
Customizing the appearance of dialog boxes . . . . . . . . . . . . . . . . . . . .529
Changing default HTML formatting . . . . . . . . . . . . . . . . . . . . . . . . .530
Working with browser profiles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532
Extending Dreamweaver: Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536
Customizing the interpretation of third-party tags . . . . . . . . . . . . . . .537
APPENDIX
Keyboard Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . 545
File menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545
Edit menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Page views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Viewing page elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Code editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Editing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549
Formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550
Finding and replacing text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550
Working in tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551
Working with frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .551
Working with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552
Working with timelines. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .552
Working with images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .553
Managing hyperlinks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .553
Targeting and previewing in browsers . . . . . . . . . . . . . . . . . . . . . . . . .553
Debugging in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .554
Site management and FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .554
Site map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .555
Playing plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .555
Working with templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .555
Inserting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
History panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
Opening and closing panels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .557
Getting help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .557
Keyboard Shortcut Matrix. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .558
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

11
INTRODUCTION
.............................................................................................................
Getting Started
Macromedia Dreamweaver is a professional HTML editor for visually designing
and managing Web sites and pages. Whether you enjoy the control of hand-
coding HTML or prefer to work in a visual editing environment, Dreamweaver
makes it easy to get started and provides you with helpful tools to enhance your
Web design experience.
Dreamweaver includes many coding tools and features: an HTML, CSS, and
JavaScript reference, a JavaScript Debugger, and code editors (the Code view and
Code inspector) that allow you to edit JavaScript, XML, and other text documents
directly in Dreamweaver. Macromedia Roundtrip HTML technology imports
HTML documents without reformatting the code—and you can set
Dreamweaver to clean up and reformat HTML when you want it to.
The visual editing features in Dreamweaver also let you quickly add design and
functionality to your pages without writing a line of code. You can view all your
site elements or assets and drag them from an easy-to-use panel directly into a
document. Streamline your development workflow by creating and editing images
in Macromedia Fireworks, then importing them directly into Dreamweaver, or by
adding Flash objects you create directly in Dreamweaver.
Dreamweaver is fully customizable. Use Dreamweaver to create your own
objects and commands, modify keyboard shortcuts, and even write JavaScript
code to extend Dreamweaver capabilities with new behaviors, Property inspectors,
and site reports.

Introduction 12
System requirements
The following hardware and software is required to run Dreamweaver.
For Microsoft Windows:
•
An Intel Pentium processor or equivalent, 166 MHz or faster, running
Windows 95, Windows 98, Windows 2000, Windows ME, or Windows NT
(with Server Pack 3)
•
Version 4.0 or later of Netscape Navigator or Microsoft Internet Explorer
•
32 MB of random-access memory (RAM) plus 110 MB of available disk space
•
A 256-color monitor capable of 800 x 600 pixel resolution
•
A CD-ROM drive
For t e Macintos :
•
A Power Macintosh running Mac OS 8.6 or 9.x
•
32 MB of random-access memory (RAM) plus 135 MB of available disk space
•
A 256-color monitor capable of 800 x 600 pixel resolution
• A CD-ROM drive
Installing Dreamweaver
Follow these steps to install Dreamweaver on either a Windows or a
Macintosh computer.
To install Dreamweaver:
1
Insert the Dreamweaver CD into the computer’s CD-ROM drive.
2
Choose from the following options:
• In Windows, choose Start > Run. Click Browse and choose the Dreamweaver 4
Installer.exe file on the Dreamweaver CD. Click OK in the Run dialog box to
begin the installation.
• On the Macintosh, double-click the Dreamweaver Installer icon.
3
Follow the onscreen instructions.
4
If prompted, restart your computer.

Getting Started 13
Learning Dreamweaver
Macromedia Dreamweaver includes a variety of resources to help you learn the
program quickly and become proficient in creating your own Web sites and pages.
These resources include a printed book, online help pages, Guided Tour movies,
a tutorial, and interactive lessons. You can also find regularly updated tips,
TechNotes, examples, and information at the Dreamweaver Support Center on
the Macromedia Web site.
Start by viewing the Guided Tour movies to learn about Dreamweaver features.
Next, complete the Dreamweaver tutorial. Finally, try the Dreamweaver lessons to
learn how to accomplish specific tasks in Dreamweaver.
Guided Tour movies
The Guided Tour movies provide an animated overview of the Web development
process and take you through a tour of Dreamweaver features.
To view a Guided Tour movie, choose Help > Guided Tours and click one of the
movie titles. When each movie is over, click the Home button to return to the list
of movies, then click another movie. You can watch the whole tour or skip ahead
to see particular sections.
Tutorial
The Dreamweaver tutorial is the best place to start if you want to get some hands-
on experience creating pages in Dreamweaver. By working through the tutorial,
you’ll learn how to create a sample Web site with some of the most useful and
powerful features of Dreamweaver. The tutorial is in both Dreamweaver Help and
the Using Dreamweaver book. You can also download a printable version of the
tutorial at the Macromedia Web site.
The tutorial includes sample pages and assets (images and Macromedia Flash files)
to help you get started developing a Web site.
Dreamweaver lessons
Dreamweaver comes with a set of interactive lessons. Each lesson takes you
through the steps of a specific task and includes sample pages that contain all the
design and functional elements needed. Use the lessons as step-by-step guides with
the sample pages, or as a guide as you work in your own pages.
To locate the lessons, choose Help > Lessons and select a topic.

Introduction 14
Dreamweaver user guide (printed book)
Using Dreamweaver provides a printed alternative to Dreamweaver Help, and
contains information on using Dreamweaver commands and features. Certain
reference topics about program options are not included in the printed book; see
Dreamweaver Help for information on those topics.
If you purchased the Electronic Software Download (ESD) version of
Dreamweaver, you can download a printable version of Using Dreamweaver from
the Dreamweaver Support Center at http://www.macromedia.com/support/
dreamweaver/documentation.html.
Dreamweaver Help
Dreamweaver Help provides comprehensive information about all Dreamweaver
features, optimized for use online.
For best results viewing Dreamweaver Help, use Netscape Navigator 4.0 or later
or Microsoft Internet Explorer 4.0 or later.
Dreamweaver Help makes extensive use of JavaScript. Make sure that JavaScript is
enabled in your browser. If you plan to use the search feature, make sure that Java
is enabled as well.

Getting Started 15
Dreamweaver Help includes the following components:
Contents enables you to see all of the information organized by subject. Click
top-level entries to view subtopics.
T e index, like a traditional printed index, can be used to find important terms
and go to related topics.
Searc allows you to find any character string in all topic text. The search feature
requires a 4.0 browser with Java enabled.
Note: When you click Search, a Java security window may appear, asking for permission
to read files on your hard disk. You must grant this permission for the search to work. The
applet does not write anything to your hard disk, nor does it read any files outside
Dreamweaver elp.
•
To search for a phrase, simply type the phrase in the text field.
•
To search for files that contain two keywords (for example, layers and styles ),
separate the search terms with a plus (+) sign.

Introduction 16
Context-sensitive elp provides a Help button in each dialog box, or a question
mark icon in inspectors, windows, and panels, that opens a relevant help topic.
T e Dreamweaver Help navigation bar provides buttons you can click to move
through topics. The right and left arrow buttons move to the previous or next
topic in a section (following the topic order listed in the table of contents).
Extending Dreamweaver
The Extending Dreamweaver help system provide information on the
Dreamweaver Document Object Model and the APIs (application programming
interfaces) that allow JavaScript and C developers to create objects, commands,
property inspectors, behaviors, and translators.
Dreamweaver Support Center
The Dreamweaver Support Center Web site is updated regularly with the latest
information on Dreamweaver, plus advice from expert users, examples, tips,
updates, and information on advanced topics. Check the Web site often for the
latest news on Dreamweaver and how to get the most out of the program at
http://www.macromedia.com/support/dreamweaver/.
Dreamweaver discussion group
Discuss technical issues and share helpful hints with other Dreamweaver
users by visiting the Dreamweaver discussion group. You’ll find information
about accessing the discussion group on the Macromedia Web site at
http://www.macromedia.com/software/dreamweaver/discussiongroup/.
Click here to open elp

Getting Started 17
Web development workflow
The Web development workflow starts with the process of defining a site’s strategy
or goals, progresses to design (where you work out the look and feel of a
prospective site), and moves into the production or development phase (where
the site is built and pages are coded); the site is tested for functionality and to see
if it meets its defined objectives, and then the site is published. Many developers
also schedule periodic maintenance to ensure that the site remains current
and functional.
To make it easier for you to find the information you need as you develop Web
sites, the Using Dreamweaver documentation is divided into broad sections that
model this standard approach to Web development—site planning, design,
development, testing, and publishing and maintenance.
About site Planning
Planning and organizing your site carefully from the start can save you time later
on. Organizing your site includes much more than determining where the files
will go: site planning often involves examining site requirements, audience
profiles, and site goals. Additionally, you should consider technical requirements
such as user access, and browser, plugin or download restrictions.
Once you’ve organized your information and determined an operating structure,
you begin creating your site.
•Determine what strategy to employ and user issues to consider as you plan your
site. See “Planning and Setting Up Your Site” on page 95.
•Use the Dreamweaver site map to set up your site’s organizational structure. In
the Dreamweaver Site window you can easily add, delete, and rename files and
folders to change the organization as you need. See “Site Management and
Collaboration” on page 107.
If you work on a Web Development team, you may also be interested in
these topics:
•Set up systems that will prevent team members from overwriting files; see
“Setting up the Check In/Check Out system” on page 132.
•Use Design Notes to communicate with Web team members; see “Saving file
information in Design Notes” on page 135.

Introduction18
About designing Web pages
Most Web design projects start with storyboards or flowcharts that are turned
into sample pages. Use Dreamweaver to create mock-up sample pages as you
work toward a final design. Mock-ups usually show the design layout, site
navigation, technical components, themes and color, and graphic images or
other media elements.
•Create HTML documents in Dreamweaver, easily add page title, or
background color. See, “Setting Up a Document” on page 149.
•Dreamweaver Layout view and layout tools let you quickly design Web pages
by drawing and then rearranging the page structure. See, “Designing Page
Layout” on page 167.
•Use the Dreamweaver Objects panel to design and quickly add tables, create
frame documents, design forms, and work with layers. See “Using Tables to
Present Content” on page 183, “Using Frames” on page 203, “Using Dynamic
Layers” on page 407, and “Creating Forms” on page 481.
About adding content
Using Dreamweaver, you can easily add a variety of content to Web pages. Add
assets and design elements, such as text, images, colors, movies, sound, and other
forms of media.
•The Assets panel lets you easily organize the assets in a site; you can then drag
most assets directly from the Assets panel into a Dreamweaver document. See
“Managing and Inserting Assets” on page 221.
•Type directly in a Dreamweaver document, or import text from other
documents, then format the text using the Dreamweaver Property inspector, or
HTML Styles panel. You can also easily create your own Cascading Style
Sheets. See “Inserting and Formatting Text” on page 233.
•Insert images, including rollover images, image maps, and Fireworks sliced
images. Use alignment tools to position images in a page. See “Inserting
Images” on page 267 and “Using Dreamweaver and Fireworks Together” on
page 281.
•Insert other types of media in a Web page, such as Flash, Shockwave, and
QuickTime movies, sound, and applets. See “Inserting Media” on page 297.
•Add content in the Dreamweaver code editor: Use the Dreamweaver Code
view or Code inspector to write your own HTML or JavaScript code. “Editing
HTML in Dreamweaver” on page 321.

Getting Started 19
•With Dreamweaver you can create standard HTML links, including anchor
links and e-mail links, or easily set up graphical navigation systems, such as
jump menus and navigation bars. See “Linking and Navigation” on page 353.
•Dreamweaver templates and library files let you easily apply reusable content in
your site. You can create new pages from the template, then add or change
content in the editable areas. See “Reusing Content with Templates
and Libraries” on page 375.
About interactivity and animation
Many Web pages are static, containing only text and images. Dreamweaver allows
you to go beyond static pages, using interactivity and animation to capture
visitors’ interest. You can give visitors feedback as they move and click,
demonstrate concepts, validate form data without contacting the server—in short,
you can let visitors see and do more within the page.
There are several ways to add interactivity and animation to your pages
using Dreamweaver:
•Use timelines to create animations that do not require plugins, ActiveX controls,
or Java. Timelines use dynamic HTML to change the position of a layer or the
source of an image over time or to call behavior actions automatically after the
page has loaded. See “Using Dynamic Layers” on page 407.
•Use behaviors to perform tasks in response to specific events, such as highlighting
a button when the visitor passes the pointer over it, validating a form when the
visitor clicks the Submit button, or opening a second browser window when the
main page is finished loading. See “Using Behaviors” on page 435.
•Debug custom JavaScript code. See “Debugging JavaScript Code” on page 473.
•Use forms to allow your site visitors to enter data directly on the Web page. See
“Creating Forms” on page 481.

Introduction20
About testing and publis ing your site
Your site is complete and ready for the world—but before you publish it on a
server, you must test the site. Depending on the size of the project, client
specifications, and kinds of browsers that visitors will use, you may need to move
your site to a staging server where it can be tested and edited. When corrections
have been made, you publish the site where the public can access it. Once the site
is published, establish a maintenance cycle to ensure quality, respond to user
feedback, and update the site’s information.
Use the following Dreamweaver features to test and publish your sites:
•To add new tags in a page or fix your code, use the Dreamweaver Reference
panel to look up JavaScript, CSS and HTML code. See “Using the
Dreamweaver Reference panel” on page 328.
•Use the JavaScript Debugger to help you fix JavaScript errors in your code.
The debugger lets you set breakpoints in the code, then allows you to view the
code as a page is debugged right in Dreamweaver. See “Debugging JavaScript
Code” on page 473.
•Run browser and plugin checks, test and fix links in your documents, and run
site reports to check HTML files for common mistakes. See “Testing and
Publishing a Site” on page 501.
•In the Dreamweaver Site window you’ll find many tools to help you manage your
site, transfer files to and from a remote server, set up a Check In/Check Out
process to prevent files from being overwritten, and synchronize the files on your
local and remote sites. See “Site Management and Collaboration” on page 107.
W ere to start
This guide includes information for readers at a variety of levels. To get the most
out of the documentation, start by reading the parts that are most relevant to your
level of experience.
For HTML novices:
1Begin by watching the Guided Tour movies. From the Dreamweaver main
menu, choose Help > Guided Tours.
2Next, work through the Dreamweaver tutorial. Choose Help > Tutorial, or
follow the steps in the printed manual.
3Work through the lessons for the topics that interest you. Choose Help >
Lessons, then select a lesson.