Adobe Dreamweaver CS3 User Guide En

User Manual: adobe Dreamweaver - CS3 - User Guide Free User Guide for Adobe Dreamweaver Software, Manual

Open the PDF directly: View PDF .
Page Count: 738

Download
Open PDF In Browser	View PDF

ADOBE DREAMWEAVER CS3
®

USER GUIDE

September 4, 2007

Adobe® Dreamweaver® CS3 User Guide for Windows® and Mac OS
If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or
copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the
content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such
material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.
Adobe, the Adobe logo, ActionScript, ColdFusion, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, HomeSite, JRun, Photoshop, Shockwave, and Version
Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
ActiveX, Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple and Mac OS are
trademarks of Apple Inc., registered in the United States and other countries. Java and Solaris are trademarks or registered trademarks of Sun Microsystems, Inc. in the United
States and other countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. UNIX is a trademark in the United States and other countries,
licensed exclusively through X/Open Company, Ltd. All other trademarks are the property of their respective owners.
This product includes software developed by the Apache Software Foundation (http://www.apache.org/). The Graphics Interchange Format © is the Copyright property of
CompuServe Incorporated. GIF(sm) is a Service Mark property of CompuServe Incorporated. MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and
Thomson Multimedia (http://www.mp3licensing.com). You cannot use the MP3 compressed audio within the Software for real time or live broadcasts. If you require an MP3
decoder for real time or live broadcasts, you are responsible for obtaining this MP3 technology license. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com) Flash CS3 video is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved.
http://www.on2.com. This product includes software developed by the OpenSymphony Group (http://www.opensymphony.com/) Sorenson SparkTM video compression and
decompression technology licensed from Sorenson Media, Inc.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial
Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with
48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are
being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions
herein. Unpublishedrights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S.
Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended,
Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations
at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

September 4, 2007

iii

Contents
Chapter 1: Getting started
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Adobe Help

............................................................................... 2

Resources

................................................................................ 5

What’s new

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapter 2: Workspace
Dreamweaver workflow and workspace
Working in the Document window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Using toolbars, inspectors, context menus, and panels
Customizing the Dreamweaver CS3 workspace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Chapter 3: Working with Dreamweaver sites
Setting up a Dreamweaver site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Working with a visual map of your site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Managing Contribute sites with Dreamweaver
Working on files without defining a site
Basic tab options

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Chapter 4: Creating and managing files
Creating and opening documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Managing files and folders

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Getting and putting files to and from your server
Checking in and checking out files
Synchronizing files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Comparing files for differences

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Rolling back files (Contribute users)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Cloaking folders and files in your site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Storing file information in Design Notes
Testing your site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Chapter 5: Managing assets and libraries
About assets and libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Working with assets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Creating and managing a list of favorite assets
Working with library items

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Chapter 6: Creating pages with CSS
Understanding Cascading Style Sheets
Creating and managing CSS
Laying out pages with CSS
Working with div tags
Animating AP elements

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

September 4, 2007

Chapter 7: Laying out pages with HTML
Using visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Presenting content with tables

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Laying out pages in Layout mode
Using Frames

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Chapter 8: Adding content to pages
Working with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Adding and formatting text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Adding and modifying images
Inserting Flash content

Adding Flash Video content
Adding Sound

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Adding other media objects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Chapter 9: Linking and navigation
About linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Linking

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Jump menus

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Navigation bars
Image maps

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Troubleshooting links

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

Chapter 10: Previewing pages
Previewing pages in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Previewing pages in mobile devices

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Chapter 11: Working with page code
About coding in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Setting up your coding environment

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Customizing the coding environment

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Writing and editing code
Collapsing code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

Optimizing and debugging code
Editing code in Design view

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Working with head content for pages
Working with server-side includes
Managing tag libraries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Importing custom tags into Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Chapter 12: Adding JavaScript behaviors
Using JavaScript behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Applying built-in Dreamweaver behaviors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

Chapter 13: Working with other applications
Cross-application integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Working with Fireworks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Working with Photoshop

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

September 4, 2007

Working with Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Working with Bridge

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Working with Device Central

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

Chapter 14: Creating and managing templates
About Dreamweaver templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Recognizing templates and template-based documents
Creating a Dreamweaver template
Creating editable regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Creating repeating regions
Using optional regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Defining editable tag attributes
Creating a nested template

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Editing, updating, and deleting templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Exporting and importing template content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Applying or removing a template from an existing document
Editing content in a template-based document
Template syntax

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Setting authoring preferences for templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

Chapter 15: Displaying XML data
About XML and XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Performing XSL transformations on the server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

Performing XSL transformations on the client

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Missing character entities

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Chapter 16: Building Spry pages visually
About the Spry framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Adding Spry widgets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Working with the Accordion widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Working with the Menu Bar widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Working with the Collapsible Panel widget
Working with the Tabbed Panels widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

Working with the Validation Text Field widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Working with the Validation Text Area widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469

Working with the Validation Select widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472

Working with the Validation Checkbox widget
Displaying data with Spry
Adding Spry effects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Chapter 17: Preparing to build dynamic sites
Understanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Installing a local web server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498

Setting up a web application

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Database connections for ColdFusion developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508

Database connections for ASP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Database connections for PHP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

September 4, 2007

Database connections for ASP.NET developers
Database connections for JSP developers
Troubleshooting database connections
Removing connection scripts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530

Chapter 18: Data sources for web applications
Using a database to store content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
Collecting data submitted by users

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532

Accessing data stored in session variables

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535

Chapter 19: Making pages dynamic
Optimizing the workspace for visual development
Designing dynamic pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541

Dynamic content sources overview
Dynamic content panels

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546

Defining sources of dynamic content
Adding dynamic content to pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564

Changing dynamic content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567

Displaying database records

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570

Viewing live data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

Using web services

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Adding custom server behaviors
Creating forms

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600

Chapter 20: Building applications visually
Building master and detail pages (all servers)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614

Building search and results pages (ColdFusion, ASP, JSP, PHP)
Building a database search page (ASP.NET)
Building a record insert page (all servers)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633

Building pages to update a record (all servers)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637

Building pages to delete a record (all servers)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643

Building pages with advanced data manipulation objects (ColdFusion, ASP, ASP.NET, JSP)
Building a registration page (ColdFusion, ASP, JSP, PHP)
Building a login page (ColdFusion, ASP, JSP, PHP)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660

Building a page only authorized users can access (ColdFusion, ASP, JSP, PHP)
Securing a folder in your application (ColdFusion)
Using ColdFusion components (ColdFusion)
Using JavaBeans (JSP)

. 651

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
. . . . . . . . . . . . . . 662

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672

Chapter 21: Building ASP.NET and ColdFusion forms
Building ColdFusion MX 7 forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Building ASP.NET forms

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686

Creating ASP.NET DataGrid and DataList web controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691

Chapter 22: Automating tasks
Automating tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698

September 4, 2007

vii

Chapter 23: Accessibility
Dreamweaver and accessibility

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704

Dreamweaver accessibility features
Designing pages for accessibility

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707

Chapter 24: Shortcuts and extensions
Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
Extensions
Index

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711

September 4, 2007

Chapter 1: Getting started
If you haven’t installed your new software, begin by reading some information on installation and other preliminaries. Before you begin working with your software, take a few moments to read an overview of Adobe Help and of
the many resources available to users. You have access to instructional videos, plug-ins, templates, user communities,
seminars, tutorials, RSS feeds, and much more.

Installation
Requirements
❖ To review complete system requirements and recommendations for your Adobe® software, see the Read Me file

on the installation disc.

Install the software
1 Close any other Adobe applications open on your computer.
2 Insert the installation disc into the disc drive, and follow the on-screen instructions.

Note: For more information, see the Read Me file on the installation disc.

Activate the software
If you have a single-user retail license for your Adobe software, you will be asked to activate your software; this is a
simple, anonymous process that you must complete within 30 days of starting the software.
For more information on product activation, see the Read Me file on your installation disc, or visit the Adobe website
at www.adobe.com/go/activation.
1 If the Activation dialog box isn’t already open, choose Help > Activate.
2 Follow the on-screen instructions.

Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose
Help > Deactivate.

Register
Register your product to receive complimentary installation support, notifications of updates, and other services.
❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install and

activate the software.
If you postpone registration, you can register at any time by choosing Help > Registration.

September 4, 2007

DREAMWEAVER CS3 2
User Guide

Adobe Help
Adobe Help resources
Documentation for your Adobe software is available in a variety of formats.
In-product and LiveDocs Help

In-product Help provides access to all documentation and instructional content available at the time the software
ships. It is available through the Help menu in your Adobe software.
LiveDocs Help includes all the content from in-product Help, plus updates and links to additional instructional
content available on the web. For some products, you can also add comments to the topics in LiveDocs Help. Find
LiveDocs Help for your product in the Adobe Help Resource Center, at www.adobe.com/go/documentation.

Most versions of in-product and LiveDocs Help let you search across the Help systems of multiple products. Topics
may also contain links to relevant content on the web or to topics in the Help of another product.
Think of Help, both in the product and on the web, as a hub for accessing additional content and communities of
users. The most complete and up-to-date version of Help is always on the web.
Adobe PDF documentation

The in-product Help is also available as a PDF that is optimized for printing. Other documents, such as installation
guides and white papers, may also be provided as PDFs.
All PDF documentation is available through the Adobe Help Resource Center, at www.adobe.com/go/documentation. To see the PDF documentation included with your software, look in the Documents folder on the installation
or content DVD.
Printed documentation

Printed editions of the in-product Help are available for purchase in the Adobe Store, at www.adobe.com/go/store.
You can also find books published by Adobe publishing partners in the Adobe Store.

September 4, 2007

DREAMWEAVER CS3 3
User Guide

A printed workflow guide is included with all Adobe Creative Suite® 3 products, and stand-alone Adobe products
may include a printed getting started guide.

Using Help in the product
In-product Help is available through the Help menu. After you start the Adobe Help Viewer, click Browse to see Help
for additional Adobe products installed on your computer.
These Help features facilitate cross-product learning:

• Topics may contain links to the Help systems of other Adobe products or to additional content on the web.
• Some topics are shared across two or more products. For instance, if you see a Help topic with an Adobe
Photoshop® CS3 icon and an Adobe After Effects® CS3 icon, you know that the topic either describes functionality
that is similar in the two products or describes cross-product workflows.

• You can search across the Help systems of multiple products.
If you search for a phrase, such as “shape tool,” enclose it in quotation marks to see only those topics that include all
the words in the phrase.
A

C
D

Adobe Help
A. Back/Forward buttons (previously visited links) B. Expandable subtopics C. Icons indicating shared topic D. Previous/Next buttons (topics
in sequential order)

Accessibility features

Adobe Help content is accessible to people with disabilities—such as mobility impairments, blindness, and low
vision. In-product Help supports these standard accessibility features:

• The user can change text size with standard context menu commands.
• Links are underlined for easy recognition.
• If link text doesn’t match the title of the destination, the title is referenced in the Title attribute of the Anchor tag.
For example, the Previous and Next links include the titles of the previous and next topics.

September 4, 2007

DREAMWEAVER CS3 4
User Guide

• Content supports high-contrast mode.
• Graphics without captions include alternate text.
• Each frame has a title to indicate its purpose.
• Standard HTML tags define content structure for screen reading or text-to-speech tools.
• Style sheets control formatting, so there are no embedded fonts.
Keyboard shortcuts for Help toolbar controls (Windows)
Back button Alt+Left Arrow
Forward button Alt+Right Arrow
Print Ctrl+P
About button Ctrl+I
Browse menu Alt+Down Arrow or Alt+Up Arrow to view Help for another application
Search box Ctrl+S to place the insertion point in the Search box

Keyboard shortcuts for Help navigation (Windows)

• To move between panes, press Ctrl+Tab (forward) and Shift+Ctrl+Tab (backward).
• To move through and outline links in a pane, press Tab (forward) or Shift+Tab (backward).
• To activate an outlined link, press Enter.
• To make text bigger, press Ctrl+equal sign.
• To make text smaller, press Ctrl+hyphen.

Choosing the right Help documents
The following list summarizes the documentation available from the Help menu. Use this list to find the Help system
that will answer your question.

• Dreamweaver Help (called Using Dreamweaver), intended for all users, gives comprehensive information about all
Adobe® Dreamweaver® CS3 features.

• Extending Dreamweaver, which describes the Dreamweaver framework and the application programming
interface (API), is intended for advanced users who want to build extensions or customize the Dreamweaver
interface.

• Dreamweaver API Reference documents the utility API and JavaScript API, used by advanced users who want to
build extensions and customize the interface.

• Spry Framework Help documents the creation of Ajax data sets, widgets, and effects with the Spry framework and
includes codes samples and quick starts. These documents are not Dreamweaver-specific. For Dreamweaverspecific Spry topics, see Using Dreamweaver.

• ColdFusion Help is a selection of books in the Macromedia® ColdFusion® from Adobe documentation set (the full
set is available on LiveDocs). These Help documents are intended for both beginners and advanced developers
interested in ColdFusion.

• Reference gives access to HTML, server model, and other reference manuals. They are intended for anyone
needing more information about coding syntax, coding concepts, and so on.

September 4, 2007

DREAMWEAVER CS3 5
User Guide

Resources
Adobe Video Workshop
The Adobe Creative Suite 3 Video Workshop offers over 200 training videos covering a wide range of subjects for
print, web, and video professionals.
You can use the Adobe Video Workshop to learn about any Creative Suite 3 product. Many videos show you how to
use Adobe applications together.

September 4, 2007

DREAMWEAVER CS3 6
User Guide

When you start the Adobe Video Workshop, you choose the products you want to learn and the subjects you want
to view. You can see details about each video to focus and direct your learning.

Community of presenters

With this release, Adobe Systems invited the community of its users to share their expertise and insights. Adobe and
lynda.com present tutorials, tips, and tricks from leading designers and developers such as Joseph Lowery, Katrin
Eismann, and Chris Georgenes. You can see and hear Adobe experts such as Lynn Grillo, Greg Rewis, and Russell
Brown. In all, over 30 product experts share their knowledge.
Tutorials and source files

The Adobe Video Workshop includes training for novices and experienced users. You’ll also find videos on new
features and key techniques. Each video covers a single subject and typically runs about 3-5 minutes. Most videos
come with an illustrated tutorial and source files, so you can print detailed steps and try the tutorial on your own.
Using Adobe Video Workshop

You can access Adobe Video Workshop using the DVD included with your Creative Suite 3 product. It’s also available
online at www.adobe.com/go/learn_videotutorials. Adobe will regularly add new videos to the online Video
Workshop, so check in to see what’s new.

Dreamweaver CS3 videos
Adobe Video Workshop covers a wide range of subjects for Adobe Dreamweaver® CS3, including these:

• Using and customizing CSS-based layouts
• Using Spry widgets
• Styling forms with CSS
• Troubleshooting publishing problems

September 4, 2007

DREAMWEAVER CS3 7
User Guide

• Creating rollovers
Videos also show you how to use Dreamweaver CS3 with other Adobe software:

• Designing websites with Dreamweaver and Photoshop
• Using Dreamweaver templates with Contribute®
• Importing, copying and pasting between web applications
To access Adobe Creative Suite 3 video tutorials, visit Adobe Video Workshop at
www.adobe.com/go/learn_videotutorials.

Extras
You have access to a wide variety of resources that will help you make the most of your Adobe software. Some of
these resources are installed on your computer during the setup process; additional helpful samples and documents
are included on the installation or content disc. Unique extras are also offered online by the Adobe Exchange
community, at www.adobe.com/go/exchange.
Installed resources

During software installation, a number of resources are placed in your application folder. To view those files, navigate
to the application folder on your computer.

• Windows®: [startup drive]\Program Files\Adobe\[Adobe application]
• Mac OS®: [startup drive]/Applications/[Adobe application]
The application folder may contain the following resources:
Plug-ins Plug-in modules are small software programs that extend or add features to your software. Once installed,

plug-in modules appear as options in the Import or Export menu; as file formats in the Open, Save As, and Export
Original dialog boxes; or as filters in the Filter submenus. For example, a number of special effects plug-ins are
automatically installed in the Plug-ins folder inside the Photoshop CS3 folder.
Presets Presets include a wide variety of useful tools, preferences, effects, and images. Product presets include

brushes, swatches, color groups, symbols, custom shapes, graphic and layer styles, patterns, textures, actions,
workspaces, and more. Preset content can be found throughout the user interface. Some presets (for example,
Photoshop Brush libraries) become available only when you select the corresponding tool. If you don’t want to create
an effect or image from scratch, go to the preset libraries for inspiration.
Templates Template files can be opened and viewed from Adobe Bridge CS3, opened from the Welcome Screen, or
opened directly from the File menu. Depending on the product, template files range from letterheads, newsletters,

September 4, 2007

DREAMWEAVER CS3 8
User Guide

and websites to DVD menus and video buttons. Each template file is professionally constructed and represents a
best-use example of product features. Templates can be a valuable resource when you need to jump-start a project.

Yo ur Inv est

me nt Gu ide

Are you leav
ing mon ey
on the tabl
e?

Typi non habe
nt claritatem
insitam; est
claritatem.
Investigationes
usus legen
tis in iis qui
demonstra
legunt saepi
nstravverun
facit eorum
eruntt lecto
us. Claritas
res legere me
est etiam proce
lius quod ii
ssus.

Vel:

CORE INVE
STME NT SPEC
TRUM
Vel illum dolore
eu feugiat nulla
et iusto odio
facilisis at vero
dignissim qui.
eros et accum
san

Ad : Vulputate:

Travel Earth

RETIR EMEN
T SAVI NG
PLAN
Vel illum dolor
e eu feugia
t nulla facilis
et iusto odio
is at vero eros
dignissim qui.
et accumsan

Best 100 places to see on the planet
in your lifetime

01
01

ET
ET
DUO

TETU

R SADI

NG
PSCI

ET JUSTO
KASD.
ET ACCUSAM
CLITA
EOS
STET
REBUM.
ET EA

COSE
VERO

Pelletir Inc.

Ca
si
Sp opia
A

DOLORES

volute
ipsummy
, commy
re eugiarud tem
eraesexer
n ullutet

vero LC H
nulch dio E
agiam
e eum
sum et
ad
$45 a
lorp
erit
agiam
vero et
nulch dio ad atin
agaim e su eum utet
nu
et ma
$25 llam ad eu
m
lorp
agiamerit
vero et sum
eum dio ad lo a
rper
$35 nulla
it
m

sucic C IV
vero vero ER O
nulch dio dio S
e su eum
ma

SUR

VIC
EM

EN
U

$15
eum
vero nulla
nulch dio m
agaim
e su eum
nu
et ma
$35 llam ad eu
m

eum
$35 nulla
m

sucic C IV
vero vero ER O
nu dio dio S
$15 lche su eum
ma
eum
vero nulla
nulch dio m
agaim
e su eum
nu
et ma
$35 llam ad eu
m

Samples Sample files include more complicated designs and are a great way to see new features in action. These files

demonstrate the range of creative possibilities available to you.
Fonts Several OpenType® fonts and font families are included with your Creative Suite product. Fonts are copied to

your computer during installation:

• Windows: [startup drive]\Windows\Fonts
• Mac OS X: [startup drive]/Library/Fonts
For information about installing fonts, see the Read Me file on the installation DVD.
DVD content

The installation or content DVD included with your product contains additional resources for use with your
software. The Goodies folder contains product-specific files such as templates, images, presets, actions, plug-ins, and
effects, along with subfolders for Fonts and Stock Photography. The Documentation folder contains a PDF version
of the Help, technical information, and other documents such as specimen sheets, reference guides, and specialized
feature information.
Adobe Exchange

For more free content, visit www.adobe.com/go/exchange, an online community where users download and share
thousands of free actions, extensions, plug-ins, and other content for use with Adobe products.

Bridge Home
Bridge Home, a new destination in Adobe Bridge CS3, provides up-to-date information on all your Adobe Creative
Suite 3 software in one convenient location. Start Adobe Bridge, then click the Bridge Home icon at the top of the
Favorites panel to access the latest tips, news, and resources for your Creative Suite tools.

September 4, 2007

DREAMWEAVER CS3 9
User Guide

Note: Bridge Home may not be available in all languages.

Adobe Design Center
Adobe Design Center offers articles, inspiration, and instruction from industry experts, top designers, and Adobe
publishing partners. New content is added monthly.

You can find hundreds of tutorials for design products and learn tips and techniques through videos, HTML
tutorials, and sample book chapters.

September 4, 2007

DREAMWEAVER CS3 10
User Guide

New ideas are the heart of Think Tank, Dialog Box, and Gallery:

• Think Tank articles consider how today’s designers engage with technology and what their experiences mean for
design, design tools, and society.

• In Dialog Box, experts share new ideas in motion graphics and digital design.
• The Gallery showcases how artists communicate design in motion.
Visit Adobe Design Center at www.adobe.com/designcenter.

Adobe Developer Center
Adobe Developer Center provides samples, tutorials, articles, and community resources for developers who build
rich Internet applications, websites, mobile content, and other projects using Adobe products. The Developer Center
also contains resources for developers who develop plug-ins for Adobe products.

In addition to sample code and tutorials, you'll find RSS feeds, online seminars, SDKs, scripting guides, and other
technical resources.
Visit Adobe Developer Center at www.adobe.com/go/developer.

Customer support
Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information for your product
and to learn about free and paid technical support options. Click the Training link for access to Adobe Press books,
a variety of training resources, Adobe software certification programs, and more.

Downloads
Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software. In addition, the Adobe
Store (at www.adobe.com/go/store) provides access to thousands of plug-ins from third-party developers, helping
you to automate tasks, customize workflows, create specialized professional effects, and more.

September 4, 2007

DREAMWEAVER CS3 11
User Guide

Adobe Labs
Adobe Labs gives you the opportunity to experience and evaluate new and emerging technologies and products from
Adobe.
At Adobe Labs, you have access to resources such as these:

• Prerelease software and technologies
• Code samples and best practices to accelerate your learning
• Early versions of product and technical documentation
• Forums, wiki-based content, and other collaborative resources to help you interact with like-minded developers
Adobe Labs fosters a collaborative software development process. In this environment, customers quickly become
productive with new products and technologies. Adobe Labs is also a forum for early feedback, which the Adobe
development teams use to create software that meets the needs and expectations of the community.
Visit Adobe Labs at www.adobe.com/go/labs.

User communities
User communities feature forums, blogs, and other avenues for users to share technologies, tools, and information.
Users can ask questions and find out how others are getting the most out of their software. User-to-user forums are
available in English, French, German, and Japanese; blogs are posted in a wide range of languages.
To participate in forums or blogs, visit www.adobe.com/communities.

What’s new
Top new features of Adobe Dreamweaver CS3
Spry framework for Ajax

With Adobe® Dreamweaver® CS3, you can visually design, develop, and deploy dynamic user interfaces using the
Spry framework for Ajax. The Spry framework for Ajax is a JavaScript library for web designers that allows designers
to build pages that provide a richer experience for their users. Unlike other Ajax frameworks, Spry is accessible to
both designers and developers alike, as 99% of it is actually HTML. See “Building Spry pages visually” on page 449.
Spry widgets

Spry widgets are prebuilt, common user interface components that you can customize using CSS, and then add to
your web pages. With Dreamweaver, you can add a number of Spry widgets to your pages, including XML-driven
lists and tables, accordions, tabbed interfaces, and form elements with validation. See “Adding Spry widgets” on
page 449.
Spry effects

Spry effects are a simple, elegant way of enhancing the look and feel of your website. You can apply them to almost
any element on an HTML page. You can add Spry effects to enlarge, shrink, fade, and highlight elements; visually
alter a page element for a certain period of time; and more. See “Adding Spry effects” on page 486.

September 4, 2007

DREAMWEAVER CS3 12
User Guide

Advanced Photoshop CS3 integration

Dreamweaver includes enhanced integration with Photoshop CS3. Now, designers can simply select any portion of
a design in Photoshop—even across multiple layers—and paste it directly into a Dreamweaver page. Dreamweaver
presents a dialog box where you can specify optimization options for the image. Should you ever need to edit the
image, simply double-click the image to open the original layered PSD file in Photoshop for editing. See “Working
with Photoshop” on page 374.
Browser Compatibility Check

The new Browser Compatibility Check feature in Dreamweaver generates reports that identify CSS-related
rendering issues in a variety of browsers. In code view, issues are flagged with green underlining, so you know exactly
where the problem is. After you identify the problem, you can quickly fix it if you know the solution, or, if you need
more information, you can visit Adobe CSS Advisor. See “Check for cross-browser CSS rendering issues” on
page 141.
Adobe CSS Advisor

The Adobe CSS Advisor website contains information on the latest CSS issues, and is accessible directly from the
Dreamweaver user interface during the Browser Compatibility Check process. More than a forum, a wiki page, or a
discussion group, CSS Advisor makes it easy for you to comment with suggestions and improvements to existing
content, or to add new issues for the benefit of the entire community. See “Check for cross-browser CSS rendering
issues” on page 141.
CSS Layouts

Dreamweaver offers a set of predesigned CSS layouts that get your page up and running quickly and help you learn
about CSS page layout by providing extensive inline comments in the code. Most site designs on the web can be
categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers and
footers). Dreamweaver now offers a comprehensive list of essential layout designs that you can customize to fit your
needs. See “Create a page with a CSS layout” on page 149.
Manage CSS

The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a
document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules,
and place them where you need them—just by dragging and dropping. See “Move CSS rules” on page 137 and
“Convert inline CSS to a CSS rule” on page 138.
Adobe Device Central

Integrated with Dreamweaver as well as throughout the family of Creative Suite 3 software, Adobe Device Central
simplifies the creation of mobile content by giving you the ability to quickly access essential technical specifications
for each device, and shrink the text and images of your HTML page to show accurate rendering as it would appear
on the device. See “Previewing pages in mobile devices” on page 300.
Adobe Bridge CS3

Use Dreamweaver with Adobe Bridge CS3 for easy and consistent management of images and assets. Adobe Bridge
provides centralized access to your project files, applications, and settings, along with XMP metadata tagging and
searching capabilities. With its file-organization and file-sharing features, plus access to Adobe Stock Photos, Adobe
Bridge provides a more efficient creative workflow and keeps you on top of your print, web, video, and mobile
projects. See “Working with Bridge” on page 383.

September 4, 2007

Chapter 2: Workspace
The Adobe® Dreamweaver® CS3 workspace contains the toolbars, inspectors, and panels that you use to build web
pages. You can customize the general appearance and behavior of the workspace.

Dreamweaver workflow and workspace
Dreamweaver workflow overview
You can use several approaches to create a website; this is one approach:
Plan and set up your site

Determine where the files will go and examine site requirements, audience profiles, and site goals. Additionally,
consider technical requirements such as user access, as well as browser, plug-in, and download restrictions. After
you’ve organized your information and determined a structure, you can begin creating your site. (See “Working with
Dreamweaver sites” on page 40.)
Organize and manage your site files

In the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. The
Files panel also has many tools for managing your site, transferring files to and from a remote server, setting up a
Check In/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and
remote sites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly
from the Assets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of your
Adobe®Contribute® sites. (See “Managing files and folders” on page 77 and “Managing assets and libraries” on
page 108.)
Lay out your web pages

Choose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with one
another to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSS
layouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the page
structure. If you want to display multiple elements at once in a browser, you can use frames to lay out your
documents. Finally, you can create new pages based on a Dreamweaver template, then update the layout of those
pages automatically when the template changes. (See “Creating pages with CSS” on page 120 and “Laying out pages
with HTML” on page 173.)
Add content to pages

Add assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML
links, jump menus, and more. You can use built-in page-creation features for such elements as titles and
backgrounds, type directly in the page, or import content from other documents. Dreamweaver also provides
behaviors for performing tasks in response to specific events, such as validating a form when the visitor clicks the
Submit button or opening a second browser window when the main page is finished loading. Finally, Dreamweaver
provides tools for maximizing website performance and for testing pages to ensure compatibility with different web
browsers. (See “Adding content to pages” on page 214.)

September 4, 2007

DREAMWEAVER CS3 14
User Guide

Create pages by hand coding

Coding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editing
tools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and
edit your pages. (See “Working with page code” on page 301.)
Set up a web application for dynamic content

Many websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow
some visitors to add new information and edit information in the databases. To create such pages, you must first set
up a web server and application server, create or modify a Dreamweaver site, and connect to a database. (See
“Preparing to build dynamic sites” on page 491.)
Create dynamic pages

In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from
databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto
the page.
You can set your page to display one record or many records at a time, display more than one page of records, add
special links to move from one page of records to the next (and back), and create record counters to help users keep
track of the records. You can encapsulate application or business logic using technologies such as Macromedia®
ColdFusion® from Adobe® and web services. If you need more flexibility, you can create custom server behaviors and
interactive forms. (See “Making pages dynamic” on page 538.)
Test and publish

Testing your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle,
you publish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remains
current and functional. (See “Getting and putting files to and from your server” on page 87.)

Workspace layout overview
The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the
most common operations in toolbars so that you can quickly make changes to your documents.
In Windows®, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all
windows and panels are integrated into a single larger application window.

September 4, 2007

DREAMWEAVER CS3 15
User Guide

A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel

On Mac OS®, Dreamweaver can display multiple documents in a single window with tabs that identify each
document. Dreamweaver can also display a floating workspace in which each document appears in its own
individual window. Panel groups are initially docked together, but can be undocked into their own windows.
Windows “snap” automatically to each other, to the sides of the screen, and to the Document window as you drag or
resize them.
A

A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel

For a tutorial on setting up the Dreamweaver workspace, see www.adobe.com/go/vid0143.

September 4, 2007

DREAMWEAVER CS3 16
User Guide

See also
“Using toolbars, inspectors, context menus, and panels” on page 27
“Choose the workspace layout (Windows)” on page 34
“Choose the workspace layout (Macintosh)” on page 34
“Display tabbed documents (Macintosh)” on page 34

Workspace elements overview
The workspace includes the following elements.
Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows,
use the Window menu.
The Welcome screen Lets you open a recent document or create a new document. From the Welcome screen, you

can also learn more about Dreamweaver by taking a product tour or a tutorial.
The Insert bar Contains buttons for inserting various types of objects, such as images, tables, and AP elements, into
a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example,
you can insert a table by clicking the Table button in the Insert bar. If you prefer, you can insert objects using the
Insert menu instead of the Insert bar.
The Document toolbar Contains buttons that provide options for different views of the Document window (such as

Design view and Code view), various viewing options, and some common operations such as previewing in a
browser.
The Standard toolbar (Not displayed in the default workspace layout.) Contains buttons for common operations

from the File and Edit menus: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. To display the Standard
toolbar, select View > Toolbars > Standard.
The Coding toolbar (Displayed in Code view only.) Contains buttons that let you perform many standard coding

operations.
The Style Rendering toolbar (Hidden by default.) Contains buttons that let you see how your design would look in
different media types if you used media-dependent style sheets. It also contains a button that lets you enable or
disable Cascading Style Sheets (CSS) styles.
The Document window Displays the current document as you create and edit it.
The Property inspector Lets you view and change a variety of properties for the selected object or text. Each kind of
object has different properties. The Property inspector is not expanded by default in the Coder workspace layout.
The tag selector Located in the status bar at the bottom of the Document window. Shows the hierarchy of tags

surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents.
Panel groups Sets of related panels grouped together under one heading. To expand a panel group, click the

expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s
title bar.
The Files panel Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote
server. The Files panel also lets you access all the files on your local disk, much like Windows Explorer (Windows)
or the Finder (Macintosh).

September 4, 2007

DREAMWEAVER CS3 17
User Guide

See also
“Working in the Document window” on page 24
“Using toolbars, inspectors, context menus, and panels” on page 27
“About panel groups” on page 31

Document window overview
The Document window shows the current document. You can select any of the following views:
Design view A design environment for visual page layout, visual editing, and rapid application development. In this

view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see
when viewing the page in a browser. You can configure the Design view to display dynamic content while you’re
working on the document.
Code view A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such

PHP or ColdFusion Markup Language (CFML)—and any other kind of code.
Code and Design view Lets you see both Code view and Design view for the same document in a single window.

When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and
filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.
When the Document window is maximized in the integrated workspace layout (Windows only), it has no title bar;
in that case the page title and the file’s path and filename appear in the title bar of the main workspace window.
When a Document window is maximized, tabs appear at the top of the Document window showing the filenames of
all open documents. To switch to a document, click its tab.

See also
“Working in the Document window” on page 24
“About coding in Dreamweaver” on page 301
“View live data in Design view” on page 579

Document toolbar overview
The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code,
Design, and a split view that shows both Code and Design views.
The toolbar also contains some common commands and options related to viewing the document and transferring
it between the local and remote sites.
A

A. Show Code View B. Show Code and Design Views C. Show Design View D. Document Title E. File Management F. Preview/Debug in
Browser G. Refresh Design View H. View Options I. Visual Aids J. Validate Markup K. Check Browser Compatibility

The following options appear in the Document toolbar:
Show Code View Displays only the Code view in the Document window.
Show Code and Design Views Splits the Document window between the Code and the Design views. When you
select this combined view, the option Design View on Top becomes available in the View Options menu.

September 4, 2007

DREAMWEAVER CS3 18
User Guide

Show Design View Displays only the Design view in the Document window.

Note: If you are working with XML, JavaScript, CSS, or other code-based file types, you cannot view the files in Design
view and the Design and Split buttons are dimmed out.
Document Title Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your

document already has a title, it appears in this field.
File Management Displays the File Management pop-up menu.
Preview/Debug in Browser Allows you to preview or debug your document in a browser. Select a browser from the

pop-up menu.
Refresh Design View Refreshes the document’s Design view after you make changes in Code view. Changes you

make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the
file or clicking this button.
Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to
select a code block’s opening or closing tags.
View Options Allows you to set options for Code view and Design view, including which view should appear above

the other. Options in the menu are for the current view: Design view, Code view, or both.
Visual Aids Lets you use different visual aids to design your pages.
Validate Markup Lets you validate the current document or a selected tag.
Check Browser Compatibility Lets you check if your CSS is compatible across different browsers.

See also
“Display toolbars” on page 27
“Customizing the coding environment” on page 308
“View and edit head content” on page 337
“Using visual aids for layout” on page 173

Standard toolbar overview
The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Save, Save
All, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the equivalent menu commands.

See also
“Display toolbars” on page 27
“Creating and opening documents” on page 68

Status bar overview
The status bar at the bottom of the Document window provides additional information about the document you are
creating.

September 4, 2007

DREAMWEAVER CS3 19
User Guide

C D

A. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window Size pop-up menu G. Document size and estimated
download time

Tag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select

that tag and all its contents. Click to select the entire body of the document. To set the class or id attributes
for a tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from
the context menu.
Select tool Enables and disables the Hand tool.
Hand tool Lets you click the document and drag it in the Document window.
Zoom tool and Set Magnification pop-up menu Let you set a magnification level for your document.
Window Size pop-up menu (Visible in Design view only.) Lets you resize the Document window to predetermined

or custom dimensions.
Document size and download time Shows the estimated document size and estimated download time for the page,
including all dependent files such as images and other media files.

See also
“Set window size and connection speed” on page 26
“Zoom in and out” on page 223
“Resize the Document window” on page 25
“Set download time and size preferences” on page 225

Insert bar overview
The Insert bar contains buttons for creating and inserting objects such as tables, AP elements, and images. When you
roll the pointer over a button, a tooltip appears with the name of the button.
The buttons are organized into several categories, which you can switch by clicking the tabs along the top of the
Insert bar. Additional categories appear when the current document contains server code, such as ASP or CFML
documents. When you start Dreamweaver, the category you were last working in opens.

Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the
default action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, the
next time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new option
from the pop-up menu, the default action for the button changes.
The Insert bar is organized in the following categories:
The Common category Lets you create and insert the most commonly used objects, such as images and tables.

September 4, 2007

DREAMWEAVER CS3 20
User Guide

The Layout category Lets you insert tables, div tags, frames, and Spry widgets. You can also choose two views for

tables: Standard (default) and Expanded Tables.
The Forms category Contains buttons for creating forms and inserting form elements, including Spry validation

widgets.
The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated

regions, and record insertion and update forms.
The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets.
The Text category Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.
The Favorites category Lets you group and organize the Insert bar buttons you use the most in one common place.
Server-code categories Available only for pages that use a particular server language, including ASP, ASP.NET,

CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP. Each of these categories provides server-code objects that
you can insert in Code view.

See also
“Use the Insert bar” on page 28
“Building Spry pages visually” on page 449

Coding toolbar overview
The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and
expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and
inserting recently used code snippets. The Coding toolbar is visible only in Code view and appears vertically on the
left side of the Document window.

You cannot undock or move the Coding toolbar, but you can hide it.

September 4, 2007

DREAMWEAVER CS3 21
User Guide

You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and
Auto Indent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates
the toolbar. For more information, see Extending Dreamweaver.

See also
“Display toolbars” on page 27
“Insert code with the Coding toolbar” on page 316

Style Rendering toolbar overview
The Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in
different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable
CSS styles. To display the toolbar, select View > Toolbars > Style Rendering.

This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might
specify a body rule for print media and a different body rule for handheld devices. For more information on creating
media-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.
By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered
on a computer screen). You can view the following media type renderings by clicking the respective buttons in the
Style Rendering toolbar.
Render Screen Media Type Shows you how the page appears on a computer screen.
Render Print Media Type Shows you how the page appears on a printed piece of paper.
Render Handheld Media Type Shows you how the page appears on a handheld device, such as a mobile phone or a

BlackBerry device.
Render Projection Media Type Shows you how the page appears on a projection device.
Render TTY Media Type Shows you how the page appears on a teletype machine.
Render TV Media Type Shows you how the page appears on a television screen.
Toggle Displaying Of CSS Styles Lets you enable or disable CSS styles. This button works independently of the other

media buttons.
For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.

See also
“Display toolbars” on page 27

September 4, 2007

DREAMWEAVER CS3 22
User Guide

Property inspector overview
The Property inspector lets you examine and edit the most common properties for the currently selected page
element, such as text or an inserted object. The contents of the Property inspector vary depending on the element
selected. For example, if you select an image on your page, the Property inspector changes to show properties for the
image (such as the file path to the image, the width and height of the image, the border around the image, if any, and
so on).

The Property inspector is at the lower edge of the workspace by default, but you can dock it at the upper edge of the
workspace, or make it a floating panel in the workspace.

See also
“Dock and undock panels and panel groups” on page 32
“Use the Property inspector” on page 30

Files panel overview
Use the Files panel to view and manage the files in your Dreamweaver site.

When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and expand or
collapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, or
the testing server as a list of files. When expanded, it displays the local site and either the remote site or testing server.
The Files panel can also display a visual site map of the local site.

September 4, 2007

DREAMWEAVER CS3 23
User Guide

For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote
site—that appears by default in the collapsed panel.

See also
“Work with files in the Files panel” on page 80

CSS Styles panel overview
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current
mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS
Styles panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both
All and Current mode.

You can resize any of the panes by dragging the borders between the panes.
In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS
properties for the current selection in the document, a Rules pane that displays the location of selected properties
(or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS
properties for the rule defining the selection.
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom).
The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets
attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All
Rules pane.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

See also
“Creating and managing CSS” on page 124

September 4, 2007

DREAMWEAVER CS3 24
User Guide

Visual guides overview
Dreamweaver provides several kinds of visual guides to help you design documents and predict approximately how
they appear in browsers. You can do any of the following:

• Instantly snap the Document window to a desired window size to see how the elements fit on the page.
• Use a tracing image as the page background to help you duplicate a design created in an illustration or imageediting application such as Adobe® Photoshop® or Adobe® Fireworks®.

• Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.
• Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).
Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap
to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the
grid.) Snapping works regardless of whether the grid is visible.

See also
“Using visual aids for layout” on page 173

GoLive users
If you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introduction
to the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.
For more information, see www.adobe.com/go/learn_dw_golive.

Working in the Document window
Switch between views in the Document window
You can view a document in the Document window in Code view, Design view, or Code and Design views.

See also
“Document window overview” on page 17
Switch to Code view
❖ Do one of the following:

• Select View > Code.
• In the Document toolbar, click the Show Code View button
Switch to Design view
❖ Do one of the following:

• Select View > Design.
• In the Document toolbar, click the Show Design View button

September 4, 2007

DREAMWEAVER CS3 25
User Guide

Show both Code and Design views
❖ Do one of the following:

• Select View > Code and Design.
• In the Document toolbar, click the Show Code and Design Views button
Toggle between Code view and Design view
❖ Press Control+backquote (`).

If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view
to the other.

Cascade or tile Document windows
If you have many documents open at once, you can cascade or tile them.

See also
“Choose the workspace layout (Windows)” on page 34
“Display tabbed documents (Macintosh)” on page 34
“Save custom workspace layouts” on page 35
Cascade Document windows
❖ Select Window > Cascade.

Tile Document windows

• (Windows) Select Window > Tile Horizontally or Window > Tile Vertically.
• (Macintosh) Select Window > Tile.

Resize the Document window
The status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best
at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined
sizes, or create sizes.
Resize the Document window to a predetermined size
❖ Select one of the sizes from the Window Size pop-up menu at the bottom of the Document window.

Note: (Windows only) You can maximize a Document window so that it fills the entire document area of the integrated
window. You can’t resize a Document window when it is maximized.

September 4, 2007

DREAMWEAVER CS3 26
User Guide

The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size is
listed in parentheses. For example, you would use the size “536 x 196 (640 x 480, Default)” if your visitors are likely
to be using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor.
For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the
lower-right corner of a window.
Change the values listed in the Window Size pop-up menu
1 Select Edit Sizes from the Window Size pop-up menu.
2 Click any of the width or height values in the Window Sizes list, and type a new value.

To make the Document window adjust only to a specific width (leaving the height unchanged), select a height value
and delete it.
3 Click the Description box to enter descriptive text about a specific size.
Add a new size to the Window Size pop-up menu
1 Select Edit Sizes from the Window Size pop-up menu.
2 Click the blank space below the last value in the Width column.
3 Enter values for Width and Height.

To set the Width or Height only, simply leave one field empty.
4 Click the Description field to enter descriptive text about the size you added.

For example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Mac
next to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.

Set window size and connection speed
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Status Bar from the Category list on the left.
3 Set any of the following options:
Window Sizes lets you customize the window sizes that appear in the status bar’s pop-up menu.
Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size.

The download size for the page is displayed in the status bar. When an image is selected in the Document window,
the image’s download size is displayed in the Property inspector.

See also
“Status bar overview” on page 18
“Resize the Document window” on page 25

Reports in Dreamweaver
You can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the following
types of reports:
Search Lets you search for tags, attributes, and specific text within tags.
Validation Lets you check for code or syntax errors.

September 4, 2007

DREAMWEAVER CS3 27
User Guide

Target Browser Check Lets you test the HTML in your documents to see if any tags or attributes are unsupported by

your target browsers.
Link Checker Lets you find and fix broken, external, and orphaned links.
Site Reports Enable you to improve workflow and test HTML attributes in your site. Workflow reports include

checked out by, recently modified, and design notes; HTML reports include combinable nested font tags, accessibility, missing Alt text, redundant nested tags, removable empty tags, and untitled documents.
FTP Log Enables you to view all FTP file transfer activity.
Server Debug Lets you view information to debug a Macromedia® ColdFusion® from Adobe® application.

See also
“Search for tags, attributes, or text in code” on page 320
“Testing your site” on page 104
“Validate tags” on page 328
“Check for browser compatibility” on page 328
“Find broken, external, and orphaned links” on page 295
“Put files on a remote server” on page 89
“Get files from a remote server” on page 88
“Use the ColdFusion debugger (Windows only)” on page 329

Using toolbars, inspectors, context menus, and panels
Display toolbars
Use the Document and Standard toolbars to perform document-related and standard editing operations; the Coding
toolbar to insert code quickly; and the Style Rendering toolbar to display your page as it would appear in different
media types. You can choose to display or hide the toolbars as necessary.

• Select View > Toolbars, and then select the toolbar.
• Right-click (Windows) or Control-click (Macintosh) any of the toolbars and select the toolbar from the context menu.
Note: To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbar
from the View Options pop-up menu at the top of the inspector.

See also
“Document toolbar overview” on page 17
“Standard toolbar overview” on page 18
“Coding toolbar overview” on page 20
“Style Rendering toolbar overview” on page 21

September 4, 2007

DREAMWEAVER CS3 28
User Guide

Use the Insert bar
The Insert bar contains buttons for creating and inserting objects such as tables and images. The buttons are
organized into categories.

See also
“Insert bar overview” on page 19
“Edit tags with Tag editors” on page 319
“Select and view elements in the Document window” on page 219
Hide or show the Insert bar

• Select Window > Insert.
• Right-click (Windows) or Control-click (Macintosh) in the Insert bar or the Document, Standard, or Coding
toolbar, and then select Insert Bar.
Note: If you are working with certain types of files, such as XML, JavaScript, Java, and CSS, the Insert bar and the Design
view option are dimmed because you cannot insert items into these code files.
Show the buttons in a particular category
❖ Click the category names at the top of the Insert bar.

Display the pop-up menu for a button
❖ Click the down arrow beside the button’s icon.

Show Insert bar categories as a menu:
❖ Right-click (Windows) or Control-click (Macintosh) a category tab in the Insert bar, and then select Show

as Menus.
Show Insert bar categories as tabs
❖ Click the arrow beside the category name on the left end of the Insert bar, and then select Show as Tabs.

Insert an object
1 Select the appropriate category from the left side of the Insert bar.
2 Do one of the following:

• Click an object button or drag the button’s icon into the Document window.
• Click the arrow on a button, then select an option from the menu.

September 4, 2007

DREAMWEAVER CS3 29
User Guide

Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file
or specify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag editor or a
panel for you to specify information before the code is inserted.
For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert
the object in Code view. For a few objects, inserting the object in Design view causes Dreamweaver to switch to Code
view before inserting the object.
Note: Some objects, such as named anchors, are not visible when the page is viewed in a browser window. You can
display icons in Design view that mark the locations of such invisible objects.
Bypass the object-insertion dialog box and insert an empty placeholder object
❖ Control-click (Windows) or Option-click (Macintosh) the button for the object.

For example, to insert a placeholder for an image without specifying an image file, Control-click or Option-click the
Image button.
Note: This procedure does not bypass all object-insertion dialog boxes. Many objects, including navigation bars, AP
elements, Flash buttons, and framesets, do not insert placeholders or default-valued objects.
Modify preferences for the Insert bar
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category of the Preferences dialog box, deselect Show Dialog When Inserting Objects to suppress
dialog boxes when you insert objects such as images, tables, scripts, and head elements or by holding down the
Control key (Windows) or the Option key (Macintosh) while creating the object.

When you insert an object with this option off, the object is given default attribute values. Use the Property inspector
to change object properties after inserting the object.
Add, delete, or manage items in the Favorites category of the Insert bar
1 Select any category in the Insert bar.
2 Right-click (Windows) or Control-click (Macintosh) in the area where the buttons appear (do not right-click in
the category name), and then select Customize Objects.
3 Make changes as necessary, and click OK. If you’re not in the Favorites category, select that category to see your
changes.

• To add an object, select an object in the Available Objects pane on the left, and then click the arrow between the
two panes or double-click the object in the Available Objects pane.
Note: You can add one object at a time. You cannot select a category name, such as Common, to add an entire category
to your favorites list.

• To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the
Remove Selected Object in Favorite Objects List button above the pane.

• To move an object, select an object in the Favorite Objects pane on the right, and then click the Up or Down arrow
button above the pane.

• To add a separator below an object, select an object in the Favorite Objects pane on the right, and then click the
Add Separator button below the pane.

September 4, 2007

DREAMWEAVER CS3 30
User Guide

Insert objects using buttons in the Favorites category
❖ Select the Favorites category from the left side of the Insert bar, and then click the button for any Favorites object

that you added.

Use the Property inspector
The Property inspector lets you examine and edit the most common properties for the currently selected page
element, such as text or an inserted object. The contents of the Property inspector vary depending on the element
selected.
Note: Use the Tag inspector to view and edit every attribute associated with a given tag properties.

See also
“Property inspector overview” on page 22
“Dock and undock panels and panel groups” on page 32
“Change attributes with the Tag inspector” on page 331
Show or hide the Property inspector
❖ Select Window > Properties.

Expand or collapse the Property inspector
❖ Click the expander arrow in the lower-right corner of the Property inspector.

View and change properties for a page element
1 Select the page element in the Document window.

You might have to expand the Property inspector to view all the properties for the selected element.
2 Change any of the properties in the Property inspector.

Note: For information on specific properties, select an element in the Document window, and then click the Help icon in
the upper-right corner of the Property inspector.
3 If your changes are not immediately applied in the Document window, apply the changes in one of these ways:

• Click outside the property-editing text fields.
• Press Enter (Windows) or Return (Macintosh).
• Press Tab to switch to another property.

Use context menus
Context menus provide convenient access to the most useful commands and properties related to the object or
window you’re working with. Context menus list only those commands that pertain to the current selection.
1 Right-click (Windows) or Control-click (Macintosh) the object or window.

September 4, 2007

DREAMWEAVER CS3 31
User Guide

2 Select a command from the context menu.

About panel groups
Panels in Dreamweaver are grouped together into panel groups. The selected panel within a panel group appears as
a tab. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups.
Panel groups can also be docked to the integrated application window (Windows only). This makes it easy to access
the panels you need without cluttering your workspace.
Note: When a panel group is floating (undocked), a narrow blank bar appears at the top of the panel group. In this
documentation, the term “panel group’s title bar” refers to the area where the panel group’s name appears, rather than to
this narrow blank bar.

View panels and panel groups
You can display or hide panel groups and panels in the workspace as necessary.
Expand or collapse a panel group

• Click the expander arrow on the left side of the panel group’s title bar

• Click the panel group’s title to collapse the panel group.
Close a panel group so that it isn’t visible on your screen
❖ Select Close Panel Group from the Options menu

in the panel group’s title bar.

September 4, 2007

DREAMWEAVER CS3 32
User Guide

Open a panel group or panel that isn’t visible on your screen
❖ From the Window menu, select a panel name.

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).
If you can’t find a panel, inspector, or window that’s marked as open, select Window > Arrange Panels to neatly lay
out all open panels.
Hide all panel groups
❖ Select Window > Hide Panels.

Select a panel within an expanded panel group
❖ Click the panel’s name.

See a panel group’s Options menu if it isn’t showing
❖ Expand the panel group by clicking its name or its expander arrow.

The Options menu is visible only when the panel group is expanded.
Some options are available in the panel group’s context menu even when the group is collapsed;
right-click (Windows) or Control-click (Macintosh) the panel group’s title bar to view the context menu.

Dock and undock panels and panel groups
You can move panels and panel groups as necessary, and arrange them so that they are floating or docked in the
workspace.
Most panels can be docked only to the left or the right of the Document window area in the integrated workspace,
while others (such as the Property inspector and the Insert bar) can be docked only to the upper or lower edge of the
integrated window.
Note: You cannot undock the Files panel if you are in Expanded mode. To collapse the Files panel before undocking, click
the Expand/Collapse button-—the right-most button at the top of the panel. If you close the Files panel while it’s
undocked, it disappears from the interface. To retrieve it, press F8 or select Window > Files.
Undock a panel group
❖ Drag the panel group by its gripper

(on the left side of the panel group’s title bar) until its outline indicates that

it’s no longer docked.
Note: If you undock the Property inspector, its format changes so that it no longer has a gripper bar or title bar, but you
can click anywhere on the panel to drag it or redock it.
Minimize or restore a panel or panel group
❖ Click the underlined panel title to minimize a panel. Click again to restore it to full size.

Redock a panel or panel group
❖ Drag the panel group by its title bar to the left or right sides of the workspace until you see a dark black outline

appear, and then let go. You may have to drag it upward to get the black outline so you can add it to the set of panels
already displayed.
Note: Some panels, such as the Property inspector and Results, must dock above or below the Document window, not to
the left or right.

September 4, 2007

DREAMWEAVER CS3 33
User Guide

Dock a panel group to other panel groups (floating workspace) or to the integrated window (Windows only)
❖ Drag the panel group by its gripper until its outline indicates that it’s docked.

Undock a panel from a panel group
❖ Select Group With > New Panel Group from the Options menu

in the panel group’s title bar.

You can also undock a panel by dragging it out of the panel group.

Dock a panel in another panel group
1 Select the panel you want to move by clicking its tab.
2 Select the destination panel group from the Group With submenu of the panel group’s Options menu.

The Group With command’s name changes depending on the name of the active panel.
Drag a floating (undocked) panel group without docking it
❖ Drag the panel group by the bar above its title bar.

The panel group doesn’t dock as long as you don’t drag it by its gripper.

Resize and rename panel groups
You can change the size and name of panel groups depending on your needs.
Change the size of the panel groups

• For floating panels, drag to resize the set of panel groups just as you would drag to resize any window in your
operating system.
For example, you can drag the resize area at the lower-right corner of the set of panel groups.

• For docked panels, drag the splitter bar between the panels and the Document window.
Maximize a panel group

• Select Maximize Panel Group from the Options menu

in the panel group’s title bar.

• Double-click anywhere in the panel group’s title bar.
Rename a panel group
1 Select Rename Panel Group from the Options menu in the panel group’s title bar.
2 Enter a new name and click OK.

September 4, 2007

DREAMWEAVER CS3 34
User Guide

Saving panel groups
Dreamweaver lets you save and restore different panel groups so that you can customize your workspace for different
activities. When you save a workspace layout, Dreamweaver remembers the panels in the specified layout, as well as
other attributes such as the positions and sizes of the panels, their collapsed or expanded states, the position and size
of the application window, and the position and size of the Document window.

See also
“Save custom workspace layouts” on page 35

Customizing the Dreamweaver CS3 workspace
Choose the workspace layout (Windows)
You can switch to a different workspace at any time.
❖ Select Window > Workspace Layout, and select any of the following workspace layouts:
Designer An integrated workspace using MDI (Multiple Document Interface), in which all Document windows and
panels are integrated into one larger application window, with the panel groups docked on the right.
Coder The same integrated workspace as Designer, but with the panel groups docked on the left, in a layout similar

to that used by Adobe® HomeSite® and ColdFusion, and with the Document window showing Code view by default.
Note: You can dock panel groups on either side of the workspace in either layout.
Dual Screen Lets you organize a layout if you have a secondary monitor. This layout puts all panels on the secondary

monitor, and keeps the Document window and Property inspector on the primary monitor.

Choose the workspace layout (Macintosh)
You can switch to a different workspace at any time.
❖ Select Window > Workspace Layout, and select either of the following workspace layouts:
Default An integrated workspace.
Dual Screen Lets you organize a layout if you have a secondary monitor. This layout puts all panels on the secondary

monitor, and keeps the Document window and Property inspector on the primary monitor.

Display tabbed documents (Macintosh)
You can view multiple documents in a single Document window by using tabs to identify each document. You can
also display them as part of a floating workspace, in which each document appears in its own window.
Open a tabbed document in a separate window
❖ Right-click (Windows) or Control-click (Macintosh) the tab and select Move To New Window from the context menu.

Combine separate documents into tabbed windows
❖ Select Window > Combine As Tabs.

September 4, 2007

DREAMWEAVER CS3 35
User Guide

Change the default tabbed document setting
1 Select Dreamweaver > Preferences, and then select the General category.
2 Select or deselect Open Documents in Tabs, and click OK.

Dreamweaver does not alter the display of documents that are currently open when you change preferences.
Documents opened after you select a new preference, however, display according to the preference you selected.

Save custom workspace layouts
Dreamweaver lets you save and restore different panel sets so that you can customize your workspace for different
activities. When you save a workspace layout, Dreamweaver remembers the panels in the specified layout, as well as
other attributes such as the positions and sizes of the panels, their collapsed or expanded states, and the position and
size of the application window.

See also
“About panel groups” on page 31
“Choose the workspace layout (Windows)” on page 34
Save a custom workspace layout
1 Arrange the panels as desired.
2 Select Window > Workspace Layout > Save Current.
3 Enter a name for the layout and click OK.
Switch to another custom workspace layout
❖ Select Window > Workspace Layout, and select your custom layout.

Rename or delete a custom workspace layout
1 Select Window > Workspace Layout > Manage.
2 Select a layout and do one of the following:

• To rename a layout, click the Rename button, enter a new layout name, and click OK.
• To delete a layout, click the Delete button.

Hide and display the Welcome screen
The Welcome screen appears when you start Dreamweaver and anytime that you do not have any documents open.
You can choose to hide the Welcome screen, and then later display it again. When the Welcome screen is hidden and
there are no documents open, the Document window is blank.
Hide the Welcome screen
❖ Select the Don’t Show Again option on the Welcome screen.

Display the Welcome screen
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select the Show Welcome Screen option.

September 4, 2007

DREAMWEAVER CS3 36
User Guide

About customizing Dreamweaver in multiuser systems
You can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows XP or
Mac OS X.
Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that
it recognizes, the application creates copies of a variety of configuration files. These user configuration files are stored
in a folder that belongs to you.
For example, in Windows XP, they’re stored in C:\Documents and Settings\username\Application
Data\Adobe\Dreamweaver 9\Configuration (which may be inside a hidden folder).
In Windows Vista, they’re stored in C:\Users\username\Application Data\Adobe\Dreamweaver 9\Configuration
(which may be inside a hidden folder).
In Mac OS X, they’re stored inside your Home folder; specifically, in Users/username/Library/Application
Support/Adobe/Dreamweaver 9/Configuration.
If you reinstall or upgrade Dreamweaver, Dreamweaver automatically makes backup copies of existing user configuration files, so if you customized those files by hand, you still have access to the changes you made.

Set General preferences for Dreamweaver
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Set any of the following options:
Open Documents In Tabs Opens all documents in a single window with tabs that let you switch between documents

(Macintosh only).
Show Welcome Screen Displays the Dreamweaver Welcome screen when you start Dreamweaver or when you don’t
have any documents open.
Reopen Documents on Startup Opens any documents that were open when you closed Dreamweaver. If this option

is not selected, Dreamweaver displays the Welcome screen or a blank screen when you start (depending on your
Show Welcome Screen setting).
Warn When Opening Read-Only Files Alerts you when you open a read-only (locked) file. Choose to unlock/check

out the file, view the file, or cancel.
Update Links When Moving Files Determines what happens when you move, rename, or delete a document within

your site. Set this preference to always update links automatically, never update links, or prompt you to perform an
update. (See “Update links automatically” on page 287.)
Show Dialog When Inserting Objects Determines whether Dreamweaver prompts you to enter additional infor-

mation when inserting images, tables, Shockwave movies, and certain other objects by using the Insert bar or the
Insert menu. If this option is off, the dialog box does not appear and you must use the Property inspector to specify
the source file for images, the number of rows in a table, and so on. For rollover images and Fireworks HTML, a
dialog box always appears when you insert the object, regardless of this option setting. (To temporarily override this
setting, Control-click (Windows) or Command-click (Macintosh) when creating and inserting objects.)
Enable Double-Byte Inline Input Lets you enter double-byte text directly into the Document window if you are using
a development environment or language kit that facilitates double-byte text (such as Japanese characters). When this
option is deselected, a text input window appears for entering and converting double-byte text; the text appears in
the Document window after it is accepted.

September 4, 2007

DREAMWEAVER CS3 37
User Guide

Switch To Plain Paragraph After Heading Specifies that pressing Enter (Windows) or Return (Macintosh) at the end
of a heading paragraph in Design view creates a new paragraph tagged with a p tag. (A heading paragraph is one
that’s tagged with a heading tag such as h1 or h2.) When the option is disabled, pressing Enter or Return at the end
of a heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple
headings in a row and then go back and fill in details).
Allow Multiple Consecutive Spaces Specifies that typing two or more spaces in Design view creates nonbreaking
spaces that appear in a browser as multiple spaces. (For example, you can type two spaces between sentences, as you
would on a typewriter.) This option is designed mostly for people who are used to typing in word processors. When
the option is disabled, multiple spaces are treated as a single space (because browsers treat multiple spaces as single
spaces).
Use and in Place of and Specifies that Dreamweaver applies the strong tag whenever you
perform an action that would normally apply the b tag, and applies the em tag whenever you perform an action that
would normally apply the i tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector
in HTML mode and choosing Text > Style > Bold or Text > Style > Italic. To use the b and i tags in your documents,
deselect this option.

Note: The World Wide Web Consortium discourages use of the b and i tags; the strong and em tags provide more
semantic information than the b and i tags do.
Use CSS Instead of HTML Tags Specifies that Dreamweaver uses CSS styles instead of HTML tags when you format
text with the Property inspector. By default, Dreamweaver formats text by using CSS. Each time a font, size, or color
is defined for a text selection, a new document-specific style is created, which is then available from the Property
inspector’s Style pop-up menu. The only exceptions are for bold and italic fonts, for which Dreamweaver uses HTML
tags instead of CSS.

Even if the document links to an external style sheet, new style declarations are written to the head of the document,
not in the CSS file.
This general behavior may differ in the following situations:

• If the document already formats everything using font tags, Dreamweaver uses font tags and modifies the body
tag to use HTML code.

• If the document’s body tag uses HTML to set the page’s appearance, but the page doesn’t exclusively use font tags,
Dreamweaver still uses CSS to format text.
If you deselect this option, Dreamweaver uses HTML tags such as font tags to format text, and HTML code in the
body tag to set the page’s appearance.
Warn when placing editable regions within or
tags Specifies whether a warning message is

displayed whenever you save a Dreamweaver template that has an editable region within a paragraph or heading tag.
The message tells you that users will not be able to create more paragraphs in the region. It is enabled by default.
Centering Specifies whether elements should be centered using divalign="center" or the center tag when you

click the Align Center button in the Property inspector.
Note: Both of these approaches to centering have been officially deprecated as of the HTML 4.01 specification; you should
use CSS styles to center text. Both of these approaches are still technically valid as of the XHTML 1.0 Transitional specification, but they’re no longer valid in the XHTML 1.0 Strict specification.
Maximum Number of History Steps Determines the number of steps that the History panel retains and shows. (The
default value should be sufficient for most users.) If you exceed the given number of steps in the History panel, the
oldest steps are discarded. (For more information, see “Task automation” on page 698.)

September 4, 2007

DREAMWEAVER CS3 38
User Guide

Spelling Dictionary lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling

conventions (such as American English and British English), the dialects are listed separately in the Dictionary
pop-up menu.

See also
“Workspace layout overview” on page 14
“Update links automatically” on page 287

Set Fonts preferences for documents in Dreamweaver
A document’s encoding determines how the document appears in a browser. Dreamweaver font preferences let you
view a given encoding in the font and size you prefer. The fonts you select in the Fonts Preferences dialog, however,
only affect the way fonts appear in Dreamweaver; they do not affect the way the document appears in a visitor’s
browser. To change the way fonts appear in a browser, you need to change the text by using the Property inspector
or by applying a CSS rule.
For information on setting a default encoding for new documents, see “Creating and opening documents” on
page 68.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Fonts from the Category list on the left.
3 Select an encoding type (such as Western European or Japanese) from the Font Settings list.

Note: To display an Asian language, you must be using an operating system that supports double-byte fonts.
4 Select a font and size to use for each category of the selected encoding.

Note: To appear in the font pop-up menus, a font must be installed on your computer. For example, to see Japanese text
you must have a Japanese font installed.
Proportional Font The font that Dreamweaver uses to display normal text (for example, text in paragraphs,

headings, and tables). The default depends on your system’s installed fonts. For most U.S. systems, the default is
Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on Mac OS.
Fixed Font The font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your

system’s installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco
12 pt. on Mac OS.
Code View The font used for all text that appears in the Code view and Code inspector. The default depends on your
system’s installed fonts.

See also
“Understanding document encoding” on page 216

Customize Highlighting colors
Use the Highlighting preferences to customize the colors that identify template regions, library items, third-party
tags, layout elements, and code in Dreamweaver.

September 4, 2007

DREAMWEAVER CS3 39
User Guide

See also
“Use the color picker” on page 223
“Change the highlight color of div tags” on page 164
Change a highlighting color
1 Select Edit > Preferences and select the Highlighting category.
2 Beside the object you want to change the highlighting color for, click the color box, and then use the color picker
to select a new color, or enter a hexadecimal value.
Activate or deactivate highlighting for an object
1 Select Edit > Preferences and select the Highlighting category.
2 Beside the object you want to activate or deactivate highlighting color for, select or deselect the Show option.

September 4, 2007

Chapter 3: Working with Dreamweaver
sites
An Adobe® Dreamweaver® CS3 site is a collection of all of the files and assets in your website. You can create web
pages on your computer, upload them to a web server, and maintain the site by transferring updated files whenever
you save them. You can also edit and maintain websites that were created without Dreamweaver.

Setting up a Dreamweaver site
About Dreamweaver sites
A website is a set of linked documents and assets with shared attributes, such as related topics, a similar design, or a
shared purpose. Dreamweaver is a site creation and management tool, so you can use it to create individual
documents and complete websites.
In Dreamweaver the term “site” refers to a local or remote storage location for the documents that belong to a website.
A Dreamweaver site provides a way to organize and manage all of your web documents, upload your site to a web
server, track and maintain your links, and manage and share files. You should define a site to take full advantage of
Dreamweaver features.
Note: To define a Dreamweaver site, you only need to set up a local folder. To transfer files to a web server or to develop
web applications, you must also add information for a remote site and testing server.
A Dreamweaver site consists of as many as three parts, or folders, depending on your development environment and
the type of website you are developing:
Local root folder Stores the files you’re working on. Dreamweaver refers to this folder as your “local site.” This folder
can be on your local computer or it can be on a network server. If you work directly on the server, Dreamweaver
uploads files to the server every time you save.
Remote folder Stores your files for testing, production, collaboration, and so on. Dreamweaver refers to this folder
as your “remote site” in the Files panel. Typically, your remote folder is on the computer where your web server is
running.

Together, the local and remote folders enable you to transfer files between your local hard disk and web server,
making it easy to manage files in your Dreamweaver sites.
Testing server folder The folder where Dreamweaver processes dynamic pages.

For a tutorial on defining a Dreamweaver site, see www.adobe.com/go/vid0145.

September 4, 2007

DREAMWEAVER CS3 41
User Guide

Understanding local and remote folder structure
When you want to use Dreamweaver to connect to a remote folder, you specify the remote folder in the Remote Info
category of the Site Definition dialog box. The remote folder that you specify (also referred to as the “host directory”)
should correspond to the local root folder of your Dreamweaver site. (The local root folder is the top-level folder of
your Dreamweaver site.) Remote folders, like local folders, can have any title, but commonly, Internet Service
Providers name the top-level remote folders for individual user accounts public_html, pub_html, or something
similar. If you are in charge of your own remote server, and can name the remote folder anything you want, it is a
good idea for your local root folder and remote folder to have the same name.
The following example shows a sample local root folder on the left and a sample remote folder on the right. The local
root folder on the local machine maps directly to the remote folder on the web server, rather than to any of the remote
folder’s sub folders, or folders that exist above the remote folder in the directory structure.

Note: The above example illustrates one local root folder on the local machine, and one top-level remote folder on the
remote web server. If, however, you are maintaining a number of Dreamweaver sites on your local machine, you would
need an equal number of remote folders on the remote server. In such a case the above example would not apply, and
you would instead create different remote folders within the public_html folder, and then map them to their corresponding local root folders on your local machine.
When you first establish a remote connection, the remote folder on the web server is usually empty. Then, when you
use Dreamweaver to upload all of the files in your local root folder, the remote folder populates with all of your web
files. The directory structure of the remote folder and the local root folder should always be the same. (That is, there
should always be a one-to-one correspondence between the files and folders in your local root folder, and the files
and folders in your remote folder.) If the structure of the remote folder doesn’t match the structure of the local root
folder, Dreamweaver uploads files to the wrong place, where they might not be visible to site visitors. Additionally,
image and link paths can easily break when folder and file structures are not in synch.
The remote folder must exist before Dreamweaver can connect to it. If you don’t have a designated folder that acts as
your remote folder on the web server, create one or ask the server’s administrator to create one for you.

Using the Manage Sites dialog box
Use the Manage Sites dialog box to create a new site, edit a site, duplicate a site, remove a site, or import or export a
site’s settings.
1 Select Site > Manage Sites and select a site from the list on the left.
2 Click a button to select one of the options and click Done.
New Enables you to create a new site.
Edit Enables you to edit an existing site.
Duplicate Creates a copy of the site you selected. The copy appears in the site list window.

September 4, 2007

DREAMWEAVER CS3 42
User Guide

Remove Deletes the selected site; you cannot undo this action.
Export Enables you to export a site’s settings as an XML file (*.ste).
Import Enables you to select a site’s settings file (*.ste) to import.

See also
“Import and export site settings” on page 51

Set up and edit a local root folder
After you plan your site structure, you set up (define) a site in Dreamweaver. You should also define a site in order
to edit a website that wasn’t created in Dreamweaver. Setting up a Dreamweaver site is a way to organize all of the
documents associated with a website.
The local root folder is your working directory for your DW site. This folder can be on your local computer or on a
network server.
If you want to start editing files on your computer (without publishing them), set up only a local folder, and then add
remote and testing information later.
You can use Dreamweaver to edit an existing website on your local disk or to edit a remote site (or a branch of a
remote site), even if you didn’t use Dreamweaver to create the original site.
Note: You don’t need to specify a remote folder if your local root folder is on the system running your web server. This
implies the web server is running on your local computer.
1 Select one of the following:

• To set up a site using the site setup wizard, click the Basic tab and follow the prompts.
• To set up local, remote, and testing folders (for processing dynamic pages) directly, click the Advanced tab, select
the Local Info category and set the options.
3 Click OK and Done to create the site (displayed in the Files panel).

See also
“Access sites, a server, and local drives” on page 83
“Import and export site settings” on page 51
“Setting up a web application” on page 501
“Set the relative path of new links” on page 284
“Managing files and folders” on page 77

September 4, 2007

DREAMWEAVER CS3 43
User Guide

Local root folder setup options

If you choose to set the local root folder options directly instead of by using the Basic tab of the Site Definition dialog
box, click the Advanced tab and enter the information.
Note: Only the first two options are required to set up a working site on your computer.
Site Name The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the

browser.
Local Root Folder The name of the folder on your local disk where you store site files, templates, and library items.

Create a folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves rootrelative links, it does so relative to this folder.
Refresh Local File List Automatically Indicates whether Dreamweaver should automatically refresh the local file list

every time you copy files into your local site. Deselecting this option improves the speed of Dreamweaver when
copying such files; however, then the Local view of the Files panel does not automatically refresh and you must click
the Refresh button in the Files panel toolbar to manually refresh the panel.
Default Images Folder The path to the folder where the images you use in your site are kept. Enter the path or click
the folder icon to browse to the folder.
Links Relative To Changes the relative path of the links you create to other pages in the site. By default, Dreamweaver

creates links using document-relative paths. Select the Site Root option to change the path setting and make sure that
you specify the HTTP address in the HTTP Address option.
Changing this setting does not convert the path of existing links; the setting will only apply to new links you create
visually with Dreamweaver.
Content linked with a site root-relative path does not appear when you preview documents in a local browser unless
you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In
Browser. This is because browsers don’t recognize site roots—servers do.
HTTP Address The URL that your website will use. This enables Dreamweaver to verify links within the site that use

absolute URLs or site root-relative paths. Dreamweaver also uses this address to make sure site root-relative links
work on the remote server, which may have a different site root. For example, if you are linking to an image file
located on your hard disk in the C:\Sales\images\ folder (where Sales is your local root folder), and the URL of your
completed site is http://www.mysite.com/SalesApp/ (where SalesApp is your remote root folder), you should enter
the URL in the HTTP Address text box to ensure that the path to the linked file on the remote server is
/SalesApp/images/.
Use Case-sensitive Link Checking Checks that the case of the links matches the case of the filenames when
Dreamweaver checks links. This option is useful on UNIX systems where filenames are case-sensitive.
Enable Cache Indicates whether to create a local cache to improve the speed of link and site management tasks. If

you do not select this option, Dreamweaver asks you if you want to create a cache again before it creates the site. It is
a good idea to select this option because the Assets panel (in the Files panel group) only works if a cache is created.

Set up a remote folder
This folder is where you store files for production, collaboration, deployment, or a number of other scenarios.
Typically, the remote folder is on the computer where your web server is running. You can set options for this folder
by answering the wizard questions in the Basic tab or by clicking the Advanced tab and entering the information
directly.
In the Dreamweaver Files panel, the remote folder is referred to as your remote site. When you set up a remote folder,
you must select an access method for Dreamweaver to upload and download files to your web server.

September 4, 2007

DREAMWEAVER CS3 44
User Guide

For a tutorial on setting up a remote folder, see www.adobe.com/go/vid0162.
Note: Dreamweaver supports connections to IPv6-enabled servers. Supported connection types include FTP, SFTP,
WebDav, and RDS. For more information, see www.ipv6.org/
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Click the Advanced tab, select the Remote Info category and select the access method you want to use to transfer
files between local and remote folders:
None Keep this default setting if you do not plan to upload your site to a server.
FTP Use this setting if you connect to your web server using FTP.
Local/Network Use this setting to access a network folder, or if you are storing files or running your testing server

on your local computer.
RDS (Remote Development Services) Use this setting if you connect to your web server using RDS. For this access

method, your remote folder must be on a computer running Macromedia® ColdFusion® from Adobe®.
Microsoft Visual SourceSafe Use this setting if you connect to your web server using Microsoft Visual SourceSafe.
Support for this method is only available for Windows; to use it, you must have Microsoft Visual SourceSafe Client
version 6 installed.
WebDAV (Web-based Distributed Authoring and Versioning) Use this setting if you connect to your web server

using the WebDAV protocol.
For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information
Server (IIS) 5.0 or an appropriately configured installation of Apache web server.
Note: If you select WebDAV as your access method, and you are using Dreamweaver in a multiuser environment, you
should also make sure that all of your users select WebDAV as the access method. If some users select WebDAV, and other
users select other access methods (FTP, for example), Dreamweaver’s check-in/check-out feature will not work as
expected, since WebDAV uses its own locking system.

See also
“Working on files without defining a site” on page 62
“Get files from a remote server” on page 88
“Use WebDAV to check in and check out files” on page 92
“Access sites, a server, and local drives” on page 83
“Managing files and folders” on page 77
Set options for FTP access
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Select the Advanced tab and click the Remote Info category.
4 Select FTP and enter the host name of the FTP host to which you upload files for your website.

September 4, 2007

DREAMWEAVER CS3 45
User Guide

Note: If you do not know your FTP host, contact your web hosting company.
5 Enter the host directory (folder) at the remote site where you store documents that are visible to the public.

If you’re uncertain about what to enter as the host directory, contact the server’s administrator or leave the text box
blank. On some servers, your root directory is the same as the directory you first connect to with FTP. To find out,
connect to the server. If a folder with a name like public_html, or www, or your login name, appears in the Remote
File view in your Files panel, that’s probably the directory you should enter in the Host Directory text box.
6 Enter the login name and password that you use to connect to the FTP server.
7 Click Test to test your login name and password.
8 Dreamweaver saves your password by default. Deselect the Save option if you prefer that Dreamweaver prompt

you for a password each time you connect to the remote server.
9 Select Use Passive FTP if your firewall configuration requires use of passive FTP.

Passive FTP enables your local software to set up the FTP connection rather than requesting the remote server to set
it up. If you’re not sure whether you use passive FTP, check with your system administrator.
For more information, see TechNote 15220 on the Adobe website at www.adobe.com/go/15220.
10 Select Use Extended Data Connection Type (IPv6) if you are using an IPv6-enabled FTP server.

With the deployment of version 6 of the Internet Protocol (IPv6), EPRT and EPSV have replaced the FTP commands
PORT and PASV, respectively. Thus, if you are trying to connect to an IPv6-enabled FTP server, you must use the
extended passive (EPSV) and the extended active (EPRT) commands for your data connection.
For more information, see www.ipv6.org/.
11 Select Use Firewall if you connect to the remote server from behind a firewall.
12 Click Firewall Settings to edit your firewall host or port.
13 Select Maintain Synchronization Information if you want to automatically synchronize your local and remote

files. (This option is selected by default.)
14 Select Automatically Upload Files to Server on Save if you want Dreamweaver to upload your file to your remote

site when you save the file.
15 Select Enable File Check In and Check Out if you want to activate the Check In/Out system.
16 Click OK.
Connect to or disconnect from a remote folder with FTP access
❖ In the Files panel:

• To connect, click Connects to Remote Host in the toolbar.
• To disconnect, click Disconnect in the toolbar.
Set options for local or network access
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Select the Advanced tab, click the Remote Info category, and select Local/Network.
4 Click the folder icon beside the Remote Folder text box to browse to and select the folder where you store your
site files.

September 4, 2007

DREAMWEAVER CS3 46
User Guide

5 Select Maintain Synchronization Information if you want to automatically synchronize your local and remote
files. (This option is selected by default.)
6 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote

site when you save the file.
7 Select Enable File Check In And Check Out if you want to activate the Check In/Out system.
8 Click OK.
Set options for WebDAV access
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Select the Advanced tab, click the Remote Info category, and select WebDAV.
4 For the URL, enter the complete URL to the directory on the WebDAV server you want to connect to.

This URL includes the protocol, port, and directory (if not the root directory). For example,
http://webdav.mydomain.net/mysite.
5 Enter your user name and password.

This information is for server authentication and is not related to Dreamweaver. If you are not sure of your user name
and password, check with your system administrator or webmaster.
6 Click Test to test your connection settings.
7 Click Save if you want Dreamweaver to remember your password each time you start a new session.
8 Select Maintain Synchronization Information if you want Dreamweaver to automatically synchronize your local
and remote files. (This option is selected by default.)
9 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote
site when you save the file.
10 Select Enable File Check In And Check Out if you want to activate the Check In/Out system.
Connect to or disconnect from a remote folder with network access
❖ You don’t need to connect to the remote folder; you’re always connected. Click the Refresh button to see your

remote files.
Set options for RDS access
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Select the Advanced tab, click the Remote Info category, and select RDS.
4 Click the Settings button and provide the following information in the Configure RDS Server dialog box:

• Enter the name of the host computer where your web server is installed.
The host name is probably an IP address or a URL. If you are unsure, ask your administrator.

• Enter the port number that you connect to.
• Enter your root remote folder as the host directory.
For example, c:\inetpub\wwwroot\myHostDir\.

September 4, 2007

DREAMWEAVER CS3 47
User Guide

• Enter your RDS user name and password.
Note: These options might not appear if you set your user name and password in the ColdFusion Administrator security
settings.

• Select Save if you want Dreamweaver to remember your settings.
5 Click OK to close the Configure RDS Server dialog box.
6 Select the Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your
remote site when you save the file.
7 Select Enable File Check In And Check Out if you want to activate the Check In/Out system and click OK.
Set up Microsoft Visual SourceSafe access
1 Select Site > Manage Sites.
2 Click New and select Site to set up a new site, or select an existing Dreamweaver site and click Edit.
3 Select the Advanced tab, click the Remote Info category, and select Microsoft Visual SourceSafe.
4 Click the Settings button and provide the following information in the Open Microsoft Visual SourceSafe
Database dialog box:

• For the Database Path, click Browse to browse for the Visual SourceSafe database you want, or enter the full file path.
The file you select becomes the srcsafe.ini file used to initialize Visual SourceSafe.

• For Project, enter the project within the Visual SourceSafe database you want to use as the remote site’s root
directory.

• For Username and Password, enter your login user name and password for the selected database.
If you don’t know your user name and password, check with your system administrator.

• Select the Save option if you want Dreamweaver to remember your settings.
5 Click OK to return to the Site Definition dialog box.
6 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote
site when you save the file.
7 Deselect Check Out Files When Opening if you do not want Dreamweaver to download your files from the server
automatically when you open the local file.

Troubleshoot the remote folder setup
The following list provides information on common problems you may encounter in setting up a remote folder, and
how to resolve them:

• The Dreamweaver FTP implementation might not work properly with certain proxy servers, multilevel firewalls,
and other forms of indirect server access. If you encounter problems with FTP access, ask your local system
administrator for help.

• For a Dreamweaver FTP implementation, you must connect to the remote system’s root folder. Be sure to indicate
the remote system’s root folder as the host directory. If you’ve specified the host directory using a single slash (/),
you might need to specify a relative path from the directory you are connecting to and the remote root folder. For
example, if the remote root folder is a higher level directory, you may need to specify a ../../ for the host directory.

• Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible. Colons,
slashes, periods, and apostrophes in file or folder names can prevent Dreamweaver from creating a site map.

September 4, 2007

DREAMWEAVER CS3 48
User Guide

• If you encounter problems with long filenames, rename them with shorter names. On the Mac OS, filenames
cannot be more than 31 characters long.

• Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one
part of the server’s disk with another folder elsewhere. Such aliases usually have no effect on your ability to connect
to the appropriate folder or directory; however, if you can connect to one part of the server but not another, there
might be an alias discrepancy.

• If you encounter an error message such as “cannot put file,” your remote folder may be out of space. For more
detailed information, look at the FTP log.
Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Window >
Results (Windows) or Site > FTP Log (Macintosh), then clicking the FTP Log tag.

Set up a testing server
If you plan to develop dynamic pages, Dreamweaver needs the services of a testing server to generate and display
dynamic content while you work. The testing server can be your local computer, a development server, a staging
server, or a production server.
Before you set up a testing server folder, you must define a local and remote folder. You can often use the settings of
your remote folder for your testing server because dynamic pages placed in the remote folder can normally be
processed by an application server.
1 Select one of the following:

• To set up a new site, Select Site > New Site.
• To edit the setup of an existing site on your local disk or a remote site (or a branch of a remote site), whether it was
created in Dreamweaver or not, select Site > Manage Sites, select your site from the list, and click Edit.
Note: If you haven’t defined any Dreamweaver sites, the Site Definition dialog box appears and you don’t need to click New.
2 Select Testing Server in the Advanced tab of the Site Definition dialog box.
3 Select the server technology you want to use for your web application.
4 Accept the default Testing Server settings or enter different settings.

By default, Dreamweaver assumes an application server is running on the same system as your web server. If you
defined a remote folder in the Remote Info category in the Site Definition dialog box, and if an application server
runs on the same system as the remote folder (including your local computer), accept the default settings in the
Testing Server category.
If you did not define a remote folder in the Remote Info category, the Testing Server category defaults to the local
folder you defined in the Local Info category. You can leave this setting alone only if you meet the following
two conditions:
Your web server and application server both run on your local computer. For example, if you’re a ColdFusion
developer running both IIS and ColdFusion on your local Windows XP system.
Your local root folder is a subfolder of your website’s home directory. For example, if you’re using IIS, your local root
folder is a subfolder of the c:\Inetpub\wwwroot\ folder, or the folder itself.
If your local root folder is not a subfolder of your home directory, you must define the local root folder as a virtual
directory in your web server.

September 4, 2007

DREAMWEAVER CS3 49
User Guide

Note: The application server can run on a different system than your remote site. For example, if the Access option you
selected in the Remote Info category is Microsoft Visual SourceSafe, then you must specify a different server in the Testing
Server category.
5 In the URL Prefix text box, enter the URL that users type in their browsers to open your web application, but do
not include any filename.

The URL prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual
directories, but not a filename. For example, if your application’s URL is www.adobe.com/mycoolapp/start.jsp, you
would enter the following URL prefix: www.adobe.com/mycoolapp/.
If Dreamweaver runs on the same system as your web server, you can use one of the localhost options as a placeholder
for your domain name. For example, if you run IIS and your application’s URL is
http://buttercup_pc/mycoolapp/start.jsp, enter the following URL prefix:
http://localhost/mycoolapp/
For a list of localhost options that pertain to different web servers, see the next section.
6 Click OK, and then click Done to add the new site to your list of sites.

See also
“Choosing your application server” on page 502
“Preparing to build dynamic sites” on page 491

About the URL prefix for the testing server
You must specify a URL prefix so Dreamweaver can use the services of a testing server to display data and to connect
to databases while you work. Dreamweaver uses the design-time connection to provide you with useful information
about the database, such as the names of the tables in your database and the names of the columns in your tables.
A URL prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories.
Note: The terminology used in Microsoft IIS may vary from server to server, but the same concepts apply to most web
servers.
The home directory The folder on the server mapped to your site’s domain name. Suppose the folder you want to

use to process dynamic pages is c:\sites\company\, and this folder is your home directory (that is, this folder is
mapped to your site’s domain name—for example, www.mystartup.com). In that case, the URL prefix is
http://www.mystartup.com/.
If the folder you want to use to process dynamic pages is a subfolder of your home directory, simply add the subfolder
to the URL. If your home directory is c:\sites\company\, your site’s domain name is www.mystartup.com, and the
folder you want to use to process dynamic pages is c:\sites\company\inventory. Enter the following URL prefix:
http://www.mystartup.com/inventory/
If the folder you want to use to process dynamic pages is not your home directory or any of its subdirectories, you
must create a virtual directory.
A virtual directory A folder that is not physically contained in the home directory of the server even though it

appears to be in the URL. To create a virtual directory, specify an alias for the folder’s path in the URL. Suppose your
home directory is c:\sites\company, your processing folder is d:\apps\inventory, and you define an alias for this folder
called warehouse. Enter the following URL prefix:

September 4, 2007

DREAMWEAVER CS3 50
User Guide

http://www.mystartup.com/warehouse/
Localhost Refers to the home directory in your URLs when the client (usually a browser, but in this case
Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same Windows
system as the web server, your home directory is c:\sites\company, and you defined a virtual directory called
warehouse to refer to the folder you want to use to process dynamic pages. The following are the URL prefixes you
would enter for selected web servers:
Web server

URL prefix

ColdFusion MX 7

http://localhost:8500/warehouse/

IIS

http://localhost/warehouse/

Apache (Windows)

http://localhost:80/warehouse/

Jakarta Tomcat (Windows)

http://localhost:8080/warehouse/

Note: By default the ColdFusion MX 7 web server runs on port 8500, the Apache web server runs on port 80, and the
Jakarta Tomcat web server runs on port 8080.
For Macintosh users running the Apache web server, your personal home directory is Users:MyUserName:Sites,
where MyUserName is your Macintosh user name. An alias called ~MyUserName is automatically defined for this
folder when you install Mac OS 10.1 or higher. Therefore, your default URL prefix in Dreamweaver is as follows:
http://localhost/~MyUserName/
If the folder you want to use to process dynamic pages is Users:MyUserName:Sites:inventory, then the URL prefix is
as follows:
http://localhost/~MyUserName/inventory/

Edit an existing remote website in Dreamweaver
You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit
it there, even if you didn’t use Dreamweaver to create the original site.
1 Create a local folder to contain the existing site and set up the folder as the local folder for the site.

Note: You must locally duplicate the entire structure of the relevant branch of the existing remote site.
2 Set up a remote folder, using the remote access information about the existing site. You must connect to the remote
site to download the files to your computer before you can edit them.

Make sure to choose the correct root folder for the remote site.
3 In the Files panel (Window > Files), click the Connects To Remote Host button (for FTP access) or the Refresh
button (for network access) in the toolbar to view the remote site.
4 Edit the site:

• If you want to work with the entire site, select the root folder of the remote site in the Files panel, and click Get in
the toolbar to download the entire site to your local disk.

• If you want to work with just one of the files or folders of the site, locate the file or folder in the Remote view of
the Files panel, and click Get in the toolbar to download that file to your local disk.
Dreamweaver automatically duplicates as much of the remote site’s structure as is necessary to place the downloaded
file in the correct part of the site hierarchy. When editing only one part of a site, you should generally include
dependent files, such as image files.

September 4, 2007

DREAMWEAVER CS3 51
User Guide

Remove a Dreamweaver site from your list of sites
Removing a Dreamweaver site and all of its setup information from your list of sites does not remove the site files
from your computer.
1 Select Site > Manage Sites.
2 Select a site name.
3 Click Remove, click Yes to remove the site from the list or No to leave the site name, and then click Done.

Import and export site settings
You can export your site settings as an XML file that you can import into Dreamweaver later. This enables you to
move sites between machines and product versions or to share settings with other users.
Export your site settings regularly so that you have a backup copy if anything happens to the site.

Export your sites
1 Select Site > Manage sites.
2 Select one or more sites whose settings you want to export and click Export:

• To select more than one site, Control-click (Windows) or Command-click (Macintosh) each site.
• To select a range of sites, Shift-click the first and last site in the range.
3 For each site whose settings you want to export, browse to a location where you want to save the site and click

Save. (Dreamweaver saves each site’s settings as an XML file, with an .ste file extension.)
4 If you want to back up your site settings, select the first option and click OK. Dreamweaver saves remote server
login information, such as the user name and password, as well as local path information.
5 If you want to share your settings with other users, select the second option and click OK. (Dreamweaver does not
save information that would not work for other users, such as your remote server login information and local paths.)
6 Click Done.

Note: Save the *.ste file to your site root folder or to your desktop to make it easy to find. If you cannot remember where
you put it, do a file search on your computer for files with the *.ste extension to locate it.
Import sites
1 Select Site > Manage sites.
2 Click Import.
3 Browse to and select one or more sites—defined in files with an .ste file extension—whose settings you want to
import.

To select more than one site, Control-click (Windows) or Command-click (Macintosh) each .ste file. To select a
range of sites, Shift-click the first and last file in the range.
4 Click Open and then click Done.

After Dreamweaver imports the site settings, the site names appear in the Manage Sites dialog box.

September 4, 2007

DREAMWEAVER CS3 52
User Guide

Working with a visual map of your site
Using site maps
You can view a local folder for a Dreamweaver site as a visual map of linked icons, called a site map. Use the site map
to add new files to a Dreamweaver site, or to add, modify, or remove links.
The site map shows the site structure two levels deep, starting from the home page. It shows pages as icons and
displays links in the order in which they are encountered in the source code.
Before you can display the site map, you must define a home page for your site. The site’s home page is the starting
point of the map and can be any page in your site. You can change the home page, the number of columns displayed,
whether the icon labels display the filename or the page title, and whether to show hidden and dependent files. (A
dependent file is an image or other non-HTML content that the browser loads and when it loads the main page.)
When working in the site map, you can select pages, open a page for editing, add new pages to the site, create links
between files, and change page titles.
The site map is ideal for laying out a site structure. You can set up the entire structure of the site, and then create a
graphic image of the site map.
Note: The site map applies to local sites only. To create a map of a remote site, copy the contents of the remote site into a
folder on your local disk, then use the Manage Sites command to define the site as a local site).

See also
“Link documents using the site map” on page 283
“Set up and edit a local root folder” on page 42
Define or change a home page for a site
1 In the Files panel (Window > Files), select a site from the pop-up menu where the current site, server, or drive

appears.
2 Right-click (Windows) or Control-click (Macintosh) the file you want to be the home page, and then select Set As
Home Page.

Note: You can also set the home page in the Site Map Layout options in the Site Definition dialog box.
3 To change the home page, repeat step 2.
View a site map
1 In the Files panel (Window > Files), do one of the following:

• In the collapsed Files panel, select Map View from the Site View menu.

September 4, 2007

DREAMWEAVER CS3 53
User Guide

• In the expanded Files panel, click the Site Map button in the toolbar, and then select Map Only (the site map
without the local file structure) or Map And Files (includes the local file structure).

Note: If you have not defined a home page, or if Dreamweaver can’t find an index.html or index.htm page in the current
site to use as the home page, Dreamweaver prompts you to select a home page.
2 Click the plus (+) and minus (–) signs next to a filename to show or hide pages linked below the second level:

• Text displayed in red indicates a broken link.
• Text displayed in blue and marked with a globe icon indicates a file on another site or a special link (such as an
e-mail or script link).

• A green check mark indicates a file checked out by you.
• A red check mark indicates a file checked out by someone else.
• A lock icon indicates a file that is read-only (Windows) or locked (Macintosh).
Modify the site map layout

Use the Site Map Layout options to customize the appearance of your site map.
1 Open the Site Definition dialog box by doing one of the following:

• Select Site > Manage Sites, choose the site, and click Edit.
• In the Files panel, select Manage Sites from the menu where the current site, server, or drive appears and click Edit.
2 In the Site Definitions dialog box, select Site Map Layout from the Category list on the left and set the options:
Number Of Columns Sets the number of pages to display per row in the site map window.
Column Width Sets the width, in pixels, of the site map columns.
Icon Labels Select whether the name displayed with the document icons in the site map is represented as a filename
or as a page title.
Display Files Marked As Hidden Displays HTML files you’ve marked as hidden in the site map.
Display Dependent Files Shows all dependent files in the site hierarchy.

3 Click OK and then click Done.
View different branches in the site map

You can view the details of a specific section of a site by making a branch the focus of the site map.
1 Select the page you want to view.
2 Do one of the following:

• Right-click (Windows) or Control-click (Macintosh) in the site map and select View as Root.
• In the default Files panel (Window > Files), click the options menu in the upper-right corner, then select View >
View Map Options > View As Root.

September 4, 2007

DREAMWEAVER CS3 54
User Guide

The site map is redrawn in the window as if the specified page were at the root of the site. The Site Navigation text
box above the site map displays the path from the home page to the specified page. Select any item in the path to view
the site map from that level by clicking once.
3 To expand and contract branches in the site map, click a branch’s plus (+) or minus (–) button.
Select several pages in the site map

• Do one of the following:
• Starting from a blank part of the view, drag around a group of files to select them.
• Control-click (Windows) or Command-click (Macintosh) to select nonadjacent pages.
• Shift-click to select a range of adjacent pages.
Open a page in the site map for editing
❖ Double-click the file, or right-click (Windows) or Control-click (Macintosh) the file, and then select Open.

Add an existing file to the site
❖ Drag the file from the Windows Explorer or the Macintosh Finder to a file in the site map, or right-click

(Windows) or Control-click (Macintosh) the file in the site map, and then select Link To Existing File and browse to
the file.
Create a new file and add a link in the site map
1 Select a file in the site map, or Right-click (Windows) or Control-click (Macintosh), and then select Link To New File.
2 Enter a name, title, and text for the link, and click OK.

Dreamweaver saves the file in the same folder as the selected file. If you add a new file to a hidden branch, the new
file is also hidden.
Modify the title of a page in the site map
1 Show page titles by clicking the options menu in the upper-right corner of the collapsed Files panel and selecting

File > Rename View > Show Page Titles.

2 Select a file in the site map and do one of the following:

• Click the title and enter a new title.
• Click the options menu in the upper-right corner, then select File > Rename.
3 Type the new name and press Enter (Windows) or Return (Macintosh).

Note: When you work in the Files panel, Dreamweaver updates all links to files whose names have changed.
Update the site map display after making changes
❖ Click anywhere in the site map to deselect any files and click Refresh in the Files panel toolbar.

Show or hide site map files
You can modify the layout of the site map to show or hide hidden and dependent files. This is useful when you want
to emphasize key topics or content, and de-emphasize less important material.

September 4, 2007

DREAMWEAVER CS3 55
User Guide

To hide a file using the site map, you must mark the file as hidden. When you hide a file, its links are also hidden.
When you display a file marked as hidden, the icon and its links are visible in the site map, but the names appear in
italics.
Note: By default, dependent files are already hidden.
Mark files as hidden in the site map
1 In the site map, select one or more files.
2 Right-click (Windows) or Control-click (Macintosh), then select Show/Hide Link.
Unmark files marked as hidden in the site map
❖ In the site map, select one or more files and do one of the following:

• Right-click (Windows) or Control-click (Macintosh) in the site map, then select Show/Hide Link.
• In the collapsed Files panel (Window > Files), click the options menu in the upper-right corner, then select View >
Site Map Options > Show Files Marked As Hidden.

• In the collapsed Files panel (Window > Files), click the options menu in the upper-right corner, then select View >
Site Map Options > Show/Hide Link.
Show or hide hidden files in the site map
❖ In the collapsed (default) Files panel (Window > Files), click the options menu in the upper-right corner and select

View > Site Map Options > Show Files Marked As Hidden.

Show dependent files in the site map
1 In the collapsed (default) Files panel (Window > Files), click the options menu in the upper-right corner.
2 Select View > Site Map Options > Show Dependent Files.

Save the site map as an image
You can save the site map as an image and view the image in (or print it from) an image editor.
1 In the collapsed (default) Files panel (Window > Files), click the options menu in the upper-right corner, then

select File > Save Site Map.

2 Enter a name in the File Name text box.
3 In the File Type menu, select .bmp or .png.
4 Select a location to save the file, enter a name for the image, and click Save.

Set site map layout preferences
You can customize the appearance of your site map.
1 Choose Site > Manage Sites, and click Edit.

September 4, 2007

DREAMWEAVER CS3 56
User Guide

2 In the Advanced tab, select the Site Map Layout category.
3 In the Home Page box, enter a file path to the home page for the site or click the folder icon to browse to the file.

The home page must be on the local site. If you don’t specify a home page, or if Dreamweaver cannot find a file called
index.html or index.htm at the root, Dreamweaver prompts you to select a home page when you open the site map.
4 Select from the Column options:

• In the Number of Columns box, type a number to set the number of pages to display per row in the site map
window.

• In the Column Width box, type a number to set the width, in pixels, of the site map columns.
5 Under Icon Labels, select whether the name displayed with the document icons in the site map is represented as
a filename or as a page title.
6 Under Options, select which files to display in the site map:

• Select Display Files Marked as Hidden to display HTML files you’ve marked as hidden in the site map.
If a page is hidden, its name and links appear in italics.

• Select Display Dependent Files to show all dependent files in the site’s hierarchy.
A dependent file is an image or other non-HTML content that the browser loads when it loads the main page.

See also
“Working with a visual map of your site” on page 52

Managing Contribute sites with Dreamweaver
Managing Contribute sites
Adobe® Contribute® CS3 combines a web browser with a web-page editor. It enables your colleagues or clients to
browse to a page in a site that you created, and to edit or update the page if they have permission to do so. Contribute
users can add and update basic web content, including formatted text, images, tables, and links. Contribute site
administrators can limit what ordinary (non-administrator) users can do in a site.
Note: This topic assumes that you are a Contribute administrator.
As the site administrator, you give non-administrators the ability to edit pages by creating a connection key and
sending it to them (for information on how to do this, see Contribute Help. You can also set up a connection to a
Contribute site using Dreamweaver, which lets you or your site designer connect to the Contribute site and use all of
the editing capabilities available in Dreamweaver.
Contribute adds functionality to your website with Contribute Publishing Server (CPS), a suite of publishing applications and user management tools that lets you integrate Contribute with your organization’s user directory
service—for example, Lightweight Directory Access Protocol (LDAP) or Active Directory. When you enable your
Dreamweaver site as a Contribute site, Dreamweaver reads Contribute’s administration settings whenever you
connect to the remote site. If Dreamweaver detects that CPS is enabled, it inherits some of the functionality of CPS,
such as file rollback and event logging.

September 4, 2007

DREAMWEAVER CS3 57
User Guide

You can use Dreamweaver to connect to and modify a file in a Contribute site. Most Dreamweaver capabilities work
the same way with a Contribute site as they do with any other site. However, when you use Dreamweaver with a
Contribute site, Dreamweaver automatically performs certain file-management operations, such as saving multiple
revisions of a document, and logging certain events in the CPS Console.
For more information, see Contribute Help.

Site structure and page design for a Contribute site
To enable Contribute users to edit your website, keep the following points in mind when you structure it:

• Keep your site structure simple. Don’t nest folders too deeply. Group related items together in a folder.
• Set up appropriate read and write permissions for folders on the server.
• Add index pages to folders as you create them, to encourage Contribute users to place new pages in the correct
folders. For example, if Contribute users provide pages containing meeting minutes, create a folder in the site root
folder named meeting_minutes, and create an index page in that folder. Then provide a link from your site’s main
page to the index page for meeting minutes. A Contribute user can then navigate to that index page and create a
new page of minutes for a specific meeting, linked from that page.

• On each folder’s index page, provide a list of links to the individual content pages and documents in that folder.
• Keep page designs as simple as possible, minimizing fancy formatting.
• Use CSS rather than HTML tags and name your CSS styles clearly. If the Contribute users use a standard set of
styles in Microsoft Word, use the same names for the CSS styles, so that Contribute can map the styles when a user
copies information from a Word document and pastes it into a Contribute page.

• To prevent a CSS style from being available to Contribute users, change the name of the style so that the name
starts with mmhide_. For example, if you use a style named RightJustified in a page but you don’t want Contribute
users to be able to use that style, rename the style to mmhide_RightJustified.
Note: You have to add mmhide_ to the style name in Code view; you cannot add it in the CSS panel.

• Use as few CSS styles as possible, to keep things simple and clean.
• If you use server-side includes for HTML page elements, such as headers or footers, create an unlinked HTML
page that contains links to the include files. Contribute users can then bookmark that page and use it to navigate
to the include files and edit them.

See also
“Creating a Dreamweaver template” on page 395
“Creating and managing CSS” on page 124
“Working with server-side includes” on page 340

File transfer to and from a Contribute site
Contribute uses a system much like the Dreamweaver Check In/Check Out system to ensure that only one user at a
time can edit a given web page. When you enable Contribute compatibility in Dreamweaver, the Dreamweaver
Check In/Check Out system is automatically enabled.
To transfer files to and from a Contribute site using Dreamweaver, always use the Check In and Check Out
commands. If you instead use the PUT and GET commands to transfer files, you might overwrite the modifications
that a Contribute user has recently made to a file.

September 4, 2007

DREAMWEAVER CS3 58
User Guide

When you check a file in to a Contribute site, Dreamweaver makes a backup copy of the previous checked-in version
of the file in the _baks folder and adds your user name and a date stamp to a Design Notes file.

See also
“Checking in and checking out files” on page 91

Contribute file and folder permissions on the server
Contribute provides a way to manage file and folder permissions for each user role you define; however, Contribute
doesn’t provide a way to manage the underlying read and write permissions assigned to files and folders by the server.
In Dreamweaver, you can manage those permissions directly on the server.
If a Contribute user doesn’t have read access on the server to a dependent file, such as an image displayed in a page,
the contents of the dependent file don’t appear in the Contribute window. For example, if a user doesn’t have read
access to an images folder, the images in that folder appear as broken image icons in Contribute. Similarly,
Dreamweaver templates are stored in a subfolder of the site’s root folder, so if a Contribute user doesn’t have read
access to the root folder, they can’t use templates in that site unless you copy the templates to an appropriate folder.
When you set up a Dreamweaver site, you must give users read access on the server to the /_mm folder (the _mm
subfolder of the root folder), the /Templates folder, and all of the folders containing assets that they will need to use.
If, for security reasons, you can’t give users read access to the /Templates folder, you can still enable Contribute users
to access templates inign a sroot folder access.
For more information about Contribute permissions, see Administering Contribute in Contribute Help.

Contribute special files
Contribute uses a variety of special files that aren’t intended to be viewed by visitors to your site:

• The shared settings file, which has an obfuscated filename with a CSI extension, appears in a folder named _mm
in the root folder of the site, and contains information that Contribute uses to manage the site

• Older versions of files, in folders named _baks
• Temporary versions of pages, so that users can preview changes
• Temporary lock files, indicating that a given page is being edited or previewed
• Design Notes files containing metadata about the site’s pages
In general, you shouldn’t edit any of these Contribute special files using Dreamweaver; Dreamweaver manages them
automatically.
If you don’t want these Contribute special files to appear on your publicly accessible server, you can set up a staging
server where Contribute users work on pages. Then periodically copy those web pages from the staging server to a
production server that’s on the web. If you take this staging-server approach, copy only web pages to the production
server, not any of the above-listed Contribute special files. In particular, don’t copy the _mm and _baks folders to the
production server.
Note: For information about setting up a server to prevent visitors from seeing files in folders that begin with an underscore, see “Website security” in Contribute Help.
Occasionally you might need to manually delete Contribute special files. For example, there might be circumstances
in which Contribute fails to delete temporary preview pages when the user is finished previewing; in that case, you
would have to manually delete those temporary pages. Temporary preview pages have filenames that begin with TMP.

September 4, 2007

DREAMWEAVER CS3 59
User Guide

Similarly, under some circumstances an outdated lock file may be accidentally left on the server. If that happens, you
must manually delete the lock file to allow others to edit the page.

Prepare a site for use with Contribute
If you’re preparing an existing Dreamweaver site for Contribute users, you need to explicitly enable Contribute
compatibility to use Contribute-related features; Dreamweaver does not prompt you to do this; however, when you
connect to a site that’s been set up as a Contribute site (that has an administrator), Dreamweaver prompts you to
enable Contribute compatibility.
Note: You must have Contribute installed on the same computer as Dreamweaver and you must be connected to the
remote site before you enable Contribute compatibility. Otherwise, Dreamweaver cannot read Contribute’s administrative settings to determine whether CPS and Rollback are enabled.
Not all connection types support Contribute compatibility. The following restrictions apply to connection types:

• If your remote site connection uses WebDAV or Microsoft Visual SourceSafe, you can’t enable Contribute compatibility, because those source-control systems aren’t compatible with the Design Notes and Check In/Check Out
systems that Dreamweaver uses for Contribute sites.

• If you use RDS to connect to your remote site, you can enable Contribute compatibility, but you must customize
your connection before you can share it with Contribute users.

• If you’re using your local computer as a web server, you must set up the site using an FTP or network connection
to your computer (rather than just a local folder path) to be able to share your connection with Contribute users.
When you enable Contribute compatibility, Dreamweaver automatically enables Design Notes (including the Upload
Design Notes For Sharing option) and the Check In/Check Out system.
If Contribute Publishing Server (CPS) is enabled on the remote site you are connecting to, Dreamweaver notifies the
CPS every time you trigger a network operation such as checking in, rolling back, or publishing a file. The CPS will
log these events, and you can view the log in the CPS Administration Console. (If you disable CPS, these events are
not logged.)
Note: CPS is enabled using Contribute. For more information, see Administering Contribute in Contribute Help.
1 Select Site > Manage Sites.
2 Select a site, click Edit, and click the Advanced tab.
3 Select the Contribute category from the Category list on the left, select Enable Contribute Compatibility.
4 If a dialog box appears saying that you must enable Design Notes and Check In/Check Out, click OK.
5 If you haven’t already provided your Check In/Check Out contact information, type your name and e-mail
address in the dialog box, and then click OK. Rollback status, CPS status, the Site Root URL text box, and the Administer Website button appear in the Site Definition dialog box.

If Rollback is enabled in Contribute, you’ll have the ability to roll back to previous versions of files that you’ve
changed in Dreamweaver.
6 Check the URL in the Site Root URL text box and correct it if necessary. Dreamweaver constructs a site root URL
based on other site-definition information you’ve provided, but sometimes the constructed URL isn’t quite right.
7 Click the Test button to verify that you’ve entered the correct URL.

Note: If you are ready to send a connection key or perform Contribute site administration tasks now, skip the remaining
steps.
8 Click Administer Site in Contribute.

September 4, 2007

DREAMWEAVER CS3 60
User Guide

9 Click OK and then click Done.

See also
“Rolling back files (Contribute users)” on page 99

Administer a Contribute site using Dreamweaver
After you enable Contribute compatibility, you can use Dreamweaver to start Contribute to perform site administration tasks.
Note: Contribute must be installed on the same computer as Dreamweaver.
As an administrator of a Contribute site, you can:

• Change the administrative settings for the site.
Contribute administrative settings are a collection of settings that apply to all users of your website. These settings
enable you to fine-tune Contribute to provide a better user experience.

• Change the permissions granted to user roles in Contribute.
• Set up Contribute users.
Contribute users need certain information about the site to be able to connect to it. You can package all of this information in a file called a connection key to send to Contribute users.
Note: A connection key is not the same as a Dreamweaver exported site file.
Before you give Contribute users the connection information they need to edit pages, use Dreamweaver to create the
basic folder hierarchy for your site, and to create any templates and CSS style sheets needed for the site.
1 Select Site > Manage Sites.
2 Select a site, click Edit, and click the Advanced tab.
3 Select the Contribute category from the category list on the left.
4 Click the Administer Site in Contribute button.

Note: This button does not appear if you have not enabled Contribute compatibility.
5 If prompted, enter the administrator password, and then click OK.

The Administer Website dialog box appears.

• To change administrative settings, select a category from the list on the left, and then change settings as necessary.
• To change role settings, in the Users and Roles category, click Edit Role Settings, and then make changes as
necessary.

• To send a connection key to set up users, in the Users and Roles category, click Send Connection Key, and then
complete the Connection Wizard.
6 Click Close, click OK, and then click Done.

For more information about administrative settings, managing user roles, or creating a connection key, see
Contribute Help.

See also
“Import and export site settings” on page 51

September 4, 2007

DREAMWEAVER CS3 61
User Guide

Delete, move, or rename a remote file in a Contribute site
Deleting a file from the remote server that hosts a Contribute site works much like deleting a file from the server for
any Dreamweaver site. However, when you delete a file from a Contribute site, Dreamweaver asks whether to delete
all older versions of the file. If you choose to keep the older versions, Dreamweaver saves a copy of the current version
in the _baks folder so you can restore it later.
Renaming a remote file or moving it from one folder to another in a Contribute site works the same way it works in
any Dreamweaver site. In a Contribute site, Dreamweaver also renames or moves the associated previous versions of
the file that are saved in the _baks folder.
1 Select the file in the Remote pane of the Files panel (Window > Files), and then press Backspace (Windows) or
Delete (Macintosh).

A dialog box appears asking you to confirm that you want to delete the file.
2 In the confirmation dialog box:

• To delete all previous versions of the file as well as the current version, select the Delete Rollback Versions option.
• To leave previous versions on the server, deselect the Delete Rollback Versions option.
3 Click Yes to delete the file.

Enable Contribute users to access templates without root folder access
In a Contribute site, you manage underlying file and folder permissions directly on the server. If, for security reasons,
you can’t give users read access to the /Templates folder, you can still make the templates available to users.
1 Set up the Contribute site so that its root folder is the folder you want users to see as the root.
2 Manually copy the template folder from the main site’s root folder into the Contribute site’s root folder, using the
Files panel.
3 After you update templates for the main site, recopy the changed templates into appropriate subfolders as needed.

If you take this approach, don’t use site root-relative links in the subfolders. Site root-relative links are relative to the
main root folder on the server, not to the root folder you define in Dreamweaver. Contribute users can’t create site
root-relative links.
If links in a Contribute page appear to be broken, it’s possible that there’s a problem with folder permissions, particularly if the links link to pages outside of the Contribute user’s root folder. Check read and write permissions for
folders on the server.

See also
“Document locations and paths” on page 279

Troubleshoot a Contribute site
If a remote file in a Contribute site appears to be checked out, but the file isn’t actually locked on the user’s computer,
you can unlock the file to enable users to edit it.
When you click any button related to Contribute site administration, Dreamweaver verifies that it can connect to
your remote site and that the Site Root URL you’ve given for the site is valid. If Dreamweaver can’t connect, or if the
URL isn’t valid, an error message appears.
If the administration tools aren’t working properly, there might be something wrong with the _mm folder.

September 4, 2007

DREAMWEAVER CS3 62
User Guide

Unlock a file in a Contribute site

Note: Before following this procedure, make sure that the file really isn’t checked out. If you unlock a file while a
Contribute user is editing it, multiple users might edit the file simultaneously.
1 Do one of the following:

• Open the file in the Document window, and then select Site > Undo Check Out.
• In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), and then select Undo
Check Out.
A dialog box might appear, indicating who has the file checked out and asking you to confirm that you want to
unlock the file.
2 If the dialog box appears, click Yes to confirm.

The file is unlocked on the server.
Troubleshoot connection problems for a Contribute site
1 Check the Site Root URL in the Contribute category of the Site Definition dialog box by opening that URL in a

browser, to make sure that the correct page opens.
2 Use the Test button in the Remote Info category of the Site Definition dialog box to make sure that you can
connect to the site.
3 If the URL is correct but the Test button results in an error message, ask your system administrator for help.
Troubleshoot Contribute administration tools
1 On the server, make sure that you have read and write permissions, and executable permissions if necessary, for

the _mm folder.
2 Make sure that the _mm folder contains a shared settings file with a CSI extension.
3 If it doesn’t, use the Connection Wizard (Windows) or Connection Assistant (Macintosh) to create a connection
to the site and to become an administrator for the site. The shared settings file is created automatically when you
become an administrator. For more information about becoming an administrator for an existing Contribute
website, see Administering Contribute in Contribute Help.

Working on files without defining a site
Connect to an FTP server without defining a site
You can connect to an FTP server to work on your documents without creating a Dreamweaver site. If you work on
files without creating a Dreamweaver site, you will not be able to perform sitewide operations, such as link checking.
1 Select Site > Manage Sites.
2 Click New and select FTP & RDS Servers.
3 Enter a name for the server connection in the Name box. This is the name that will appear in the pop-up menu at
the top of the Files panel.
4 Select FTP from the Access Type menu.
5 Enter the host name of the FTP host to which you upload files for your website.

September 4, 2007

DREAMWEAVER CS3 63
User Guide

Your FTP host is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name
without any additional text. In particular, don’t add a protocol name in front of the host name.
Note: If you do not know your FTP host, contact your ISP.
6 Enter the host directory of the remote site where you store documents that are visible to the public.
7 Enter the login name and password that you use to connect to the FTP server, then click Test to test your login
name and password.
8 Select Save if you want Dreamweaver to save your password. (If you do not select this option, Dreamweaver
prompts you for a password each time you connect to the remote server.)
9 Select Use Passive FTP if your firewall configuration requires use of passive FTP.

Passive FTP enables your local software to set up the FTP connection rather than requesting the remote server to set
it up. If you’re not sure whether you use passive FTP, check with your system administrator.
10 Select Use Firewall if you connect to the remote server from behind a firewall, then click Firewall Settings to edit

your firewall host or port.
11 Select Use Secure FTP (SFTP) for secure FTP authentication and click OK.

SFTP uses encryption and public keys to secure a connection to your testing server.
Note: Your server must be running an SFTP server.
12 Click OK. The Files panel displays the contents of the remote server folder you connected to, and the server name

appears in the pop-up menu at the top of the panel.

See also
“Set up a remote folder” on page 43

Connect to an RDS server without defining a site
You can connect to an RDS server to work on your documents without creating a Dreamweaver site. If you work on
files without creating a Dreamweaver site, you will not be able to perform sitewide operations, such as link checking.
1 Select Site > Manage Sites.
2 Click New and select FTP & RDS Servers.
3 Enter a name for the server in the Description text field. This is the name that will appear in the menu at the top
of the Files panel.
4 Select RDS from the Access Type menu.
5 Enter the URL that users type in their browsers to open your web application, but do not include any filename.

Suppose your application’s URL is www.macromedia.com/mycoolapp/start.jsp. In this case, you would enter the
following URL prefix: www.adobe.com/mycoolapp/.
6 Click the Settings button to complete the access information.
7 Complete the Configure RDS Server dialog box and click OK.

See also
“Set up a remote folder” on page 43

September 4, 2007

DREAMWEAVER CS3 64
User Guide

Basic tab options
Set Basic tab Editing Files options
The Site Definition wizard has three sections to help you set up a Dreamweaver site: Editing Files, Testing Files, and
Sharing Files. Each section might have multiple screens depending on the settings you select. At the top of the dialog
box, the bold section name indicates where you are in the setup process. You might not need to set up folders in all
three sections; the questions that appear in the tab help you determine your needs.
The purpose of this dialog box is to name your Dreamweaver site and specify its URL.

See also
“About Dreamweaver sites” on page 40
Name your Dreamweaver site
❖ Enter a name for your Dreamweaver site.

Specify the URL of your site
❖ Enter the URL (HTTP address) of your Dreamweaver site.

Dreamweaver uses this address to make sure site root-relative links work on the remote server, which may have a
different folder as the site root. For example, if you are linking to an image file on your hard disk in the
C:\Sales\images\ folder (where Sales is your local root folder), and the URL of your completed site is
http://www.mysite.com/SalesApp/ (where SalesApp is your remote root folder), you should enter the URL in the
HTTP Address text box to ensure that the path to the linked image on the remote server is /SalesApp/images/.

Set Basic tab Editing Files Part 2 options
The purpose of this dialog box is to indicate whether you are building a web application. A web application is a
collection of web pages that interact with the user, with each other, and with various resources on a web server,
including databases.
If you are building a web application, you need to select the server technology running on your web server.
1 Select No if you do not plan to use a server technology to create a web application, or select Yes if you plan to use
a server technology to create a web application.
2 If you select Yes, select a server technology.

You can use Dreamweaver to build web applications using five server technologies: ColdFusion, ASP.NET, ASP, JSP,
or PHP. Each of these technologies corresponds to a document type in Dreamweaver. Choosing one for your web
application depends on several factors, including your level of comfort with various scripting languages and the
application server you plan to use.

See also
“Choosing your application server” on page 502

Set Basic tab Editing Files Part 3 options
The purpose of this dialog box is to select your development environment.
1 Select the method you will use to work on files during development.

September 4, 2007

DREAMWEAVER CS3 65
User Guide

2 Enter a location to store your files or click the folder icon to browse to the folder.

This is your working directory for your Dreamweaver site—it is the place where you store your “in progress” files for
a Dreamweaver site. In the Dreamweaver Files panel, this folder is referred to as your local site.

See also
“Understanding local and remote folder structure” on page 41

Set Basic tab Testing Files options (URL prefix)
This dialog box appears if you selected a server technology earlier in the process. Its purpose is to specify a URL
prefix so Dreamweaver can use your testing server to display data and connect to databases while you work. A URL
prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories.
1 Enter the URL that users type in their browsers to open your web application, but do not include any filename.

Suppose your application’s URL is www.adobe.com/mycoolapp/start.jsp. In this case, you would enter the following
URL prefix: www.adobe.com/mycoolapp/.
If Dreamweaver runs on the same computer as your web server, you can use the term localhost as a stand-in for your
domain name. For example, suppose your application’s URL is buttercup_pc/mycoolapp/start.jsp. Then, you can
enter the following URL prefix: http://localhost/mycoolapp/.
2 Click Test URL to ensure that your URL works.

See also
“Set up a testing server” on page 48
“About the URL prefix for the testing server” on page 49

Set Basic tab Testing Files options (remote access)
The purpose of this dialog box is to select an access method for Dreamweaver to access your testing server.
Dreamweaver works with a testing server to generate and display dynamic content while you work. The testing server
can be your local computer, a development server, a staging server, or a production server. As long as the server can
process the kind of dynamic pages you plan to develop, the choice doesn’t matter.
❖ Select an access method from the pop-up menu and fill out the appropriate text boxes.
None Keep this default setting if you do not plan to upload your site to a server.
FTP Use this setting if you connect to your web server using FTP.
Local/Network Use this setting to access a network folder, or if you are storing files or running your testing server

on your local computer.
RDS (Remote Development Services) Use this setting if you connect to your web server using RDS. For this access

method, your remote folder must be on a computer running ColdFusion.
Microsoft Visual SourceSafe Use if you connect to your web server using Microsoft Visual SourceSafe. Support for

this method is only available for Windows; to use it, you must have Microsoft Visual SourceSafe Client version 6
installed.
WebDAV (Web-based Distributed Authoring and Versioning) Use if you connect to your web server using the

WebDAV protocol.

September 4, 2007

DREAMWEAVER CS3 66
User Guide

For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information
Server (IIS) 5.0 or an appropriately configured installation of Apache web server.

See also
“Set up a remote folder” on page 43

Set Basic tab remote folder setup options
The purpose of this dialog box is to decide whether to set up a remote server folder.
Depending on your environment, this folder is where you store files for testing, collaboration, production,
deployment, or a number of other scenarios. Typically, your remote folder is on the machine where your web server
is running.
In the Dreamweaver Files panel, this folder is referred to as your remote site. The remote folder enables you to
transfer files between your local disk and web server; this makes it easy for you to share and manage files in your
Dreamweaver sites.
❖ To choose whether to set up a remote folder, select Yes to set up a remote folder, or No to skip the remote folder

setup.

See also
“Understanding local and remote folder structure” on page 41

Set Basic tab Sharing Files options (remote access)
The purpose of this dialog box is to select an access method for Dreamweaver to access your testing server.
Dreamweaver works with a testing server to generate and display dynamic content while you work. The testing server
can be your local computer, a development server, a staging server, or a production server. As long as the server can
process the kind of dynamic pages you plan to develop, the choice doesn’t matter.
❖ Select an access method from the pop-up menu and fill out the appropriate text boxes.
None Keep this default setting if you do not plan to upload your site to a server.
FTP Use this setting if you connect to your web server using FTP.
Local/Network Use this setting to access a network folder, or if you are storing files or running your testing server

on your local computer.
RDS (Remote Development Services) Use if you connect to your web server using RDS. For this access method, your

remote folder must be on a computer running ColdFusion.
Microsoft Visual SourceSafe Use if you connect to your web server using Microsoft Visual SourceSafe. Support for
this method is only available for Windows; to use it, you must have Microsoft Visual SourceSafe Client version 6
installed.
WebDAV (Web-based Distributed Authoring and Versioning) Use if you connect to your web server using the

WebDAV protocol.
For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information
Server (IIS) 5.0 or an appropriately configured installation of Apache web server.

September 4, 2007

DREAMWEAVER CS3 67
User Guide

See also
“Set up a remote folder” on page 43

Set Basic tab Sharing Files options (check in/check out)
The purpose of this dialog box is to set up the file Check In/Check Out system, if you’re working in a collaborative
environment (or working alone, but on multiple machines).
Checking out a file makes the file unavailable on the server so that other team members cannot edit the file using
Dreamweaver. Checking in a file makes the file available to others to check out and edit.
1 Select Yes to enable file check in/check out if you are working in a team environment (or working alone but from
several different machines), or select No to disable file check in/check out.

This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have
left a more recent version of a file on another machine.
2 Select Dreamweaver Should Check It Out if you want to automatically check out files when you open them from
the Files panel, or select the alternative option if you do not want to automatically check out files when you open them.

Note: Using File > Open to open a file doesn’t check the file out even when this option is selected.
3 Enter your name.

Your name appears in the Files panel alongside any files that you checked out; this enables team members to communicate when they are sharing files.
If you work alone from several different machines, use a different check-out name on each machine (for example,
AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.
4 Enter your e-mail address.

If you enter an e-mail address, then when you check out a file, your name appears in the Files panel next to that file
as a link (blue and underlined). If a team member clicks the link, their default e-mail program opens a new message
with your e-mail address and a subject that corresponds to the file and site name.

See also
“Checking in and checking out files” on page 91

Basic tab Summary options
This page displays the settings you selected for your site.
To finish setting up your site, do one of the following:

• Click the Back button to return to a previous page to change a setting.
• Click the Done button if you are satisfied with the settings and want Dreamweaver to create the site.
When you click Done, Dreamweaver creates the site and displays it in the Files panel.

• Click the Cancel button if you do not want Dreamweaver to create the site.

September 4, 2007

Chapter 4: Creating and managing files
In addition to creating web pages, you can easily organize all of the files and assets that belong to your website. You
can create, manage, and synchronize files, check files in and out, and test how your site will work in different
browsers.

Creating and opening documents
About creating Dreamweaver documents
Dreamweaver offers a flexible environment for working with a variety of web documents. In addition to HTML
documents, you can create and open a variety of text-based documents, including ColdFusion Markup Language
(CFML), ASP, JavaScript, and Cascading Style Sheets (CSS). Source code files, such as Visual Basic, .NET, C#, and
Java, are also supported.
Dreamweaver provides several options for creating a new document. You can create any of the following:

• A new blank document or template
• A document based on one of the predesigned page layouts that comes with Dreamweaver, including over 30 CSSbased page layouts

• A document based on one of your existing templates
You can also set document preferences. For example, if you typically work with one type of document, you can set it
as the default document type for new pages you create.
You can easily define document properties, such as meta tags, document title, and background colors, and several
other page properties in either Design view or Code view.

Dreamweaver file types
You can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML
file. HTML files—or Hypertext Markup Language files—contain the tag-based language responsible for displaying
a web page in a browser. You can save HTML files with either the .html or .htm extension. Dreamweaver saves files
using the .html extension by default.
Following are some of the other common file types you might use when working in Dreamweaver:
CSS Cascading Style Sheet files have a .css extension. They are used to format HTML content and control the

positioning of various page elements.
GIF Graphics Interchange Format files have a .gif extension. GIF format is a popular web graphic format for

cartoons, logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.
JPEG Joint Photographic Experts Group files (named after the organization that created the format) have a .jpg

extension, and are usually photographs or high-color images. The JPEG format is best for digital or scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256
colors.
XML Extensible Markup Language files have a .xml extension. They contain data in a raw form that can be formatted
using XSL (Extensible Stylesheet Language).

September 4, 2007

DREAMWEAVER CS3 69
User Guide

XSL Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want
to display on a web page.
CFML ColdFusion Markup Language files have a .cfm extension. They are used to process dynamic pages.
ASPX ASP.NET files have a .aspx extension and are used to process dynamic pages.
PHP Hypertext Preprocessor files have a .php extension and are used to process dynamic pages.

See also
“Displaying XML data” on page 420
“Building applications visually” on page 614
“Understanding Cascading Style Sheets” on page 120

Create a blank page
You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a
layout of your own.
1 Select File > New.
2 In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the
Page Type column. For example, select HTML to create a plain HTML page, select ColdFusion to create a
ColdFusion page, and so on.
3 If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column;
otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right
side of the dialog box.

The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts
if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site

visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid Columns are a combination of any of the previous three options. For example, in the two-column hybrid,

the right sidebar layout has a liquid main column that scales to the size of the browser, and an elastic column on the
right that scales to the size of the site visitor’s text settings.
4 Select a document type from the DocType pop-up menu. In most cases, you can use the default selection, XHTML
1.0 Transitional.

September 4, 2007

DREAMWEAVER CS3 70
User Guide

Note: For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the
specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0
(www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local
files (http://validator.w3.org/file-upload.html).
5 If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS popup menu.
Add To Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS file and attaches the new style sheet to the page you’re

creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout.

To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet. This
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.
6 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create
the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.
7 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
8 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.
9 Click the Create button.
10 Save the new document (File > Save).
11 In the dialog box that appears, navigate to the folder where you want to save the file.

It’s a good idea to save your file in a Dreamweaver site.
12 In the File Name box, type a name for the file.

Avoid using spaces and special characters in file and folder names, and do not begin a filename with a numeral. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation marks (such as colons, slashes, or periods)
in the names of files you intend to put on a remote server; many servers change these characters during upload,
which will cause any links to the files to break.

See also
“About the XHTML code generated by Dreamweaver” on page 302
“Laying out pages with CSS” on page 145
“Set default document type and encoding” on page 74

Create a blank template
You can use the New Document dialog box to create Dreamweaver templates. By default, templates are saved in the
Templates folder of your site.
1 Select File > New.
2 In the New Document dialog box, select the Blank Template category.

September 4, 2007

DREAMWEAVER CS3 71
User Guide

3 Select the kind of page you want to create from the Page Type column. For example, select HTML template to
create a plain HTML template, select ColdFusion to create a ColdFusion template, and so on.
4 If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column;

otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the right
side of the dialog box.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site

visitor’s text settings.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts
if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site

the right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right
that scales to the size of the site visitor’s text settings.
5 Select a document type from the DocType pop-up menu. In most cases, you will want to leave this selected to the
default selection, XHTML 1.0 Transitional.

Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTMLcompliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of
HTML as an XML application. Generally, using XHTML gives you the benefits of XML, while ensuring the backward
and future compatibility of your web documents.
Note: For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the
specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0
(www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local
files (http://validator.w3.org/file-upload.html).
6 If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS popup menu.
Add to Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS styles sheet and attaches the new style sheet to the

page you’re creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout.

To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet. This
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.
7 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create
the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.
8 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
9 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.
10 Click the Create button.

September 4, 2007

DREAMWEAVER CS3 72
User Guide

11 Save the new document (File > Save). If you haven’t added editable regions to the template yet, a dialog box

appears telling you that there are no editable regions in the document. Click OK to close the dialog box.
12 In the Save As Template dialog box, select a site in which to save the template, and add a description for the

template in the Description box.
13 In the File Name box, type a name for the new template. You do not need to append a file extension to the name

of the template. When you click Save, the .dwt extension is appended to the new template, which is saved in the
Templates folder of your site.
Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the
names of files you intend to put on a remote server; many servers change these characters during upload, which will
cause any links to the files to break.

See also
“About the XHTML code generated by Dreamweaver” on page 302
“Laying out pages with CSS” on page 145
“Creating and managing templates” on page 387
“Setting up a Dreamweaver site” on page 40
“Set default document type and encoding” on page 74

Create a page based on an existing template
You can select, preview, and create a new document from an existing template. You can either use the New Document
dialog box to select a template from any of your Dreamweaver-defined sites or use the Assets panel to create a new
document from an existing template.

See also
“Creating and managing templates” on page 387
“Setting up a Dreamweaver site” on page 40
“Set default document type and encoding” on page 74
Create a document based on a template
1 Select File > New.
2 In the New Document dialog box, select the Page From Template category.
3 In the Site column, select the Dreamweaver site that contains the template you want use, and then select a template

from the list on the right.
4 Deselect Update Page When Template Changes if you don’t want to update this page each time you make changes
to the template on which this page is based.
5 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
6 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.

September 4, 2007

DREAMWEAVER CS3 73
User Guide

7 Click Create and save the document (File > Save).
Create a document from a template in the Assets panel
1 Open the Assets panel (Window > Assets), if it is not already open.
2 In the Assets panel, click the Templates icon

on the left to view the list of templates in your current site.

If you just created the template you want to apply, you might need to click the Refresh button to see it.
3 Right-click (Windows) or Control-click (Macintosh) the template you want to apply, then select New From
Template.

The document opens in the Document window.
4 Save the document.

Create a page based on a Dreamweaver sample file
Dreamweaver comes with several professionally developed page layout and design element files. You can use these
sample files as starting points for designing pages in your sites. When you create a document based on a sample file,
Dreamweaver creates a copy of the file.
You can preview a sample file and read a brief description of a document’s design elements in the New Document
dialog box. In the case of CSS style sheets, you can copy a predesigned style sheet and apply it to your documents.
Note: If you create a document based on a predefined frameset, only the frameset structure is copied, not the frame
contents; additionally, you must save each frame file separately.
1 Select File > New.
2 In the New Document dialog box, select the Page From Sample category.
3 In the Sample Folder column, select CSS Style Sheet, Frameset, Starter Page (Theme) or Starter Page (Basic); then
select a sample file from the list on the right.
4 Click the Create button.

The new document opens in the Document window (Design view). If you selected CSS Style Sheet, the CSS style
sheet opens in Code view.
5 Save the document (File > Save).
6 If the Copy Dependent Files dialog box appears, set the options, and then click Copy to copy the assets to the
selected folder.

You can choose your own location for the dependent files or use the default folder location Dreamweaver generates
(based on the sample file’s source name).

See also
“Understanding Cascading Style Sheets” on page 120
“Save frame and frameset files” on page 208

September 4, 2007

DREAMWEAVER CS3 74
User Guide

Create other kinds of pages
The Other category of the New Document dialog box lets you create various types of pages that you might want to
use in Dreamweaver, including C#, VBScript, and text-only pages.
1 Select File > New.
2 In the New Document dialog box, select the Other category.
3 Select the kind of document you want to create from the Page Type column and click the Create button.
4 Save the document (File > Save).

Set default document type and encoding
You can define which document type is used as a default document for a site.
For example, if most pages in your site are of a specific file type (such as Cold Fusion, HTML, or ASP documents),
you can set document preferences that automatically create new documents of the specified file type.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

You can also click the Preferences button in the New Document dialog box to set new document preferences when
you create a new document.
2 Click New Document from the category list on the left.
3 Set or change preferences as necessary, and click OK to save them.
Default Document Select a document type that will be used for pages that you create.
Default Extension Specify the file extension you prefer (.htm or .html) for new HTML pages you create.

Note: This option is disabled for other file types.
Default Document Type (DDT) Select one of the XHTML document type definitions (DTD) to make new pages

XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0
Transitional or XHTML 1.0 Strict from the menu.
Default Encoding Specify the encoding to be used when a new page is created, as well as when a document is opened
that does not specify any encoding.

If you select Unicode (UTF-8) as the document encoding, entity encoding is not necessary because UTF-8 can safely
represent all characters. If you select another document encoding, entity encoding may be necessary to represent
certain characters. For more information on character entities, see www.w3.org/TR/REChtml40/sgml/entities.html.
If you select Unicode (UTF-8) as a default encoding, you can include a Byte Order Mark (BOM) in the document by
selecting the Include Unicode Signature (BOM) option.
A BOM is 2-4 bytes at the beginning of a text file that identifies a file as Unicode, as well as the byte order of the
following bytes. Because UTF-8 has no byte order, adding a UTF-8 BOM is optional. For UTF-16 and UTF-32, it is
required.
Unicode Normalization Form Select one of these options if you select Unicode (UTF-8) as a default encoding.

There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most
common one used in the Character Model for the World Wide Web. Adobe provides the other three Unicode
Normalization Forms for completeness.

September 4, 2007

DREAMWEAVER CS3 75
User Guide

Show New Document Dialog Box on Control+N Deselect this option (“on Command+N” for Macintosh) to automatically create a document of the default document type when you use the key command.

In Unicode, there are characters that are visually similar but can be stored within the document in different ways.
For example, “ë” (e-umlaut) can be represented as a single character, “e-umlaut,” or as two characters, “regular Latin
e” + “combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the
umlaut would appear above the “Latin e.” Both forms result in the same visual typography, but what is saved in the
file is different for each form.
Normalization is the process of making sure all characters that can be saved in different forms are all saved using the
same form. That is, all “ë” characters in a document are saved as single “e-umlaut” or as “e” + “combining umlaut,”
and not as both forms in one document.
For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website
at www.unicode.org/reports/tr15.

See also
“About the XHTML code generated by Dreamweaver” on page 302
“Understanding document encoding” on page 216

Set the default file extension of new HTML documents
You can define the default file extension of HTML documents created in Dreamweaver. For example, you can use an
.htm or .html extension for all new HTML documents.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

You can also click the Preferences button in the New Document dialog box to set new document preferences when
you create a new document.
2 Click New Document from the category list on the left.
3 In the Default Document Type, make sure that HTML is selected.
4 In the Default Extension box, specify the file extension you want for new HTML documents created in
Dreamweaver.

For Windows, you can specify the following extensions: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
For Macintosh, you can specify the following extensions: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.

Open and edit existing documents
You can open an existing web page or text-based document, whether or not it was created in Dreamweaver, and edit
it in either Design view or Code view.
If the document you open is a Microsoft Word file that was saved as an HTML document, you can use the Cleanup
Word HTML command to remove the extraneous markup tags that Word inserts into HTML files.
To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.
You can also open non-HTML text files, such as JavaScript files, XML files, CSS style sheets, or text files saved by
word processors or text editors.
1 Select File > Open.

September 4, 2007

DREAMWEAVER CS3 76
User Guide

You can also use the Files panel to open files.
2 Navigate to and select the file you want to open.

Note: If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site,
instead of opening them from another location.
3 Click Open.

The document opens in the Document window. JavaScript, text, and CSS Style Sheets open in Code view by default.
You can update the document while working in Dreamweaver, and save the changes in the file.

See also
“Clean up code” on page 326
“Start an external editor for media files” on page 271
“Work with files in the Files panel” on page 80
“Set up and edit a local root folder” on page 42

Clean up Microsoft Word HTML files
You can open documents saved by Microsoft Word as HTML files, and then use the Clean Up Word HTML
command to remove the extraneous HTML code generated by Word. The Clean Up Word HTML command is
available for documents saved as HTML files by Word 97 or later.
The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not
needed to display the HTML file. Retain a copy of your original Word (.doc) file as a backup, because you may not
be able to reopen the HTML document in Word once you’ve applied the Clean Up Word HTML feature.
To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.
1 Save your Microsoft Word document as an HTML file.

Note: In Windows, close the file in Word to avoid a sharing violation.
2 Open the HTML file in Dreamweaver.

To view the HTML code generated by Word, switch to Code view (View > Code).
3 Select Commands > Clean Up Word HTML.

Note: If Dreamweaver is unable to determine which version of Word was used to save the file, select the correct version
from the pop-up menu.
4 Select (or deselect) options for the cleanup. The preferences you enter are saved as default cleanup settings.

Dreamweaver applies the cleanup settings to the HTML document and a log of the changes appears (unless you
deselected that option in the dialog box).
Remove All Word Specific Markup Removes all Microsoft Word-specific HTML, including XML from HTMLtags,
Word custom meta data and link tags in the head of the document, Word XML markup, conditional tags and their
contents, and empty paragraphs and margins from styles. You can select each of these options individually using the
Detailed tab.

September 4, 2007

DREAMWEAVER CS3 77
User Guide

Clean Up CSS Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has
the same style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from
tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab.
Clean Up Tags Removes HTML tags, converting the default body text to size 2 HTML text.
Fix Invalidly Nested Tags Removes the font markup tags inserted by Word outside the paragraph and heading

(block-level) tags.
Set Background Color Allows you to enter a hexadecimal value to set the background color of your document. If you

do not set a background color, your Word HTML page will have a gray background. The default hexadecimal value
is white.
Apply Source Formatting Applies the source formatting options you specify in HTML Format preferences and

SourceFormat.txt to the document.
Show Log On Completion Displays an alert box with details about the changes made to the document as soon as the

cleanup is finished.
5 Click OK, or click the Detailed tab if you want to further customize the Remove All Word Specific Markup and
Clean Up CSS options, and then click OK.

See also
“Clean up code” on page 326
“Import Microsoft Office documents (Windows only)” on page 234

Managing files and folders
About managing files and folders
Dreamweaver includes a Files panel that helps you manage and transfer files to and from a remote server. When you
transfer files between local and remote sites, parallel file and folder structures between the sites are maintained.
When transferring files between sites, Dreamweaver creates corresponding folders if they do not yet exist in a site.
You can also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions
as necessary and removes unwanted files when appropriate.

Using the Files panel
The Files panel enables you to view files and folders, whether they are associated with a Dreamweaver site or not,
and perform standard file maintenance operations, such as opening and moving files.
Note: In previous versions of Dreamweaver the Files panel was called the Site panel.
You can move the Files panel as necessary and set preferences for the panel.
Use this panel to perform the following tasks:

• Access sites, a server, and local drives
• View files and folders
• Manage files and folders in the Files panel
• Work with a visual map of your site

September 4, 2007

DREAMWEAVER CS3 78
User Guide

For Dreamweaver sites, use the following options to display or transfer files:

A. Site Files view B. Testing Server view C. Site Map view D. Site pop-up menu E. Connect/Disconnect F. Refresh G. Put File(s) H. Get
File(s) I. Check Out File(s) J. Check In File(s) K. Synchronize L. Expand/Collapse

Note: The Site Files view, Testing Server view, Site Map view, and Synchronize buttons appear only in the expanded Files
panel.
The Site pop-up menu Lets you select a Dreamweaver site and display that site’s files. You can also use the Site menu

to access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).
Site Files view Displays the file structure of the remote and local sites in the panes of the Files panel. (A preference

setting determines which site appears in the left pane and which appears in the right pane.) Site Files view is the
default view for the Files panel.
Testing Server view Displays the directory structure of the testing server and the local site.
Site Map view Displays a graphical map of your site based on how the documents are linked to one another. Hold

this button down to select Map Only or Map and Files from the pop-up menu.
The current pop-up menu Lists your Dreamweaver sites, servers you’ve connected to, and provides access to your

local drives and desktop.
Connect/Disconnect (FTP, RDS, WebDAV protocol, and Microsoft Visual SourceSafe) Connects to or disconnects

from the remote site. By default, Dreamweaver disconnects from the remote site if it has been idle for more than 30
minutes (FTP only). To change the time limit, select Edit > Preferences (Windows) or Dreamweaver > Preferences
(Macintosh), then select Site from the category list on the left.
Refresh Refreshes the local and remote directory lists. Use this button to manually refresh the directory lists if you
deselected either Refresh Local File List Automatically or Refresh Remote File List Automatically in the Site
Definition dialog box.
Get File(s) Copies the selected files from the remote site to your local site (overwriting the existing local copy of the

file, if any). If Enable File Check In And Check Out is enabled, the local copies are read-only; the files remain
available on the remote site for other team members to check out. If Enable File Check In and Check Out is disabled,
the file copies will have both read and write privileges.
Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Remote pane is
active, the selected remote or testing server files are copied to the local site; if the Local pane is active, Dreamweaver copies
the remote or testing server version of the selected local files to the local site.
Put File(s) Copies the selected files from the local site to the remote site.

Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Local pane is active,
the selected local files are copied to the remote site or testing server; if the Remote pane is active, Dreamweaver copies the
local versions of the selected remote server files to the remote site.
If you are putting a file that doesn’t already exist on the remote site, and Enable File Check In and Out is enabled, the
file is added to the remote site as “checked out.” Click the Check In Files button if you want to add a file without the
checked out status.
Check Out File(s) Transfers a copy of the file from the remote server to your local site (overwriting the existing local

copy of the file, if any) and marks the file as checked out on the server. This option is not available if Enable File
Check In and Check Out in the Site Definitions dialog box is disabled for the current site.

September 4, 2007

DREAMWEAVER CS3 79
User Guide

Check In File(s) Transfers a copy of the local file to the remote server and makes the file available for editing by
others. The local file becomes read-only. This option is not available if the Enable File Check In and Check Out
option in the Site Definitions dialog box is disabled for the current site.
Synchronize Synchronizes the files between the local and remote folders.
The Expand/Collapse button Expands or collapses the Files panel to display one or two panes.

See also
“Files panel overview” on page 22
“Set up a remote folder” on page 43
“Check files into and out of a remote folder” on page 93
“Put files on a remote server” on page 89
“Get files from a remote server” on page 88
“Synchronizing files” on page 94

View files and folders
You can view files and folders in the Files panel, whether they are associated with a Dreamweaver site or not. When
you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and, for Dreamweaver
sites, you can expand or collapse the Files panel.
For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote
site—that appears by default in the collapsed panel. Or, you can switch the content views in the expanded Files panel
using the Always Show option.

See also
“Set up a remote folder” on page 43
“Set up a testing server” on page 48
“Working with a visual map of your site” on page 52
Open or close the Files panel
❖ Select Window > Files.

Expand or collapse the Files panel (Dreamweaver sites only)
❖ In the Files panel (Window > Files), click the Expand/Collapse button

in the toolbar.

Note: If you click the Expand/Collapse button to expand the panel while it is docked, the panel maximizes so that you
cannot work in the Document window. To return to the Document window, click the Expand/Collapse button again to
collapse the panel. If you click the Expand/Collapse button to expand the panel while it is not docked, you can still work
in the Document window. Before you can dock the panel again, you must first collapse it.
When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a
list of files. When expanded, it displays the local site and either the remote site or testing server. The Files panel can
also display a visual site map of the local site.

September 4, 2007

DREAMWEAVER CS3 80
User Guide

Change the size of the view area in the expanded Files panel
❖ In the Files panel (Window > Files), with the panel expanded, do one of the following:

• Drag the bar that separates the two views to increase or decrease the view area of the right or left pane.
• Use the scroll bars at the bottom of the Files panel to scroll through the views’ contents.
• In the site map, drag the arrow above a file to change the space between files.
Change the site view in Files panel (Dreamweaver sites only)
❖ Do one of the following:

• In the collapsed Files panel (Window > Files), select Local View, Remote View, Testing Server, or Map View from
the Site View pop-up menu.
Note: Local View appears in the Site View menu by default.

• In the expanded Files panel (Window > Files), click the Site Files button (for the remote site), Testing Server
button, or Site Map button in the toolbar.

A. Site Files B. Testing Server C. Site Map

• If you click the Site Map button, you can choose to view the site map with site files or to view the site map only.
Note: Before you can view a remote site or a testing server, you must set up a remote site or testing server. Before you can
view a site map, you must set up a home page.
View files outside of a Dreamweaver site
❖ Navigate your computer using the Site pop-up menu, much as you would if you were using Windows Explorer

(Windows) or the Finder (Macintosh).

Work with files in the Files panel
You can open or rename files; add, move, or delete files; or refresh the Files panel after you make changes.
For Dreamweaver sites, you can also determine which files (on either the local or remote site) have been updated
since the last time they were transferred.

See also
“Synchronizing files” on page 94
“Access sites, a server, and local drives” on page 83

September 4, 2007

DREAMWEAVER CS3 81
User Guide

Open a file
1 In the Files panel (Window > Files), select a site, server, or drive from the pop-up menu (where the current site,

server, or drive appears).
2 Navigate to the file you want to open.
3 Do one of the following:

• Double-click the file’s icon.
• Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Open.
Dreamweaver opens the file in the Document window.
Create a file or folder
1 In the Files panel (Window > Files), select a file or folder.

Dreamweaver will create the new file or folder inside the currently selected folder, or in the same folder as the
currently selected file.
2 Right-click (Windows) or Control-click (Macintosh), then select New File or New Folder.
3 Enter a name for the new file or folder.
4 Press Enter (Windows) or Return (Macintosh).
Delete a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to delete.
2 Right-click (Windows) or Control-click (Macintosh), then select Delete.
Rename a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to rename.
2 Do one of the following to activate the name of the file or folder:

• Click in the filename, pause, then click again.
• Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Rename.
3 Type the new name over the existing name.
4 Press Enter (Windows) or Return (Macintosh).
Move a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to move.
2 Do one of the following:

• Copy the file or folder, then paste it in a new location.
• Drag the file or folder to a new location.
3 Refresh the Files panel to see the file or folder in its new location.
Refresh the Files panel
❖ Do one of the following:

• Right-click (Windows) or Control-click (Macintosh) any file or folder, then select Refresh.
• (Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes).

September 4, 2007

DREAMWEAVER CS3 82
User Guide

Note: Dreamweaver refreshes the Files panel when you make changes in another application, then return to
Dreamweaver.

Find files in your Dreamweaver site
Dreamweaver makes it easy to find selected, open, checked out, or recently modified files in your site. You can also
find files that are newer in your local or remote site.

See also
“Use reports to test your site” on page 106
Find an open file in your site
1 Open the file in the Document window.
2 Select Site > Locate in Site.

Dreamweaver selects the file in the Files panel.
Note: If the open file in the Document window is not part of the current site in the Files panel, Dreamweaver attempts
to determine which of your Dreamweaver sites the file belongs to; if the current file belongs to only one local site,
Dreamweaver opens that site in the Files panel, then highlights the file.
Locate and select checked out files in a Dreamweaver site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,

then select Edit > Select Checked Out Files.

Dreamweaver selects the files in the Files panel.
Find a selected file in your local or remote site
1 Select the file in the Local or Remote view of the Files panel (Window > Files).
2 Right-click (Windows) or Control-click (Macintosh), then select Locate in Local Site or Locate in Local Site
(depending on where you selected the file).

Dreamweaver selects the file in the Files panel.
Locate and select files that are newer in the local site than in the remote site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,

then select Edit > Select Newer Local.
Dreamweaver selects the files in the Files panel.
Locate and select files that are newer in the remote site than in the local site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,

then select Edit > Select Newer Remote.
Dreamweaver selects the files in the Files panel.

September 4, 2007

DREAMWEAVER CS3 83
User Guide

Find recently modified files in your site
1 In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,

and then select Edit > Select Recently Modified.
2 Do one of the following to indicate search dates for the report:

• To report on all files modified in the last several days, select Files Created or Modified in the Last and enter a
number in the box.

• To report on all files modified within a specific time frame, click the Files Created or Modified in the Between
radio button, then specify a date range.
3 (Optional) Enter a user name in the Modified By box to limit your search to files modified by a specific user
between the dates you indicated.

Note: This option is only available for reports on Contribute sites.
4 Select a radio button to indicate where you want to view files listed in the report, if necessary:
Local Machine if the site contains static pages.
Testing Server if the site contains dynamic pages.

Note: This option assumes you defined a Testing Server in the Site Definition dialog box (XREF). If you have not defined
a Testing Server and entered a URL prefix for that server, or if you are running the report for more than one site, this
option is not available.
Other Location if you want to enter a path in the text box.

5 Click OK to save your settings.

Dreamweaver highlights the files that were modified within the selected time frame in the Files panel.

Identify and delete unused files
You can identify and delete files that are no longer used by other files in your site.
1 Select Site > Check Links Sitewide.

Dreamweaver checks all the links in your site and displays the broken ones in the Results panel.
2 Select Orphaned Files from the menu on the Link Checker panel.

Dreamweaver displays all the files with no incoming links. This means that no files in your site link to these files.
3 Select the files you want to delete and press Delete (Windows) or Command+Delete (Macintosh).

Important: Although no other file in the site links to these files, some of the listed files may link to other files. Use caution
when deleting the files.

See also
“Enable and disable site cloaking” on page 100

Access sites, a server, and local drives
You can access, modify, and save files and folders in your Dreamweaver sites, as well as files and folders that are not
part of a Dreamweaver site. In addition to Dreamweaver sites, you can access a server, a local drive, or your desktop.
Before you can access a remote server, you must set up Dreamweaver to work with that server.

September 4, 2007

DREAMWEAVER CS3 84
User Guide

Note: The best way to manage your files is to create a Dreamweaver site.

See also
“Set up and edit a local root folder” on page 42
Open an existing Dreamweaver site
❖ In the Files panel (Window > Files), select a site from the menu (where the current site, server, or drive appears).

Open a folder on a remote FTP or RDS server
1 In the Files panel (Window > Files), select a server name from the menu (where the current site, server, or drive

appears).

Note: Server names appear for servers you’ve configured Dreamweaver to work with.
2 Navigate to and edit files as you normally do.
Access a local drive or your desktop
1 In the Files panel (Window > Files), select Desktop, Local Disk, or CD Drive from the menu (where the current

site, server, or drive appears).
2 Navigate to a file, then do any of the following:

• Open files in Dreamweaver or another application
• Rename files
• Copy files
• Delete files
• Drag files
When you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site,
Dreamweavercopies the file to the location where you drop it. If you drag a file within the same Dreamweaver site,
Dreamweavermoves the file to the location where you drop it. If you drag a file that is not part of a Dreamweaver site
to a folder that is not part of a Dreamweaver site, Dreamweaver moves the file to the location where you drop it.

September 4, 2007

DREAMWEAVER CS3 85
User Guide

Note: To move a file that Dreamweaver copies by default, hold down the Shift key (Windows) or the Command key
(Macintosh) while you drag. To copy a file that Dreamweaver moves by default, hold the Control key (Windows) or the
Option key (Macintosh) while you drag.

Set site preferences for transferring files
You select preferences to control file-transfer features that appear in the Files panel.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the Preferences dialog box, select Site from the category list on the left.
3 Set the options and click OK.
Always Show Specifies which site (remote or local) is always shown, and in which Files panel pane (left or right) the
local and remote files appear.

By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the
changeable pane: this pane can display either the site map or the files in the other site (the remote site by default).
Dependent Files Displays a prompt for transferring dependent files (such as images, external style sheets, and other

files referenced in the HTML file) that the browser loads when it loads the HTML file. By default, both Prompt on
Get/Check Out and Prompt on Put/Check In are selected.
It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again. This is also true for uploading
and checking in files: no need if up-to-date copies are already at the destination.
If you deselect these options, your dependent files are not transferred. Therefore, to force the Dependent Files dialog
box to appear even when these options are deselected, hold down Alt (Windows) or Option (Macintosh) while
choosing the Get, Put, Check In, or Check Out commands.
FTP Connection Determines whether the connection to the remote site is terminated after the specified number of
minutes have passed with no activity.
FTP Time Out Specifies the number of seconds in which Dreamweaver attempts to make a connection with the

remote server.
If there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you
to this fact.
FTP Transfer options Determines whether Dreamweaver selects the default option, after a specified number of

seconds, when a dialog box appears during a file transfer and there is no user response.
Firewall Host Specifies the address of the proxy server through which you connect to outside servers if you are

behind a firewall.
If you are not behind a firewall, leave this space blank. If you are behind a firewall, select the Use Firewall option in
the Site Definition dialog box.
Firewall Port Specifies the port in your firewall through which you pass to connect to the remote server. If you

connect through a port other than 21 (the default for FTP), enter the number here.
Put Options: Save Files Before Putting Indicates that unsaved files are saved automatically before being put onto the

remote site.
Manage Sites Opens the Manage Sites dialog box, where you can edit an existing site or create a new one.

September 4, 2007

DREAMWEAVER CS3 86
User Guide

You can define whether the types of files that you transfer are transferred as ASCII (text) or binary, by customizing
the FTPExtensionMap.txt file in the Dreamweaver/Configuration folder (on the Macintosh, FTPExtensionMapMac.txt). For more information see, Extending Dreamweaver.

See also
“Set up a remote folder” on page 43

Customize the file and folder details displayed in the expanded Files panel
When you view a Dreamweaver site in the expanded Files panel, information about the files and folders is displayed
in columns. For example, you can see the file type or the date a file was modified.
You can customize the columns by doing any of the following (some operations are only available for columns you
add, not default columns):

• Reorder or realign columns
• Add new columns (for a maximum of 10 columns)
• Hide columns (except the filename column)
• Designate columns to be shared with all users connected to a site
• Delete columns (custom columns only)
• Rename columns (custom columns only)
• Associate columns with a Design Note (custom columns only)
Change the order of the columns
❖ Select a column name, and then click the up or down arrow button to change the position of the selected column.

Note: You can change the order of any column except Name, which is always the first column.
Add, delete, or change detail columns
1 Select Site > Manage Sites.
2 Select a site, then click Edit.
3 Select File View Columns from the Category list on the left.
4 Select a column and click the Plus (+) button to add a column, or the Minus (–) button to delete a column.

Note: The column is deleted immediately and without confirmation, so make certain that you want to delete the column
before clicking the Minus (–) button.
5 In the Column Name box, enter a name for your column.
6 Select a value from the Associate with Design Note menu, or type in your own.

Note: You must associate a new column with a Design Note, so that there is data to display in the Files panel.
7 Select an alignment to determine how text is aligned within the column.
8 Select or deselect Show to reveal or hide the column.
9 Select Share with All Users of This Site to share the column with all users connected to the remote site.
Sort by any detail column in the Files panel
❖ Click the heading for the column you want to sort.

September 4, 2007

DREAMWEAVER CS3 87
User Guide

Click the heading again to reverse the order (ascending or descending) by which Dreamweaver sorts the column.

Getting and putting files to and from your server
File transfer and dependent files
If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local
and remote sites. If you’re the only person working on the remote site, however, you can use the Get and Put
commands to transfer files without checking them in or out.
When you transfer a document between a local and remote folder using the Files panel, you have the option of transferring the document’s dependent files. Dependent files are images, external style sheets, and other files referenced
in your document that a browser loads when it loads the document.
Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again. This is also true for uploading and
checking in files: no need if up-to-date copies are already at the remote site.
Library items are treated as dependent files.
Some servers report errors when putting library items. However, you can cloak these files to prevent them from being
transferred.

See also
“Checking in and checking out files” on page 91
“Enable and disable site cloaking” on page 100

About background file transfers
You can perform other, non-server-related, activities while you’re getting or putting files. Background file transfer
works for all of the transfer protocols supported by Dreamweaver: FTP, SFTP, LAN, WebDAV, Microsoft Visual
SourceSafe, and RDS.
Non-server-related activities include common operations like typing, editing external style sheets, generating sitewide reports, and creating new sites.
Server-related activities that Dreamweaver cannot perform during file transfers include the following:

• Put/Get/Check in/Check out files
• Undo check-out
• Create a database connection
• Bind dynamic data
• Preview live data
• Insert a web service
• Delete remote files or folders
• Preview in a browser on a testing server

September 4, 2007

DREAMWEAVER CS3 88
User Guide

• Save a file to a remote server
• Insert an image from a remote server
• Open a file from a remote server
• Auto put files upon saving
• Drag files to the remote site
• Cut, copy, or paste files on the remote site
• Refresh Remote view

Get files from a remote server
Use the Get command to copy files from the remote site to your local site. You can use the Files panel or the
Document window to get files.
Dreamweaver creates a log of file activity during the transfer that you can view and save.
Note: You cannot turn background file transfer off. If you have the detail log open in the background file transfer window,
you can close that to improve performance.
Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP,
the Site FTP log can help you determine the problem.

See also
“Checking in and checking out files” on page 91
“Synchronizing files” on page 94
Get files from a remote server using the Files panel
1 In the Files panel (Window > Files), select the desired files to download.

Usually you select these files in the Remote view, but you can select the corresponding files in the Local view if you
prefer. If the Remote view is active, then Dreamweaver copies the selected files to the local site; if the Local view is
active, then Dreamweaver copies the remote versions of the selected local files to the local site.
Note: To get only those files for which the remote version is more recent than the local version, use the Synchronize
command.
2 Do one of the following to get the file:

• Click the Get button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh) the file in the Files panel, then select Get from the context menu.
3 Click Yes in the Dependent Files dialog box to download dependent files; if you already have local copies of the
dependent files, click No. The default is to not download dependent files. You can set this option at Edit > Preferences
> Site.

Dreamweaver downloads the selected files, as follows:

• If you’re using the Check In/Check Out system, getting a file results in a read-only local copy of the file; the file
remains available on the remote site or testing server for other team members to check out.

• If you’re not using the Check In/Check Out system, getting a a copy that has both read and write privileges.

September 4, 2007

DREAMWEAVER CS3 89
User Guide

Note: If you’re working in a collaborative environment—that is, if others are working on the same files—you should not
disable Enable File Check In and Check Out. If other people are using the Check In/Check Out system with the site, you
should use that system as well.
To stop the file transfer at any time, click Cancel in the status dialog box.
Get files from a remote server using the Document window
1 Make sure the document is active in the Document window.
2 Do one of the following to get the file:

• Select Site > Get.
• Click the File Management icon in the Document window toolbar, then select Get from the menu.
Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, then
performs the Get operation.
Display the FTP log
❖ Click the Options menu in the upper-right corner of the Files panel, then select View > Site FTP Log.

Put files on a remote server
You can put files from the local site to the remote site, generally without changing the file’s checked out status.
There are two common situations in which you might use the Put command instead of Check In:

• You’re not in a collaborative environment and you aren’t using the Check In/Check Out system.
• You want to put the current version of the file on the server but you’re going to keep editing it.
Note: If you put a file that didn’t previously exist on the remote site and you’re using the Check In/Check Out system, the
file is copied to the remote site and is then checked out to you so that you can continue editing.
You can use the Files panel or the Document window to put files. Dreamweaver creates a log of file activity during
the transfer that you can view and save.
Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP,
the Site FTP log can help you determine the problem.
For a tutorial on putting files on a remote server, see www.adobe.com/go/vid0163.
For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.

See also
“Synchronizing files” on page 94
“About the Check In/Check Out system” on page 91
Put files on a remote or testing server using the Files panel
1 In the Files panel (Window > Files), select the files to upload.

Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer.

September 4, 2007

DREAMWEAVER CS3 90
User Guide

Note: You can put only those files for which the local version is more recent than the remote version.
2 Do one of the following to put the file on the remote server:

• Click the Put button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh) the file in the Files panel, then select Put from the context menu.
3 If the file hasn’t been saved, a dialog box appears (if you set this preference in the Site category of the Preferences

dialog box) allowing you to save the file before putting it on the remote server. Click Yes to save the file or No to put
the previously saved version on the remote server.
Note: If you do not save the file, any changes you’ve made since the last time you saved will not be put onto the remote
server. However, the file remains open, so you can still save the changes after putting the file on the server if you want.
4 Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent
files. The default is to not upload dependent files. You can set this option at Edit > Preferences > Site.

Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of the
dependent files are already on the remote server, there’s no need to upload them again.
To stop the file transfer, click Cancel in the status dialog box. The transfer may not stop immediately.
A lock symbol appears beside the local file’s icon indicating that the file is now read-only.
Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending
on the preference options you’ve set.
Put files on a remote server using the Document window
1 Make sure the document is active in the Document window.
2 Do one of the following to put the file:

• Select Site > Put.
• Click the File Management icon in the Document window toolbar, then select Put from the menu.
Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, then
performs the Put operation.
Display the FTP log
❖ Click the Options menu in the upper-right corner of the Files panel, then select View > Site FTP Log.

Manage file transfers
You can view the status of file transfer operations, as well as a list of transferred files and their outcomes (transfer
successful, skipped, or failed). You can also save a log of the file activity.
Note: Dreamweaver lets you perform other non-server-related activities while you’re transferring files to or from a server.
Cancel a file transfer
❖ Click the Cancel button or close the Background File Activity dialog box.

September 4, 2007

DREAMWEAVER CS3 91
User Guide

Hide the Background File Activity dialog box during transfers
❖ Click the Hide button on the Background File Activity dialog box to minimize it so that all you see is the small

Log button at the bottom of the Files panel.
Note: You cannot hide or remove the Log button. It’s a permanent part of the panel.
View details of the last file transfer
1 Click the Log button at the bottom of the Files panel to open the Background File Activity dialog box.
2 Click the Details expander arrow.
Save a log of the last file transfer
1 Click the Log button at the bottom of the Files panel to open the Background File Activity dialog box.
2 Click the Save Log button and save the information as a text file.

You can review the file activity by opening the log file in Dreamweaver or in any text editor.

Checking in and checking out files
About the Check In/Check Out system
If you’re working in a collaborative environment, you can check files in and out from local and remote servers. If
you’re the only person working on the remote server, you can use the Put and Get commands without checking files
in or out.
Note: You can use Get and Put functionality with a testing server, but you cannot use the Check In/ Check Out system
with a testing server.
Checking out a file is the equivalent of declaring “I’m working on this file now—don’t touch it!” When a file is
checked out, the name of the person who checked out the file is displayed in the Files panel, along with a red check
mark (if a team member checked out the file) or green check mark (if you checked out the file) next to the file’s icon.
Checking in a file makes the file available for other team members to check out and edit. When you check in a file
after editing it, your local version becomes read-only and a lock symbol appears beside the file in the Files panel to
prevent you from making changes to the file.
Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files. However, in applications other than
Dreamweaver, the LCK file is visible next to the checked-out file in the file hierarchy to help prevent such accidents.
For more information on LCK files and how the Check In/Check Out system works, see TechNote 15447 on the
Adobe website at www.adobe.com/go/15447.

See also
“Getting and putting files to and from your server” on page 87

Set up the Check In/Check Out system
Before you can use the Check In/Check Out system, you must associate your local site with a remote server.
1 Select Site > Manage Sites.

September 4, 2007

DREAMWEAVER CS3 92
User Guide

2 Select a site and click Edit.
3 In the Advanced tab, select Remote Info from the category list on the left.
4 Select Enable File Check In and Check Out if you are working in a team environment (or working alone but from
several different machines). Deselect this option if you want to disable file check in and check out for your website.

This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have
left a more recent version of a file on another machine.
If your remote access option is Microsoft Visual SourceSafe, this is your only Check In/Check Out option. The
remaining options in this section apply to FTP, Local/Network, WebDAV, and RDS access methods only.
If you do not see Check In/Out options, it means that you have not set up a remote server.
5 Select the Check Out Files when Opening option if you want to automatically check out files when you doubleclick to open them from the Files panel.

Using File > Open to open a file doesn’t check the file out even when this option is selected.
6 Set the remaining options:
Check Out Name The check-out name appears in the Files panel alongside any files that are checked out; this enables
team members to communicate with the right person if a file they need is checked out.

Note: If you work alone from several different machines, use a different check-out name on each machine (for example,
AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.
Email Address If you enter an e-mail address, when you check out a file, your name appears in the Files panel as a

link (blue and underlined) next to that file. If a team member clicks on the link, their default e-mail program opens
a new message with the user’s e-mail address and a subject that corresponds to the file and site name.

See also
“Set up a remote folder” on page 43

Use WebDAV to check in and check out files
Dreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which
is a set of extensions to the HTTP protocol that allow users to collaboratively edit and manage files on remote web
servers. For more information, see www.webdav.org.
1 If you have not already done so, define a Dreamweaver site that specifies the local folder you use to store your
project files.
2 Select Site > Manage Sites, and then double-click your site in the list.
3 In the Site Definition dialog box, click the Advanced tab.
4 Click the Remote Info category, and then select WebDAV from the Access menu.
5 Specify how Dreamweaver should connect to your WebDAV server.
6 Select the Enable File Check in and Check Out option and enter the following information:

• In the Check Out Name box, enter a name identifying you to other team members.
• In the Email Address box, enter your e-mail address.
The name and e-mail addresses are used to identify ownership on the WebDAV server and appear in the Files panel
for contact purposes.

September 4, 2007

DREAMWEAVER CS3 93
User Guide

7 Click OK.

Dreamweaver configures the site for WebDAV access. When you use the Check In or Check Out command on any
site file, the file is transferred using WebDAV.
Note: WebDAV may be unable to properly check out any files with dynamic content like PHP tags or SSIs because the
HTTP GET rendered these as they are checked out.

Check files into and out of a remote folder
After you set up the Check In/Check Out system, you can check in and check out files on a remote server using the
Files panel or from the Document window.

See also
“Set site preferences for transferring files” on page 85
Check out files using the Files panel
1 In the Files panel (Window > Files), select files to check out from the remote server.

Note: You can select files in the Local or Remote view, not the Testing Server view.
A red check mark indicates that another team member has the file checked out and a lock symbol indicates that the
file is read-only (Windows) or locked (Macintosh).
2 Do one of the following to check out the file(s):

• Click the Check Out button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh), then select Check Out from the context menu.
3 In the Dependent Files dialog box, click Yes to download dependent files along with the selected files, or click No
to refrain from downloading dependent files. The default is to not download dependent files. You can set this option
at Edit > Preferences > Site.

Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again.
A green check mark appears beside the local file’s icon indicating that you have checked it out.
Important: If you check out the currently active file, the currently open version of the file is overwritten by the new
checked-out version.
Check in files using the Files panel
1 In the Files panel (Window > Files), select checked-out or new file(s).

Note: You can select files in the Local or Remote view, but not the Testing Server view.
2 Do one of the following to check in the file(s):

• Click the Check In button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh), then select Check In from the context menu.
3 Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent
files. The default is to not upload dependent files. You can set this option at Edit > Preferences > Site.

September 4, 2007

DREAMWEAVER CS3 94
User Guide

A lock symbol appears beside the local file’s icon indicating that the file is now read-only.
Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending
on the preference options you’ve set.
Check in an open file from the Document window
1 Make sure the file you want to check in is open in the Document window.

Note: You can check in only one open file at a time.
2 Do one of the following:

• Select Site > Check In.
• Click the File Management icon in the Document window toolbar, then select Check In from the menu.
If the current file is not part of the active site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to a site other than the one that’s active in the Files
panel, Dreamweaver opens that site, then performs the check in operation.
Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending
on the preference options you’ve set.
Undo a file check-out

If you check out a file, then decide not to edit it (or decide to discard the changes you made), you can undo the checkout operation and the file returns to its original state.
To undo a file check-out, do one of the following:

• Open the file in the Document window, then select Site > Undo Check Out.
• In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), then select Undo Check Out.
The local copy of the file becomes read-only, and any changes you’ve made to it are lost.

Synchronizing files
Synchronize the files on your local and remote sites
After you’ve created files in your local and remote sites, you can synchronize the files between the two sites.
Note: If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP.
Before you synchronize your sites, you can verify which files you want to put, get, delete, or ignore. Dreamweaver
also confirms which files have been updated after you complete the synchronization.

See also
“Manage file transfers” on page 90
“Check files into and out of a remote folder” on page 93
“Get files from a remote server” on page 88
“Put files on a remote server” on page 89
“Comparing files for differences” on page 96

September 4, 2007

DREAMWEAVER CS3 95
User Guide

Check which files are newer on the local or remote site, without synchronizing
❖ In the Files panel, do one of the following:

• Click the Options menu in the upper-right corner, and then select Edit > Select Newer Local or Edit > Select
Newer Remote.

• In the Files panel, right-click (Windows) or Control-click (Macintosh), and then select Select > Newer Local or
Select > Newer Remote.
Display detailed synchronization information for a particular file
❖ In the Files panel, right-click (Windows) or Control-click (Macintosh) the file you want information about, and

then select Display Synchronize information.
Note: You must have the Maintain Synchronization Information option selected in the Remote category of the Site
Definition dialog box for this feature to be available.
Synchronize your files
1 In the Files panel (Window > Files), select a site from the menu where the current site, server, or drive appears.
2 (Optional) Select specific files or folders or go to the next step to synchronize the entire site.
3 Click the Options menu in the upper-right corner of the Files panel and select Site > Synchronize.

You can also click the Synchronize button at the top of the Files panel to synchronize files.
4 In the Synchronize menu, do one of the following:

• To synchronize the entire site, select Entire Site Name Site.
• To synchronize selected files only, select Selected Local Files Only (or Selected Remote Files Only if the Remote
view of the Files panel was where you made the most recent selection).
5 Select the direction in which you want to copy the files:
Put Newer Files To Remote Uploads all the local files that don’t exist on the remote server or have changed since the

last upload.
Get Newer Files From Remote Downloads all the remote files that don’t exist locally or have changed since the last

download.
Get And Put Newer Files Places the most recent versions of all the files on both the local and the remote sites.

6 Select whether to delete the files on the destination site that don’t have counterparts on the origin site. (This is not
available if you select Get and Put from the Direction menu.)

If you select Put Newer Files to Remote and you select the Delete option, then any files in your remote site for which
there are no corresponding local files are deleted. If you select Get Newer Files from Remote, then any files in your
local site for which there are no corresponding remote files are deleted.
7 Click Preview.

Note: Before you can synchronize the files, you must preview the actions Dreamweaver performs to accomplish this task.
If the newest version of each chosen file is already in both locations and nothing needs to be deleted, an alert appears
informing you that no synchronization is necessary. Otherwise, the Synchronize dialog box appears to let you change
the actions (put, get, delete, and ignore) for those files before executing the synchronization.

September 4, 2007

DREAMWEAVER CS3 96
User Guide

8 Verify the action that will be performed for each file.
9 To change the action for a particular file, select the file, and then click one of the action icons at the bottom of the
preview window.
Compare The Compare action works only if you installed and specified a file comparison tool in Dreamweaver. If
the action icon is grayed out, the action cannot be performed.
Mark Selected Files As Already Synced This option lets you specify that the selected file or files are already synchro-

nized.
10 Click OK to synchronize the files. You can view or save the details of the synchronization to a local file.

Comparing files for differences
Compare local and remote files for differences
Dreamweaver can work with file comparison tools (also known as “diff tools”) to compare the code of local and
remote versions of the same file, two different remote files, or two different local files. Comparing local and remote
versions is useful if you’re working on a file locally and you suspect the copy of the file on the server has been
modified by someone else. Without leaving Dreamweaver, you can view and merge the remote changes into your
local version before putting the file to the server.
Comparing two local files or two remote files is also useful if you keep previous, renamed versions of your files. If
you’ve forgotten the changes made to a file from a previous version, a quick comparison will remind you.
Before you start, you must install a third-party file comparison tool on your system. For more information on file
comparison tools, use a web search engine such as Google Search to search for “file comparison” or “diff ” tools.
Dreamweaver works with most third-party tools.

See also
“Set up and edit a local root folder” on page 42
Specify a comparison tool in Dreamweaver
1 Install the file comparison tool on the same system as Dreamweaver.
2 In Dreamweaver, open the Preferences dialog box by selecting Edit > Preferences (Windows) or Dreamweaver >
Preferences (Macintosh), and then select the File Compare category.
3 Do one of the following:

• In Windows, click the Browse button and select the application that compares files.
• On the Macintosh, click the Browse button and select the tool or script that launches the file comparison tool from
the command line, not the actual comparison tool itself.
Launch tools or scripts are typically located in the usr/bin folder on your Macintosh. For example, if you want to use
FileMerge, browse to usr/bin and select opendiff, which is the tool that launches FileMerge.
The following table lists common file comparison tools for the Macintosh and the location of their launch tools or
scripts on your hard disk:

September 4, 2007

DREAMWEAVER CS3 97
User Guide

If you use

Select the following file

FileMerge

usr/bin/opendiff

BBEdit

usr/bin/bbdiff

TextWrangler

usr/bin/twdiff

Note: The usr folder is normally hidden in Finder. However, you can access it with the Browse button in Dreamweaver.
Note: The actual results displayed depends on the diff tool you are using. Check the user manual for your tool to understand how to interpret the results.
Compare two local files

You can compare two files located anywhere on your computer.
1 In the Files panel, Control-click (Windows) or Command-click (Macintosh) the two files to select them.

To select files outside your defined site, select your local disk from the left pop-up menu in the Files panel and then
select the files.
2 Right-click one of the selected files and select Compare Local Files from the context menu.

Note: If you have a one-button mouse, Control-click one of the selected files instead.
The file comparison tool starts and compares the two files.
Compare two remote files

You can compare two files located on your remote server. You must define a Dreamweaver site with remote settings
before you can accomplish this task.
1 In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu.
2 Control-click (Windows) or Command-click (Macintosh) the two files to select them
3 Right-click one of the selected files and select Compare Remote Files from the context menu.

Note: If you have a one-button mouse, Control-click one of the selected files instead.
The file comparison tool starts and compares the two files.
Compare a local file to a remote file

You can compare a local file to a file located on your remote server. To do this, you must first define a Dreamweaver
site with remote settings.
❖ In the Files panel, right-click a local file and select Compare With Remote from the context menu.

Note: If you have a one-button mouse, Control-click the local file instead.
The file comparison tool starts and compares the two files.
Compare a remote file to a local file

You can compare a remote file to a local file. You must define a Dreamweaver site with remote settings before accomplishing this task.
1 In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu.
2 Right-click a file in the panel and select Compare with Local from the context menu.

September 4, 2007

DREAMWEAVER CS3 98
User Guide

Note: If you have a one-button mouse, Control-click the file instead.
Compare an open file to a remote file

You can compare a file open in Dreamweaver to its counterpart on the remote server.
❖ In the Document window, select File > Compare with Remote.

The file comparison tool starts and compares the two files.
You can also right-click the document tab along the top of the Document window and select Compare with Remote
from the context menu.

Compare before putting files
If you edit a file locally and then try to upload it to your remote server, Dreamweaver will notify you if the remote
version of the file has changed. You have the option of comparing the two files before you upload the file and
overwrite the remote version.
Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.
1 After editing a file in a Dreamweaver site, put the file (Site > Put) to your remote site.

If the remote version of the file has been modified, you’ll receive a notification with the option of seeing the differences.
2 To view the differences, click the Compare button.

The file comparison tool starts and compares the two files.
If you haven’t specified a file comparison tool, you are prompted to specify one.
3 After you’ve reviewed or merged the changes in the tool, you can proceed with the Put operation or cancel it.

Compare files when synchronizing
You can compare the local versions of your files with the remote versions when you synchronize your site files with
Dreamweaver.
Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.
1 Right-click anywhere in the Files panel and select Synchronize from the context menu.
2 Complete the Synchronize Files dialog box and click Preview.

After you click Preview, the selected files and the actions that will be taken during synchronization are listed.
3 In the list, select each file you want to compare and click the Compare button (the icon with two small pages).

Note: The file must be text-based, such as HTML or ColdFusion files.
Dreamweaver starts the comparison tool, which compares the local and remote versions of each file you selected.

See also
“Synchronizing files” on page 94

September 4, 2007

DREAMWEAVER CS3 99
User Guide

Rolling back files (Contribute users)
Roll back files (Contribute users)
Dreamweaver automatically saves multiple versions of a document when you have Adobe Contribute compatibility
enabled.
Note: You must have Contribute installed on the same machine as Dreamweaver.
File rollback must also be enabled in Contribute’s administrative settings. For more information, see Administering
Contribute.
1 Right-click (Windows) or Control-click (Macintosh) a file in the Files panel.
2 Select Roll Back Page.

If there is any previous version of the page to roll back, the Rollback dialog box appears.
3 Select the version of the page you want to roll back to and click Roll Back.

See also
“Prepare a site for use with Contribute” on page 59
“Delete, move, or rename a remote file in a Contribute site” on page 61

Cloaking folders and files in your site
About site cloaking
Site cloaking enables you to exclude folders and file types from operations such as Get or Put. You can cloak
individual folders, but not individual files. To cloak files, you must select a file type and Dreamweaver cloaks all files
of that type. Dreamweaver remembers your settings for each site so that you don’t have to make selections each time
you work on that site.
For example, if you’re working on a large site and don’t want to upload your multimedia files each day, you can use
site cloaking to cloak your multimedia folder, and the system excludes files in that folder from site operations you
perform.
You can cloak folders and file types on the remote or local site. Cloaking excludes cloaked folders and files from the
following operations:

• Performing Put, Get, Check In, and Check Out operations
• Generating reports
• Finding newer local and newer remote files
• Performing sitewide operations, such as checking and changing links
• Synchronizing
• Working with Asset panel contents
• Updating templates and libraries

September 4, 2007

DREAMWEAVER CS3 100
User Guide

Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver does
not exclude these items from batch operations, because it might cause them to become out of sync with their instances.

Enable and disable site cloaking
Site cloaking enables you to exclude folders and file types in a site from sitewide operations such as Get or Put, and
is enabled by default. You can disable cloaking permanently or just temporarily to perform an operation on all files,
including cloaked files. When you disable site cloaking, all cloaked files are uncloaked. When you enable site
cloaking again, any previously cloaked files become cloaked again.
Note: You can also use the Uncloak All option to uncloak all files, but this does not disable cloaking; also there is no way
to re-cloak all folders and files that were previously cloaked, except to set cloaking again for each folder and file type.
1 In the Files panel (Window > Files), select a select a site from the pop-up menu where the current site, server, or

drive appears.
2 Select a file or folder.
3 Right-click (Windows) or Control-click (Macintosh), and do one of the following:

• Select Cloaking > Enable Cloaking (deselect to disable).
• Select Cloaking > Settings, and select Cloaking from the category list on the left in the Advanced Site Definition
dialog box. Select or deselect Enable Cloaking, and select or deselect Cloak Files Ending With to enable or disable
cloaking for specific file types. You can enter or delete file suffixes in the text box that you want to cloak or uncloak.
4 Click OK.

Cloak and uncloak site folders
You can cloak specific folders, but you cannot cloak all folders or an entire site. When you cloak specific folders, you
can cloak multiple folders at the same time.
1 In the Files panel (Window > Files), select a select a site that has site cloaking enabled from the pop-up menu
where the current site, server, or drive appears.
2 Select the folder(s) you want to cloak or uncloak.
3 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Cloak or Cloaking > Uncloak from
the context menu.

A red line through the folder icon appears or disappears, indicating that the folder is cloaked or uncloaked.
Note: You can perform an operation on a specific cloaked folder by selecting the item in the Files panel and performing
an operation on it. Performing an operation directly on a file or folder overrides cloaking.

Cloak and uncloak specific file types
You can indicate specific file types to cloak, so that Dreamweaver cloaks all files ending with a specified pattern. For
example, you can cloak all files ending with the .txt extension. The file types that you enter do not have to be file
extensions; they can be any pattern at the end of a filename.
Note: You cannot cloak an individual file, only a folder or all files of a given file type.
Cloak specific file types within a site
1 In the Files panel (Window > Files), select a site that has site cloaking enabled from the pop-up menu where the

current site, server, or drive appears.

September 4, 2007

DREAMWEAVER CS3 101
User Guide

2 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings.
3 Select the Cloak Files Ending With option and enter the file types to cloak in the box.

For example, you might enter .jpg to cloak all files with names ending in .jpg in your site.
Separate multiple file types with one space; do not use a comma or semicolon.
4 Click OK.

A red line appears through the affected files, indicating that they are cloaked.
Some software creates backup files ending in a particular suffix, such as .bak. You can cloak such files.
Note: You can perform an operation on a specific cloaked folder by selecting the item in the Files panel and performing
an operation on it. Performing an operation directly on a file or folder overrides cloaking.
Uncloak specific file types within a site
1 In the Files panel (Window > Files), select a site that has site cloaking enabled from the pop-up menu where the

current site, server, or drive appears.
2 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings.
3 In the Advanced Site Definition dialog box, do one of the following:

• Deselect the Cloak Files Ending With option to uncloak all the file types listed in the box.
• Delete specific file types from the box to uncloak those file types.
4 Click OK.

The red lines disappear from the affected files, indicating that they are uncloaked.

Uncloak all folders and files
You can uncloak all folders and files in a site at the same time. This action cannot be undone; there is no way to
re-cloak all items that were previously cloaked. You have to re-cloak items individually.
If you want to temporarily uncloak all folders and files, then re-cloak those items, disable site cloaking.
1 In the Files panel (Window > Files), select a select a site that has site cloaking enabled from the menu where the
current site, server, or drive appears.
2 Select any file or folder in that site.
3 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Uncloak All.

Note: This step also deselects the Cloak Files Ending With option in the Site > Cloaking > Settings.
The red lines through folder and file icons disappear, indicating that all files and folders in the site are uncloaked.

September 4, 2007

DREAMWEAVER CS3 102
User Guide

Storing file information in Design Notes
About Design Notes
Design Notes are notes that you create for a file. Design Notes are associated with the file they describe, but stored
in a separate file. You can see which files have Design Notes attached in the expanded Files panel: A Design Notes
icon appears in the Notes column.
You can use Design Notes to keep track of extra file information associated with your documents, such as image
source-filenames and comments on file status. For example, if you copy a document from one site to another, you
can add Design Notes for that document, with the comment that the original document is in the other site folder.
You can also use Design Notes to keep track of sensitive information that you can’t put inside a document for security
reasons, such as notes on how a particular price or configuration was chosen, or what marketing factors influenced
a design decision.
If you open a file in Adobe® Fireworks® or Flash, and export it to another format, Fireworks and Flash automatically
save the name of the original source file in a Design Notes file. For example, if you open myhouse.png in Fireworks
and export it to myhouse.gif, Fireworks creates a Design Notes file called myhouse.gif.mno. This Design Notes file
contains the name of the original file, as an absolute file: URL. So, the Design Notes for myhouse.gif might contain
the following line:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

A similar Flash Design Note might contain the following line:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

Note: To share Design Notes, users should define the same site-root path (for example, sites/assets/orig).
When you import the graphic into Dreamweaver, the Design Notes file is automatically copied into your site along
with the graphic. When you select the image in Dreamweaver and choose to edit it using Fireworks, Fireworks opens
the original file for editing.

See also
“Start an external editor for media files” on page 271

Enable and disable Design Notes for a site
Design Notes are notes associated with a file, but stored in a separate file. Use Design Notes to keep track of extra file
information associated with your documents, such as image source-filenames and comments on file status.
You enable and disable Design Notes for a site in the Design Notes category of the Site Definition dialog box. When
you enable Design Notes, you can also choose to share them with others, if you want.
1 Select Site > Manage Sites.
2 In the Manage Sites dialog box, select a site, then click Edit.
3 In the Advanced tab of the Site Definition dialog box, select Design Notes from the Category list on the left.
4 Select Maintain Design Notes to enable Design Notes (deselect to disable them).
5 If you want to delete all local Design Notes files for your site, click Clean Up, and then click Yes. (If you want to

delete remote Design Notes files, you’ll need to delete them manually).

September 4, 2007

DREAMWEAVER CS3 103
User Guide

Note: The Clean Up Design Notes command only deletes MNO (Design Notes) files. It does not delete the _notes folder
or the dwsync.xml file inside the _notes folder. Dreamweaver uses the dwsync.xml file to maintain information about
site synchronization.
6 Select Upload Design Notes For Sharing to upload Design Notes associated with your site with the rest of your
documents and click OK.

• If you select this option, you can share Design Notes with the rest of your team. When you put or get a file,
Dreamweaver automatically puts or gets the associated Design Notes file.

• If you do not select this option, Dreamweaver maintains Design Notes locally but does not upload them with your
files. If you work alone on your site, deselecting this option improves performance. Design Notes will not be transferred to the remote site when you check in or put your files and you can still add and modify the Design Notes
for your site locally.

Associate Design Notes with files
You can create a Design Notes file for each document or template in your site. You can also create Design Notes for
applets, ActiveX controls, images, Flash content, Shockwave objects, and image fields in your documents.
Note: If you add Design Notes to a template file, documents you create with the template do not inherit the Design Notes.
1 Do one of the following:

• Open the file in the Document window and select File > Design Notes.
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the file, and select Design Notes.
Note: If the file resides in a remote site, you must first check out or get the file, and then select it in the local folder.
2 In the Basic Info tab, select a status for the document from the Status menu.
3 Click the date icon (above the Notes box) to insert the current local date in your notes.
4 Type comments in the Notes box.
5 Select Show When File Is Opened to make the Design Notes file appear every time the file is opened.
6 In the All Info tab, click the Plus (+) button to add a new key-value pair; select a pair and click the Minus (–)
button to remove it.

For example, you might name a key Author (in the Name box) and define the value as Heidi (in the Value box).
7 Click OK to save the notes.

Dreamweaver saves your notes to a folder called _notes, in the same location as the current file. The filename is the
document’s filename, plus the extension .mno. For example, if the filename is index.html, the associated Design
Notes file is named index.html.mno.

See also
“Getting and putting files to and from your server” on page 87
“Check files into and out of a remote folder” on page 93

Work with Design Notes
After you associate a Design Note with a file, you can open the Design Note, change its status, or delete it.

September 4, 2007

DREAMWEAVER CS3 104
User Guide

Open Design Notes associated with a file
❖ Do one of the following to open the Design Notes:

• Open the file in the Document window, then select File > Design Notes.
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the file, then select Design Notes.
• In the Notes column of the Files panel, double-click the yellow Design Notes icon.
Note: To show the yellow Design Notes icons, select Site > Manage Sites > [your site name] > Edit > File View Columns
on the Advanced tab. Select Notes in the list panel and choose the Show option. When you click the Expand button on
the Files toolbar to show both the local and remote site, you have a Notes column in your local site that shows a yellow
note icon for any file with a Design Note.
Assign a custom Design Notes status
1 Open Design Notes for a file or object (see the previous procedure).
2 Click the All Info tab.
3 Click the Plus (+) button.
4 In the Name field, enter the word status.
5 In the Value field, enter the status.

If a status value already existed, it’s replaced with the new one.
6 Click the Basic Info tab and note that the new status value appears in the Status pop-up menu.

Note: You can have only one custom value in the status menu at a time. If you follow this procedure again, Dreamweaver
replaces the status value you entered the first time with the new status value you enter.
Delete unassociated Design Notes from your site
1 Select Site > Manage Sites.
2 Select the site and click Edit.
3 In the Site Definition dialog box, select Design Notes from the category list on the left.
4 Click the Clean Up button.

Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a file
in your site.
If you use Dreamweaver to delete a file that has an associated Design Notes file, Dreamweaver deletes the Design
Notes file too; so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver.
Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notes
files for your site.

Testing your site
Site testing guidelines
Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s
a good idea to test and troubleshoot your site frequently throughout its construction—you can catch problems early
and avoid repeating them.)

September 4, 2007

DREAMWEAVER CS3 105
User Guide

You should make sure that your pages look and work as expected in the browsers you’re targeting, that there are no
broken links, and that the pages don’t take too long to download. You can also test and troubleshoot your entire site
by running a site report.
The following guidelines will help you create a good experience for visitors to your site:
1. Make sure your pages function in the browsers you’re targeting.

Your pages should be legible and functional in browsers that do not support styles, layers, plug-ins, or JavaScript. For
pages that fail badly in older browsers, consider using the Check Browser behavior to automatically redirect visitors
to another page.
2. Preview your pages in different browsers and platforms.

This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that
cannot be predicted in a target browser check.
3. Check your site for broken links and fix them.

Other sites undergo redesign and reorganization too, and the page you’re linking to may have been moved or deleted.
You can run a link check report to test your links.
4. Monitor the file size of your pages and the time they take to download.

Keep in mind that if a page consists of one large table, in some browsers, visitors will see nothing until the entire table
finishes loading. Consider breaking up large tables; if this is not possible, consider putting a small amount of
content—such as a welcome message or an advertising banner—outside the table at the top of the page so users can
view this material while the table downloads.
5. Run a few site reports to test and troubleshoot the entire site.

You can check your entire site for problems, such as untitled documents, empty tags, and redundant nested tags.
6. Validate your code to locate tag or syntax errors.
7. Update and maintain the site after its published.

Publishing your site—that is, making it live—can be accomplished in several ways and is an ongoing process. An
important part of the process is defining and implementing a version-control system, either with the tools
Dreamweaver includes or through an external version-control application.
8. Use the discussion forums.

The Dreamweaver discussion forums can be found on the Adobe website at
www.adobe.com/go/dreamweaver_newsgroup.
The forums are a great resource for getting information on different browsers, platforms, and so on. You can also
discuss technical issues and share helpful hints with other Dreamweaver users.
For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.

See also
“Fix broken links” on page 296
“Test links in Dreamweaver” on page 289

September 4, 2007

DREAMWEAVER CS3 106
User Guide

“Apply the Check Browser behavior” on page 351
“Validate tags” on page 328
“Check for browser compatibility” on page 328

Use reports to test your site
You can run site reports on workflow or HTML attributes, including accessibility, for the current document, selected
files, or the entire site. You can also use the Reports command to check links in your site.
Workflow reports can improve collaboration among members of a web team. You can run workflow reports that
display who has checked out a file, which files have Design Notes associated with them, and which files have been
modified recently. You can further refine Design Note reports by specifying name/value parameters.
Note: You must have a remote site connection defined to run the workflow reports.
HTML reports enable you to compile and generate reports for several HTML attributes. You can check combinable
nested font tags, accessibility, missing Alt text, redundant nested tags, removable empty tags, and untitled
documents.
After you run a report, you can save it as an XML file, then import it into a template instance or a database or spreadsheet and print it, or display it on a website.
Note: You can also add different report types to Dreamweaver through the Adobe Dreamweaver Exchange website.

See also
“Reports in Dreamweaver” on page 26
“Test links in Dreamweaver” on page 289
“Add and manage extensions in Dreamweaver” on page 710
Run reports to test a site
1 Select Site > Reports.

If you want to run only an accessibility report for your site, you can select File > Check Page > Check Accessibility
and the report appears in the Site Reports panel of the Results panel group.
2 Select what to report on from the Report On pop-up menu and set any of the report types to run (workflow or
HTML).

You cannot run a Selected Files In Site report unless you have already selected files in the Files panel.
3 If you selected a workflow report, click Report Settings. Otherwise, skip this step.

Note: If you selected more than one workflow report, you need to click the Report Settings button for each report. Select
a report, click Report Settings, and enter settings; then, repeat the process for any other workflow reports.
Checked Out By Creates a report listing all documents checked out by a specific team member. Enter the name of a
team member, and then click OK to return to the Reports dialog box.
Design Notes Creates a report listing all Design Notes for selected documents or for the site. Enter one or more name

and value pairs, then select comparison values from the corresponding pop-up menus. Click OK to return to the
Reports dialog box.
Recently Modified Creates a report listing files that have changed during a specified time frame. Enter date ranges

and location for the files you want to view.

September 4, 2007

DREAMWEAVER CS3 107
User Guide

4 If you selected an HTML report, select from the following reports:
Combinable Nested Font Tags Creates a report that lists all nested font tags that can be combined to clean up the

code.
For example, STOP! is reported.
Missing Alt Text Creates a report listing all the img tags that don’t have alternate text.

Alternate text appears in place of images for text-only browsers or for browsers that have been set to download
images manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses
over the image.
Checked Out By Creates a report listing all documents checked out by a specific team member.
Accessibility Creates a report detailing conflicts between your content and the Section 508 accessibility guidelines
of the 1998 Rehabilitation Act.
Redundant Nested Tags Creates a report detailing nested tags that should be cleaned up.

For example, The rain in Spain stays mainly in the plain is reported.
Removable Empty Tags Creates a report detailing all empty tags that can be removed to clean up the HTML code.

For example, you may have deleted an item or image in Code view, but left behind the tags that applied to that item.
Untitled Documents Creates a report listing all the untitled documents found within the selected parameters.
Dreamweaver reports all documents with default titles, duplicate titles, or missing title tags.

5 Click Run to create the report.

Depending on the type of report you run, you might be prompted to save your file, define your site, or select a folder
(if you haven’t already done so).
A list of results appears in the Site Reports panel (in the Results panel group).
Use and save a report
1 Run a report (see the previous procedure).
2 In the Site Reports panel, do any of the following to view the report:

• Click the column heading you want to sort results by.
You can sort by filename, line number, or description. You can also run several different reports and keep the
different reports open.

• Select any line in the report, then click the More Info button on the left side of the Site Reports panel for an
description of the problem.
The information appears in the Reference panel.

• Double-click any line in the report to view the corresponding code in the Document window.
Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code.
3 Click Save Report to save the report.

When you save a report, you can import it into an existing template file. You can then import the file into a database
or spreadsheet and print it, or use the file to display the report on a website.
After running HTML reports, use the Clean Up HTML command to correct any HTML errors the reports listed.

September 4, 2007

108

Chapter 5: Managing assets and libraries
The Assets panel (in the same panel group as the Files panel), is the primary tool you use to organize your site assets,
including reusable pieces of content called library items.

About assets and libraries
About assets
You can use Adobe® Dreamweaver® CS3 to keep track of and preview assets stored in your site, such as images,
movies, colors, scripts, and links. You can also drag an asset directly to insert it in a page of the current document.
You obtain assets from various sources. For example, you might create assets in an application such as Adobe®
Fireworks® or Adobe® Flash®, receive them from a co-worker, or copy them from a clip-art CD or graphics website.
Dreamweaver also provides access to two special types of assets—libraries and templates. Both are linked assets:
when you edit a library item or template, Dreamweaver updates all documents that use those assets. Library items
generally represent small design assets, such as a site logo or copyright. To control a larger design area, use a template
instead.

See also
“About Dreamweaver templates” on page 387

About library items
A library is a special Dreamweaver file containing a collection of individual assets or copies of assets that you can
place in your web pages. The assets in a library are called library items. Items that you can store in a library include
images, tables, sounds, and Flash files. You can automatically update all the pages that use a library item whenever
you edit the item.
For example, suppose you’re building a large site for a company that wants a slogan to appear on every page. You can
create a library item to contain the slogan and use that library item on every page. If the slogan changes, you can
change the library item and automatically update every page that uses it.
Dreamweaver stores library items in a Library folder within the local root folder for each site. Each site has its own
library.
You can create a library item from any element in the body section of a document, including text, tables, forms, Java
applets, plug-ins, ActiveX elements, navigation bars, and images.
For linked items such as images, the library stores only a reference to the item. The original file must remain at the
specified location for the library item to work correctly.
It can still be useful to store an image in a library item, though. For example, you could store a complete img tag in
a library item, which would allow you to easily change the image’s alt text, or even its src attribute, throughout the
site. (Don’t use this technique to change an image’s width and height attributes, though, unless you also use an
image editor to change the actual size of the image.)

September 4, 2007

DREAMWEAVER CS3 109
User Guide

Note: If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied
to the new site.
When you use a library item, Dreamweaver inserts a link to it, rather than the item itself, in the web page. That is,
Dreamweaver inserts a copy of the HTML source code for that item into the document and adds an HTML comment
containing a reference to the original, external item. It is this external reference that makes automatic updating
possible.
When you create a library item that includes an element with a Dreamweaver behavior attached to it, Dreamweaver
copies the element and its event handler (the attribute that specifies which event triggers the action, such as onClick,
onLoad, or onMouseOver, and which action to call when the event occurs) to the library item file. Dreamweaver does
not copy the associated JavaScript functions into the library item. Instead, when you insert the library item into a
document, Dreamweaver automatically inserts the appropriate JavaScript functions into the head section of that
document (if they aren’t already there).
Note: If you hand-code JavaScript (that is, if you create it without using Dreamweaver behaviors), you can make it part
of a library item if you use the Call JavaScript behavior to execute the code. If you don’t use a Dreamweaver behavior to
execute the code, the code isn’t retained as part of the library item.
There are special requirements for editing the behaviors in library items. Library items cannot contain style sheets,
because the code for those elements is part of the head section.

See also
“Edit a behavior in a library item” on page 119

Working with assets
Assets panel overview
Use the Assets panel (Window > Assets) to manage assets in the current site. The Assets panel displays assets for the
site associated with the active document in the Document window.
Note: You must define a local site before you can view assets in the Assets panel.

Asset panel with Site list displayed. Category icons are at left, and preview area is above list.

September 4, 2007

DREAMWEAVER CS3 110
User Guide

The Assets panel provides two ways to view assets:
Site list Shows all of the assets in your site, including colors and URLs that are used in any document in your site.
Favorites list Shows only the assets you’ve explicitly chosen.

To switch between these two views, select either the Site or Favorites radio button above the preview area. (These two
views are not available for the Templates and Library categories.)
Note: Most of the Assets panel operations work the same in both lists. There are a few tasks, however, that you can
perform only in the Favorites list.
In both lists, assets fall into one of the following categories:
Images
Colors

Image files in GIF, JPEG, or PNG formats.
Colors used in documents and style sheets, including colors of text, backgrounds, and links.

External links in your current site documents, including FTP, gopher, HTTP, HTTPS, JavaScript, e-mail
(mailto), and local file (file://) links.
URLs

Flash
Files in any version of Adobe Flash. The Assets panel displays only SWF files (compressed Flash files), but
not FLA (Flash source) files.

Files in any version of Adobe Shockwave.

Shockwave
Movies

QuickTime or MPEG files.

JavaScript or VBScript files. Scripts in HTML files (rather than in independent JavaScript or VBScript
files) do not appear in the Assets panel.

Scripts

Templates

Master page layouts used on multiple pages. Modifying a template automatically modifies all pages

attached to it.
Library items
Design elements that you use in multiple pages; when you modify a library item, all pages
containing that item are updated.

Note: To appear in the Assets panel, a file must fall into one of these categories. Some other types of files are sometimes
called assets, but they aren’t shown in the panel.
By default, assets in a category are listed alphabetically by name, but you can sort them by type and several other
criteria. You can also preview assets and resize the columns and the preview area.

See also
“Creating and managing a list of favorite assets” on page 114
“Working with library items” on page 116
“Set up and edit a local root folder” on page 42
View an asset in the preview area
❖ Select the asset in the Assets panel.

For example, when you select a movie asset, the preview area shows an icon. To view the movie, click the Play button
(the green triangle) in the upper-right corner of the preview area.
Display assets in a category
❖ Click a category icon on the left side of the Assets panel.

September 4, 2007

DREAMWEAVER CS3 111
User Guide

Sort assets
❖ Click a column heading.

For example, to sort the list of images by type (so that all the GIF images are together, all the JPEG images are
together, and so on), click the Type column heading.
Resize a column
❖ Drag the line separating two column headings.

Resize the preview area
❖ Drag the splitter bar (between the preview area and the list of assets) up or down.

Refresh the Assets panel

It can take a few seconds to create the Site list because Dreamweaver must first read the site cache.
Certain changes don’t appear immediately in the Assets panel. For instance, when you add or remove an asset from
your site, the changes don’t appear in the Assets panel until you refresh the Site list by clicking the Refresh Site List
button. If you add or remove an asset outside Dreamweaver—using Windows Explorer or the Finder, for example—
you must rebuild the site cache to update the Assets panel.
When you remove the only instance of a particular color or URL in your site, or when you save a new file that
contains a color or URL that isn’t already used in the site, the changes don’t appear in the Assets panel until you
refresh the Site list.

• To refresh the Site list manually, click the Refresh Site List button

. Dreamweaver creates the site cache or

updates it as necessary.

• To refresh the Site list and manually rebuild the site cache, right-click (Windows) or Command-click (Macintosh)
in the Assets list, then select Refresh Site List.

Add an asset to a document
You can insert most assets into a document by dragging them into the Code view or Design view in the Document
window, or by using the Insert button in the panel. You can either insert colors and URLs or apply them to selected
text in the Design view. (URLs can also be applied to other elements in the Design view, such as images.)
1 In Design view, place the insertion point where you want the asset to appear.
2 In the Assets panel, select from the asset category buttons at the left.

Note: Select any category except Templates. A template is applied to an entire document; it can’t be inserted into a
document.
3 Select either Site or Favorites at the top of the panel, then select the asset.

There are no Site or Favorites lists for library items; skip this step if you’re inserting a library item.
4 Do one of the following:

• Drag the asset from the panel to the document.
You can drag scripts into the head content area of the Document window; if that area isn’t visible, select View > Head
Content.

• Select the asset in the panel and click Insert.
If the inserted asset is a color, it applies to text appearing after the insertion point.

September 4, 2007

DREAMWEAVER CS3 112
User Guide

Apply a color to text using the Assets panel
The Assets panel shows the colors you’ve already applied to various elements, such as text, table borders,
backgrounds, and so on.
1 Select the text in the document.
2 In the Assets panel, select the Colors category

3 Select the desired color and click Apply.

See also
“Add or remove favorite assets” on page 114

Apply a URL to an image or text using the Assets panel
1 Select the text or image.
2 In the Assets panel, select the URLs category

in either the Sites or Favorites view, depending on where the

URL is stored.
Note: URLs for your site’s files are stored in the Sites view by default. The Favorites view holds URLs that you have added
yourself.
3 Select the URL.
4 Do one of the following:

• Drag the URL from the panel to the selection in the Design view.
• Select the URL, then click Apply.

Select and edit assets
The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets.

See also
“Start an external editor for media files” on page 271
Select multiple assets
1 In the Assets panel, select an asset.
2 Select the other assets in one of the following ways:

• Shift-click to select a consecutive series of assets.
• Control-click (Windows) or Command-click (Macintosh) to add an individual asset to the selection (whether or
not it’s adjacent to the existing selection). Control-click or Command-click a selected asset to deselect it.

September 4, 2007

DREAMWEAVER CS3 113
User Guide

Edit an asset

When you edit an asset in the Assets panel, the behavior varies according to the asset type. For some assets, such as
images, you use an external editor, which opens automatically if you have defined an editor for that asset type. You
can edit colors and URLs in the Favorites list only. When you edit templates and library items, you make the changes
within Dreamweaver.
1 In the Assets panel, do one of the following:

• Double-click the asset.
• Select the asset, then click the Edit button

Note: If the asset must be edited in an external editor and one doesn’t open automatically, select Edit > Preferences
(Windows) or Dreamweaver > Preferences (Macintosh), select the File Types/Editors category, and make sure you have
defined an external editor for that asset type.
2 Make your changes.
3 When you finish, do one of the following:

• If the asset is file-based (anything other than a color or URL), save it (in the editor you used), and close it.
• If the asset is a URL, click OK in the Edit URL dialog box.
Note: If the asset is a color, the color picker closes automatically after you pick a color. To dismiss the color picker without
picking a color, press Esc.

Reuse assets in another site
The Assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site
in another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an
entire Favorites folder at once.
You may need to locate the file in the Files panel that corresponds to an asset in the Assets panel before you transfer
the asset to or from your remote site.
Note: The Files panel might show a different site from the one that the Assets panel shows. This is because the Assets
panel is associated with the active document.
Locate an asset file in the Files panel
1 In the Assets panel, select the category of the asset you want to find.
2 Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select

Locate In Site from the context menu.
Note: Locate In Site is unavailable for colors and URLs, which do not correspond to files in the site.
The Files panel opens, with the asset file selected. The Locate In Site command locates the file corresponding to the
asset itself; it does not locate files that use that asset.
Copy assets from the Asset panel to another site
1 In the Assets panel, select the category of the asset you want to copy.
2 Right-click (Windows) or Control-click (Macintosh) one or more assets in either the Site list or Favorites list,
select Copy To Site, and select the target site name from the submenu listing all the sites you’ve defined.

Note: In the Favorites list, you can copy a Favorites folder as well as individual assets.

September 4, 2007

DREAMWEAVER CS3 114
User Guide

The assets are copied to their corresponding locations in the target site. Dreamweaver creates new folders in the
target site’s hierarchy as needed. The assets are also added to the target site’s Favorites list.
Note: If the asset you copied is a color or a URL, it appears only in the target site’s Favorites list. Because colors and URLs
don’t correspond to files, there’s no file to copy into the other site.

Creating and managing a list of favorite assets
Managing favorite assets
The complete list of all recognized assets list can become cumbersome for some large sites. You can add frequently
used assets to a Favorites list, group related assets together, give them nicknames to remind yourself what they’re for,
and find them easily in the Assets panel.
Note: Favorite assets are not stored as separate files on your disk; they’re references to the assets in the Site list.
Dreamweaver keeps track of which assets from the Site list to display in the Favorites list.
Most of the operations of the Assets panel are the same in the Favorites list as in the Site list. However, there are
several tasks that you can perform only in the Favorites list.

Add or remove favorite assets
There are several ways to add assets to your site’s Favorites list in the Assets panel.
Adding a color or URL to the Favorites list requires an extra step. You can’t add new colors or URLs to the Site list;
the Site list contains only assets that are already in use in your site.
Note: There are no Favorites lists for templates and library items.

See also
“Assets panel overview” on page 109
“Use the color picker” on page 223
Add assets to the Favorites list

Do one of the following:

• Select one or more assets in the Site list of the Assets panel, then click the Add To Favorites button

• Select one or more assets in the Site list of the Assets panel, right-click (Windows) or Control-click (Macintosh),
then select Add To Favorites.

• Select one or more files in the Files panel, right-click (Windows) or Control-click (Macintosh), then select Add To
Favorites. Dreamweaver ignores files that don’t correspond to a category in the Assets panel.

• Right-click (Windows) or Control-click (Macintosh) an element in the Document window’s Design view, then
select the context menu command to add the element to a Favorites category.
The context menu for text contains either Add To Color Favorites or Add To URL Favorites, depending on whether
the text has a link attached. You can add only those elements that match one of the categories in the Assets panel.
Add a new color or URL to the Favorites list
1 In the Assets panel, select the Colors or URLs category.

September 4, 2007

DREAMWEAVER CS3 115
User Guide

2 Select the Favorites option at the top of the panel.
3 Click the New Color or New URL button

4 Do one of the following:

• Select a color using the color picker, then give the color a nickname if desired.
To close the color picker without selecting a color, press Esc or click the gray bar at the top of the color picker.

• Enter a URL and a nickname in the Add New URL dialog box, then click OK.
Remove assets from the Favorites list
1 In the Assets panel, select the Favorites option at the top of the panel.
2 Select one or more assets (or a folder) in the Favorites list.
3 Click the Remove From Favorites button

The assets are removed from the Favorites list, but not from the Site list. If you remove a Favorites folder, the folder
and all its contents are removed.

Create a nickname for a favorite asset
You can give nicknames (for instance, PageBackgroundColor rather than #999900) to assets only in the Favorites list.
The Site list retains their real filenames (or values, in the case of colors and URLs).
1 In the Assets panel (Window > Assets), select the category that contains your asset.
2 Select the Favorites option at the top of the panel.
3 Do one of the following:

• Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select Edit
Nickname.

• Click the asset’s name once, pause, then click it again. (Do not double-click; double-clicking opens the item for
editing.)
4 Type a nickname for the asset, then press Enter (Windows) or Return (Macintosh).

See also
“Assets panel overview” on page 109

Group assets in a Favorites folder
Placing an asset in Favorites folder does not change the location of the asset’s file on your disk.
1 In the Assets panel, select the Favorites option at the top of the panel.
2 Click the New Favorites Folder button

3 Type a name for the folder, then press Enter (Windows) or Return (Macintosh).
4 Drag assets into the folder.

September 4, 2007

DREAMWEAVER CS3 116
User Guide

Working with library items
Create a library item
Library items are elements that you want to reuse or update frequently throughout your website.

See also
“About library items” on page 108
Create a library item based on a selection
1 In the Document window, select a portion of a document to save as a library item.
2 Do one of the following:

• Drag the selection into the Library category
• Click the New Library Item button

at the bottom of the Library category.

• Select Modify > Library > Add Object To Library.
3 Type a name for the new library item, then press Enter (Windows) or Return (Macintosh).

Dreamweaver saves each library item as a separate file (with the file extension .lbi) in the Library folder of the site’s
local root folder.
Create an empty library item
1 Make sure nothing is selected in the Document window.

If something is selected, it will be placed in the new library item.
2 In the Assets panel, select the Library category
3 Click the New Library Item button

at the bottom of the panel.

4 While the item is still selected, enter a name for it, then press Enter (Windows) or Return (Macintosh).

Insert a library item into a document
When you add a library item to a page, the actual content is inserted in the document along with a reference to the
library item.
1 Place the insertion point in the Document window.
2 In the Assets panel, select the Library category

3 Do one of the following:

• Drag a library item from the Assets panel to the Document window.
To insert the contents of a library item without including a reference to the item in the document, press Control
(Windows) or Option (Macintosh) while dragging an item out of the Assets panel. If you insert an item this way, you
can edit the item in the document, but the document won’t be updated when you update pages that use that library item.

• Select a library item, and click Insert.

September 4, 2007

DREAMWEAVER CS3 117
User Guide

Edit library items and update documents
When you edit a library item, you can update all documents that use that item. If you choose not to update, the
documents remain associated with the library item; you can update them later.
You can rename items to break their connection with documents or templates, delete items from the site’s library,
and recreate a missing library item.
Note: The CSS Styles panel is unavailable as you edit a library item, because library items can contain only body
elements and Cascading Style Sheets (CSS) code is inserted in the head section of a document. The Page Properties
dialog box is also unavailable, because a library item can’t include a body tag or its attributes.
Edit a library item
1 In the Assets panel, select the Library category

2 Select a library item.
3 Either Click the Edit button

or double-click the library item.

Dreamweaver opens a new window, similar to the Document window, for editing the library item. The gray
background indicates that you’re editing a library item instead of a document.
4 Make and then save your changes.
5 Specify whether to update the documents on the local site that use the library item. Select Update to update
immediately. If you select Don’t Update, documents won’t be updated until you choose Modify > Library > Update
Current Page or Update Pages.
Update the current document to use the current version of all library items
❖ Select Modify > Library > Update Current Page.

Update the entire site or all documents that use a particular library item
1 Select Modify > Library > Update Pages.
2 In the Look In pop-up menu, specify what to update:

• To update all pages in the selected site to use the current version of all library items, Select Entire Site, then select
the site name from the adjacent pop-up menu.

• To update all pages in the current site that use the library item, Select Files That Use, then select a library item
name from the adjacent pop-up menu.
3 Make sure that Library Items is selected in the Update option.

To update templates at the same time, select Templates as well.
4 Click Start.

Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver generates a report
showing whether files were updated successfully, along with other information.
Rename a library item
1 In the Assets panel, select the Library category

2 Select the library item, pause, and then click again. (Do not double-click; double-clicking opens the item for
editing.)
3 Enter a new name.

September 4, 2007

DREAMWEAVER CS3 118
User Guide

4 Click elsewhere, or press Enter (Windows) or Return (Macintosh).
5 Specify whether to update documents that use the item by choosing either Update or Don’t Update.
Delete a library item from a library

When you delete a library item, Dreamweaver removes it from the library but doesn’t change the contents of any
documents that use the item.
1 In the Assets panel, select the Library category

2 Select the library item.
3 Either click the Delete button or press the Delete key, then confirm that you want to delete the item.

Important: If you delete a library item, you can’t use Undo to retrieve it. You may be able to recreate it, however.
Recreate a missing or deleted library item
1 Select an instance of the item in one of your documents.
2 Click the Recreate button in the Property inspector (Window > Properties).

Customize highlighting of library items
You can customize the highlight color of library items and show or hide highlighting by setting Highlighting preferences.

See also
“Use the color picker” on page 223
Change the highlight color of library items
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select the Highlighting category from the list on the left of the Preferences dialog box.
3 Click the Library Items color box, then select a highlight color using the color picker (or enter the hexadecimal
color value in the text box).
4 Select Show to display the highlight color in the Document window.
5 Click OK.
To show or hide highlighting in the Document window
❖ To show highlighting, select View > Visual Aids > Invisible Elements. To hide highlighting, deselect Invisible

Elements.

Edit the properties of a library item
You can use the Property inspector to open a library item for editing, detach a selected library item from its source
file, or overwrite an item with the currently selected library item.
1 Select a library item in a document.
2 Select one of these options in the Property inspector (Window > Properties):
Src Displays the filename and location of the source file for the library item. You can’t edit this information.

September 4, 2007

DREAMWEAVER CS3 119
User Guide

Open Opens the library item’s source file for editing. This is equivalent to selecting the item in the Assets panel and

clicking the Edit button.
Detach From Original Breaks the link between the selected library item and its source file. You can edit the detached

item in the document, but it’s no longer a library item and isn’t updated when you change the original.
Recreate Overwrites the original library item with the current selection. Use this option to re-create library items if
the original library item is missing or has been accidentally deleted.

Make library items editable in a document
If you’ve added a library item to your document and you want to edit the item specifically for that page, you must
break the link between the item in the document and the library. Once you’ve made an instance of a library item
editable, that instance isn’t updated when the library item changes.
1 Select a library item in the current document.
2 Click Detach From Original in the Property inspector (Window > Properties).

Edit a behavior in a library item
To edit a behavior in a library item, you must first insert the item in a document, then make the item editable in that
document. After you’ve made the changes, you can re-create the library item, replacing the item in the library with
the edited item from your document.
1 Open a document that contains the library item.

Note the name of the library item, as well as the exact tags it contains. You’ll need this information later.
2 Select the library item, and then click Detach From Original in the Property inspector (Window > Properties).
3 Select the element that has the behavior attached to it.
4 In the Behaviors panel (Window > Behaviors), double-click the action you want to change.
5 In the dialog box that appears, make your changes, then click OK.
6 In the Assets panel, select the Library category

7 Record the exact name and capitalization of the original library item; select it, then click the Delete button.
8 In the Document window, select all the elements that make up the library item.

Be careful to select exactly the same elements that were in the original library item.
9 In the Assets panel, click the New Library Item button

, then give the new item the same name as the item you

deleted, using the same spelling and capitalization.
10 To update the library item in your site’s other documents, select Modify > Library > Update Pages.
11 In the Look In pop-up menu, select Files That Use.
12 In the adjacent pop-up menu, select the name of the library item you just created.
13 In the Update option, make sure Library Items is selected, then click Start.
14 When the updates are complete, click Close.

See also
“Using JavaScript behaviors” on page 336

September 4, 2007

120

Chapter 6: Creating pages with CSS
Adobe® Dreamweaver® CS3 includes many features that help you use Cascading Style Sheets (CSS) to create styles
and layouts for your web pages.

Understanding Cascading Style Sheets
About Cascading Style Sheets
Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page.
Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—
resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external
style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation makes it much easier to maintain the appearance of your site from a central location because you don’t need
to update every property on every page whenever you want to make a change. Separating content from presentation
also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies
navigation for people with accessibility issues (for example, those using screen readers).
CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many
text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and
background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also
ensure a more consistent treatment of your page layout and appearance in multiple browsers.
In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a
web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and
visually formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web
page. You can set margins and borders for block-level elements, position them in a specific location, add background
color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out
pages with CSS.
For a tutorial on understanding Cascading Style Sheets, see www.adobe.com/go/vid0152.

See also
“Working with div tags” on page 162
“Laying out pages with CSS” on page 145

About CSS rules
A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term (such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In the following example, h1 is the selector, and everything that
falls between the braces ({}) is the declaration block:

September 4, 2007

DREAMWEAVER CS3 121
User Guide

h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}

An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica).
In the previous CSS rule, a particular style has been created for h1 tags: the text for all h1 tags linked to this style will
be 16 pixels in size, Helvetica font, and bold.
The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s
formatting—usually in an external style sheet, or in the head portion of an HTML document. Thus, one rule for h1
tags can apply to many tags at once (and in the case of external style sheets, the rule can apply to many tags at once
on many different pages). In this way, CSS provides extremely easy update capability. When you update a CSS rule
in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

• Class styles let you apply style properties to any element or elements on the page.
• HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style
for the h1 tag, all text formatted with the h1 tag is immediately updated.

• Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as
allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.)
Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles
defined by #myStyle apply to all tags that contain the attribute-value pair id="myStyle").
CSS rules can reside in the following locations:
External CSS style sheets Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file).

This file is linked to one or more pages in a website using a link or an @import rule in the head section of a document.
Internal (or embedded) CSS style sheets Collections of CSS rules included in a style tag in the head portion of an

HTML document.
Inline styles Defined within specific instances of tags throughout an HTML document. (Using Inline styles is not
recommended.)

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines.
Dreamweaver also renders most applied styles directly in Design view. (Previewing the document in a browser
window, however, gives you the most accurate “live” rendering of the page.) Some CSS styles are rendered differently
in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently
supported by any browser.

September 4, 2007

DREAMWEAVER CS3 122
User Guide

To display the O’Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O’Reilly
CSS Reference from the pop-up menu in the Reference panel.

See also
“Apply, remove, or rename class styles” on page 136

About cascading styles
The term cascading refers to the way a browser ultimately displays styles for specific elements on a web page. Three
different sources are responsible for the styles you see on a web page: the style sheet created by the author of the page,
the user’s customized style selections (if any), and the default styles of the browser itself. The previous topics describe
creating styles for a web page as the author of both the web page and the style sheet attached to that page. But
browsers also have their own default style sheets that dictate the rendering of web pages, and in addition to that, users
can customize their browsers by making selections that adjust the display of web pages. The final appearance of a
web page is the result of the rules of all three of these sources coming together (or “cascading”) to render the web
page in an optimal way.
A common tag—the paragraph tag, or tag—illustrates the concept. By default, browsers come with style sheets
that define the font and font size for paragraph text (that is, text that falls between
tags in the HTML code). In
Internet Explorer, for example, all body text, including paragraph text, displays in Times New Roman, Medium font
by default.
As the author of a web page, however, you can create a style sheet that overrides the browser’s default style for
paragraph font and font size. For example, you can create the following rule in your style sheet:
p {
font-family: Arial;
font-size: small;
}

When a user loads the page, the paragraph font and font size settings set by you as the author override the default
paragraph text settings of the browser.
Users can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer,
for example, the user can select View > Text Size > Largest to expand the page font to a more readable size if they
think the font is too small. Ultimately (at least in this case), the user’s selection overrides both the default browser
styles for paragraph font size and the paragraph styles created by the author of the web page.
Inheritance is another important part of the cascade. Properties for most elements on a web page are inherited—for
example, paragraph tags inherit certain properties from body tags, bullet list tags inherit certain properties from
paragraph tags, and so on. Thus, if you create the following rule in your style sheet:
body {
font-family: Arial;
font-style: italic;
}

All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and
italic because the paragraph tag inherits these properties from the body tag. You can, however, become more specific
with your rules, and create styles that override the standard formula for inheritence. For example, if you create the
following rules in your style sheet:

September 4, 2007

DREAMWEAVER CS3 123
User Guide

body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}

All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal
(non-italic). Technically, the paragraph tag first inherits the properties that are set for the body tag, but then ignores
those properties because it has properties of its own defined. In other words, while page elements generally inherit
properties from above, the direct application of a property to a tag always causes an override of the standard formula
for inheritance.
The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives
different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade
where items with higher priorities override properties that have lower priorities. For more information on the rules
governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.

About text formatting and CSS
By default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the
Property inspector or menu commands create CSS rules that are embedded in the head of the current document.
You can also use the CSS Styles panel to create and edit CSS rules and properties. The CSS Styles panel is a much
more robust editor than the Property inspector, and displays all CSS rules defined for the current document, whether
those rules are embedded in the head of the document or in an external style sheet. Adobe recommends that you use
the CSS Styles panel (rather than the Property inspector) as the primary tool for creating and editing your CSS. As
a result, your code will be cleaner and easier to maintain.
In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles
to your documents.
For a tutorial about formatting text with CSS, see www.adobe.com/go/vid0153.

See also
“Adding and formatting text” on page 226
“About the CSS Styles panel” on page 124
“Create a new CSS rule” on page 129

About Shorthand CSS properties
The CSS specification allows for the creation of styles using an abbreviated syntax known as shorthand CSS.
Shorthand CSS lets you specify the values of several properties using a single declaration. For example, the font
property lets you set font-style, font-variant, font-weight, font-size, line-height, and font-family
properties on a single line.
A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned
their default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the
same tag.

September 4, 2007

DREAMWEAVER CS3 124
User Guide

For example, the h1 rule shown below uses longhand CSS syntax. Note that the font-variant, font-stretch,
font-size-adjust, and font-style properties have been assigned their default values.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}

Rewritten as a single, shorthand property, the same rule might appear as follows:
h1 { font: bold 16pt/18pt Arial }

When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the
previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.
If you have styles defined in more than one location (for example, both embedded in an HTML page and imported
from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties in
a shorthand rule may override (or cascade) properties that are explicitly set in another rule.
For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused
by a shorthand rule overriding a longhand rule. If you open a web page that was coded with shorthand CSS notation
in Dreamweaver, be aware that Dreamweaver will create any new CSS rules using the longhand form. You can specify
how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of
the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh).
Note: The CSS Styles panel creates rules using only longhand notation. If you create a page or CSS style sheet using the
CSS Styles panel, be aware that hand coding shorthand CSS rules may result in the shorthand properties overriding those
created in longhand form. For this reason, use longhand CSS notation to create your styles.

Creating and managing CSS
About the CSS Styles panel
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current
mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of
panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All
and Current mode.
See the next two sections for information about the CSS Styles panel in Current and All modes.

September 4, 2007

DREAMWEAVER CS3 125
User Guide

The CSS Styles panel in Current mode
In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS
properties for the current selection in the document, a Rules pane that displays the location of selected properties
(or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS
properties for the rule applied to the selection.

You can resize any of the panes by dragging the borders between the panes, and can resize columns by dragging
dividers.
The Summary for Selection pane displays a summary of CSS properties and their values for the item currently
selected in the active document. The summary shows the properties for all rules that directly apply to the selection.
Only set properties are shown.
For example, the following rules create a class style and a tag (in this case paragraph) style:
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}

When you select paragraph text with a class style of .foo in the Document window, the Summary for Selection pane
displays the relevant properties for both rules, because both rules apply to the selection. In this case, the Summary
for Selection pane would list the following properties:
font-size: 12px
font-family: ‘Arial’
color: green

September 4, 2007

DREAMWEAVER CS3 126
User Guide

The Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag
style defines the font size and the class style defines the font family and the color. (The font family defined by the
class style overrides the font family defined by the tag style because class selectors have higher specificity than tag
selectors. For more information on CSS specificity, see www.w3.org/TR/CSS2/cascade.html.)
The Rules pane displays two different views—About view or Rules view—depending on your selection. In About
view (the default view), the pane displays the name of the rule that defines the selected CSS property, and the name
of the file containing the rule. In Rules view, the pane displays a cascade, or hierarchy, of all rules that apply directly
or indirectly to the current selection. (The tag to which the rule directly applies appears in the right column.) You
can toggle between the two views by clicking the Show Information and Show Cascade buttons in the upper-right
corner of the Rules pane.
When you select a property in the Summary for Selection pane, all of the properties for the defining rule appear in
the Properties pane. (The defining rule is also selected in the Rules pane, if Rules view is selected.) For example, if
you have a rule called .maintext that defines a font family, font size, and color, then selecting any of those properties
in the Summary for Selection pane will display all of the properties defined by the .maintext rule in the Properties
pane, as well as the selected .maintext rule in the Rules pane. (Additionally, selecting any rule in the Rules pane
displays that rule’s properties in the Properties pane.) You can then use the Properties pane to quickly modify your
CSS, whether it is embedded in the current document or linked by means of an attached style sheet. By default, the
Properties pane shows only those properties that have already been set, and arranges them in alphabetical order.
You can choose to display the Properties pane in two other views. Category view displays properties grouped into
categories, such as Font, Background, Block, Border, and so on, with set properties at the top of each category,
displayed in blue text. List view displays an alphabetical list of all available properties, and likewise sorts set
properties to the top, displaying them in blue text. To switch between views, click the Show Category View, Show List
View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane.
In all views, set properties are displayed in blue; properties irrelevant to a selection are displayed with a red strikethrough line. Holding the mouse over a rule that is irrelevant displays a message explaining why the property is irrelevant. Typically a property is irrelevant because it’s overridden or not an inherited property.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

See also
“Open the CSS Styles panel” on page 128

September 4, 2007

DREAMWEAVER CS3 127
User Guide

The CSS Styles panel in All mode
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom).
The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets
attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All
Rules pane.

You can resize either pane by dragging the border between the panes, and can resize the Properties columns by
dragging their divider.
When you select a rule in the All Rules pane, all of the properties that are defined in that rule appear in the Properties
pane. You can then use the Properties pane to quickly modify your CSS, whether it is embedded in the current
document or linked in an attached style sheet. By default, the Properties pane shows only those properties that have
been previously set, and arranges them in alphabetical order.
You can choose to display properties in two other views. Category view displays properties grouped into categories,
such as Font, Background, Block, Border, and so on, with set properties at the top of each category. List view displays
an alphabetical list of all available properties, and likewise sorts set properties to the top. To switch between views,
click the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner
of the Properties pane. In all views, set properties are displayed in blue.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

See also
“Open the CSS Styles panel” on page 128

CSS Styles panel buttons and views
In both All and Current modes, the CSS Styles panel contains three buttons that let you alter the view in the
Properties pane (the bottom pane):

September 4, 2007

DREAMWEAVER CS3 128
User Guide

A. Category View B. List View C. Set Properties View

Category View Divides the Dreamweaver-supported CSS properties into eight categories: font, background, block,

border, box, list, positioning, and extensions. Each category’s properties are contained in a list that you expand or
collapse by clicking the Plus (+) button next to the category name. Set properties appear (in blue) at the top of the list.
List View Displays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in

blue) at the top of the list.
Set Properties View Displays only those properties that have been set. Set Properties view is the default view.

In both All and Current modes, the CSS Styles panel also contains the following buttons:

A B C

A. Attach Style Sheet B. New CSS Rule C. Edit Style D. Delete CSS rule

Attach Style Sheet Opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import

into your current document.
New CSS Rule Opens a dialog box in which you can select the type of style you’re creating—for example, to create a

class style, redefine an HTML tag, or to define a CSS selector.
Edit Style Opens a dialog box in which you can edit the styles in the current document or in an external style sheet.
Delete CSS Rule Removes the selected rule or property from the CSS Styles panel, and removes the formatting from

any element to which it was applied. (It does not, however, remove class or ID properties referenced by that style).
The Delete CSS Rule button can also detach (or “unlink”) an attached CSS style sheet.
Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu of options for
working with CSS style sheet commands.

Open the CSS Styles panel
You use the CSS Styles panel to view, create, edit, and remove CSS styles, as well as to attach external style sheets to
documents.
❖ Do one of the following:

• Select Window > CSS Styles.
• Press Shift+F11.
• Click the CSS button in the Property inspector.

Set CSS Styles preferences
CSS style preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in
a shorthand form that some people find easier to work with. Some older versions of browsers, however, do not
correctly interpret the shorthand.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and from the Category list select
CSS Styles.

September 4, 2007

DREAMWEAVER CS3 129
User Guide

2 Set the CSS style options you want to apply:
When Creating CSS Rules Use Shorthand For Lets you select which CSS style properties Dreamweaver writes

in shorthand.
When Editing CSS Rules Use Shorthand Controls whether Dreamweaver rewrites existing styles in shorthand.

Select If Original Used Shorthand to leave all styles as they are.
Select According to Settings Above to rewrite styles in shorthand for the properties selected in Use Shorthand For.
When Double-Clicking In CSS Panel Lets you select a tool for editing CSS rules.

3 Click OK.

Create a new CSS rule
You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by a class attribute.
1 Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:

• Select Text > CSS Styles > New.
• In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side
of the panel.
2 Define the type of CSS style you want to create:

• To create a custom style that can be applied as a class attribute to a range or block of text, select the Class option
and then enter a name for the style in the Name text box.
Note: Class names must begin with a period and can contain any combination of letters and numbers (for example,
.myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

• To redefine the default formatting of a specific HTML tag, select the Tag option and then enter an HTML tag in
the Tag text box or select one from the pop-up menu.

• To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute,
select the Advanced option and then enter one or more HTML tags in the Selector text box or select one from the
pop-up menu. The selectors (known as pseudo-class selectors) available from the pop-up menu are a:active,
a:hover, a:link, and a:visited.
3 Select the location in which the style will be defined, and then click OK:

• To place the style in a style sheet that is already attached to the document, select the style sheet.
• To create an external style sheet, select New Style Sheet File.
• To embed the style in the current document, select This Document Only.
4 In the CSS Rule Definition dialog box, select the style options you want to set for the new CSS rule. For more infor-

mation, see the next section.
5 When you are finished setting style properties, click OK.

Note: Clicking OK without setting style options results in a new, empty rule.

Set CSS properties
You can define properties for CSS rules such as text font, background image and color, spacing and layout properties,
and the appearance of list elements. First create a new rule, then set any of the following properties.

September 4, 2007

DREAMWEAVER CS3 130
User Guide

Define CSS type properties

You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.
1 Open the CSS Styles panel (Shift + F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Type, and then set the style properties.

Leave any of the following properties empty if they are not important to the style:
Font Sets the font family (or series of families) for the style. Browsers display text in the first font in the series that
is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font
attribute is supported by both browsers.
Size Defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement,

or you can choose a relative size. Pixels work well to prevent browsers from distorting your text. The size attribute is
supported by both browsers.
Style Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is

supported by both browsers.
Line Height Sets the height of the line on which the text is placed. This setting is traditionally called leading. Select

Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of
measurement.The line height attribute is supported by both browsers.
Decoration Adds an underline, overline, or line-through to the text, or makes the text blink. The default setting for
regular text is None. The default setting for links is Underline. When you set the link setting to none, you can remove
the underline from links by defining a special class.The decoration attribute is supported by both browsers.
Weight Applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent
to 700. The weight attribute is supported by both browsers.
Variant Sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window.
The variant attribute is supported by Internet Explorer but not Navigator.
Case Capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase. The case

attribute is supported by both browsers.
Color Sets the text color. The color attribute is supported by both browsers.

4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style background properties

Use the Background category of the CSS Rule Definition dialog box to define background settings for a CSS style.
You can apply background properties to any element in a web page. For example, create a style which adds a
background color or background image to any page element, for example behind text, a table, the page, and so on.
You can also set the positioning of a background image.
1 Open the CSS Styles panel (Shift+F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Background, then set the style properties.

Leave any of the following properties empty if they are not important to the style:
Background Color Sets the background color for the element. The background color attribute is supported by both

browsers.

September 4, 2007

DREAMWEAVER CS3 131
User Guide

Background Image Sets the background image for the element.The background image attribute is supported by both

browsers.
Repeat Determines whether and how the background image is repeated. The Repeat attribute is supported by both
browsers.

• No Repeat displays the image once at the beginning of the element.
• Repeat tiles the image horizontally and vertically behind the element.
• Repeat-x and Repeat-y display a horizontal and vertical band of images, respectively. Images are clipped to fit
within the boundaries of the element.
Note: Use the Repeat property to redefine the body tag and set a background image that does not tile or repeat.
Attachment Determines whether the background image is fixed at its original position or scrolls along with the

content. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer but not
Netscape Navigator.
Horizontal Position and Vertical Position Specify the initial position of the background image in relation to the
element. This can be used to align a background image to the center of the page, both vertically and horizontally. If
the attachment property is Fixed, the position is relative to the Document window, not to the element. This attribute
is supported by Internet Explorer but not Netscape Navigator.

4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style block properties

You use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags
and properties.
1 Open the CSS Styles panel (Shift+F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Block, then set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Word Spacing Sets the spacing between words. To set a specific value, in the pop-up menu, select Value, then enter
a numeric value. In the second pop-up menu, select a measurement unit (for example, pixel, points, and so on).

Note: You can specify negative values, but the display depends on the browser. Dreamweaver does not display this
attribute in the Document window.
Letter Spacing Increases or decreases space between letters or characters. To decrease the space between characters

specify a negative value, for example (-4). Letter spacing settings override justified text settings. The Letter Spacing
attribute is supported by Internet Explorer 4 and later and Netscape Navigator 6.
Vertical Alignment Specifies the vertical alignment of the element to which it is applied. Dreamweaver displays this
attribute in the Document window only when it is applied to the tag.
Text Align Sets how text is aligned within the element. The Text Align attribute is supported by both browsers.
Text Indent Specifies how far the first line of text indents. A negative value may be used to create an outdent, but the

display depends on the browser. Dreamweaver displays this attribute in the Document window only when the tag is
applied to block-level elements. The Text Indent attribute is supported by both browsers.
Whitespace Determines how white space within the element is handled. Select from three options: Normal collapses

white space; Pre handles it as if the text were enclosed in pre tags (that is, all white space, including spaces, tabs, and

September 4, 2007

DREAMWEAVER CS3 132
User Guide

returns, is respected); Nowrap specifies that the text only wraps when a br tag is encountered. Dreamweaver does
not display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator
and Internet Explorer 5.5.
Display Specifies whether an element is displayed and if so how it is displayed. None disables the display of an
element to which it is assigned.

4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style box properties

Use the Box category of the CSS Rule Definition dialog box to define settings for tags and properties that control the
placement of elements on the page.
You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same
For All setting to apply the same setting to all sides of an element.
1 Open the CSS Styles panel (Shift + F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Box, and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
Width and Height Sets the width and height of the element.
Float Sets which side other elements, such as text, AP Divs, tables and so on, will float around an element. Other
elements wrap around the floating element as usual. The Float attribute is supported by both browsers.
Clear Defines the sides that do not allow AP elements. If an AP element appears on the clear side, the element with
the clear setting moves below it. The Clear attribute is supported by both browsers.
Padding Specifies the amount of space between the content of an element and its border (or margin if there is no

border). Deselect the Same For All option to set the padding for individual sides of the element.
Same For All Sets the same padding properties to the Top, Right, Bottom, and Left of the element to which it is

applied.
Margin Specifies the amount of space between the border of an element (or the padding if there is no border) and

another element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level
elements (paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the
element.
Same For All Sets the same margin properties to the Top, Right, Bottom, and Left of the element to which it is

applied.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style border properties

Use the Border category of the CSS Rule Definition dialog box to define settings, such as width, color, and style, for
the borders around elements.
1 Open the CSS Styles panel (Shift+F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.

September 4, 2007

DREAMWEAVER CS3 133
User Guide

3 In the CSS Rule Definition dialog box, select Border, and set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Style Sets the style appearance of the border. The way the style appears depends on the browser. Deselect Same For

All to set the border style for individual sides of the element.
Same For All Sets the same border style properties to the Top, Right, Bottom, and Left of the element to which it is

applied.
Width Sets the thickness of the element’s border. The Width attribute is supported by both browsers. Deselect Same

For All to set the border width for individual sides of the element.
Same For All Sets the same border width to the Top, Right, Bottom, and Left of the element to which it is applied.
Color Sets the color of the border. You can set each side’s color independently, but the display depends on the

browser. Deselect Same For All to set the border color for individual sides of the element.
Same For All Sets the same border color to the Top, Right, Bottom, and Left of the element to which it is applied.

4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style list properties

The List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.
1 Open the CSS Styles panel (Shift+F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select List, and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
Type Sets the appearance of bullets or numbers. Type is supported by both browsers.
Bullet Image Lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to
browse to an image, or type the image’s path.
Position Sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside).

4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style positioning properties

The Positioning style properties determine how the content related to the selected CSS style is positioned on the page.
1 Open the CSS Styles panel (Shift+F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Positioning, and then set the style properties you want.

Leave any of the following properties empty if they are not important to the style:
Type Determines how the browser should position the selected element as follows:

• Absolute places the content using the coordinates entered in the Placement boxes relative to the nearest absolutelyor relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the upper-left
corner of the page.

September 4, 2007

DREAMWEAVER CS3 134
User Guide

• Relative places the content block using the coordinates entered in the Placement boxes relative to block’s position
in the text flow of the document. For example, giving an element a relative position and top and left coordinates
of 20px each will shift the element 20px to the right and 20px down from its normal position in the flow. Elements
can also be positioned relatively, with or without top, left, right, or bottom coordinates, to establish a context for
absolutely-positioned children.

• Fixed places the content using the coordinates entered in the Placement boxes, relative to the top left corner of the
browser. The content will remain fixed in this position as the user scrolls the page.

• Static places the content at its location in the text flow. This is the default position of all positionable HTML
elements.
Visibility Determines the initial display condition of the content. If you do not specify a visibility property, by default

the content inherits the parent tag’s value. The default visibility of the body tag is visible. Select one of the following
visibility options:

• Inherit (default) inherits the visibility property of the content’s parent.
• Visible displays the content, regardless of the parent’s value.
• Hidden hides the content, regardless of the parent’s value.
Z-Index Determines the stacking order of the content. Elements with a higher z-index appear above elements with
a lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier
to change the stacking order using the AP Elements panel.
Overflow Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. These
properties control the expansion as follows:

• Visible increases the container’s size so that all of its contents are visible. The container expands down and to the
right.

• Hidden maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.
• Scroll adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically
providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic
environment. This option is not displayed in the Document window.

• Auto makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not
displayed in the Document window.
Placement Specifies the location and size of the content block. How the browser interprets the location depends on
the setting for Type. Size values are overridden if the content of the content block exceeds the specified size.

The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in
(inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations
must follow the value without a space: for example, 3mm.
Clip Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting

language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be
set up by using the Change Property behavior.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style extension properties

Extensions style properties include filters, page break, and pointer options.

September 4, 2007

DREAMWEAVER CS3 135
User Guide

Note: There are a number of other extension properties available in Dreamweaver, but to access them, you need to go
through the CSS Styles panel. You can easily see a list of extension properties available by opening the CSS Styles panel
(Windows > CSS Styles), clicking the Show Category View button at the bottom of the panel, and expanding the Extensions category.
1 Open the CSS Styles panel (Shift + F11), if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Pagebreak Forces a page break during printing either before or after the object controlled by the style. Select the
option you want to set in the pop-up menu. This option is not supported by any 4.0 browser, but support may be
provided by future browsers.
Cursor Changes the pointer image when the pointer is over the object controlled by the style. Select the option you

want to set in the pop-up menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.
Filter Applies special effects to the object controlled by the style, including blur and inversion. Select an effect from

the pop-up menu.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.

Edit a CSS rule
You can easily edit both internal and external rules that you have applied to a document.
When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text
controlled by that CSS style sheet. Edits to an external style sheet affect all the documents linked to it.
You can set an external editor to use for editing style sheets.
Edit a rule in the CSS Styles panel (Current mode)
1 Open the CSS Styles panel by selecting Window > CSS Styles.
2 Click the Current button at the top of the CSS Styles panel.
3 Select a text element in the current page to display its properties.
4 Do one of the following:

• Double-click a property in the Summary for Selection pane to display the CSS Rule Definition dialog box, and
then make your changes.

• Select a property in the Summary for Selection pane, and then edit the property in the Properties pane below.
• Select a rule in the Rules pane, and then edit the rule’s properties in the Properties pane below.
Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver
preferences.
Edit a rule in the CSS Styles panel (All mode)
1 Open the CSS Styles panel by selecting Window > CSS Styles.
2 Click the All button at the top of the CSS Styles panel.

September 4, 2007

DREAMWEAVER CS3 136
User Guide

3 Do one of the following:

• Double-click a rule in the All Rules pane to display the CSS Rule Definition dialog box, and then make your
changes.

• Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below.
• Select a rule in the All Rules pane, and then click the Edit Style button in the lower-right corner of the CSS Styles
panel.
Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver
preferences.
Change the name of a CSS selector
1 In the CSS Styles panel (All mode) select the selector you want to change.
2 Click the selector again to make the name editable.
3 Make your changes and press Enter (Windows) or Return (Macintosh).

Add a property to a rule
You can use the CSS Styles panel to add properties to rules.
1 In the CSS Styles panel (Window > CSS), select a rule in the All Rules pane (All mode), or select a property in the
Summary for Selection pane (Current mode).
2 Do one of the following:

• If Show Only Set Properties view is selected in the Properties pane, click the Add Properties link and add a
property.

• If Category view or List view is selected in the Properties pane, fill in a value for the property you want to add.

Apply, remove, or rename class styles
Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags
control the text. All class styles associated with the current document are displayed in the CSS Styles panel (with a
period [.] preceding their name) and in the Style pop-up menu of the text Property inspector.
You’ll see most styles updated immediately, however, you should preview your page in a browser to verify a style was
applied as expected. When you apply two or more styles to the same text, the styles may conflict and produce
unexpected results.
When previewing styles defined in an external CSS style sheet, be sure to save the style sheet to ensure that your
changes are reflected when you preview the page in a browser.

See also
“About Cascading Style Sheets” on page 120
“About cascading styles” on page 122
“About the CSS Styles panel” on page 124
Apply a CSS class style
1 In the document, select the text to which you want to apply a CSS style.

September 4, 2007

DREAMWEAVER CS3 137
User Guide

Place the insertion point in a paragraph to apply the style to the entire paragraph.
If you select a range of text within a single paragraph, the CSS style affects only the selected range.
To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the lower
left of the Document window.
2 To apply a class style, do one of the following:

• In the CSS Styles panel (Window > CSS Styles), select All mode, right-click the name of the style you want to apply,
and select Apply from the context menu.

• In the text Property inspector, select the class style you want to apply from the Style pop-up menu.
• In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in the
context menu, select CSS Styles and then select the style you want to apply.

• Select Text > CSS Styles, and in the submenu select the style you want to apply.
Remove a class style from a selection
1 Select the object or text you want to remove the style from.
2 In the text Property inspector (Window > Properties), select None from the Style pop-up menu.
Rename a class style
1 In the CSS styles panel, right-click the CSS class style you want to rename and select Rename Class.

You can also rename a class by selecting Rename Class from the CSS Styles panel options menu.
2 In the Rename Class dialog box, make sure that the class you want to rename is selected in the Rename Class
pop-up menu.
3 In the New Name text box, enter the new name for the new class and click OK.

If the class you’re renaming is internal to the head of the current document, Dreamweaver changes the class name as
well as all instances of the class name in the current document. If the class you’re renaming is in an external CSS file,
Dreamweaver opens and changes the class name in the file. Dreamweaver also launches a site-wide Find and Replace
dialog box so that you can search for all instances of the old class name in your site.

Move CSS rules
The CSS management features in Dreamweaver make it easy for you to move CSS rules to different locations. You
can move rules from document to document, from the head of a document to an external style sheet, between
external CSS files, and more.
Note: If the rule you’re trying to move conflicts with a rule in the destination style sheet, Dreamweaver displays the Rule
With Same Name Exists dialog box. If you elect to move the conflicting rule, Dreamweaver places the moved rule
immediately adjacent to the conflicting rule in the destination style sheet.

See also
“Insert code with the Coding toolbar” on page 316

September 4, 2007

DREAMWEAVER CS3 138
User Guide

Move CSS rules to a new style sheet
1 Do one of the following:

• In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move
CSS Rules from the context menu. To select multiple rules, Control-click (Windows) or Command-click
(Macintosh) the rules you want to select.

• In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles > Move
CSS Rules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.
2 In the Move To External Style Sheet dialog box, select the new style sheet option and click OK.
3 In the Save Style Sheet File As dialog box, enter a name for the new style sheet and click Save.

When you click Save, Dreamweaver saves a new style sheet with the rules you selected and attaches it to the current
document.
You can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.

Move CSS rules to an existing style sheet
1 Do one of the following:

• In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles > Move
CSS Rules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.
2 In the Move To External Style Sheet dialog box, select an existing style sheet from the pop-up menu or browse to
an existing style sheet and click OK.

Note: The pop-up menu displays all style sheets that are linked to the current document.
You can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.

Rearrange or move CSS rules by dragging
❖ In the CSS Styles panel (All mode), select a rule and drag it rule to the desired location. You can select and drag

to re-order rules within a style sheet, or move a rule to another style sheet or the document head.
You can move more than one rule at a time by Control-clicking (Windows) or Command-clicking (Macintosh)
multiple rules to select them.
Select multiple rules before moving them
❖ In the CSS Styles panel, Control-click (Windows) or Command-click (Macintosh) the rules you want to select.

Convert inline CSS to a CSS rule
In-line styles are not recommended best practices. To make your CSS cleaner and more organized, you can convert
inline styles to CSS rules that reside in the head of the document or in an external style sheet.
1 In Code view (View > Code), select the entire

September 4, 2007
DREAMWEAVER CS3 149
User Guide

Sidebar Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.

Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.

Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout
when you create a new document using the predesigned layouts that come with Dreamweaver.
See also
“Understanding Cascading Style Sheets” on page 120
Create a page with a CSS layout
When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver
comes with over 30 different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts
and add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, and
2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0.
See also
“Create a blank page” on page 69
“Set default document type and encoding” on page 74
“Link to an external CSS style sheet” on page 139
Create a page with a CSS layout
1 Select File > New.
2 In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3 For Page Type, select the kind of page you want to create.
Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, JSP, and so
on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page
with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including
CSS page layouts.
September 4, 2007
DREAMWEAVER CS3 150
User Guide
4 For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview
window shows the layout and gives a brief description of the selected layout.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts
if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site
visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid Columns are a combination of any of the previous three options. For example, the two-column hybrid, right
sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales
to the size of the site visitor’s text settings.
5 Select a document type from the DocType pop-up menu.
6 Select a location for the layout’s CSS from the Layout CSS in pop-up menu.
Add To Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page
you’re creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout.
This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained
in a single file) across multiple documents.
7 Do one of the following:
• If you selected Add to Head from the Layout CSS in pop-up menu (the default option), click Create.
• If you selected Create New File from the Layout CSS pop-up menu, click Create, and then specify a name for the
new external file in the Save Style Sheet File As dialog box.
• If you selected Link to Existing File from the Layout CSS in pop-up menu, add the external file to the Attach CSS
file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and
clicking OK. When you’re finished, click Create in the New Document dialog box.
Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file
contained within it.
When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the
HTML page you’re creating.
Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in
the head of the new CSS layout document, even if you select New External File or Existing External File as the location
for your layout CSS.
8 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create
the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.
Add custom CSS layouts to the list of choices
1 Create an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document
dialog box. The CSS for the layout must reside in the head of the HTML page.
September 4, 2007
DREAMWEAVER CS3 151
User Guide
To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save
your HTML file with the .htm extension.
2 Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder.
3 (Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver
CS3\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x
193 pixels high PNG files.
Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example,
if your HTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.
4 (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and
renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename
it myCustomLayout.htm.mno.
5 (Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout
name, description, and preview image.
About AP elements in Dreamweaver
An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—
that has an absolute position assigned to it. AP elements can contain text, images, or any other content that you can
place in the body of an HTML document.
With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind
each other, hide some AP elements while showing others, and move AP elements across the screen. You can place a
background image in one AP element, then place a second AP element, containing text with a transparent
background, in front of that.
AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts
by default. But remember, you can classify any HTML element (for example, an image) as an AP element by assigning
an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.
HTML code for AP Div elements
Dreamweaver creates AP elements using the div tag. When you draw an AP element using the Draw AP Div tool,
Dreamweaver inserts a div tag in the document and assigns the div an id value (by default apDiv1 for the first div
you draw, apDiv2 for the second div you draw, and so on). Later, you can rename the AP Div to anything you want
using the AP elements panel or the Property inspector. Dreamweaver also uses embedded CSS in the head of the
document to position the AP Div, and to assign the AP Div its exact dimensions.
The following is sample HTML code for an AP Div:
September 4, 2007
DREAMWEAVER CS3 152
User Guide

Sample AP Div Page

You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index
(also called the stacking order), and visibility.
Insert an AP Div
Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.
When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights
the block when you move the pointer over it. You can disable the visual aid that shows AP Div (or any AP element)
outlines by disabling both AP Element Outlines and CSS Layout Outlines in the View > Visual Aids menu. You can
also enable backgrounds and the box model for AP elements as a visual aid while you design.
After you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then
adding content just as you would add content to a page.
See also
“Select AP elements” on page 157
“Change the highlight color of div tags” on page 164
“Visualizing CSS layout blocks” on page 164
Draw a single AP Div or multiple AP Divs consecutively
1 In the Layout category of the Insert bar, click the Draw AP Div button
.
2 In the Document window’s Design view, do one of the following:
• Drag to draw a single AP Div.
• Control-drag (Windows) or Command-drag (Macintosh) to draw multiple AP Divs consecutively.
You can continue to draw new AP Divs as long as you do not release the Control or Command key.
September 4, 2007
DREAMWEAVER CS3 153
User Guide
Insert an AP Div at a particular place in the document
❖ Place the insertion point in the Document window, and then select Insert > Layout Objects > AP Div.
Note: This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering
of the AP Div may thus affect other page elements (like text) that surround it.
Place the insertion point in an AP Div
❖ Click anywhere inside the AP Div’s borders.
The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.
Show AP Div borders
❖ Select View > Visual Aids and select either AP Div Outlines or CSS Layout Outlines.
Note: Selecting both options simultaneously has the same effect.
Hide AP Div borders
❖ Select View > Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.
Work with nested AP Divs
A nested AP Div is an AP Div that has code contained within the tags of another AP Div. For example, the following
code shows two AP Divs that are not nested, and two AP Divs that are nested:

The graphical depiction for either set of AP Divs might look as follows:
In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually
inside of the apDiv3 div. (You can change AP Div stacking order in the AP Elements panel.)
Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to
inherit visibility from its parent.
You can enable the Nesting option to automatically nest when you draw an AP Div starting inside another AP Div.
To draw inside or over another AP Div, you must also have the Prevent overlaps option deselected.
Draw a nested AP Div
1 Make sure Prevent overlaps is deselected in the AP Elements panel (Window > AP Elements).
September 4, 2007
DREAMWEAVER CS3 154
User Guide
2 In the Layout category of the Insert bar, click the Draw AP Div button
.
3 In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div.
If Nesting is disabled in AP Elements preferences, Alt-drag (Windows) or Option-drag (Macintosh) to nest an AP
Div inside an existing AP Div.
Nested AP Divs may appear differently in different browsers. When you create nested AP Divs, check their
appearance in various browsers frequently during the design process.
Insert a nested AP Div
1 Make sure Prevent overlaps is deselected.
2 Place the insertion point inside an existing AP Div in the Document window’s Design view, then select Insert >
Layout Objects > AP Div.
Nest an existing AP element inside another using the AP Elements panel
1 Select Window > AP Elements to open the AP Elements panel.
2 Select an AP element in the AP Elements panel, then Control-drag (Windows) or Command-drag (Macintosh)
the AP element to the target AP element in the AP Elements panel.
3 Release the mouse button when the name of the target AP element is highlighted.
Nest AP Divs automatically when you draw an AP Div inside another AP Div
❖ Select the Nesting option in the AP Elements preferences.
View or set AP element preferences
Use the AP Elements category in the Preferences dialog box to specify the default settings for new AP elements you
create.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select AP elements from the Category list on the left and specify any of the following preferences, and then click OK.
Visibility Determines whether AP elements are visible by default. The options are default, inherit, visible, and
hidden.
Width and Height Specify a default width and height (in pixels) for AP elements you create using Insert > Layout
Objects > AP Div.
Background Color Specifies a default background color. Select a color from the color picker.
Background Image Specifies a default background image. Click Browse to locate the image file on your computer.
Nesting: Nest When Created Within An AP Div Specifies whether an AP Div that you draw starting from a point
within the boundaries of an existing AP Div should be a nested AP Div. Hold down Alt (Windows) or Option
(Macintosh) to temporarily change this setting while you’re drawing an AP Div.
Netscape 4 Compatibility: Add Resize Fix When Inserting AP Element Inserts JavaScript code in the head content of
the document to fix a known problem in Netscape 4 browsers that causes AP elements to lose their positioning
coordinates when a visitor resizes a browser window.
The JavaScript forces the page to reload each time the browser window is resized, re-assigning the AP elements to
the correct position. You can also add or remove the JavaScript code manually, by selecting Commands >
Add/Remove Netscape Resize Fix.
September 4, 2007
DREAMWEAVER CS3 155
User Guide
View or set properties for a single AP element
When you select an AP element, the Property inspector displays AP element properties.
1 Select an AP element.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t
already expanded, to see all properties.
3 Set any of the following options:
CSS-P Element Specifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements
panel and in JavaScript code.
Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or
periods. Every AP element must have its own unique ID.
Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.
L and T (left and top) Specify the position of the AP element’s upper-left corner relative to the upper-left corner of
the page, or of the parent AP element if nested.
W and H Specify the width and height of the AP element.
Note: If the content of the AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the
Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP
element appears in a browser, unless the Overflow property is set to Visible.)
The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points),
in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value).
The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.
Z-Index Determines the z-index, or stacking order, of the AP element.
In a browser, higher-numbered AP elements appear in front of lower-numbered AP elements. Values can be positive
or negative. It’s easier to change the stacking order of AP elements using the AP Elements panel than to enter specific
z-index values.
Vis Specifies whether the AP element is initially visible or not. Select from the following options:
• Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
• Inherit uses the visibility property of the AP element’s parent.
• Visible displays the AP element contents, regardless of the parent’s value.
• Hidden hides the AP element contents, regardless of the parent’s value.
Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element
contents.
Bg Image Specifies a background image for the AP element.
Click the folder icon to browse to and select an image file.
September 4, 2007
DREAMWEAVER CS3 156
User Guide
Bg Color Specifies a background color for the AP element.
Leave this option blank to specify a transparent background.
Class Specifies the CSS class used to style the AP element.
Overflow Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size.
Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should
add scroll bars to the AP element whether they’re needed or not. Auto causes the browser to display scroll bars for
the AP element only when needed (that is, when the AP element’s contents exceed its boundaries.)
Note: The overflow option has uneven support across browsers.
Clip Defines the visible area of an AP element.
Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the AP element
(counting from the upper-left corner of the AP element). The AP element is “clipped” so that only the specified
rectangle is visible. For example, to make an AP element’s contents invisible except for a 50-pixel-wide, 75-pixel-high
visible rectangle at the upper-left corner of the AP element, set L to 0, T to 0, R to 50, and B to 75.
Note: Although CSS specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.
4 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
View or set properties for multiple AP elements
When you select two or more AP elements, the Property inspector displays text properties and a subset of the full
AP element properties, allowing you to modify several AP elements at once.
Select multiple AP elements
❖ Hold down Shift while selecting AP elements.
View and set properties for multiple AP elements
1 Select multiple AP elements.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t
already expanded, to see all properties.
3 Set any of the following properties for multiple AP elements:
L and T (left and top) Specify the position of the AP elements’ upper-left corners relative to the upper-left corner of
the page, or of the parent AP element if nested.
W and H Specify the width and height of the AP elements.
Note: If the content of any AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the
Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP
element appears in a browser, unless the Overflow property is set to Visible.)
September 4, 2007
DREAMWEAVER CS3 157
User Guide
The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points),
in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s corresponding value).
The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.
Vis Specifies whether the AP elements are initially visible or not. Select from the following options:
• Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
• Inherit uses the visibility property of the AP elements’ parent.
• Visible displays the AP elements’ contents, regardless of the parent’s value.
• Hidden hides the AP element contents, regardless of the parent’s value.
Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element
contents.
Tag Specifies the HTML tag used to define the AP elements.
Bg Image Specifies a background image for the AP elements.
Click the folder icon to browse to and select an image file.
Bg Color Specifies a background color for the AP elements. Leave this option blank to specify a transparent
background.
4 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
AP Elements panel overview
You use the AP Elements panel (Window > AP Elements) to manage the AP elements in your document. Use the AP
Elements panel to prevent overlaps, to change the visibility of AP elements, to nest or stack AP elements, and to select
one or more AP elements.
Note: An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an
absolute position assigned to it. The AP Elements panel does not display relatively-positioned elements.
AP elements are displayed as a list of names, in order of z-index; by default, the first created AP element (with a
z-index of 1) appears at the bottom of the list, and the most recently created AP element appears at the top. You can,
however, change the z-index of an AP element by changing its place in the stacking order. For example, if you created
eight AP elements and wanted to move the fourth AP element to the top, you could assign it a higher z-index than
the others.
Select AP elements
You can select one or more AP elements to manipulate them or change their properties.
Select an AP element in the AP elements panel
❖ In the AP elements panel (Window > AP elements), click the name of the AP element.
Select an AP element in the Document window
❖ Do one of the following:
• Click an AP element’s selection handle.
If the selection handle isn’t visible, click anywhere inside the AP element to make the handle visible.
• Click an AP element’s border.
September 4, 2007
DREAMWEAVER CS3 158
User Guide
• Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element.
• Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents
of the AP element. Press Control+A or Command+A again to select the AP element.
• Click inside an AP element and select its tag in the tag selector.
Select multiple AP elements
❖ Do one of the following:
• In the AP Elements panel (Window > AP Elements), Shift-click two or more AP element names.
• In the Document window, Shift-click inside or on the border of two or more AP elements.
Change the stacking order of AP elements
Use the Property inspector or the AP Elements panel to change the stacking order of AP elements. The AP element
at the top of the AP Elements panel list is at the top of the stacking order, and appears in front of the other AP
elements.
In HTML code, the stacking order, or z-index, of the AP elements determines the order in which they are drawn in
a browser. The higher the z-index of an AP element, the higher that AP element is in the stacking order. You can
change the z-index for each AP element using the AP Elements panel or Property inspector.
Change the stacking order of AP elements using the AP Elements panel
1 Select Window > AP Elements to open the AP Elements panel.
2 Drag an AP element up or down to the desired stacking order.
A line appears as you move the AP element, indicating where the AP element will appear. Release the mouse button
when the placement line appears in the desired place in the stacking order.
Change the stacking order of AP elements using the Property inspector
1 Select Window > AP Elements to open the AP Elements panel to see the current stacking order.
2 Select an AP element in the AP Elements panel or in the Document window.
3 In the Property inspector (Window > Properties), type a number in the Z-Index text box.
• Type a higher number to move the AP element up in the stacking order.
• Type a lower number to move the AP element down in the stacking order.
Show and hide AP elements
While working on your document, you can show and hide AP elements manually, using the AP Elements panel, to
see how the page will appear under different conditions.
Note: The currently selected AP element always becomes visible and appears in front of other AP elements while it’s
selected.
Change AP element visibility
1 Select Window > AP Elements to open the AP Elements panel.
2 Click in the eye icon column for an AP element to change its visibility.
• An open eye means the AP element is visible.
September 4, 2007
DREAMWEAVER CS3 159
User Guide
• A closed eye means the AP element is invisible.
• If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not nested,
the parent is the document body, which is always visible.)
Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default
visibility).
Change the visibility of all AP elements at once
❖ In the AP Elements panel (Window > AP Elements), click the header eye icon at the top of the column.
Note: This procedure can set all AP elements to visible or hidden, but not to inherit.
Resize AP elements
You can resize an individual AP element, or simultaneously resize multiple AP elements to make them the same
width and height.
If the Prevent Overlaps option is on, you will not be able to resize an AP element so that it overlaps with another AP
element.
See also
“Use the layout grid” on page 175
Resize an AP element
1 In Design view, select an AP element.
2 Do one of the following to resize the AP element:
• To resize by dragging, drag any of the AP element’s resize handles.
• To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.
The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left borders
with this technique.
• To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while
pressing an arrow key.
• In the Property inspector (Window > Properties), type values for width (W) and height (H).
Resizing an AP element changes the width and height of the AP element. It does not define how much of the AP
element’s content is visible. You can define the visible region within an AP element in preferences.
Resize multiple AP elements at once
1 In the Design view, select two or more AP elements.
2 Do one of the following:
• Select Modify > Arrange > Make Same Width Or Modify > Arrange > Make Same Height.
The first selected AP elements conform to the width or height of the last selected AP element.
• In the Property inspector (Window > Properties), under Multiple CSS-P Element, enter width and height values.
The values are applied to all selected AP elements.
September 4, 2007
DREAMWEAVER CS3 160
User Guide
Move AP elements
You can move AP elements in the Design view in much the same way that you move objects in most basic graphics
applications.
If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP
element.
1 In the Design view, select an AP element or multiple AP elements.
2 Do one of the following:
• To move by dragging, drag the selection handle of the last selected AP element (highlighted in black).
• To move one pixel at a time, use the arrow keys.
Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping
increment.
See also
“Use the layout grid” on page 175
Align AP elements
Use the AP element alignment commands to align one or more AP elements with a border of the last AP element
selected.
When you align AP elements, child AP elements that aren’t selected may move because their parent AP element is
selected and moved. To prevent this, don’t use nested AP elements.
1 In the Design view, select the AP element.
2 Select Modify > Arrange, and then select an alignment option.
For example, if you select Top, all of the AP elements move so that their top borders are in the same vertical position
as the top border of the last selected AP element (highlighted in black).
Converting AP elements to tables
Instead of using tables or Layout mode to create your layout, some web designers prefer to work with AP elements.
Dreamweaver enables you to create your layout using AP elements, then (if you want) convert them into tables. For
example, you might need to convert your AP elements to tables if you need to support browsers before version 4.0.
Converting AP elements to tables, however, is highly discouraged because it can result in tables with a large number
of empty cells, not to mention bloated code. If you need a page layout that uses tables, it is best to create that page
layout using the standard table layout tools available in Dreamweaver.
You can convert back and forth between AP elements and tables to adjust the layout and optimize page design.
(When you convert a table back to AP elements, however, Dreamweaver converts the table back to AP Divs,
regardless of the type of AP element you might have had on the page before the conversion to tables.) You cannot
convert a specific table or AP element on a page; you must convert AP elements to tables and tables to AP Divs for
an entire page.
Note: You can’t convert AP elements to tables or tables to AP Divs in a template document or in a document to which a
template has been applied. Instead, create your layout in a non-template document and convert it before saving it as a
template.
September 4, 2007
DREAMWEAVER CS3 161
User Guide
Convert between AP elements and tables
You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be
viewed in older browsers.
Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View
> Table Mode > Standard Mode).
Convert AP elements to a table
1 Select Modify > Convert > AP Divs To Table.
2 Specify any of the following options and click OK:
Most Accurate Creates a cell for every AP element, plus any additional cells that are necessary to preserve the space
between AP elements.
Smallest: Collapse Empty Cells Specifies that the AP elements’ edges should be aligned if they are positioned within
the specified number of pixels.
If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout
precisely.
Use Transparent GIFs Fills the table’s last row with transparent GIFs. This ensures that the table is displayed with the
same column widths in all browsers.
When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is
disabled, the resulting table will not contain transparent GIFs, but the widths of the columns may vary from browser
to browser.
Center On Page Centers the resulting table on the page. If this option is disabled, the table starts at the left edge of
the page.
Convert tables to AP Divs
1 Select Modify > Convert > Tables to AP Divs.
2 Specify any of the following options and click OK:
Prevent AP Element Overlaps Constrains the positions of AP elements when they are created, moved, and resized so
that they don’t overlap.
Show AP Elements Panel Displays the AP elements panel.
Show Grid and Snap To Grid Let you use a grid to help position AP elements.
The tables are converted to AP Divs. Empty cells are not converted to AP elements unless they have background
colors.
Note: Page elements that were outside of tables are also placed in AP Divs.
Prevent AP element overlaps
Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to
convert the AP elements in a document to tables, use the Prevent Overlap option to constrain AP element movement
and positioning so that AP elements don’t overlap.
September 4, 2007
DREAMWEAVER CS3 162
User Guide
When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing
AP element. If you activate this option after creating overlapping AP elements, drag each overlapping AP element to
move it away from other AP elements. Dreamweaver does not automatically fix existing overlapping AP elements in
the page when you enable Prevent AP element Overlaps.
When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements
to overlap. Instead, it will snap to the edge of the closest AP element.
Note: Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert
an AP element using the Insert menu, enter numbers in the Property inspector, or reposition AP elements by editing the
HTML source code, you can cause AP elements to overlap or nest while this option is enabled. If overlaps happen, drag
overlapping AP elements in the Design view to separate them.
• In the AP Elements panel (Window > AP Elements), select the Prevent Overlaps option.
• In the Document window, select Modify > Arrange > Prevent AP Element Overlaps.
Working with div tags
About working with div tags
You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag
is a tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of
content, create column effects, create different areas of color, and much more.
If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout
based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS,
but are familiar with using tables, you can also try using tables.
Note: Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even
if you didn’t create those div tags using the AP Div drawing tool.
See also
“About AP elements in Dreamweaver” on page 151
“Create a page with a CSS layout” on page 149
“Presenting content with tables” on page 176
Insert div tags
You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an
existing CSS style sheet with positioning styles attached to your document. Dreamweaver enables you to quickly
insert a div tag and apply existing styles to it.
1 In the Document window, place the insertion point where you want the div tag to appear.
2 Do one of the following:
• Select Insert > Layout Objects > Div Tag.
• In the Layout category of the Insert bar, click the Insert Div Tag button
September 4, 2007
.
DREAMWEAVER CS3 163
User Guide
3 Set any of the following options:
Insert Lets you select the location of the div tag (either at the insertion point, before or after the tag, or before or
after the start of the tag) and the tag name if it is not a new tag.
Class Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style
sheet appear in the list. Use this pop-up menu to do any of the following:
• Select the style you want to apply to the tag.
• Select None to remove the currently selected style.
• Select Attach Style Sheet to open a dialog box that lets you attach an external style sheet.
Div ID Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style
sheet appear in the list. IDs for blocks that are already in your document are not listed.
Note: Dreamweaver alerts you if you enter the same ID as another tag in your document.
Edit CSS Opens the CSS Styles panel.
4 Click OK.
The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of
the box, Dreamweaver highlights it.
If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely
positioned.)
See also
“About AP elements in Dreamweaver” on page 151
“Create a page with a CSS layout” on page 149
Edit div tags
After you insert a div tag, you can manipulate it or add content to it.
Note: Div tags that are absolutely positioned become AP elements.
When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS
Layout Outlines is selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag,
Dreamweaver highlights the tag. You can change the highlight color or disable highlighting.
When you select a div tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the
div tag by simply placing your insertion point inside the div tag, and then adding content just as you would add
content to a page.
See also
“About AP elements in Dreamweaver” on page 151
“Open the CSS Styles panel” on page 128
View and edit rules applied to a div tag
1 Do one of the following to select the div tag:
• Click the border of the div tag.
September 4, 2007
DREAMWEAVER CS3 164
User Guide
Look for the highlighting to see the border.
• Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
• Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.
2 Select Window > CSS Styles to open the CSS Styles panel if it is not already open.
Rules applied to the div tag appear in the panel.
3 Make edits as necessary.
Place the insertion point in a div tag to add content
❖ Click anywhere inside the tag’s borders.
Change the placeholder text in a div tag
❖ Select the text, and then type over it or press Delete.
Note: You can add content to the div tag just as you would add content to a page.
Change the highlight color of div tags
When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the
tag. You can enable or disable highlighting as necessary, or change the highlight color in the Preferences dialog box.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Highlighting from the category list on the left.
3 Make either of the following changes and click OK:
• To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color
using the color picker (or enter the hexadecimal value for the highlight color in the text box).
• To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.
Note: These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.
Visualizing CSS layout blocks
You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element
that you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without
display:inline, or any other page element that includes the display:block, position:absolute, or
position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout
blocks in Dreamweaver:
• A div tag
• An image with an absolute or relative position assigned to it
• An a tag with the display:block style assigned to it
• A paragraph with an absolute or relative position assigned to it
Note: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code
falls within a line of text), or simple block elements like paragraphs.
September 4, 2007
DREAMWEAVER CS3 165
User Guide
Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines,
backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display
properties for a selected CSS layout block when you float the mouse pointer over the layout block.
The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:
CSS Layout Outlines Displays the outlines of all CSS layout blocks on the page.
CSS Layout Backgrounds Displays temporarily assigned background colors for individual CSS layout blocks, and
hides any other background colors or images that normally appear on the page.
Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each
CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there
is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help
you differentiate between CSS layout blocks.
CSS Layout Box Model Displays the box model (that is, padding and margins) of the selected CSS layout block.
View CSS layout blocks
You can enable or disable CSS layout block visual aids as necessary.
View CSS layout block outlines
❖ Select View > Visual Aids > CSS Layout Outlines.
View CSS layout block backgrounds
❖ Select View > Visual Aids > CSS Layout Backgrounds.
View CSS layout block box models
❖ Select View > Visual Aids > CSS Layout Box Model.
You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.
Use visual aids with non-CSS layout block elements
You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t
normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the
display:block attribute to the appropriate page element.
1 Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting
CSS in the Basic page column, and clicking Create.
2 In the new style sheet, create rules that assign the display:block attribute to the page elements you want to
display as CSS layout blocks.
For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet
with the following rules:
p{
display:block;
}
li{
display:block;
}
3 Save the file.
September 4, 2007
DREAMWEAVER CS3 166
User Guide
4 In Design view, open the page to which you want to attach the new styles.
5 Select Text > CSS Styles > Design-time.
6 In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box,
select the style sheet you just created, and click OK.
7 Click OK to close the Design-time Style Sheets dialog box.
The style sheet is attached to your document. If you had created a style sheet using the previous example, all
paragraphs and list items would be formatted with the display:block attribute, thereby allowing you to enable or
disable CSS layout block visual aids for paragraphs and list items.
See also
“Use Design-Time style sheets” on page 143
Animating AP elements
About animating AP elements
Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to
change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to
change the properties of AP elements and images over time. Use timelines to create animations that do not require
any ActiveX controls, plug-ins, or Java applets (but do require JavaScript).
Note: The word “dynamic” can mean different things in different web-related contexts. Don’t confuse Dynamic HTML
with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being
served to a visitor.
Timelines allow you to change the position, size, visibility, and stacking order of an AP element. (The AP element
functions of timelines work only in 4.0 or later browsers.) Timelines are also useful for other actions that you want
to occur after a page loads. For example, timelines can change the source file of an image tag so different images
appear in the page over time.
To see the JavaScript code generated by a timeline, open the Document window’s Code view. The timeline code is in
the MM_initTimelines() function, inside a script tag in the head section of the document.
When editing the HTML of a document containing timelines, make sure you do not move, rename, or delete
anything that a timeline refers to.
See also
“About AP elements in Dreamweaver” on page 151
Timelines panel overview
The Timelines panel shows how the properties of AP elements and images change over time. Select Window >
Timelines to open the Timelines panel.
September 4, 2007
DREAMWEAVER CS3 167
User Guide
A
B
C
D
E
F
G
A. Keyframes B. Timelines pop-up menu C. Frame numbers D. Behaviors channel E. Animation channel F. Animation bars G. Playback
head
Keyframes Define frames in a bar where you have specified properties (such as position) for the object.
Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes.
Behaviors channel Shows the behaviors that should be executed at a particular frame in the timeline.
Timelines pop-up menu Specifies which of the document’s timelines is currently displayed in the Timelines panel.
Animation channel Displays bars for animating AP elements and images.
Animation bars Show the duration of each object’s animation. A single row can include multiple bars representing
different objects. Different bars cannot control the same object in the same frame.
Playback head Shows which frame of the timeline is currently displayed in the Document window.
Frame numbers Indicate the sequential numbering of frames. The number between the Back and Play buttons is the
current frame number. You control the duration of animation by setting the total number of frames and the number
of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers
running on common Windows and Macintosh systems.
Note: Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot
attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.
Context menu Contains various timeline-related commands.
Playback options
The following are the playback options for viewing the animation.
Rewind Moves the playback head to the first frame in the timeline.
Back Moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline
backward.
Play Moves the playback head one frame to the right. Click Play and hold down the mouse button to play the
timeline forward.
Autoplay Makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches
a behavior to the page’s body tag that executes the Play Timeline action when the page loads.
Loop Makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to
Timeline Frame behavior in the Behaviors channel after the last frame of the animation. Double-click the behavior’s
marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.
September 4, 2007
DREAMWEAVER CS3 168
User Guide
Animate an AP element using the timeline
The most common kind of timeline animation involves moving an AP element along a path. Timelines can move
only AP elements. To make images or text move, create an AP element using the Draw AP Div button on the Insert
bar and then insert images, text, or any other type of content in the AP Div.
Timelines can also change other properties of AP elements and images.
1 Move the AP element to where it should be when the animation begins.
2 Select Window > Timelines.
3 Select the AP element you want to animate.
Make sure you have selected the desired element. Click the AP element marker or the AP element selection handle,
or use the AP Elements panel to select an AP element. When an AP element is selected, handles appear around it as
shown in the following illustration.
A
B
A. Click the AP element selection handle to select the AP element B. Selected AP element with image inside
Clicking inside the AP element places a blinking insertion point inside the AP element, but it does not select the AP
element.
4 Select Modify > Timeline > Add Object To Timeline or simply drag the selected AP element into the Timelines
panel.
A bar appears in the first channel of the timeline. The name of the AP element appears in the bar.
5 Click the keyframe marker at the end of the bar.
6 Move the AP element on the page to where it should be at the end of the animation.
A line appears showing the path of the animation in the Document window.
7 If you want the AP element to move in a curve, select its animation bar and Control-click (Windows) or
Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a
frame in the middle of the animation bar and select Add Keyframe from the context menu.
Repeat this step to define additional keyframes.
8 Hold down the Play button to preview the animation on the page.
Repeat the procedure to add additional AP elements and images to the timeline and to create a more complex
animation.
See also
“Insert an AP Div” on page 152
“Resize AP elements” on page 159
Create a timeline by dragging a path
If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the
AP element rather than creating individual keyframes.
1 Select an AP element.
September 4, 2007
DREAMWEAVER CS3 169
User Guide
2 Move the AP element to where it should be when animation begins.
Make sure you have selected the AP element; if the insertion point is in the AP element, the AP element is not
selected. To select an AP element, click the AP element marker or the AP element selection handle, or use the AP
Elements panel.
3 Select Modify > Timeline > Record Path Of AP element.
4 Drag the AP element around the page to create a path.
5 Release the AP element at the point where the animation should stop.
Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.
6 In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.
See also
“Resize AP elements” on page 159
Modify a timeline
After defining a timeline’s basic components, you can make changes such as adding and removing frames, changing
the start time of the animation, and so on.
• To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation
shift so that their relative positions remain constant. To prevent the other keyframes from moving, Control-drag
the end frame marker.
• To make the AP element reach a keyframe position earlier or later, move the keyframe marker left or right in the bar.
• To change the start time of an animation, select one or more of the bars associated with the animation (press Shift
to select more than one bar at a time) and drag left or right.
• To shift the location of an entire animation path, select the entire bar and then drag the object on the page.
Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes
all the keyframes.
• To add or remove frames in the timeline, select Modify > Timeline > Add Frame, or Modify > Timeline > Remove
Frame.
• To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a
behavior to the page that executes the Play Timeline action when the page loads.
• To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the
Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the
number of loops.
Change image and AP element properties with timelines
In addition to moving AP elements with timelines, you can change the visibility, size, and stacking order of an AP
element; you can also change the source file of an image.
1 In the Timelines panel, do one of the following:
• Select an existing keyframe in the bar controlling the object you want to change. (The start and end frames are
always keyframes.)
September 4, 2007
DREAMWEAVER CS3 170
User Guide
• Create a new keyframe by clicking a frame in the middle of the animation bar and choosing Modify > Timeline >
Add Keyframe. You can instead create a new keyframe by Control-clicking (Windows) or Command-clicking
(Macintosh) a frame in the animation bar.
2 Define new properties for the object by doing one of the following:
• To change the source file of an image, click the folder icon next to the Src text box in the Property inspector, then
browse to and select a new image.
• To change the visibility of an AP element, select inherit, visible, or hidden from the pop-up menu in the Vis text
box of the Property inspector. Alternatively, use the eye icons in the AP Elements panel.
• To change the size of an AP element, drag the AP element’s resize handles or enter new values in the Width and
Height text boxes in the Property inspector. Not all browsers can dynamically change the size of an AP element.
• To change the stacking order of an AP element, enter a new value in the Z-Index text box or use the AP Elements
panel to change the stacking order of the current AP element.
3 Hold down the Play button to see the animation.
See also
“Show and hide AP elements” on page 158
“Change the stacking order of AP elements” on page 158
Use multiple timelines
Instead of trying to control all the action on a page with one timeline, it’s easier to work with separate timelines that
control discrete parts of the page. For example, a page might include interactive elements that each trigger a different
timeline.
• To create a new timeline, select Modify > Timeline > Add Timeline.
• To remove the selected timeline, select Modify > Timeline > Remove Timeline. This permanently removes all
animations from the selected timeline.
• To rename the selected timeline, select Modify > Timeline > Rename Timeline or enter a new name in the
Timeline pop-up menu in the Timelines panel.
• To view a different timeline in the Timelines panel, select a new timeline from the Timeline pop-up menu in the
Timelines panel.
Copy and paste animations
Once you have an animation sequence that you like, you can copy it and paste it into another area of the current
timeline, into another timeline in the same document, or into a timeline in another document. You can also copy
and paste multiple sequences at once.
1 Click an animation bar to select a sequence. To select multiple sequences, Shift-click multiple animation bars; to
select all sequences, press Control+A (Windows) or Command+A (Macintosh).
2 Copy or cut the selection.
3 Do one of the following:
• Move the playback head to another spot in the current timeline.
• Select another timeline from the Timeline pop-up menu.
September 4, 2007
DREAMWEAVER CS3 171
User Guide
• Open another document, or create a new one, and then click in the Timelines panel.
4 Paste the selection into the timeline.
Animation bars for the same object cannot overlap, because an AP element cannot be in two places at one time (nor
can an image have two different sources at a time). If the animation bar you are pasting would overlap another
animation bar for the same object, Dreamweaver automatically shifts the selection to the first frame that doesn’t
overlap.
There are two principles to keep in mind when pasting animation sequences into another document:
• If you copy an animation sequence for an AP element and the new document contains an AP element with
the same name, Dreamweaver applies the animation properties to the existing AP element in the new document.
• If you copy an animation sequence for an AP element and the new document does not contain an AP element with
the same name, Dreamweaver pastes the AP element and its contents from the original document along with the
animation sequence. To apply the pasted animation sequence to another AP element in the new document, select
Change Object from the context menu and select the name of the second AP element from the pop-up menu.
Delete the pasted AP element if desired.
Apply an animation sequence to a different object
To save time, you can create an animation sequence once and apply it to each of the remaining AP elements in your
document.
1 In the Timelines panel, click the animation sequence to select it.
2 Select Edit > Copy to copy the sequence.
3 Click any frame of the Timelines panel and paste the sequence (Edit > Paste) at that frame.
4 Right-click (Windows) or Control-click (Macintosh) the pasted animation sequence and select Change Object
from the context menu.
5 In the dialog box that appears, select another object from the pop-up menu and click OK.
6 Repeat steps 2 through 4 for any remaining objects that you want to follow the same animation sequence.
You can also change which AP element should be animated after creating an animation sequence; simply follow steps
3 and 4 above (no copying or pasting is necessary).
Rename the timeline
1 Select Modify > Timeline > Rename Timeline.
2 Enter a new name.
If your document contains the Play Timeline behavior action (for example, if it contains a button that the visitor must
click to start the timeline), you must edit the behavior to reflect the new timeline name.
Animation tips for timelines
The following suggestions can improve the performance of your animations and make creating animations easier:
• Show and hide AP elements instead of changing the source file for multiple-image animations. Switching the
source file of an image can slow down the animation, because the new image must be downloaded. There will be
no noticeable pauses or missing images if all images are downloaded at once in hidden AP elements before the
animation runs.
September 4, 2007
DREAMWEAVER CS3 172
User Guide
• Extend animation bars to create smoother motion. If animation looks choppy and images jump between
positions, drag the end frame of the AP element’s animation bar to extend the motion over more frames. Making
the animation bar longer creates more data points between the start and end point of the movement and also
makes the object move more slowly. Try increasing the number of frames per second (fps) to improve speed, but
be aware that most browsers running on average systems cannot animate much faster than 15 fps. Test the
animation on different systems with different browsers to find the best settings.
• Don’t animate large bitmaps. Animating large images results in slow animations. Instead, create composites and
move small parts of the image. For example, show a car moving by animating only the wheels.
• Create simple animations. Do not create animations that demand more than current browsers can provide.
Browsers always play every frame in a timeline animation, even when system or Internet performance decreases.
September 4, 2007
173
Chapter 7: Laying out pages with HTML
Adobe® Dreamweaver® CS3 provides layout tools that let you create web pages using HTML tables or frames. The
application also includes rulers, guides, and a grid that let you lay out pages and position elements precisely.
Using visual aids for layout
Set rulers
Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page,
marked in pixels, inches, or centimeters.
• To toggle rulers on and off, select View > Rulers > Show.
• To change the origin, drag the ruler-origin icon (at the upper-left corner of the Design view of the Document
window) anywhere on the page.
• To reset the origin to its default position, select View > Rulers > Reset Origin.
• To change the unit of measure, select View > Rulers, and then select Pixels, Inches, or Centimeters.
Set layout guides
Guides are lines that you drag onto the document from the rulers. They help you place and align objects more
precisely. You can also use guides to measure the size of page elements, or emulate the folds (visible areas) of web
browsers.
To help you align elements, you can snap elements to guides, and snap guides to elements. (Elements must be
absolutely positioned in order for the snap feature to work.) You can also lock guides to prevent them from being
accidentally moved by another user.
Create a horizontal or vertical guide
1 Drag from the corresponding ruler.
2 Position the guide in the Document window and release the mouse button (reposition the guide by dragging it
again).
Note: By default, guides are recorded as absolute pixel measurements from the top or left side of the document, and are
shown relative to the origin of the ruler. To record the guide as a percentage, press the Shift key while you create or move
the guide.
Show or hide guides
❖ Select View > Guides > Show Guides.
Snap elements to guides
• To snap elements to guides, select View > Guides > Snap to Guides.
• To snap guides to elements, select View > Guides > Guides Snap to Elements.
September 4, 2007
DREAMWEAVER CS3 174
User Guide
Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized
elements snap to guides.
Lock or unlock all guides
❖ Select View > Guides > Lock Guides.
View and move a guide to a specific position
1 Hold the mouse pointer over the guide to view its position.
2 Double-click the guide.
3 Enter the new position in the Move Guide dialog box and click OK.
View the distance between guides
❖ Press Control (Windows) or Command (Macintosh) and hold the mouse pointer anywhere between the two
guides.
Note: The unit of measure is the same as the unit of measure used for the rulers.
Emulate the fold (visible area) of a web browser
❖ Select View > Guides, and then select a preset browser size from the menu.
Remove a guide
❖ Drag the guide off the document.
Change guide settings
❖ Select View > Guides > Edit Guides, set the following options, and click OK.
Guide color Specifies the color of the guide lines. Click the color swatch and select a color from the color picker, or
type a hexadecimal number in the text box.
Distance Color Specifies the color of the lines that appear as distance indicators when you hold the mouse pointer
between guides. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the
text box.
Show Guides Makes guides visible in Design view.
Snap to Guides Makes page elements snap to guides as you move elements around the page.
Lock Guides Locks guides in place.
Guides Snap to Elements Snaps guides to elements on the page as you drag guides.
Clear All Clears all guides from the page.
Using guides with templates
When guides are added to a Dreamweaver template, all instances of the template inherit the guides. Guides in
template instances, however, are treated as editable regions, so users can modify them. Modified guides in template
instances are restored to their original location whenever the instance is updated with the master template.
You can also add your own guides to instances of a template. Guides added in this manner are not overwritten when
the template instance is updated with the master template.
September 4, 2007
DREAMWEAVER CS3 175
User Guide
See also
“Align AP elements” on page 160
“Move AP elements” on page 160
Use the layout grid
The grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects
precisely. You can make absolutely-positioned page elements automatically snap to the grid as you move them, and
change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid
is visible.
See also
“Align AP elements” on page 160
“Move AP elements” on page 160
Show or hide the grid
❖ Select View > Grid > Show Grid.
Enable or disable snapping
❖ Select View > Grid > Snap to Grid.
Change grid settings
1 Select View > Grid > Grid Settings.
2 Set the options and click OK to apply the changes.
Color Specifies the color of the grid lines. Click the color swatch and select a color from the color picker, or type a
hexadecimal number in the text box.
Show Grid Makes the grid visible in Design view.
Snap to Grid Makes page elements snap to the lines of the grid.
Spacing Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.
Display Specifies whether the grid lines appear as lines or dots.
Note: If Show Grid is not selected, the grid does not appear in the document and no changes are visible.
Use a tracing image
You can use a tracing image as a guide to re-create a page design that was created in a graphics application such as
Adobe Freehand or Fireworks.
A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can
hide the image, set its opacity, and change its position.
The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the
tracing image is visible, the page’s real background image and color are not visible in the Document window;
however, the background image and color will be visible when the page is viewed in a browser.
September 4, 2007
DREAMWEAVER CS3 176
User Guide
Place a tracing image in the Document window
1 Do one of the following:
• Select View > Tracing Image > Load.
• Select Modify > Page Properties, then click Browse (next to the Tracing Image text box).
2 Select an image file, then click Select (Windows) or Choose (Macintosh).
3 Specify the transparency for the image by dragging the Image Transparency slider, then click OK.
To switch to another tracing image or change the transparency of the current tracing image at any time, select
Modify > Page Properties.
Show or hide the tracing image
❖ Select View > Tracing Image > Show.
Change the position of a tracing image
❖ Select View > Tracing Image > Adjust Position.
• To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
• To move the image 1 pixel at a time, use the arrow keys.
• To move the image 5 pixels at a time, press Shift and an arrow key.
Reset the position of the tracing image
❖ Select View > Tracing Image > Reset Position.
The tracing image returns to the upper-left corner of the Document window (0,0).
Align the tracing image to a selected element
1 Select an element in the Document window.
2 Select View > Tracing Image > Align with Selection.
The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.
Presenting content with tables
About tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table
consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly
specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.
Dreamweaver provides two ways to view and manipulate tables: Standard mode, in which tables are presented as a
grid of rows and columns, and Layout mode, which allows you to draw, resize, and move boxes on the page while
still using tables for the underlying structure.
Dreamweaver displays the table width and the column width for each table column when the table is selected or
when the insertion point is in the table. Next to the widths are arrows for the table header menu and the column
header menus. Use the menus for quick access to common table-related commands. You can enable or disable the
widths and menus.
September 4, 2007
DREAMWEAVER CS3 177
User Guide
If you do not see a width for the table or for a column, then that table or column does not have a specified width in
the HTML code. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width
specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when
you add content to a cell that’s larger than its set width.
For example, if you set a column’s width to 200 pixels and then add content that stretches the width to 250 pixels, two
numbers appear for that column: 200 (the width specified in the code) and (250) in parentheses (the visual width of
the column as it’s rendered on your screen).
Note: You can also lay out your pages using CSS positioning.
See also
“Laying out pages with CSS” on page 145
“Laying out pages in Layout mode” on page 191
Table formatting precedence in HTML
When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or
cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and
another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.
The order of precedence for table formatting is as follows:
1 Cells
2 Rows
3 Table
For example, if you set the background color for a single cell to blue, then set the background color of the entire table
to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each
cell in the column.
About splitting and merging table cells
You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to
produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns,
regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any
necessary colspan or rowspan attributes) to create the specified arrangement.
In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans
two rows.
September 4, 2007
DREAMWEAVER CS3 178
User Guide
Insert a table and add content
Use the Insert bar or the Insert menu to create a new table. Then, add text and images to table cells the same way that
you add text and images outside of a table.
1 In the Design view of the Document window, place the insertion point where you want the table to appear.
Note: If your document is blank, you can place the insertion point only at the beginning of the document.
• Select Insert > Table.
• In the Common category of the Insert bar, click Table.
2 Set the attributes of the Table dialog box and click OK to create the table.
Rows Determines the number of table rows.
Columns Determines the number of table columns.
Table Width Specifies the width of the table in pixels, or as a percentage of the browser window’s width.
Border Thickness Specifies the width, in pixels, of the table’s borders.
Cell Spacing Determines the number of pixels between adjacent table cells.
When you don’t explicitly assign values for border thickness or cell spacing and cell padding, most browsers display
the table border thickness and cell padding set to 1 and cell spacing were set to 2. To ensure that browsers display the
table with no border, padding or spacing, set Cell Padding and Cell Spacing to 0.
Cell Padding Determines the number of pixels between a cell’s border and its contents.
None Does not enable column or row headings for the table.
Left Makes the first column of the table a column for headings, so that you can enter a heading for each row of the
table.
Top Makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.
Both Enables you to enter column and row headings in the table.
It’s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table
headings and help screen-reader users keep track of table information.
Caption Provides a table title which displays outside of the table.
Align Caption Specifies where the table caption appears in relation to the table.
Summary Provides a table description. Screen readers read the summary text, but the text does not appear in the
user’s browser.
See also
“Adding and formatting text” on page 226
“Adding and modifying images” on page 243
Import and export tabular data
You can import tabular data that has been created in another application (such as Microsoft Excel) and saved in a
delimited text format (with items separated by tabs, commas, colons, or semicolons) into Dreamweaver and format
it as a table.
September 4, 2007
DREAMWEAVER CS3 179
User Guide
You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a
delimiter. You can use commas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table
is exported; you cannot select portions of a table to export.
If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy
the cells containing that data, paste those cells outside of the table (to create a new table), and export the new table.
Import table data
1 Do one of the following:
• Select File > Import > Tabular Data.
• In the Data category of the Insert bar, click the Import Tabular Data icon.
• Select Insert > Table Objects > Import Tabular Data.
2 Specify the options for the tabular data and click OK.
Data File The name of the file to import. Click the Browse button to select a file.
Delimiter The delimiter used in the file you’re importing.
If you select Other, a text box appears to the right of the pop-up menu. Enter the delimiter used in your file.
Note: Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be imported
properly, and your data will not be correctly formatted in a table.
Table Width The width of the table.
• Select Fit to Data to make each column wide enough to fit the longest text string in the column.
• Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.
Border Specifies the width, in pixels, of the tables borders.
Cell Padding The number of pixels between a cell’s content and the cell boundaries.
Cell Spacing The number of pixels between adjacent table cells.
If you don’t explicitly assign values for borders, cell spacing, and cell padding, most browsers display the table with
borders and cell padding set to 1, and cell spacing set to 2. To ensure that browsers display the table with no padding
or spacing, set Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select
View > Visual Aids > Table Borders.
Format Top Row Determines what formatting, if any, is applied to the top row of the table. Select from four
formatting options: no formatting, bold, italic, or bold italic.
Export a table
1 Place the insertion point in any cell of the table.
2 Select File > Export > Table.
3 Specify the following options:
Delimiter Specifies which delimiter character should be used to separate items in the exported file.
Line Breaks Specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX.
(Different operating systems have different ways of indicating the end of a line of text.)
4 Click Export.
5 Enter a name for the file and click Save.
September 4, 2007
DREAMWEAVER CS3 180
User Guide
Select table elements
You can select an entire table, row, or column at once. You can also select one or more individual cells.
When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection
so that you know which cells will be selected. This is useful when you have tables without borders, cells that span
multiple columns or rows, or nested tables. You can change the highlight color in preferences.
If you position the pointer over a table’s border, then hold the Control key (Windows) or Command key (Macintosh),
the entire structure of the table—that is, all cells in the table—is highlighted. This is useful when you have nested
tables and want to see the structure of one of the tables.
Select an entire table
❖ Do one of the following:
• Click the upper-left corner of the table, anywhere on the top or bottom edge of the table, or on a row or column’s
border.
Note: The pointer changes to the table grid icon when you can select the table (unless you click a row or column border).
• Click in a table cell, then select the tag in the tag selector at the lower-left corner of the Document
window.
• Click in a table cell, then select Modify > Table > Select Table.
• Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected
table’s lower and right edges
.
Select individual or multiple rows or columns
1 Position the pointer to point to the left edge of a row or the top edge of a column.
2 When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or
columns.
Select a single column
1 Click in the column.
2 Click the column header menu and choose Select Column.
Select a single cell
❖ Do one of the following:
• Click in the cell, then select the tag in the tag selector at the lower-left corner of the Document window.
• Control-click (Windows) or Command-click (Macintosh) in the cell.
September 4, 2007
DREAMWEAVER CS3 181
User Guide
• Click in the cell and select Edit > Select All.
Select Edit > Select All again when a cell is selected to select the entire table.
Select a line or a rectangular block of cells
❖ Do one of the following:
• Drag from a cell to another cell.
• Click in one cell, Control-click (Windows) or Command-click (Macintosh) in the same cell to select it, then Shiftclick another cell.
All of the cells within the linear or rectangular region defined by the two cells are selected.
Select nonadjacent cells
❖ Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.
If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If
it is already selected, it’s removed from the selection.
Change the highlight color for table elements
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Highlighting from the category list on the left, make either of the following changes, and click OK.
• To change the highlighting color for table elements, click the Mouse-Over color box, then select a highlight color
using the color picker (or enter the hexadecimal value for the highlight color in the text box).
• To enable or disable highlighting for table elements, select or deselect the Show option for Mouse-Over.
Note: These options affect all objects, such as absolutely-positioned elements (AP elements) and Layout mode view tables
and cells, that Dreamweaver highlights when you move the pointer over them.
Set table properties
You can use the Property inspector to edit tables.
1 Select a table.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and change
properties as necessary.
Table Id An ID for the table.
Rows and Cols The number of rows and columns in the table.
W and H The width and height of the table in pixels, or as a percentage of the browser window’s width.
Note: You usually don’t need to set the height of a table.
Border Specifies the width, in pixels, of the table’s borders.
September 4, 2007
DREAMWEAVER CS3 182
User Guide
If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with
the border and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding
or spacing, set Border to 0, Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set
to 0, select View > Visual Aids > Table Borders.
CellPad The number of pixels between a cell’s content and the cell boundaries.
CellSpace The number of pixels between adjacent table cells.
Align Determines where the table appears, relative to other elements in the same paragraph, such as text or images.
Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the
right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center
centers the table (with text appearing above and/or below the table). Default indicates that the browser should use
its default alignment.
When alignment is set to Default, other content is not displayed next to the table. To display a table next to other
content, use Left or Right alignment.
Clear Column Widths and Clear Row Heights delete all explicitly specified row height or column width values from
the table.
Convert Table Widths To Pixels and Convert Table Heights To Pixels set the width or height of each column in the
table to its current width in pixels (also sets the width of the whole table to its current width in pixels).
Convert Table Widths To Percent and Convert Table Heights To Percent set the width or height of each column in
the table to its current width expressed as a percentage of the Document window’s width (also sets the width of the
whole table to its current width as a percentage of the Document window’s width).
Bg Color The table’s background color.
Brdr Color The color for the table’s borders.
Bg Image The table’s background image.
If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Set cell, row, or column properties
You can use the Property inspector to edit cells and rows in a table.
1 Select the column or row.
2 In the Property inspector (Window > Properties), set the following options:
Horz Specifies the horizontal alignment of the contents of a cell, row, or column. You can align the contents to the
left, right, or center of the cells, or you can indicate that the browser should use its default alignment (usually left for
regular cells and center for header cells).
Vert Specifies the vertical alignment of the contents of a cell, row, or column. You can align the contents to the top,
middle, bottom, or baseline of the cells, or indicate that the browser should use its default alignment (usually
middle).
W and H The width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To
specify a percentage, follow the value with a percent symbol (%). To let the browser determine the proper width or
height based on the contents of the cell and the widths and heights of the other columns and rows, leave the field
blank (the default).
September 4, 2007
DREAMWEAVER CS3 183
User Guide
By default, a browser chooses a row height and column width to accommodate and the widest image or the longest
line in a column. This is why a column sometimes becomes much wider than the other columns in the table when
you add content to it.
Note: You can specify a height as a percentage of the total table height, but the row may not display at the specified
percentage height in browsers.
Bg (upper text field) The filename for the background image for a cell, column, or row. Click the folder icon to
browse to an image, or use the Point-to-File icon to select an image file.
Bg (lower color swatch and text field) The background color for a cell, column, or row, chosen with the color picker.
Brdr The border color for the cells.
Merge Cells Combines selected cells, rows, or columns into one cell. You can merge cells only if they form a rectangular or linear block.
Split Cell Divides a cell, creating two or more cells. You can split only one cell at a time; this button is disabled if more
than one cell is selected.
No Wrap Prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen
to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate
the longest word or widest image in the cell, then expand vertically as necessary to accommodate other contents.)
Header Formats the selected cells as table header cells. The contents of table header cells are bold and centered by
default.
You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages
and back.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each
cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr
tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells
in a row, applying the format to the tr tag produces cleaner, more concise HTML code.
3 Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Use Expanded Tables mode for easier table editing
Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the
tables’ borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion
point.
For example, you might expand a table to place the insertion point to the left or right of an image, without inadvertently selecting the image or table cell.
Note: After you make your selection or place the insertion point, you should return to the Standard mode of Design view
to make your edits. Some visual operations, such as resizing, will not give expected results in Expanded Tables mode.
Switch to Expanded Tables mode
1 If you are working in Code view, select View > Design or View > Code And Design (you cannot switch to
Expanded Tables mode in Code view).
2 Do one of the following:
• Select View > Table Mode > Expanded Tables Mode.
• In the Layout category of the Insert bar, click Expanded Tables Mode.
September 4, 2007
DREAMWEAVER CS3 184
User Guide
A bar labeled Expanded Tables Mode appears across the top of the Document window. Dreamweaver adds cell
padding and spacing to all tables on the page and increases the tables’ borders.
Switch out of Expanded Tables mode
❖ Do one of the following:
• Click Exit in the bar labeled Expanded Tables Mode at the top of the Document window.
• Select View > Table Mode > Standard Mode.
• In the Layout category of the Insert bar, click Standard Mode.
Format tables and cells
You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design
to the table. Before you set table and cell properties, be aware that the order of precedence for formatting is cells,
rows, and tables.
To format the text inside a table cell, use the same procedures you would use to format text outside of a table.
See also
“Adding and formatting text” on page 226
Change the format of a table, row, cell, or column
1 Select a table, cell, row, or column.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and change
properties as necessary.
3 Change the properties as necessary.
For more information on the options, click the Help icon on the Property inspector.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each
cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr
tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells
in a row, applying the format to the tr tag produces cleaner, more concise HTML code.
Add or edit accessibility values for a table in Code view
❖ Edit the appropriate attributes in the code.
To quickly locate the tags in the code, click in the table, then select the tag in the tag selector at the bottom
of the Document window.
Add or edit accessibility values for a table in Design view
• To edit the table caption, highlight the caption and type a new caption.
• To edit the caption alignment, place the insertion point in the table caption, right-click (Windows) or
Control-click (Macintosh), then select Edit Tag Code.
• To edit the table summary, select the table, right-click (Windows) or Control-click (Macintosh), then select Edit
Tag Code.
September 4, 2007
DREAMWEAVER CS3 185
User Guide
Resizing tables, columns, and rows
Resizing tables
You can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the
table change size proportionately. If a table’s cells have explicit widths or heights specified, resizing the table changes
the visual size of the cells in the Document window but does not change the specified widths and heights of the cells.
You can resize a table by dragging one of its selection handles. Dreamweaver displays the table width, along with a
table header menu, at the top or bottom of the table when the table is selected or the insertion point is in the table.
Sometimes the column widths set in the HTML code do not match their apparent widths on the screen. When this
happens, you can make the widths consistent. Table and column widths and header menus appear in Dreamweaver
to help you lay out your tables; you can enable or disable the widths and menus as necessary.
Resizing columns and rows
You can change the width of a column or the height of a row in the Property inspector or by dragging the borders of
the column or row. If you have trouble resizing, you can clear the column widths or row heights and start over.
Note: You can also change cell widths and heights directly in the HTML code using Code view.
Dreamweaver displays column widths, along with column header menus, at the tops or bottoms of columns when
the table is selected or the insertion point is in the table; you can enable or disable the column header menus as
necessary.
See also
“Working with page code” on page 301
Resize tables, columns, and rows
Resize a table
❖ Select the table.
• To resize the table horizontally, drag the selection handle on the right.
• To resize the table vertically, drag the selection handle on the bottom.
• To resize the table in both dimensions, drag the selection handle at the lower-right corner.
Change a column’s width and keep the overall table width
❖ Drag the right border of the column you want to change.
The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how
the columns will adjust; the overall table width does not change.
Note: In tables with percentage-based widths (not pixels), if you drag the right border of the rightmost column, the entire
table’s width changes, and all of the columns grow wider or narrow proportionately.
September 4, 2007
DREAMWEAVER CS3 186
User Guide
Change a column’s width and maintain the size of the other columns
❖ Hold the Shift key and drag the column’s border.
The width of one column changes. Visual feedback shows you how the columns will adjust; the overall table width
changes to accommodate the column you are resizing.
Change a row’s height visually
❖ Drag the lower border of the row.
Make column widths in code consistent with visual widths
1 Click in a cell.
2 Click the table header menu, then select Make All Widths Consistent.
Dreamweaver resets the width specified in the code to match the visual width.
Clear all set widths or heights in a table
1 Select the table.
2 Do one of the following:
• Select Modify > Table > Clear Cell Widths, or Modify > Table > Clear Cell Heights.
• In the Property inspector, (Window > Properties), click the Clear Row Heights button
Widths button
or the Clear Column
.
• Click the table header menu, then select Clear All Heights or Clear All Widths.
Clear a column’s set width
❖ Click in the column, click the column header menu, and select Clear Column Width.
Enable or disable table and column widths and menus
1 Select View > Visual Aids > Table Widths.
2 Right-click (Windows) or Control-click (Macintosh) in the table, then select Table > Table Widths.
September 4, 2007
DREAMWEAVER CS3 187
User Guide
Add and remove rows and columns
To add and remove rows and columns, use the Modify > Table or column header menu.
Pressing Tab in the last cell of a table automatically adds another row to the table.
Add a single row or column
❖ Click in a cell and do one of the following:
• Select Modify > Table > Insert Row or Modify > Table > Insert Column.
A row appears above the insertion point or a column appears to the left of the insertion point.
• Click the column header menu, and then select Insert Column Left or Insert Column Right.
Add multiple rows or columns
1 Click in a cell.
2 Select Modify > Table > Insert Rows Or Columns, complete the dialog box, and click OK.
Insert Indicates whether to insert rows or columns.
Number of Rows or Number Of Columns
The number of rows or columns to insert.
Where Specifies whether the new rows or columns should appear before or after the row or column of the selected cell.
Delete a row or column
❖ Do one of the following:
• Click in a cell within the row or column you want to delete, then select Modify > Table > Delete Row, or Modify >
Table > Delete Column.
• Select a complete row or column, then select Edit > Clear or press Delete.
Add or delete rows or columns using the Property inspector
1 Select the table.
2 In the Property inspector (Windows > Properties), do one of the following:
• To add or delete rows, increase or decrease the Rows value.
• To add or delete columns, increase or decrease the Cols value.
Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.
Split and merge cells
Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells.
As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and
decreasing the number of rows or columns spanned by a cell.
September 4, 2007
DREAMWEAVER CS3 188
User Guide
Merge two or more cells in a table
1 Select the cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be merged.
In the following illustration, the selection is not a rectangle, so the cells can’t be merged.
2 Do one of the following:
• Select Modify > Table > Merge Cells.
• In the expanded Property inspector (Window > Properties), click Merge Cells
.
Note: If you don’t see the button, click the arrow in the lower-right corner of the Property inspector so that you see all
the options.
The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are
applied to the merged cell.
Split a cell
1 Click in the cell and do one of the following:
• Select Modify > Table > Split Cell.
• In the expanded Property inspector (Window > Properties), click Split Cell
.
Note: If you don’t see the button, click the arrow in the lower-right corner of the Property inspector so that you see all
the options.
2 In the Split Cell dialog box, specify how to split the cell:
Split Cell Into Specifies whether to split the cell into rows or columns.
Number Of Rows/Number Of Columns Specifies how many rows or columns to split the cell into.
Increase or decrease the number of rows or columns spanned by a cell
❖ Do one of the following:
• Select Modify > Table > Increase Row Span, or Modify > Table > Increase Column Span.
• Select Modify > Table > Decrease Row Span, or Modify > Table > Decrease Column Span.
September 4, 2007
DREAMWEAVER CS3 189
User Guide
Copy, paste, and delete cells
You can copy, paste, or delete a single table cell or multiple cells at once, preserving the cells’ formatting.
You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells,
the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which
the cells will be pasted.
Cut or copy table cells
1 Select one or more cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.
In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.
2 Select Edit > Cut or Edit > Copy.
Note: If you selected an entire row or column and you select Edit > Cut, the entire row or column is removed from the
table (not just the contents of the cells).
Paste table cells
1 Select where you want to paste the cells:
• To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells
on the clipboard. (For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of
cells to replace by pasting.)
• To paste a full row of cells above a particular cell, click in that cell.
• To paste a full column of cells to the left of a particular cell, click in that cell.
Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and paste the cells from
the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the
cells you are pasting.
• To create a new table with the pasted cells, place the insertion point outside of the table.
2 Select Edit > Paste.
September 4, 2007
DREAMWEAVER CS3 190
User Guide
If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are
pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows,
columns, or cells are used to define a new table.
Remove cell content but leave the cells intact
1 Select one or more cells.
Note: Make sure the selection does not consist entirely of complete rows or columns.
2 Select Edit > Clear or press Delete.
Note: If only complete rows or columns are selected when you select Edit > Clear or press Delete, the entire rows or
columns—not just their contents—are removed from the table.
Delete rows or columns that contain merged cells
1 Select the row or column.
2 Select Modify > Table > Delete Row, or Modify > Table > Delete Column.
Nest tables
A nested table is a table inside a cell of another table. You can format a nested table as you would any other table;
however, its width is limited by the width of the cell in which it appears.
1 Click in a cell of the existing table.
2 Select Insert > Table, set the Insert Table options, and click OK.
Sort tables
You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated
table sort based on the contents of two columns.
You cannot sort tables that contain colspan or rowspan attributes—that is, tables that contain merged cells.
1 Select the table or click in any cell.
2 Select Commands > Sort Table, set the options in the dialog box, and click OK.
Sort By Determines which column’s values will be used to sort the table’s rows.
Order Determines whether to sort the column alphabetically or numerically, and whether to sort it in ascending
order (A to Z, lower numbers to higher numbers) or descending order.
When the contents of a column are numbers, select Numerically. An alphabetic sort applied to a list of one- and twodigit numbers results in the numbers being sorted as if they were words (resulting in ordering such as 1, 10, 2, 20, 3,
30) rather than being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30).
Then By/Order Determines the sorting order for a secondary sort on a different column. Specify the secondary-sort
column in the Then By pop-up menu, and the secondary sort order in the Order pop-up menus.
Sort Includes The First Row Specifies that the first row of the table should be included in the sort. If the first row is a
heading that should not be moved, do not select this option.
Sort Header Rows Specifies to sort all the rows in the table’s thead section (if any) using the same criteria as the body
rows. (Note that thead rows remain in the thead section and still appear at the top of the table even after sorting.)
For information about the thead tag, see the Reference panel (select Help > Reference).
September 4, 2007
DREAMWEAVER CS3 191
User Guide
Sort Footer Rows Specifies to sort all the rows in the table’s tfoot section (if any) using the same criteria as the body
rows. (Note that tfoot rows remain in the tfoot section and still appear at the bottom of the table even after
sorting.) For information about the tfoot tag, see the Reference panel (select Help > Reference).
Keep All Row Colors The Same After The Sort Has Been Completed Specifies that table row attributes (such as color)
should remain associated with the same content after the sort. If your table rows are formatted with two alternating
colors, do not select this option to ensure that the sorted table still has alternating-colored rows. If the row attributes
are specific to the content of each row, then select this option to ensure that those attributes remain associated with
the correct rows in the sorted table.
Laying out pages in Layout mode
About Layout mode
One common method for creating a page layout is to use HTML tables to position elements. Tables were originally
created for displaying tabular data, not for laying out web pages; Dreamweaver provides Layout mode to streamline
the process of using tables for page layout.
In Layout mode, you use layout cells and tables to lay out your page before adding content. For example, you could
draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a
navigation bar, and a third cell on the right to hold content. As you add content, you can move cells around as
necessary to adjust your layout.
For maximum flexibility, you can draw each cell only when you’re ready to put content into it. This enables you to
leave more blank space in the layout table for a longer time, so that you can move or resize cells more easily.
Layout tables appear outlined in green on your page; layout cells appear outlined in blue on your page. When you
move the pointer over a table cell, Dreamweaver highlights the cell. (You can change default outline and highlight
colors in preferences).
September 4, 2007
DREAMWEAVER CS3 192
User Guide
You can lay out your page using several layout cells within one layout table, which is the most common approach to
web-page layout, or you can use multiple, separate layout tables for more complex layouts. Using multiple layout
tables isolates sections of your layout, so that they aren’t affected by changes in other sections.
You can also nest layout tables, by placing a new layout table inside an existing layout table. This structure enables
you to simplify the table structure when the rows or column in one part of the layout don’t line up with the rows or
columns in another part of the layout. For example, using nested layout tables you could easily create a two-column
layout with four rows in the left column and three rows in the right column.
Note: As an alternative to using tables in Standard or Layout mode, you can use CSS positioning to lay out pages.
See also
“Presenting content with tables” on page 176
“Laying out pages with CSS” on page 145
Viewing table and cell widths in Layout mode
The widths of layout tables and cells (in pixels, or as a percentage of the page width) appear at the top or bottom of
the table when the table is selected or when the insertion point is in the table. Beside the widths are arrows for the
table header menu and the column header menus. Use the menus for quick access to some common commands.
Note: To disable column widths, along with table tabs and header menus, you must disable all visual aids (View > Visual
Aids > Hide All).
Sometimes, the width might not appear for a column; you might see any of the following:
• No width. If you do not see a width for the table or for a column, then that table or column does not have a
specified width in the HTML code.
• Two numbers. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width
specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when
you add content to a cell that’s larger than its set width.
For example, if you set a column’s width to 200 pixels, then add content that stretches the width to 250 pixels, two
numbers appear at the top of that column: 200 (the width specified in the code) and in parentheses (250) (the visual
width of the column as it’s rendered on your screen).
• Wavy line. A wavy line appears for columns that are set to autostretch.
• Double bars. Columns that contain spacer images have double bars around the column width.
Layout table and cells grid lines
When you draw a layout cell in a layout table, a light grid of lines appears, extending from the edges of any new layout
cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help
you visualize the underlying HTML table’s structure. The Dreamweaver grid is set and doesn’t change based on the
placement of cells, so you can use it to lay out your page.
Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout
cells cannot overlap.) Cell edges also automatically snap to the edges of the containing layout table if you draw a cell
close to the edge of a table.
September 4, 2007
DREAMWEAVER CS3 193
User Guide
See also
“Using visual aids for layout” on page 173
Fixed column width and autostretch columns
A table column in Layout mode can have either a fixed width or a width that automatically expands to fill as much
of the browser window as possible (autostretch).
Fixed-width columns Have a specific numeric width, such as 300 pixels. Dreamweaver displays the column width for
each fixed-width column at the top or bottom of the column.
Autostretch columns Change automatically depending on the browser window’s width. If your layout includes an
autostretch column, the layout always fills the entire width of the visitor’s browser window. You can make only one
column in a given layout table autostretch. An autostretch column displays a wavy line in the column width area.
A common layout is to make the column containing the main content of the page autostretch, which automatically
sets all the other columns to fixed width. For example, suppose your layout has a wide image on the left side of the
page and a column of text on the right. You might set the left column to a fixed width and make the sidebar area
autostretch.
When you make a column autostretch, Dreamweaver inserts spacer images in the fixed width columns to ensure that
those columns stay as wide as they should be, unless you specify that no spacer image should be used. A spacer image
is a transparent image, used to control spacing, that is not visible in the browser window.
Spacer images
A spacer image (also known as a spacer GIF) is a transparent image that’s used to control spacing in autostretch
tables. A spacer image consists of a single-pixel transparent GIF image, stretched out to be a specified number of
pixels wide. A browser can’t draw a table column narrower than the widest image contained in a cell in that column,
so placing a spacer image in a table column requires browsers to keep the column at least as wide as the image.
Dreamweaver automatically adds spacer images when you set a column to autostretch, unless you specify that no
spacer image should be used. You can manually insert and remove spacer images in each column if you prefer.
Columns that contain spacer images have a double bar where the column width appears.
You can manually insert and remove spacer images in specific columns or remove all spacer images in the page.
Switch from Standard to Layout mode
Before you can draw layout tables or layout cells, you must switch from Standard mode into Layout mode. When you
create tables for layout in Layout mode, but it’s a good idea to switch back to Standard mode before you add content
to or edit your tables.
Note: If you create a table in Standard mode, then switch into Layout mode, the resulting layout table might contain
empty layout cells. You might need to delete these empty layout cells before you can create new layout cells or move layout
cells around.
Switch to Layout mode:
1 If you are working in Code view, change to Design view by selecting View > Design, or View > Code And Design.
Note: You cannot switch to Layout mode in Code view.
2 Select View > Table Mode > Layout Mode.
September 4, 2007
DREAMWEAVER CS3 194
User Guide
A bar labeled Layout Mode appears across the top of the Document window. If there are tables on your page, they
appear as layout tables.
Switch out of Layout mode:
❖ Do one of the following:
• Click Exit in the bar labeled Layout Mode at the top of the Document window
• Select View > Table Mode > Standard Mode.
• In the Layout category of the Insert bar, click the Standard Mode button.
Dreamweaver returns to Standard mode.
Draw in Layout mode
Layout mode allows you to draw cells and tables, including tables nested in other tables. The snapping grid helps you
to align cells.
When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a
container for the cell. A layout cell cannot exist outside of a layout table.
Note: In Layout mode, you can’t use the Insert Table and Draw AP Div tools that you can use in Standard mode. To use
those tools, you must first switch to Standard mode.
When Dreamweaver automatically creates a layout table, the table initially appears to fill the entire Design view, even
if you change the size of your Document window. This full-window default layout table allows you to draw layout
cells anywhere in Design view. You can set the table to a specific size by clicking the table border, then dragging the
table’s resize handles.
When you move the pointer over a layout cell, Dreamweaver highlights it. You can enable or disable highlighting or
change the highlight color in preferences.
You can also create a nested table by drawing a layout table inside another layout table. The cells inside a nested table
are isolated from changes made to the outer table; for example, when you change the size of a row or column in the
outer table, the cells in the inner table don’t change size.
You can insert multiple levels of nested tables. A nested layout table cannot be larger than the table that contains it.
Note: If you draw a layout table in the middle of your page before drawing a layout cell, the table you draw is automatically nested inside a larger table.
See also
“Using visual aids for layout” on page 173
Create a layout cell
1 Make sure you are in Design View (View > Design).
2 Make sure you are in Layout mode, not Standard mode (View > Table Mode > Layout Mode).
3 Select Insert > Layout Objects > Layout Cell.
4 Position the cross hair (+) pointer where you want to start the cell on the page, and then drag to create the layout
cell.
September 4, 2007
DREAMWEAVER CS3 195
User Guide
To draw more than one layout cell without having to repeatedly select the menu item, Control-drag (Windows) or
Command-drag (Macintosh) when you draw the layout cell. As long as you continue to hold Control or Command,
you can draw layout cells one after the other.
If you draw the cell close to the edge of the layout table, cell edges automatically snap to the edges of the containing
layout table. To temporarily disable snapping, hold down Alt (Windows) or Option (Macintosh) while drawing the cell.
The cell appears outlined in blue on your page (you can change the outline color in preferences).
Draw a layout table
1 Make sure you are in Design View (View > Design).
2 Make sure you are in Layout mode, not Standard mode (View > Table Mode > Layout Mode).
3 Select Insert > Layout Objects > Layout Table.
4 Position the cross hair (+) pointer on the page, then drag to create the layout table.
To draw more than one layout table without having to repeatedly select the menu item, Control-drag (Windows) or
Command-drag (Macintosh) when you draw the layout table. As long as you continue to hold Control or Command,
you can draw layout tables one after the other.
You can create a layout table in an empty area of your page layout, around existing layout cells and tables, or nested
inside an existing layout table. If your page contains content, and you want to add a layout table in an empty area of
your page layout, you can draw a new layout table only below the bottom of the existing content.
If you try to draw a layout table below existing content and the no-draw pointer appears, try resizing the Document
window to create more blank space between the bottom of the existing content and the bottom of the window.
Note: Tables cannot overlap each other, but a table can be completely contained inside another table.
The Layout table appears outlined in green on your page (you can change the outline color in preferences).
Change highlighting preferences for layout cells
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Highlighting from the category list.
3 Make either of the following changes and click OK.
• To change the highlighting color, click the Mouse-Over color box, then select a highlight color using the color
picker (or enter the hexadecimal value for the highlight color in the text box).
• To enable or disable highlighting, select or deselect the Show option for Mouse-Over.
Note: These options affect all objects, such as tables and absolutely-positioned elements (AP elements), that are
highlighted when you move the pointer over them.
Draw a nested layout table
1 Make sure you are in Design View (View > Design).
2 Make sure you are in Layout mode, not Standard mode (View > Table Mode > Layout Mode).
3 Select Insert > Layout Objects > Layout Table.
4 Position the cross hair (+) in an empty (gray) area in an existing layout table, and then drag to create the nested
layout table.
Note: You can’t create a layout table inside a layout cell. You can create a nested layout table only in an empty area of
an existing layout table, or around existing cells.
September 4, 2007
DREAMWEAVER CS3 196
User Guide
Draw a layout table around existing layout cells or tables
1 Make sure you are in Design View (View > Design).
2 Make sure you are in Layout mode, not Standard mode (View > Table Mode > Layout Mode).
3 Select Insert > Layout Objects > Layout Table.
4 Drag the cross hair (+) to draw a rectangle around a set of existing layout cells or tables. A new nested layout table
appears, enclosing the existing cells or tables.
To make an existing layout cell fit snugly into one corner of the new nested table, start dragging near the corner of
the cell; the new table’s corner snaps to the cell’s corner. You can’t start dragging in the middle of a layout cell, because
you can’t create a layout table entirely inside a layout cell.
Add content to a layout cell
You can add text, images, and other content to layout cells in Layout mode just as you would add content to table
cells in Standard mode. Click in the cell where you want to add content, then type text or insert other content.
You cannot insert content into an empty (gray) area of a layout table, so before you can add content to a table, you
must first create layout cells.
A layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column
that the cell is in also expands, which might change the sizes of surrounding cells. The column width for that column
changes to show the width that appears in the code, followed by the visual width of the column (the width as it
appears on your screen) in parentheses.
See also
“Adding and formatting text” on page 226
Add text to a layout cell
1 Place the insertion point in the layout cell where you want to add text.
2 Do one of the following:
• Type text into the cell (the cell automatically expands as you type).
• Paste text copied from another document.
Add an image to a layout cell
1 Place the insertion point in the layout cell where you want to add the image.
2 Select Insert > Image.
3 Select an image file and click OK.
Clear cell heights
When you create a layout cell, Dreamweaver automatically specifies a height for the cell, to make the cell display at
the height you drew even though the cell is empty. After you insert content into the cell, you might no longer need
the height to be specified, so you can remove the explicit cell heights from the table.
❖ Select a layout table by clicking the tab at the top of the table, and then click Clear Row Heights in the Property
inspector (Window > Properties)
.
Dreamweaver clears all the heights specified in the table. Some of the table cells might shrink vertically.
September 4, 2007
DREAMWEAVER CS3 197
User Guide
Resize and move layout cells and tables
To adjust your page layout, you can move and resize layout cells and nested layout tables. (The outermost layout table
can only be resized.)
When you move or resize layout cells, they cannot overlap. Furthermore, you cannot move or resize a cell to make it
cross the boundaries of the layout table that contains it. A layout cell cannot be made smaller than its contents.
See also
“Using visual aids for layout” on page 173
Resize a layout cell
1 Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh)
anywhere in the cell.
2 Drag a selection handle to resize the cell.
The cell edges automatically snap to align with other cells’ edges.
Move a layout cell
1 Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh)
anywhere in the cell.
2 Do one of the following:
• Drag the cell to another location within its layout table.
• Press the arrow keys to move the cell 1 pixel at a time.
Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time.
Resize a layout table
1 Select a table by clicking the tab at the top of the table.
2 Drag the selection handles to resize the table.
The table edges automatically snap to align with the edges of other cells and tables.
Move a layout table
1 Select a table by clicking the tab at the top of the table.
Note: You can move a layout table only if it’s nested inside another layout table.
2 Do one of the following:
• Drag the table to another location on the page.
• Press the arrow keys to move the table 1 pixel at a time.
September 4, 2007
DREAMWEAVER CS3 198
User Guide
Hold down Shift while pressing an arrow key to move the table 10 pixels at a time.
Format layout cells and tables
You can set various attributes of a layout cell in the Property inspector, including width and height, background color,
and alignment of the cell’s contents.
Format a layout cell in the Property inspector
1 Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh)
anywhere in the cell.
2 Open the Property inspector (Window > Properties) and set the cell’s formatting properties.
Fixed Sets the cell to a fixed width. Enter a width (in pixels) in the adjacent text box.
Autostretch Makes the cell autostretch.
Height Sets the cell’s height (in pixels).
Bg The background color for the layout cell. Click the color box and select a color in the Color Picker, or enter a
hexadecimal number corresponding to a color in the adjacent text box.
Horz Sets the horizontal alignment of the cell’s contents. You can set the alignment to Left, Center, Right, or Default.
Vert Sets the vertical alignment of the cell’s contents. You can set the alignment to Top, Middle, Bottom, Baseline, or
Default.
No Wrap Prevents word wrapping. When this option is selected, the layout cell widens as necessary to accommodate
text, rather than continuing the text on a new line.
3 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Set layout table properties
1 Select a table by clicking the tab at the top of the table.
2 Open the Property inspector (Window > Properties), set the table’s formatting properties, and press Tab or Enter
(Windows), or Return (Macintosh) to apply the value.
Fixed Sets the table to a fixed width, in pixels.
Autostretch Makes the rightmost column of the table autostretch.
Height The table’s height (in pixels).
CellPad Sets the amount of space between the content of a layout cell and the cell boundary (in pixels). If you change
cell padding and a column width appears in parentheses for your layout table, use the Make Widths Consistent
option.
CellSpace Sets the amount of space between adjacent layout cells (in pixels). If you change cell spacing and a column
width appears in parentheses for your layout table, use the Make Widths Consistent option.
Clear Row Heights Removes explicit height settings for all the cells in the layout table. Dreamweaver specifies
explicit cell heights to show your layout as you drew it, even if some cells are empty. Therefore, you should select this
option only after placing content in layout cells; otherwise, empty cells might collapse vertically.
Note: Clearing row heights might have unexpected effects on empty (gray) areas in the layout table (that is, areas that
don’t contain any cells). In particular, some empty rows might be removed from the table entirely, and the table might
appear to collapse vertically.
September 4, 2007
DREAMWEAVER CS3 199
User Guide
Make Widths Consistent Resets the width specified in the HTML for each cell in the table to match the width of the
content within that cell, if you have fixed-width cells in your layout.
Remove All Spacers Removes spacer images (transparent images that are used to control the spacing in your layout)
from your layout table.
Note: Removing spacer images might cause some columns of your table to become very narrow. You should generally
leave spacer images in place unless each column contains other content that will keep the column at the desired width.
Remove Nesting Removes a layout table that’s nested inside another layout table, without losing any of its contents.
The inner layout table disappears; the layout cells that it contained become part of the outer table.
Set column width
You can set a column to a specific width or make it stretch to fill as much of a browser window as possible
(autostretch). You can also specify a minimum width for a column using a spacer image.
The first time you insert a spacer image, you set up a spacer image for the site. You can set preferences for spacer
images.
Making a column autostretch before your layout is complete might have unexpected effects on table layout. To
prevent columns from growing wider or narrower, create your complete layout before making a column autostretch,
and use spacer images when making a column autostretch. (However, if each column contains other content that will
keep the column at the desired width, you don’t need spacer images.)
If you see two numbers for a column’s width, then the column width set in the HTML code does not match the
column’s apparent width on the screen. You can make the width specified in the code match the visual width.
Note: You need to be in Layout mode to use these options. Also note that sometimes the column menu is at the bottom
edge of the columns.
Make a column autostretch
1 Do one of the following:
• Click the column header menu and select Make Column Autostretch.
• Select a cell in the column by clicking an edge of the cell, and select Autostretch in the Property inspector.
Note: You can make only one column in a given table autostretch.
2 (Optional) If you have not set a spacer image for this site, the Choose Spacer Image dialog box appears and you
can set which image to use, and click OK.
A wavy line appears at the top or bottom of the autostretch column. Double bars appear at the tops or bottoms of
columns that contain spacer images.
September 4, 2007
DREAMWEAVER CS3 200
User Guide
Set a column to a fixed width
❖ Do one of the following:
• Click the column header menu, and then select Make Column Fixed Width. Make Column Fixed Width specifies
a width for the column (in the code) that matches the current visual width of the column.
• Select a cell in the column by clicking an edge of the cell, then select Fixed and type a numeric value in the Property
inspector. If you enter a numeric value that is less than the width of the column’s content, Dreamweaver sets the
width to match the width of the content.
The width of the column appears at the top or bottom of the column.
Insert a spacer image into a column
If you’re making a column autostretch, you can choose whether to use a spacer image, and which spacer image to
use. The image is not visible, but the column might shift slightly and a double bar appears at the top or bottom of the
column to indicate that it contains a spacer image.
1 Click the column header menu, then select Add Spacer Image.
2 If you have not set a spacer image for this site, in the Choose Spacer Image dialog box, select the image to use and
click OK.
Create A Spacer Image File Creates a GIF image to use as a spacer image, and allows you to select a folder in which
to store the spacer image file, such as your site’s images folder. This is the recommended option, unless you’ve already
created a spacer image file for your site.
Use An Existing Spacer Image File Allows you to specify an existing spacer image file to use in autostretch tables. The
spacer image should be a single-pixel transparent GIF.
Don’t Use Spacer Images For Autostretch Tables Specifies that Dreamweaver should refrain from automatically
adding spacer images to tables. (This option does not appear if you’re inserting a spacer image without making a
column autostretch.) If you select this option, fixed-width columns in your layout might collapse to a small width,
or even to zero width; spacer images help maintain the structure of your layout as you originally drew it. Use this
option only if you’ve already placed enough content in your fixed-width columns to prevent them from collapsing,
or if you have already added spacer images manually.
Remove a spacer image from a single column
❖ Click the column header menu and select Remove Spacer Image.
Note: The column might shift when the spacer image is removed.
Remove all spacer images from a table
❖ Do one of the following:
• Click the table header menu and select Remove All Spacer Images.
• Select the table and click Remove All Spacers in the Property inspector (Window > Properties)
September 4, 2007
.
DREAMWEAVER CS3 201
User Guide
Note: The layout of your table might shift. If there is no content in some columns, the columns might disappear
completely from the Design view.
Make widths consistent
❖ Do one of the following:
• Click the table header menu and select Make All Widths Consistent.
• Select the table and click Remove All Spacers in the Property inspector (Window > Properties)
.
Dreamweaver resets the width specified in the code to match the visual width.
Set preferences for Layout mode
You can specify preferences for spacer image files and for the colors that Dreamweaver uses to draw layout tables and
layout cells.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Layout Mode from the category list, set Layout mode preferences, and click OK.
Autoinsert Spacers specifies whether Dreamweaver automatically inserts spacer images when you set a column to
autostretch.
Note: If you choose not to use spacer images in autostretch tables, fixed-width columns might change size or even
disappear completely from Design view when they do not contain content. (The columns still exist in the code, even if
they don’t appear in Design view.)
Spacer Image Sets the spacer image file for your sites.
Select a site from the For Site menu, then click the Create button to create a new spacer image file, or click the Browse
button to locate an existing spacer image file in that site.
Cell Outline Sets the color of the outlines of layout cells.
Cell Highlight Sets the color that layout cell outlines change to when you move the pointer to point to a cell.
Table Outline Sets the color of the outlines of layout tables.
Table Background Sets the color used for areas of layout tables where there are no layout cells.
Using Frames
How frames and framesets work
A frame is a region in a browser window that can display an HTML document independent of what’s being displayed
in the rest of the browser window. Frames provide a way to divide a browser window into multiple regions, each of
which can display a different HTML document. In the most common use of frames, one frame displays a document
containing navigation controls, while another frame displays a document with content
September 4, 2007
DREAMWEAVER CS3 202
User Guide
A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames,
the size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset file
itself doesn’t contain HTML content that displays in a browser, except in the noframes section; the frameset file
simply provides information to the browser about how a set of frames should look and what documents should
appear in them.
To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant
documents to display in the frames. The frameset file for a site is often named index.html, so that it displays by
default if a visitor doesn’t specify a filename.
The following example shows a frame layout consisting of three frames: one narrow frame on the side that contains
a navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame
that takes up the rest of the page and contains the main content. Each of these frames displays a separate HTML
document.
In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side
frame navigation bar contains links; clicking one of these links changes the content of the main content frame, but
the contents of the side frame itself remain static. The main content frame on the right displays the appropriate
document for the link the visitor clicks on the left.
A frame is not a file; it’s easy to think of the document that currently appears in a frame as an integral part of the
frame, but the document isn’t actually part of the frame. The frame is a container that holds the document.
Note: A “page” refers either to a single HTML document or to the entire contents of a browser window at a given
moment, even if several HTML documents appear at once. The phrase “a page that uses frames,” for example, usually
refers to a set of frames and the documents that initially appear in those frames.
A site that appears in a browser as a single page comprising three frames actually consists of at least four HTML
documents: the frameset file, plus the three documents containing the content that initially appears in the frames.
When you design a page using framesets in Dreamweaver, you must save each of these four files in order for the page
to work properly in the browser.
September 4, 2007
DREAMWEAVER CS3 203
User Guide
Deciding whether to use frames
The most common use of frames is for navigation. A set of frames often includes one frame containing a navigation
bar and another frame to display the main content pages.
In many cases, you can create a web page without frames that accomplishes the same goals as a set of frames. For
example, if you want a navigation bar to appear on the left side of your page, you can either replace your page with
a set of frames, or just include the navigation bar on every page in your site. (Dreamweaver helps you create multiple
pages that use the same layout.) The following example shows a page design with a framelike layout that doesn’t use
frames.
Poorly designed sites use frames unnecessarily, such as a frameset that reloads the contents of the navigation frames
every time the visitor clicks a navigation button. When frames are used well (for example, to keep navigation controls
static in one frame while allowing the contents of another frame to change), they can be very useful for a site.
Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so
if you do use frames, always provide a noframes section in your frameset, for visitors who can’t view them. You
might also provide an explicit link to a frameless version of the site.
Advantages to using frames:
• A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
• Each frame has its own scroll bar (if the content is too large to fit in a window), so a visitor can scroll the frames
independently. For example, a visitor who scrolls to the bottom of a long page of content in a frame doesn’t need
to scroll back up to the top to use the navigation bar if the navigation bar is in a different frame.
Disadvantages to using frames:
• Precise graphical alignment of elements in different frames can be difficult.
• Testing the navigation can be time-consuming.
• The URLs of the individual framed pages don’t appear in browsers, so it can be difficult for a visitor to bookmark
a specific page (unless you provide server code that enables them to load a framed version of a particular page).
September 4, 2007
DREAMWEAVER CS3 204
User Guide
Nested framesets
A frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested
framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in
Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or
columns requires a nested frameset.
For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and
two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a
two-row frameset, with a two-column frameset nested in the second row.
A
B
A. Main frameset B. Menu frame and content frame are nested within the main frameset.
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you
don’t need to worry about the details of which frames are nested and which are not.
There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer
frameset, or in a separate file of its own. Each predefined frameset in Dreamweaver defines all of its framesets in the
same file.
Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of
nesting is being used. The most likely situation in which an external frameset file would be used in Dreamweaver is
when you use the Open in Frame command to open a frameset file inside a frame; doing this may result in problems
with setting targets for links. It’s generally simplest to keep all framesets defined in a single file.
Work with framesets in the Document window
Dreamweaver enables you to view and edit all of the documents associated with a set of frames in one Document
window. This approach enables you to see approximately how the framed pages will appear in a browser as you edit
them. However, some aspects of this approach can be confusing until you get used to them. In particular, each frame
displays a separate HTML document. Even if the documents are empty, you must save them all before you can
preview them (because the frameset can be accurately previewed only if it contains the URL of a document to display
in each frame).
To ensure that your frameset appears correctly in browsers, follow these general steps:
1 Create your frameset and specify a document to appear in each frame.
September 4, 2007
DREAMWEAVER CS3 205
User Guide
2 Save every file that’s going to appear in a frame. Remember that each frame displays a separate HTML document,
and you must save each document, along with the frameset file.
3 Set the properties for each frame and for the frameset (including naming each frame, setting scrolling and non-
scrolling options).
4 Set the Target property in the Property inspector for all your links so that the linked content appears in the correct area.
Create frames and framesets
There are two ways to create a frameset in Dreamweaver: You can select from several predefined framesets or you
can design it yourself.
Choosing a predefined frameset sets up all the framesets and frames needed to create the layout and is the easiest
way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s
Design view.
You can also design your own frameset in Dreamweaver by adding “splitters” to the Document window.
Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design
view by selecting View >Visual Aids > Frame Borders.
See also
“Designing pages for accessibility” on page 707
Create a predefined frameset and display an existing document in a frame
1 Place the insertion point in a document and do one of the following:
• Choose Insert > HTML > Frames and select a predefined frameset.
• In the Layout category of the Insert bar, click the drop-down arrow on the Frames button and select a predefined
frameset.
The frameset icons provide a visual representation of each frameset as applied to the current document. The blue
area of a frameset icon represents the current document, and the white areas represent frames that will display other
documents.
September 4, 2007
DREAMWEAVER CS3 206
User Guide
2 If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up
menu, enter a name for the frame, and click OK. (For visitors who use screen readers, the screen reader will read this
name when it encounters the frame in a page.)
Note: If you click OK without entering a new name, Dreamweaver gives the frame a name that corresponds to its position
(left frame, right frame, and so on) in the frameset.
Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags
or attributes with it.
Select Window > Frames to view a diagram of the frames you are naming.
Create an empty predefined frameset
1 Select File > New.
2 In the New Document dialog box, select the Page from Sample category.
3 Select the Frameset folder in the Sample Folder column.
4 Select a frameset from the Sample Page column and click Create.
5 If you have activated the frame accessibility attributes in Preferences, the Frame Tag Accessibility Attributes dialog
box appears; complete the dialog box for each frame and click OK.
Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags
or attributes with it.
Create a frameset
❖ Select Modify > Frameset, then select a splitting item (such as Split Frame Left or Split Frame Right) from the
submenu.
Dreamweaver splits the window into frames. If you had an existing document open, it appears in one of the frames.
Split a frame into smaller frames
• To split the frame where the insertion point is, select a splitting item from the Modify > Frameset submenu.
• To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of
the Design view.
• To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag
(Macintosh) a frame border.
• To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle
of a frame.
To create three frames, start with two frames, then split one of them. It’s not easy to merge two adjacent frames
without editing the frameset code, so changing four frames into three frames is harder than changing two frames into
three frames.
Delete a frame
❖ Drag a frame border off the page or to a border of the parent frame.
If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the
document.
September 4, 2007
DREAMWEAVER CS3 207
User Guide
Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that
displays it. If the frameset file has been saved, delete the file.
Resize a frame
• To set approximate sizes for frames, drag frame borders in the Document window’s Design view.
• To specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when
the browser window size doesn’t allow the frames to display at full size, use the Property inspector.
Select frames and framesets
To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to
change. You can select a frame or frameset either in the Document window or by using the Frames panel.
The Frames panel provides a visual representation of the frames within a frameset. It shows the hierarchy of the
frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick
border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.
In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when
a frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line.
Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There
are various operations (such as setting frame properties) for which you must select a frame.
Select a frame or frameset in the Frames panel
1 Select Window > Frames.
2 In the Frames panel:
• To select a frame, click the frame. (A selection outline appears around the frame in both the Frames panel and the
Document window’s Design view.)
• To select a frameset, click the border that surrounds the frameset.
Select a frame or frameset in the Document window
• To select a frame, Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame in Design view.
• To select a frameset, click one of the frameset’s internal frame borders in Design view. (Frame borders must be
visible to do this; select View >Visual Aids > Frame Borders to make frame borders visible if they aren’t.)
September 4, 2007
DREAMWEAVER CS3 208
User Guide
Note: It’s generally easier to select framesets in the Frames panel than in the Document window. For more information,
see the above topics.
Select a different frame or frameset
• To select the next or previous frame or frameset at the same hierarchical level as the current selection, press
Alt+Left Arrow or Alt+Right Arrow (Windows), or Command+Left Arrow or Command+Right Arrow
(Macintosh). Using these keys, you can cycle through frames and framesets in the order in which they’re defined
in the frameset file.
• To select the parent frameset (the frameset that contains the current selection), press Alt+Up Arrow (Windows)
or Command+Up Arrow (Macintosh).
• To select the first child frame or frameset of the currently selected frameset (that is, first in the order in which
they’re defined in the frameset file), press Alt+Down Arrow (Windows) or Command+Down Arrow (Macintosh).
Open a document in a frame
You can specify the initial content of a frame by either inserting new content into an empty document in a frame, or
opening an existing document in a frame.
1 Place the insertion point in a frame.
2 Select File > Open in Frame.
3 Select a document to open in the frame, and click OK (Windows) or Choose (Macintosh).
4 (Optional) To make this document the default document to display in the frame when the frameset is opened in
a browser, save the frameset.
Save frame and frameset files
Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that will
display in the frames. You can save each frameset file and framed document individually, or you can save the
frameset file and all documents appearing in frames at once.
Note: When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame
is given a default filename. For example, the first frameset file is named UntitledFrameset-1, while the first document in
a frame is named UntitledFrame-1.
Save a frameset file
❖ Select the frameset in the Frames panel or the Document window.
• To save the frameset file, select File > Save Frameset.
• To save the frameset file as a new file, select File > Save Frameset As.
Note: If the frameset file has not previously been saved, these two commands are equivalent.
Save a document that appears in a frame
❖ Click in the frame, then select File > Save Frame or File > Save Frame As.
Save all files associated with a set of frames
❖ Select File > Save All Frames.
September 4, 2007
DREAMWEAVER CS3 209
User Guide
This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset
file has not yet been saved, a heavy border appears around the frameset (or the unsaved frame) in the Design view,
and you can select a filename.
Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document
you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document
to be the default, don’t save the frameset file.
View and set frame properties and attributes
Use the Property inspector to view and set most frame properties, including borders, margins, and whether scroll
bars appear in frames. Setting a frame property overrides the setting for that property in a frameset.
You may also want to set some frame attributes, such as the title attribute (which is not the same as the name
attribute), to improve accessibility. You can enable the accessibility authoring option for frames to set attributes when
you create frames, or you can set attributes after inserting a frame. To edit accessibility attributes for a frame, use the
Tag inspector to edit the HTML code directly.
See also
“Designing pages for accessibility” on page 707
View or set frame properties
1 Select a frame by doing one of the following:
• Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
• Click a frame in the Frames panel (Window > Frames).
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner to see all of
the frame properties.
3 Set the frame Property inspector options.
Frame Name The name used by a link’s target attribute or by a script to refer to the frame. A frame name must be
a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start
with a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in
JavaScript (such as top or navigator) as frame names.
To make a link change the contents of another frame, you must name the target frame. To make it easier to create
cross-frame links later, name each of your frames when you create it.
Src Specifies the source document to display in the frame. Click the folder icon to browse to and select a file.
Scroll Specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for the
corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that
scroll bars appear only when there is not enough room in a browser window to display the full contents of the current
frame.
No Resize Prevents visitors from dragging the frame borders to resize the frame in a browser.
Note: You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.
Borders Shows or hides the borders of the current frame when it’s viewed in a browser. Selecting a Borders option
for a frame overrides the frameset’s border settings.
September 4, 2007
DREAMWEAVER CS3 210
User Guide
Border options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders,
unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have
Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have
Borders set to Default.
Border Color Sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame,
and overrides the specified border color of the frameset.
Margin Width Sets the width in pixels of the left and right margins (the space between the frame borders and the
content).
Margin Height Sets the height in pixels of the top and bottom margins (the space between the frame borders and the
content).
Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties
dialog box.
To change the background color of a frame, set the background color of the document in the frame in page properties.
Set accessibility values for a frame
1 In the Frames panel (Window > Frames), select a frame by placing the insertion point in one of the frames.
2 Select Modify > Edit Tag.
3 Select Style Sheet/Accessibility from the category list on the left, enter values, and click OK.
Edit accessibility values for a frame
1 Display Code view or Code and Design views for your document, if you’re currently in Design view.
2 In the Frames panel (Window > Frames), select a frame by placing the insertion point in one of the frames.
Dreamweaver highlights the frame tag in the code.
3 Right-click (Windows) or Control-click (Macintosh) in the code, and then select Edit Tag.
4 In the tag editor, make your changes and click OK.
Change the background color of a document in a frame
1 Place the insertion point in the frame.
2 Select Modify > Page Properties.
3 In the Page Properties dialog box, click the Background color menu, and select a color.
View and set frameset properties
Use the Property inspector to view and set most frameset properties, including the frameset title, borders, and frame
sizes.
Set a title for a frameset document
1 Select a frameset by doing one of the following:
• Click a border between two frames in the frameset in the Document window’s Design view.
• Click the border that surrounds a frameset in the Frames panel (Window > Frames).
September 4, 2007
DREAMWEAVER CS3 211
User Guide
2 In the Title box of the Document toolbar, type a name for the frameset document.
When a visitor views the frameset in a browser, the title appears in the browser’s title bar.
View or set frameset properties
1 Select a frameset by doing one of the following:
• Click a border between two frames in the frameset in the Document window’s Design view.
• Click the border that surrounds a frameset in the Frames panel (Window > Frames).
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and set the
frameset options.
Borders Determines whether borders should appear around frames when the document is viewed in a browser. To
display borders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to
determine how borders are displayed, select Default.
Border Width Specifies a width for all the borders in the frameset.
Border Color Sets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a
color.
RowCol Selection Sets frame sizes for rows and columns of the selected frameset, click a tab on the left side or top
of the RowCol Selection area; then enter a height or width in the Value text box.
3 To specify how much space the browser allocates to each frame, select from the following choices in the Units menu:
Pixels Sets the size of the selected column or row to an absolute value. Choose this option for a frame that should
always be the same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before
frames with sizes specified as percent or relative. The most common approach to frame sizes is to set a left-side frame
to a fixed pixel width and to set a right-size frame to relative, which enables the right frame to stretch to take up all
the remaining space after the pixel width is allocated.
Note: If all of your widths are specified in pixels, and a visitor views the frameset in a browser that’s too wide or too
narrow for the width you specified, then the frames stretch or shrink proportionately to fill the available space. The same
applies to heights specified in pixels. Thus, it’s generally a good idea to specify at least one width and height as relative.
Percent Specifies that the selected column or row should be a percentage of the total width or height of its frameset.
Frames with units set to Percent are allocated space after frames with units set to Pixels, but before frames with units
set to Relative.
Relative Specifies that the selected column or row be allocated the rest of the available space after Pixels and Percent
frames have had space allocated; that remaining space is divided proportionally among the frames with sizes set to
Relative.
September 4, 2007
DREAMWEAVER CS3 212
User Guide
Note: When you select Relative from the Units menu, any number you’ve entered in the Value field disappears; if you
want to specify a number, you must re-enter it. If there’s only one row or column set to Relative, though, there’s no need
to enter a number, since that row or column receives all the remaining space after the other rows and columns have space
allocated. To be certain of full cross-browser compatibility, you can enter 1 in the Value field; that’s equivalent to entering
no value.
Control frame content with links
To use a link in one frame to open a document in another frame, you must set a target for the link. The target
attribute of a link specifies the frame or window in which the linked content opens.
For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main
content frame on the right, you must specify the name of the main content frame as the target for each of the
navigation bar links. When a visitor clicks a navigation link, the specified content opens in the main frame.
1 In Design view, select text or an object.
2 In the Link box in the Property inspector (Window > Properties), do one of the following:
• Click the folder icon and select the file to link to.
• Drag the Point to File icon to the Files panel and select the file to link to.
3 In the Target menu in the Property inspector, select the frame or window in which the linked document should
appear:
•
_blank opens the linked document in a new browser window, leaving the current window untouched.
•
_parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire
frameset.
•
_self opens the link in the current frame, replacing the content in that frame.
•
_top opens the linked document in the current browser window, replacing all frames.
Frame names also appear in this menu. Select a named frame to open the linked document in that frame.
Note: Frame names appear only when you’re editing a document within a frameset. When you edit a document in its
own Document window, frame names do not appear in the Target pop-up menu. If you’re editing a document outside of
the frameset, you can type the target frame’s name in the Target text box.
If you’re linking to a page outside of your site, always use target="_top" or target="_blank" to ensure that the
page doesn’t appear to be part of your site.
Provide content for browsers without frame support
Dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not
support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that doesn’t
support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag.
Note: Content in the noframes area should be more than just a note saying “You should upgrade to a browser that can
handle frames.” Some site visitors use systems that don’t allow them to view frames.
1 Select Modify > Frameset > Edit NoFrames Content.
Dreamweaver clears the Design view, and the words “NoFrames Content” appear at the top of the Design view.
2 Do one of the following:
• In the Document window, type or insert the content just as you would for an ordinary document.
September 4, 2007
DREAMWEAVER CS3 213
User Guide
• Select Window > Code Inspector, place the insertion point between the body tags that appear inside the noframes
tags, then type the HTML code for the content.
3 Select Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.
Using JavaScript behaviors with frames
There are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use
with frames:
Set Text Of Frame Replaces the content and formatting of a given frame with the content you specify. The content
can include any valid HTML. Use this action to dynamically display information in a frame.
Go To URL Opens a new page in the current window or in the specified frame. This action is particularly useful for
changing the contents of two or more frames with one click.
Insert Navigation Bar Adds a navigation bar to a page; after inserting a navigation bar, you can attach behaviors to
its images and set which image displays based on a visitor’s actions. For example, you may want to show a button
image in its Up or Down state to let a visitor know which page of a site is being viewed.
Insert Jump Menu Sets up a menu list of links that open files in a browser window when clicked. You can also target
a particular window or frame in which the document opens.
See also
“Apply the Set Text Of Frame behavior” on page 358
“Apply the Go To URL behavior” on page 355
“Apply the Set Nav Bar Image behavior” on page 357
“Apply the Jump Menu behavior” on page 355
September 4, 2007
214
Chapter 8: Adding content to pages
You can visually add content to your web pages without needing to know HTML. You can add text, images, Flash
Video, sound, and other media objects to your web pages, as well as set page properties.
Working with pages
About working with pages
Adobe® Dreamweaver® CS3 provides many features to help you easily create new web pages and specify web page
properties, such as page titles, background images and colors, and text and link colors. In addition, tools are provided
to help you maximize website performance, and to create and test pages to ensure compatibility with different web
browsers.
When creating a web page, you must consider what browsers and operating system users will use when viewing your
web page, and what languages you may need to support. With Dreamweaver, you can select colors that are displayed
correctly in different web browsers, set the encoding of different characters (letter forms) for different languages, and
check that a web browser is compatible with your website.
About setting page properties
For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties
dialog box (Modify > Page Properties). The Page Properties dialog box lets you specify the default font family and
font size, background color, margins, link styles, and many other aspects of page design. You can assign new page
properties for each new page you create, and modify those for existing pages
By default, Dreamweaver formats text using CSS (Cascading Style Sheets). You can change the page-formatting
preferences to HTML formatting using the Preferences dialog box (Edit > Preferences). When using CSS page
properties, CSS tags are used for all properties defined in the Appearance, Links, and Headings categories of the Page
Properties dialog box. The CSS tags defining these attributes are embedded in the head section of the page.
Note: The page properties you choose apply only to the active document. If a page uses an external CSS style sheet,
Dreamweaver does not overwrite the tags set in the style sheet, as this affects all other pages using that style sheet.
CSS versus HTML page properties
By default, CSS tags are used to assign page properties. If you want to use HTML tags instead, you must specify this
in the Preferences dialog box.
If you choose to use HTML instead of CSS, the Property inspector displays the Style pop-up menu. However, the
font, size, color, and alignment controls will only show properties set using HTML tags. The values of CSS properties
applied to the current selection will no longer be visible, and the Size pop-up menu will be disabled.
See also
“Specify HTML instead of CSS” on page 221
“Set page properties” on page 216
September 4, 2007
DREAMWEAVER CS3 215
User Guide
Converting active content
Dreamweaver repairs web pages that contain active content—content that requires users to click on it in order to
interact with it in the latest versions of Internet Explorer. Active content can include:
• Adobe® Flash®, Adobe® Flash® Video, or Adobe® FlashPaper™ content
• Shockwave® or Authorware® content
• Java applets
• Real Media content
• QuickTime content
• Custom ActiveX controls
• Other ActiveX controls or plug-ins
Whenever you open a page in Dreamweaver, the page is scanned for active content. You are then presented with one
of three options, depending on the type of active content in your page.
• If your page includes active content embedded with object tags, and those object tags contain only param tags
and/or embed tags, then Dreamweaver offers to convert all of the active content on the page for you.
• If your page is the same as the above, but also includes active content embedded with object tags that contain other
kinds of tags, then Dreamweaver offers to convert only the object tags that contain param tags and/or embed tags.
• If your page includes only active content embedded with object tags that contain more than just param tags or
embed tags, then Dreamweaver gives you a warning message and tells you that it cannot convert these tags.
Clicking Yes in either of the first two Convert Active Content dialog boxes locates existing object tags that contain
param tags and/or embed tags, wraps those object tags in noscript tags, and adds script tags that enable the expected
functioning of active content by calling JavaScript functions in an external file. Dreamweaver creates this external
file (AC_RunActiveContent.js) and places it in a new folder (called Scripts, at the root of your site) when you save
the updated file. You must upload the AC_RunActiveContent.js file when you upload the updated page, either
manually or by clicking Yes in the Dependent Files dialog box.
Note: When inserting an Active X object in a document, Dreamweaver creates two external files:
AC_RunActiveContent.js and AC_ ActiveX.js. You must upload both files when you upload the updated page, either
manually or by clicking Yes in the Dependent Files dialog box.
Dreamweaver only adjusts object tags, and does not adjust independent embed or applet tags that might have been
used to insert active content in older pages (however, embed tags wrapped inside object tags are adjusted by
wrapping the object tag). If your web pages contain embed or applet tags, you should convert those tags to object
tags, and then open those pages so that Dreamweaver can perform the conversion for you. You can easily locate
embed and applet tags in your web pages by conducting a search.
The feature is extensible and allows you to use third-party extensions to convert web pages that might use specific
kinds of plug-ins (for example, RealPlayer or Windows Media Player content).
You can also access the Convert Active Content feature by selecting File > Convert > Active Content.
Note: Active content must be updated on a page-by-page basis; you cannot update all of the pages in a site at once. It’s
best to do a site-wide search for object tags, open the pages containing those tags, and let Dreamweaver repair the pages.
For more information on active content, visit www.adobe.com/devnet/activecontent/.
September 4, 2007
DREAMWEAVER CS3 216
User Guide
Converting custom content
Dreamweaver only converts param and embed tags that are contained within the identified object tags. If you've
customized your code (for example, if you've added an img tag, or any other kind of tag inside your object tag), the
JavaScript functions do not write out the appropriate strings for that content at run time because the Dreamweaver
JavaScript function only generates attribute-value pairs for param and embed tags. If you want your custom code to
render properly at run time and still work as expected in Internet Explorer, you will need to do one of the following:
• Write your own JavaScript function that works with custom code. (If you want, you can also turn off the
Dreamweaver Convert Active Content feature by selecting Edit > Preferences > Code Rewriting.)
• Develop an extension that lets the generateScript() function look for other kinds of information within the
object tag, and that passes that information along to a JavaScript function for the processing of different kinds of
arguments.
For more information on active content, visit www.adobe.com/devnet/activecontent/.
See also
“Search for and replace text” on page 229
Understanding document encoding
Document encoding specifies the encoding used for characters in the document. Document encoding is specified
in a meta tag in the head of the document; it tells the browser and Dreamweaver how the document should be
decoded and what fonts should be used to display the decoded text.
For example, if you specify Western European (Latin1), this meta tag is inserted: . Dreamweaver displays the document using the fonts you
specify in Fonts Preferences for the Western European (Latin1) encoding; a browser displays the document using the
fonts the browser user specifies for the Western European (Latin1) encoding.
If you specify Japanese (Shift JIS), this meta tag is inserted: . Dreamweaver displays the document using the fonts you specify
for the Japanese encoding; a browser displays the document using the fonts the browser user specifies for the
Japanese encodings.
You can change document encoding for a page and change the default encoding that Dreamweaver uses to create
new documents, including the fonts used to display each encoding.
See also
“Set default document type and encoding” on page 74
Set page properties
Page titles, background images and colors, text and link colors, and margins are basic properties of every web
document. You can set or change these properties, and specify the document encoding type that is specific to the
language used to author the web page. You can also specify which Unicode Normalization Form to use with that
encoding type using the Page Properties dialog box.
September 4, 2007
DREAMWEAVER CS3 217
User Guide
If you use both a background image and a background color, the color appears while the image downloads, and then
the image covers up the color. If the background image contains any transparent pixels, the background color shows
through.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Edit the page properties and click OK.
Document Type (DTD) Specifies a document type definition. For example, you can make an HTML document
XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
Document Encoding Specifies the encoding used for characters in the document.
Unicode Normalization Form Enabled only if you select UTF-8 as a document encoding. There are four Unicode
Normalization Forms. The most important is Normalization Form C because it’s the most common form used in the
Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for
completeness.
In Unicode, some characters are visually similar but can be stored within the document in different ways. For
example, “ë” (e-umlaut) can be represented as a single character, “e-umlaut,” or as two characters, “regular Latin e” +
“combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the umlaut
would appear above the “Latin e.” Both forms result in the same visual typography, but what is saved in the file is
different for each form.
Normalization is the process of making sure all characters that can be saved in different forms are all saved using the
same from. That is, all “ë” characters in a document are saved as single “e-umlaut” or as “e” + “combining umlaut,”
and not as both forms in one document.
For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website
at www.unicode.org/reports/tr15.
See also
“Specify HTML instead of CSS” on page 221
“About the XHTML code generated by Dreamweaver” on page 302
“Set CSS properties” on page 129
Set page font, background color, and background image
Use the Page Properties dialog box to specify several basic page layout options for your web pages, including the font,
background color, and background image.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Select the Appearance category and set the options.
Page Font Specifies the default font family to use in your web pages. Dreamweaver uses the font family you specify
unless another font is specifically set for a text element.
Size Specifies the default font size to use in your web pages. Dreamweaver uses the font size you specify unless
another font size is specifically set for a text element.
Text Color Specifies the default color to render fonts with.
Background Color Sets a background color for your page. Click the Background color box and select a color from
the Color Picker.
September 4, 2007
DREAMWEAVER CS3 218
User Guide
Background Image Sets a background image. Click the Browse button, then browse to and select the image. Alter-
natively, enter the path to the background image in the Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To
prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)
Repeat Specifies how the background image will be displayed on the page:
• Select the No-repeat option to display the background image only once.
• Select the Repeat option to repeat, or tile, the image both horizontally and vertically.
• Select the Repeat-x option to tile the image horizontally.
• Select the Repeat-y option to tile the image vertically.
Left Margin and Right Margin Specify the size of the left and right page margins.
Top Margin and Bottom Margin Specify the size of the top and bottom page margins.
Set link properties
You can define the default font, font size, and colors for links, visited links, and active links.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Links category and set the options.
Link Font Specifies the default font family to use for link text. By default, Dreamweaver uses the font family specified
for the entire page unless you specify another font.
Size Specifies the default font size to use for link text.
Link Color Specifies the color to apply to link text.
Visited Links Specifies the color to apply to visited links.
Rollover Links Specifies the color to apply when a mouse (or pointer) hovers over a link.
Active Links Specifies the color to apply when a mouse (or pointer) clicks on a link
Underline Style Specifies the underline style to apply to links. If your page already has an underline link style defined
(through an external CSS style sheet for example), the Underline Style menu defaults to a “don’t change” option. This
option alerts you to a link style that has been defined. If you modify the underline link style using the Page Properties
dialog box, Dreamweaver will change the previous link definition.
Set page heading properties
You can define the default font, font size, and colors for links, visited links, and active links.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Headings category and set the options.
Font Specifies the default font family to use in your web pages. Dreamweaver will use the font family you specify
unless another font is specifically set for a text element.
Heading 1 through Heading 6 Specify the font size and color to use for up to six levels of heading tags.
September 4, 2007
DREAMWEAVER CS3 219
User Guide
Set title and encoding page properties
You can define the default font, font size, and colors for links, visited links, and active links. The Title/Encoding Page
Properties category lets you specify the document encoding type that is specific to the language used to author your
web pages as well as specify which Unicode Normalization Form to use with that encoding type.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Title/Encoding category and set the options.
Title Specifies the page title that appears in the title bar of the Document window and most browser windows.
Document Type (DTD) Specifies a document type definition. For example, you can make an HTML document
XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
Encoding Specifies the encoding used for characters in the document.
If you select Unicode (UTF-8) as the document encoding, entity encoding is not necessary because UTF-8 can safely
represent all characters. If you select another document encoding, entity encoding may be necessary to represent
certain characters. For more information on character entities, see www.w3.org/TR/REChtml40/sgml/entities.html.
Unicode Normalization Form Enabled only if you select UTF-8 as a document encoding. There are four Unicode
Normalization Forms. The most important is Normalization Form C because it’s the most common form used in the
Character Model for the World Wide Web. The other three Unicode Normalization Forms are also provided.
Include Unicode Signature (BOM) Includes a Byte Order Mark (BOM) in the document. A BOM is 2 to 4 bytes at the
beginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes. Because UTF-8
has no byte order, adding a UTF-8 BOM is optional. For UTF-16 and UTF-32, it is required.
Reload Converts the existing document, or reopens it using the new encoding.
Use a tracing image to design the page
You can insert an image file to use as a guide in designing your page:
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Tracing Image category and set the options.
Tracing Image Specifies an image to use as a guide for copying a design. This image is for reference only, and does
not appear when the document is displayed in a browser.
Transparency Determines the opacity of the tracing image, from completely transparent to completely opaque.
Select and view elements in the Document window
To select an element in the Design view of the Document window, click the element. If an element is invisible, you
must make it visible before you can select it.
Some HTML code doesn’t have a visible representation in a browser. For example, comment tags don’t appear in
browsers. However, it can be useful while you’re creating a page to be able to select such invisible elements, edit them,
move them, and delete them.
Dreamweaver enables you to specify whether it shows icons marking the location of invisible elements in the Design
view of the Document window. To indicate which element markers appear, you can set options in Invisible Elements
preferences. For example, you can specify that named anchors be visible, but not line breaks.
You can create certain invisible elements (such as comments and named anchors) using buttons in the Common
category of the Insert bar. You can then modify these elements using the Property inspector.
September 4, 2007
DREAMWEAVER CS3 220
User Guide
See also
“Viewing code” on page 307
“Use the Insert bar” on page 28
Select elements
• To select a visible element in the Document window, click the element or drag across the element.
• To select an invisible element, select View > Visual Aids > Invisible Elements (if that menu item isn’t already
selected) and then click the element’s marker in the Document window.
Some objects appear on the page in a place other than where their code is inserted. For example, in Design view an
absolutely-positioned element (AP element) can be anywhere on the page, but in Code view the code defining the
AP element is in a fixed location. When invisible elements are showing, Dreamweaver displays markers in the
Document window to show the location of the code for such elements. Selecting a marker selects the entire element;
for example, selecting the marker for an AP element selects the entire AP element.
• To select a complete tag (including its contents, if any), click a tag in the tag selector at the lower left of the
Document window. (The tag selector appears in both Design view and Code view.) The tag selector always shows
the tags that contain the current selection or insertion point. The leftmost tag is the outermost tag containing the
current selection or insertion point. The next tag is contained in that outermost tag, and so on; the rightmost tag
is the innermost one that contains the current selection or insertion point.
In the following example, the insertion point is in a paragraph tag, . To select the table containing the paragraph
you want to select, select the
tag to the left of the tag.
View the HTML code associated with the selected text or object
❖ Do one of the following:
• In the Document toolbar, click the Show Code View button.
• Select View > Code.
• In the Document toolbar, click the Show Code and Design Views button.
• Select View > Code and Design.
• Select Window > Code Inspector.
When you select something in either code editor (Code view or the Code inspector), it’s generally also selected in
the Document window. You may need to synchronize the two views before the selection appears.
Show or hide marker icons for invisible elements
❖ Select View > Visual Aids > Invisible Elements.
Note: Showing invisible elements may slightly change the layout of a page, moving other elements by a few pixels, so for
precision layout, hide the invisible elements.
Set invisible elements preferences
Use Invisible Elements preferences to specify which kinds of elements will be visible when you select View > Visual
Aids > Invisible Elements.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), then click Invisible Elements.
2 Select which elements should be made visible and click OK.
September 4, 2007
DREAMWEAVER CS3 221
User Guide
Note: A check mark next to the name of the element in the dialog box means the element is visible when View > Visual
Aids > Invisible Elements is selected.
Named Anchors Displays an icon that marks the location of each named anchor (a name = "") in the document.
Scripts Displays an icon that marks the location of JavaScript or VBScript code in the body of the document. Select
the icon to edit the script in the Property inspector or to link to an external script file.
Comments Displays an icon that marks the location of HTML comments. Select the icon to see the comment in the
Property inspector.
Line Breaks Displays an icon that marks the location of each line break (BR). This option is deselected by default.
Client-Side Image Maps Displays an icon marking the location of each client-side image map in the document.
Embedded Styles Displays an icon showing the location of CSS styles embedded in the body section of the
document. If CSS styles are placed in the head section of a document, they do not appear in the Document window.
Hidden Form Fields Displays an icon that marks the location of form fields that have the type attribute set to
"hidden".
Form Delimiter Displays a border around a form so you can see where to insert form elements. The border shows
the extent of the form tag, so any form elements inside that border are properly enclosed in form tags.
Anchor Points For AP elements Displays an icon that marks the location of code defining an AP element. The AP
element itself can be anywhere on the page. (AP elements are not invisible elements; only the code defining the AP
element is invisible.) Select the icon to select the AP element; you can then see the contents of the AP element even
if the AP element is marked as hidden.
Anchor Points For Aligned Elements Displays an icon showing the location of HTML code for elements that accept
the align attribute. These include images, tables, ActiveX objects, plug-ins, and applets. In some cases, the code for
the element may be separated from the visible object.
Visual Server Markup Tags Displays the location of server markup tags (such as Active Server Pages tags and
ColdFusion tags) whose content cannot be displayed in the Document window.
Nonvisual Server Markup Tags Displays the location of server markup tags (such as Active Server Pages tags and
ColdFusion tags) whose content cannot be displayed in the Document window.
CSS Display: None Displays an icon showing the location of content that’s hidden by the display:none property in
the linked or embedded stylesheet.
Show Dynamic Text As Displays any dynamic text on your page in the format of {Recordset:Field} by default. If the
length of these values is long enough to distort your page’s formatting, you can change the display to {} instead.
Server-Side Includes Displays the actual contents of each server-side include file.
Specify HTML instead of CSS
By default, Dreamweaver uses CSS tags to assign page properties. If you want to use HTML tags instead, you must
deselect the Use CSS Instead Of HTML Tags option in the General category of the Preferences dialog box.
1 Select Edit > Preferences.
2 In the General category of the Page Properties dialog box, deselect Use CSS Instead of HTML Tags (in the Editing
options section of the General Preferences panel) and click OK.
September 4, 2007
DREAMWEAVER CS3 222
User Guide
Set the HTML Appearance page properties
The HTML Appearance Page Properties category lets you specify several basic page layout options for your web
pages:
Background Image and Background Specify a background image and background color for the page.
Text and Links Define default colors for text, links, visited links, and active links. You can also control these colors
using CSS style sheets.
Left Margin and Top Margin Specify the sizes of page margins in the body tag, for Microsoft Internet Explorer only.
Netscape Navigator ignores these values, using Margin Width and Margin Height instead. For best cross-browser
results, provide margin values for both browsers instead of just one browser; fill in all four margin values instead of
just two. To ensure that no margins appear in either browser, set all four values to 0. Dreamweaver doesn’t display
page margins in the Document window; to see the margins, use Preview In Browser.
Margin Width and Margin Height Specify the sizes of page margins in the body tag, for Netscape Navigator only.
Internet Explorer ignores these values, using Left Margin and Top Margin instead. For best cross-browser results,
provide margin values for both browsers instead of just one browser; fill in all four margin values instead of just two.
To ensure no margins in both browsers, set all four values to 0. Dreamweaver doesn’t display page margins in the
Document window; use Preview In Browser to see the margins.
See also
“Apply, remove, or rename class styles” on page 136
“About setting page properties” on page 214
“Specify HTML instead of CSS” on page 221
Web-safe colors
In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A websafe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and
Macintosh systems when running in 256-color mode. The conventional wisdom is that there are 216 common colors,
and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204,
and 255, respectively) represents a web-safe color.
Testing, however, reveals that there are only 212 web-safe colors rather than a full 216, because Internet Explorer on
Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and
#33FF00 (51,255,0).
When web browsers first made their appearance, most computers displayed only 265 colors (8 bits per channel (bpc).
Today, the majority of computers display thousands or millions of colors (16- and 32-bpc), so the justification for
using the browser-safe palette is greatly diminished if you are developing your site for users with current computer
systems.
One reason to use the web-safe color palette is if you are developing for alternative web devices such as PDA and cell
phone displays. Many of this devices offer only black and white (1-bpc) or 256 color (8-bpc) displays.
The Color Cubes (default) and the Continuous Tone palettes in Dreamweaver use the 216-color web-safe palette;
selecting a color from these palettes displays the color’s hexadecimal value.
To select a color outside the web-safe range, open the system color picker by clicking the Color Wheel button in the
upper-right corner of the Dreamweaver color picker. The system color picker is not limited to web-safe colors.
September 4, 2007
DREAMWEAVER CS3 223
User Guide
UNIX versions of Netscape Navigator use a different color palette than the Windows and Macintosh versions. If you
are developing exclusively for UNIX browsers (or your target audience is Windows or Macintosh users with 24-bpc
monitors and UNIX users with 8-bpc monitors), consider using hexadecimal values that combine the pairs 00, 40,
80, BF, or FF, which produce web-safe colors for SunOS.
Use the color picker
In Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page elements, contain a color
box, which opens a color picker. Use the color picker to select a color for a page element. You can also set the default
text color for your page elements.
1 Click a color box in any dialog box or in the Property inspector.
The color picker appears.
2 Do one of the following:
• Use the eyedropper to select a color swatch from the palette. All colors in the Color Cubes (default) and
Continuous Tone palettes are web-safe; other palettes are not.
• Use the eyedropper to pick up a color from anywhere on your screen—even outside the Dreamweaver windows.
To pick up a color from the desktop or another application, press and hold the mouse button; this allows the
eyedropper to retain focus, and select a color outside of Dreamweaver. If you click the desktop or another application, Dreamweaver picks up the color where you clicked. However, if you switch to another application, you may
need to click a Dreamweaver window to continue working in Dreamweaver.
• To expand your color selection, use the pop-up menu at the upper-right corner of the color picker. You can select
Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale, and Snap To Web Safe.
Note: The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows OS, Mac OS and Grayscale are
not. If you are using a palette that isn’t web-safe and then select Snap to Web Safe, Dreamweaver replaces the selected
color with the closest web-safe color. In other words, you may not get the color you see.
• To clear the current color without choosing a different color, click the Default Color button
• To open the system color picker, click the Color Wheel button
.
.
Zoom in and out
Dreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel
accuracy of graphics, select small items more easily, design pages with small text, design large pages, and so on.
Note: The zooming tools are only available in Design view.
See also
“Status bar overview” on page 18
Zoom in or out on a page
1 Select the Zoom tool (the magnifying glass icon) in the lower-right corner of the Document window.
2 Do one of the following:
• Click the spot on the page you want to magnify until you’ve achieved the desired magnification.
• Drag a box over the area on the page that you want to zoom in on and release the mouse button.
• Select a preset magnification level from the Zoom pop-up menu.
September 4, 2007
DREAMWEAVER CS3 224
User Guide
• Type a magnification level in the Zoom text box.
You can also zoom in without using the Zoom tool by pressing Control+= (Windows) or Command+= (Macintosh).
3 To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and click
on the page.
You can also zoom out without using the Zoom tool by pressing Control+- (Windows) or Command+- (Macintosh).
Edit a page after zooming
❖ Select the Pointer tool (the pointer icon) in the lower-right corner of the Document window, and click inside the page.
Pan a page after zooming
1 Select the Hand tool (the hand icon) in the lower-right corner of the Document window.
2 Drag the page.
Fill the Document window with a selection
1 Select an element on the page.
2 Select View > Fit Selection.
Fill the Document window with an entire page
❖ Select View > Fit All.
Fill the Document window with the entire width of a page
❖ Select View > Fit Width.
Using JavaScript behaviors to detect browsers and plug-ins
You can use behaviors to determine which browser your visitors are using and whether they have a particular plug-in
installed.
Check Browser Sends visitors to different pages depending on their browser brands and versions. For example, you
may want visitors to go to one page if they have Netscape Navigator 4.0 or later, to go to another page if they have
Microsoft Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of browser.
Check Plugin Sends visitors to different pages depending on whether they have the specified plug-in installed. For
example, you may want visitors to go to one page if they have Shockwave™ and another page if they do not.
See also
“Using JavaScript behaviors” on page 347
“Apply the Check Browser behavior” on page 351
“Apply the Check Plugin behavior” on page 352
September 4, 2007
DREAMWEAVER CS3 225
User Guide
Set download time and size preferences
Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and
plug-ins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences.
Actual download time varies depending on general Internet conditions.
A good guideline to use when checking download times for a particular web page is the 8-second rule. That is, most
users will not wait longer than 8 seconds for a page to load.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Status Bar from the Category list on the left.
3 Select a connection speed with which to calculate download time and click OK.
See also
“Set window size and connection speed” on page 26
Set browser preview preferences
You can set preferences for the browser to use when previewing a site and define default primary and secondary
browsers.
1 Select File > Preview In Browser > Edit Browser List.
2 To add a browser to the list, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.
3 To delete a browser from the list, select the browser, and then click the Minus (-) button.
4 To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and
then click OK.
5 Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the
primary or secondary browser.
F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or
Command+F12 (Macintosh) opens the secondary browser.
6 Select Preview Using Temporary File to create a temporary copy for previewing and server debugging. (Deselect
this option if you want to update the document directly.)
Save and revert web pages
You can save a document using its current name and location, or save a copy of a document using a different name
and location.
When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use
special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you
intend to put on a remote server; many servers change these characters during upload, which will cause any links to
the files to break. Also, do not begin a filename with a numeral.
See also
“Create a blank page” on page 69
September 4, 2007
DREAMWEAVER CS3 226
User Guide
Save a document
1 Do one of the following:
• To overwrite the current version on the disk, and save any changes you have made, select File > Save.
• To save the file in a different folder or using a different name, select File > Save As.
2 In the Save As dialog box that appears, navigate to the folder where you want to save the file.
3 In the File Name text box, type a name for the file.
4 Click Save to save the file.
Save all open documents
1 Select File > Save All.
2 If there are any unsaved documents open, the Save As dialog box is displayed for each unsaved document.
In the dialog box that appears, navigate to the folder where you want to save the file.
3 In the File Name box, type a name for the file and click Save.
Revert to the last saved version of a document
1 Select File > Revert.
A dialog box asks if you want to discard your changes, and revert to the previously saved version.
2 Click Yes to revert to the previous version; click No to keep your changes.
Note: If you save a document, and then exit Dreamweaver, you cannot revert to the previous version of the document
when you restart Dreamweaver.
Adding and formatting text
About inserting text
Dreamweaver lets you add text to web pages by typing the text directly into a page, copying and pasting text from
another document, or dragging text from another application. You can also import text from or link to other
document types, including ASCII text files, rich format text files, and Microsoft Office documents.
Add text to a document
To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and
paste text. You can also import text from other documents.
When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command. The
Paste Special command lets you specify the format of pasted text in different ways. For example, if you wanted to
paste text from a formatted Microsoft Word document into your Dreamweaver document, but wanted to strip out
all of the formatting so that you could apply your own CSS style sheet to the pasted text, you could select the text in
Word, copy it to your Clipboard, and use the Paste Special command to select the option that lets you paste text only.
When using the Paste command to paste text from other applications, you can set paste preferences as default
options.
September 4, 2007
DREAMWEAVER CS3 227
User Guide
Note: Control+V (Windows) and Command+V (Macintosh) always paste text only (no formatting) in Code view.
❖ Add text to your document by doing one of the following:
• Type text directly into the Document window.
• Copy text from another application, switch to Dreamweaver, position the insertion point in the Design view of the
Document window, and select Edit > Paste or Edit > Paste Special.
When you select Edit > Paste Special, you can select several paste formatting options.
You can also paste text using the following keyboard shortcuts:
Paste option
Keyboard shortcut
Paste
Control+V (Windows)
Command+V (Macintosh)
Paste Special
Control+Shift+V (Windows)
Command+Shift+V (Macintosh)
Insert special characters
Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML
includes entity names for characters such as the copyright symbol (©), the ampersand (&), and the registered-trademark symbol (®). Each entity has both a name (such as —) and a numeric equivalent (such as
—).
HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or
less than without Dreamweaver interpreting them as code. In this case, use > for greater than (>) and < for less
than (<).
Unfortunately, many browsers (especially older browsers, and browsers other than Netscape Navigator and Internet
Explorer) don’t properly display many of the named entities.
1 In the Document window, place the insertion point where you want to insert a special character.
2 Do one of the following:
• Select the name of the character from the Insert > HTML > Special Characters submenu.
• In the Text category of the Insert bar, click the Characters button and select the character from the submenu.
There are many other special characters available; to select one of them, select Insert > HTML > Special
Characters > Other or click the Characters button in the Text category of the Insert bar and select the Other
Characters option. Select a character from the Insert Other Character dialog box, and click OK.
Add space between characters
HTML only allows for one space between characters; to add additional space in a document you must insert a nonbreaking space. You can set a preference to automatically add non-breaking spaces in a document.
Insert a non-breaking space
❖ Do one of the following:
• Select Insert > HTML > Special Characters > Non-Breaking Space.
• Press Control+Shift+Spacebar (Windows) or Option+Spacebar (Macintosh).
September 4, 2007
DREAMWEAVER CS3 228
User Guide
• In the Text category of the Insert bar, click the Characters button and select the Non-Breaking Space icon.
Set a preference to add non-breaking spaces
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category make sure Allow Multiple Consecutive Spaces is checked.
Create bulleted and numbered lists
You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from
new text as you type in the Document window.
Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an ordered
or bulleted list nested within another numbered or ordered list.
You use the List Properties dialog box to set the appearance of an entire list or for an individual list item. You can set
number style, reset numbering, or set bullet style options for individual list items or for the entire list.
See also
“Set CSS properties” on page 129
Create a new list
1 In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the
following:
• Click either the Bulleted or Numbered List button in the Property inspector
• Select Text > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or
Definition List.
The leading character for the specified list item appears in the Document window.
2 Type the list item text, then press Enter (Windows) or Return (Macintosh) to create another list item.
3 To complete the list, press Enter twice (Windows) or press Return twice (Macintosh).
Create a list using existing text
1 Select a series of paragraphs to make into a list.
2 Click the Bulleted or Numbered List button in the Property inspector, or select Text > List and select the type of
list desired—Unordered List, Ordered List, or Definition List.
Create a nested list
1 Select the list items you want to nest.
2 Click the Indent button in the Property inspector, or select Text > Indent.
Dreamweaver indents the text and creates a separate list with the original list’s HTML attributes.
3 Apply a new list type or style to the indented text by following the same procedure used above.
Set list properties for an entire list
1 In the Document window, create at least one list item. The new style will automatically apply to additional items
you add to the list.
September 4, 2007
DREAMWEAVER CS3 229
User Guide
2 With the insertion point in the list item’s text, select Text > List > Properties to open the List Properties dialog box.
3 Set the options you want to define the list:
List Type Specifies list properties while List Item specifies an individual item in a list. Use the pop-up menu to select
a bulleted, numbered, directory, or menu list. Depending on the List Type you select different options appear in the
dialog box.
Style Determines the style of numbers or bullets used for a numbered or bulleted list. All items in the list will have
this style unless you specify a new style for items within the list.
Start Count Sets the value for the first item in a numbered list.
4 Click OK to set the choices.
Set list properties for a list item
1 In the Document window, place the insertion point in the text of a list item you want to affect
2 Select Text > List > Properties.
3 Under List Item, set the options you want to define:
New Style Specifies a style for the selected list item. Styles in the New Style menu are related to the type of list
displayed in the List Type menu. For example, if the List Item menu displays Bulleted List, only bullet options are
available in the New Style menu.
Reset Count To Sets a specific number from which to number list item entries.
4 Click OK to set the options.
Search for and replace text
You can use the Find And Replace command to search for text and for HTML tags and attributes in a document or
a set of documents. The Search panel, in the Results panel group, shows the results of a Find All search.
Note: To search for files in a site, use different commands: Locate In Local Site and Locate In Remote Site.
See also
“Viewing code” on page 307
“About regular expressions” on page 304
Search for and replace text
1 Open the document to search in, or select documents or a folder in the Files panel.
2 Select Edit > Find And Replace.
3 Use the Find In option to specify which files to search:
Selected Text Confines the search to the text that’s currently selected in the active document.
Current Document Confines the search to the active document.
Open Documents Searches all documents that are currently open.
Folder Confines the search to a specific folder. After choosing Folder, click the folder icon to browse to and select a
folder to search.
Selected Files In Site Confines the search to the files and folders that are currently selected in the Files panel.
September 4, 2007
DREAMWEAVER CS3 230
User Guide
Entire Current Local Site Expands the search to all the HTML documents, library files, and text documents in the
current site.
4 Use the Search pop-up menu to specify the kind of search you want to perform:
Source Code Searches for specific text strings in the HTML source code. You can search for specific tags using this
option, but the Specific Tag search provides a more flexible approach to searching for tags.
Text Searches for specific text strings in the text of the document. A text search ignores any HTML that interrupts the
string. For example, a search for the black dog would match both the black dog and the black dog.
Text (Advanced) Searches for specific text strings that are either within or not within a tag or tags. For example, in a
document that contains the following HTML, searching for tries and specifying Not Inside Tag and the i tag would
find only the second instance of the word tries: John tries to get his work done on time, but
he doesn’t always succeed. He tries very hard. .
Specific Tag Searches for specific tags, attributes, and attribute values, such as all td tags with valign set to top.
Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return
(Macintosh), adds line breaks within the text search fields, allowing you to search for a Return character. When
performing such a search, deselect the Ignore Whitespace Differences option if you’re not using regular expressions. This
search finds a Return character in particular, not simply the occurrence of a line break; for instance, it doesn’t find a

tag or a
tag. Return characters appear as spaces in the Design view, not as line breaks.
5 Use the following options to expand or limit the search:
Match Case Limits the search to text that exactly matches the case of the text you want to find. For example, if you
search for the brown derby, you will not find The Brown Derby.
Ignore Whitespace Treats all whitespace as a single space for the purposes of matching. For example, with this
text but not thistext. This option is not
option selected, this text would match this text and this
available when the Use Regular Expressions option is selected; you must explicitly write your regular expression to
ignore whitespace. Note that
and
tags do not count as whitespace.
Match Whole Word Limits the search to text that matches one or more complete words.
Note: Using this option is equivalent to doing a regular-expression search for a search string that starts and ends with
\b, the word-boundary regular expression.
Use Regular Expressions Causes certain characters and short strings (such as ?, *, \w, and \b) in your search string
to be interpreted as regular expression operators. For example, a search for the b\w*\b dog will match both the
black dog and the barking dog.
Note: If you are working in Code view and make changes to your document, and try to find and replace anything other
than source code, a dialog box appears letting you know that Dreamweaver is synchronizing the two views before doing
the search.
6 To search without replacing, click Find Next or Find All:
Find Next Jumps to and selects the next occurrence of the search text or tags in the current document. If there are
no more instances of the tag in the current document, Dreamweaver proceeds to the next document, if you are
searching in more than one document.
Find All Opens the Search panel in the Results panel group. If you are searching a single document, Find All displays
all occurrences of the search text or tags, with some surrounding context. If you are searching a directory or site, Find
All displays a list of documents that contain the tag.
7 To replace found text or tags, click Replace or Replace All.
September 4, 2007
DREAMWEAVER CS3 231
User Guide
8 When you’re finished, click Close.
Search again without displaying the Find And Replace dialog box
❖ Press F3 (Windows) or Command+G (Macintosh).
View a particular search result in context
1 Select Window > Results to display the Search panel.
2 Double-click a line in the Search panel.
If you’re searching the current file, the Document window displays the line containing that search result.
If you’re searching a set of files, the file containing that search result opens.
Perform the same search again
❖ Click the Find And Replace button.
Stop a search in progress
❖ Click the Stop button.
Search for a specific tag
Use the Find And Replace dialog box to search for text or tags in a document, and to replace the found material with
other text or tags.
1 Select Edit > Find And Replace.
2 In the Search pop-up menu, select Specific Tag.
3 Select a specific tag or [any tag] from the pop-up menu next to the Search pop-up menu, or type a tag name in
the text box.
4 (Optional.) Limit the search with one of the following tag modifiers:
With Attribute Specifies an attribute that must be in the tag for it to match. You can specify a particular value for the
attribute or select [any value].
Without Attribute Selects an attribute that must not be in the tag for it to match. For example, select this option to
search for all img tags with no alt attribute.
Containing Specifies text or a tag that must be contained within the original tag for it to match. For example, in the
code heading 1, the font tag is contained within the b tag.
Not Containing Specifies text or a tag that must not be contained within the original tag for it to match.
Inside Tag Specifies a tag that the target tag must be contained in for it to match.
Not Inside Tag Specifies a tag that the target tag must not be contained in for it to match.
5 (Optional.) To limit the search further, click the Plus (+) button and repeat step 3.
6 If you didn’t apply any tag modifiers in steps 3 and 4, then click the Minus (-) button to remove the tag modifiers
pop-up menu.
7 If you want to perform an action when the tag is found (such as removing or replacing the tag), select the action
from the Action pop-up menu and, if applicable, specify any additional information necessary to perform the action.
September 4, 2007
DREAMWEAVER CS3 232
User Guide
Search for specific text (Advanced)
Use the Find and Replace dialog box to search for text or tags in a document, and to replace the found material with
other text or tags.
1 Select Edit > Find and Replace.
2 In the Search pop-up menu, select Text (Advanced).
3 Enter text in the text field adjacent to the Search pop-up menu.
For example, type the word Untitled.
4 Select Inside Tag or Not Inside Tag, and then select a tag from the adjacent pop-up menu.
For example, select Inside Tag and then title.
5 (Optional.) Click the Plus (+) button to limit the search with one of the following tag modifiers:
With Attribute Specifies an attribute that must be in the tag for it to match. You can specify a particular value for the
attribute or select [any value].
Without Attribute Selects an attribute that must not be in the tag for it to match. For example, select this option to
search for all img tags with no alt attribute.
Containing Specifies text or a tag that must be contained within the original tag for it to match. For example, in the
code heading 1, the font tag is contained within the b tag.
Not Containing Specifies text or a tag that must not be contained within the original tag for it to match.
Inside Tag Specifies a tag that the target tag must be contained in for it to match.
Not Inside Tag Specifies a tag that the target tag must not be contained in for it to match.
6 (Optional.) To limit the search further, repeat step 4.
Define abbreviations and acronyms
HTML provides tags that let you define the abbreviations and acronyms you use in your page for search engines, spell
checkers, language translation programs, or speech synthesizers. For example, you might want to specify that the
abbreviation ME in your page stands for mechanical engineer, or the acronym WHO stands for World Health
Organization.
1 Select the abbreviation or acronym in the text of your page.
2 Select Insert > HTML > Text Objects > Abbreviation, or Insert > HTML > Text Objects > Acronym.
3 Enter the full text of the acronym or abbreviation.
4 Enter the language, such as en for English, de for German, or it for Italian.
Set copy and paste preferences
You can set special paste preferences as default options when using Edit > Paste to paste text from other applications.
For example, if you always want to paste text as text only, or text with basic formatting, you can set the default option
in the Copy/Paste Preferences dialog box.
September 4, 2007
DREAMWEAVER CS3 233
User Guide
Note: When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command.
The Paste Special command lets you specify the format of pasted text in different ways. For example, if you wanted to
paste text from a formatted Microsoft Word document into your Dreamweaver document, but wanted to strip out all of
the formatting so that you could apply your own CSS style sheet to the pasted text, you could select the text in Word, copy
it to your Clipboard, and use the Paste Special command to select the option that lets you paste text only.
Note: Preferences set in the Copy/Paste Preferences dialog box apply only to material pasted into Design view.
1 Select Edit > Preferences (Windows) or Dreamweaver Preferences (Macintosh).
2 Click the Copy/Paste category.
3 Set the following options and click OK.
Text Only Lets you paste unformatted text. If the original text is formatted, all formatting, including line breaks and
paragraphs, will be removed.
Text With Structure Lets you paste text that retains structure, but does not retain basic formatting. For example, you
can paste text and retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other
formatting.
Text With Structure Plus Basic Formatting Lets you paste both structured and simple HTML-formatted text (e.g.,
paragraphs and tables, as well as text formatted with the b, i, u, strong, em, hr, abbr, or acronym tag).
Text With Structure Plus Full Formatting Lets you paste text that retains all structure, HTML formatting, and CSS
styles.
Note: The Full Formatting option cannot retain CSS styles that come from an external style sheet, nor can it retain styles
if the application from which you are pasting does not retain styles upon pasting to the Clipboard.
Retain Line Breaks Lets you keep line breaks in pasted text. This option is disabled if you have selected Text Only.
Clean Up Word Paragraph Spacing Select this option if you selected Text With Structure or Text With Structure Plus
Basic Formatting, and want to eliminate extra space between paragraphs when you paste your text.
Check and correct spelling
Use the Check Spelling command in the Text menu to check the spelling in the current1 document. The Check
Spelling command ignores HTML tags and attribute values.
By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, select Edit >
Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh), then in the Spelling
Dictionary pop-up menu select the dictionary you want to use. Dictionaries for additional languages can be
downloaded from the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support.
1 Select Text > Check Spelling or press Shift+F7.
When Dreamweaver encounters an unrecognized word, the Check Spelling dialog box appears.
2 Select the appropriate option based on how you want the discrepancy handled.
Add To Personal Adds the unrecognized word to your personal dictionary.
Ignore Ignores this instance of the unrecognized word.
Ignore All Ignores all instances of the unrecognized word.
Change Replaces this instance of the unrecognized word with text that you type in the Change To text box or with
the selection in the Suggestions list.
Change All Replaces all instances of the unrecognized word in the same manner.
September 4, 2007
DREAMWEAVER CS3 234
User Guide
Import tabular data
You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database
files) as delimited text files.
You can import and format tabular data and import text from Microsoft Word HTML documents.
You can also add text from Microsoft Excel documents to a Dreamweaver document by importing the contents of
the Excel file into a web page.
1 Select File > Import > Import Tabular Data, or Insert > Table Objects > Import Tabular Data.
2 Browse for the file you want or enter its name in the text box.
3 Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon,
Colon, and Other.
If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.
4 Use the remaining options to format or define the table into which the data will be imported and click OK.
See also
“Open and edit existing documents” on page 75
“Import and export tabular data” on page 178
Import Microsoft Office documents (Windows only)
You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you
import a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page.
The file’s size, after Dreamweaver receives the converted HTML, must be less than 300K.
Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the
formatting.
Note: If you use Microsoft Office 97, you cannot import the contents of a Word or Excel document; you must insert a
link to the document.
1 Open the web page into which you want to insert the Word or Excel document.
2 In Design view, do one of the following to select the file:
• Drag the file from its current location to the page where you want the content to appear.
• Select File > Import > Word Document or File > Import > Excel Document.
3 In the Insert Document dialog box, browse to the file you want to add, select any of the formatting options from
the Formatting pop-up menu at the bottom of the dialog box, and then click Open.
Text Only Inserts unformatted text. If the original text is formatted, all formatting will be removed.
Text With Structure Inserts text that retains structure, but does not retain basic formatting. For example, you can
paste text and retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other
formatting.
Text With Structure Plus Basic Formatting Inserts both structured and simple HTML-formatted text (e.g.,
paragraphs and tables, as well as text formatted with the b, i, u, strong, em, hr, abbr, or acronym tag).
Text With Structure Plus Full Formatting Inserts text that retains all structure, HTML formatting, and CSS styles.
September 4, 2007
DREAMWEAVER CS3 235
User Guide
Clean Up Word Paragraph Spacing Eliminates extra space between paragraphs when you paste your text if you
selected Text With Structure or Basic Formatting.
The contents of the Word or Excel document appear in your page.
Create a link to a Word or Excel document
You can insert a link to a Microsoft Word or Excel document in an existing page.
1 Open the page where you want the link to appear.
2 Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want.
3 Select Create A Link, and then click OK.
4 If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy
the document to the site root.
By copying the document to the site’s root folder, you ensure that the document will be available when you publish
the website.
5 When you upload your page to your web server, make sure to upload the Word or Excel file, too.
Your page now contains a link to the Word or Excel document. The link text is the name of the linked file; you can
change the link text.
See also
“Manage links in the site map” on page 288
About formatting text (CSS versus HTML)
Formatting text in Dreamweaver is similar to using a standard word processor. You can set default formatting styles
(Paragraph, Heading 1, Heading 2, and so on) for a block of text, change the font, size, color, and alignment of
selected text, or apply text styles such as bold, italic, code (monospace), and underline.
By default, Dreamweaver formats text using Cascading Style Sheets (CSS). CSS gives web designers and developers
greater control over web page design, while providing improved features for accessibility and reduced file size. As
you format and align text using Dreamweaver formatting commands, CSS rules are embedded in the current
document. This lets you more easily reuse existing styles, as well as name the styles you create. CSS is becoming the
preferred method by which to format text and lay out web pages.
If you prefer, you can use HTML markup tags to format and align text in your web pages. To use HTML tags instead
of CSS, you must change the Dreamweaver default text formatting preferences.
Using CSS is a way to control the style of a web page without compromising its structure. By separating visual design
elements (fonts, colors, margins, and so on) from the structural logic of a web page, CSS gives web designers visual
and typographic control without sacrificing the integrity of the content. In addition, defining typographic design and
page layout from within a single, distinct block of code—without having to resort to image maps, font tags, tables,
and spacer GIFs—allows for faster downloads, streamlined site maintenance, and a central point from which to
control design attributes across multiple web pages.
CSS defines the formatting for all text in a particular class or redefines the formatting for a particular HTML tag
(such as h1, h2, p, or li).
September 4, 2007
DREAMWEAVER CS3 236
User Guide
You can store styles created with CSS directly in the document (the default when you format text using the Property
inspector), or for more power and flexibility, you can store styles in an external style sheet. If you attach an external
style sheet to several web pages, all the pages automatically reflect any changes you make to the style sheet. To access
all CSS rules for a page, use the CSS Styles panel (Window > CSS Styles).
Note: You can combine CSS and HTML 3.2 formatting within the same page. Formatting is applied in a hierarchical
manner: HTML 3.2 formatting overrides formatting applied by external CSS style sheets, and CSS embedded in a
document overrides external CSS.
See also
“Open the CSS Styles panel” on page 128
“Understanding Cascading Style Sheets” on page 120
“Specify HTML instead of CSS” on page 221
Using the Property inspector to format text
The text Property inspector lets you format the currently selected text. You can change the formatting by setting new
options. The style is immediately applied to the text.
As you format text using the Property inspector, Dreamweaver keeps track of the formatting properties you assign
to each text element, and assigns each a label using the naming convention: Style1, Style2, Style3, Stylen. If you assign
the same formatting attributes to two or more text elements, Dreamweaver labels those elements with the same title,
eliminating redundant style names. The label Dreamweaver applies to a given body of text can then be applied using
the Style pop-up menu, letting you build a library of styles within a page, and apply those same styles by simply
selecting the text element in the page and selecting a style from the Style menu. You can rename styles with more
meaningful labels, such as Heading1, Heading2, Body, and TableBody.
September 4, 2007
DREAMWEAVER CS3 237
User Guide
The Style pop-up menu in the Property inspector displays both the names of styles in your page, as well as a preview
of the style’s properties. The properties shown in the preview are font family, font size, font weight, text color, and
background color.
When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the
or tag, respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change
this preference in the General category of the Preferences dialog box (Edit > Preferences).
For a tutorial on formatting text with the Property inspector, see www.adobe.com/go/vid0147.
See also
“Creating and managing CSS” on page 124
“Create a new CSS rule” on page 129
“Set General preferences for Dreamweaver” on page 36
Set text properties in the Property inspector
You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting.
HTML formatting lets you select text formatting options such as font, size, bold, and italic, while CSS formatting lets
you apply a CSS class style to the selected text.
Set CSS formatting in the Property inspector
1 Open the Property inspector (Window > Properties), if it isn’t already open.
2 Select the text you want to format.
September 4, 2007
DREAMWEAVER CS3 238
User Guide
3 Set the CSS options you want to apply to the selected text:
Format Sets the paragraph style of the selected text. Paragraph applies the default format for a
tag, Heading 1
adds an H1 tag, and so on.
Style Displays the class style that is currently applied to the selected text. If no styles have been applied to the
selection, the pop-up menu shows No CSS Style. If multiple styles have been applied to the selection, the menu is
blank.
Use the Style menu to do any of the following:
• Select the style you want to apply to the selection.
• Select None to remove the currently selected style.
• Select Attach Style Sheet to open a dialog box that lets you attach an external style sheet.
Bold Applies either or to the selected text according to the style preference set in the General category
of the Preferences dialog box.
Italic Applies either or to the selected text according to the style preference set in the General category of
the Preferences dialog box.
Set HTML formatting in the Property inspector
1 Open the Property inspector (Window > Properties), if it isn’t already open.
2 Select the text you want to format.
3 Set the options you want to apply to the selected text:
Format Sets the paragraph style of the selected text. Paragraph applies the default format for a
tag, Heading 1
adds an H1 tag, and so on.
Font Combination Applies the selected font combination to the text. Use the pop-up menu to select the font combi-
nation you want to apply, or select Edit Font List to create or edit a font combination.
Size Applies either a specific font size (1 through 7) or a font size (+ or –1 through + or –7) relative to the basefont
size (the default is 3).
Text Color Displays the text in the selected color. Select a web-safe color by clicking the color box, or enter a
hexadecimal value (for example, #FF0000) in the adjacent text field.
Bold Applies either or to the selected text according to the style preference set in the General category
of the Preferences dialog box.
Italic Applies either or to the selected text according to the style preference set in the General category of
the Preferences dialog box.
Left, Center, and Right Align Apply the respective alignment.
Link Creates a hypertext link of the selected text. Click the folder icon to browse to a file in your site; type the URL;
drag the Point-To-File icon to a file in the Files panel; or drag a file from the Files panel into the box.
Target Specifies the frame or window in which the linked document will load:
•
_blank loads the linked file in a new, unnamed browser window.
•
_parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
•
_self loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t
need to specify it.
September 4, 2007
DREAMWEAVER CS3 239
User Guide
•
_top loads the linked file in the full browser window, thereby removing all frames.
Unordered List Creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.
Ordered List Creates a numbered list of the selected text. If no text is selected, a new numbered list is started.
List Item Opens the List Properties dialog box.
Indent and Outdent Indent or remove indentation from the selected text by applying or removing the blockquote
tag. In a list, indenting creates a nested list and removing the indentation unnests the list.
Format paragraphs
Dreamweaver supports all of the web standards used in page- and object-formatting.
Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to apply the
standard paragraph and heading tags.
1 Place the insertion point in the paragraph, or select some of the text in the paragraph.
2 Using the Text > Paragraph Format submenu or the Format pop-up menu in the Property inspector, select an
option:
• Select a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag
associated with the selected style (for example, h1 for Heading 1, h2 for Heading 2, pre for Preformatted text, and
so on) is applied to the entire paragraph.
• Select None to remove a paragraph format.
When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard
paragraph. To change this setting, select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh);
then in the General category, under Editing Options, make sure Switch To Plain Paragraph After Heading is not
selected.
See also
“Set text properties in the Property inspector” on page 237
“Set CSS properties” on page 129
Change the color of text
You can change the default color of all the text in a page, or you can change the color of selected text in the page.
See also
“Use the color picker” on page 223
Define default text colors for a page
❖ Select Modify > Page Properties > Appearance or Links, and then select colors for the Text Color, Link Color,
Visited Links, and Active Links options.
Note: The active link color is the color that a link changes to while it’s being clicked. Some web browsers may not use the
color you specify.
September 4, 2007
DREAMWEAVER CS3 240
User Guide
Change the color of selected text
❖ Select the text and do one of the following:
• Select a color by clicking the color box in the Property inspector.
• Select Text > Color, select a color from the system color picker, and then click OK.
• Enter the color name or hexadecimal number directly in the Property inspector field.
Return text to the default color
1 In the Property inspector, click the color box to open the palette of web-safe colors.
2 Click the Strike-through button (the white square button with a red line through it, found in the upper-right
corner).
Align text
You align text on the page using the Property inspector or the Text > Align submenu. You can center any element on
a page using the Text > Align > Center command.
Align text on a page
1 Select the text you want to align or simply insert the pointer at the beginning of the text.
2 Click an alignment option (Left, Right, or Center) in the Property inspector, or select Text > Align and select an
alignment command.
Center page elements
1 Select the element (image, plug-in, table, or other page element) you want to center.
2 Select Text > Align > Center.
Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a
paragraph.
Indent text
Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides
of the page.
1 Place the insertion point in the paragraph you want to indent.
2 Click the Indent or Outdent button in the Property inspector, select Text > Indent or Outdent, or select List >
Indent or Outdent from the context menu.
Note: You can apply multiple indents to a paragraph. Each time you select this command, the text indents further from
both sides of the document.
Add paragraph spacing
Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return
(Macintosh) to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs.
You can add a single line of space between paragraphs by inserting a line break.
Add a paragraph return
❖ Press Enter (Windows) or Return (Macintosh).
September 4, 2007
DREAMWEAVER CS3 241
User Guide
Add a line break
❖ Do one of the following:
• Press Shift+Enter (Windows) or Shift+Return (Macintosh).
• Select Insert > HTML > Special Characters > Line Break.
• In the Text category of the Insert bar, click the Characters button and select the Line Break icon.
Use horizontal rules
Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects
with one or more rules.
Create a horizontal rule
1 In the Document window, place the insertion point where you want to insert a horizontal rule.
2 Select Insert > HTML > Horizontal Rule.
Modify a horizontal rule
1 In the Document window, select the horizontal rule.
2 Select Window > Properties to open the Property inspector, and modify the properties as desired:
W and H Specify the width and height of the rule in pixels or as a percentage of the page size.
Align Specifies the alignment of the rule (Default, Left, Center, or Right). This setting applies only if the width of the
rule is less than the width of the browser window.
Shading Specifies whether the rule is drawn with shading. Deselect this option to draw the rule in a solid color.
Apply font styles
You can apply text formatting to one letter, or to entire paragraphs and blocks of text in a site. Use the Property
inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such
as bold or italic), and size.
1 Select the text. If no text is selected, the option applies to subsequent text you type.
2 Select from the following options:
• To change the font, select a font combination from the Property inspector or from the Text > Font submenu. Select
Default to remove previously applied fonts; Default applies the default font for the selected text (either the browser
default font or the font assigned to that tag in the CSS style sheet).
• To change the font style, click Bold or Italic in the Property inspector, or select a font style (Bold, Italic, Underline,
and so on) from the Text > Style submenu.
Note: When you use the Property inspector to apply bold or italic style, Dreamweaver applies the or tag,
respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change this preference
in the General category of the Preferences dialog box (Edit > Preferences).
• To change the font size, select a size (1 through 7) from the Property inspector or from the Text > Size submenu.
HTML font sizes are relative, not specific, point sizes. Users set the point size of the default font for their browsers;
this is the font size that they will see when you select Default or 3 in the Property inspector or Text > Size submenu.
Sizes 1 and 2 appear smaller than the default font size; sizes 4 through 7 appear larger. Also, fonts generally look larger
in Windows than on Mac OS, though Macintosh Internet Explorer 5 uses the same default font size as Windows.
September 4, 2007
DREAMWEAVER CS3 242
User Guide
One way to ensure consistency with font size is to use CSS styles with your font size set in pixels.
• To increase or decrease the size of selected text, select a relative size (+ or –1 to + 4 or –3) from the Property
inspector or from either the Text > Size Change submenu.
Note: These numbers indicate a relative difference from the basefont size. The default basefont value is 3. Thus, a +4
value results in a font size of 3 + 4, or 7. The maximum sum for your font size values is 7. If you try to set them higher,
they appear as 7. Dreamweaver does not display the basefont tag (which goes in the head section), although the font
size should appear properly in a browser. To test this, compare text set at 3 and text set at +3.
See also
“Creating pages with CSS” on page 120
“Create a new CSS rule” on page 129
Rename a style
As you format text, Dreamweaver keeps track of the styles you create in each page, and builds a library of styles that
you can reuse. This makes applying the same formatting to a block of text much simpler, as well as letting you create
a more consistent look for your pages.
1 Select Rename from the text Property inspector Style pop-up menu.
2 Select the style you want to rename from the Rename Style pop-up menu.
3 Enter a new name in the New Name text field and click OK.
Modify font combinations
Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text >
Font submenu.
Font combinations determine how a browser displays text in your web page. A browser uses the first font in the
combination that is installed on the user’s system; if none of the fonts in the combination are installed, the browser
displays the text as specified by the user’s browser preferences.
Modify font combinations
1 Select Text > Font > Edit Font List.
2 Select the font combination from the list at the top of the dialog box.
The fonts in the selected combination are listed in the Chosen Fonts list in the lower-left corner of the dialog box. To
the right is a list of all available fonts installed on your system.
3 Do one of the following:
• To add or remove fonts from a font combination, click the arrows button (<< or >>) between the Chosen Fonts
list and the Available Fonts list.
• To add or remove a font combination, click the Plus (+) and Minus (–) buttons at the top of the dialog box.
• To add a font that is not installed on your system, type the font name in the text field below the Available Fonts
list and click the << button to add it to the combination. Adding a font not installed on your system is useful, for
example, for specifying a Windows-only font when you are developing pages on a Macintosh.
• To move the font combination up or down in the list, click the arrow buttons at the top of the dialog box.
September 4, 2007
DREAMWEAVER CS3 243
User Guide
Add a new combination to the font list
1 Select Text > Font > Edit Font List.
2 Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list.
3 Repeat step 2 for each subsequent font in the combination.
To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list
and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for
example, for specifying a Windows-only font when you are developing pages on a Macintosh.
4 When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and
click the << button to move the generic font family to the Chosen Fonts list.
Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen
Fonts list are available on the user’s system, the text appears in the default font associated with the generic font family.
For example, the default monospace font on most systems is Courier.
Insert dates
Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with
or without the time) and provides the option of updating that date whenever you save the file.
Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the
dates/times that a visitor sees when they display your site. They are examples only of the way you want to display this
information.
1 In the Document window, place the insertion point where you want the date to be inserted.
2 Do one of the following:
• Select Insert > Date.
• In the Common category of the Insert bar, click the Date button.
3 In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format
for the time.
4 If you want the inserted date to be updated every time you save the document, select Update Automatically On
Save. If you want the date to become plain text when it’s inserted, and never update automatically, deselect that
option.
5 Click OK to insert the date.
If you have selected Update Automatically On Save, you can edit the date format after it has been inserted into the
document by clicking on the formatted text and selecting Edit Date Format in the Property inspector.
Adding and modifying images
About images
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—
GIF, JPEG, and PNG. GIF and JPEG file formats are the best supported and can be viewed by most browsers.
September 4, 2007
DREAMWEAVER CS3 244
User Guide
PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the
display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and
Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a
browser that supports the PNG format, use GIFs or JPEGs for broader accessibility.
GIF (Graphic Interchange Format) GIF files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other
images with uniform colors and tones.
JPEG (Joint Photographic Experts Group) The JPEG file format is the superior format for photographic or
continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so
does the file size and the file download time. You can often strike a good balance between the quality of the image
and the file size by compressing a JPEG file.
PNG (Portable Network Group) The PNG file format is a patent-free replacement for GIFs that includes support for
indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file
format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as
drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized
as PNG files by Dreamweaver.
Insert an image
When you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML
source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current
site, Dreamweaver asks whether you want to copy the file into the site.
You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners, and then
dynamically display the selected banner’s image when a page is requested.
After you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually
impaired users. These attributes can be edited in HTML code.
For a tutorial on inserting images, see www.adobe.com/go/vid0148.
1 Place the insertion point where you want the image to appear in the Document window and do one of the
following:
• In the Common category of the Insert bar, click the Images icon
.
• In the Common category of the Insert bar, click the Images button and select the Image icon. With the Image icon
displayed in the Insert bar, you can drag the icon to the Document window (or to the Code view window if you
are working in the code).
• Select Insert > Image.
• Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then
skip to step 3.
• Drag an image from the Files panel to the desired location in the Document window; then skip to step 3.
• Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
2 In the dialog box that appears, do one of the following:
• Select File System to choose an image file.
• Select Data Source to choose a dynamic image source.
September 4, 2007
DREAMWEAVER CS3 245
User Guide
• Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites.
3 Browse to select the image or content source you want to insert.
If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you
save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Note: When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e.,
an image that is not available on the local hard drive). If you experience performance problems while working, however,
you might want to disable viewing the image in Design view by deselecting Commands > Display External Files.
4 Click OK. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences (Edit > Preferences).
5 Enter values in the Alternate Text and Long Description text boxes, and click OK.
• In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information
you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing
a link, in the Long Description text box, to a file that gives more information about the image.
• In the Long Description box, enter the location of a file that displays when the user clicks the image or click the
folder icon to browse to the file. This text box provides a link to a file that is related to, or gives more information
about, the image.
Note: You can enter information in one or both text boxes depending on your needs. The screen reader reads the Alt
attribute for the image.
Note: If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or
attributes with it.
6 In the Property inspector (Window > Properties), set properties for the image.
See also
“Make images dynamic” on page 565
“Image maps” on page 293
“Optimize the work space for accessible page design” on page 707
“Set page properties” on page 216
Set image properties
The Images Property inspector allows you to set properties for an image. If you do not see all of the image properties,
click the expander arrow in the lower-right corner.
1 Select Window > Properties to view the Property inspector for a selected image.
2 In the text box below the thumbnail image, enter a name so you can refer to the image when using a Dreamweaver
behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.
September 4, 2007
DREAMWEAVER CS3 246
User Guide
3 Set any of the image options.
W and H The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the
image’s original dimensions when you insert an image in a page.
If you set W and H values that do not correspond to the actual width and height of the image, the image may not
display properly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image
size button that appears to the right of the W and H text boxes in entering a new value.)
Note: You can change these values to scale the display size of this image instance, but this does not reduce download time,
because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all
instances of an image appear at the same size, use an image-editing application to scale images.
Src Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.
Link Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon
to browse to a document on your site, or manually type the URL.
Align Aligns an image and text on the same line.
Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been
set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers,
the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Map Name and Hotspot tools Allow you to label and create a client-side image map.
V Space and H Space Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom
of an image. H Space adds space along the left and right of an image.
Target Specifies the frame or window in which the linked page should load. (This option is not available when the
image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You
can also choose from the following reserved target names:
•
_blank loads the linked file into a new, unnamed browser window.
•
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
•
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually
don’t need to specify it.
•
_top loads the linked file into the full browser window, thereby removing all frames.
Low Src Specifies the image that should load before the main image. Many designers use a 2-bpc (black and white)
version of the main image because it loads quickly and gives visitors an idea of what they’re waiting to see.
Border The width, in pixels, of the image’s border. The default is no border.
Edit Starts the image editor you specified in External Editors preferences and opens the selected image.
Opens the Optimization dialog box.
Optimize
Crop
Trims the size of an image, removing unwanted areas from the selected image.
Resample
Resamples a resized image, improving its picture quality at its new size and shape.
Brightness and Contrast
Sharpen
Adjusts the brightness and contrast settings of an image.
Adjusts the sharpness of an image.
Reset Size
Resets the W and H values to the original size of the image. This button appears to the right of the W
and H text boxes when you adjust the values of the selected image.
September 4, 2007
DREAMWEAVER CS3 247
User Guide
Edit image accessibility attributes in code
If you inserted accessibility attributes for an image, you can edit those values in the HTML code.
1 In the Document window, select the image.
2 Do one of the following:
• Edit the appropriate image attributes in Code view.
• Right-click (Windows) or Control-click (Macintosh), and then select Edit Tag.
• Edit the Alt value in the Property inspector.
Edit images in Dreamweaver
Dreamweaver provides basic image-editing features that let you modify images without having to use an external
image-editing application such as Fireworks. The Dreamweaver image-editing tools are designed to let you easily
work with content designers responsible for creating image files for use on your website.
Note: You do not need to have Fireworks installed on your computer to use the Dreamweaver image-editing features.
❖ Select Modify > Image. Set any of these Dreamweaver image-editing features:
Resample Adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original
image as closely as possible. Resampling an image reduces its file size and improves download performance.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a
bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling
an image to a higher resolution typically causes little loss of quality. Resampling to a lower resolution, however,
always causes data loss and usually a drop in quality.
Crop Edit images by reducing the area of the image. Typically, you’ll want to crop an image to place more emphasis
on the subject of the image, and remove unwanted aspects surrounding the center of interest in the image.
Brightness and Contrast Modifies the contrast or brightness of pixels in an image. This affects the highlights,
shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark
or too light.
Sharpen Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan
an image, or take a digital photo, the default action of most image capturing software is to soften the edges of objects
in the image. This prevents extremely fine details from becoming lost in the pixels from which digital images are
composed. However, to bring out the details in digital image files, it is often necessary to sharpen the image, thereby
increasing edge contrast, and making the image appear sharper.
Note: Dreamweaver image-editing features apply only to JPEG and GIF image file formats. Other bitmap image file
formats cannot be edited using these image-editing features.
Insert an image placeholder
An image placeholder is a graphic you use until final artwork is ready to be added to a web page. You can set the
placeholder’s size and color, as well as provide it with a text label.
1 In the Document window, place the insertion point where you want to insert a placeholder graphic.
2 Select Insert > Image Objects > Image Placeholder.
3 For Name (Optional), enter text you want to appear as a label for the image placeholder. Leave the text box blank
if you do not want a label to appear. The name must begin with a letter and can contain only letters and numbers;
spaces and high ASCII characters are not allowed.
September 4, 2007
DREAMWEAVER CS3 248
User Guide
4 For Width and Height (Required), type a number to set the image size in pixels.
5 For Color (Optional), do one of the following to apply a color:
• Use the color picker to select a color.
• Enter the color’s hexadecimal value (for example, #FF0000).
• Enter a web-safe color name (for example, red).
6 For Alternate Text (Optional), enter text to describe the image for viewers using a text-only browser.
Note: An image tag is automatically inserted into the HTML code containing an empty src attribute.
7 Click OK.
The placeholder’s color, size attributes, and label appear as follows:
When viewed in a browser, the label and size text do not appear.
See also
“Visually resize an image” on page 250
“Use Fireworks to modify Dreamweaver image placeholders” on page 368
Set image placeholder properties
To set properties for an image placeholder, select the placeholder in the Document window; then select Window >
Properties to display the Property inspector. To see all properties, click the expander arrow in the lower-right corner.
Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color
for a placeholder image.
In the placeholder Property inspector, the gray text box and the Align text box are disabled. You can set these
properties in the image Property inspector when you replace the placeholder with an image.
❖ Set any of the following options:
W and H Set the width and height of the image placeholder, in pixels.
Src Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button
to select a replacement image for the placeholder graphic.
Link Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the
folder icon to browse to a document on your site, or manually type the URL.
September 4, 2007
DREAMWEAVER CS3 249
User Guide
Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been
set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers,
the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Create Starts Fireworks to create a replacement image. The Create button is disabled unless Fireworks is also
installed on your computer.
Reset Size Resets the W and H values to the original size of the image.
Color Specifies a color for the image placeholder.
See also
“Use Fireworks to modify Dreamweaver image placeholders” on page 368
Replace an image placeholder
An image placeholder does not display an image in a browser. Before you publish your site you should replace any
image placeholders you’ve added with web-friendly image files, such as GIFs or JPEGs.
If you have Fireworks, you can create a new graphic from the Dreamweaver image placeholder. The new image is set
to the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver.
1 In the Document window, do one of the following:
• Double-click the image placeholder.
• Click the image placeholder to select it; then in the Property inspector (Window > Properties), click the folder
icon next to the Src text box.
2 In the Image Source dialog box, navigate to the image you want to replace the image placeholder with and click OK.
See also
“Use Fireworks to modify Dreamweaver image placeholders” on page 368
Align an image
You can align an image to text, another image, a plug-in, or other elements in the same line. You can also set the
horizontal alignment of an image.
1 Select the image in Design view.
2 Set the alignment attributes of the image in the Property inspector with the Align popup menu.
You can set the alignment in relation to other elements in the same paragraph or line.
Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word
processing applications.
The alignment options are as follows:
Default Specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)
Baseline and Bottom Align the baseline of the text (or other element in the same paragraph) to the bottom of the
selected object.
Top Aligns the top of an image to the top of the tallest item (image or text) in the current line.
Middle Aligns the middle of the image with the baseline of the current line.
September 4, 2007
DREAMWEAVER CS3 250
User Guide
Text Top Aligns the top of the image with the top of the tallest character in the text line.
Absolute Middle Aligns the middle of the image with the middle of the text in the current line.
Absolute Bottom Aligns the bottom of the image with the bottom of the line of text (which includes descenders, as
in the letter g).
Left Places the selected image on the left margin, wrapping text around it to the right. If left-aligned text precedes
the object on the line, it generally forces left-aligned objects to wrap to a new line.
Right Places the image on the right margin, wrapping text around the object to the left. If right-aligned text precedes
the object on the line, it generally forces right-aligned objects to wrap to a new line.
Visually resize an image
You can visually resize elements such as images, plug-ins, Shockwave or Flash files, applets, and ActiveX controls in
Dreamweaver.
Visually resizing an image helps you see how the image affects the layout at different dimensions but it does not scale
the image file to the proportions that you specify. If you visually resize an image in Dreamweaver without using an
image-editing application (such as Fireworks) to scale the image file to the desired size, the user’s browser scales the
image when the page is loaded. This might cause a delay in page download time and the improper display of the
image in the user’s browser. To reduce download time and to ensure that all instances of an image appear at the same
size, use an image-editing application to scale images.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. Resampling
adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as
closely as possible. Resampling an image reduces its file size and improves download performance.
See also
“Edit images in Dreamweaver” on page 247
Visually resize an element
1 Select the element (for example, an image or SWF file) in the Document window.
Resize handles appear at the bottom and right sides of the element and in the lower-right corner. If resize handles
don’t appear, click somewhere other than the element you want to resize and then reselect it, or click the appropriate
tag in the tag selector to select the element.
2 Resize the element by doing one of the following:
• To adjust the width of the element, drag the selection handle on the right side.
• To adjust the height of the element, drag the bottom selection handle.
• To adjust the width and the height of the element at the same time, drag the corner selection handle.
• To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the
corner selection handle.
• To adjust the width and height of an element to a specific size (for example, 1 x 1 pixel), use the Property inspector
to enter a numeric value. Elements can be visually resized to a minimum of 8 x 8 pixels.
3 To return a resized element to its original dimensions, in the Property inspector, delete the values in the W and H
text boxes, or click the Reset Size button in the image Property inspector.
September 4, 2007
DREAMWEAVER CS3 251
User Guide
Revert an image to its original size
❖ Click the Reset size button
in the image Property inspector.
Resample a resized image
1 Resize the image as described above.
2 Click the Resample button
in the image Property inspector.
Note: You cannot resample image placeholders or elements other than bitmap images.
Crop an image
Dreamweaver lets you crop (or trim) bitmap file images.
Note: When you crop an image, the source image file is changed on disk. For this reason, you may want to keep a backup
copy of the image file in the event you need to revert to the original image.
1 Open the page containing the image you want to crop, select the image, and do either of the following:
• Click the Crop Tool icon
in the image Property inspector.
• Select Modify > Image > Crop.
Crop handles appear around the selected image.
2 Adjust the crop handles until the bounding box surrounds the area of the image that you want to keep.
3 Double-click inside the bounding box or press Enter to crop the selection.
4 A dialog box informs you that the image file you are cropping will be changed on disk. Click OK. Every pixel in
the selected bitmap outside the bounding box is removed, but other objects in the image remain.
5 Preview the image and ensure that it meets your expectations. If not, select Edit > Undo Crop to revert to the
original image.
Note: You can undo the effect of the Crop command (and revert to the original image file) up until the time that you quit
Dreamweaver, or edit the file in an external image-editing application.
Optimize an image
You can optimize images in your web pages from within Dreamweaver.
1 Open the page containing the image you want to optimize, select the image, and do either of the following:
• Click the Optimize button
in the image Property inspector.
• Select Modify > Image > Optimize Image In Fireworks.
2 Confirm whether to optimize as a PNG file or use the open image file.
3 Edit the image file, click Update, and save the file.
Adjust the brightness and contrast of an image
Brightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows,
and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too
light.
1 Open the page containing the image you want to adjust, select the image, and do either of the following:
• Click the Brightness/Contrast
button in the image Property inspector.
September 4, 2007
DREAMWEAVER CS3 252
User Guide
• Select Modify > Image > Brightness/Contrast.
2 Drag the Brightness and Contrast sliders to adjust the settings. Values range from -100 to 100.
3 Click OK.
Sharpen an image
Sharpening increases the contrast of pixels around the edges of objects to increase the image’s definition or
sharpness.
1 Open the page containing the image you want to sharpen, select the image, and do either of the following:
• Click the Sharpen button
in the image Property inspector.
• Select Modify > Image > Sharpen.
2 You can specify the degree of sharpening Dreamweaver applies to the image by dragging the slider control, or
entering a value between 0 and 10 in the text box. As you adjust the sharpness of the image using the Sharpness dialog
box, you can preview the change to the image.
3 Click OK when you are satisfied with the image.
4 Save your changes by selecting File > Save, or revert to the original image by selecting Edit > Undo Sharpen.
Note: You can only undo the effect of the Sharpen command (and revert to the original image file) prior to saving the
page containing the image. After you save the page, the changes made to the image are permanently saved.
Create a rollover image
You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the
pointer moves across it.
You must have two images to create the rollover: a primary image (the image displayed when the page first loads)
and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a
rollover should be the same size; if the images are not the same size, Dreamweaver resizes the second image to match
the properties of the first image.
Rollover images are automatically set to respond to the onMouseOver event. You can set an image to respond to a
different event (for example, a mouse click) or change a rollover image.
For a tutorial on creating rollovers, see www.adobe.com/go/vid0159.
1 In the Document window, place the insertion point where you want the rollover to appear.
2 Insert the rollover using one of these methods:
• In the Common category of the Insert bar, click the Images button and select the Rollover Image icon. With the
Rollover Image icon displayed in the Insert bar, you can drag the icon to the Document window.
• Select Insert > Image Objects > Rollover Image.
3 Set the options and click OK.
Image Name The name of the rollover image.
Original image The image you want to display when the page loads. Enter the path in the text box, or click Browse
and select the image.
Rollover Image The image you want to display when the pointer rolls over the original image. Enter the path or click
Browse to select the image.
September 4, 2007
DREAMWEAVER CS3 253
User Guide
Preload Rollover Image Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer
over the image.
Alternate Text (Optional) Text to describe the image for viewers using a text-only browser.
When Clicked Go to URL The file that you want to open when a user clicks the rollover image. Enter the path or click
Browse and select the file.
Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the
rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
4 Select File > Preview in Browser or press F12.
5 In the browser, move the pointer over the original image to see the rollover image.
Note: You cannot see the effect of a rollover image in Design view.
See also
“Apply the Swap Image behavior” on page 363
“Insert a navigation bar” on page 292
Use an external image editor
While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver
after saving the edited image file, any changes you made to the image are visible in the Document window.
You can set up Fireworks as your primary external editor. You can also set which file types an editor opens; and you
can select multiple image editors. For example, you can set preferences to start Fireworks when you want to edit a
GIF, and to start a different image editor when you want to edit a JPG or JPEG.
See also
“Working with Photoshop” on page 374
“Working with Fireworks” on page 367
“Start an external editor for media files” on page 271
Start the external image editor
❖ Do one of the following:
• Double-click the image you want to edit.
• Right-click (Windows) or Control-click (Macintosh) the image you want to edit, then select Edit With > Browse
and select an editor.
• Select the image you want to edit, and click Edit in the Property inspector.
• Double-click the image file in the Files panel to start the primary image editor. If you haven’t specified an image
editor, Dreamweaver starts the default editor for the file type.
Note: When you open an image from the Files panel, the Fireworks integration features are not in effect; Fireworks does
not open the original PNG file. To use the Fireworks integration features, open images from within the Document
window.
If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the
Refresh button in the Property inspector.
September 4, 2007
DREAMWEAVER CS3 254
User Guide
Set an external image editor for an existing file type
You can select an image editor for opening and editing graphic files.
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors in
the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the Extensions list, select the file extension you want to set an external editor for.
3 Click the Add (+) button above the Editors list.
4 In the Select External Editor dialog box, browse to the application you want to start as an editor for this file type.
5 In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type.
6 If you want to set up an additional editor for this file type, repeat steps 3 and 4.
Dreamweaver automatically uses the primary editor when you edit this image type. You can select the other listed
editors from the context menu for the image in the Document window.
Add a new file type to the Extensions list
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors in
the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.
A text box appears in the Extensions list.
3 Type the file extension of the file type you want to start an editor for.
4 To select an external editor for the file type, click the Add (+) button above the Editors list.
5 In the dialog box that appears, select the application you want to use to edit this image type.
6 Click Make Primary if you want this editor to be the primary editor for the image type.
Change an existing editor preference
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors in
the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view
the existing editor(s).
3 In the Editors list, select the editor you want to want to affect, then do one of the following:
• Click the Add (+) or Delete (–) buttons above the Editors list to add or remove an editor.
• Click the Make Primary button, to change which editor starts by default for editing.
September 4, 2007
DREAMWEAVER CS3 255
User Guide
Applying behaviors to images
You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot,
Dreamweaver inserts the HTML source code into the area tag. Three behaviors apply specifically to images: Preload
Images, Swap Image, and Swap Image Restore.
Preload Images Loads images that do not appear on the page right away (such as those that will be swapped in with
behaviors, AP elements, or JavaScript) into the browser cache. This prevents delays caused by downloading when it
is time for the images to appear.
Swap Image Swaps one image for another by changing the SRC attribute of the img tag. Use this action to create
button rollovers and other image effects (including swapping more than one image at a time).
Swap Image Restore Restores the last set of swapped images to their previous source files. This action is automati-
cally added whenever you attach the Swap Image action to an object by default; you should never need to select it
manually.
You can also use behaviors to create more sophisticated navigation systems, such as a navigation bar or a jump menu.
See also
“Insert a jump menu” on page 290
“Insert a navigation bar” on page 292
“Apply the Swap Image behavior” on page 363
“Apply the Preload Images behavior” on page 357
Inserting Flash content
About Flash file types
Dreamweaver comes with Flash objects you can use whether you have Flash installed on your computer or not.
Before you use the Flash commands available in Dreamweaver, you should know about the different Flash file types:
The Flash file (.fla) The source file for any project and is created in the Flash program. This type of file can only be
opened in Flash (not in Dreamweaver or in browsers). You can open the Flash file in Flash, then export it as an SWF
or SWT file to use in browsers.
The Flash SWF file (.swf) A compressed version of the Flash (.fla) file, optimized for viewing on the web. This file can
be played back in browsers and previewed in Dreamweaver, but cannot be edited in Flash. This is the type of file you
create when using the Flash button and Flash text objects.
The Flash template files (.swt) These files enable you to modify and replace information in a Flash SWF file. The files
are used in the Flash button object, which lets you modify the template with your own text or links, to create a custom
SWF to insert in your document. In Dreamweaver, these template files can be found in the Dreamweaver/Configuration/Flash Objects/Flash Buttons and Flash Text folders.
You can download new button templates from the Adobe Exchange for Dreamweaver website
(www.adobe.com/go/dreamweaver_exchange) and place them in your Flash Buttons folder. For more information
on creating new button templates, see the article on that topic at www.adobe.com/go/flash_buttons.
September 4, 2007
DREAMWEAVER CS3 256
User Guide
The Flash element file (.swc) A Flash SWF file that lets you create Rich Internet applications by incorporating them
in a web page. Flash elements have customizable parameters that you can modify to perform different application
functions.
The Flash Video file format (.flv) A video file that contains encoded audio and video data for delivery through Flash®
Player. For example, if you had a QuickTime or Windows Media video file, you would use an encoder (such as Flash®
8 Video Encoder, or Sorensen Squeeze) to convert the video file to an FLV file. For more information, visit the Flash
Video Developer Center at www.adobe.com/go/flv_devcenter.
See also
“Working with Flash” on page 382
“Create and insert a Flash button” on page 257
“Modify a Flash button object” on page 258
“Adding Flash Video content” on page 264
Insert and preview Flash content
Use Dreamweaver to add Flash content (SWF files and Shockwave movies) in your pages, and then preview it in a
document and a browser. You can also set properties for Flash content in the Property inspector.
For a tutorial on adding Flash content to web pages, see www.adobe.com/go/vid0150.
See also
“Working with Flash” on page 382
“Edit a SWF file from Dreamweaver in Flash” on page 382
“Insert Shockwave movies” on page 273
“Adding Flash Video content” on page 264
Insert a SWF file (Flash content)
1 In the Design view of the Document window, place the insertion point where you want to insert the content, then
do one of the following:
• In the Common category of the Insert bar, select Media and click the Flash icon
.
• Select Insert > Media > Flash.
2 In the dialog box that appears, select a Flash file (.swf).
A Flash placeholder appears in the Document window (unlike Flash button and text objects).
Preview Flash content in the Document window
1 In the Document window, click the Flash placeholder to select the Flash content you want to preview.
2 In the Property inspector, click the Play button. Click Stop to end the preview. You can also preview the Flash
content in a browser by pressing F12.
To preview all Flash content in a page, press Control+Alt+Shift+P (Windows) or Shift+Option+Command+P
(Macintosh). All Flash objects and SWF files are set to Play.
September 4, 2007
DREAMWEAVER CS3 257
User Guide
Set Flash and Shockwave movie properties
To ensure the best results in both Internet Explorer and Netscape Navigator, Dreamweaver inserts Flash and
Shockwave movies using both the object and embed tags. (The object tag is defined by Microsoft for ActiveX
controls; embed is defined by Netscape Navigator for plug-ins.) To view the following properties in the Property
inspector, select a Flash SWF file or a Shockwave movie.
❖ Select a Flash SWF file or a Shockwave movie and set the options in the Property inspector (To see all Flash SWF
file properties, click the expander arrow in the lower-right corner of the Property inspector.)
Name Specifies a name to identify the movie for scripting. Enter a name in the unlabeled text box on the far left side
of the Property inspector.
W and H Specify the width and height of the movie, in pixels.
File Specifies the path to the Flash or Shockwave file. Click the folder icon to browse to a file, or type a path.
Src Specifies the path to a Flash source document (FLA), when Dreamweaver and Flash are both installed on your
computer. To edit a Flash file (SWF), you update the movie’s source document.
Edit Start Flash to update a FLA file (a file created in the Flash authoring tool). This option is disabled if you do not
have Flash loaded on your computer.
Reset Size Returns the selected movie to its original size.
Loop Makes the movie play continuously; when unchecked, the movie plays once and stops.
Autoplay Automatically plays the movie when the page loads.
V Space and H Space Specify the number of pixels of white space above, below, and on both sides of the movie.
Quality Controls anti-aliasing during playback of the movie. A movie looks better with a high setting, but it requires
a faster processor to render correctly on the screen. Low emphasizes speed over appearance, whereas High favors
appearance over speed. Auto Low emphasizes speed at first, but improves appearance when possible. Auto High
emphasizes both qualities at first, but sacrifices appearance for speed if necessary.
Scale Determines how the movie fits into the dimensions set in the width and height text boxes. The Default setting
displays the entire movie.
No Border Fits the movie into the set dimensions so that no borders show and maintains the original aspect ratio.
Exact Fit Scales the movie to the set dimensions, regardless of the aspect ratio.
Align Determines how the movie is aligned on the page.
Bg Specifies a background color for the movie area. This color also appears while the movie is not playing (while
loading and after playing).
Parameters Opens a dialog box for entering additional parameters to pass to the movie. The movie must be designed
to receive these additional parameters.
Create and insert a Flash button
You can create and insert Flash buttons in your documents while working in Design view or Code view. Having Flash
installed is not required to do this; the Flash button object is an updateable button based on a Flash template.
Note: You must save your document before inserting a Flash button or text object.
1 In the Document window, place the insertion point where you want to insert the Flash button.
September 4, 2007
DREAMWEAVER CS3 258
User Guide
2 To open the Insert Flash Object dialog box, do one of the following:
• In the Common category of the Insert bar, select Media and click the Flash Button icon
.
• Select Insert > Media > Flash Button.
3 Complete the Insert Flash Button dialog box, and click Apply or OK to insert the Flash button in the Document
window.
To preview the button in Design view, click Apply. The dialog box remains open, and you can preview the button in
your document.
Modify a Flash button object
You can modify the properties and content of a Flash button object.
The Property inspector displays the Flash button properties. You can use the Property inspector to specify the
button’s HTML physical attributes, such as width, height, and background color. (Click the expander arrow in the
lower-right corner to see more properties.)
To modify other content properties of a Flash button, such as button text and color, and the URL the browser opens
when the button is clicked, use the Insert Flash Button dialog box.
See also
“Insert a Flash text object” on page 260
“Align an image” on page 249
“Visually resize an image” on page 250
“Use parameters to control media objects” on page 277
“Add and manage extensions in Dreamweaver” on page 710
Modify Flash object properties in the Property inspector
1 In the Document window, click the Flash button object to select it.
2 Open the Property inspector, if it is not already open. (Click the expander arrow in the lower-right corner to see
more properties.)
3 Set the options in the Property inspector.
Name Specifies the name to identify the button for scripting. Enter a name in the unlabeled text box on the far left
side of the Property inspector.
W and H Specify the width and height of the object, in pixels. (In Design view, you can resize the object easily by
using the resizing handles. You can return the object to its original size by selecting Reset Size in the Property
inspector.)
File Specifies the path to the Flash object file. Click the folder icon to browse to a file, or type a path.
Edit Opens the Flash object dialog box for edits to the selected Flash object.
Reset Size Resets the selected object to the original size.
V Space and H Space Specify the number of pixels of white space above, below, and on both sides of the button.
Quality Sets the quality parameter for the object and embed tags that define the button. Flash content looks better
with a high setting, but it requires a faster processor to render correctly on the screen. Low emphasizes speed over
September 4, 2007
DREAMWEAVER CS3 259
User Guide
appearance, whereas High favors appearance over speed. Auto Low emphasizes speed at first, but improves
appearance when possible. Auto High emphasizes both qualities at first, but sacrifices appearance for speed if
necessary.
Scale Sets the scale parameter for the object and embed tags that define the button or text object. This parameter
defines how the Flash content displays within the area defined for the SWF file by the width and height values. The
choices are Default (Show All), No Border, and Exact Fit. Show All makes the entire SWF file visible in the specified
area, maintaining the aspect ratio of the SWF file and preventing distortion; borders of the background color may
appear on two sides of the SWF file. No Border is similar to Show All, except portions of the SWF file may be
cropped. With Exact Fit, the entire SWF file fills the specified area, but the aspect ratio of the SWF file is not
maintained and distortion may occur.
Align Defines how the object is aligned on the page.
Bg Specifies a background color for the object.
Play/Stop Previews the Flash object in the Document window. Click the green Play button to see the object in Play
mode; click the red Stop button to stop the object from playing and be able to edit it.
Parameters Opens a dialog box for entering additional parameters.
Modify Flash object content
1 To make changes to content, display the Insert Flash Button dialog box using one of the following methods:
• Double-click the Flash button object.
• Click Edit in the Property inspector.
• Right-click (Windows) or Control-click (Macintosh), and select Edit from the context menu.
2 Select a button style from the Style list.
You can view an example of the button in the Sample text box. Click the sample to see how it functions in the browser.
Note: While you are defining the Flash button (for example, changing text or font choices), the Sample box does not
automatically update to reflect the changes. These changes will appear when you close the dialog box and view the button
in Design view.
3 (Optional) In the Button Text box, type the text you want to appear.
This text box only accepts changes if the selected button has a {Button Text} parameter defined. This is shown in the
Sample text box. The text you type in replaces the {Button Text} when you preview the file.
4 From the Font menu, select the button text font.
If the default font for a button is not available on your system, select another font from the menu. The Sample box
doesn’t display the font, but you can click Apply to insert the button in the page to preview the text.
5 In the Size box, enter a numeric value for the font size.
6 (Optional) In the Link text box, enter a document-relative or absolute link for the button.
This is the URL the browser will open when the visitor clicks the button.
7 (Optional) In the Target box, specify the location in which the linked document will open. You can select a frame
or window option in the pop-up menu. Frame names are listed only if the Flash object is being edited while in a
frameset.
8 (Optional) In the Bg Color box, set the background color for the Flash SWF file. Use the color picker or type in a
web hexadecimal value (such as #FFFFFF).
September 4, 2007
DREAMWEAVER CS3 260
User Guide
9 In the Save As box, enter a filename to save the new SWF file.
You can use the default filename (for example, button1.swf), or type in a new name. If the file contains a documentrelative link, you must save the file to the same directory as the current HTML document to maintain
document-relative links.
10 Click Get More Styles to go the Adobe Exchange site and download more button styles.
11 Click Apply or OK to insert the Flash button in the Document window.
Select Apply to see changes in Design view, while keeping the dialog box open—this way you can continue making
changes to the button.
Preview a Flash button object in the document
You can preview a Flash button in the Dreamweaver Document window. It’s also a good idea to preview your
document in the browser to see how the Flash button looks.
1 While in Design view, in the document, select the Flash button object.
2 In the Property inspector, click Play.
3 Click Stop to end the preview.
Note: You can’t edit the Flash button object while it is playing.
Insert a Flash text object
The Flash text object lets you create and insert a Flash SWF file that contains just text. This allows you to create a
small, vector-graphic movie with the designer fonts and text of your choice.
1 In the Document window, place the insertion point where you want to insert the Flash text.
2 To open the Insert Flash Text dialog box, do one of the following:
• In the Common category of the Insert bar, select Media and click the Flash Text icon.
• Select Insert > Media > Flash Text.
3 Complete the Insert Flash Text dialog box, and click Apply or OK to insert the Flash text in the Document
window.
If you click Apply, the dialog box remains open, and you can preview the text in your document.
To modify or play the Flash text object, use the same procedure as you would for a Flash button.
See also
“Modify a Flash button object” on page 258
“Working with Flash” on page 382
Downloading and installing Flash elements
To use Flash elements in your web pages, you must first add the elements to Dreamweaver using the Adobe®
Extension Manager. The Extension Manager is a separate application that lets you install and manage extensions in
Adobe applications. Start the Extension Manager from Dreamweaver by selecting Commands > Manage Extensions.
September 4, 2007
DREAMWEAVER CS3 261
User Guide
To find the latest Flash elements for Dreamweaver, use the Adobe Exchange website at
www.adobe.com/go/dreamweaver_exchange. Once there, you can log in and download Flash elements and other
Dreamweaver extensions (many of which are free), join discussion groups, view user ratings and reviews, and install
and use the Extension Manager. You must install the Extension Manager before you can install new Flash elements
or other Dreamweaver extensions.
You can use the Extension Manager to install Flash elements (as well as other Dreamweaver extensions).
See also
“Add and manage extensions in Dreamweaver” on page 710
Insert Flash elements
Using Dreamweaver you can insert Flash elements into your documents. Flash elements let you quickly and easily
build Rich Internet Applications using prebuilt elements.
1 In the Document window, place the insertion point where you want to insert a Flash element and do one of the
following:
• In the Common category of the Insert bar, click the Media button and select the Flash element you want to insert.
• Select Insert > Media > Flash element name.
Dreamweaver includes one Flash element called Image Viewer.
The Save Flash Element dialog box appears.
2 Enter a filename for the Flash element and save it to an appropriate location within your site.
3 Click OK.
The Flash element placeholder appears in the document. You can modify the properties of the Flash element using
the Tag and Property inspectors.
4 Select File > Preview in Browser to preview the Flash element.
Edit Flash elements
You edit Flash element attributes using the Tag and Property inspectors.
The Tag inspector and the Property inspector both allow you to view and edit a Flash component’s attributes. The
Tag inspector enables you to view and edit customizable attributes (parameters) associated with a given component.
The Property inspector lets you modify the height, width, and SRC attributes of a Flash element, as well as a way to
preview the Flash element in Design view.
1 Do one of the following in the Document window:
• In Design view, select the Flash element.
• In Code view, click anywhere in a Flash component’s name or in its contents.
2 If it is not already displayed, open the Tag inspector (Window > Tag inspector).
3 Edit the Flash element attributes using the Tag inspector and the Property inspector.
• Type a new value for the attribute in the attribute-value column, to the right of the attribute name.
• To change an attribute value, select the value and edit it.
September 4, 2007
DREAMWEAVER CS3 262
User Guide
• To add a value for an attribute with no value, click in the attribute-value column to the right of the attribute and
add a value (see the next procedure).
• If the attribute takes a URL value, enter the URL.
• If the attribute takes pre-defined values, select a value from the pop-up menu (or the color picker) to the right of
the attribute-value column.
• If the attribute takes a value from a source of dynamic content (such as a database), click the Dynamic Data button
to the right of the attribute-value column. Then select a source.
4 Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your
document.
See also
“Defining sources of dynamic content” on page 547
Use the Image Viewer Flash element
Adobe Dreamweaver CS3 contains a Flash element you can use in your pages: a Flash image viewer that can double
as a web photo album.
The Image Viewer element is a resizable application for loading and viewing a series of JPEG or SWF images. You
define a list of images, along with a link and caption for each image.
Users can view images in order with the previous and next buttons, or jump to a specific image by entering that
image's number. You can also set the images to play in a slide-show format.
Note: Website visitors must have Flash® Player 7 or later installed to see any Image Viewers in your pages.
1 Place the insertion point in your page where you want the Image Viewer to appear and select Insert > Media >
Image Viewer.
2 In the Save Flash Element dialog box, browse to a location in your site to save the element, enter a name, and click Save.
Note: It’s a good idea to save the Flash element in the same Dreamweaver site as the page to which you are adding the
Image Viewer.
The Flash element placeholder appears in your page and the Tag inspector opens.
3 Select the Flash element placeholder if it’s not already selected.
4 In the Tag inspector (Window > Tag inspector), click the field beside the imageURLs parameter, and click the Edit
Array Values icon at the end of the line.
5 In the Edit imageURLs Array dialog box, click the Minus (-) button to remove placeholder elements; to add
images, click the Plus (+) button, click the folder icon next to the blank value line that appears, and select the image
you want to add. You can add JPEG or SWF files.
Note: It’s a good idea to use files that are located in the same Dreamweaver site as the page to which you are adding the
Image Viewer.
6 Click OK to close the Edit imageURLs Array dialog box.
7 (Optional) Use the Tag inspector to set other parameters for the Image Viewer.
Note: You can also set properties for the Image Viewer in the Property inspector. For more information, select the Flash
element, and click the Help icon in the Property inspector.
September 4, 2007
DREAMWEAVER CS3 263
User Guide
8 With the Image Viewer placeholder selected, click the Play button in the expanded Property inspector to start the
Image Viewer, and use the following Image Viewer controls to view images:
• Click the Next or Previous button to view sequential images.
• Enter a number in the text box to skip to a specific image.
• Click the Play button to view the images as a slide show; click the Stop button to stop the slide show format.
9 Click the Stop button in the expanded Property inspector to stop playing the Image Viewer.
Image Viewer parameters
Parameter
Description
bgColor
Specifies the background color.
frameColor
Specifies the color of the border for the images. Set the
frameShow parameter to Yes to see the border.
frameShow
Indicates whether a border appears around each image.
frameThickness
Specifies the size, in pixels, for the border around each
image.
captionColor
Specifies the color of the image captions contained in
imageCaptions.
captionFont
Specifies the font for the image captions contained in
imageCaptions.
captionSize
Indicates the point size of the image captions contained
in imageCaptions.
imageCaptions
Contains the captions for each image specified in
imageURLs. Captions can be used for some, all, or
none of the images.
imageLinks
Contains a URL for each image specified in
imageURLs. LinkURLs can be used for some, all, or
none of the images.
imageURLs
Contains the location of the images to appear in the
Image Viewer. Only non-progressive JPEG or SWF files
can be used.
imgLinkTarget
Specifies the browser window in which to load the URLs
specified in linkURLs. This parameter can be set to
_blank, _self, _top, or _parent.
showControls
Indicates whether the Image Viewer controls appear
when the user plays the Flash Element.
slideAutoPlay
Determines whether to play the images in a slide show.
If set to true, the images begin playing in a slide show as
soon as the first image loads.
slideDelay
Indicates the amount of time, in seconds, to wait
between each image when the Play button is pressed or
autoPlay is enabled. Images can change less often
than the time specified for this parameter if they take
longer to load.
slideLoop
Specifies that the image slide show plays in a continuous
loop.
September 4, 2007
DREAMWEAVER CS3 264
User Guide
Parameter
Description
title
Specifies the title that appears at the top of the Image
Viewer.
titleColor
Specifies the color of the title contained in title.
titleFont
Specifies the font for the Image Viewer title contained in
title.
titleSize
Indicates the point size of the Image Viewer title
contained in title.
transitionsType
Indicates how images appear in the Image Viewer. Select
from several loading options.
Insert FlashPaper documents
You can insert Adobe® FlashPaper™ documents in your web pages. When a page containing the FlashPaper document
is opened in a browser, the user can browse all the pages in the FlashPaper document without loading new web pages.
The user can also search the document, print it, and zoom in or out.
For more information on FlashPaper, see the Adobe website at www.adobe.com/go/flashpaper.
1 In the Document window, place the insertion point where you want the FlashPaper document to appear on your
page, and then select Insert > Media > FlashPaper.
2 In the Insert FlashPaper dialog box, browse to and select a FlashPaper document.
3 If you want, specify the dimensions of the FlashPaper object on the web page by entering a width and height in
pixels. FlashPaper will scale the document to fit the width.
4 Click OK to insert the document in the page.
Because a FlashPaper document is a Flash object, a Flash placeholder appears on the page.
5 To preview the FlashPaper document, click the placeholder and then click the Play button in the Property
inspector.
6 Click Stop to end the preview. You can also preview the document in a browser by pressing F12. The FlashPaper
toolbar is fully functional in the browser.
To preview all Flash content in a page, press Control+Alt+Shift+P (Windows) or Shift+Option+Command+P
(Macintosh). All Flash objects and SWF files are set to Play.
7 If you want, set other properties in the Property inspector.
As a Flash object, the FlashPaper object shares the Flash object’s Property inspector. For information on setting the
properties, click the Help button in the Property inspector.
Adding Flash Video content
Insert Flash Video
You can easily insert Flash Video content in your web pages without using the Flash authoring tool. You must have
an encoded Flash Video (FLV) file before you begin.
September 4, 2007
DREAMWEAVER CS3 265
User Guide
Dreamweaver inserts the Flash Video component; when viewed in a browser, this component displays the Flash
Video content you select, as well as a set of playback controls.
Dreamweaver gives you the following options for delivering Flash Video to your site visitors:
Progressive Download Video Downloads the Flash Video (FLV) file to the site visitor’s hard disk and then plays it.
Unlike traditional “download and play” methods of video delivery, however, progressive download allows the video
file to start playing before the download is complete.
Streaming Video Streams the Flash Video content and plays it on a web page after a short buffer period that ensures
smooth playback. To enable streaming video on your web pages, you must have access to Adobe® Flash® Media
Server.
You must have an encoded Flash Video (FLV) file before you can use it in Dreamweaver. You can insert video files
created with two kinds of codecs (compression/decompression technologies): Sorenson Squeeze and On2.
• If you created your video with the Sorenson Squeeze codec, site visitors will need Flash® Player 7 from Adobe or
later to play progressive download video; they will need Flash Player 6.0.79 or later to play streaming video.
• If you created your video with the On2 codec, site visitors will need Flash Player 8 or later.
After inserting a Flash Video file in a page, you can insert code in the page to detect whether the user has the correct
version of Flash Player to view the Flash Video. If they don’t have the correct version, they will be prompted to
download the latest version of Flash Player.
For more information about Flash Video, visit the Flash Video Developer Center at
www.adobe.com/go/flv_devcenter.
Insert a Flash Video
1 Select Insert > Media > Flash Video.
2 In the Insert Flash Video dialog box, select Progressive Download or Streaming Video from the Video Type
pop-up menu.
3 Complete the rest of the dialog box options and click OK.
September 4, 2007
DREAMWEAVER CS3 266
User Guide
Set options for progressive download video
The Insert Flash Video dialog box lets you set options for progressive download delivery of a Flash Video (FLV) file
inserted in a web page.
1 Select Insert > Media > Flash Video (or click the Flash Video icon in the Common insert bar).
2 In the Insert Flash Video dialog box, select Progressive Download Video from the Video Type menu.
3 Specify the following options:
URL Specifies a relative or absolute path to the FLV file. To specify a relative path (for example, mypath/myvideo.flv),
click the Browse button, navigate to the FLV file, and select it. To specify an absolute path, type the URL (for example,
http://www.example.com/myvideo.flv) of the FLV file.
Note: For the video player to function correctly, the FLV file must contain metadata. FLV files created with Flash
Communication Server 1.5.2, FLV Exporter version 1.2, and Sorenson Squeeze 4.0 automatically contain metadata.
On the Macintosh, you must use an absolute path if you are pointing to FLV files in directories that are two or more
levels up from the HTML file.
Skin Specifies the appearance of the Flash Video component. A preview of the selected skin appears beneath the
Skin pop-up menu.
Width Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file,
click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.
Height Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV
file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.
Constrain Maintains the same aspect ratio between the width and height of the Flash Video component. This option
is selected by default.
Auto Play Specifies whether to play the video when the web page is opened.
Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing.
Prompt Users To Download Flash Player If Necessary Inserts code in the page that detects the version of Flash Player
required to view the Flash Video, and prompts the user to download the latest version of Flash Player if they don’t
have the required version.
Message Specifies the message that will be displayed if the user needs to download the latest version of Flash Player
to view the Flash Video.
4 Click OK to close the dialog box and add the Flash Video content to your web page.
The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your
Flash Video content on a web page. (To see the new files, you may need to click the Refresh button in the Files panel.)
These files are stored in the same directory as the HTML file to which you’re adding Flash Video content. When you
upload the HTML page containing Flash Video content, Dreamweaver uploads these files as dependent files (as long
as you click Yes in the Put Dependent Files dialog box).
Set options for streaming video
The Insert Flash Video dialog box lets you set options for streaming video download of a Flash Video (FLV) file
inserted in a web page.
1 Select Insert > Media > Flash Video (or click the Flash Video icon in the Common insert bar).
September 4, 2007
DREAMWEAVER CS3 267
User Guide
2 Select Streaming Video from the Video Type pop-up menu.
Server URI Specifies the server name, application name, and instance name in the form
rtmp://www.example.com/app_name/instance_name.
Stream Name Specifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension
is optional.
Note: For the video player to function correctly, the FLV file must contain metadata. FLV files created with Flash®
Communication Server 1.5.2, FLV Exporter version 1.2, and Sorenson Squeeze 4.0 automatically contain metadata.
Skin Specifies the appearance of the Flash Video component. A preview of the selected skin appears beneath the
Skin pop-up menu.
Width Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file,
click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.
Height Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV
file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.
Constrain Maintains the same aspect ratio between the width and height of the Flash Video component. This option
is selected by default.
Live Video Feed Specifies whether the Flash Video content is live. If Live Video Feed is selected, Flash Player will play
a live video feed streamed from Flash® Media Server. The name of the live video feed is the name specified in the
Stream Name text box.
Note: When you select Live Video Feed, only the volume control appears on the component’s skin, because you cannot
manipulate live video. Additionally, the Auto Play and Auto Rewind options have no effect.
Auto Play Specifies whether to play the video when the web page is opened.
Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing.
Buffer Time Specifies the time, in seconds, required for buffering before the video starts playing. The default buffer
time is set to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the
video starts playing as soon as a connection is made with the server.) You might want to set a buffer time if you are
delivering video that has a higher bit rate than the site visitor’s connection speed, or when Internet traffic might cause
bandwidth or connectivity problems. For example, if you want to send 15 seconds of video to the web page before
the web page starts to play the video, set the buffer time to 15.
Prompt Users to Download Flash Player if Necessary Inserts code in the page that detects the version of Flash Player
required to view the Flash Video, and prompts the user to download the latest version of Flash Player if they don’t
have the required version.
Message Specifies the message that will be displayed if the user needs to download the latest version of Flash Player
to view the Flash Video.
3 Click OK to close the dialog box and add the Flash Video content to your web page.
The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your
Flash Video on a web page. The command also generates a main.asc file that you must upload to your Flash Media
Server. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the
same directory as the HTML file to which you’re adding Flash Video content. When you upload the HTML page
containing Flash Video content, don’t forget to upload the SWF files to your web server, and the main.asc file to your
Flash Media Server.
September 4, 2007
DREAMWEAVER CS3 268
User Guide
Note: If you already have a main.asc file on your server, check with your server administrator before uploading the
main.asc file generated by the Insert Flash Video command.
You can easily upload all of the required media files by selecting the Flash Video component placeholder in the
Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window >
Properties). To see a list of required files, click Show required files.
Note: The Upload Media button does not upload the HTML file that contains the Flash Video content.
Detect the Flash Player version to view the Flash Video
When inserting a Flash Video file in your page, you can also insert code to detect whether the user has the correct
version of the Flash Player to view the Flash Video. If they don’t have the correct version, they will be prompted to
download the latest version of Flash Player.
A different version of Flash Player may be needed to view a Flash Video depending on the codec used to create the
video. If your video was created with the Sorenson Squeeze codec, site visitors will need Flash Player 7 or later to play
progressive download video, and they’ll need Flash Player 6.0.79 or later to play streaming video. If your video was
created with the On2 codec, site visitors will need Flash Player 8 or later.
Insert code that detects the Flash Player version
1 When inserting a Flash Video in a page, select the option Prompt Users To Download Flash Player If Necessary
in the Insert Flash Video dialog box.
If the Flash Video is already in your page, delete it and insert it again with the option selected.
Note: If you insert another Flash Video that requires a higher version of Flash Player than the first video, the detection
code prompts the user to download it.
2 Accept the default warning message, or provide one of your own.
If you decide to remove the Flash Video from your page, you no longer need the detection code. You can use
Dreamweaver to remove it.
Remove the code that detects the Flash Player version
❖ Select Commands > Remove Flash Video Detection.
Edit or delete a Flash Video component
To change the settings for the Flash Video content in your web page, you must either select the Flash Video
component placeholder in the Dreamweaver Document window and use the Property inspector, or you must delete
the Flash Video component and reinsert it by selecting Insert > Media > Flash Video.
Edit the Flash Video component
1 Select the Flash Video component placeholder in the Dreamweaver Document window by clicking the Flash
Video icon at the center of the placeholder.
2 Open the Property inspector (Window > Properties) and make your changes.
Note: You cannot change video types (from progressive download to streaming, for example) by using the Property
inspector. To change the video type, you must delete the Flash Video component, and reinsert it by selecting Insert >
Media > Flash Video.
September 4, 2007
DREAMWEAVER CS3 269
User Guide
Delete the Flash Video component
❖ Select the Flash Video component placeholder in the Dreamweaver Document window and press Delete.
Adding Sound
Audio file formats
You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi,
and .mp3. Some factors to consider before deciding on a format and method for adding sound are its purpose, your
audience, file size, sound quality, and differences in browsers.
Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file
to a Flash SWF file and then embed the SWF file to improve consistency.
The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design.
.midi or .mid (Musical Instrument Digital Interface) This format is for instrumental music. MIDI files are supported
by many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on
a visitor’s sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be
synthesized on a computer with special hardware and software.
.wav (Waveform Extension) These files have good sound quality, are supported by many browsers, and don’t require
a plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size
severely limits the length of sound clips that you can use on your web pages.
.aif (Audio Interchange File Format, or AIFF) The AIFF format, like WAV format, has good sound quality, can be
played by most browsers, and doesn’t require a plug-in; you can also record AIFF files from a CD, tape, microphone,
and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.
.mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) A compressed format that makes sound files
substantially smaller. The sound quality is very good: if an mp3 file is recorded and compressed properly, its quality
can rival that of a CD. mp3 technology lets you “stream” the file so that a visitor doesn’t have to wait for the entire
file to download before hearing it. However, the file size is larger than a Real Audio file, so an entire song could still
take quite a while to download over a typical dial-up (telephone line) modem connection. To play mp3 files, visitors
must download and install a helper application or plug-in, such as QuickTime, Windows Media Player or RealPlayer.
.ra, .ram, .rpm, or Real Audio This format has a high degree of compression, with smaller file sizes than mp3. Entire
song files can be downloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web
server, visitors can begin listening to the sound before the file has completely downloaded. Visitors must download
and install the RealPlayer helper application or plug-in to play these files.
.qt, .qtm, .mov or QuickTime This format is both an audio and video format developed by Apple Computer.
QuickTime is included with Apple Macintosh operating systems, and is used by most Macintosh applications that
use audio, video, or animation. PCs can also play files in QuickTime format, but require a special QuickTime driver.
QuickTime supports most encoding formats, including Cinepak, JPEG, and MPEG.
Note: In addition to the more common formats listed above, there are many different audio and video file formats
available for use on the web. If you encounter a media file format that you are unfamiliar with, locate the creator of the
format for information on how best to use and deploy it.
September 4, 2007
DREAMWEAVER CS3 270
User Guide
See also
“Insert and edit media objects” on page 270
Link to an audio file
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound
files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience.
1 Select the text or image you want to use as the link to the audio file.
2 In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the
file’s path and name in the Link text box.
Embed a sound file
Embedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have
the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or
if you want to control the volume, the way the player looks on the page, or the beginning and ending points of the
sound file.
When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how
visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the
sound, in the event that visitors don’t want to listen to the audio content.
1 In Design view, place the insertion point where you want to embed the file and do one of the following:
• In the Common category of the Insert bar, click the Media button and select the Plugin icon from the pop-up menu.
• Select Insert > Media > Plugin.
2 In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the
file’s path and name in the Link text box.
3 Enter the width and height by entering the values in the appropriate text boxes or by resizing the plug-in placeholder in the Document window.
These values determine the size at which the audio controls are displayed in the browser.
See also
“Insert Netscape Navigator plug-in content” on page 274
Adding other media objects
Insert and edit media objects
You can insert Flash SWF files or objects, QuickTime or Shockwave movies, Java applets, ActiveX controls, or other
audio or video objects in a Dreamweaver document. If you inserted accessibility attributes with a media object, you
can set the accessibility attributes and edit those values in the HTML code.
1 Place the insertion point in the Document window where you want to insert the object.
September 4, 2007
DREAMWEAVER CS3 271
User Guide
2 Insert the object by doing one of the following:
• In the Common category of the Insert bar, click the Media button and select the icon for the type of object you
want to insert.
• Select the appropriate object from the Insert > Media submenu.
• If the object you want to insert is not a Flash, Shockwave, Applet, or ActiveX object, select Plugin from the Insert >
Media submenu.
A dialog box appears letting you select a source file and specify certain parameters for the media object.
To prevent such dialog boxes from appearing, select Edit > Preferences > General (Windows) or Dreamweaver >
Preferences > General (Macintosh) and deselect the Show Dialog When Inserting Objects option. To override
whatever preference is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh) key while
inserting the object. (For example, to insert a placeholder for a Shockwave movie without specifying the file, hold down
Control or Option, and either click the Shockwave button in Media pop-up menu of the Common Insert bar, or select
Insert > Media > Shockwave.)
3 Complete the Select File or Insert Flash dialog box, and click OK.
Note: The Accessibility Attributes dialog box appears if you have chosen to show attributes when inserting media in the
Edit > Preferences dialog box.
4 Set the accessibility attributes.
Note: You can also edit media object attributes by selecting the object and editing the HTML code in Code view, or rightclicking (Windows) or Control-clicking (Macintosh), and selecting Edit Tag Code.
Title Enter a title for the media object.
Access Key Enter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets
a visitor to the site use the Control key (Windows) with the Access Key to access the object. For example, if you enter
B as the Access Key, use Control+B to select the object in the browser.
Tab Index Enter a number for the tab order of the form object. Setting a tab order is useful when you have other links
and form objects on the page and need the user to tab through them in a specific order. If you set tab order for one
object, be sure to set the tab order for all of them.
5 Click OK to insert the media object.
Note: If you click Cancel, a media object placeholder appears in the document, but Dreamweaver does not associate
accessibility tags or attributes with it.
To specify a source file, or to set dimensions and other parameters and attributes, use the Property inspector for each
object. You can edit accessibility attributes for an object.
See also
“Optimize the work space for accessible page design” on page 707
“Insert Netscape Navigator plug-in content” on page 274
Start an external editor for media files
You can start an external editor from Dreamweaver to edit most media files. You can also specify the editor you want
Dreamweaver to start to edit the file.
1 Make sure the media file type is associated to an editor on your system.
September 4, 2007
DREAMWEAVER CS3 272
User Guide
To find out what editor is associated with the file type, select Edit > Preferences in Dreamweaver and select File
Types/Editors from the Category list. Click the file’s extension in the Extensions column to view the associated editor
or editors in the Editors column. You can change the editor associated to a file type.
2 Double-click the media file in the Files panel to open it in the external editor.
The editor that starts when you double-click the file in the Files panel is called the primary editor. If you double-click
an image file, for example, Dreamweaver opens the file in the primary external image editor such as Adobe
Fireworks.
3 If you don’t want to use the primary external editor to edit the file, you can use another editor on your system to
edit the file by doing one of the following:
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the filename and select Open With from
the context menu.
• In Design view, right-click (Windows) or Control-click (Macintosh) the media element within the current page,
and select Edit With from the context menu.
Specify the editor to start from Dreamweaver
You can specify the editor you want Dreamweaver to use for editing a file type, and add or delete file types that
Dreamweaver recognizes.
Explicitly specify which external editors should be started for a given file type
1 Select Edit > Preferences and select File Types/Editors from the Category list.
Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a
selected extension are listed on the right under Editors.
2 Select the file type extension in the Extensions list and do one of the following:
• To associate a new editor with the file type, click the Plus (+) button above the Editors list and complete the dialog
box that appears.
For example, select the application icon for Acrobat to associate it with the file type.
• To make an editor the primary editor for a file type (that is, the editor that opens when you double-click the file
type in the Files panel), select the editor in the Editors list and click Make Primary.
• To dissociate an editor from a file type, select the editor in the Editors list and click the Minus (-) button above the
Editors list.
Add a new file type and associated editor
1 Click the Plus (+) button above the Extensions list and enter a file type extension (including the period at the
beginning of the extension) or several related extensions separated by spaces.
For example, you might enter .xml .xsl if you wanted to associate them with an XML editor installed on your
system.
2 Select an editor for the file type by clicking the Plus (+) button above the Editors list and completing the dialog
box that appears.
Remove a file type
❖ Select the file type in the Extensions list and click the Minus (-) button above the Extensions list.
Note: You can’t undo after removing a file type, so be sure that you want to remove it.
September 4, 2007
DREAMWEAVER CS3 273
User Guide
Use Design Notes with media objects
As with other objects in Dreamweaver, you can add Design Notes to a media object. Design Notes are notes
associated with a particular file, that are stored in a separate file. You can use Design Notes to keep track of extra file
information associated with your documents, such as image source filenames and comments on file status.
1 Right-click (Windows) or Control-click (Macintosh) the object in the Document window.
Note: You must define your site before adding Design Notes to any object.
2 Select Design Notes from the context menu.
3 Enter the information you want in the Design Note.
You can also add a Design Note to a media object from the Files panel by selecting the file, revealing the context
menu, and choosing Design Notes from the context menu.
See also
“Enable and disable Design Notes for a site” on page 102
“Storing file information in Design Notes” on page 102
Insert Shockwave movies
You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for
interactive multimedia on the web, is a compressed format that allows media files created in Macromedia® Director®
from Adobe to be downloaded quickly and played by most popular browsers.
1 In the Document window, place the insertion point where you want to insert a Shockwave movie and do one of
the following:
• In the Common category of the Insert bar, click the Media button and select the Shockwave icon
from the
popup menu.
• Select Insert > Media > Shockwave.
2 In the dialog box that appears, select a movie file.
3 In the Property inspector, enter the width and height of the movie in the W and H text boxes.
See also
“Insert and preview Flash content” on page 256
Add video (non-Flash)
You can add video to your web page in different ways and using different formats. Video can be downloaded to the
user or it can be streamed so that it plays while it is downloading.
1 Place the clip in your site folder.
These clips are often in the AVI or MPEG file format.
2 Link to the clip or embed it in your page.
To link to the clip, enter text for the link such as “Download Clip”, select the text, and click the folder icon in the
Property inspector. Browse to the video file and select it.
September 4, 2007
DREAMWEAVER CS3 274
User Guide
Note: The user must download a helper application (a plug-in) to view common streaming formats like Real Media,
QuickTime, and Windows Media.
Insert Netscape Navigator plug-in content
You can create content such as a QuickTime movie for a Netscape Navigator plug-in, and then use Dreamweaver to
insert that content into an HTML document. Typical plug-ins include RealPlayer and QuickTime, while some
content files include mp3s and QuickTime movies.
You can preview movies and animations that rely on Netscape Navigator plug-ins directly in the Design view of the
Document window. You can play all plug-in elements at one time to see how the page will look to the user, or you
can play each one individually to ensure that you have embedded the correct media element.
Note: You cannot preview movies or animations that rely on ActiveX controls.
After inserting content for a Netscape Navigator plug-in, use the Property inspector to set parameters for that
content. To view the following properties in the Property inspector, select a Netscape Navigator plug-in object.
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lowerright corner to see all properties.
Insert Netscape Navigator plug-in content and set its properties
1 In the Design view of the Document window, place the insertion point where you want to insert the content, then
do one of the following:
• In the Common category of the Insert bar, click the Media button and select the Plugin icon
from the menu.
• Select Insert > Media > Plugin.
2 In the dialog box that appears, select a content file for a Netscape Navigator plug-in and click OK.
3 Set the plug-in options in the Property inspector.
Name Specifies a name to identify the plug-in for scripting. Enter a name in the unlabeled text box on the far left
side of the Property inspector.
W and H Specify, in pixels, the width and height allocated to the object on the page.
Src Specifies the source data file. Click the folder icon to browse to a file, or enter a filename.
Plg Url Specifies the URL of the pluginspace attribute. Enter the complete URL of the site where users can
download the plug-in. If the user viewing your page does not have the plug-in, the browser tries to download it from
this URL.
Align Determines how the object is aligned on the page.
V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the plug-in.
Border Specifies the width of the border around the plug-in.
Parameters Opens a dialog box for entering additional parameters to pass to the Netscape Navigator plug-in. Many
plug-ins respond to special parameters. The Flash plug-in, for example, includes parameters for bgcolor, salign,
and scale.
You can also view the attributes assigned to the selected plug-in by clicking the Attribute button. You can edit, add,
and delete attributes such as width and height in this dialog box.
September 4, 2007
DREAMWEAVER CS3 275
User Guide
Play plug-in content in the Document window
1 Insert one or more media elements by selecting Insert > Media > Shockwave, Insert > Media > Flash, or Insert >
Media > Plugin.
2 Do one of the following:
• Select one of the media elements you have inserted, and select View > Plugins > Play or click the Play button in
the Property inspector.
• Select View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.
Note: Play All only applies to the current document; it does not apply to other documents in a frameset, for example.
Stop playing plug-in content
❖ Select a media element and select View > Plugins >Stop, or click the Stop button in the Property inspector.
You can also select View > Plugins > Stop All to stop all plug-in content from playing.
Troubleshooting Netscape Navigator plug-ins
If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does
not play, try the following:
• Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version
of the plug-in you have.
• Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic
plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.)
• Check that you have enough memory. Some plug-ins require an additional 2 to 5 MB of memory to run.
Insert an ActiveX control
You can insert an ActiveX control in your page. ActiveX controls (formerly known as OLE controls) are reusable
components, somewhat like miniature applications, that can act like browser plug-ins. They run in Internet Explorer
with Windows, but they don’t run on the Macintosh or in Netscape Navigator. The ActiveX object in Dreamweaver
lets you supply attributes and parameters for an ActiveX control in your visitor’s browser.
After inserting an ActiveX object, use the Property inspector to set attributes of the object tag and parameters for
the ActiveX control. Click Parameters in the Property inspector to enter names and values for properties that don’t
appear in the Property inspector. There is no widely accepted standard format for parameters for ActiveX controls;
to find out which parameters to use, consult the documentation for the ActiveX control you’re using.
❖ In the Document window, place the insertion point where you want to insert the content and do one of the
following:
• In the Common category of the Insert bar, click the Media button and select the ActiveX icon
.
• In the Common category of the Insert bar, click the Media button and select the ActiveX icon. With the ActiveX
icon displayed in the Insert bar, you can drag the icon to the Document window.
• Select Insert > Media > ActiveX. An icon marks where the ActiveX control will appear on the page in Internet
Explorer.
September 4, 2007
DREAMWEAVER CS3 276
User Guide
ActiveX properties
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the
lower-right corner to see all properties.
Name Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled text box on the
far left side of the Property inspector.
W and H Specify the width and height of the object, in pixels.
Class ID Identifies the ActiveX control to the browser. Enter a value or select one from the pop-up menu. When the
page is loaded, the browser uses the class ID to locate the ActiveX control required for the ActiveX object associated
with the page. If the browser doesn’t locate the specified ActiveX control, it attempts to download it from the location
specified in Base.
Embed Adds an embed tag within the object tag for the ActiveX control. If the ActiveX control has a Netscape
Navigator plug-in equivalent, the embed tag activates the plug-in. Dreamweaver assigns the values you entered as
ActiveX properties to their Netscape Navigator plug-in equivalents.
Align Determines how the object is aligned on the page.
Parameters Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX
controls respond to special parameters.
Src Defines the data file to be used for a Netscape Navigator plug-in if the Embed option is turned on. If you don’t
enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already.
V Space and H Space Specify the amount of white space, in pixels, above, below, and on both sides of the object.
Base Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this
location if it has not been installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor
doesn’t already have the relevant ActiveX control installed, the browser can’t display the ActiveX object.
Alt Img Specifies an image to be displayed if the browser doesn’t support the object tag. This option is available only
when the Embed option is deselected.
Data Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer,
do not use this parameter.
Insert a Java applet
You can insert a Java applet into an HTML document using Dreamweaver. Java is a programming language that
allows the development of lightweight applications (applets) that can be embedded in web pages.
After inserting a Java applet, use the Property inspector to set parameters. To view the following properties in the
Property inspector, select a Java applet.
1 In the Document window, place the insertion point where you want to insert the applet, and then do one of the
following:
• In the Common category of the Insert bar, click the Media button and select the Applet icon
• Select Insert > Media > Applet.
2 Select a file containing a Java applet.
September 4, 2007
.
DREAMWEAVER CS3 277
User Guide
Java applet properties
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the
lower-right corner to see all properties.
Name Specifies a name to identify the applet for scripting. Enter a name in the unlabeled text box on the far left side
of the Property inspector.
W and H Specify the width and height of the applet, in pixels.
Code Specifies the file containing the applet’s Java code. Click the folder icon to browse to a file, or enter a filename.
Base Identifies the folder containing the selected applet. When you select an applet, this text box is filled automati-
cally.
Align Determines how the object is aligned on the page.
Alt Specifies alternative content (usually an image) to be displayed if the user’s browser doesn’t support Java applets
or has Java disabled. If you enter text, Dreamweaver inserts the text as the value of the applet’s alt attribute. If you
select an image, Dreamweaver inserts an img tag between the opening and closing applet tags.
Note: To specify alternative content that is viewable in both Netscape Navigator (with Java disabled) and Lynx (a textbased browser), select an image and then manually add an alt attribute to the img tag in the Code inspector.
V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the applet.
Parameters Opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to
special parameters.
Using behaviors to control media
You can add behaviors to your page to start and stop various media objects.
Control Shockwave Or Flash Play, stop, rewind, or go to a frame in a Shockwave movie or Flash SWF file.
Play Sound Lets you play a sound; for example, you can play a sound effect whenever the user moves the mouse
pointer over a link.
Check Plugin Lets you check to see if visitors to your site have the required plug-in installed, then route them to
different URLs, depending on whether they have the right plug-in. This only applies to Netscape Navigator plug-ins,
as the Check Plugin behavior does not check for ActiveX controls.
See also
“Apply the Control Shockwave Or Flash behavior” on page 352
“Apply the Play Sound behavior” on page 356
“Apply the Check Plugin behavior” on page 352
Use parameters to control media objects
Define special parameters to control Shockwave and Flash SWF files, ActiveX controls, Netscape Navigator plug-ins,
and Java applets. Parameters are used with the object, embed, and applet tags. Parameters set attributes specific to
different types of objects. For example, a Flash object can use a quality parameter
for the object tag. The Parameter dialog box is available from the Property
inspector. See the documentation for the object you’re using for information on the parameters it requires.
September 4, 2007
DREAMWEAVER CS3 278
User Guide
Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for
the ActiveX control you’re using to find out which parameters to use.
Enter a name and value for a parameter
1 Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a Netscape Navigator
plug-in, or a Java applet) in the Document window.
2 Open the dialog box using one of the following methods:
• Right-click (Windows) or Control-click (Macintosh) the object, and select Parameters from the context menu.
• Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of the
Property inspector. (Make sure the Property inspector is expanded.)
3 Click the Plus (+) button and enter the parameter name and value in the appropriate columns.
Remove a parameter
❖ Select a parameter and press the minus (–) button.
Reorder parameters
❖ Select a parameter, and use the up and down arrow buttons.
September 4, 2007
279
Chapter 9: Linking and navigation
After you’ve set up a site, you can link pages to each other. You can create HTML links, jump menus, navigation bars,
and image maps.
About linking and navigation
About links
After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want
to create connections from your documents to other documents.
Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable
software. You can establish links to any text or image anywhere within a document, including text or images in a
heading, list, table, absolutely positioned element (AP element), or frame.
The site map gives a visual representation of how your files are linked. In the site map you can add new documents
to your site, create and remove document links, and check links to dependent files.
There are several different ways of creating and managing links. Some web designers prefer to create links to nonexistent pages or files as they work, while others prefer to create all the files and pages first and then add the links.
Another way to manage links is to create placeholder pages, in which you add and test links before completing all
your site pages.
See also
“Using site maps” on page 52
“Test links in Dreamweaver” on page 289
Document locations and paths
Understanding the file path between the document you’re linking from and the document you’re linking to is
essential to creating links.
Each web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local
link (a link from one document to another on the same site), you generally don’t specify the entire URL of the
document you’re linking to; instead, you specify a relative path from the current document or from the site’s root
folder.
There are three types of link paths:
• Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
• Document-relative paths (such as dreamweaver/contents.html).
• Site root–relative paths (such as /support/dreamweaver/contents.html).
Using Dreamweaver, you can easily select the type of document path to create for your links.
Note: It is best to use the type of linking you prefer and are most comfortable with—either site or document relative.
Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.
September 4, 2007
DREAMWEAVER CS3 280
User Guide
Absolute paths
Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for
web pages), for example, http://www.adobe.com/support/dreamweaver/contents.html.
You must use an absolute path to link to a document on another server. You can also use absolute paths for local links
(to documents in the same site), but that approach is discouraged—if you move the site to another domain, all of
your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you
need to move files within your site.
Note: When inserting images (not links), you can use an absolute path to an image on a remote server (that is, an image
that is not available on the local hard drive).
Document-relative paths
Document-relative paths are usually best for local links in most websites. They’re particularly useful when the current
document and the linked document are in the same folder and are likely to remain together. You can also use a
document-relative path to link to a document in another folder by specifying the path through the folder hierarchy
from the current document to the linked document.
The basic idea of document-relative paths is to omit the part of the absolute path that is the same for both the current
document and the linked document, providing only the portion of the path that differs.
For example, suppose you have a site with the following structure:
• To link from contents.html to hours.html (both in the same folder), use the relative path hours.html.
• To link to tips.html (in the resources subfolder), use the relative path resources/tips.html. At each slash (/..), you
move down one level in the folder hierarchy.
• To link to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html. At
each slash (../), you move up one level in the folder hierarchy.
• To link to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html.
Here, ../ moves up to the parent folder, and products/ moves down to the products subfolder.
September 4, 2007
DREAMWEAVER CS3 281
User Guide
When you move files as a group—for example, when you move an entire folder, so that all the files inside that folder
retain the same relative paths to each other—you don’t need to update document-relative links between those files.
However, when you move an individual file that contains document-relative links, or an individual file targeted by a
document-relative link, you do need to update those links. (If you move or rename files using the Files panel,
Dreamweaver updates all relevant links automatically.)
See also
“Set the relative path of new links” on page 284
“Set up and edit a local root folder” on page 42
Site root–relative paths
Site root–relative paths describe the path from the site’s root folder to a document. You may want to use these paths
if you are working on a large website that uses several servers, or one server that hosts several sites. However, if you
are not familiar with this type of path, you may want to stick to document-relative paths.
A site root–relative path begins with a leading forward slash, which stands for the root folder of the site. For example,
/support/tips.html is a site root–relative path to a file (tips.html) in the support subfolder of the site’s root folder.
A site root–relative path is often the best way to specify links if you frequently move HTML files from one folder to
another in your website. When you move a document that contains site root–relative links, you don’t need to change
the links; for example, if your HTML files use site root–relative links for dependent files (such as images), then if you
move an HTML file, its dependent-file links are still valid.
However, when you move or rename the documents targeted by site root–relative links, you must update those links,
even if the documents’ paths relative to each other haven’t changed. For example, if you move a folder, you must
update all site root–relative links to files in that folder. (If you move or rename files using the Files panel,
Dreamweaver updates all relevant links automatically.)
See also
“Set the relative path of new links” on page 284
Linking
Linking files and documents
Before creating a link, make sure you understand how absolute, document-relative, and site root–relative paths work.
You can create several types of links in a document:
• A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
• A named anchor link, which jumps to a specific location in a document.
• An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in.
• Null and script links, which you use to attach behaviors to an object or to create a link that executes JavaScript
code.
You can use the Property inspector and the Point-To-File icon to create links from an image, an object, or text to
another document or file.
September 4, 2007
DREAMWEAVER CS3 282
User Guide
Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell
Dreamweaver to create new links using site root–relative paths.
Important: Always save a new file before creating a document-relative path; a document-relative path is not valid
without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily
uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file://
path to a relative path.
For a tutorial on creating links, see www.adobe.com/go/vid0149.
See also
“Document locations and paths” on page 279
Attaching JavaScript behaviors to links
You can attach a behavior to any link in a document. Consider using the following behaviors when you insert linked
elements into documents:
Set Text Of Status Bar Determines the text of a message and displays it in the status bar at the lower left of the
browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead
of showing the URL associated with it.
Open Browser Window Opens a URL in a new window. You can specify the properties of the new window, including
its name, size, and attributes (whether it is resizable, has a menu bar, and so on).
Jump Menu Edits a jump menu. You can change the menu list, specify a different linked file, or change the browser
location in which the linked document opens.
Set Nav Bar Image Customizes the display of images in a navigation bar. For example, you can use this behavior to
display a certain image in the navigation bar or page when the pointer is over a certain portion of the navigation bar.
See also
“Applying built-in Dreamweaver behaviors” on page 350
Link to documents using the Property inspector
You can use the Property inspector’s folder icon or Link box to create links from an image, an object, or text to
another document or file.
1 Select text or an image in the Document window’s Design view.
2 Open the Property inspector (Window > Properties) and do one of the following:
• Click the folder icon to the right of the Link box to browse to and select a file.
The path to the linked document appears in the URL box. Use the Relative To pop-up menu in the Select HTML File
dialog box to make the path document-relative or root-relative, and then click Select. The type of path you select
applies only to the current link. (You can change the default setting of the Relative To box for the site.)
• Type the path and filename of the document in the Link box.
To link to a document in your site, enter a document-relative or site root–relative path. To link to a document outside
your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for
a file that hasn’t been created yet.
September 4, 2007
DREAMWEAVER CS3 283
User Guide
3 From the Target pop-up menu, select a location in which to open the document:
•
_blank loads the linked document in a new, unnamed browser window.
•
_parent loads the linked document in the parent frame or parent window of the frame that contains the link. If
the frame containing the link is not nested, then the linked document loads in the full browser window.
•
_self loads the linked document in the same frame or window as the link. This target is the default, so you
usually don’t have to specify it.
•
_top loads the linked document in the full browser window, thereby removing all frames.
If all the links on your page will be set to the same target, you can specify this target once by selecting Insert >
HTML > Head Tags > Base and selecting the target information. For information about targeting frames, see
“Control frame content with links” on page 212.
See also
“Document locations and paths” on page 279
Link to documents using the Point-To-File icon
1 Select text or an image in the Document window’s Design view.
2 Create a link in one of two ways:
• Drag the Point-To-File icon (target icon) at the right of the Link box in the Property inspector and point to another
open document, a visible anchor in an open document, or a document in the Files panel.
• Shift-drag from the selection and point to another open document, a visible anchor in an open document, or a
document in the Files panel.
Note: You can link to an open document only if your documents are not maximized in the Document window. To tile
documents, select Window > Cascade or Window > Tile. When you point to an open document, that document moves
to the foreground of your screen while you are making your selection.
Link documents using the site map
Links you create in the site map appear at the bottom of the selected HTML files, allowing you to quickly create links
across a site.
Link documents using the site map and the Point-To-File icon
This method works well when you are building your site and you want to create links across the site quickly.
1 In the Files panel, select Map View from the View pop-up menu.
2 Select an HTML file in the site map.
3 Drag the selected file’s Point-To-File icon (target icon) to another file in the site map or to a local file in the Site
Files view.
A link with the name of the linked file appears at the bottom of the selected HTML file.
Link documents in the site map
❖ Do one of the following:
• Drag a page from the Windows Explorer or the Macintosh Finder onto a page in the site map.
• Select an HTML page in the site map, and then select Link To Existing File from the context menu.
September 4, 2007
DREAMWEAVER CS3 284
User Guide
• Select an HTML page in the site map, and then select Link To New File from the context menu.
Add a link using the Hyperlink command
The Hyperlink command lets you create a text link to an image, an object, or to another document or file.
1 Place the insertion point in the document where you want the link to appear.
2 Do one of the following to display the Insert Hyperlink dialog box:
• Select Insert > Hyperlink.
• In the Common category of the Insert bar, click the Hyperlink button.
3 Enter the text of the link and, after Link, the name of the file to link to (or click the folder icon to browse to the file).
4 In the Target pop-up menu, select the window in which the file should open or type its name.
The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame
that doesn’t exist, the linked page opens in a new window that has the name you specified. You can also select from
the following reserved target names:
•
_blank loads the linked file into a new, unnamed browser window.
•
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
•
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually
don’t need to specify it.
•
_top loads the linked file into the full browser window, thereby removing all frames.
5 In the Tab Index box, enter a number for the tab order.
6 In the Title box, enter a title for the link.
7 In the Access Key box, enter a keyboard equivalent (one letter) to select the link in the browser.
8 Click OK.
Set the relative path of new links
By default, Dreamweaver creates links to other pages in your site using document-relative paths. To use site root–
relative path instead, you must first define a local folder in Dreamweaver by choosing a local root folder to serve as
the equivalent of the document root on a server. Dreamweaver uses this folder to determine the site root–relative
paths to files.
1 Select Site > Manage Sites.
2 In the Manage Sites dialog box, double-click your site in the list.
3 In the Site Definition dialog box, click the Advanced tab, if the Advanced settings aren’t showing.
The Advanced tab of the Site Definition dialog box displays the Local Info category options.
4 Set the relative path of new links by selecting the Document or Site Root option.
Changing this setting will not convert the path of existing links after you click OK. The setting applies only to new
links you create with Dreamweaver.
September 4, 2007
DREAMWEAVER CS3 285
User Guide
Note: Content linked with a site root–relative path does not appear when you preview documents in a local browser
unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In
Browser. This is because browsers don’t recognize site roots—servers do. A quick way to preview content linked with site
root–relative paths is to put the file on a remote server, then select File > Preview In Browser.
5 For site root–relative paths, enter your website URL in the HTTP Address box.
Dreamweaver uses this address to make sure root-relative links work on the remote server, which may have a
different site root. For example, if you are linking to an image file located in the C:\Sales\images\ folder on your hard
disk (where Sales is your local root folder), and the URL of your completed site is http://www.mysite.com/SalesApp/
(where SalesApp is your remote root folder), then entering the URL in the HTTP Address box will ensure that the
path to the linked file on the remote server is /SalesApp/images/.
Note: In previous releases, Dreamweaver failed to append the correct remote root folder, which caused pages to fail at
runtime.
6 Click OK.
The new path setting applies only to the current site.
See also
“Document locations and paths” on page 279
“Set up and edit a local root folder” on page 42
Link to a specific place in a document
You can use the Property inspector to link to a particular section of a document by first creating named anchors.
Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a
document. You can then create links to these named anchors, which quickly take your visitor to the specified
position.
Creating a link to a named anchor is a two-step process. First, you create a named anchor; then you create a link to
the named anchor.
Note: You can’t place a named anchor in an absolutely positioned element (AP element).
Create a named anchor
1 In the Document window’s Design view, place the insertion point where you want the named anchor.
2 Do one of the following:
• Select Insert > Named Anchor.
• Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).
• In the Common category of the Insert bar, click the Named Anchor button.
3 In the Anchor Name box, type a name for the anchor, and click OK. (The anchor name can’t contain spaces).
The anchor marker appears at the insertion point.
Note: If you do not see the anchor marker, select View > Visual Aids > Invisible Elements.
Link to a named anchor
1 In the Document window’s Design view, select text or an image to create a link from.
September 4, 2007
DREAMWEAVER CS3 286
User Guide
2 In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link
to an anchor named “top” in the current document, type #top. To link to an anchor named “top” in a different
document in the same folder, type filename.html#top.
Note: Anchor names are case-sensitive.
Link to a named anchor using the point-to-file method
1 Open the document containing the named anchor.
Note: If you don’t see the anchor, select View > Visual Aids > Invisible Elements to make it visible.
2 In the Document window’s Design view, select text or an image you want to link from. (If this is another open
document, you must switch to it.)
3 Do one of the following:
• Click the Point-To-File icon (target icon) to the right of the Link box in the Property inspector and drag it to the
anchor you want to link to: either an anchor within the same document or an anchor in another open document.
• Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an
anchor within the same document or an anchor in another open document.
Create an e-mail link
An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when
clicked. In the e-mail message window, the To box is automatically updated with the address specified in the e-mail link.
Create an e-mail link using the Insert Email Link command
1 In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or
select the text or image you want to appear as the e-mail link.
2 Do one of the following to insert the link:
• Select Insert > Email Link.
• In the Common category of the Insert bar, click the Email Link button.
3 In the Text box, type or edit the body of the e-mail.
4 In the Email box, type the e-mail address, then click OK.
Create an e-mail link using the Property inspector
1 Select text or an image in the Document window’s Design view.
2 In the Link box of the Property inspector, type mailto: followed by an e-mail address.
Do not type any spaces between the colon and the e-mail address.
Auto-populate the subject line of an e-mail
1 Create an e-mail link using the Property inspector as outlined above.
2 In the Link box of the Property inspector, add ?subject= after the email, and type a subject after the equals sign.
Do not type any spaces between the question mark and the end of the e-mail address.
The complete entry would look as follows:
mailto:someone@yoursite.com?subject=Mail from Our Site
September 4, 2007
DREAMWEAVER CS3 287
User Guide
Create null and script links
A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you
can attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP
element) when the pointer moves over the link.
Script links execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information about an item without leaving the current web page. Script links can also be used to perform calculations,
validate forms, or do other processing tasks when a visitor clicks a specific item.
See also
“Apply a behavior” on page 349
Create a null link
1 Select text, an image, or an object in the Document window’s Design view.
2 In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon)
in the Link box.
Create a script link
1 Select text, an image, or an object in the Document window’s Design view.
2 In the Link box of the Property inspector, type javascript: followed by some JavaScript code or a function call.
(Do not type a space between the colon and the code or call.)
Update links automatically
Dreamweaver can update links to and from a document whenever you move or rename the document within a local
site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local
disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the
remote server.
To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the
links in your local folder. The cache file is updated invisibly as you add, change, or delete links on your local site.
Enable automatic link updates
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the Preferences dialog box, select General from the category list on the left.
3 In the Document Options section of the General preferences, select an option from the Update Links When
Moving Files pop-up menu.
Always Automatically updates all links to and from a selected document whenever you move or rename it.
Never Does not automatically update all links to and from a selected document when you move or rename it.
Prompt Displays a dialog box that lists all the files affected by the change. Click Update to update the links in these
files, or click Don’t Update to leave the files unchanged.
4 Click OK.
Create a cache file for your site
1 Select Site > Manage Sites.
September 4, 2007
DREAMWEAVER CS3 288
User Guide
2 Select a site, and then click Edit.
3 Click the Advanced tab to display the Advanced category of the Site Definition dialog box.
4 Select Local Info from the category list on the left.
5 In the Local Info category, select Enable Cache.
The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver
prompts you to load the cache. If you click Yes, Dreamweaver loads the cache and updates all the links to the file you
just changed. If you click No, the change is noted in the cache, but Dreamweaver does not load the cache or update
links.
It may take a few minutes to load the cache on larger sites because Dreamweaver must determine whether the cache
is up to date by comparing the timestamps of the files on the local site against the timestamps recorded in the cache.
If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.
Re-create the cache
❖ In the Files panel, select Site > Advanced > Recreate Site Cache.
Manage links in the site map
You can modify the structure of the site in the site map by adding, changing, and removing links. Dreamweaver
automatically updates the site map to display the changes to the site.
See also
“Working with a visual map of your site” on page 52
Change a link
1 In the site map, select a page containing the target link you want to change (so that the document that currently
links to this page will point to another page), and then right-click (Windows) or Control-click (Macintosh), and
select Change Link from the context menu.
2 Browse to the new target file or type its URL.
3 Click OK.
Remove a link
1 Select the page in the site map.
2 Right-click (Windows) or Control-click (Macintosh), and select Remove Link from the context menu.
Removing a link does not delete the file; it removes the link from the HTML source on the page pointing to the now
unlinked file.
Open the source of a link
1 Select a file in the site map.
2 Do one of the following:
• Select Site > Open To Source Of Link (Windows) or Site > Site Map View > Open To Source Of Link (Macintosh).
• Right-click (Windows) or Control-click (Macintosh), and select Open To Source Of Link from the context menu.
The Property inspector and the source file containing the link open in the Document window, with the link
highlighted.
September 4, 2007
DREAMWEAVER CS3 289
User Guide
Change a link sitewide
In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can
manually change all links (including e-mail, FTP, null, and script links) so that they point somewhere else.
This option is most useful when you want to delete a file that other files link to, but you can use it for other purposes.
For example, suppose you link the words “this month’s movies” to /movies/july.html throughout your site. On August
1 you would change those links so that they point to /movies/august.html.
1 Select a file in the Local view of the Files panel.
Note: If you are changing an e-mail, FTP, null, or script link, you do not need to select a file.
2 Select Site > Change Link Sitewide.
3 Complete these options in Change Link Sitewide dialog box:
Change All Links To Click the folder icon to browse to and select the target file from which to unlink. If you are
changing an e-mail, FTP, null, or script link, type the full text of the link you are changing.
Into Links Click the folder icon to browse to and select the new file to link to. If you are changing an e-mail, FTP,
null, or script link, type the full text of the replacement link.
4 Click OK.
Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path
format already used in the document (for example, if the old path was document-relative, the new path is also
document-relative).
After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it).
You can safely delete it without breaking any links in your local Dreamweaver site.
Important: Because these changes occur locally, you must manually delete the corresponding orphan file in the remote
folder and put or check in any files in which links were changed; otherwise, visitors to your site won’t see the changes.
Test links in Dreamweaver
Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the
Document window.
❖ Do one of the following:
• Select the link and select Modify > Open Linked Page.
• Press Control (Windows) or Command (Macintosh) and double-click the link.
Note: The linked document must reside on your local disk.
See also
“Find broken, external, and orphaned links” on page 295
“Fix broken links” on page 296
September 4, 2007
DREAMWEAVER CS3 290
User Guide
Jump menus
About jump menus
A jump menu is a pop-up menu in a document, visible to your site visitors, listing links to documents or files. You
can create links to documents in your website, links to documents on other websites, e-mail links, links to graphics,
or links to any file type that can be opened in a browser.
Each option in a jump menu is associated with a URL. When users choose an option, they are redirected (“jump”)
to the associated URL. Jump menus are inserted within the Jump Menu form object.
A jump menu can contain three components:
• (Optional) A menu selection prompt, such as a category description for the menu items, or instructions, such as
“Choose one”.
• (Required) A list of linked menu items: a user selects an option and a linked document or file opens.
• (Optional) A Go button.
See also
“Apply the Jump Menu behavior” on page 355
“Apply the Jump Menu Go behavior” on page 356
Insert a jump menu
1 Open a document, and then place the insertion point in the Document window.
2 Do one of the following:
• Select Insert > Form > Jump Menu.
• In the Forms category of the Insert bar, click the Jump Menu button.
3 Complete the Insert Jump menu dialog box and click OK. Here is a partial list of options:
Plus and Minus buttons Click Plus to insert an item; click Plus again to add another one. To delete an item, select it
and click Minus.
Arrow buttons Select an item and click the arrows to move it up or down in the list.
Text Type the name of an unnamed item. If your menu includes a selection prompt (such as “Choose one”), type it
here as the first menu item (if so, you must also choose the Select First Item After URL Change option at the bottom).
When Selected Go To URL Browse to the target file or type its path.
Open URLs In Specify whether to open the file in the same window or in a frame. If the frame you want to target
doesn’t appear in the menu, close the Insert Jump Menu dialog box and name the frame.
Go Button After Menu Select to insert a Go button rather than a menu selection prompt.
Select First Item After URL Change Select if you inserted a menu selection prompt (“Choose one”) as the first menu item.
See also
“View and set frame properties and attributes” on page 209
September 4, 2007
DREAMWEAVER CS3 291
User Guide
Edit jump menu items
You can change the order of items in the menu or the file an item links to, and you can add, delete, or rename an item.
To change the location in which a linked file opens, or to add or change a menu selection prompt, you must apply
the Jump Menu behavior from the Behaviors panel.
1 Open the Property inspector (Window > Properties) if it isn’t already open.
2 In the Document window’s Design view, click the jump menu object to select it.
3 In the Property inspector, click the List Values button.
4 Use the List Values dialog box to make your changes to the menu items, and then click OK.
See also
“Apply the Jump Menu behavior” on page 355
Troubleshooting jump menus
After a user selects a jump menu item, there is no way to reselect that menu item if the user navigates back to that
page, or if the Open URL In box specifies a frame. There are two ways to work around this problem:
• Use a menu selection prompt, such as a category, or a user instruction, such as “Choose one”. The menu selection
prompt is reselected automatically after each menu selection.
• Use a Go button, which allows a user to revisit the currently chosen link. When you use a Go button with a jump
menu, the Go button becomes the only mechanism that “jumps” the user to the URL associated with the selection
in the menu. Selecting a menu item in the jump menu no longer re-directs the user automatically to another page
or frame.
Note: Select only one of these options per jump menu, in the Insert Jump Menu dialog box, because they apply to an
entire jump menu.
Navigation bars
About navigation bars
A navigation bar consists of an image (or set of images) whose display changes in response to user actions. Navigation
bars often provide an easy way to move between pages and files on a site.
A navigation bar element can have four states:
• Up: the image that appears when the user hasn’t yet clicked or interacted with the element.
September 4, 2007
DREAMWEAVER CS3 292
User Guide
• Over: the image that appears when the user moves the pointer over the Up image. The element’s appearance
changes (for example, it may get lighter) to let users know they can interact with it.
• Down: the image that appears after the user clicks the element. For example, when a user clicks an element, a new
page loads and the navigation bar is still displayed, but the clicked element may be darkened to show that it’s been
selected.
• Over While Down: the image that appears when the user moves the pointer over the Down image after clicking
the element. For example, the element may be dimmed. This state gives users a visual clue that they can’t click this
element again while they are in this part of the site.
You don’t have to include navigation bar images for all four of these states; for example, you may just want Up and
Down states.
After you create a navigation bar for a document, you can add or remove images from the navigation bar using the
Modify Navigation Bar command. Use this command to change an image or set of images, to change which file opens
when an element is clicked, to select a different window or frame in which to open a file, and to reorder the images.
Insert a navigation bar
Before using the Insert Navigation Bar command, you must create a set of images for the display states of each
navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes
the user to another page.)
You can create a navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to
show different states as pages are accessed.
1 Do one of the following:
• Select Insert > Image Objects > Navigation Bar.
• In the Common category of the Insert bar, click the Images button and select Insert Navigation Bar.
2 Complete the Insert Navigation Bar dialog box and click OK. Here is a partial list of options:
Plus and Minus buttons Click Plus to insert an element; click Plus again to add another one. To delete an element,
select it and click Minus.
Element Name Type a name for a navigation bar element—for example, Home. Each element corresponds to a button
with a set of up to four image states. Element names appear in the Nav Bar Elements list. Use the arrow buttons to
arrange elements in the navigation bar.
Up, Over, Down, and Over While Down Browse to select images for these four states. Only the Up image is required;
other image states are optional.
Alternate Text Enter a descriptive name for the element. Alternate text appears in place of images in text-only
browsers or in browsers that download images manually. Screen readers read alternate text, and some browsers
display alternate text when the user moves the pointer over the navigation bar element.
When Clicked, Go To URL Click the Browse button to select a linked file to open, and then specify whether to open
the file in the same window or in a frame. If the frame you want to target doesn’t appear in the menu, close the Insert
Navigation Bar dialog box and name the frame in your document.
Preload Images Select this option to download images as the page is downloaded. This option prevents delays when
the user moves the pointer over rollover images.
Show Down Image Initially Select this option for elements that you want to display initially in the Down state rather
than the default Up state. For example, the Home element on the navigation bar should be in its Down state when
September 4, 2007
DREAMWEAVER CS3 293
User Guide
the page is first downloaded. When you apply this option to an element, an asterisk appears after its name in the Nav
Bar Elements list.
Insert Specify whether to insert elements vertically or horizontally.
Use Tables Select to insert elements as a table.
See also
“View and set frame properties and attributes” on page 209
Modify a navigation bar
1 Select the navigation bar in the active page.
2 Select Modify > Navigation Bar.
3 In the Nav Bar Elements list, select the element you want to edit.
4 Make changes as necessary and click OK.
Image maps
About image maps
An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action
occurs (for example, a new file opens).
Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as
server-side image maps do. When a site visitor clicks a hotspot in the image, the associated URL is sent directly to
the server. This makes client-side image maps faster than server-side image maps, because the server does not need
to interpret where the visitor clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later
versions, NCSA Mosaic 2.1 and 3.0, and all versions of Internet Explorer.
Dreamweaver does not alter references to server-side image maps in existing documents; you can use both clientside image maps and server-side image maps in the same document. However, browsers that support both types of
image maps give priority to client-side image maps. To include a server-side image map in a document, you must
write the appropriate HTML code.
Insert client-side image maps
When you insert a client-side image map, you create a hotspot area and then define a link that opens when a user
clicks the hotspot area.
Note: You can create multiple hotspot areas, but they are part of the same image map.
1 In the Document window, select the image.
2 In the Property inspector, click the expander arrow in the lower-right corner to see all properties.
3 In the Map Name box, enter a unique name for the image map. If you are using multiple image maps in the same
document, make sure each map has a unique name.
4 To define the image map areas, do one of the following:
• Select the circle tool and drag the pointer over the image to create a circular hotspot.
September 4, 2007
DREAMWEAVER CS3 294
User Guide
• Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot.
• Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click the
arrow tool to close the shape.
After you create the hotspot, the hotspot Property inspector appears.
5 In the hotspot Property inspector’s Link box, click the folder icon to browse to and select the file you want to open
when the user clicks the hotspot, or type the path.
6 In the Target pop-up menu, select the window in which the file should open or type its name.
The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame
that doesn’t exist, the linked page loads into a new window that has the name you specified. You can also select from
the following reserved target names:
•
_blank loads the linked file into a new, unnamed browser window.
•
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
•
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually
don’t need to specify it.
•
_top loads the linked file into the full browser window, thereby removing all frames.
Note: The target option isn’t available until the selected hotspot contains a link.
7 In the Alt box, type alternative text for display in text-only browsers or browsers that download images manually.
Some browsers display this text as a tooltip when the user moves the pointer over the hotspot.
8 Repeat steps 4 through 7 to define additional hotspots in the image map.
9 When you finish mapping the image, click a blank area in the document to change the Property inspector.
Modify image map hotspots
You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move
a hotspot forward or back in an absolutely-positioned element (AP element).
You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an
image and paste them on another image; hotspots associated with the image are also copied to the new document.
Select multiple hotspots in an image map
1 Use the pointer hotspot tool to select a hotspot.
2 Do one of the following:
• Shift-click the other hotspots you want to select.
• Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.
Move a hotspot
1 Use the pointer hotspot tool to select the hotspot.
2 Do one of the following:
• Drag the hotspot to a new area.
• Use the Shift + arrow keys to move a hotspot by 10 pixels in the selected direction.
• Use the arrow keys to move a hotspot by 1 pixel in the selected direction.
September 4, 2007
DREAMWEAVER CS3 295
User Guide
Resize a hotspot
1 Use the pointer hotspot tool to select the hotspot.
2 Drag a hotspot selector handle to change the size or shape of the hotspot.
Troubleshooting links
Find broken, external, and orphaned links
Use the Check Links feature to search for broken links and orphaned files (files that still exist in the site but that aren’t
linked to by any other files in the site). You can search an open file, a portion of a local site, or an entire local site.
Dreamweaver verifies links only to documents within the site; Dreamweaver compiles a list of external links in the
selected document or documents but does not verify them.
You can also identify and delete files that are no longer used by other files in your site.
See also
“Identify and delete unused files” on page 83
Check links in the current document
1 Save the file to a location within your local Dreamweaver site.
2 Select File > Check Page > Links.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
3 In the Link Checker panel, select External Links from the Show pop-up menu to view another report.
The External Links report appears in the Link Checker panel (in the Results panel group).
You can check for orphaned files when you check links across an entire site.
4 To save the report, click the Save Report button in the Link Checker panel. The report is a temporary file; it will
be lost if you don’t save it.
Check links in part of a local site
1 In the Files panel, select a site from the Current Sites pop-up menu.
2 In Local view, select the files or folders to check.
3 Initiate the check by doing one of the following:
• Right-click (Windows) or Control-click (Macintosh) one of the selected files, and then select Check Links >
Selected Files/Folders from the context menu.
• Select File > Check Page > Links.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
4 In the Link Checker panel, select External Links from the Show pop-up menu to view another report.
The External Links report appears in the Link Checker panel (in the Results panel group).
September 4, 2007
DREAMWEAVER CS3 296
User Guide
You can check for orphaned files when you check links across an entire site.
5 To save a report, click the Save Report button in the Link Checker panel.
Check links across the entire site
1 In the Files panel, select a site from the Current Sites pop-up menu.
2 Select Site > Check Links Sitewide.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
3 In the Link Checker panel, select External Links or Orphaned Files from the Show pop-up menu to view another
report.
A list of files that fit the report type you selected appears in the Link Checker panel.
Note: If you select Orphaned Files as your report type, you can delete orphaned files from the Link Checker panel directly
by selecting a file from the list and pressing the Delete key.
4 To save a report, click the Save Report button in the Link Checker panel.
Fix broken links
After you run a links reports, you can fix broken links and image references directly in the Link Checker panel, or
you can open files from the list and fix links in the Property inspector.
Fix links in the Link Checker panel
1 Run a link check report.
2 In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select
the broken link.
A folder icon appears next to the broken link.
3 Click the folder icon next to the broken link and browse to the correct file, or type the correct path and filename.
4 Press Tab or Enter (Windows) or Return (Macintosh).
If there are other broken references to this same file, you are prompted to fix the references in the other files as well.
Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have
Dreamweaver update the current reference only.
Note: If Enable File Check In And Check Out is enabled for the site, Dreamweaver attempts to check out files that require
changes. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references
unchanged.
Fix links in the Property inspector
1 Run a link check report.
2 In the Link Checker panel (in the Results panel group), double-click an entry in the File column.
Dreamweaver opens the document, selects the broken image or link, and highlights the path and filename in the
Property inspector. (If the Property inspector is not visible, select Window > Properties to open it.)
3 To set a new path and filename in the Property inspector, click the folder icon to browse to the correct file, or type
over the highlighted text.
September 4, 2007
DREAMWEAVER CS3 297
User Guide
If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in
the Property inspector or click the Refresh button to reset the height and width values.
4 Save the file.
As links are fixed, their entries disappear from the Link Checker list. If an entry still appears in the list after you enter
a new path or filename in the Link Checker (or after you save changes in the Property inspector), Dreamweaver
cannot find the new file and still considers the link broken.
September 4, 2007
298
Chapter 10: Previewing pages
Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers
do. The Preview in Browser feature lets you see how your pages will look in specific browsers as you create your
design.
Previewing pages in browsers
Preview in a browser
You can preview a page in a browser at any time; you don’t have to upload it to a web server first. When you preview
a page, all browser-related functions should work, including JavaScript behaviors, document-relative and absolute
links, ActiveX® controls, and Netscape Navigator plug-ins, provided that you installed the required plug-ins or
ActiveX controls in your browsers.
Before previewing a document, save the document; otherwise, the browser does not display your most recent
changes.
1 Do one of the following to preview the page:
• Select File > Preview In Browser, and then select one of the listed browsers.
Note: If no browsers are listed, select Edit > Preferences or Dreamweaver > Preferences (Macintosh), and then select the
Preview In Browser category on the left to select a browser.
• Press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser.
• Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary
browser.
2 Click links and test content in your page.
If you use Internet Explorer on a Windows XP computer with Service Pack 2 installed, the browser may display a
message that tells you it has restricted the file from showing active content. You can fix this problem by including
Mark of the Web code in the file.
Note: Content linked with a site root-relative path does not appear when you preview documents in a local browser
unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In
Browser. This is because browsers don’t recognize site roots—servers do.
To preview content linked with root-relative paths, put the file on a remote server, and then select File > Preview In
Browser to view it.
3 Close the page in the browser when you finish testing.
See also
“Site root–relative paths” on page 281
September 4, 2007
DREAMWEAVER CS3 299
User Guide
Preview active content in Internet Explorer (Windows)
If you preview a document that contains active content in Internet Explorer after installing the Windows XP Service
Pack 2 update, the browser does not show active content. You can fix this problem by inserting Mark of the Web code
in your document.
Internet Explorer blocks active content and scripting that tries to run in the Local Machine zone. For security
reasons, Microsoft increased the restrictions on what can run in this zone by default. Mark of the Web code tells the
browser to run active content in another zone, in this case, the Internet zone. For more information, see TechNote
19578 on the Adobe website at www.adobe.com/go/19578.
Insert Mark of the Web code
❖ With your document open in Dreamweaver, select Commands > Insert Mark Of The Web.
Dreamweaver inserts the following line in your code:

The line tells the browser to bypass the Local Machine zone and run the active content in the Internet zone.
Remove Mark of the Web code
1 In Dreamweaver, open the document containing the Mark of the Web code.
2 Select Commands > Remove Mark Of The Web.
Designate browsers for previewing
You can define up to 20 browsers for previewing, and you can designate primary and secondary browsers. It’s a good
idea to preview your site in the following browsers: Internet Explorer 6.0, Netscape Navigator 7.0, and the
Macintosh-only Safari browser. In addition to these more popular, graphical browsers, you may want to test your
pages in a text-only browser such as Lynx.
1 Do one of the following to open the Preview In Browser options:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then select Preview In
Browser from the category list on the left.
• Select File > Preview In Browser > Edit Browser List.
2 To add a browser to the list, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.
3 To delete a browser from the list, select the browser, and then click the Minus (-) button.
4 To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and
then click OK.
5 Select Primary Browser or Secondary Browser to specify whether the selected browser is the primary or secondary
browser.
F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or
Command+F12 (Macintosh) opens the secondary browser.
6 Select Preview Using Temporary File to create a temporary copy for previewing and server debugging. Deselect
this option to update the document directly.
September 4, 2007
DREAMWEAVER CS3 300
User Guide
Previewing pages in mobile devices
Preview mobile content with Adobe Device Central and Dreamweaver
To preview pages created in Dreamweaver on various mobile devices, use Device Central with its built-in Opera
Small-Screen Rendering feature. Different devices have different browsers installed, but the preview can give a good
impression of how content will look and behave on a selected device.
1 Start Dreamweaver.
2 Open a file.
3 Do one of the following:
• Select File > Preview in Browser > Device Central.
• On the document window toolbar, click and hold the Preview/Debug In browser button
and select Preview In
Device Central.
The file is displayed in the Device Central Emulator tab. To continue testing, double-click the name of a different
device in the Device Sets or Available Devices lists.
September 4, 2007
301
Chapter 11: Working with page code
Adobe® Dreamweaver® CS3 is a visual design tool as well as a robust code editor, which provides code hinting, code
collapsing, code debugging, and other code editing features.
About coding in Dreamweaver
Supported languages
In addition to text-editing capabilities, Adobe® Dreamweaver® CS3 provides various features, such as code hints, to
help you code in the following languages:
• HTML
• XHTML
• CSS
• JavaScript
• ColdFusion Markup Language (CFML)
• Visual Basic (for ASP and ASP.NET)
• C# (for ASP.NET)
• JSP
• PHP
Other languages, such as Perl, are not supported by the language-specific coding features in Dreamweaver; for
example, you can create and edit Perl files, but code hints don’t apply to that language.
See also
“Automatic code modification in Dreamweaver” on page 302
“Use code hints” on page 313
About fixing invalid markup
If your document contains invalid code, Dreamweaver displays that code in Design view and optionally highlights
it in Code view. If you select the code in either view, the Property inspector displays information about why it’s
invalid and how to fix it.
You can specify preferences for automatically rewriting various kinds of invalid code when you open a document.
See also
“Automatic code modification in Dreamweaver” on page 302
“Set the code rewriting preferences” on page 311
September 4, 2007
DREAMWEAVER CS3 302
User Guide
Automatic code modification in Dreamweaver
You can set options that instruct Dreamweaver to automatically clean up your hand-written code according to
criteria that you specify. However, your code is never rewritten unless the code rewriting options are enabled or you
perform an action that changes the code. For example, Dreamweaver does not alter your white space or change the
case of attributes unless you use the Apply Source Formatting command.
A few of these code rewriting options are enabled by default.
The Roundtrip HTML capabilities in Dreamweaver let you move your documents back and forth between a textbased HTML editor and Dreamweaver with little or no effect on the content and structure of the document’s original
HTML source code. These capabilities include the following:
• Use a third-party text editor to edit the current document.
• By default, Dreamweaver does not make changes in code created or edited in other HTML editors, even if the code
is invalid, unless you enable code-rewriting options.
• Dreamweaver does not change tags it doesn’t recognize—including XML tags—because it has no criteria by which
to judge them. If an unrecognized tag overlaps another tag (for example,
text), Dreamweaver marks it as an error but doesn’t rewrite the code.
• Optionally, you can set Dreamweaver to highlight invalid code in Code view (in yellow). When you select a
highlighted section, the Property inspector displays information on how to correct the error.
See also
“Customizing the coding environment” on page 308
“Set the code rewriting preferences” on page 311
“Customizing keyboard shortcuts” on page 308
“About server behavior code” on page 306
About the XHTML code generated by Dreamweaver
Dreamweaver generates new XHTML code and cleans up existing XHTML code in a way that meets most of the
XHTML requirements. The tools that you need to meet the few XHTML requirements that remain are also provided.
Note: Some of the requirements also are required in various versions of HTML.
The following table describes the XHTML requirements that Dreamweaver meets automatically:
September 4, 2007
DREAMWEAVER CS3 303
User Guide
XHTML requirement
Actions Dreamweaver performs
There must be a DOCTYPE declaration in the
document prior to the root element, and the
declaration must reference one of the three
Document Type Definition (DTD) files for XHTML
(strict, transitional, or frameset).
Adds an XHTML DOCTYPE to an XHTML document:

Or, if the XHTML document has a frameset:

The root element of the document must be
html, and the html element must designate
the XHTML namespace.
Adds the namespace attribute to the html element,
as follows:
A standard document must have the head,
title, and body structural elements. A
frameset document must have the head,
title, and frameset structural elements.
In a standard document, includes the head, title,
and body elements. In a frameset document, includes
the head, title, and frameset elements.
All elements in the document must nest properly:
Generates correctly nested code and, when cleaning up
XHTML, corrects nesting in code that was not generated
by Dreamweaver.
This is a bad
example.
This is a
good example.

All element and attribute names must be lower- Forces HTML element and attribute names to be lowercase.
case in the XHTML code that it generates and when
cleaning up XHTML, regardless of your tag and attribute
case preferences.
Every element must have a closing tag, unless it Inserts closing tags in the code that it generates, and
is declared in the DTD as EMPTY.
when cleaning up XHTML.
Empty elements must have a closing tag, or the Inserts empty elements with a space before the closing
slash in empty tags in the code that it generates, and
opening tag must end with />. For example,

is not valid; the correct form is
when cleaning up XHTML.

or
. Following are the
empty elements: area, base, basefont,
br, col, frame, hr, img, input, isindex,
link, meta, and param.
And for backwards-compatibility with browsers
that are not XML-enabled, there must be a space
before the /> (for example,
, not

).
Inserts full attribute-value pairs in the code that it generAttributes can’t be minimized; for example,
tag. When
September 4, 2007
DREAMWEAVER CS3 311
User Guide
you select this option, Dreamweaver does not write line breaks after a tag, even if the
formatting in the Tag Library indicates that the line break should be there.
Advanced Formatting Lets you set formatting options for Cascading Style Sheets (CSS) code and for individual tags
and attributes in the Tag Library Editor.
White Space Character (Japanese version only) Lets you select either or Zenkaku space for HTML code. The
white space selected in this option will be used for empty tags when creating a table and when the “Allow Multiple
Consecutive Spaces” option is enabled in Japanese Encoding pages.
See also
“Format CSS code” on page 140
Set the code hints
Code hints let you quickly insert tag names, attributes, and values as you type code in Code view or the Quick Tag
Editor.
Even if code hints are disabled, you can display a pop-up hint in Code view by pressing Control+Spacebar.
1 Select Edit > Preferences.
2 Select Code Hints from the Category list on the left.
3 Set any of the following options:
Even if code hints are disabled, you can display a pop-up hint in Code view by pressing Control+Spacebar.
Close Tags Specifies how you want Dreamweaver to insert closing tags. By default, Dreamweaver inserts the closing
tag automatically after you type the characters ) of the opening tag, or so that no closing tag is inserted at all.
Enable Code Hints Displays code hints while you enter code in Code view. Drag the Delay slider to set the time in
seconds before appropriate hints are displayed.
Menus Sets exactly which type of code hints you want displayed while typing. You can use all or some of the menus.
See also
“Use code hints” on page 313
“Use the hints menu in the Quick Tag Editor” on page 334
Set the code rewriting preferences
Use the code rewriting preferences to specify how and whether Dreamweaver modifies your code while opening
documents, when copying and pasting form elements, and when entering attribute values and URLs using tools such
as the Property inspector. These preferences have no effect when you edit HTML or scripts in Code view.
If you disable the rewriting options, invalid-markup items are displayed in the Document window for HTML that it
would have rewritten.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Code Rewriting from the Category list on the left.
September 4, 2007
DREAMWEAVER CS3 312
User Guide
3 Set any of the following options:
Fix Invalidly Nested and Unclosed Tags Rewrites overlapping tags. For example, text is rewritten
as text. This option also inserts closing quotation marks and closing brackets if they are missing.
Rename Form Items When Pasting Ensures you don’t have duplicate names for form objects. This option is enabled
by default.
Note: Unlike the other options in this preferences dialog box, this option does not apply when you open a document, only
when you copy and paste a form element.
Remove Extra Closing Tags Deletes closing tags that have no corresponding opening tag.
Warn When Fixing Or Removing Tags Displays a summary of technically invalid HTML that Dreamweaver
attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you
can find the correction and ensure that it’s rendering as intended.
Never Rewrite Code: In Files With Extensions Allows you to prevent Dreamweaver from rewriting code in files with
the specified filename extensions. This option is particularly useful for files that contain third-party tags.
Encode <, >, &, And " In Attribute Values Using & Ensures that attribute values that you enter or edit using
Dreamweaver tools such as the Property inspector contain only legal characters. This option is enabled by default.
Note: This option and the following options do not apply to URLs that you type in Code view. Also, they do not cause
existing code already in a file to change.
Do Not Encode Special Characters Prevents Dreamweaver from changing URLs to use only legal characters. This
option is enabled by default.
Encode Special Characters In URL Using &# Ensures that when you enter or edit URLs using Dreamweaver tools
such as the Property inspector, those URLs contain only legal characters.
Encode Special Characters In URL Using % Operates the same way as the preceding option, but uses a different
method of encoding special characters. This encoding method (using the percent sign) may be more compatible with
older browsers, but doesn’t work as well with characters from some languages.
Insert Using Browser-safe Scripts Ensures that active content that you insert with Dreamweaver uses tags that will
display the content correctly in the latest versions of Internet Explorer. By default, Dreamweaver only uses browsersafe scripts for Flash and Shockwave active content. The feature is extensible, however, and allows you to use thirdparty extensions to insert other kinds of active content correctly.
Convert Tags To Scripts On File Open Renders
is not valid; the correct form is ates, and when cleaning up XHTML.
.
Note: If an HTML browser does not support HTML 4, it
This affects the following attributes: checked, might fail to interpret these Boolean attributes when
compact, declare, defer, disabled,
they appear in their full form.
ismap, multiple, noresize, noshade,
nowrap, readonly, and selected.
All attribute values must be surrounded by
quotation marks.
Places quotation marks around attribute values in the
code that it generates, and when cleaning up XHTML.
September 4, 2007
DREAMWEAVER CS3 304
User Guide
XHTML requirement
Actions Dreamweaver performs
The following elements must have an id
attribute as well as a name attribute: a,
applet, form, frame, iframe, img, and
map. For example,
Sets the name and id attributes to the same value,
whenever the name attribute is set by a Property
inspector, in the code that Dreamweaver generates, and
when cleaning up XHTML.
Introduction is not valid; the correct form is
Introduction
or Introduction.
Forces enumerated type values to be lowercase in the
code that it generates, and when cleaning up XHTML.
For attributes with values of an enumerated
type, the values must be lowercase.
An enumerated type value is a value from a
specified list of allowed values; for example, the
align attribute has the following allowed
values: center, justify, left, and
right.
All script and style elements must have a type Sets the type and language attributes in script
attribute.
elements, and the type attribute in style elements,
in the code that it generates and when cleaning up
(The type attribute of the script element
XHTML.
has been required since HTML 4, when the
language attribute was deprecated.)
All img and area elements must have an alt Sets these attributes in the code that it generates and,
attribute.
when cleaning up XHTML, reports missing alt
attributes.
See also
“Make pages XHTML-compliant” on page 328
About regular expressions
Regular expressions are patterns that describe character combinations in text. Use them in your code searches to help
describe concepts such as lines that begin with ‘var’” and “attribute values that contain a number.”
The following table lists the special characters in regular expressions, their meanings, and usage examples. To search
for text containing one of the special characters in the table, escape the special character by preceding it with a
backslash. For example, to search for the actual asterisk in the phrase some conditions apply*, your search
pattern might look like this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of “apply” (as well
as any of “appl”, “applyy”, and “applyyy”), not just the ones followed by an asterisk.
Character
Matches
Example
^
Beginning of input or line.
^T matches “T” in “This good earth” but not in “Uncle Tom’s
Cabin”
$
End of input or line.
h$ matches “h” in “teach” but not in “teacher”
*
The preceding character 0
or more times.
um* matches “um” in “rum”, “umm” in “yummy”, and “u” in
The preceding character 1
or more times.
um+ matches “um” in “rum” and “umm” in “yummy” but
+
“huge”
nothing in “huge”
September 4, 2007
DREAMWEAVER CS3 305
User Guide
Character
Matches
?
The preceding character at st?on matches “son” in “Johnson” and “ston” in “Johnston”
most once (that is, indicates but nothing in “Appleton” or “tension”
that the preceding character is optional).
.
Any single character except .an matches “ran” and “can” in the phrase “bran muffins can
be tasty”
newline.
x|y
Either x or y.
{n}
Exactly n occurrences of the o{2} matches “oo” in “loom” and the first two o’s in
preceding character.
“mooooo” but nothing in “money”
{n,m}
At least n, and at most m,
occurrences of the
preceding character.
F{2,4} matches “FF” in “#FF0000” and the first four Fs in
[abc]
Any one of the characters
enclosed in the brackets.
Specify a range of characters with a hyphen (for
example, [a-f ] is equivalent
to [abcdef ]).
[e-g] matches “e” in “bed”, “f” in “folly”, and ”g” in “guard”
[^abc]
Any character not enclosed [^aeiou] initially matches “r” in “orange”, “b” in “book”,
and “k” in “eek!”
in the brackets. Specify a
range of characters with a
hyphen (for example, [^a-f ]
is equivalent to [^abcdef ]).
\b
A word boundary (such as a \bb matches “b” in “book” but nothing in “goober” or “snob”
space or carriage return).
\B
Anything other than a word \Bb matches “b” in “goober” but nothing in “book”
boundary.
\d
Any digit character. Equiva- \d matches “3” in “C3PO” and “2” in “apartment 2G”
lent to [0-9].
\D
Any nondigit character.
Equivalent to [^0-9].
\f
Form feed.
\n
Line feed.
\r
Carriage return.
\s
Any single white-space
character, including space,
tab, form feed, or line feed.
\sbook matches ”book” in “blue book” but nothing in
Any single non-whitespace character.
\Sbook matches “book” in “notebook” but nothing in “blue
\S
\t
Example
FF0000|0000FF matches “FF0000” in
bgcolor=”#FF0000” and “0000FF’” in font
color=”#0000FF”
#FFFFFF
\D matches “S” in “900S” and “Q” in “Q45”
“notebook”
book”
A tab.
September 4, 2007
DREAMWEAVER CS3 306
User Guide
Character
Matches
Example
\w
Any alphanumeric charb\w* matches “barking” in “the barking dog” and both “big”
acter, including underscore. and “black” in “the big black dog”
Equivalent to [A-Za-z0-9_].
\W
Any non-alphanumeric
character. Equivalent to
[^A-Za-z0-9_].
Control+Enter
or Shift+Enter
(Windows), or
Control+
Return or
Shift+Return
or
Command+
Return
(Macintosh)
Return character. Make sure
that you deselect the
Ignore Whitespace Differences option when
searching for this, if not
using regular expressions.
Note that this matches a
particular character, not the
general notion of a line
break; for instance, it
doesn’t match a
tag
or a tag. Return characters appear as spaces in
Design view, not as line
breaks.
\W matches “&” in “Jake&Mattie” and “%” in “100%”
Use parentheses to set off groupings within the regular expression to be referred to later. Then use $1, $2, $3, and so
on in the Replace With field to refer to the first, second, third, and later parenthetical groupings.
Note: In the Search For box, to refer to a parenthetical grouping earlier in the regular expression, use \1, \2, \3, and so
on instead of $1, $2, $3.
For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day and month in a date
separated by slashes, thereby converting between American-style dates and European-style dates.
See also
“Search for tags, attributes, or text in code” on page 320
“Save and recall search patterns” on page 321
About server behavior code
When you develop a dynamic page and select a server behavior from the Server Behaviors panel, Dreamweaver
inserts one or more code blocks into your page to make the server behavior work.
If you manually change the code within a code block, you can no longer use panels such as the Bindings and Server
Behaviors panels to edit the server behavior. Dreamweaver looks for specific patterns in the page code to detect
server behaviors and display them in the Server Behaviors panel. If you change a code block’s code in any way,
Dreamweaver can no longer detect the server behavior and display it in the Server Behaviors panel. However, the
server behavior still exists on the page, and you can edit it in the coding environment in Dreamweaver.
See also
“Automatic code modification in Dreamweaver” on page 302
“Optimizing the workspace for visual development” on page 538
“Displaying database records” on page 570
September 4, 2007
DREAMWEAVER CS3 307
User Guide
Setting up your coding environment
Changing your coding environment
You can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the
way you view code, set up different keyboard shortcuts, or import and use your favorite tag library.
Viewing code
You can view the source code for the current document in several ways: you can display it in the Document window
by enabling Code view, you can split the Document window to display both the page and its associated code, or you
can work in the Code inspector, a separate coding window. The Code inspector works just like Code view; you can
think of it as a detachable Code view for the current document.
See also
“Change the code format” on page 309
“Set the code hints” on page 311
“Set the code colors” on page 312
View code in the Document window
❖ Select View > Code.
Code and edit a page simultaneously in the Document window
1 Select View > Code and Design.
The code appears in the top pane and the page appears in the bottom pane.
2 To display the page on top, select Design View On Top from the View Options menu on the Document toolbar.
3 To adjust the size of the panes in the Document window, drag the splitter bar to the desired position. The splitter
bar is located between the two panes.
Code view is updated automatically when you make changes in Design view. However, after making changes in Code
view, you must manually update the document in Design view by clicking in Design view or pressing F5.
View code in a separate window with the Code inspector
The Code inspector lets you work in a separate coding window, just like working in Code view.
❖ Select Window > Code Inspector. The toolbar includes the following options:
File Management Puts or gets the file.
Preview/Debug In Browser Previews or debugs your document in a browser.
Refresh Design View Updates the document in Design view so that it reflects any changes you made in the code.
Changes you make in the code don’t automatically appear in Design view until you perform certain actions, such as
saving the file or clicking this button.
Reference Opens the Reference panel. See “Use language-reference material” on page 323.
Code Navigation Lets you move quickly in the code. See “Go to a JavaScript or VBScript function” on page 320.
View Options Lets you determine how the code is displayed. See “Set the code appearance” on page 309.
September 4, 2007
DREAMWEAVER CS3 308
User Guide
To use the Coding toolbar along the left side of the window, see “Insert code with the Coding toolbar” on page 316.
Using the coder-oriented workspace (Windows only)
In Windows, you can use a workspace that looks similar to the workspace in Macromedia® HomeSite® from Adobe,
with the panel groups docked on the left side of the main window instead of on the right side. In this workspace
layout, the Property inspector is collapsed by default, and the Document window appears in Code view by default.
See also
“Choose the workspace layout (Windows)” on page 34
Customizing keyboard shortcuts
You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard
shortcuts—for example, Control+Enter to add a line break, Control+G to go to a specific position in the code, or
Shift+F6 to validate a file—you can add them to Dreamweaver using the Keyboard Shortcut Editor. For instructions,
see “Customize keyboard shortcuts” on page 708.
See also
“Work with code snippets” on page 315
Open files in Code view by default
When you open a file type that normally doesn’t contain any HTML (for example, a JavaScript file), the file opens in
Code view (or Code inspector) instead of Design view. You can specify which file types open in Code view.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select File Types/Editors from the Category list on the left.
3 In the Open In Code View box, add the filename extension of the file type you want to open automatically in Code view.
Type a space between filename extensions. You can add as many extensions as you like.
See also
“Use an external editor” on page 313
“Find coding errors with the Validator” on page 326
Customizing the coding environment
About coding preferences
You can customize the Dreamweaver coding environment to meet your specific needs, by setting preferences for
code formatting, rewriting, and coloring, among others.
Note: To set advanced preferences, use the Tag Library editor (see “Managing tag libraries” on page 343).
September 4, 2007
DREAMWEAVER CS3 309
User Guide
Set the code appearance
You can set word wrapping, display line numbers for the code, highlight invalid code, set syntax coloring for code
elements, set indenting, and show hidden characters from the View > Code View Options menu.
1 View a document in Code view or the Code inspector.
2 Do one of the following:
• Select View > Code View Options
• Click the View Options button
in the toolbar at the top of Code view or the Code inspector.
3 Select or deselect any of the following options:
Word Wrap Wraps the code so that you can view it without scrolling horizontally. This option doesn’t insert line
breaks; it just makes the code easier to view.
Line Numbers Displays line numbers along the side of the code.
Hidden Characters Displays special characters in place of white space. For example, a dot replaces each space, a
double chevron replaces each tab, and a paragraph marker replaces each line break.
Note: Soft line breaks that Dreamweaver uses for word wrapping are not displayed with a paragraph marker.
Highlight Invalid Code Causes Dreamweaver to highlight in yellow all HTML code that isn’t valid. When you select
an invalid tag, the Property inspector displays information on how to correct the error.
Syntax Coloring Enables or disables code coloring. For information on changing the coloring scheme, see “Set the
code colors” on page 312.
Auto Indent Makes your code indent automatically when you press Enter while writing code. The new line of code
indents to the same level as the previous line. For information on changing the indent spacing, see the Tab Size option
in “Change the code format” on page 309.
See also
“Viewing code” on page 307
“Coding toolbar overview” on page 20
Change the code format
You can change the look of your code by specifying formatting preferences such as indentation, line length, and the
case of tag and attribute names.
All the Code Format options, except the Override Case of option, are automatically applied only to new documents
or additions to documents that you subsequently create.
To reformat existing HTML documents, open the document, and select Commands > Apply Source Formatting.
1 Select Edit > Preferences.
2 Select Code Format from the Category list on the left.
3 Set any of the following options:
Indent Indicates whether code generated by Dreamweaver should be indented (according to the indentation rules
specified in these preferences) or not.
September 4, 2007
DREAMWEAVER CS3 310
User Guide
Note: Most of the indentation options in this dialog box apply only to code generated by Dreamweaver, not to code that
you type. To make each new line of code that you type indent to the same level as the previous line, select View > Code
View Options Auto-Indent option. For more information, see “Set the code appearance” on page 309.
With (Text box and pop-up menu) Specifies how many spaces or tabs Dreamweaver should use to indent code that
it generates. For example, if you type 3 in the box and select Tabs in the pop-up menu, then code generated by
Dreamweaver is indented using three tab characters for every level of indentation.
Tab Size Determines how many characters wide each tab character appears in Code view. For example, if Tab Size is
set to 4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With
is set to 3 Tabs, then code generated by Dreamweaver is indented using three tab characters for every level of indentation, which appears in Code view as a twelve-character-wide blank space.
Note: Dreamweaver indents using either spaces or tabs; it doesn’t convert a run of spaces to a tab when inserting code.
Automatic Wrapping Inserts a line-break character (also known as a “hard” return) when a line reaches the specified
column width. (Dreamweaver inserts line-break characters only in places where they don’t change the appearance of
the document in browsers, so some lines may remain longer than the Automatic Wrapping option specifies.) By
contrast, the Wrap option in Code view displays long lines (that extend beyond the width of the window) as if they
contained line-break characters, but doesn’t actually insert line-break characters.
Line Break Type Specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site.
Choosing the correct type of line break characters ensures that your HTML source code appears correctly when
viewed on the remote server. This setting is also useful when you are working with an external text editor that recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor, and
use CR (Macintosh) if SimpleText is your external editor.
Note: For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer
mode in Dreamweaver ignores this option. If you download files using ASCII mode, Dreamweaver sets line breaks based
on the operating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.
Default Tag Case and Default Attribute Case Control the capitalization of tag and attribute names. These options are
applied to tags and attributes that you insert or edit in Design view, but they are not applied to the tags and attributes
that you enter directly in Code view, or to the tags and attributes already in a document when you open it (unless
you also select one or both of the Override Case Of options).
Note: These preferences apply only to HTML pages. Dreamweaver ignores them for XHTML pages because uppercase
tags and attributes are invalid XHTML.
Override Case Of: Tags and Attributes Specify whether to enforce your specified case options at all times, including
when you open an existing HTML document. When you select one of these options and click OK to dismiss the
dialog box, all tags or attributes in the current document are immediately converted to the specified case, as are all
tags or attributes in each document you open from then on (until you deselect this option again). Tags or attributes
you type in Code view and in the Quick Tag Editor are also converted to the specified case, as are tags or attributes
you insert using the Insert bar. For example, if you want tag names always to be converted to lowercase, specify
lowercase in the Default Tag Case option, and then select the Override Case Of: Tags option. Then when you open
a document that contains uppercase tag names, Dreamweaver converts them all to lowercase.
Note: Older versions of HTML allowed either uppercase or lowercase tag and attribute names, but XHTML requires
lowercase for tag and attribute names. The web is moving toward XHTML, so it’s generally best to use lowercase tag and
attribute names.
TD Tag: Do Not Include A Break Inside The TD Tag Addresses a rendering problem that occurs in some older
browsers when white space or line breaks exist immediately after a tag, or immediately before a or before a
and
). You must place the insertion point in the opening or closing tag and then click the Collapse
Full Tag button to collapse the tag.
You can also collapse the code outside a full tag by placing the insertion point in an opening or closing tag and
Alt-clicking (Windows) or Option-clicking (Macintosh) the Collapse Full Tag button. Additionally, Control-clicking
this button disables “smart collapse” so that Dreamweaver doesn’t adjust the content it collapses outside full tags. For
more information, see “About collapsing code” on page 324.
Collapse Selection Collapses the selected code.
You can also collapse the code outside a selection by Alt-clicking (Windows) or Option-clicking (Macintosh) the
Collapse Selection button. Additionally, Control-clicking this button disables “smart collapse” so that you can
collapse exactly what you selected without any manipulation from Dreamweaver. For more information, see “About
collapsing code” on page 324.
Expand All Restores all collapsed code.
September 4, 2007
DREAMWEAVER CS3 317
User Guide
Select Parent Tag Selects the content and surrounding opening and closing tags of the line in which you’ve placed
the insertion point. If you repeatedly click this button, and your tags are balanced, Dreamweaver eventually selects
the outermost html and /html tags.
Balance Braces Selects the content and surrounding parentheses, braces, or square brackets of the line in which you
placed the insertion point. If you repeatedly click this button, and your surrounding symbols are balanced,
Dreamweaver eventually selects the outermost braces, parentheses, or brackets in the document.
Line Numbers Lets you hide or show numbers at the beginning of each line of code.
Highlight Invalid Code Highlights invalid code in yellow.
Apply Comment Lets you wrap comment tags around selected code, or open new comment tags.
• Apply HTML Comment wraps the selected code with , or opens a new tag if no code is selected.
• Apply // Comment inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single
// tag if no code is selected.
• Apply /* */ wraps the selected CSS or JavaScript code with /* and */.
• Apply ' Comment is for Visual Basic code. It inserts a single quotation mark at the beginning of each line of a
Visual Basic script, or inserts a single quotation mark at the insertion point if no code is selected.
• When you are working in a ASP, ASP.NET, JSP, PHP, or ColdFusion file and you select the Apply Server Comment
option, Dreamweaver automatically detects the correct comment tag and applies it to your selection.
Remove Comment Removes comment tags from the selected code. If a selection includes nested comments, only the
outer comment tags are removed.
Wrap Tag Wraps selected code with the selected tag from the Quick Tag Editor.
Recent Snippets Lets you insert a recently used code snippet from the Snippets panel. For more information, see
“Work with code snippets” on page 315.
Move or Convert CSS Lets you move CSS to another location, or convert inline CSS to CSS rules. For more information, see “Move CSS rules” on page 137 and “Convert inline CSS to a CSS rule” on page 138.
Indent Code Shifts the selection to the right.
Outdent Code Shifts the selection to the left.
Format Source Code Applies previously specified code formats to selected code, or to the entire page if no code is
selected. You can also quickly set code formatting preferences by selecting Code Formatting Settings from the
Format Source Code button, or edit tag libraries by selecting Edit Tag Libraries.
The number of buttons available in the Coding toolbar varies depending on the size of the Code view in the
Document window. To see all of the available buttons, resize the Code view window or click the expander arrow at
the bottom of the Coding toolbar.
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Hidden Characters, and Auto
Indent) or hide buttons that you don’t want to use. To do this, however, you must edit the XML file that generates the
toolbar. For more information, see Extending Dreamweaver.
Note: The option to view hidden characters, which is not a default button in the Coding toolbar, is available from the
View menu (View > Code View Options > Hidden Characters).
September 4, 2007
DREAMWEAVER CS3 318
User Guide
See also
“Verify tags and braces are balanced” on page 327
“Coding toolbar overview” on page 20
“Display toolbars” on page 27
Insert code with the Insert bar
1 Position the insertion point in the code.
2 Select an appropriate category in the Insert bar.
3 Click a button in the Insert bar or select an item from a pop-up menu in the Insert bar.
When you click an icon, the code may appear in your page immediately, or a dialog box may appear requesting more
information to complete the code.
To find out what each button does, position the pointer over it until a tooltip appears. The number and type of
buttons available in the Insert bar varies depending on the current document type. It also depends on whether you’re
using Code view or Design view.
Although the Insert bar provides a collection of frequently used tags, it is not comprehensive. To choose from a more
comprehensive selection of tags, use the Tag Chooser.
See also
“Insert bar overview” on page 19
Insert tags with the Tag Chooser
Use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries (which include ColdFusion and
ASP.NET tag libraries).
1 Position the insertion point in the code, right-click (Windows) or Control-click (Macintosh), and select Insert Tag.
The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the right pane shows the
individual tags in the selected tag library folder.
2 Select a category of tags from the tag library, or expand the category and select a subcategory.
3 Select a tag from the right pane.
4 To view syntax and usage information for the tag in the Tag Chooser, click the Tag Info button. If available, information about the tag appears.
5 To view the same information about the tag in the Reference panel, click the icon. If available, information
about the tag appears.
6 To insert the selected tag into your code, click Insert.
If the tag appears in the right pane with angle brackets (for example, ), it doesn’t require additional
information, and it’s immediately inserted into the document at the insertion point.
If the tag does require additional information, a tag editor appears.
7 If a tag editor opens, enter the additional information, and click OK.
8 Click the Close button.
September 4, 2007
DREAMWEAVER CS3 319
User Guide
See also
“About Dreamweaver tag libraries” on page 343
Edit tags with Tag editors
Use Tag editors to view, specify, and edit the attributes of tags.
1 Right-click (Windows) or Control-click (Macintosh) a tag in Code view or an object in Design view, and select
Edit Tag from the pop-up menu. (The contents of this dialog box change depending on the selected tag.)
2 Specify or edit attributes for the tag and click OK.
To get more information about the tag within the Tag editor, click Tag Info.
Indent code blocks
As you write and edit code in Code view or the Code inspector, you can change the indentation level of a selected
block or line of code, shifting it right or left by one tab.
Indent the selected block of code
• Press Tab.
• Select Edit > Indent Code.
Unindent the selected block of code
• Press Shift+Tab.
• Select Edit > Outdent Code.
Copy and paste code
1 Copy the code from Code view or from another application.
2 Place the insertion point in Code view, and select Edit > Paste.
See also
“Paste and move collapsed code fragments” on page 325
Insert HTML comments
A comment is descriptive text that you insert in HTML code to explain the code or provide other information. The
text of the comment appears only in Code view and is not displayed in a browser.
Insert a comment at the insertion point
❖ Select Insert > Comment.
In Code view, a comment tag is inserted and the insertion point is placed in the middle of the tag. Type your
comment.
In Design view, the Comment dialog box appears. Enter the comment and click OK.
September 4, 2007
DREAMWEAVER CS3 320
User Guide
Display comment markers in Design view
❖ Select View > Visual Aids > Invisible Elements.
Make sure that the Comments option is selected in the Invisible Elements preferences or the comment marker does
not appear.
Edit an existing comment
• In Code view, find the comment and edit its text.
• In Design view, select the Comment marker, edit the comment’s text in the Property inspector, and then click in
the Document window.
Go to a JavaScript or VBScript function
In Code view and the Code inspector, you can view a list of all of the JavaScript or VBScript functions in your code
and jump to any one of them.
1 View the document in Code view (View > Code) or the Code inspector (Window > Code Inspector).
2 Do one of the following:
• In Code view, right-click (Windows) or Control-click (Macintosh) anywhere in Code view, and select the
Functions submenu from the context menu.
The Functions submenu does not appear in Design view.
Any JavaScript or VBScript functions in your code appear in the submenu.
To see the functions listed in alphabetical order, Control-right-click (Windows) or Option-Control-click (Macintosh)
in Code view, and then select the Functions submenu.
• In the Code inspector, click the Code Navigation button ({ }) on the toolbar.
3 Select a function name to jump to the function in your code.
Search for tags, attributes, or text in code
You can search for specific tags, attributes, and attribute values. For example, you can search for all img tags that have
no alt attribute.
You can also search for specific text strings that are within or not within a set of container tags. For example, you can
search for the word Untitled contained in a title tag to find all the untitled pages on your site.
1 Open the document to search in, or select documents or a folder in the Files panel.
2 Select Edit > Find And Replace.
3 Specify which files to search in, and then specify the kind of search to perform, and text or tags to search for.
Optionally, specify replacement text as well. Then click one of the Find buttons or one of the Replace buttons.
4 Click the Close button.
5 To search again without displaying the Find And Replace dialog box, press F3 (Windows) or Command+G
(Macintosh).
September 4, 2007
DREAMWEAVER CS3 321
User Guide
See also
“About regular expressions” on page 304
“Search for and replace text” on page 229
Save and recall search patterns
You can save search patterns and reuse them later.
See also
“About regular expressions” on page 304
“Search for and replace text” on page 229
Save a search pattern
1 In the Find And Replace dialog box (Edit > Find And Replace), set the parameters for the search.
2 Click the Save Query button (the disk icon).
3 In the dialog box that appears, navigate to the folder where you want to save queries. Then type a filename that
identifies the query, and click Save.
For example, if the search pattern involves looking for img tags with no alt attribute, you might name the query
img_no_alt.dwr.
Note: Saved queries have the filename extension .dwr. Some saved queries from older versions of Dreamweaver may
have the extension .dwq.
Recall a search pattern
1 Select Edit > Find And Replace.
2 Click the Load Query button (the folder icon).
3 Navigate to the folder where your queries are saved. Then select a query file and click Open.
4 Click Find Next, Find All, Replace, or Replace All to initiate the search.
Change code selections
1 In Code view, select some code and right-click (Windows) or Control-click (Macintosh).
2 Select the Selection submenu, and select any of the following options:
Collapse Selection Collapses the selected code.
Collapse Outside Selection Collapses all of the code outside the selected code.
Expand Selection Expands the selected code fragment.
Collapse Full Tag Collapses the content between a set of opening and closing tags (for example, the content between
and ).
Collapse Outside Full Tag Collapses the content outside a set of opening and closing tags (for example, the content
outside and ).
Expand All Restores all collapsed code.
Apply HTML Comment Wraps the selected code with , or opens a new tag if no code is selected.
September 4, 2007
DREAMWEAVER CS3 322
User Guide
Apply /* */ Comment Wraps the selected CSS or JavaScript code with /* and */.
Apply // Comment Inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single //
tag if no code is selected.
Apply ' Comment Inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a
single quotation mark at the insertion point if no code is selected.
Apply Server Comment Wraps the selected code. When you are working in a ASP, ASP.NET, JSP, PHP, or ColdFusion
file and you select the Apply Server Comment option, Dreamweaver automatically detects the correct comment tag
and applies it to your selection.
Apply Backslash-comment Hack Wraps the selected CSS code with comment tags that will cause Internet Explorer
5 for Macintosh to ignore the code.
Apply Caio Hack Wraps the selected CSS code with comment tags that will cause Netscape Navigator 4 to ignore the code.
Remove Comment Removes comment tags from the selected code. If a selection includes nested comments, only the
outer comment tags are removed.
Remove Backslash-comment Hack Removes comment tags from the selected CSS code. If a selection includes nested
comments, only the outer comment tags are removed.
Remove Caio Hack Removes comment tags from the selected CSS code. If a selection includes nested comments,
only the outer comment tags are removed
Convert Tabs to Spaces Converts each tab in the selection to a number of spaces equal to the Tab Size value set in
Code Format preferences. For more information, see “Change the code format” on page 309.
Convert Spaces To Tabs Converts runs of spaces in the selection to tabs. Each run of spaces that has a number of
spaces equal to the tab size is converted to one tab.
Indent Indents the selection, shifting it to the right. For more information, see “Indent code blocks” on page 319.
Outdent Shifts the selection to the left.
Remove All Tags Removes all the tags in the selection.
Convert Lines To Table Wraps the selection in a table tag with no attributes.
Add Line Breaks Adds a br tag at the end of each line of the selection.
Convert To Uppercase Converts all letters in the selection (including tag and attribute names and values) to
uppercase.
Convert To Lowercase Converts all letters in the selection (including tag and attribute names and values) to
lowercase.
Convert Tags To Uppercase Converts all tag and attribute names and attribute values in the selection to uppercase.
Convert Tags To Lowercase Converts all tag and attribute names and attribute values in the selection to lowercase.
See also
“Collapse and expand code fragments” on page 324
September 4, 2007
DREAMWEAVER CS3 323
User Guide
Use language-reference material
The Reference panel provides you with a quick reference tool for markup languages, programming languages, and
CSS styles. It provides information on the specific tags, objects, and styles that you are working with in Code view
(or the Code inspector). The Reference panel also provides example code that you can paste into your documents.
Open the Reference panel
1 Do one of the following in Code view:
• Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword, and then select Reference from
the context menu.
• Place the insertion point in a tag, attribute, or keyword, and then press Shift+F1.
The Reference panel opens and displays information about the tag, attribute, or keyword you clicked.
2 To adjust the text size in the Reference panel, select Large Font, Medium Font, or Small Font from the options
menu (the small arrow at the upper right of the panel).
Paste example code into your document
1 Click anywhere in example code in the reference content.
The entire code example is highlighted.
2 Select Edit > Copy, and then paste the example code into your document in Code view.
Browse the reference content in the Reference panel
1 To display tags, objects, or styles from another book, select a different book from the Book pop-up menu.
2 To view information about a specific item, select it from the Tag, Object, Style, or CFML pop-up menu (depending
on which book you selected).
3 To view information about an attribute of the selected item, select the attribute from the pop-up menu next to the
Tag, Object, Style, or CFML pop-up menu.
This menu contains the list of attributes for the item you select. The default selection is Description, which displays
a description of the chosen item.
Print code
You can print your code to edit it offline, archive it, or distribute it.
1 Open a page in Code view.
2 Select File > Print Code.
3 Specify printing options, and then click OK (Windows) or Print (Macintosh).
September 4, 2007
DREAMWEAVER CS3 324
User Guide
Collapsing code
About collapsing code
You can collapse and expand code fragments so that you can view different sections of your document without
having to use the scroll bar. For example, to see all of the CSS rules in the head tag that apply to a div tag farther
down the page, you can collapse everything between the head tag and the div tag so that you can see both sections
of code at once. Although you can select code fragments by making selections in Design view or Code view, you can
collapse code only in Code view.
Note: Files created from Dreamweaver templates display all code as fully expanded, even if the template file (.dwt)
contains collapsed code fragments.
See also
“Paste and move collapsed code fragments” on page 325
“Insert code with the Coding toolbar” on page 316
“Clean up code” on page 326
Collapse and expand code fragments
When you select code, a set of collapse buttons is displayed next to the selection (Minus symbols in Windows;
vertical triangles on the Macintosh). Click the buttons to collapse and expand the selection. When the code is
collapsed, the collapse buttons change to an expand button (a Plus button in Windows; a horizontal triangle on the
Macintosh).
Sometimes, the exact fragment of code that you selected is not collapsed. Dreamweaver uses “smart collapse” to
collapse the most common and visually pleasing selection. For example, if you selected an indented tag and then
selected the indented spaces before the tag as well, Dreamweaver would not collapse the indented spaces, because
most users would expect their indentations to be preserved. To disable smart collapse and force Dreamweaver to
collapse exactly what you selected, hold down the Control key before collapsing your code.
Also, a warning icon on collapsed code fragments is displayed if a fragment contains errors or code that is unsupported by certain browsers.
You can also collapse the code by Alt-clicking (Windows) or Option-clicking (Macintosh) one of the collapse buttons,
or by clicking the Collapse Selection button in the Coding toolbar.
1 Select some code.
2 Select Edit > Code Collapse, and select any of options.
See also
“Change code selections” on page 321
“Insert code with the Coding toolbar” on page 316
Select a collapsed code fragment
❖ In Code view, click the collapsed code fragment.
September 4, 2007
DREAMWEAVER CS3 325
User Guide
Note: When you make a selection in Design view that is part of a collapsed code fragment, the fragment is automatically
expanded in Code view. When you make a selection in Design view that is a complete code fragment, the fragment
remains collapsed in Code view.
View the code in a collapsed code fragment without expanding it
❖ Hold the mouse pointer over the collapsed code fragment.
Use keyboard shortcuts to collapse and expand code
❖ You can also use the following keyboard shortcuts:
Command
Windows
Macintosh
Collapse Selection
Control+Shift+C
Command+Shift+C
Collapse Outside Selection
Control+Alt+C
Command+Alt+C
Expand Selection
Control+Shift+E
Command+Shift+E
Collapse Full Tag
Control+Shift+J
Command+Shift+J
Collapse Outside Full Tag
Control+Alt+J
Command+Alt+J
Expand All
Control+Alt+E
Command+Alt+E
Paste and move collapsed code fragments
You can copy and paste collapsed code fragments, or move collapsed code fragments by dragging.
See also
“Insert code with the Coding toolbar” on page 316
“Clean up code” on page 326
Copy and paste a collapsed code fragment
1 Select the collapsed code fragment.
2 Select Edit > Copy.
3 Place the insertion point where you want to paste the code.
4 Select Edit > Paste.
Note: You can paste into other applications, but the collapsed state of the code fragment is not preserved.
Drag a collapsed code fragment
1 Select the collapsed code fragment.
2 Drag the selection to the new location.
To drag a copy of the selection, Control-drag (Windows) or Alt-drag (Macintosh).
Note: You cannot drag to other documents.
September 4, 2007
DREAMWEAVER CS3 326
User Guide
Optimizing and debugging code
Find coding errors with the Validator
You can use the Validator in Dreamweaver to quickly locate tag or syntax errors in your code. You can specify the
tag-based languages against which the Validator should check, the specific problems that the Validator should check,
and the types of errors that the Validator should report.
Note: Validator preferences are ignored when you validate a document that explicitly specifies a doc type.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Validator from the Category list on the left.
3 Select tag libraries to validate against.
You can’t select multiple versions of the same tag library or language; for example, if you select HTML 4.0, you can’t
also select HTML 3.2 or HTML 2.0. Select the earliest version you want to validate against; for example, if a
document contains valid HTML 2.0 code, it will also be valid HTML 4.0 code.
4 Click Options, and set options for those libraries.
5 Select Display options for the types of errors and warnings that you want the Validator report to include.
6 Select items the Validator should check for:
Quotes In Text Indicates that Dreamweaver should warn you about each use of quotation marks in the text of the
document; you should use the " entity instead of quotation marks in the text of HTML documents.
Entities In Text Indicates that Dreamweaver should recommend changing certain characters (such as ampersand
(&), less-than (<), and greater-than (>)) to their HTML entity equivalents.
7 Click OK to close the Validator Options dialog box, and click OK again to set the preferences.
See also
“Validate tags” on page 328
Clean up code
You can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable
HTML or XHTML code.
For information on how to clean up HTML generated from a Microsoft Word document, see “Open and edit existing
documents” on page 75.
1 Open a document:
• If the document is in HTML, select Commands > Clean Up HTML.
• If the document is in XHTML, select Commands > Clean Up XHTML.
For an XHTML document, the Clean Up XHTML command fixes XHTML syntax errors, sets the case of tag
attributes to lowercase, and adds or reports the missing required attributes for a tag in addition to performing the
HTML cleanup operations.
2 In the dialog box that appears, select any of the options, and click OK.
September 4, 2007
DREAMWEAVER CS3 327
User Guide
Note: Depending on the size of your document and the number of options selected, it may take several seconds to
complete the cleanup.
Remove Empty Container Tags Removes any tags that have no content between them. For example, and
are empty tags, but the tag in some text is not.
Remove Redundant Nested Tags Removes all redundant instances of a tag. For example, in the code This is
what I really wanted to say, the b tags surrounding the word really are redundant and would be
removed.
Remove Non-Dreamweaver HTML Comments Removes all comments that were not inserted by Dreamweaver. For
example, would be removed, but wouldn’t, because it’s a Dreamweaver comment that marks the beginning of an editable region in a template.
Remove Dreamweaver Special Markup Removes comments that Dreamweaver adds to code to allow documents to
be automatically updated when templates and library items are updated. If you select this option when cleaning up
code in a template-based document, the document is detached from the template. For more information, see
“Detach a document from a template” on page 414.
Remove Specific Tag(s) Removes the tags specified in the adjacent text box. Use this option to remove custom tags
inserted by other visual editors and other tags that you don’t want to appear on your site (for example, blink).
Separate multiple tags with commas (for example, font,blink).
Combine Nested Tags When Possible Consolidates two or more font tags when they control the same range
of text. For example, big red would be changed to
big red.
Show Log On Completion Displays an alert box with details about the changes made to the document as soon as the
cleanup is finished.
See also
“Change the code format” on page 309
“Set the code colors” on page 312
Verify tags and braces are balanced
You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in your page are
balanced. Balanced means that every opening tag, parenthesis, brace, or bracket has a corresponding closing one,
and vice versa.
Check for balanced tags
1 Open the document in Code view.
2 Place the insertion point in the nested code you want to check.
3 Select Edit > Select Parent Tag.
The enclosing matching tags (and their contents) are selected in your code. If you keep selecting Edit > Select Parent
Tag, and your tags are balanced, eventually Dreamweaver will select the outermost html and /html tags.
Check for balanced parentheses, braces, or square brackets
1 Open the document in Code view.
2 Place the insertion point in the code you want to check.
September 4, 2007
DREAMWEAVER CS3 328
User Guide
3 Select Edit > Balance Braces.
All of the code between the enclosing parentheses, braces, or square brackets is selected. Choosing Edit > Balance
Braces again selects all of the code inside the parentheses, braces, or square brackets that enclose the new selection.
Check for browser compatibility
The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that can trigger
browser rendering bugs. This feature also tests the code in your documents for any CSS properties or values that are
unsupported by your target browsers.
Note: This feature replaces the former Target Browser Check feature, but retains the CSS functionality of that feature.
See also
“Check for cross-browser CSS rendering issues” on page 141
Validate tags
Check the current document or a selected tag for tag or syntax errors. Dreamweaver can validate documents in many
languages, including HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), Wireless
Markup Language (WML), and XML.
You can set preferences for the Validator, such as specifying the tag-based languages against which the Validator
should check, the specific problems that the Validator should check for, and the types of errors that the Validator
should report. For more information, see Set the Validator preferences.
Note: To validate your document for accessibility, see “Testing your site” on page 104.
1 Do one of the following:
• For an XML or XHTML file, select File > Check Page > Validate as XML.
• Select File > Check Page > Validate Markup.
The Validation tab of the Results panel displays a “No errors or warnings” message or lists the syntax errors it found.
2 Double-click an error message to highlight the error in the document.
3 To save the report as an XML file, click the Save Report button.
4 To view the report in your primary browser (which lets you print the report), click the Browse Report button.
Make pages XHTML-compliant
When you create a page, you can make it XHTML-compliant. You can also make an existing HTML document
XHTML-compliant.
See also
“About the XHTML code generated by Dreamweaver” on page 302
Create XHTML-compliant documents
1 Select File > New.
2 Select a category and type of page to create.
September 4, 2007
DREAMWEAVER CS3 329
User Guide
3 Select one of the XHTML document type definitions (DTD) from the DocType pop-up menu on the far right of
the dialog box, and click Create.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
Note: Not all document types can be made XHTML-compliant.
Create XHTML-compliant documents by default
1 Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category.
2 Select a default document and select one of the XHTML document type definitions from the Default Document
Type (DTD) pop-up menu, and click OK.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
Make an existing HTML document XHTML-compliant
1 Open a document, and do one of the following:
• For a document without frames, select File > Convert, and then select one of the XHTML document type definitions.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
• For a document with frames, select a frame and select File > Convert, and then select one of the XHTML
document type definitions.
2 To convert the whole document, repeat this step for every frame and the frameset document.
Note: You can’t convert an instance of a template, because it must be in the same language as the template on which it’s
based. For example, a document based on an XHTML template will always be in XHTML, and a document based on a
non-XHTML-compliant HTML template will always be HTML and can’t be converted to XHTML or any other
language.
Use the ColdFusion debugger (Windows only)
If you’re a ColdFusion developer using ColdFusion as your Dreamweaver testing server, you can view ColdFusion
debugging information without leaving Dreamweaver.
Note: This feature is not supported on the Macintosh. Macintosh developers can use Preview In Browser (F12) to open
a ColdFusion page in a separate browser. If the page contains errors, information about the possible causes for the errors
appears at the bottom of the page.
If you’re running ColdFusion MX 6.1 or earlier, make sure debugging settings are enabled in the ColdFusion Administrator before you begin debugging. If you’re running ColdFusion MX 7 or later, Dreamweaver enables the settings
for you.
Also, make sure your Dreamweaver testing server is running ColdFusion. For more information, see “Set up a testing
server” on page 48.
September 4, 2007
DREAMWEAVER CS3 330
User Guide
To ensure the debug information is refreshed every time a page is displayed in the internal browser, make sure
Internet Explorer checks for newer versions of the file every time the file is requested. In Internet Explorer, select
Tools > Internet Options, select the General tab, and click the Settings button in the Temporary Internet Files area. In
the Settings dialog box, select the Every Visit to Page option.
1 Open the ColdFusion page in Dreamweaver.
2 Click the Server Debug icon
on the Document toolbar.
Dreamweaver requests the page from the ColdFusion server and displays it in an internal Internet Explorer browser
window. If the page contains errors, possible causes for the errors appear at the bottom of the page.
At the same time, a Server Debug panel opens. The panel provides a large amount of useful information, such as all
the pages the server processed to render the page, all the SQL queries executed on the page, and all the server
variables and their values, if any. The panel also provides a summary of execution times.
3 If an Exceptions category appears in the Server Debug panel, click the Plus (+) icon to expand the category.
The Exceptions category appears if the server encountered a problem or problems with the page. Expand the
category to find out more about the problem.
4 Switch back to Code view (View > Code) or Design view (View > Design) and fix the error.
5 Save the file and click the Server Debug icon again.
Dreamweaver renders the page in the internal browser again and updates the Server Debug panel. If there are no
more problems with the page, the Exceptions category does not reappear in the panel.
6 To leave debug mode, switch to Code view (View > Code) or Design view (View > Design).
See also
“Using ColdFusion components (ColdFusion)” on page 665
Editing code in Design view
About editing code in Design view
Dreamweaver lets you visually create and edit web pages without worrying about the underlying source code, but
there are times when you might need to edit the code for greater control or to troubleshoot your web page.
Dreamweaver lets you edit some code while working in Design view.
This section is designed for people who prefer to work in Design view, but who also want quick access to the code.
Selecting child tags in Design view
If you select an object in Design view that contains child tags—for example, an HTML table—you can quickly select
the first child tag of that object by selecting Edit > Select Child.
Note: This command is only enabled in Design view.
For example, the tag normally has child tags. If you select a tag in the tag selector, you can
select the first row in the table by selecting Edit > Select Child. Dreamweaver selects the first tag in the tag
selector. Since the tag itself has child tags, namely
tags, selecting Edit > Select Child again selects the first
cell in the table.
September 4, 2007
DREAMWEAVER CS3 331
User Guide
Edit code with the Property inspector
You can use the Property inspector to inspect and edit the attributes of text or of objects on your page. The properties
shown in the Property inspector generally correspond to attributes of tags; changing a property in the Property
inspector generally has the same effect as changing the corresponding attribute in Code view.
Note: The Tag inspector and the Property inspector both let you view and edit a tag’s attributes. The Tag inspector lets
you to view and edit every attribute associated with a given tag. The Property inspector shows only the most common
attributes, but provides a richer set of controls for changing those attributes’ values, and lets you edit certain objects (such
as table columns) that don’t correspond to specific tags.
1 Click in the text or select an object on the page.
The Property inspector for the text or object appears below the Document window. If the Property inspector is not
visible, select Window > Properties.
2 Make changes to the attributes in the Property inspector.
Edit CFML with the Property inspector
Use the Property inspector to inspect and modify ColdFusion markup in Design view.
1 In the Property inspector, click the Attributes button to edit the tag’s attributes or to add new ones.
2 If the tag holds content between its opening and closing tags, click the Content button to edit the content.
The Content button appears only if the selected tag is not an empty tag (that is, if it has both an opening and a closing tag).
3 If the tag contains a conditional expression, make changes to it in the Expression box.
Change attributes with the Tag inspector
Use the Tag inspector to edit or add attributes and attributes’ values. The Tag inspector lets you edit tags and objects
by using a property sheet similar to the ones found in other integrated development environments (IDEs).
1 Do one of the following in the Document window:
• In Code view (or the Code inspector), click anywhere in a tag’s name or in its contents.
• In Design view, select an object, or select a tag in the Tag Selector.
2 Open the Tag inspector (Window > Tag Inspector), and select the Attributes tab.
The selection’s attributes and their current values appear in the Tag inspector.
3 Do any of the following in the Tag inspector:
• To view the attributes organized by category, click the Show Category View button
• To view the attributes in an alphabetical list, click the Show List View button
.
.
• To change the attribute’s value, select the value and edit it.
• To add a value for an attribute with no value, click in the attribute-value column to the right of the attribute and
add a value.
• If the attribute takes pre-defined values, select a value from the pop-up menu (or the color picker) to the right of
the attribute-value column.
• If the attribute takes a URL value, click the Browse button or use the Point-To-File icon to select a file, or type the
URL in the box.
September 4, 2007
DREAMWEAVER CS3 332
User Guide
• If the attribute takes a value from a source of dynamic content (such as a database), click the Dynamic Data button
to the right of the attribute-value column. Then select a source.
• To delete the attribute’s value, select the value and press Backspace (Windows) or Delete (Macintosh).
• To change the name of an attribute, select the attribute name and edit it.
Note: If you change the name of a standard attribute and then add a value for that attribute, the attribute and its new
value move to the appropriate category.
• To add a new attribute not already listed, click in the empty space below the last listed attribute name and type a
new attribute name.
4 Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your
document.
See also
“Using JavaScript behaviors” on page 347
“Creating and managing CSS” on page 124
“Defining sources of dynamic content” on page 547
Quick Tag Editor overview
You use the Quick Tag Editor to quickly inspect, insert, and edit HTML tags without leaving Design view.
If you type invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing
quotation marks and closing angle brackets where needed.
To set the Quick Tag Editor options, open the Quick Tag Editor by pressing Control-T (Windows) or Command-T
(Macintosh).
The Quick Tag Editor has three modes:
• Insert HTML mode is used to insert new HTML code.
• Edit Tag mode is used to edit an existing tag.
• Wrap Tag mode is to wrap a new tag around the current selection.
Note: The mode in which the Quick Tag Editor opens depends on the current selection in Design view.
In all three modes, the basic procedure for using the Quick Tag Editor is the same: open the editor, enter or edit tags
and attributes, and then close the editor.
You can cycle through the modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick
Tag Editor is active.
See also
“Use the hints menu in the Quick Tag Editor” on page 334
Edit code with the Quick Tag Editor
Use the Quick Tag Editor to quickly insert and edit HTML tags without leaving Design view.
September 4, 2007
DREAMWEAVER CS3 333
User Guide
See also
“Write and edit scripts in Design view” on page 335
Insert an HTML tag
1 In Design view, click in the page to place the insertion point where you want to insert code.
2 Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Insert HTML mode.
3 Enter the HTML tag and press Enter.
The tag is inserted into your code, along with a matching closing tag if applicable.
4 Press Escape to exit without making any changes.
Edit an HTML tag
1 Select an object in Design view.
You can also select the tag you want to edit from the tag selector at the bottom of the Document window. For more
information, see “Edit code with the tag selector” on page 334.
2 Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Edit Tag mode.
3 Enter new attributes, edit existing attributes, or edit the tag’s name.
4 Press Tab to move forward from one attribute to the next; press Shift+Tab to move back.
Note: By default, changes are applied to the document when you press Tab or Shift+Tab.
5 To close the Quick Tag Editor and apply all the changes, press Enter.
6 To exit without making any further changes, press Escape.
Wrap the current selection with HTML tags
1 Select unformatted text or an object in Design view.
Note: If you select text or an object that includes an opening or closing HTML tag, the Quick Tag Editor opens in Edit
Tag mode instead of Wrap Tag mode.
2 Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property
inspector.
The Quick Tag Editor opens in Wrap Tag mode.
3 Enter a single opening tag, such as strong, and press Enter (Windows) or Return (Macintosh).
The tag is inserted at the beginning of the current selection, and a matching closing tag is inserted at the end.
4 To exit without making any changes, press Escape.
September 4, 2007
DREAMWEAVER CS3 334
User Guide
Use the hints menu in the Quick Tag Editor
The Quick Tag Editor includes an attributes hint menu that lists all the valid attributes of the tag you are editing or
inserting.
You can also disable the hints menu or adjust the delay before the menu pops up in the Quick Tag Editor.
To see a hints menu that lists valid attributes for a tag, pause briefly while editing an attribute name in the Quick Tag
Editor. A hints menu appears, listing all the valid attributes for the tag you’re editing.
Similarly, to see a hints menu listing valid tag names, pause briefly while entering or editing a tag name in the Quick
Tag Editor.
Note: The Quick Tag Editor code hints preferences are controlled by the normal code hints preferences. For more information, see “Set the code hints” on page 311.
See also
“Quick Tag Editor overview” on page 332
Use a hints menu
1 Do one of the following:
• Begin to type a tag or attribute name. The selection in the Code Hints menu jumps to the first item that starts with
the letters you typed.
• Use the Up and Down Arrow keys to select an item.
• Use the scroll bar to find an item.
2 Press Enter to insert the selected item, or double-click an item to insert it.
3 To close the hints menu without inserting an item, press Escape or continue typing.
Disable the hints menu or change the delay before it appears
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and select Quick Tag Editor.
The Quick Tag Editor Preferences dialog box appears.
2 To disable the hints menu, deselect the Enable Tag Hints option.
3 To change the delay before the menu appears, adjust the Delay slider, and click OK.
Edit code with the tag selector
You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in
the status bar at the bottom of the Document window and shows a series of tags, as follows:
Edit or delete a tag
1 Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2 Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
September 4, 2007
DREAMWEAVER CS3 335
User Guide
3 To edit a tag, select Edit Tag from the menu. Make your changes in the Quick Tag Editor. For more information,
see “Edit code with the Quick Tag Editor” on page 332.
4 To delete a tag, select Remove Tag from the menu.
Select an object corresponding to a tag
1 Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2 Click a tag in the tag selector.
The object represented by the tag is selected on the page.
Use this technique to select individual table rows (tr tags) or cells (td tags).
Write and edit scripts in Design view
You can work with client-side JavaScripts and VBScripts in both Code and Design view, in the following ways:
• Write a JavaScript or VBScript script for your page without leaving Design view.
• Create a link in your document to an external script file without leaving Design view.
• Edit a script without leaving Design view.
Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers appear on the page.
Write a client-side script
1 Place the insertion point where you want the script.
2 Select Insert > HTML > Script Objects > Script.
3 Select the scripting language from the Language pop-up menu.
If you are using JavaScript and are unsure of the version, select JavaScript rather than JavaScript1.1 or JavaScript1.2.
4 Type or paste your script code into the Content box.
You don’t need to include the opening and closing script tags.
5 Type or paste HTML code into the No Script box. Browsers that don’t support the chosen scripting language
display this code instead of running the script.
6 Click OK.
Link to an external script file
1 Place the insertion point where you want the script.
2 Select Insert > HTML > Script Objects > Script.
3 Click OK without typing anything in the Content box.
4 Select the script marker in Design view of the Document window.
5 In the Property inspector, click the folder icon and browse to and select the external script file, or type the filename
in the Source box.
Edit a script
1 Select the script marker.
September 4, 2007
DREAMWEAVER CS3 336
User Guide
2 In the Property inspector, click the Edit button.
The script appears in the Script Properties dialog box.
If you linked to an external script file, the file opens in Code view, where you can make your edits.
Note: If there is code between the script tags, the Script Properties dialog box opens even if there is also a link to an
external script file.
3 In the Language box, specify either JavaScript or VBScript as the language of the script.
4 In the Type pop-up menu, specify the type of script, either client-side or server-side.
5 (Optional) In the Source box, specify an externally linked script file.
Click the folder icon or the Browse button to select a file, or type the path.
6 Edit the script, and click OK.
Edit ASP server-side scripts in Design view
Use the ASP script Property inspector to inspect and modify ASP server-side scripts in Design view.
1 In Design view, select the server-language tag visual icon.
2 In the ASP script Property inspector, click the Edit button.
3 Edit the ASP server-side script, and click OK.
Edit scripts on the page by using the Property inspector
1 In the Property inspector, select the scripting language from the Language pop-up menu, or type a language name
in the Language box.
Note: If you are using JavaScript and are unsure of the version, select JavaScript rather than JavaScript1.1 or
JavaScript1.2.
2 In the Type pop-up menu, specify the type of script, either client-side or server-side.
3 (Optional) In the Source box, specify an externally linked script file. Click the folder icon to select the file, or type
the path.
4 Click Edit to modify the script.
See also
“Write and edit scripts in Design view” on page 335
Using JavaScript behaviors
You can easily attach JavaScript (client-side) behaviors to page elements by using the Behaviors tab of the Tag
inspector. For more information, see “Applying built-in Dreamweaver behaviors” on page 350.
Working with head content for pages
Pages contain elements that describe the information on the page, which is used by search browsers. You can set the
properties of head elements to control how your pages are identified.
September 4, 2007
DREAMWEAVER CS3 337
User Guide
View and edit head content
You can view the elements in the head section of a document by using the View menu, the Document window’s Code
view, or the Code inspector.
View elements in the head section of a document
❖ Select View > Head Content. For each element of the head content, a marker appears at the top of the Document
window in Design view.
Note: If your Document window is set to show only Code view, View > Head Content is dimmed.
Insert an element into the head section of a document
1 Select an item from the Insert > HTML > Head Tags submenu.
2 Enter options for the element in the dialog box that appears, or in the Property inspector.
Edit an element in the head section of a document
1 Select View > Head Content.
2 Click one of the icons in the head section to select it.
3 Set or modify the properties of the element in the Property inspector.
Set the meta properties for the page
A meta tag is a head element that records information about the current page, such as the character encoding, author,
copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date,
refresh interval, and PICS rating for the page. (PICS, the Platform for Internet Content Selection, provides a method
for assigning ratings, such as movie ratings, to web pages.)
Add a meta tag
1 Select Insert > HTML > Head Tags > Meta.
2 Specify the properties in the dialog box that appears.
Edit an existing meta tag
1 Select View > Head Content.
2 Select the Meta marker that appears at the top of the Document window.
3 Specify the properties in the Property inspector.
Meta tag properties
❖ Set the meta tag properties as follows:
Attribute Specifies whether the meta tag contains descriptive information about the page (name) or HTTP header
information (http-equiv).
Value Specifies the type of information you’re supplying in this tag. Some values, such as description, keywords,
and refresh, are already well defined (and have their own individual Property inspectors in Dreamweaver), but you
can specify practically any value (for example, creationdate, documentID, or level).
Content Specifies the actual information. For example, if you specified level for Value, you might specify
beginner, intermediate, or advanced for Content.
September 4, 2007
DREAMWEAVER CS3 338
User Guide
Set the page title
There is only one title property: the title of the page. The title appears in the title bar of the Document window in
Dreamweaver as well as in the browser’s title bar when you view the page in most browsers. The title also appears in
the Document window toolbar.
Specify the title in the Document window
❖ Enter the title in the Title text box in the Document window toolbar.
Specify the title in the head content
1 Select View > Head Content.
2 Select the Title marker that appears at the top of the Document window.
3 Specify the page title in the Property inspector.
Specify keywords for the page
Many search-engine robots (programs that automatically browse the web gathering information for search engines
to index) read the contents of the Keywords meta tag and use the information to index your pages in their databases.
Because some search engines limit the number of keywords or characters they index, or ignore all keywords if you
go beyond the limit, it’s a good idea to use just a few well-chosen keywords.
Add a Keywords meta tag
1 Select Insert > HTML > Head Tags > Keywords.
2 Specify the keywords, separated by commas, in the dialog box that appears.
Edit a Keywords meta tag
1 Select View > Head Content.
2 Select the Keywords marker that appears at the top of the Document window.
3 In the Property inspector, view, modify, or delete keywords. You can also add keywords separated by commas.
Specify descriptions for the page
Many search-engine robots (programs that automatically browse the web gathering information for search engines
to index) read the contents of the Description meta tag. Some use the information to index your pages in their
databases, and some also display the information on the search results page (instead of displaying the first few lines
of your document). Some search engines limit the number of characters they index, so it’s a good idea to limit your
description to a few words (for example, PorkbarbecuecateringinAlbany,Georgia, or webdesignatreasonableratesforclientsworldwide).
Add a Description meta tag
1 Select Insert > HTML > Head Tags > Description.
2 Enter descriptive text in the dialog box that appears.
Edit a Description meta tag
1 Select View > Head Content.
2 Select the Description marker that appears at the top of the Document window.
September 4, 2007
DREAMWEAVER CS3 339
User Guide
3 In the Property inspector, view, modify, or delete the descriptive text.
Set the refresh properties of the page
Use the Refresh element to specify that the browser should automatically refresh your page—by reloading the
current page or going to a different one—after a certain amount of time. This element is often used to redirect users
from one URL to another, often after displaying a text message that the URL has changed.
Add a Refresh meta tag
1 Select Insert > HTML > Head Tags > Refresh.
2 Set the Refresh meta tag properties in the dialog box that appears.
Edit a Refresh meta tag
1 Select View > Head Content.
2 Select the Refresh marker that appears at the top of the Document window.
3 In the Property inspector, set the Refresh meta tag properties.
Set the Refresh meta tag properties
❖ Specify the Refresh meta tag properties as follows:
Delay The time in seconds to wait before the browser refreshes the page. To make the browser refresh the page
immediately after it finishes loading, enter 0 in this box.
URL or Action Specifies whether the browser should go to a different URL or refresh the current page, after the
specified delay. To make a different URL open (rather than refreshing the current page), click the Browse button,
then browse to and select the page to load.
Set the base URL properties of the page
Use the Base element to set the base URL that all document-relative paths in the page are considered relative to.
Add a Base meta tag
1 Select Insert > HTML > Head Tags > Base.
2 Specify the Base meta tag properties in the dialog box that appears.
Edit a Base meta tag
1 Select View > Head Content.
2 Select the Base marker that appears at the top of the Document window.
3 In the Property inspector, specify the Base meta tag properties.
Specify the Base meta tag properties
❖ Specify the Base meta tag properties as follows:
Href The base URL. Click the Browse button to browse to and select a file, or type a path in the box.
Target Specifies the frame or window in which all linked documents should open. Select one of the frames in the
current frameset, or one of the following reserved names:
•
_blank loads the linked document in a new, unnamed browser window.
September 4, 2007
DREAMWEAVER CS3 340
User Guide
•
_parent loads the linked document into the parent frameset or window of the frame that contains the link. If the
frame containing the link is not nested, then this is equivalent to _top; the linked document loads into the full
browser window.
•
_self loads the linked document in the same frame or window as the link. This target is the default, so you usually
don’t have to specify it.
•
_top loads the linked document in the full browser window, thereby removing all frames.
Set the link properties of the page
Use the link tag to define a relationship between the current document and another file.
Note: The link tag in the head section is not the same thing as an HTML link between documents in the body section.
Add a Link meta tag
1 Select Insert > HTML > Head Tags > Link.
2 Specify the Link meta tag properties in the dialog box that appears.
Edit a Link meta tag
1 Select View > Head Content.
2 Select the Link marker that appears at the top of the Document window.
3 In the Property inspector, specify the Link meta tag properties.
Specify the Link meta tag properties
❖ Set the Link meta tag properties as follows:
Href The URL of the file that you are defining a relationship to. Click the Browse button to browse to and select a
file, or type a path in the box. Note that this attribute does not indicate a file that you’re linking to in the usual HTML
sense; the relationships specified in a Link element are more complex.
ID Specifies a unique identifier for the link.
Title Describes the relationship. This attribute has special relevance for linked style sheets; for more information, see
the External Style Sheets section of the HTML 4.0 specification on the World Wide Web Consortium website at
www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel Specifies the relationship between the current document and the document in the Href box. Possible values
include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter,
Section, Subsection, Appendix, Help, and Bookmark. To specify more than one relationship, separate values with
a space.
Rev Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the
Href box. Possible values are the same as those for Rel.
Working with server-side includes
About server-side includes
You can use Dreamweaver to insert server-side includes in your pages, edit the includes, or preview pages containing
includes.
September 4, 2007
DREAMWEAVER CS3 341
User Guide
A server-side include is a file that the server incorporates into your document when a browser requests your
document from the server.
When a visitor’s browser requests the document that contains the include instruction, your server processes the
include instruction and creates a new document in which the include instruction is replaced by the contents of the
included file. The server then sends this new document to the visitor’s browser. When you open a local document
directly in a browser, however, there’s no server to process the include instructions in that document, so the browser
opens the document without processing those instructions, and the file that’s supposed to be included doesn’t appear
in the browser. Thus, it can be difficult, without using Dreamweaver, to look at local files and see them as they’ll
appear to visitors after you’ve put them on the server.
With Dreamweaver you can preview documents just as they’ll appear after they’re on the server, both in the Design
view and when you use the Preview in Browser feature. To do so, however, you must make sure you are previewing
the file that contains the include as a temporary file. (Select Edit > Preferences, select the Preview in Browser
category, and make sure the Preview using temporary file option is selected.)
Note: If you are using a testing server, such as Apache or Microsoft IIS, to preview your files on your local drive, you do
not need to preview the file as a temporary file because the server does the processing for you.
Placing a server-side include in a document inserts a reference to an external file; it doesn’t insert the contents of the
specified file in the current document. The contents of the specified file should only contain the content that you
want to include. That is, the include file should not contain any head tags, body tags, or html tags (meaing the
tag—formatting HTML tags, such as p tags, div tags, and so on, are fine). If it does, these tags will conflict
with the tags in the original document, and Dreamweaver won’t display the page properly.
You cannot edit the included file directly in a document. To edit the contents of a server-side include, you must
directly edit the file that you’re including. Any changes to the external file are automatically reflected in every
document that includes it.
There are two types of server-side includes: Virtual and File. Dreamweaver inserts File type includes by default, but
you can use the Property inspector to select the one that is appropriate for the type of web server you use:
• If your server is an Apache web server, select Virtual. In Apache, Virtual works in all cases, while File works only
in some cases.
• If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual works with IIS only in certain
circumstances.)
Note: Unfortunately, IIS won’t let you include a file in a folder above the current folder in the folder hierarchy, unless
special software has been installed on the server. If you must include a file from a folder higher in the folder hierarchy on
an IIS server, ask your system administrator if the necessary software is installed.
• For other kinds of servers, or if you don’t know what kind of server you’re using, ask your system administrator
which option to use.
Some servers are configured to examine all files to see if they contain server-side includes; other servers are
configured to examine only files with a particular file extension, such as .shtml, .shtm, or .inc. If a server-side include
isn’t working for you, ask your system administrator if you need to use a special extension in the name of the file that
uses the include. (For example, if the file is named canoe.html, you may have to rename it to canoe.shtml.) If you
want your files to retain .html or .htm extensions, ask your system administrator to configure the server to examine
all files (not just files with a certain extension) for server-side includes. Parsing a file for server-side includes takes a
little extra time, so pages that the server parses are served a little more slowly than other pages; therefore, some
system administrators won’t provide the option of parsing all files.
September 4, 2007
DREAMWEAVER CS3 342
User Guide
Insert server-side includes
You can use Dreamweaver to insert server-side includes in your page.
Insert a server-side include
1 Select Insert > Server-Side Include.
2 In the dialog box that appears, browse to and select a file.
By default, a File type of include is inserted.
3 To change the type of the include, select the server-side include in the Document window and change the type in
the Property inspector (Window > Properties), as follows:
• If your server is an Apache web server, select Virtual. In Apache, Virtual works in all cases, while File works only
in some cases.
• If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual works with IIS only in certain
specific circumstances.)
Note: Unfortunately, IIS won’t allow you to include a file in a folder above the current folder in the folder hierarchy,
unless special software has been installed on the server. If you need to include a file from a folder higher in the folder
hierarchy on an IIS server, ask your system administrator if the necessary software is installed.
• For other kinds of servers, or if you don’t know what kind of server you’re using, ask your system administrator
which option to use.
Change which file is included
1 Select the server-side include in the Document window.
2 Open the Property inspector (Window > Properties).
3 Do one of the following:
• Click the folder icon and browse to and select a new file to include.
• In the box, type the path and filename of the new file to include.
Edit the contents of server-side includes
You can use Dreamweaver to edit server-side includes. To edit the content associated with the included file, you must
open the file.
1 Select the server-side include in either Design view or Code view, and click Edit in the Property inspector.
The included file opens in a new Document window.
2 Edit the file, and then save it.
The changes are immediately reflected in the current document and in any subsequent document you open that
includes the file.
3 Upload the include file to the remote site if necessary.
September 4, 2007
DREAMWEAVER CS3 343
User Guide
Managing tag libraries
About Dreamweaver tag libraries
A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how
Dreamweaver should format the tags. Tag libraries provide the information about tags that Dreamweaver uses for
code hints, target browser checks, the Tag Chooser, and other coding capabilities. Using the Tag Library editor, you
can add and delete tag libraries, tags, attributes, and attribute values; set properties for a tag library, including format
(for easy identification in the code); and edit tags and attributes.
See also
“Importing custom tags into Dreamweaver” on page 345
“Customizing the coding environment” on page 308
Open and close the Tag Library editor
1 Select Edit >Tag Libraries to open the Tag library editor.
The Tag Library Editor dialog box appears. (The options of this dialog box change depending on the selected tag.)
2 Close the Tag Library editor in one of the following ways:
• To save changes, click OK.
• To close the editor without saving changes, click Cancel.
Note: When you click Cancel, all changes you’ve made in the Tag Library editor are discarded. If you deleted a tag or tag
library, it’s restored.
Add libraries, tags, and attributes
You can use the Tag Library editor to add tag libraries, tags, and attributes to the tag libraries in Dreamweaver.
See also
“Customizing the coding environment” on page 308
“Importing custom tags into Dreamweaver” on page 345
Add a tag library
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button, and select New Tag Library.
2 In the Library Name box, type a name (for example, Miscellaneous Tags), and click OK.
Add tags to a tag library
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Tags.
2 Select Tag Library pop-up menu, and select a tag library.
3 Type the name of the new tag. To add more than one tag, separate the tags’ names with a comma and a space (for
example: cfgraph, cfgraphdata).
4 If the new tags have corresponding end tags (), select Have Matching End Tags.
5 Click OK.
September 4, 2007
DREAMWEAVER CS3 344
User Guide
Add attributes to a tag
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Attributes.
2 In the Tag Library pop-up menu, select a tag library.
3 In the Tag pop-up menu, select a tag.
4 Type the name of the new attribute. To add more than one attribute, separate attributes’ names with a comma and
a space (for example: width, height).
5 Click OK.
Edit libraries, tags, and attributes
Use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library.
See also
“Customizing the coding environment” on page 308
Set properties for a tag library
1 In the Tag Library editor (Edit > Tag Libraries), select a tag library (not a tag) in the Tags list.
Note: The properties for tag libraries appear only when a tag library is selected. Tag libraries are represented by the toplevel folders in the Tags list; for example, the HTML Tags folder represents a tag library, while the abbr folder within the
HTML Tags folder represents a tag.
2 In the Used In list, select every document type that should use the tag library.
The document types you select here determine which document types provide code hints for the given tag library.
For example, if the HTML option is not selected for a given tag library, code hints for that tag library don’t appear in
HTML files.
3 (Optional) Enter the prefix for the tags in the Tag Prefix box.
Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.
4 Click OK.
Edit a tag in a tag library
1 In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags list and select a tag.
2 Set any of the following Tag Format options:
Line Breaks Specifies where Dreamweaver inserts line breaks for a tag.
Contents Specifies how Dreamweaver inserts the contents of a tag; that is, if it applies line break, formatting, and
indentation rules to the content.
Case Specifies the case for a specific tag. Select from Default, Lowercase, Uppercase, or Mixed Case. If you select
Mixed Case, the Tag Name Mixed Case dialog box appears. Type the tag with the case Dreamweaver should use when
inserting it (for example, getProperty) and click OK.
Set Default Sets the default case for all tags. In the Default Tag Case dialog box that appears, select
or , and click OK.
You might want to set your default case to be lowercase to comply with XML and XHTML standards.
September 4, 2007
DREAMWEAVER CS3 345
User Guide
Edit an attribute for a tag
1 In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag
attribute.
2 In the Attribute Case pop-up menu, select the Default, Lowercase, Uppercase, or Mixed Case option.
If you select Mixed Case, the Attribute Name Mixed Case dialog box appears. Type the attribute with the case
Dreamweaver should use when inserting it (for example, onClick), and click OK.
Click the Set Default link to set the default case for all attribute names.
3 In the Attribute Type pop-up menu, select the type of the attribute.
If you select Enumerated, type every allowed value for the attribute in the Values box. Separate the values with
commas, but no spaces. For example, the enumerated values of the showborder attribute of the cfchart tag are
listed as yes,no.
Delete libraries, tags, and attributes
1 In the Tag Library editor (Edit > Tag Libraries), select a tag library, tag, or attribute in the Tags box.
2 Click the Minus (–) button.
3 Click OK to permanently delete the item.
The item is removed from the Tags box.
4 Click OK to close the Tag Library editor and complete the deletion.
See also
“Customizing the coding environment” on page 308
Importing custom tags into Dreamweaver
About importing custom tags into Dreamweaver
You can import custom tags into Dreamweaver so that they become an integral part of the authoring environment.
For example, when you start typing an imported custom tag in Code view, a code hints menu appears, listing the tag’s
attributes and letting you select one.
Import tags from XML files
You can import tags from an XML Document Type Definition (DTD) file or a schema.
1 Open the Tag Library editor (Edit > Tag Libraries).
2 Click the Plus (+) button and select DTD Schema > Import XML DTD or Schema File.
3 Enter the filename or URL of the DTD or schema file.
4 Enter the prefix to be used with the tags.
Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.
5 Click OK.
September 4, 2007
DREAMWEAVER CS3 346
User Guide
Import custom ASP.NET tags
You can import custom ASP.NET tags into Dreamweaver.
Before you begin, make sure that the custom tag is installed on the testing server defined in the Site Definition dialog
box (see “Set up a testing server” on page 48). Compiled tags (DLL files) must be placed in the site root’s /bin folder.
Noncompiled tags (ASCX files) can reside in any virtual directory or subdirectory on the server. For more information, see the Microsoft ASP.NET documentation.
1 Open an ASP.NET page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button, select one of the following options, and click OK:
• To import all the ASP.NET custom tags from the application server, select ASP.NET > Import All ASP.NET
Custom Tags.
• To import only certain custom tags from the application server, select ASP.NET > Import Selected ASP.NET
Custom Tags. Control-click (Windows) or Command-click (Macintosh) tags from the list.
Import JSP tags from a file or server (web.xml)
Import a JSP tag library into Dreamweaver from a variety of file types or a JSP server.
1 Open a JSP page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button, and select JSP > Import From File (*.tld, *.jar, *.zip), or JSP > Import from Server
(web.xml.)
4 Click the Browse button or enter a filename for the file that contains the tag library.
5 Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library.
The URL is not used to view the organization’s website; it is used to uniquely identify the tag library.
6 (Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as
part of a particular tag library.
7 Click OK.
Import JRun tags
If you use Macromedia® JRun™ from Adobe, you can import your JRun tags into Dreamweaver.
1 Open a JSP page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button and select JSP > Import JRun Server Tags From Folder.
4 Enter a folder name for the folder that contains the JRun tags.
5 Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library.
The URL is not used to view the organization’s website; it is used to uniquely identify the tag library.
6 (Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as
part of a particular tag library.
7 Click OK.
September 4, 2007
347
Chapter 12: Adding JavaScript behaviors
You can use the built-in behaviors to enhance the look, functionality, and appeal of your website. You can attach these
behaviors to elements on your web pages without having to know JavaScript.
Using JavaScript behaviors
About JavaScript behaviors
Adobe® Dreamweaver® CS3 behaviors place JavaScript code in documents so that visitors can change a web page in
various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event.
In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that
triggers that action.
Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.
Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For
example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the
browser then checks whether it should call some JavaScript code (specified in the page being viewed) in response.
Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick
are events associated with links, whereas onLoad is an event associated with images and with the body section of the
document.
An action is pre-written JavaScript code for performing a task, such as opening a browser window, showing or hiding
an AP element, playing a sound, or stopping an Adobe Shockwave movie. The actions provided with Dreamweaver
provide maximum cross-browser compatibility.
After you attach a behavior to a page element, the behavior calls the action (JavaScript code) associated with an event
whenever that event occurs for that element. (The events that you can use to trigger a given action vary from browser
to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the
onMouseOver event, then your message pops up whenever someone places the pointer over that link.
A single event can trigger several different actions, and you can specify the order in which those actions occur.
Dreamweaver provides about two dozen actions; additional actions can be found on the Exchange website at
www.adobe.com/go/dreamweaver_exchange as well as on third-party developer sites. You can write your own
actions if you are proficient in JavaScript.
Note: The terms behavior and action are Dreamweaver terms, not HTML terms. From the browser’s point of view, an
action is just like any other piece of JavaScript code.
Behaviors panel overview
You use the Behaviors panel (Window > Behaviors) to attach behaviors to page elements (more specifically to tags)
and to modify parameters of previously attached behaviors.
Behaviors that have already been attached to the currently selected page element appear in the behavior list (the main
area of the panel), listed alphabetically by event. If several actions are listed for the same event, they will be executed
in the order in which they appear on the list. If no behaviors appear in the behavior list, no behaviors have been
attached to the currently selected element.
September 4, 2007
DREAMWEAVER CS3 348
User Guide
The Behaviors panel has the following options:
Show Set Events Displays only those events that have been attached to the current document. Events are organized
into client-side and server-side categories. Each category’s events are in a collapsible list. Show Set Events is the
default view.
Show All Events Displays an alphabetical list of all events for a given category.
Add Action (+) Displays a menu of actions that can be attached to the currently selected element. When you select
an action from this list, a dialog box appears in which you can specify parameters for the action. If all the actions are
dimmed, no events can be generated by the selected element.
Delete (–) Removes the selected event and action from the behavior list.
Up and down arrow buttons Move the selected action up or down in the behavior list for a particular event. You can
change the order of actions only for a particular event—for example, you can change the order in which several
actions occur for the onLoad event, but all the onLoad actions stay together in the behavior list. The arrow buttons
are disabled for actions that can’t be moved up or down in the list.
Events Displays a pop-up menu, visible only when an event is selected, of all the events that can trigger the action
(this menu appears when you click the arrow button next to the selected event name). Different events appear
depending on the object selected. If the events you expect don’t appear, make sure that the correct page element or
tag is selected. (To select a specific tag, use the tag selector at the lower-left corner of the Document window.) Also
make sure that you selected the correct browser or browsers in the Show Events For submenu.
Note: Event names in parentheses are available only for links; selecting one of these event names automatically adds a
null link to the selected page element, and attaches the behavior to that link instead of to the element itself. The null link
is specified as href="javascript:;" in the HTML code.
Show Events For Specifies the browsers in which the current behavior should work (this is the submenu in the
Events menu). The selection you make from this menu determines which events appear in the Events menu. Older
browsers generally support fewer events than newer browsers, and in most cases, the more general your choice of
target browsers, the fewer events are shown. For example, if you select 3.0 and Later Browsers, the only events you
can select are those available in Netscape Navigator and Microsoft Internet Explorer versions 3.0 and later—a very
limited list of events.
About events
Each browser provides a set of events that you can associate with the actions listed in the Behavior panel’s Actions
(+) menu. When a visitor to your web page interacts with the page—for example, by clicking an image—the browser
generates events; those events can be used to call JavaScript functions that perform an action. Dreamweaver supplies
many common actions that you can trigger with these events.
For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at
www.adobe.com/go/dreamweaver_support.
Different events appear in the Events menu depending on the selected object and on the browsers specified in the
Show Events For submenu. To find out what events a given browser supports for a given page element, insert the page
element in your document and attach a behavior to it, then look at the Events menu in the Behaviors panel. (By
default, events are drawn from the HTML 4.01 events list, and are supported by most modern browsers.) Events may
be disabled (dimmed) if the relevant objects do not yet exist on the page or if the selected object cannot receive
events. If the expected events don’t appear, make sure the correct object is selected, or change the target browsers in
the Show Events For submenu.
September 4, 2007
DREAMWEAVER CS3 349
User Guide
If you’re attaching a behavior to an image, some events (such as onMouseOver) appear in parentheses. These events
are available only for links. When you select one of them, Dreamweaver wraps an tag around the image to define
a null link. The null link is represented by javascript:; in the Property inspector’s Link box. You can change the
link value if you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing
it with another link, you will remove the behavior.
To see which tags you can use with a given event in a given browser, search for the event in one of the files in the
Dreamweaver/Configuration/Behaviors/Events folder.
Apply a behavior
You can attach behaviors to the entire document (that is, to the tag) or to links, images, form elements, and
several other HTML elements.
The target browser you select determines which events are supported for a given element.
You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions
column of the Behaviors panel, but you can change that order.
1 Select an element on the page, such as an image or a link.
To attach a behavior to the entire page, click the tag in the tag selector at the lower-left corner of the
Document window.
2 Choose Window > Behaviors.
3 Click the Plus (+) button and select an action from the Actions menu.
Actions that are dimmed in the menu can’t be chosen. They may be dimmed because a required object doesn’t exist
in the current document. For example, the Control Shockwave or Flash action is dimmed if the document contains
no Shockwave or Flash SWF files.
When you select an action, a dialog box appears, displaying parameters and instructions for the action.
4 Enter parameters for the action, and click OK.
All actions provided in Dreamweaver work in modern browsers. Some actions do not work in older browsers, but
they will not cause errors.
Note: Targeted elements require a unique ID. For example, if you want to apply the Swap Image behavior to an image, the
image requires an ID. If you don’t have an ID specified for the element, Dreamweaver automatically specifies one for you.
5 The default event to trigger the action appears in the Events column. If this is not the trigger event you want, select
another event from the Events pop-up menu. (To open the Events menu, select an event or action in the Behaviors
panel, and click the downward-pointing black arrow that appears between the event name and the action name.)
Change or delete a behavior
After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change
parameters for actions.
1 Select an object with a behavior attached.
2 Choose Window > Behaviors.
3 Make your changes:
• To edit an action’s parameters, double-click its name, or select it and press Enter (Windows) or Return
(Macintosh); then change parameters in the dialog box and click OK.
September 4, 2007
DREAMWEAVER CS3 350
User Guide
• To change the order of actions for a given event, select an action and click the Up or Down arrow. Alternatively,
you can select the action and cut and paste it into the desired location among the other actions.
• To delete a behavior, select it and click the Minus (–) button or press Delete.
Update a behavior
1 Select an element that has the behavior attached to it.
2 Choose Window > Behaviors and double-click the behavior.
3 Make your changes and click OK in the behavior’s dialog box.
All occurrences of that behavior in that page are updated. If other pages on your site have that behavior, you must
update them page by page.
Download and install third-party behaviors
Many extensions are available on the Exchange for Dreamweaver website
(www.adobe.com/go/dreamweaver_exchange).
1 Choose Window > Behaviors and select Get More Behaviors from the Actions menu.
Your primary browser opens, and the Exchange site appears.
2 Browse or search for packages.
3 Download and install the extension package you want.
For more information, see “Add and manage extensions in Dreamweaver” on page 710.
See also
“Add and manage extensions in Dreamweaver” on page 710
Applying built-in Dreamweaver behaviors
Using built-in behaviors
The behaviors included with Dreamweaver have been written to work in modern browsers. The behaviors fail
silently in older browsers.
Note: The Dreamweaver actions have been carefully written to work in as many browsers as possible. If you remove code
from a Dreamweaver action by hand, or replace it with your own code, you may lose cross-browser compatibility.
Although the Dreamweaver actions were written to maximize cross-browser compatibility, some browsers do not
support JavaScript at all, and many people who browse the web keep JavaScript turned off in their browsers. For best
cross-platform results, provide alternative interfaces enclosed in