Sams Teach Yourself Dreamweaver CS5 in 24 Hours

495 Pages·2010·26.854 MB·English

by  Bruce, Betsy;Ness, Robyn;Ray, John

Betsy Bruce
John Ray
Robyn Ness
SamsTeachYourself
Adobe
®
Dreamweaver
®
CS5
24
in
Hours
800 East 96th Street, Indianapolis, Indiana, 46240 USA
Sams Teach Yourself Adobe® Dreamweaver® CS5 in 24 Hours Acquisitions Editor
Mark Taber
Copyright © 2011 by Pearson Education
Development Editor
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system,
or transmitted by any means, electronic, mechanical, photocopying, recording, or other- Songlin Qiu
wise, without written permission from the publisher. No patent liability is assumed with
Managing Editor
respect to the use of the information contained herein. Although every precaution has
been taken in the preparation of this book, the publisher and author assume no responsi- Kristy Hart
bility for errors or omissions. Nor is any liability assumed for damages resulting from the
Project Editor
use of the information contained herein.
ISBN-13: 978-0-672-33330-9 Andy Beaster
ISBN-10: 0-672-33330-9 Indexer
Library of Congress Cataloging-in-Publication Data: Erika Millen
Bruce, Betsy.
Sams teach yourself Adobe Dreamweaver CS5 in 24 hours / Betsy Bruce, John Ray, Proofreader
and Robyn Ness. Dan Knott
p. cm.
ISBN 978-0-672-33330-9 (pbk.) Technical Editor
1. Dreamweaver (Computer file) 2. Web sites—Authoring programs. 3. Web sites— Scott Antall
Design. I. Ray, John, 1971- II. Ness, Robyn. III. Title. IV. Title: Teach yourself Adobe
Dreamweaver CS5 in 24 hours. Publishing Coordinator
TK5105.8885.D74B782157 2011 Vanessa Evans
006.7’8—dc22
2010045974 Cover Designer
Printed in the United States of America Gary Adair
First Printing December 2010 Compositor
Trademarks Nonie Ratcliff
All terms mentioned in this book that are known to be trademarks or service marks have
been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this
information. Use of a term in this book should not be regarded as affecting the validity of
any trademark or service mark.
Warning and Disclaimer
Every effort has been made to make this book as complete and as accurate as possible,
but no warranty or fitness is implied. The information provided is on an “as is” basis. The
authors and the publisher shall have neither liability nor responsibility to any person or
entity with respect to any loss or damages arising from the information contained in this
book.
Bulk Sales
Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk
purchases or special sales. For more information, please contact
U.S. Corporate and Government Sales
1-800-382-3419
[email protected]
For sales outside of the U.S., please contact
International Sales
[email protected]
Table of Contents Quiz .................................................... 46
Quiz Answers ........................................ 47
Exercises.................................................. 47
Introduction HOUR 3: Setting Up a Website
What Is Dreamweaver CS5? .......................... 1 Defining a New Website .............................. 49
What’s New In Dreamweaver CS5? ................ 2 Building the Site Cache .......................... 51
Who Should Use Dreamweaver CS5?.............. 2 Using the Files Panel.................................. 51
Who Should Use This Book?.......................... 2 Expanding the Files Panel........................ 52
Conventions Used in This Book...................... 3 Creating New Files in the Files Panel........ 53
Editing Site Settings .................................. 55
HOUR 1: A World Wide Web of Dreamweaver
Possibilities Considering Site Organization ...................... 57
Summary.................................................. 58
What Can You Do with Dreamweaver? ............ 6
Q&A.......................................................... 59
Defining the Technology ................................ 6
Workshop.................................................. 59
Dissecting Website Examples ........................ 7
Quiz .................................................... 59
Basic Web Page Elements: Text,
Images,and Hyperlinks.............................. 7 Quiz Answers ........................................ 59
Page Layout............................................ 9 Exercises.................................................. 60
Forms: Collecting Data for E-Commerce, HOUR 4: Adding Text and Lists
Newsletters, or Anything Else .................. 10 Creating a New Page .................................. 61
Multimedia............................................ 12 Saving a File.............................................. 63
Interactivity .......................................... 14 Adding Text to a Web Page .......................... 64
Uploading a Website to the Web.............. 15 Copying and Pasting Text from a File ........ 64
Reusable Code and Files ........................ 16 Copying and Pasting Structural
Summary.................................................. 17 Formatting............................................ 65
Q&A.......................................................... 17 Applying Text Formatting.............................. 66
Workshop.................................................. 18 Understanding Paragraph
Quiz .................................................... 18 and Break Tags...................................... 67
Quiz Answers ........................................ 18 Setting Page Properties .............................. 68
Exercises.................................................. 19 Setting Global Page Appearance .............. 68
HOUR 2: A Tour of Dreamweaver Setting Global Heading Properties............ 73
Adding a Page Title................................ 74
Acquainting Yourself with Dreamweaver ........ 21
Introducing Cascading Style Sheets.............. 75
The Welcome Screen.............................. 22
Changing Text Attributes in the
The Workspace...................................... 24 Property Inspector...................................... 76
The Menu Bar........................................ 25 Selecting a Text Font.............................. 76
The Insert Panel.................................... 26 Changing Text Size ................................ 77
The Document Window............................ 39 Selecting a Text Color ............................ 78
The Document Toolbar............................ 39 Viewing and Changing CSS Styles ............ 78
The Status Bar...................................... 41 Aligning Text.............................................. 80
Panels and Inspectors............................ 42 Creating Lists and Indenting Text.................. 81
Context Menus...................................... 45 Adding a Separator to a Page:
Getting Help.............................................. 45 The Horizontal Rule .................................... 82
Summary.................................................. 46 Previewing in a Browser .............................. 83
Q&A.......................................................... 46 Summary.................................................. 85
Workshop.................................................. 46 Q&A.......................................................... 85
iv Sams Teach Yourself Adobe Dreamweaver CS5 in 24 Hours
Workshop.................................................. 86 Quiz Answers ...................................... 116
Quiz .................................................... 86 Exercises................................................ 117
Quiz Answers ........................................ 86 HOUR 7: Looking Under the Hood:
Exercises.................................................. 86 Exploring HTML
HOUR 5: Making Hyperlinks, Anchors, Exploring Code View.................................. 120
and Mailto Links Exploring the Head and Body of a
Exploring Relative and Absolute Paths .......... 87 Web Page............................................ 121
Understanding Absolute Paths ................ 88 Discovering the Coding Toolbar .............. 124
Understanding Document-Relative Paths.... 90 Using the Code Inspector...................... 126
Understanding Site Root–Relative Paths.... 92 Viewing and Editing HTML Tags by
Using the Quick Tag Editor ........................ 126
Adding a Hyperlink Within a Website.............. 93
Using the Edit Tag Mode........................ 127
Setting Link Color Preferences...................... 96
Using the Wrap Tag Mode...................... 127
Organizing a Long Page by Using
Named Anchors.......................................... 97 Using the Insert HTML Mode ................ 128
Understanding Invisible Elements ............ 99 Using the Code Navigator...................... 128
Linking to a Named Anchor...................... 99 Setting Code Preferences.......................... 129
Adding a Mailto Link.................................. 100 Setting Code Color Preferences.............. 129
Summary................................................ 101 Setting Code Format Preferences .......... 130
Q&A........................................................ 101 Setting Code Hints Preferences.............. 131
Workshop................................................ 102 Setting Code Rewriting Preferences........ 132
Quiz .................................................. 102 Cleaning Up HTML Created with
Microsoft Word ........................................ 132
Quiz Answers ...................................... 102
Exploring References ................................ 134
Exercises................................................ 102
Validating Your Code.................................. 135
HOUR 6: Displaying Data in Tables Summary................................................ 136
Creating a Table for Data .......................... 103 Q&A........................................................ 136
Selecting Table Elements...................... 105 Workshop................................................ 137
Setting Cell Padding, Cell Spacing, Quiz .................................................. 137
and Header Options.............................. 107 Quiz Answers ...................................... 137
Making a Table Accessible to People
with Disabilities .................................. 108 Exercises................................................ 137
Modifying a Table and Adding Content.......... 108 HOUR 8: Displaying Images
Adding and Sorting Data ...................... 109 Adding an Image to a Page........................ 139
Adding and Removing Rows and Adding Alternative Text.......................... 141
Columns ............................................ 110 Exploring Image Attributes .................... 143
Changing Column Width and Row Aligning an Image with Text.................... 143
Height................................................ 111
Exploring Image Flavors: GIF, JPEG,
Resizing and Coloring Tables.................. 111 and PNG.................................................. 146
Merging and Splitting Table Cells............ 112 Editing Images Within Dreamweaver............ 146
Aligning Table Cell Contents .................. 113 Optimizing Images for Use in a
Adding Color to a Table ........................ 114 Web Page............................................ 148
Exporting Data from a Table ...................... 114 Creating a Linked Image............................ 151
Summary................................................ 115 Creating an Image map ............................ 152
Q&A........................................................ 115 Adding a Hotspot to an Image Map ........ 153
Workshop................................................ 116 Aligning Hotspots ................................ 155
Quiz .................................................. 116 Creating Rollover Images .......................... 156
Contents v
Summary................................................ 157 Workshop................................................ 195
Q&A........................................................ 157 Quiz .................................................. 195
Workshop................................................ 157 Quiz Answers ...................................... 196
Quiz .................................................. 157 Exercises................................................ 196
Quiz Answers ...................................... 158 HOUR 11: Formatting Web Pages with
Exercises................................................ 158 Cascading Style Sheets
HOUR 9: Making Web Graphics in Styling Text with CSS ................................ 198
Fireworks CS5 Creating a Class Selector.......................... 201
Acquainting Yourself with Fireworks ............ 159 Applying a Class Selector...................... 203
Modifying Images for Use in a Web Page...... 160 Removing a Class Selector.................... 203
Rotating, Cropping, and Changing Exploring Style Settings ............................ 204
the Size of an Image............................ 160 Creating a Tag Selector.............................. 209
Undoing Changes ................................ 163 Creating Compound Selectors.................... 210
Creating an Image.................................... 163 Editing Styles .......................................... 212
Adding a Shape.................................... 164 Creating an External Style Sheet ................ 213
Adding Text.......................................... 167 Exporting Existing CSS Styles................ 213
Optimizing Graphics for the Web ................ 169 Creating an External Style Sheet
Designing Web Layouts in Fireworks............ 171 from Scratch........................................ 215
Slicing Web Graphics................................ 173 Saving CSS Styles in an External
Exporting HTML and CSS from Fireworks...... 175 Style Sheet ........................................ 216
Summary................................................ 176 CSS and the Property Inspector.................. 217
Q&A........................................................ 176 Understanding the Cascade ...................... 218
Workshop................................................ 177 Using Inspect Mode.................................. 219
Quiz .................................................. 177 Summary................................................ 220
Quiz Answers ...................................... 177 Q&A........................................................ 220
Exercises................................................ 177 Workshop................................................ 221
Quiz .................................................. 221
HOUR 10: Adding Flash and Other
Multimedia to a Web Page Quiz Answers ...................................... 222
Exercises................................................ 222
Exploring Multimedia and Bandwidth............ 179
Understanding Players .............................. 180 HOUR 12: Using CSS for Positioning
Adding Flash Files .................................... 182 Understanding the CSS Box Model.............. 223
Previewing a Flash Movie in the Exploring a CSS Page-Layout Example.......... 225
Dreamweaver Document Window............ 183 Viewing the CSS Visually ...................... 227
Setting Alternative Content for Understanding Float and Clear .............. 228
Flash Media........................................ 184 Positioning a Div ...................................... 229
Adding a Link to a PDF File........................ 184 Inserting Divs...................................... 229
Adding a Sound File to a Web Page ............ 185 Using id Selectors................................ 230
Plug-in Playback .................................. 186 Creating Compound Selectors.................... 231
Resizing a Control................................ 187 Floating Page Elements ............................ 232
Looping the Sound .............................. 189 Creating Columns ................................ 234
Gaining Greater Control with an
Embedded Player ................................ 190 Clearing the Float ................................ 236
Adding a Java Applet to a Web Page............ 192 Centering Your Design on the Page.............. 237
Summary................................................ 194 Previewing with BrowserLab ...................... 239
Q&A........................................................ 195 Summary................................................ 240
Q&A........................................................ 241
vi Sams Teach Yourself Adobe Dreamweaver CS5 in 24 Hours
Workshop................................................ 241 Creating a Template.................................. 274
Quiz .................................................. 241 Making the Template Editable................ 277
Quiz Answers ...................................... 242 Making an Optional Region.................... 279
Exercises................................................ 242 Modifying an Editable Region ................ 279
HOUR 13: Creating CSS for Mobile Devices Creating a Web Page from a Template ........ 280
and Printing Making Changes to a Template
and Updating Pages.................................. 282
Understanding the CSS Media Attribute ...... 243
Dreamweaver and Content Management...... 282
Previewing Style Rendering in
Dreamweaver .......................................... 245 Contribute .......................................... 282
Adding an Alternative Style Sheet................ 246 Summary................................................ 283
Setting the External Style Sheet Q&A........................................................ 283
Media Type ........................................ 247 Workshop................................................ 284
Link to a Second External Style Sheet .... 248 Quiz .................................................. 284
Designing CSS for Print ............................ 249 Quiz Answers ...................................... 284
Hiding Elements .................................. 250 Exercises................................................ 284
Modifying the Default Font .................... 253 HOUR 15: Designing for WordPress and
Identifying Style Conflicts...................... 254 Content Management Systems
Hiding Hyperlinks ................................ 254 Setting Up Your Site.................................. 285
Adding a Print-Only Message.................. 255 Site Setup within Dreamweaver.............. 286
CSS for Handheld Devices ........................ 257 Locating Dynamically Related Files.............. 289
Using the Handheld Style Sheet Making Site Changes................................ 291
and Device Central .............................. 257
Using Inspect Mode.............................. 291
Targeting the iPhone and Advanced
Handhelds.......................................... 258 Using the Code Navigator...................... 292
Summary................................................ 259 Filtering Related Files............................ 292
Q&A........................................................ 260 Using Site Specific Code Hinting ................ 294
Workshop................................................ 260 Summary................................................ 295
Quiz .................................................. 260 Q&A........................................................ 295
Quiz Answers ...................................... 260 Workshop................................................ 296
Exercises................................................ 261 Quiz .................................................. 296
Quiz Answers ...................................... 297
HOUR 14: Using Site Assets, Library Items,
and Templates Exercises................................................ 297
Managing Assets in the Assets Panel.......... 263 HOUR 16: Adding Spry Menu Bars for
Navigation
Locating and Previewing Assets.............. 265
Adding Assets to a Web Page .................... 266 Understanding Navigation.......................... 299
Editing Assets.......................................... 267 Inserting a Menu Bar................................ 301
Using Snippets ........................................ 267 Editing the Menu Bar CSS .................... 304
Creating Your Own Snippets .................. 268 Targeting a Link to Open in a New
Browser Window ...................................... 307
Managing Library Items and Templates
in the Assets Panel .................................. 269 Summary................................................ 308
Creating a Library Item.............................. 269 Q&A........................................................ 308
Adding a Library Item to a Page.................. 272 Workshop................................................ 309
Making Changes to a Library Item .............. 273 Quiz .................................................. 309
Quiz Answers ...................................... 309
Exercises................................................ 309
Contents vii
HOUR 17: Using Dynamic HTML Quiz Answers ...................................... 344
and AP Divs Exercises................................................ 345
What Is DHTML?...................................... 311
HOUR 19: Using Spry, the Widget Browser,
Adding an AP Div...................................... 312 and Extensions
Setting AP Div Positioning...................... 314 Understanding AJAX and Widgets................ 347
Adding a Background Color and
Background Image................................ 315 Exploring Spry.......................................... 348
Exploring AP Div Stacking Order.............. 315 External JavaScript and CSS Files .......... 350
Changing AP Div Visibility...................... 317 Adding Spry Effects.................................. 351
Nesting AP Divs........................................ 318 Applying the Squish or Shake Effect ...... 351
Animating an AP Div.................................. 318 Applying the Appear/Fade Effect............ 353
Using Spry Widgets: Tabbed Panels,
Summary................................................ 320 Collapsible Panels, Accordions,
Q&A........................................................ 321 and Tool Tips .......................................... 355
Workshop................................................ 321 Adding a Tabbed Panel.......................... 355
Quiz .................................................. 321 Adding a Collapsible Panel.................... 356
Quiz Answers ...................................... 321 Adding an Accordion ............................ 357
Exercises................................................ 322 Adding ToolTips.................................... 357
Hour 18: Adding Interactivity with Editing the Spry Panel CSS.................... 359
Behaviors Using Spry to Display XML and HTML
What Is a Dreamweaver Behavior?.............. 323 Data in a Web Page.................................. 360
Using the Reference Books.................... 324 What Is XML?...................................... 360
Exploring Dreamweaver Behaviors.......... 325 Displaying XML Using a Spry Data Set.... 361
Reusing HTML Data with the Spry
Exploring Events .................................. 327 Data Set ............................................ 363
Attaching a Behavior to an Object .............. 328 Using Third Party Widgets with the Widget
Showing and Hiding Elements.................... 330 Browser.................................................. 366
Creating a Null Link to Trigger the Installing the Widget Browser ................ 367
Behavior ............................................ 330 Installing Widgets ................................ 368
Creating a Hidden AP Div...................... 331 Customizing and Configuring Widgets...... 369
Attaching the Show-Hide Elements
Behavior ............................................ 331 Inserting Widgets in your Pages ............ 370
Selecting the Event That Triggers Using External AJAX Widgets...................... 371
the Behavior........................................ 333 Using Lightview.................................... 371
Editing the Behavior.............................. 334 Using Dreamweaver Extensions.................. 373
Opening a New Browser Window ................ 334 Finding Extensions................................ 374
Popping Up a Message.............................. 336 Installing and Managing an Extension...... 375
Attaching Multiple Behaviors to the Summary................................................ 376
Same Object........................................ 337 Q&A........................................................ 376
Setting Text in a Container ........................ 338 Workshop................................................ 377
Using the Go to URL Behavior.................... 339 Quiz .................................................. 377
Adding Drag and Drop with a Draggable Quiz Answers ...................................... 377
AP Div .................................................... 340 Exercises................................................ 378
Enabling Drag and Drop........................ 341
Summary................................................ 343 HOUR 20: Using the Dreamweaver HTML5
Features
Q&A........................................................ 344
Workshop................................................ 344 Using HTML5 in Dreamweaver.................... 379
Quiz .................................................. 344 What is HTML5?.................................. 380
Creating HTML5 Documents.................. 382
viii Sams Teach Yourself Adobe Dreamweaver CS5 in 24 Hours
Using HTML5 Tags.................................... 383 Uploading a File from a Form...................... 418
Previewing Documents and Configuring Exploring Submission Security.................... 419
Media Queries .................................... 384 Summary................................................ 420
Getting HTML5 Help ............................ 386 Q&A........................................................ 420
Summary................................................ 387 Workshop................................................ 421
Q&A........................................................ 387 Quiz .................................................. 421
Workshop................................................ 387 Quiz Answers ...................................... 421
Quiz .................................................. 387 Exercises................................................ 422
Quiz Answers ...................................... 388
HOUR 23: Uploading, Sharing, and
Exercises................................................ 388 Managing Web Projects
HOUR 21: Creating a Form and Collecting Enabling Server Connection ...................... 423
Data
Adding Your Remote Site ...................... 423
Creating a Form........................................ 389 Moving a Site onto a Remote Server .......... 428
Adding Text Fields to Forms .................. 392 Understanding Dreamweaver’s Website
Applying Text Field Attributes.................. 394 Management Capabilities.......................... 430
Adding Radio Buttons and Check Boxes Enabling Check In/Check Out ................ 430
to Forms ................................................ 396 Transferring Files...................................... 431
Radio Button Groups............................ 396 Importing an Existing Website.................... 433
Check Boxes ...................................... 397 Subversion Version Control........................ 434
Adding Lists and Menus to Forms .............. 399 Understanding Subversion .................... 434
Adding Push Buttons and Image Buttons Getting Started with Subversion ............ 435
to Forms ................................................ 401
Summary................................................ 436
Adding Submit and Reset Buttons
to Forms ............................................ 402 Q&A........................................................ 436
Adding an Image Button to Forms .......... 403 Workshop................................................ 437
Adding Generic Buttons to Forms .......... 403 Quiz .................................................. 437
Structuring a Form with Labels and Quiz Answers ...................................... 437
Fieldsets ................................................ 404 Exercises................................................ 438
Creating a Jump Menu to Navigate to
HOUR 24: Maintaining a Website
Different URLs ........................................ 404
Summary................................................ 405 Managing the Local and Remote Sites ........ 439
Synchronizing Your Files on the Local
Q&A........................................................ 406 and Remote Sites................................ 439
Workshop................................................ 406 Managing Your Links ............................ 443
Quiz .................................................. 406 Using, Saving, and Sharing Searches.......... 445
Quiz Answers ...................................... 407 Adding Design Notes to Pages.................... 447
Exercises................................................ 407 Sharing Your Screen with Adobe
HOUR 22: Sending and Reacting to ConnectNow............................................ 450
Form Data Generating Reports About a Website .......... 451
Validating a Form’s Data Using the Summary................................................ 452
Validate Form Behavior.............................. 409 Q&A........................................................ 453
Using the Spry Framework Validation Workshop................................................ 453
Objects .................................................. 412 Quiz .................................................. 453
Receiving Information from a Form.............. 414 Quiz Answers ...................................... 454
Preparing a Page to Interact with ASP,
ASP.NET, JSP, PHP, or CFML ...................... 415 Exercises................................................ 454
Setting Form Properties........................ 416 Index 455
Adding a Hidden Field to a Form ................ 417
About the Authors
Betsy Bruceis a developer and consultant who specializes in creating eLearning applications
using Dreamweaver, Authorware, Captivate, and Flash. She was lead developer at the Cobalt
Group in Seattle and was Manager of Technical Services at MediaPro, Inc. She is an Adobe-certi-
fied trainer for Dreamweaver, Contribute, Flash, Captivate, and Authorware.
John Rayis a Senior Business Analyst and leads the enterprise application development team for
The Ohio State University Research Foundation. In his spare time, he has written a number of
books, on topics ranging from IT security to operating systems and iPhone development—including
Sams Teach Yourself iPhone Application Development in 24 Hours,Sams Teach Yourself iPad
Application Development in 24 Hours,Mac OS X Unleashed, and Maximum Linux Security. He can
be found on the web at http://www.johneray.com.
Robyn Nessis a web developer at The Ohio State University, focusing on issues of usability, infor-
mation design, and content development. She has contributed to books on Dreamweaver, Adobe
CS3, digital media production, and digital photography. In her spare time she takes a ridiculous
number of digital photographs, some of which can be seen at floraphotographs.com.
Dedication
This book is dedicated to people who love their pets,who are nice to others,and who are excited by
the prospect of learning new things.You’re a rare and special group.
Acknowledgments
Many thanks to the group at Sams Publishing—Songlin Qiu, Mark Taber, and Scott Antall—for
keeping the project under control and making sure that my words make sense!
Most of all, thanks to you, the reader, for being interested in taking up web development in
Dreamweaver! You’re about to venture into one of the most exciting, rewarding, and creative fields
available to technology professionals today.