Adobe Dreamweaver CS4 Operating instructions

Using

ADOBE

®

DREAMWEAVER

®

CS4

Updated 24 September 2009

Copyright

Using Adobe

® Dreamweaver® CS4 for Windows® and Mac OS

This user guide is protected under copyright law, 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.

This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy,

distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and

(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include

the following link. To view a copy of this license, visit

http://creativecommons.org/licenses/by-nc-sa/3.0/

Adobe, the Adobe logo, ActionScript, ColdFusion, Contribute, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, FreeHand, HomeSite,

Illustrator, InDesign, JRun, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States

and/or other countries.

ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other

countries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS 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 registered trademark of The Open Group in the US and other countries. Arial is a trademark of The Monotype

Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The Monotype

Corporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property of

their respective owners.

Updated Information/Additional Third Party Code Information available at

http://www.adobe.com/go/thirdparty.

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 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)

http://www.on2.com.

This product includes software developed by the OpenSymphony Group (

http://www.opensymphony.com/)

Sorenson Spark

™ video compression and decompression technology licensed from Sorenson Media, Inc.

This product includes software developed by Fourthought, Inc. (

http://www.fourthought.com).

This product includes software developed by CollabNet (

http://www.Collab.Net/)

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.

Updated 24 September 2009

iii

Contents

Chapter 1: Resources

Activation and registration

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Tutorials

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

Help and support

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Services, downloads, and extras

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

What’s new

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

Chapter 2: Workspace

Dreamweaver workflow and workspace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Working in the Document window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Using toolbars, inspectors, and context menus

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

Customizing the CS4 workspace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Keyboard shortcuts

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

Extensions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Chapter 3: Working with Dreamweaver sites

Setting up a Dreamweaver site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Managing Contribute sites with Dreamweaver

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

Working on files without defining a site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Basic tab options

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Chapter 4: Creating and Managing Files

Creating and opening documents

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

Managing files and folders

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Getting and putting files to and from your server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Checking in and checking out files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Synchronizing files

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

Creating InContext Editing files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Comparing files for differences

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Rolling back files (Contribute users)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Cloaking files and folders in your site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Storing file information in Design Notes

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

Testing your site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Chapter 5: Managing assets and libraries

About assets and libraries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Working with assets

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

Creating and managing a list of favorite assets

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

Working with library items

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Chapter 6: Creating pages with CSS

Understanding Cascading Style Sheets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Creating and managing CSS

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Updated 24 September 2009

iv

USING DREAMWEAVER CS4

Contents

Laying out pages with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Working with div tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Chapter 7: Laying out pages with HTML

Using visual aids for layout

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Presenting content with tables

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

Using Frames

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

Chapter 8: Adding content to pages

Working with pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Adding and formatting text

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

Adding and modifying images

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Inserting SWF files

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

Inserting FLV files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Adding Sound

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

Adding other media objects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Automating tasks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Chapter 9: Linking and navigation

About linking and navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Linking

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Jump menus

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Navigation bars

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Image maps

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Troubleshooting links

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Chapter 10: Previewing pages

Previewing pages in Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

Previewing pages in browsers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Previewing pages in mobile devices

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Chapter 11: Working with page code

General information about coding in Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Setting up your coding environment

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Setting coding preferences

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Writing and editing code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Collapsing code

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

Optimizing and debugging code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Editing code in Design view

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

Working with head content for pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Working with server-side includes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329

Managing tag libraries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

Importing custom tags into Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Chapter 12: Adding JavaScript behaviors

Using JavaScript behaviors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Applying built-in Dreamweaver behaviors

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

Updated 24 September 2009

v

USING DREAMWEAVER CS4

Contents

Chapter 13: Working with other applications

Cross-application integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Working with Fireworks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Working with Photoshop

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

Working with Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371

Working with Bridge

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371

Working with Device Central

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Working with ConnectNow

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

Manage connections to web services

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Chapter 14: Creating and managing templates

About Dreamweaver templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Recognizing templates and template-based documents

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

Creating a Dreamweaver template

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

Creating editable regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

Creating repeating regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Using optional regions

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

Defining editable tag attributes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394

Creating a nested template

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

Editing, updating, and deleting templates

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

Exporting and importing template content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Applying or removing a template from an existing document

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

Editing content in a template-based document

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

Template syntax

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Setting authoring preferences for templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Chapter 15: Building Spry pages visually

About the Spry framework

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Working with Spry widgets (general instructions)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Working with the Accordion widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

Working with the Menu Bar widget

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

Working with the Collapsible Panel widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Working with the Tabbed Panels widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421

Working with the Tooltip widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

Working with the Validation Radio Group widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425

Working with the Validation Text Field widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Working with the Validation Text Area widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

Working with the Validation Select widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437

Working with the Validation Checkbox widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Working with the Validation Password widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

Working with the Validation Confirm widget

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

Displaying data with Spry

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

Adding Spry effects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460

Chapter 16: Displaying XML data with XSLT

About XML and XSLT

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

Performing XSL transformations on the server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

Updated 24 September 2009

vi

USING DREAMWEAVER CS4

Contents

Performing XSL transformations on the client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487

Missing character entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489

Chapter 17: Preparing to build dynamic sites

Understanding web applications

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492

Set up your computer for application development

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499

Database connections for ColdFusion developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504

Database connections for ASP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Database connections for PHP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513

Troubleshooting database connections

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514

Removing connection scripts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519

Chapter 18: Making pages dynamic

Optimizing the workspace for visual development

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520

Designing dynamic pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523

Dynamic content sources overview

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524

Dynamic content panels

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529

Defining sources of dynamic content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531

Adding dynamic content to pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544

Changing dynamic content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548

Displaying database records

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550

Viewing live data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559

Adding custom server behaviors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563

Chapter 19: Building applications visually

Building master and detail pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574

Building search and results pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

Building a record insert page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Building pages to update a record

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

Building pages to delete a record

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595

Building pages with advanced data manipulation objects (ColdFusion, ASP)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

Building a registration page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606

Building a login page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

Building a page only authorized users can access

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610

Securing a folder in your application (ColdFusion)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

Using ColdFusion components

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

Chapter 20: Building forms

Collecting information from users

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621

Creating web forms

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

Building ColdFusion forms

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

Chapter 21: Accessibility

Dreamweaver and accessibility

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650

Index

...............................................................................................................654

Updated 24 September 2009

1

Chapter 1: Resources

Before you begin working with your software, take a few moments to read an overview about activation and the many

resources available to you. You have access to instructional videos, plug-ins, templates, user communities, seminars,

tutorials, RSS feeds, and much more.

Activation and registration

Help with installation

For help with installation issues, see the Installation Support Center at www.adobe.com/go/cs4install.

License activation

During the installation process, your Adobe software contacts Adobe to complete the license activation process. No

personal data is transmitted. For more information on product activation, visit the Adobe website at

www.adobe.com/go/activation.

A single-user retail license activation supports two computers. For example, you can install the product on a desktop

computer at work and on a laptop computer at home. If you want to install the software on a third computer, first

deactivate it on one of the other two computers. 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 the

software.

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

Adobe Product Improvement Program

After you have used your Adobe software a certain number of times, a dialog box appears, asking whether you want

to participate in the Adobe Product Improvement Program.

If you choose to participate, data about your use of Adobe software is sent to Adobe. No personal information is

recorded or sent. The Adobe Product Improvement Program only collects information about the features and tools

that you use in the software and how often you use them.

You can opt in to or opt out of the program at any time:

• To participate, choose Help > Adobe Product Improvement Program and click Yes, Participate.

• To stop participating, choose Help > Adobe Product Improvement Program and click No, Thank You.

Updated 24 September 2009

2

USING DREAMWEAVER CS4

Resources

ReadMe

A ReadMe file for your software is available on-line and on the installation disc. Open the file to read important

information about topics such as the following:

• System requirements

• Installation (including uninstalling the software)

• Activation and registration

• Font installation

• Troubleshooting

• Customer support

• Legal notices

Tutorials

Creating your first website (series)

Part 1: Setting up your site and project files

Part 2: Creating the page layout

Part 3: Adding content to pages

Part 4: Adding the main image text

Part 5: Adding the Spry menu

Part 6: Publishing your site

Video tutorials

Getting started and new feature video tutorials

Taming the web (series)

CSS Tutorials

Creating a basic CSS style sheet

From table-based to tableless web design

Dreamweaver CSS starter layouts

Creating a CSS layout from scratch

In Search of the Holy Grail

Updated 24 September 2009

3

USING DREAMWEAVER CS4

Resources

Help and support

Community Help

Community Help is an integrated environment on Adobe.com that gives you access to community-generated content

moderated by Adobe and industry experts. Comments from users help guide you to an answer.

Community Help draws on a number of resources, including:

• Videos, tutorials, tips and techniques, blogs, articles, and examples for designers and developers.

• Complete on-line product Help, which is updated regularly by the Adobe documentation team.

• All other content on Adobe.com, including knowledgebase articles, downloads and updates, Developer

Connection, and more.

Choose Help > product name Help in the application to access the Help and Support page, the portal to all of the

Community Help content for your product. You can also use the Help search field in some Creative Suite 4

applications, or press F1 (Windows), to access Community Help for your product.

The sites searched by the default Community Help search engine are hand-selected and reviewed for quality by Adobe

and Adobe Community Experts. Adobe experts also work to ensure that the top search results include a mixture of

different kinds of content, including results from on-line product Help.

For more information on using Community Help, see http://help.adobe.com/en_US/CommunityHelp/.

For a video overview of Community Help, see www.adobe.com/go/lrvid4117_xp.

For frequently asked questions about Community Help, see http://community.adobe.com/help/profile/faq.html

Product Help

Adobe provides a comprehensive user guide for each product in several formats, including on-line product Help, PDF,

and printed book. Results from on-line product Help are included in your results whenever you search Community Help.

If you’re connected to the Internet, the Help menu within the product opens the product Help and Support page by

default. This page is a portal to all of the Community Help content for the product. If you want to consult or search

on-line product Help only, you can access it by clicking the product Help link in the upper-right corner of the Help

and Support page. Be sure to select the This Help System Only option before you do your search.

If you’re not connected to the Internet, the Help menu within the product opens local Help, a subset of the content

available in on-line product Help. Because local Help is not as complete or up-to-date as on-line product Help, Adobe

recommends that you use the PDF version of product Help if you want to stay offline. A downloadable PDF of

complete product Help is available from two places:

• The product’s Help and Support page (upper-right corner of the page)

• Local and web Help (top of the Help interface)

For more information on accessing product help, see http://help.adobe.com/en_US/CommunityHelp/.

If you are working in Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver, and you want to turn

off Community Help so that local Help opens by default, do the following:

1 Open the Connections panel (Window > Extensions > Connections).

2 From the Connections panel menu , select Offline Options.

3 Select Keep Me Offline and click OK.

Updated 24 September 2009

4

USING DREAMWEAVER CS4

Resources

Note: When you disable web services from the Connections panel, all other web services (such as Adobe Kuler and Adobe

ConnectNow) are also disabled.

Printed resources

Printed versions of the complete on-line product Help are available for the cost of shipping and handling at

www.adobe.com/go/store.

Support resources

Visit the Adobe Support website at www.adobe.com/support to learn about free and paid technical support options.

Services, downloads, and extras

You can enhance your product by integrating a variety of services, plug-ins, and extensions in your product. You can

also download samples and other assets to help you get your work done.

Adobe creative on-line services

Adobe® Creative Suite® 4 includes new on-line features that bring the power of the web to your desktop. Use these

features to connect with the community, collaborate, and get more from your Adobe tools. Powerful creative on-line

services let you complete tasks ranging from color matching to data conferencing. The services seamlessly integrate

with desktop applications so you can quickly enhance existing workflows. Some services offer full or partial

functionality when you’re offline too.

Visit Adobe.com to learn more about available services. Some Creative Suite 4 applications include these initial

offerings:

Kuler™ panel Quickly create, share, and explore color themes on-line.

Adobe® ConnectNow Collaborate with dispersed working teams over the web, sharing voice, data, and multimedia.

Resource Central Instantly access tutorials, sample files, and extensions for Adobe digital video applications.

For information on managing your services, see the Adobe website at www.adobe.com/go/learn_creativeservices_en.

Adobe Exchange

Visit the Adobe Exchange at www.adobe.com/go/exchange to download samples as well as thousands of plug-ins and

extensions from Adobe and third-party developers. The plug-ins and extensions can help you automate tasks,

customize workflows, create specialized professional effects, and more.

Adobe downloads

Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software.

Adobe Labs

Adobe Labs at www.adobe.com/go/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

Updated 24 September 2009

5

USING DREAMWEAVER CS4

Resources

• 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 users.

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. The Adobe

development teams use this feedback to create software that meets the needs and expectations of the community.

Adobe TV

Visit Adobe TV at http://tv.adobe.com to view instructional and inspirational videos.

Extras

The installation disc contains a variety of extras to help you make the most of your Adobe software. Some extras are

installed on your computer during the setup process; others are located on the disc.

To view the extras installed during the setup process, navigate to the application folder on your computer.

• Windows®: [startup drive]\Program Files\Adobe\[Adobe application]

• Mac OS®: [startup drive]/Applications/[Adobe application]

To view the extras on the disc, navigate to the Goodies folder in your language folder on the disc. Example:

• /English/Goodies/

What’s new

Following is a list of top new features for Adobe® Dreamweaver® CS4.

Live view

Dreamweaver CS4 lets you design your web pages under real-world browser conditions with new Live view, while still

retaining direct access to the code. Changes to the code are immediately reflected in the rendered display. See

“Previewing pages in Dreamweaver” on page 283.

Code hinting for Ajax and JavaScript frameworks

You can now write JavaScript more quickly and accurately with improved support for JavaScript core objects and

primitive data types. You can also put the extended coding functionality of Dreamweaver to work by incorporating

popular JavaScript frameworks including jQuery, Prototype, and Adobe Spry. See “Use code hints” on page 299.

Related Files and Code Navigator

Dreamweaver CS4 lets you efficiently manage the various files that make up today's web pages. Click any related file

to see both its source in Code view and the parent page in Design view. The new Code Navigator feature shows you all

the code sources that affect your current selection, such as CSS (Cascading Style Sheets) rules, server-side includes,

external JavaScript functions, Dreamweaver templates, iFrame source files, and more. See “Open related files” on

page 73 and “Navigate to related code” on page 307.

Updated 24 September 2009

6

USING DREAMWEAVER CS4

Resources

InContext Editing

You can enable end users to make simple edits to their web pages without help from you or additional software. As a

Dreamweaver designer, you can limit changes to specific pages, distinct regions, and even custom formatting options

quickly and easily. See “Creating InContext Editing files” on page 98.

CSS best practices

The Dreamweaver CS4 Property inspector lets you create new CSS rules, and provides clear, simple explanations of

where each property fits in the cascade of styles. See “Set text properties in the Property inspector” on page 226.

HTML data sets

You can integrate the power of dynamic data in your web pages without the learning curve of mastering databases or

XML (Extensible Markup Language) coding. Spry Data Sets recognize content in a simple HTML table as an

interactive data source. See “Create a Spry HTML data set” on page 449.

Adobe Photoshop Smart Objects

Insert any Adobe® Photoshop PSD (Photoshop Data File) document in Dreamweaver to create an image Smart Object.

Smart Objects are tightly linked to the source file. Make any changes to the source image and update your image in

Dreamweaver without opening Photoshop. See “Working with Photoshop” on page 361.

Subversion integration

Dreamweaver CS4 integrates Subversion® software, an open source versioning control system, for a more robust

check-in/check-out experience. Update your site and check in modifications directly from within Dreamweaver. See

“Use Subversion (SVN) to get and check in files” on page 91.

New user interface

Work faster and smarter across Adobe Creative Suite® 4 components with a shared user interface design. Toggle

quickly from one work environment to another with the workspace switcher. See “Workspace” on page 7.

Deprecated features

The following features have been deprecated for Dreamweaver CS4:

• Timelines

• Web services

• Layout mode

• Site Map view

• Java Bean support

• Adobe® Flash elements (Image Viewer)

• Adobe® Flash text and Adobe® Flash buttons

• ASP.NET and JSP server behaviors and recordsets

Updated 24 September 2009

7

Chapter 2: Workspace

The Adobe® Dreamweaver® CS4 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 38.)

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 75 and “Managing assets and libraries” on

page 115.)

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 127 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 has 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 204.)

