Dreamweaver cs4 tutorials

4,488 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,488
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
98
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Dreamweaver cs4 tutorials

  1. 1. UsingADOBE DREAMWEAVER CS4 ® ® Updated 24 September 2009
  2. 2. © 2008 Adobe Systems Incorporated and its licensors. All rights reserved.CopyrightUsing Adobe® Dreamweaver® CS4 for Windows® and Mac OSThis user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as acommitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appearin 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 includethe 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 Statesand/or other countries.ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or othercountries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS aretrademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds inthe 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 MonotypeCorporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The MonotypeCorporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property oftheir 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 MP3compressed 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 forobtaining this MP3 technology license.Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com)Video in Flash Player 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 Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. Database © 1990/1994 Merriam-Webster Inc./Franklin Electronic Publishers Inc., ©1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. © 1990 Williams Collins Sons& Co. Ltd. © 1997 - All rights reserved Proximity Technology Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1990 - All rights reserved Proximity TechnologyInc. © Oxford University Press © 2000. All rights reserved Proximity Technology Inc. © 1990 IDE a.s. © 1990 - All rights reserved Proximity Technology 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 andCommercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rightsas 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 applicableequal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans ReadjustmentAssistance 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
  3. 3. iiiContentsChapter 1: ResourcesActivation and registration ............................................................................................ 1Tutorials .............................................................................................................. 2Help and support ...................................................................................................... 3Services, downloads, and extras ........................................................................................ 4What’s new ........................................................................................................... 5Chapter 2: WorkspaceDreamweaver workflow and workspace ................................................................................ 7Working in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Using toolbars, inspectors, and context menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Customizing the CS4 workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Chapter 3: Working with Dreamweaver sitesSetting up a Dreamweaver site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Managing Contribute sites with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Working on files without defining a site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Basic tab options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Chapter 4: Creating and Managing FilesCreating and opening documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Managing files and folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Getting and putting files to and from your server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84Checking in and checking out files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Synchronizing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Creating InContext Editing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Comparing files for differences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Rolling back files (Contribute users) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Cloaking files and folders in your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Storing file information in Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Testing your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Chapter 5: Managing assets and librariesAbout assets and libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115Working with assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Creating and managing a list of favorite assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Working with library items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122Chapter 6: Creating pages with CSSUnderstanding Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Creating and managing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Updated 24 September 2009
  4. 4. USING DREAMWEAVER CS4 iv ContentsLaying out pages with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152Working with div tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Chapter 7: Laying out pages with HTMLUsing visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Presenting content with tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176Using Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Chapter 8: Adding content to pagesWorking with pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Adding and formatting text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Adding and modifying images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Inserting SWF files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Inserting FLV files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Adding Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Adding other media objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Automating tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Chapter 9: Linking and navigationAbout linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266Linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268Jump menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Troubleshooting links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280Chapter 10: Previewing pagesPreviewing pages in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283Previewing pages in browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285Previewing pages in mobile devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286Chapter 11: Working with page codeGeneral information about coding in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288Setting up your coding environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Setting coding preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294Writing and editing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299Collapsing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313Optimizing and debugging code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315Editing code in Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319Working with head content for pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Working with server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329Managing tag libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332Importing custom tags into Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334Chapter 12: Adding JavaScript behaviorsUsing JavaScript behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337Applying built-in Dreamweaver behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Updated 24 September 2009
  5. 5. USING DREAMWEAVER CS4 v ContentsChapter 13: Working with other applicationsCross-application integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355Working with Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356Working with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Working with Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Working with Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373Working with ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374Manage connections to web services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Chapter 14: Creating and managing templatesAbout Dreamweaver templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377Recognizing templates and template-based documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382Creating a Dreamweaver template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385Creating editable regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388Creating repeating regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389Using optional regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392Defining editable tag attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394Creating a nested template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Editing, updating, and deleting templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398Exporting and importing template content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401Applying or removing a template from an existing document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402Editing content in a template-based document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404Template syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406Setting authoring preferences for templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407Chapter 15: Building Spry pages visuallyAbout the Spry framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409Working with Spry widgets (general instructions) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409Working with the Accordion widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411Working with the Menu Bar widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414Working with the Collapsible Panel widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419Working with the Tabbed Panels widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421Working with the Tooltip widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424Working with the Validation Radio Group widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425Working with the Validation Text Field widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429Working with the Validation Text Area widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Working with the Validation Select widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437Working with the Validation Checkbox widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440Working with the Validation Password widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442Working with the Validation Confirm widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446Displaying data with Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449Adding Spry effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460Chapter 16: Displaying XML data with XSLTAbout XML and XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464Performing XSL transformations on the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 Updated 24 September 2009
  6. 6. USING DREAMWEAVER CS4 vi ContentsPerforming XSL transformations on the client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487Missing character entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489Chapter 17: Preparing to build dynamic sitesUnderstanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492Set up your computer for application development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499Database connections for ColdFusion developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504Database connections for ASP developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506Database connections for PHP developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513Troubleshooting database connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514Removing connection scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519Chapter 18: Making pages dynamicOptimizing the workspace for visual development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520Designing dynamic pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523Dynamic content sources overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524Dynamic content panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529Defining sources of dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531Adding dynamic content to pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544Changing dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548Displaying database records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550Viewing live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559Adding custom server behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563Chapter 19: Building applications visuallyBuilding master and detail pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574Building search and results pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581Building a record insert page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587Building pages to update a record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590Building pages to delete a record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595Building pages with advanced data manipulation objects (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602Building a registration page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606Building a login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608Building a page only authorized users can access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610Securing a folder in your application (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613Using ColdFusion components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614Chapter 20: Building formsCollecting information from users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621Creating web forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624Building ColdFusion forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637Chapter 21: AccessibilityDreamweaver and accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654 Updated 24 September 2009
  7. 7. 1Chapter 1: ResourcesBefore you begin working with your software, take a few moments to read an overview about activation and the manyresources available to you. You have access to instructional videos, plug-ins, templates, user communities, seminars,tutorials, RSS feeds, and much more.Activation and registrationHelp with installationFor help with installation issues, see the Installation Support Center at www.adobe.com/go/cs4install.License activationDuring the installation process, your Adobe software contacts Adobe to complete the license activation process. Nopersonal data is transmitted. For more information on product activation, visit the Adobe website atwww.adobe.com/go/activation.A single-user retail license activation supports two computers. For example, you can install the product on a desktopcomputer at work and on a laptop computer at home. If you want to install the software on a third computer, firstdeactivate it on one of the other two computers. Choose Help > Deactivate.RegisterRegister 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 ProgramAfter you have used your Adobe software a certain number of times, a dialog box appears, asking whether you wantto 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 isrecorded or sent. The Adobe Product Improvement Program only collects information about the features and toolsthat 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
  8. 8. USING DREAMWEAVER CS4 2 ResourcesReadMeA ReadMe file for your software is available on-line and on the installation disc. Open the file to read importantinformation about topics such as the following:• System requirements• Installation (including uninstalling the software)• Activation and registration• Font installation• Troubleshooting• Customer support• Legal noticesTutorialsCreating your first website (series)Part 1: Setting up your site and project filesPart 2: Creating the page layoutPart 3: Adding content to pagesPart 4: Adding the main image textPart 5: Adding the Spry menuPart 6: Publishing your siteVideo tutorialsGetting started and new feature video tutorialsTaming the web (series)CSS TutorialsCreating a basic CSS style sheetFrom table-based to tableless web designDreamweaver CSS starter layoutsCreating a CSS layout from scratchIn Search of the Holy Grail Updated 24 September 2009
  9. 9. USING DREAMWEAVER CS4 3 ResourcesHelp and supportCommunity HelpCommunity Help is an integrated environment on Adobe.com that gives you access to community-generated contentmoderated 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 theCommunity Help content for your product. You can also use the Help search field in some Creative Suite 4applications, 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 Adobeand Adobe Community Experts. Adobe experts also work to ensure that the top search results include a mixture ofdifferent 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.htmlProduct HelpAdobe 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 bydefault. This page is a portal to all of the Community Help content for the product. If you want to consult or searchon-line product Help only, you can access it by clicking the product Help link in the upper-right corner of the Helpand 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 contentavailable in on-line product Help. Because local Help is not as complete or up-to-date as on-line product Help, Adoberecommends that you use the PDF version of product Help if you want to stay offline. A downloadable PDF ofcomplete 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 turnoff 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
  10. 10. USING DREAMWEAVER CS4 4 ResourcesNote: When you disable web services from the Connections panel, all other web services (such as Adobe Kuler and AdobeConnectNow) are also disabled.Printed resourcesPrinted versions of the complete on-line product Help are available for the cost of shipping and handling atwww.adobe.com/go/store.Support resourcesVisit the Adobe Support website at www.adobe.com/support to learn about free and paid technical support options.Services, downloads, and extrasYou can enhance your product by integrating a variety of services, plug-ins, and extensions in your product. You canalso download samples and other assets to help you get your work done.Adobe creative on-line servicesAdobe® Creative Suite® 4 includes new on-line features that bring the power of the web to your desktop. Use thesefeatures to connect with the community, collaborate, and get more from your Adobe tools. Powerful creative on-lineservices let you complete tasks ranging from color matching to data conferencing. The services seamlessly integratewith desktop applications so you can quickly enhance existing workflows. Some services offer full or partialfunctionality when you’re offline too.Visit Adobe.com to learn more about available services. Some Creative Suite 4 applications include these initialofferings: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 ExchangeVisit the Adobe Exchange at www.adobe.com/go/exchange to download samples as well as thousands of plug-ins andextensions 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 downloadsVisit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software.Adobe LabsAdobe Labs at www.adobe.com/go/labs gives you the opportunity to experience and evaluate new and emergingtechnologies and products from Adobe. At Adobe Labs, you have access to resources such as these:• Prerelease software and technologies Updated 24 September 2009
  11. 11. USING DREAMWEAVER CS4 5 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 becomeproductive with new products and technologies. Adobe Labs is also a forum for early feedback. The Adobedevelopment teams use this feedback to create software that meets the needs and expectations of the community.Adobe TVVisit Adobe TV at http://tv.adobe.com to view instructional and inspirational videos.ExtrasThe installation disc contains a variety of extras to help you make the most of your Adobe software. Some extras areinstalled 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 FilesAdobe[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 newFollowing is a list of top new features for Adobe® Dreamweaver® CS4.Live viewDreamweaver CS4 lets you design your web pages under real-world browser conditions with new Live view, while stillretaining 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 frameworksYou can now write JavaScript more quickly and accurately with improved support for JavaScript core objects andprimitive data types. You can also put the extended coding functionality of Dreamweaver to work by incorporatingpopular JavaScript frameworks including jQuery, Prototype, and Adobe Spry. See “Use code hints” on page 299.Related Files and Code NavigatorDreamweaver CS4 lets you efficiently manage the various files that make up todays web pages. Click any related fileto see both its source in Code view and the parent page in Design view. The new Code Navigator feature shows you allthe 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” onpage 73 and “Navigate to related code” on page 307. Updated 24 September 2009
  12. 12. USING DREAMWEAVER CS4 6 ResourcesInContext EditingYou can enable end users to make simple edits to their web pages without help from you or additional software. As aDreamweaver designer, you can limit changes to specific pages, distinct regions, and even custom formatting optionsquickly and easily. See “Creating InContext Editing files” on page 98.CSS best practicesThe Dreamweaver CS4 Property inspector lets you create new CSS rules, and provides clear, simple explanations ofwhere each property fits in the cascade of styles. See “Set text properties in the Property inspector” on page 226.HTML data setsYou can integrate the power of dynamic data in your web pages without the learning curve of mastering databases orXML (Extensible Markup Language) coding. Spry Data Sets recognize content in a simple HTML table as aninteractive data source. See “Create a Spry HTML data set” on page 449.Adobe Photoshop Smart ObjectsInsert 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 inDreamweaver without opening Photoshop. See “Working with Photoshop” on page 361.Subversion integrationDreamweaver CS4 integrates Subversion® software, an open source versioning control system, for a more robustcheck-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 interfaceWork faster and smarter across Adobe Creative Suite® 4 components with a shared user interface design. Togglequickly from one work environment to another with the workspace switcher. See “Workspace” on page 7.Deprecated featuresThe 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
  13. 13. 7Chapter 2: WorkspaceThe Adobe® Dreamweaver® CS4 workspace contains the toolbars, inspectors, and panels that you use to build webpages. You can customize the general appearance and behavior of the workspace.Dreamweaver workflow and workspaceDreamweaver workflow overviewYou can use several approaches to create a website. This is one approach:Plan and set up your siteDetermine 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. Afteryou’ve organized your information and determined a structure, you can begin creating your site. (See “Working withDreamweaver sites” on page 38.)Organize and manage your site filesIn the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. TheFiles panel also has many tools for managing your site, transferring files to and from a remote server, setting up a CheckIn/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and remotesites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly from theAssets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of yourAdobe®Contribute® sites. (See “Managing files and folders” on page 75 and “Managing assets and libraries” onpage 115.)Lay out your web pagesChoose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with oneanother to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSSlayouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the pagestructure. 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 pagesautomatically when the template changes. (See “Creating pages with CSS” on page 127 and “Laying out pages withHTML” on page 173.)Add content to pagesAdd 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, typedirectly in the page, or import content from other documents. Dreamweaver also provides behaviors for performingtasks in response to specific events, such as validating a form when the visitor clicks the Submit button or opening asecond browser window when the main page has finished loading. Finally, Dreamweaver provides tools formaximizing 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
  14. 14. USING DREAMWEAVER CS4 8 WorkspaceCreate pages by hand codingCoding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editingtools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and edityour pages. (See “Working with page code” on page 288.)Set up a web application for dynamic contentMany websites contain dynamic pages that allow visitors to view information stored in databases, and usually allowsome visitors to add new information and edit information in the databases. To create such pages, you must first setup 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 pagesIn Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted fromdatabases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it ontothe page.You can set your page to display one record or many records at a time, display more than one page of records, addspecial links to move from one page of records to the next (and back), and create record counters to help users keeptrack 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 publishTesting your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, youpublish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remainscurrent 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 overviewThe Dreamweaver workspace lets you view documents and object properties. The workspace also places many of themost 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, allwindows and panels are integrated into a single larger application window. Updated 24 September 2009
  15. 15. USING DREAMWEAVER CS4 9 Workspace A B C D E F G HA. Application bar B. Document toolbar C. Document window D. Panel groups E. Workspace switcher F. Tag selector G. Property inspectorH. Files panelOn 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 aredocked and the document area is maximized, resizing or showing and hiding panels auto-sizes the main document,just as it does on Windows. Updated 24 September 2009
  16. 16. USING DREAMWEAVER CS4 10 Workspace A B C D E F G HA. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. Tag selector G. Property inspectorH. Files panelFor a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.More Help topicsUsing toolbars, inspectors, and context menusCustomizing the CS4 workspaceDisplay tabbed documents (Dreamweaver Macintosh)Dreamweaver workspace tutorialWorkspace elements overviewThe 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 canalso 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 asDesign 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 fromthe 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. Updated 24 September 2009
  17. 17. USING DREAMWEAVER CS4 11 WorkspaceThe Coding toolbar (Displayed in Code view only.) Contains buttons that let you perform many standard codingoperations.The Style Rendering toolbar (Hidden by default.) Contains buttons that let you see how your design would look indifferent media types if you use media-dependent style sheets. It also contains a button that lets you enable or disableCascading 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 hasdifferent 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 tagssurrounding 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 Filespanel. 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 theInsert 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 remoteserver. The Files panel also lets you access all the files on your local disk, much like Windows Explorer (Windows) orthe 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 25Document window overviewThe 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 thisview, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would seewhen viewing the page in a browser.Code view A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such PHPor 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 thesame 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 looklike 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 abrowser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Codeview is not editable. Updated 24 September 2009
  18. 18. USING DREAMWEAVER CS4 12 WorkspaceWhen a Document window is maximized (the default), tabs appear at the top of the Document window showing thefilenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that youhaven’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 ifyou’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 inthe 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 288Document toolbar overviewThe Document toolbar contains buttons that let you toggle between different views of your document quickly. Thetoolbar also contains some common commands and options related to viewing the document and transferring itbetween the local and remote sites. The illustration below shows the expanded Document toolbar. A B C D E F G H I J K L MA. Show Code View B. Show Code and Design Views C. Show Design View D. Live View E. Live Code View F. Document Title G. FileManagement H. Preview/Debug in Browser I. Refresh Design View J. View Options K. Visual Aids L. Validate Markup M. Check BrowserCompatibilityThe 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 selectthis 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 Designview 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 yourdocument 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 thepop-up menu. Updated 24 September 2009
  19. 19. USING DREAMWEAVER CS4 13 WorkspaceRefresh Design View Refreshes the document’s Design view after you make changes in Code view. Changes you makein Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file orclicking this button.Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability toselect 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 appearabove 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 173Standard toolbar overviewThe Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse inBridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use theequivalent menu commands.More Help topics“Display toolbars” on page 24“Creating and opening documents” on page 64Status bar overviewThe Status bar at the bottom of the Document window provides additional information about the document you arecreating. A B C D E F G HA. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window size pop-up menu G. Document size and estimateddownload time H. Encoding indicatorTag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select thattag and all its contents. Click <body> to select the entire body of the document. To set the class or ID attributes for atag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from thecontext menu. Updated 24 September 2009
  20. 20. USING DREAMWEAVER CS4 14 WorkspaceSelect 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 orcustom 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 216Coding toolbar overviewThe Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing andexpanding code selections, highlighting invalid code, applying and removing comments, indenting code, and insertingrecently used code snippets. The Coding toolbar appears vertically on the left side of the Document window, and isonly 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 AutoIndent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates thetoolbar. For more information, see Extending Dreamweaver. Updated 24 September 2009
  21. 21. USING DREAMWEAVER CS4 15 WorkspaceMore Help topics“Display toolbars” on page 24“Insert code with the Coding toolbar” on page 301Style Rendering toolbar overviewThe Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look indifferent media types if you use media-dependent style sheets. It also contains a button that lets you enable or disableCSS 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 mightspecify a body rule for print media and a different body rule for handheld devices. For more information on creatingmedia-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered ona computer screen). You can view the following media type renderings by clicking the respective buttons in the StyleRendering 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 aBlackBerry device.Render Projection Media Type Shows you how the page appears on a projection device.Render TTY Media Type Shows you how the page appears on a teletype machine.Render TV Media Type Shows you how the page appears on a television screen.Toggle Displaying Of CSS Styles Lets you enable or disable CSS styles. This button works independently of the othermedia buttons.Design-time Style Sheets Lets you specify a Design-time style sheet.For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.More Help topics“Display toolbars” on page 24 Updated 24 September 2009
  22. 22. USING DREAMWEAVER CS4 16 WorkspaceProperty inspector overviewThe 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, if you select an image on your page, the Property inspector changes to show properties for the image (suchas the file path to the image, the width and height of the image, the border around the image, if any, and so on).The Property inspector is at the lower edge of the workspace by default, but you can undock it and make it a floatingpanel in the workspace.More Help topics“Dock and undock panels” on page 26“Use the Property inspector” on page 24Insert panel overviewThe Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons areorganized into several categories, which you can switch by selecting the desired category from the Category pop-upmenu. Additional categories appear when the current document contains server code, such as ASP or CFMLdocuments. Updated 24 September 2009
  23. 23. USING DREAMWEAVER CS4 17 WorkspaceSome categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes thedefault action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, thenext time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new optionfrom the pop-up menu, the default action for the button changes.The Insert panel is organized in the following categories:The Common category Lets you create and insert the most commonly used objects, such as images and tables.The Layout category Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choosetwo views for tables: Standard (default) and Expanded Tables.The Forms category Contains buttons for creating forms and inserting form elements, including Spry validationwidgets.The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeatedregions, and record insertion and update forms.The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets.The InContext Editing category Contains buttons for building InContext editing pages, including buttons for EditableRegions, Repeating Regions, and managing CSS classes.The Text category Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.The Favorites category Lets you group and organize the Insert panel buttons you use the most in one common place.Server-code categories Available only for pages that use a particular server language, including ASP, CFML Basic,CFML Flow, CFML Advanced, and PHP. Each of these categories provides server-code objects that you can insert inCode view.Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into ahorizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar (thoughyou cannot hide and display it in the same way as other toolbars).More Help topics“Use the Insert panel” on page 204“Building Spry pages visually” on page 409 Updated 24 September 2009
  24. 24. USING DREAMWEAVER CS4 18 WorkspaceFiles panel overviewUse 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 orcollapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, thetesting server, or the SVN repository as a list of files. When expanded, it displays the local site and either the remotesite, the testing server, or the SVN repository.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.More Help topics“Work with files in the Files panel” on page 78 Updated 24 September 2009
  25. 25. USING DREAMWEAVER CS4 19 WorkspaceCSS Styles panel overviewThe CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Currentmode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Stylespanel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All andCurrent mode.You can resize any of the panes by dragging the borders between the panes.In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSSproperties for the current selection in the document, a Rules pane that displays the location of selected properties (ora cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSSproperties 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). TheAll Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attachedto 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.More Help topics“Creating and managing CSS” on page 131Visual guides overviewDreamweaver provides several kinds of visual guides to help you design documents and predict approximately howthey appear in browsers. You can do any of the following:• Instantly snap the Document window to a desired window size to see how the elements fit on the page.• Use a tracing image as the page background to help you duplicate a design created in an illustration or image- editing application such as Adobe® Photoshop® or Adobe® Fireworks®.• Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements. Updated 24 September 2009
  26. 26. USING DREAMWEAVER CS4 20 Workspace• Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements). Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible.More Help topics“Using visual aids for layout” on page 173GoLive usersIf you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introductionto the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.For more information, see www.adobe.com/go/learn_dw_golive.More Help topicsDreamweaver for GoLive users tutorialWorking in the Document windowSwitch between views in the Document windowYou can view a document in the Document window in Code view, Split Code view, Design view, Code and Designviews (Split view), or Live view. You also have the option of viewing Split Code view or Code and Design viewshorizontally or vertically. (Horizontal display is the default.)Switch to Code view❖ Do one of the following:• Select View > Code.• In the Document toolbar, click the Show Code View buttonSwitch to Split Code viewSplit Code view splits your document in two so that you can work on two sections of the code at once.❖ Select View > Split Code.Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.Switch to Design view❖ Do one of the following:• Select View > Design.• In the Document toolbar, click the Show Design View button Updated 24 September 2009
  27. 27. USING DREAMWEAVER CS4 21 WorkspaceShow both Code and Design views❖ Do one of the following:• Select View > Code and Design.• In the Document toolbar, click the Show Code and Design Views buttonBy default, Code view appears at the top of the Document window and Design view appears at the bottom. To displayDesign view on top, select View > Design View on Top.Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.Toggle between Code view and Design view❖ Press Control+backquote (`).If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view tothe other.Split views verticallyThis option is only available for Split Code view and Code and Design views (Split view). It is disabled for Code viewand Design view.1 Make sure that you are in Split Code view (View > Split Code) or Code and Design views (View > Code and Design).2 Select View > Split Vertically.If you are in Code and Design views, you have the option of displaying Design view on the left (View > Design Viewon Left).Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.More Help topics“Document window overview” on page 11“Preview pages in Live view” on page 283Cascade or tile Document windowsIf you have many documents open at once, you can cascade or tile them.More Help topics“Manage windows and panels” on page 25“Display tabbed documents (Dreamweaver Macintosh)” on page 30Cascade Document windows❖ Select Window > Cascade.Tile Document windows• (Windows) Select Window > Tile Horizontally or Window > Tile Vertically.• (Macintosh) Select Window > Tile. Updated 24 September 2009
  28. 28. USING DREAMWEAVER CS4 22 WorkspaceResize the Document windowThe Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best ata specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes,or create sizes.Resize the Document window to a predetermined size❖ Select one of the sizes from the Window Size pop-up menu at the bottom of the Document window.Note: (Windows only) Documents within the Document window are maximized by default, and you cant resize adocument when its maximized. To de-maximize the document, click the de-maximize button in the upper rightcorner of the document.The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size islisted in parentheses. For example, you would use the size “536 x 196 (640 x 480, Default)” if your visitors are likely tobe using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor. For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower-right corner of a window.Change the values listed in the Window Size pop-up menu1 Select Edit Sizes from the Window Size pop-up menu.2 Click any of the width or height values in the Window Sizes list, and type a new value.To make the Document window adjust only to a specific width (leaving the height unchanged), select a height valueand delete it.3 Click the Description box to enter descriptive text about a specific size.Add a new size to the Window Size pop-up menu1 Select Edit Sizes from the Window Size pop-up menu.2 Click the blank space below the last value in the Width column.3 Enter values for Width and Height.To set the Width or Height only, simply leave one field empty.4 Click the Description field to enter descriptive text about the size you added.For example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Macnext to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.Set window size and connection speed1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh). Updated 24 September 2009
  29. 29. USING DREAMWEAVER CS4 23 Workspace2 Select Status Bar from the Category list on the left.3 Set any of the following options:Window Sizes lets you customize the window sizes that appear in the Status bar’s pop-up menu.Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size. Thedownload size for the page is displayed in the Status bar. When an image is selected in the Document window, theimage’s download size is displayed in the Property inspector.More Help topics“Status bar overview” on page 13“Resize the Document window” on page 22Reports in DreamweaverYou can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the followingtypes of reports:Search Lets you search for tags, attributes, and specific text within tags.Reference Lets you search for helpful reference information.Validation Lets you check for code or syntax errors.Browser Compatibility Lets you test the HTML in your documents to see if any tags or attributes are unsupported byyour target browsers.Link Checker Lets you find and fix broken, external, and orphaned links.Site Reports Enable you to improve workflow and test HTML attributes in your site. Workflow reports includechecked out by, recently modified, and design notes; HTML reports include combinable nested font tags, accessibility,missing Alt text, redundant nested tags, removable empty tags, and untitled documents.FTP Log Enables you to view all FTP file-transfer activity.Server Debug Lets you view information to debug an Adobe® ColdFusion® application.More Help topics“Search for tags, attributes, or text in code” on page 311“Use language-reference material” on page 312“Testing your site” on page 111“Validate tags” on page 317“Check for browser compatibility” on page 317“Find broken, external, and orphaned links” on page 280“Put files on a remote server” on page 86“Get files from a remote server” on page 85“Use the ColdFusion debugger (Windows only)” on page 318 Updated 24 September 2009
  30. 30. USING DREAMWEAVER CS4 24 WorkspaceUsing toolbars, inspectors, and context menusDisplay toolbarsUse the Document and Standard toolbars to perform document-related and standard editing operations; the Codingtoolbar to insert code quickly; and the Style Rendering toolbar to display your page as it would appear in differentmedia types. You can choose to display or hide the toolbars as necessary.• Select View > Toolbars, and then select the toolbar.• Right-click (Windows) or Control-click (Macintosh) any of the toolbars and select the toolbar from the context menu.Note: To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbarfrom the View Options pop-up menu at the top of the inspector.More Help topics“Document toolbar overview” on page 12“Standard toolbar overview” on page 13“Coding toolbar overview” on page 14“Style Rendering toolbar overview” on page 15Use the Property inspectorThe 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(s) selected.To access help for a particular Property inspector, click the help button in the upper right corner of the Propertyinspector, or select Help from a Property inspector’s Options menu.Note: Use the Tag inspector to view and edit every attribute associated with a given tag’s properties.More Help topics“Property inspector overview” on page 16“Set text properties in the Property inspector” on page 226“Dock and undock panels” on page 26“Change attributes with the Tag inspector” on page 320Show or hide the Property inspector❖ Select Window > Properties.Expand or collapse the Property inspector❖ Click the expander arrow in the lower-right corner of the Property inspector.View and change properties for a page element1 Select the page element in the Document window.You might have to expand the Property inspector to view all the properties for the selected element.2 Change any of the properties in the Property inspector. Updated 24 September 2009
  31. 31. USING DREAMWEAVER CS4 25 WorkspaceNote: For information on specific properties, select an element in the Document window, and then click the Help icon inthe upper-right corner of the Property inspector.3 If your changes are not immediately applied in the Document window, apply the changes in one of these ways:• Click outside the property-editing text fields.• Press Enter (Windows) or Return (Macintosh).• Press Tab to switch to another property.Use context menusContext menus provide convenient access to the most useful commands and properties related to the object or windowyou’re working with. Context menus list only those commands that pertain to the current selection.1 Right-click (Windows) or Control-click (Macintosh) the object or window.2 Select a command from the context menu.Customizing the CS4 workspaceManage windows and panelsYou can create a custom workspace by moving and manipulating Document windows and panels. You can also saveworkspaces and switch among them. Updated 24 September 2009

×