Macromedia Dreamweaver Instruction Manual
Using Dreamweaver
macromedia
™
®
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
2
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
3
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 . . . . . . . . . . . . . .95
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
4
Contents
CHAPTER 5
Setting Up a Document . . . . . . . . . . . . . . . . . . . . . . . 149
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
5
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
6
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 Dreamweaver 290
Updating Fireworks HTML placed in Dreamweaver. . . . . . . . . . . . . .293
Creating Web photo albums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
Contents
CHAPTER 13
Inserting Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
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
7
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
8
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
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
9
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
10
Contents
INDEX
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
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 handcoding 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.
11
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 the Macintosh:
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
12
Introduction
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.
Follow the onscreen instructions.
3
If prompted, restart your computer.
4
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 handson 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
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.
book. You can also download a printable version of the
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.
Getting Started
13
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.
14
Introduction
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.
The index,
like a traditional printed index, can be used to find important terms
and go to related topics.
Search
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 Help.
•
To search for a phrase, simply type the phrase in the text field.
To search for files that contain two keywords (for example,
•
separate the search terms with a plus (+) sign.
layers
and
styles
),
Getting Started
15
Context-sensitive help
provides a Help button in each dialog box, or a question
mark icon in inspectors, windows, and panels, that opens a relevant help topic.
Click here to open Help
The 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/.
16
Introduction
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
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
• Use the Dreamweaver site map to set up your site’s organizational structure. In
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
• Use Design Notes to communicate with Web team members; see “Saving file
Using Dreamweaver
site. See “Planning and Setting Up Your Site” on page 95.
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.
“Setting up the Check In/Check Out system” on page 132.
information in Design Notes” on page 135.
documentation is divided into broad sections that
Getting Started
17
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.
Introduction18
• 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.
Getting Started 19
About testing and publishing 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.
Where 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:
1 Begin by watching the Guided Tour movies. From the Dreamweaver main
menu, choose Help > Guided Tours.
2 Next, work through the Dreamweaver tutorial. Choose Help > Tutorial, or
follow the steps in the printed manual.
3 Work through the lessons for the topics that interest you. Choose Help >
Lessons, then select a lesson.
Introduction20
4
Progress through “Dreamweaver Basics” on page 71, “Planning and Setting Up
Your Site” on page 95, “Site Management and Collaboration” on page 107, and
“Linking and Navigation” on page 353.
5 To learn about formatting text and including images in your pages, read “Inserting
and Formatting Text” on page 233 and “Inserting Images” on page 267.
That’s all you really need to begin producing high-quality Web sites, but when
you’re ready to learn how to use more advanced layout and interaction tools, you
can proceed through the rest of the book in order. You may want to skip
“Customizing Dreamweaver,” at least at first.
For experienced Web designers who are new to Dreamweaver:
1 Begin by watching the Guided Tour movies. From the Dreamweaver main
menu, choose Help > Guided Tours.
2 Work through the Dreamweaver tutorial to learn the basics of using
Dreamweaver. Choose Help > Tutorial, or follow the steps in the
printed manual.
3 Work through the lessons for the topics that interest you. Choose Help >
Lessons, then select a lesson.
4 Read “Dreamweaver Basics” on page 71 for a further overview of the
Dreamweaver user interface.
5 Although much of the material in “Site Management and Collaboration” on
page 107 and “Linking and Navigation” on page 353 is probably familiar to
you, skim those chapters to see how these familiar concepts are implemented in
Dreamweaver; pay particular attention to Using Dreamweaver to set up a new
site. Then read “Site Management and Collaboration” on page 107.
6 “Inserting and Formatting Text” on page 233 and “Inserting Images” on page
267 provide useful information on the details of using Dreamweaver to create
basic HTML pages.
7 Read the overview at the beginning of each subsequent chapter to determine
whether its topics are of interest to you.
For experienced Web designers who are familiar with Dreamweaver 3:
1 Begin by reading “What’s new in Dreamweaver 4” on page 22. Follow the
cross-references from that section to sections covering new Dreamweaver
features.
2 You may want to skim “Dreamweaver Basics” on page 71 to learn about new
aspects of the Dreamweaver user interface.
3 Check out the Dreamweaver lessons; choose Help > Lessons for a list of
interactive lessons you can try.
4 If you’re interested in customizing and extending Dreamweaver, read
“Customizing Dreamweaver” on page 513.
Getting Started 21
Typographical conventions
The following typographical conventions are used in this guide:
• Code font indicates HTML tag and attribute names as well as literal text
used in examples.
• Italic code font indicates replaceable items (sometimes called
metasymbols) in code.
• Bold roman text indicates text for you to enter verbatim.
What’s new in Dreamweaver 4
The new features in Dreamweaver 4 enhance HTML editing, make it easier to
design pages, improve site and asset management, let you create your own Flash
objects, streamline your workflow, improve team collaboration, and allow you to
customize and extend Dreamweaver.
Enhanced code editing
The Dreamweaver toolbar allows you to manage how you view a page—Design
view, Code view, or a view of both code and design. The toolbar provides easy
access to commonly used features such as Preview in Browser and Design Notes.
See “Using the toolbar” on page 78
Code view provides a new way to view HTML source code directly in the
Dreamweaver Document window. See “Opening the Code view (or Code
inspector)” on page 331. You can also edit non-HTML documents such as
JavaScript files and XML files directly in the Dreamweaver Code view. See
“Inserting scripts” on page 335.
Integrated code editors Dreamweaver now has integrated, state-of-the-art code
editors—the Code view and the Code inspector. You can set word wrapping, code
indenting, live syntax coloring, and more from the Options menu in either of
these editors. See “Setting Code view (or Code inspector) options” on page 333.
The Reference panel is a quick reference tool for HTML, JavaScript, and CSS. It
provides information about the specific tags you are working with in the Code view
(or Code inspector). See “Using the Dreamweaver Reference panel” on page 328.
The Code Navigation pop-up menu allows you to select code for JavaScript
functions in a page; by using this menu, you can quickly navigate JavaScript code
while working in Code view. See “Viewing script functions” on page 337.
The JavaScript Debugger lets you debug JavaScript document while in
Dreamweaver. For example, you can set breakpoints to control the code you want
to examine. See “Debugging JavaScript Code” on page 473.
Introduction22
Easier page design
Layout view lets you quickly design your Web pages by drawing boxes (tables or cells)
to which you can add content. See “Drawing layout cells and tables” on page 170.
Improved templates make it easier for you to identify the editable regions in a
template file. Templates now display a tab that contains the editable region’s name
and a bounding rectangle. See “Creating templates” on page 377.
CSS style sheets can now be defined as soon as you create a new style. You can
also easily attach an existing CSS style sheet with a button in the CSS Styles panel.
See “Using CSS style sheets” on page 248.
Improved integration
Flash buttons and Flash text are now built right into Dreamweaver. You can pick
from a set of predefined Flash buttons and insert them into your document or
have your Flash designer create custom button templates for you. See “Using Flash
button objects” on page 301 and “Using Flash text objects” on page 304.
Roundtrip slicing lets you work seamlessly between Dreamweaver and Fireworks 4.
You can edit and update images and HTML tables you import from Fireworks.
You can also edit in Dreamweaver or Fireworks and have the changes preserved in
both places. See “Editing Fireworks files placed in Dreamweaver” on page 288.
The Web-safe color picker allows you to easily match colors with graphics. With
just one click, you can select a color from anywhere on the desktop and the color
picker snaps to the nearest Web-safe color. See “Working with colors” on page 87.
Getting Started 23
Streamlining your workflow
The Assets panel allows you to manage your site’s assets. You can see all the
images, colors, external URLs, and scripts, as well as Flash, Shockwave,
QuickTime, template, and library items in a central location. Preview assets, and
then drag them right into place on your HTML document. Save commonly used
assets in a favorites list and reuse them across sites. See “Using the Assets panel” on
page 222 and “Using favorite assets” on page 229.
Improved Design Notes let you attach notes to a file so you can track changes or
communicate about development issues with other members of your team. You can
insert and view comments directly in the Dreamweaver Site window. See “About
Design Notes” on page 134 and “Using reports to improve workflow” on page 141.
Integrated e-mail allows you to communicate with team members. When a file is
checked out by someone else, you can now click on the team member’s name to send
an e-mail message. See “Setting up the Check In/Check Out system” on page 132.
Site reporting lets you use several predefined reports to test common HTML
document problems, such as untitled documents or missing alt tags. You can also
write custom reports to suit your needs, display report results, and open problem
files within the Report results window. See “Setting up the Check In/Check Out
system” on page 132 and “Creating reports” on page 510.
SourceSafe integration If you own SourceSafe, you can now check files into and
out of SourceSafe while working in Dreamweaver. See “Using Dreamweaver with
Visual SourceSafe” on page 128.
WebDAV integration now use Dreamweaver to transfer files using the WebDAV
protocol. See “Using Dreamweaver with the WebDAV protocol” on page 127.
The Package Manager (formerly the Extension Manager) easily install extensions
with a single click. Visit the Macromedia Exchange and download useful extensions
to make your job easier. See “Adding extensions to Dreamweaver” on page 93.
Common user interface
Keyboard shortcuts have a new interface that is common to all Macromedia Web
publishing products. This new interface allows you to edit existing keyboard
shortcuts, create new shortcuts for menu items, and delete keyboard shortcuts you
don’t want. You can also switch between sets of keyboard shortcut configurations.
See “Using the Keyboard Shortcut Editor” on page 90.
Window management is now improved: all windows snap into place. When you
open a new window, Dreamweaver prevents it from overlapping visible panels.
Panels now have a new Macromedia look and behave consistently across the Web
publishing products. All panels have icons and text so that you can easily identify
them. Panels all use system colors and fonts on both Windows and Macintosh
systems, and have consistent snapping and dragging behaviors.
Introduction24
HTML and Web technologies resources
The following are some useful resources available on the Web:
The HTML 4.0 specification (http://www.w3.org/TR/REC-html40/) is the official
specification for HTML from the World Wide Web Consortium.
Index DOT HTML (http://www.blooberry.com/indexdot/html/) is a comprehensive
listing of HTML tags, attributes, and values, as well as their compatibility with
the various browsers.
The ZDNet Developer Tag Library (http://www.zdnet.com/devhead/resources/
tag_library/) is another listing of information about all HTML tags.
The Cascading Style Sheets, level 1 specification (CSS1) (http://www.w3.org/TR/
REC-CSS1) is the official specification for style sheets from the World Wide Web
Consortium.
Web Review Style Sheets Reference Guide (http://webreview.com/guides/style/
style.html) explains what CSS styles are and which browsers they work in.
“CGI Scripts for Fun and Profit” (http://www.hotwired.lycos.com/webmonkey/
99/26/index4a.html) is an article from the Hotwired Webmonkey site on
incorporating ready-made CGI (Common Gateway Interface) scripts
into your pages.
The CGI Resource Index (http://www.cgi-resources.com/) is a repository of all
things related to CGI, including ready-made scripts, documentation, books, and
even programmers for hire.
The Common Gateway Interface site (http://hoohoo.ncsa.uiuc.edu/cgi/) includes
an introduction to CGI.
Entities Table (http://www.bbsinc.com/iso8859.html) lists the entity names used
in ISO 8859-1 (Latin-1).
The Dynamic HTML Events page (http://msdn.microsoft.com/workshop/author/
dhtml/reference/events.asp#om40_event) provides information about events in
Microsoft Internet Explorer.
Microsoft ASP Overview pages (http://msdn.microsoft.com/workshop/server/
asp/ASPover.asp) provide information about Active Server Pages (ASP).
Sun JSP page (http://java.sun.com/products/jsp/) provides information about
JavaServer Pages (JSP).
The PHP pages (http://www.php.net/) provide information about PHP:
Hypertext Preprocessor.
Allaire ColdFusion product page (http://www.allaire.com/Products/ColdFusion)
provides information about ColdFusion.
Getting Started 25
The XML.com site (http://www.xml.com) provides information, tutorials, and tips
about Extensible Markup Language (XML), as well as other Web technologies.
JavaScript Bible, by Danny Goodman (IDG Books), comprehensively covers the
JavaScript 1.2 language.
JavaScript: The Definitive Guide, by David Flanagan (O’Reilly & Associates),
provides reference information for every JavaScript function, object, method,
property, and event handler.
Accessibility and Dreamweaver
Macromedia supports the creation of great Web experiences that are accessible to
everyone, including those with disabilities. We encourage the implementation of
international standards to guide developers of accessible sites, including the
guidelines offered by the World Wide Web Consortium (W3C). Many
government policies on Web accessibility, including those of the United States,
reference W3C guidelines. W3C guidelines on Web content encourage developers
to adopt design and coding practices for accessibility, many of which are robustly
supported by Macromedia products. For more information on W3C guidelines,
please consult the Web Content Authoring Guidelines (http://www.w3.org/TR/
WAI-WEBCONTENT/full-checklist.html).
For the latest information on product features and resources that support
accessible design, please see Macromedia's accessibility page (http://
www.macromedia.com/accessibility/).
Introduction26
CHAPTER 1
Dreamweaver Tutorial
.............................................................................................................
The Dreamweaver tutorial walks you through the steps of building Web pages.
You’ll learn how to use Macromedia Dreamweaver to define a local site, and you’ll
use Dreamweaver panels and tools to create and edit Web documents.
In this tutorial, you’ll create Web pages for Compass, a fictitious company that
specializes in adventure travel. If you’re new to Dreamweaver, start at the
beginning of the tutorial and work your way through the end. If you’re already
familiar with Dreamweaver, you may want to start at “Use the Assets panel” on
page 56; this section and those that follow it focus on new or changed features in
Dreamweaver such as the Assets panel, Flash buttons and text, using a template,
running a site report and adding a Design Note.
The tutorial takes approximately one to two hours to complete, depending on
your experience, and focuses on the following Dreamweaver tasks:
• Defining a local site
• Creating a page in Layout view
• Inserting an image and a rollover image
• Working with tables in Standard view
• Creating a link to another document
• Inserting assets from the Assets panel
• Inserting Flash Text and Flash Button objects
• Creating and applying a template
• Running a site report
• Adding a Design Note
1
Note: This tutorial demonstrates some features that are supported only in 4.0 or
later browsers.
27
Take a guided tour of Dreamweaver
Before you get started, watch the Guided Tour movies to familiarize yourself with
the Web development process and with Dreamweaver features.
1 In Dreamweaver, choose Help > Guided Tour.
2 Click a movie title.
3 Close the movie when you finish.
The Dreamweaver work area
Let’s start with a brief overview of the Dreamweaver work area.
• If you haven’t already launched Dreamweaver, double-click the Dreamweaver
icon to launch it.
The Dreamweaver work area accommodates different styles of working
and levels of expertise. When you launch Dreamweaver, the following work
area items open:
Toolbar
Document window
Objects panel
Tag selector
Chapter 128
Floating panel
Launcher bar
Property inspector
• The Document window displays the current document as you create and edit it.
• The Objects panel contains icons you click to insert objects in your document,
and to change the way you work in a document.
• Dreamweaver provides many floating panels, such as the HTML Styles panel and
the Code inspector, which enable you to work with other Dreamweaver elements.
• The Launcher bar contains buttons for opening and closing your most
frequently used inspectors and panels.
• The Property inspector displays properties for the selected object or text, and
lets you modify those properties. (Which properties appear in the inspector
depend on the object actively selected in the document.)
To open Dreamweaver windows, inspectors, and panels, use the Window menu. A
check mark next to an item in the Window menu indicates that the named item is
currently open (though it may be hidden behind other windows). To display an
item that isn’t currently open, choose the item name from the menu or use its
keyboard shortcut.
Working in Dreamweaver
Dreamweaver can display a document in three ways: in Design view, in Code
view, and in a split view that shows both the design and code. (To change the view
in which you’re working, select a view in the Dreamweaver toolbar.) By default,
Dreamweaver displays the Document window in Design view.
In addition, you can work with the Dreamweaver Design view in two different
ways—in Layout view and Standard view. (You select these views in the View
category of the Objects panel.) In Layout view you can design a page layout, insert
graphics, text, and other media; in Standard view, in addition to inserting graphics
text and media, you can also insert layers, create frame documents, create tables,
and apply other changes to your page—options that aren’t available in Layout view.
How the tutorial files are arranged
Both the completed and partially completed HTML files used in this tutorial
are in the Compass_Site folder in the Tutorial folder. Images and other associated
files for the site are also in the Compass_Site folder.
Each tutorial file has a meaningful name—for example, the HTML file that
contains travel destination information is named Destinations.html. The partially
completed files—which you’ll be working on—have names similar to their
completed file counterparts, except they begin with DW4_; the partially
completed version of Destinations.html, for example, is called
DW4_Destinations.html.
Dreamweaver Tutorial 29
Preview the completed Web site
Next, view pages in the completed Web site to get an idea of what you’ll be
working toward.
1 If you haven’t already done so, launch Dreamweaver.
2 In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate
to the Dreamweaver 4 folder (where you installed Dreamweaver); then navigate
to Tutorial/Compass_Site.
3 In the Compass_Site folder, select CompassHome.html, and then click Open
to open the Compass home page in the Document window.
Do not edit this page; you will create your own version of this page.
4 Choose File > Preview in Browser and select a browser in which to view the
Compass home page. (Use a version 4.0 or later browser to view this site.)
5 Move the pointer over the navigation buttons to see rollover image effects.
Click the navigation buttons to explore the site.
6 Close the browser when you’re finished looking at the site.
7 Open a new blank document in Dreamweaver, choose File > Open.
8 Close the CompassHome.html file, which is open in Dreamweaver.
Chapter 130
Loading...