Updated 24 September 2009

8

USING DREAMWEAVER CS4

Workspace

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 288.)

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 492.)

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 Adobe® ColdFusion®

and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See

“Making pages dynamic” on page 520.)

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 84.)

For a video tutorial on what you can do with Dreamweaver, see www.adobe.com/go/lrvid4040_dw.

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.

Updated 24 September 2009

9

USING DREAMWEAVER CS4

Workspace

A. Application bar B. Document toolbar C. Document window D. Panel groups E. Workspace switcher F. Tag selector G. Property inspector

H. 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. When panel groups are

docked and the document area is maximized, resizing or showing and hiding panels auto-sizes the main document,

just as it does on Windows.

A B C D E

F

G H

Updated 24 September 2009

10

USING DREAMWEAVER CS4

Workspace

A. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. Tag selector G. Property inspector

H. Files panel

For a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.

More Help topics

Using toolbars, inspectors, and context menus

Customizing the CS4 workspace

Display tabbed documents (Dreamweaver Macintosh)

Dreamweaver workspace tutorial

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 Application bar Across the top of the application window contains a workspace switcher, menus (Windows only),

and other application controls.

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, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.

To display the Standard toolbar, select View > Toolbars > Standard.

A B C D E

F

G H

Updated 24 September 2009

11

