Adobe Dreamweaver CS3 User Manual
ADOBE® DREAMWEAVER® CS3
September 4, 2007
USER GUIDE
Copyright
September 4, 2007
© 2007 Adobe Systems Incorporated. All rights reserved.
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 other wise, without the prior written permission of Adobe Systems Incorporated.Pleasenotethatthe
content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.
Thecontentofthisguideisfurnishedforinformationaluseonly,issubjecttochangewithoutnotice,andshouldnotbeconstruedasacommitmentbyAdobe 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 endusers (a) only as Commercial Items and(b) withonly those rightsas are grantedto allother end userspursuant to theterms 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 theVietnam EraVeterans ReadjustmentAssistance Act of 1974(38 USC 4212), andSection 503 of the Rehabilitation Act of 1973, as amended,andtheregulations
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.
Contents
September 4, 2007
Chapter 1: Getting started
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Adobe Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What’s new . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapter 2: Workspace
Dreamweaver workflow and workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Working in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Using toolbars, inspectors, context menus, and panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Customizing the Dreamweaver CS3 workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Working on files without defining a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Basic tab options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
iii
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Checking in and checking out files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Testing your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Chapter 5: Managing assets and libraries
About assets and libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Working with assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Creating and managing a list of favorite assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Working with library items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Chapter 6: Creating pages with CSS
Understanding Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Creating and managing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Laying out pages with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Working with div tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Animating AP elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Chapter 7: Laying out pages with HTML
September 4, 2007
Using visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Presenting content with tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Laying out pages in Layout mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Using Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Chapter 8: Adding content to pages
Working with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Adding and formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Adding and modifying images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Inserting Flash content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Adding Flash Video content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Adding Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Adding other media objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Chapter 9: Linking and navigation
About linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Jump menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Troubleshooting links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
iv
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Collapsing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Optimizing and debugging code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Editing code in Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Working with head content for pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Working with server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Managing tag libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
September 4, 2007
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Creating a Dreamweaver template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Creating editable regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Creating repeating regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Using optional regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Defining editable tag attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Creating a nested template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Editing, updating, and deleting templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Exporting and importing template content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Applying or removing a template from an existing document . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Editing content in a template-based document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Template syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Setting authoring preferences for templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
v
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Working with the Tabbed Panels widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Displaying data with Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Adding Spry effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Database connections for ASP.NET developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
September 4, 2007
Database connections for JSP developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
Troubleshooting database connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
Removing connection scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Designing dynamic pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Dynamic content sources overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Dynamic content panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
Defining sources of dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Adding dynamic content to pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
Changing dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Displaying database records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Viewing live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579
Using web services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Adding custom server behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Creating forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600
vi
Chapter 20: Building applications visually
Building master and detail pages (all servers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
Building search and results pages (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624
Building a database search page (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
Building a record insert page (all servers) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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) . 651
Building a registration page (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Building a login page (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660
Building a page only authorized users can access (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . 662
Securing a folder in your application (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665
Using ColdFusion components (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665
Using JavaBeans (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Chapter 23: Accessibility
September 4, 2007
Dreamweaver and accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704
Dreamweaver accessibility features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705
Designing pages for accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707
Chapter 24: Shortcuts and extensions
Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708
Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
vii
Chapter 1: Getting started
September 4, 2007
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 accessto instructional videos, plug-ins, templates, usercommunities,
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.
1
Note: For more information, see the Read Me file on the installation disc.
Activate the software
Ifyouhaveasingle-userretaillicenseforyourAdobesoftware,youwillbeaskedtoactivateyoursoftware;thisisa
simple, anonymous process that you must complete within 30 days of starting the software.
For more informationon product activation, see theRead Me file onyour installationdisc, or visitthe 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.
DREAMWEAVER CS3
September 4, 2007
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.
2
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/documen-
tation.Tosee the PDF documentation includedwith your software,look in the Documents folder on theinstallation
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.
DREAMWEAVER CS3
September 4, 2007
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-productHelpisavailablethroughtheHelpmenu.AfteryoustarttheAdobeHelpViewer,clickBrowsetoseeHelp
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 AfterEffects® 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
3
C
D
B
Adobe Help
A. Back/Forwardbuttons (previously visited links) B. Expandable subtopics C. Icons indicating sharedtopic 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.
• Content supports high-contrast mode.
September 4, 2007
• 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.
DREAMWEAVER CS3
User Guide
4
Choosing the right Help documents
The following listsummarizes the documentationavailable from the Help menu. Use this listto 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.
DREAMWEAVER CS3
September 4, 2007
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.
YoucanusetheAdobeVideoWorkshoptolearnaboutanyCreativeSuite3product.Manyvideosshowyouhowto
use Adobe applications together.
5
DREAMWEAVER CS3
September 4, 2007
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.
6
Community of presenters
With this release, Adobe Systems invited the community of its users to share their expertise andinsights. 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
YoucanaccessAdobeVideoWorkshopusingtheDVDincludedwithyourCreativeSuite3product.It’salsoavailable
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
DREAMWEAVER CS3
September 4, 2007
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, anumber ofresources are placed in your applicationfolder.To view thosefiles, navigate
to the application folder on your computer.
7
• 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 youselect the corresponding tool. If you don’t wantto 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,
DREAMWEAVER CS3
E
T
V
ER
O
EO
S
E
T
AC
C
U
S
AM
E
T
JU
S
T
O
D
UO
DO
LO
R
ES
ET
EA
RE
B
U
M
.
S
T
E
T
CL
I
T
A
KA
SD
.
ET
COSETETUR SAD
IPSCING
01
PelletirInc.
CORE I
NVESTM
ENT SPE CTRUM
Vel illum do
lore eu feugiat nulla facilisis
at vero eros et accums
an
et iusto odio dignissim qui.
RETI
REMEN
T SAVI
NG
PLAN
Vel illum do
lor
e eu feugiat nulla facilisis
at vero eros et accums
an
et iusto odio
dignissim qui.
Your Inv estment Guide
Are
you leav ing mo
ney on the tab le?
01
Typi non habent claritatem
insitam; est usu
s leg
entis in iis qui facit eo
rum
claritatem.
Investig
ationes dem
onst
raverunt lectores lege
re me li
us quod ii
legu
nt saepi
us. Claritas est e
tiam processu
s.
Typi
non
habent cla
ritatem
insitam; est usu
s leg
entis in iis qui facit e
o
rum
claritatem.
In
vestig
ationes dem
onstraverunt lectores lege
re me li
us quod
ii
legu
nt saepi
us. Claritas est e
tiam processu
s.
SURVICE MENU
NULCHE
vero dio eum
nulche
agiam
e
t ad lorperi
t
sum a
$45
agiame
t ad atin utet
vero dio eum
nulche suma
agaim
et ad eum
nullam
$25
lorperit sum a
agiam
e
t ad lorperit
vero dio
eum nullam
$35
SUCCIVEROS
sucicvero dio
vero dio
eum
nul
che su
ma
$15
eum nul
lam
vero dio eum
nulche suma
agaimet ad e
um
nullam
$35
N
eum nullam
$35
SUCCI
VEROS
sucicvero dio
vero dio eum
nulche suma
$15
eum
nullam
vero dio eum
nulche suma
agaimet ad eum
nullam
$35
CC
a
s
i
o
p
i
a
S
p
A
September 4, 2007
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.
8
Travel Earth
Best 100 places to see on the planet
in your lifetime
Vel: Ad : Vulputate:
volute
ipsummy
, commy
re eugiarud tem
eraes-
exer
n ullutet
Samples Sample files include more complicated designs and area 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 suchas 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.
Note: Bridge Home may not be available in all languages.
September 4, 2007
DREAMWEAVER CS3
User Guide
9
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.
DREAMWEAVER CS3
September 4, 2007
User Guide
New ideas are the heart of Think Tank, Dialog Box, and Gallery:
• ThinkTankarticlesconsiderhowtoday’sdesignersengagewithtechnologyandwhattheirexperiencesmeanfor
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, mobilecontent, and other projects usingAdobe products. The Developer Center
also contains resources for developers who develop plug-ins for Adobe products.
10
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
VisittheAdobeSupportwebsite,atwww.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.
DREAMWEAVER CS3
September 4, 2007
User Guide
Adobe Labs
Adobe Labs gives youthe opportunity toexperience andevaluate 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.
11
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.
DREAMWEAVER CS3
September 4, 2007
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 ina variety of browsers.In code view,issues areflagged with green underlining, soyou knowexactly
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.
12
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 accessto 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.
Chapter 2: Workspace
September 4, 2007
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’veorganizedyourinformationanddeterminedastructure,youcanbegincreatingyoursite.(See“Workingwith
Dreamweaver sites” on page 40.)
13
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 easilyorganize the assets in a site; you canthen drag mostassets 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 predesignedCSS
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.)
DREAMWEAVER CS3
September 4, 2007
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® fromAdobe® and web services. If you need more flexibility, you can create custom server behaviorsand
interactive forms. (See “Making pages dynamic” on page 538.)
14
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 placesmany 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.
DREAMWEAVER CS3
September 4, 2007
A B C D
E F G
A. Ins er t bar B. Document toolbar C. Document window D. Panel groups E. Tag s elec t o r F. Property inspector G. Files panel
User Guide
15
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 B C D
E F G
A. Ins er t bar B. Document toolbar C. Document window D. Panel groups E. Tag s elec t o r F. Property inspector G. Files panel
For a tutorial on setting up the Dreamweaver workspace, see www.adobe.com/go/vid0143.
DREAMWEAVER CS3
September 4, 2007
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.
16
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
fromtheFileandEditmenus:New,Open,Save,SaveAll,Cut,Copy,Paste,Undo,andRedo.TodisplaytheStandard
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
expanderarrowattheleftofthegroup’sname;toundockapanelgroup,dragthegripperattheleftedgeofthegroup’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).
DREAMWEAVER CS3
September 4, 2007
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.
WhentheDocumentwindowhasatitlebar,thetitlebardisplaysthepagetitleand,inparentheses,thefile’spathand
filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.
17
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 Documenttoolbar containsbuttons that letyou toggle between different views ofyour document quickly: Code,
Design, and a split view that shows both Code and Design views.
Thetoolbaralsocontainssomecommoncommandsandoptionsrelatedtoviewingthedocumentandtransferring
it between the local and remote sites.
A B C D E F G H I J K
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 Op ti on s I. Vi sual Aids J. Va l i d ate Ma rku p 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.
DREAMWEAVER CS3
September 4, 2007
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.
18
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 aboutthe documentyou are
creating.
DREAMWEAVER CS3
September 4, 2007
A B C D E F G
A. Ta g s e l ec t or B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Wi ndow Siz e pop -up m enu 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 allits contents. Click
<body> to select the entire body of the document. To set the class or id attributes
User Guide
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.
19
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 insertingobjects 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.
DREAMWEAVER CS3
September 4, 2007
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 LetsyougroupandorganizetheInsertbarbuttonsyouusethemostinonecommonplace.
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
20
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.
DREAMWEAVER CS3
September 4, 2007
User Guide
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and
AutoIndent), orhide buttonsthat you don’twant to use. To do so,however,you must edit the XML file thatgenerates
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 letsyou 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 forhandheld devices. For moreinformation on creating
media-dependent style sheets, see the World Wide Web Consortium website atwww.w3.org/TR/CSS21/media.html.
21
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. Thisbutton worksindependently 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
DREAMWEAVER CS3
September 4, 2007
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.Forexample,ifyouselectanimageonyourpage,thePropertyinspectorchangestoshowpropertiesforthe
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).
ThePropertyinspectorisattheloweredgeoftheworkspacebydefault,butyoucandockitattheupperedgeofthe
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
22
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
collapsetheFilespanel.WhentheFilespaneliscollapsed,itdisplaysthecontentsofthelocalsite,theremotesite,or
the testing server as alist 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.
DREAMWEAVER CS3
September 4, 2007
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 panellets you switch between thetwo modes. TheCSS Styles panel also lets you modify CSS properties inboth
All and Current mode.
23
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
Loading...