USING DREAMWEAVER CS4

Workspace

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 use 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 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.

Panels Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files

panel. To expand a panel, double-click its tab.

The Insert panel Contains buttons for inserting various types of objects, such as images, tables, and media 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 panel. If you prefer, you can insert objects using the

Insert menu instead of the Insert panel.

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).

More Help topics

“Working in the Document window” on page 20

“Using toolbars, inspectors, and context menus” on page 24

“Manage windows and panels” on page 25

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.

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.

Split Code view A split version of Code view that lets you scroll to work on different sections of the document at the

same time.

Code and Design view Lets you see both Code view and Design view for the same document in a single window.

Live view Similar to Design view, Live view displays a more realistic representation of what your document will look

like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable.

However, you can edit in Code view and refresh Live view to see your changes.

Live Code view Only available when viewing a document in Live view. Live Code view displays the actual code that a

browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code

view is not editable.

Updated 24 September 2009

12

USING DREAMWEAVER CS4

Workspace

When a Document window is maximized (the default), tabs appear at the top of the Document window showing the

filenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that you

haven’t saved yet.

To switch to a document, click its tab.

Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if

you’re viewing documents in separate windows). Related documents are documents associated with the current file,

such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in

the Related Files toolbar.

More Help topics

“Working in the Document window” on page 20

“About Live view” on page 283

“Open related files” on page 73

“View live data in Design view” on page 559

“General information about coding in Dreamweaver” on page 288

Document toolbar overview

The Document toolbar contains buttons that let you toggle between different views of your document quickly. The

toolbar also contains some common commands and options related to viewing the document and transferring it

between the local and remote sites. The illustration below shows the expanded Document toolbar.

A. Show Code View B. Show Code and Design Views C. Show Design View D. Live View E. Live Code View F. Document Title G. File

Management H. Preview/Debug in Browser I. Refresh Design View J. View Options K. Visual Aids L. Validate Markup M. 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.

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.

Live View Displays a non-editable, interactive, browser based view of the document.

Live Code View Displays the actual code used by the browser to execute the page.

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.

A B C D E G H I J K L MF

Updated 24 September 2009

13

USING DREAMWEAVER CS4

Workspace

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 you want to 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.

More Help topics

“Display toolbars” on page 24

“Preview pages in Live view” on page 283

“Setting coding preferences” on page 294

“View and edit head content” on page 325

“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, Browse in

Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the

equivalent menu commands.

More Help topics

“Display toolbars” on page 24

“Creating and opening documents” on page 64

Status bar overview

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

creating.

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 H. Encoding indicator

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

<body> 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.

A B C D E F G H

Updated 24 September 2009

14

USING DREAMWEAVER CS4

Workspace

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 (Not available in Code view.) 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.

Encoding indicator Shows the text encoding for the current document.

More Help topics

“Set window size and connection speed” on page 22

“Zoom in and out” on page 215

“Resize the Document window” on page 22

“Set download time and size preferences” on page 216

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 appears vertically on the left side of the Document window, and is

only visible when Code view is showing.

You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding).

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.

Updated 24 September 2009

Page is loading ...

Adobe Dreamweaver CS4 Operating instructions

Related papers

Other documents