Dreamweaver
CS5.5
Dreamweaver
CS5.5
David Sawyer McFarland
Dreamweaver CS5.5: The Missing Manual
by David Sawyer McFarland
Copyright © 2011 O’Reilly Media, Inc. All rights reserved.
Printed in the Unites States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles: http://my.safaribooksonline.com. For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected].
Printing History:
June 2011: First Edition.
Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should have been in the box” are registered trademarks of O’Reilly Media, Inc. Dreamweaver CS5.5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-1-449-39797-5
Table of Contents
The Missing Credits
. . .xxi
Introduction
. . .1
Part One: Building a Web Page
Chapter 1: Dreamweaver CS5.5 Guided Tour
. . .21
The Dreamweaver CS5.5 Interface . . . 21
The Document Window . . . 22
The Insert Panel . . . 25
The Files Panel . . . 29
The Property Inspector . . . 30
The Application Bar. . . 31
Organizing Your Workspace . . . 33
Setting Up a Site . . . 39
Creating a Web Page . . . 43
The Dreamweaver Test Drive . . . 47
Phase 1: Getting Dreamweaver in Shape . . . 47
Phase 2: Creating a Website . . . 51
Phase 3: Creating and Saving a Web Page . . . 52
Phase 4: Adding Images and Text . . . 57
Phase 5: Preview Your Work . . . 63
Phase 6: Finishing the Page . . . 67
Chapter 2: Adding Text to Your Web Pages
. . .75
Adding Text in Dreamweaver . . . 75
Adding Special Characters . . . 76
Line Breaks . . . 77
Nonbreaking Spaces . . . 79
Multiple Spaces . . . 80
Copying and Pasting Text . . . 82
Simple Copy and Paste . . . 82
Paste Special . . . 83
Pasting Text from Word: The Basic Method . . . 85
Pasting Text with Word Formatting . . . 87
Pasting Excel Spreadsheet Information . . . 88
Importing Word and Excel Documents (Windows) . . . 88
Selecting Text . . . 88
Spell-Checking . . . 91
About Dictionaries . . . 91
Performing the Check . . . 91
Chapter 3: Text Formatting
. . .95
Paragraph Formatting . . . 97
Paragraphs . . . 98
Headlines . . . 99
Preformatted Text . . . 100
Paragraph Alignment . . . 101
Indented Paragraphs . . . 101
Creating and Formatting Lists . . . 102
Bulleted and Numbered Lists . . . 103
Reformatting Bulleted and Numbered Lists . . . 105
Definition Lists . . . 107
Removing and Deleting List Items . . . 109
Text Styles . . . 110
Chapter 4: Introducing Cascading Style Sheets
. . .113
Cascading Style Sheet Basics . . . 114
Why Use CSS? . . . 114
Internal vs. External Style Sheets . . . 115
Types of Styles . . . 116
Creating Styles . . . 117
Phase 1: Set Up the Style . . . 117
Phase 2: Defining a Style . . . 121
Creating a Style with the Property Inspector. . . 121
Using Styles . . . 123
Applying a Class Style . . . 124
Removing a Class Style . . . 126
Applying IDs to a Tag . . . 127
Linking to an External Style Sheet . . . 128
Manipulating Styles . . . 129
Editing Styles . . . 129
Deleting a Style . . . 130
Renaming a Class Style . . . 131
Text Formatting with CSS . . . 134
Choosing a Font . . . 134
Changing the Font Size . . . 139
Picking a Font Color . . . 142
Adding Bold and Italic . . . 144
Aligning Text . . . 145
CSS Type Properties in the Rule Definition Window . . . 146
Block Properties . . . 148
List Properties. . . 151
Cascading Style Sheets Tutorial . . . 152
Setting Up . . . 153
Creating an External Style Sheet . . . 153
Editing a Style . . . 155
Adding Another Style . . . 158
Creating a Class Style . . . 160
Attaching an External Style Sheet . . . 163
Chapter 5: Links
. . .167
Understanding Links . . . 167
Absolute Links . . . 168
Document-Relative Links . . . 168
Root-Relative Links . . . 169
Link Types in Action . . . 172
Executive Summary . . . 173
Adding a Link . . . 174
Browsing for a File . . . 174
Using the Point-to-File Tool . . . 177
Typing (or Pasting) the URL or Path . . . 178
Using the Hyperlink Object . . . 179
Adding an Email Link . . . 183
Linking Within a Web Page . . . 184
Method 1: Creating a Named Anchor . . . 184
Method 2: Adding an ID . . . 186
Linking to an Anchor or ID . . . 186
Viewing and Hiding Anchors . . . 187
Modifying a Link . . . 188
Changing a Link’s Destination . . . 188
Removing a Link . . . 188
Styling Links . . . 188
CSS and Links . . . 190
Creating a Navigation Menu . . . 192
Adding a Menu . . . 193
Adding, Editing, and Removing Links . . . 195
Link Tutorial . . . 204
Linking to Other Pages and Websites . . . 204
Formatting Links . . . 206
Adding a Navigation Bar . . . 207
Styling the Menu Bar . . . 212
Submenus and Rollover Buttons . . . 216
Chapter 6: Images
. . .221
Adding Images . . . 222
Adding an Image Placeholder . . . 224
Inserting an Image from Photoshop . . . 226
Method 1: Using the Insert Image Object . . . 226
Method 2: Copying and Pasting from Photoshop . . . 233
Modifying an Image . . . 233
Adding an ID to an Image . . . 234
Adding a Text Description to an Image . . . 234
Changing an Image’s Size . . . 236
Some Properties to Avoid . . . 237
Controlling Images with CSS . . . 238
Wrapping Text Around an Image . . . 239
Adding Borders . . . 241
Background Images . . . 243
Editing Graphics . . . 245
Dreamweaver’s Built-In Editing Tools . . . 246
Setting Up an External Editor . . . 249
Editing Smart Objects . . . 251
Editing Images Pasted from Photoshop . . . 254
Optimizing an Image . . . 255
Image Maps . . . 255
Editing a Hotspot’s Properties . . . 257
Rollover Images . . . 258
Tutorial: Inserting and Formatting Graphics . . . 260
Setting Up . . . 260
Adding an Image . . . 261
Inserting a Photoshop File . . . 262
Inserting a Rollover Image . . . 267
Using Background Images . . . 269
Chapter 7: Tables
. . .273
Table Basics . . . 274
Inserting a Table . . . 275
Selecting Parts of a Table . . . 278
Selecting a Table . . . 278
Selecting Rows or Columns . . . 279
Selecting Cells . . . 280
Formatting Tables . . . 280
Aligning Tables . . . 281
Clearing Height and Width Values . . . 282
Resizing a Table . . . 283
Modifying Cell and Row Properties . . . 284
Alignment Properties . . . 284
Table Header . . . 285
A Property to Forget . . . 285
Cell Decoration . . . 285
Setting Cell Dimensions . . . 286
Tips for Surviving Table-Making . . . 287
Adding and Removing Cells . . . 289
Adding One Row or Column . . . 289
Adding Multiple Rows or Columns . . . 290
Deleting Rows and Columns . . . 291
Merging and Splitting Cells . . . 292
Tabular Data . . . 294
Importing Data into a Table . . . 294
Sorting Data in a Table . . . 296
Exporting Table Data . . . 298
Tables Tutorial . . . 298
Adding a Table and Data . . . 299
Modifying the Table . . . 301
Formatting the Table . . . 302
Final Improvements . . . 306
Part Two: Building a Better Web Page
Chapter 8: Advanced CSS
. . .313
Compound Selectors . . . 313
Descendent Selectors . . . 315
Styling Groups of Tags . . . 318
Fast Style Editing with the Properties Pane . . . 319
Moving and Managing Styles . . . 323
More About CSS . . . 326
Inheritance . . . 326
The Cascade . . . 329
The Other Side of the CSS Styles Panel . . . 330
Using the Code Navigator . . . 335
Styling for Print . . . 337
Previewing Media Styles in Dreamweaver . . . 339
Tips for Printer Style Sheets . . . 340
Using CSS3 . . . 342
Chapter 9: Page Layout
. . .347
Types of Web Page Layouts . . . 349
Float Layout Basics . . . 351
The Mighty <div> Tag . . . 352
The Insert Div Tag Tool . . . 353
A Simple Example . . . 356
Understanding the Box Model . . . 360
Dreamweaver’s CSS Layouts . . . 365
The Structure of Dreamweaver’s CSS Layouts . . . 369
Modifying Dreamweaver’s CSS Layouts . . . 371
Making General Changes to a CSS Layout . . . 371
Modifying Fixed Layouts . . . 374
Modifying Liquid Layouts . . . 375
Other Styles to Change . . . 376
Absolute Positioning . . . 378
The CSS Positioning Properties. . . 379
Adding an AP Div to Your Page . . . 386
Drawing AP Divs . . . 389
The AP Elements Panel . . . 389
Modifying AP Element Properties . . . 391
Resizing Absolutely Positioned Elements . . . 391
Moving AP Elements . . . 392
Aligning AP Elements . . . 393
Background Image and Color . . . 394
Nesting AP Divs . . . 394
CSS Layout Tutorial . . . 395
Adding Content . . . 399
Fine-Tuning the Layout . . . 400
Adding Styles and Navigation . . . 405
Fiddling with the Footer . . . 407
Chapter 10: Troubleshooting CSS
. . .413
Analyzing CSS with Dreamweaver . . . 413
Editing CSS Properties . . . 415
Analyzing CSS in JavaScript and Server-Side Pages . . . 416
Checking Browser Compatibility . . . 420
Overcoming Common CSS Problems . . . 424
Clearing and Containing Floats . . . 424
Avoiding Float “Drops” . . . 427
Handling Internet Explorer 6 Bugs . . . 429
Double-Margin Bug . . . 429
Chapter 11: Under the Hood: HTML
. . .433
Controlling How Dreamweaver Handles HTML . . . 433
Auto-Fixing Your Code . . . 434
Web Application Server Pages . . . 436
Special Characters and Encoding . . . 436
Code View . . . 437
Coding Toolbar . . . 443
Code Hints . . . 445
Code Collapse . . . 450
Setting Code Formats . . . 452
Related Files . . . 455
Live Code . . . 460
Quick Tag Editor . . . 462
Using the Quick Tag Editor . . . 463
Tag Inspector . . . 464
Comparing Versions of a Web Page . . . 465
Using WinMerge to Compare Files . . . 469
Using Text Wrangler to Compare Files . . . 471
Reference Panel . . . 472
Inserting JavaScript . . . 472
Chapter 12: Designing Websites for Mobile Devices
. . .475
Previewing at Different Resolutions . . . 477
Multiscreen Preview . . . 477
Previewing Other Resolutions . . . 478
Media Queries . . . 480
Dreamweaver CS5.5’s Approach to Media Queries . . . 482
Using Dreamweaver’s Media Queries Tool . . . 483
Strategies for Using Media Queries . . . 488
Organizing Your Style Sheets for Media Queries . . . 489
Adding Styles to Media Query Style Sheets . . . 490
jQuery Mobile . . . 491
Creating a Basic jQuery Mobile Page . . . 492
Anatomy of a jQuery Mobile Page . . . 494
Adding Content to a jQuery Mobile Page . . . 497
Formatting a jQuery Mobile Page . . . 510
Part Three: Bringing Your Pages to Life
Chapter 13: Forms
. . .515
Form Basics . . . 515
The Code Backstage . . . 516
Creating a Form . . . 517
Adding Form Elements . . . 521
What All Form Elements Have in Common . . . 522
Text Fields . . . 526
Checkboxes and Checkbox Groups . . . 528
Radio Buttons and Radio Groups . . . 531
Pull-Down Menus and Lists . . . 533
File Field . . . 535
Hidden Field . . . 536
Buttons . . . 537
The <label> Tag . . . 539
The <fieldset> Tag . . . 540
Validating Forms . . . 540
Spry Validation Basics . . . 541
Formatting Spry Error Messages and Fields . . . 546
Spry Text Field . . . 548
Spry Text Area . . . 555
Spry Checkbox . . . 557
Spry Select . . . 560
Spry Password . . . 561
Spry Confirm . . . 563
Spry Radio Group. . . 564
Forms Tutorial . . . 565
Insert a Form and Add a Form Field . . . 565
Adding a Spry Validation Text Field . . . 571
Adding a Spry Form Menu . . . 575
Adding a Spry Radio Group . . . 577
Completing and Testing the Form . . . 579
Chapter 14: Spry: Creating Interactive Web Pages
. . .581
What is Spry? . . . 581
Tabbed Panels . . . 582
Adding a Tabbed Panel . . . 583
Adding and Editing Panel Content . . . 585
Formatting Tabbed Panels . . . 586
Accordions . . . 590
Adding an Accordion . . . 590
Adding and Editing Accordion Content . . . 592
Collapsible Panels . . . 596
Adding a Collapsible Panel . . . 596
Adding Content to a Collapsible Panel . . . 599
Formatting a Collapsible Panel . . . 599
Spry Tooltips . . . 601
Adding a Spry Tooltip . . . 601
Adding Content to a Tooltip . . . 605
Formatting a Tooltip . . . 606
Spry Data Sets . . . 607
Storing Data in an HTML File . . . 608
Storing Data in an XML File . . . 611
Inserting a Spry Data Set . . . 615
Inserting HTML Data . . . 617
Inserting XML Data . . . 622
Choosing a Data Layout . . . 625
Creating a Spry Region . . . 634
The Bindings Panel . . . 636
Spry Repeat Region . . . 638
Spry Repeat Lists . . . 640
Live View . . . 642
Chapter 15: Dreamweaver Behaviors
. . .645
Understanding Behaviors . . . 646
Behavior Elements . . . 646
More About Events . . . 646
Applying Behaviors . . . 647
The Behaviors Panel . . . 647
Applying Behaviors, Step by Step . . . 649
Adding Multiple Behaviors . . . 650
Editing Behaviors . . . 651
A Quick Example . . . 651
Events . . . 652
Mouse Events . . . 652
Keyboard Events . . . 654
Body and Frameset Events . . . 655
Selection and Highlighting Events . . . 655
Form Events. . . 656
The Actions, One by One . . . 656
Spry Effects . . . 657
Navigation Actions . . . 663
Image Actions . . . 671
Message Actions . . . 674
Element Actions . . . 677
Advanced Behaviors . . . 680
The Widget Browser . . . 683
Find and Install Widgets . . . 684
Configuring Widgets . . . 686
Adding a Widget to a Web Page . . . 690
Chapter 16: Add Flash and Other Multimedia
. . .693
Flash: An Introduction. . . 693
Insert a Flash Movie . . . 695
Change Movie Properties . . . 697
Automate the Flash Download . . . 702
Add Flash videos . . . 704
Other Video Options . . . 707
Part Four: Building a Website
Chapter 17: Introducing Site Management
. . .713
The Structure of a Website . . . 714
Setting Up a Site . . . 719
Editing or Removing Sites . . . 724
Exporting and Importing Sites . . . 726
Organizing Site Files . . . 728
Modifying the Files Panel View . . . 729
Adding New Folders and Files . . . 731
Site Assets . . . 737
Viewing the Assets Panel . . . 737
Inserting Assets . . . 739
Favorite Assets . . . 741
Chapter 18: Testing Your Site
. . .745
Site Launch Checklist . . . 745
Previewing Web Pages in BrowserLab . . . 748
BrowserLab Setup . . . 748
Testing Pages in BrowserLab . . . 749
Find and Fix Broken Links . . . 752
Finding Broken Links . . . 753
Fixing Broken Links . . . 756
Listing External Links . . . 757
Orphaned Files . . . 758
Changing a Link Throughout a Site . . . 759
Validating Web Pages . . . 761
Steps for Validating Web Pages . . . 762
Cleaning Up HTML (and XHTML) . . . 764
Site Reporting . . . 767
Chapter 19: Moving Your Site to the Internet
. . .775
Adding a Remote Server . . . 775
Setting Up a Remote Server with FTP or SFTP . . . 777
More Remote Server Options for FTP . . . 781
Setting Up a Remote Server using FTP over SSL/TLS . . . 783
Setting Up a Remote Server over a Local Network . . . 784
Setting Up a Remote Server with WebDAV . . . 785
Setting Up a Remote Server with RDS . . . 786
Advanced Remote Server Settings . . . 786
Transferring Files . . . 788
Moving Files to the Web Server . . . 788
Getting Files from Your Web Server . . . 792
Cloaking Files . . . 794
Check In and Check Out . . . 797
Checking Out Files . . . 798
Checking In Files . . . 802
Synchronizing Site Files . . . 804
Communicating with Design Notes . . . 807
Setting Up Design Notes . . . 808
Viewing Design Notes . . . 810
Organizing the Columns in the Files Panel . . . 810
Creating Custom Columns . . . 812
Part Five: Dreamweaver CS5.5 Power
Chapter 20: Snippets and Libraries
. . .819
Snippets Basics . . . 819
Using Snippets . . . 821
Creating Snippets . . . 822
Organizing Snippets . . . 824
Built-In Snippets . . . 825
Library Basics . . . 825
Creating and Using Library Items . . . 827
Adding Library Items to a Page . . . 829
Editing Library Items . . . 830
Renaming Library Elements . . . 831
Deleting Library Elements . . . 832
Snippets and Library Tutorial . . . 832
Creating a Snippet . . . 833
Chapter 21: Templates
. . .839
Template Basics . . . 839
Creating a Template . . . 842
Turning a Web Page into a Template . . . 843
Building a Template from Scratch . . . 845
Defining Editable Regions . . . 845
Adding a Basic Editable Region . . . 846
Adding a Repeating Region. . . 848
Repeating Tables . . . 851
Making a Tag Attribute Editable . . . 854
Adding Optional Regions . . . 857
Locking Optional Regions . . . 858
Repeating Optional Regions . . . 858
Optional Editable Regions . . . 859
Advanced Optional Regions . . . 859
Editing and Removing Optional Regions . . . 863
Nested Templates . . . 864
Customizing Nested Templates. . . 867
Using Nested Templates . . . 868
Building Pages Based on a Template . . . 869
Working with Repeating Regions . . . 869
Changing Properties of Editable Tag Attributes . . . 870
Hiding and Showing Optional Regions . . . 871
Applying Templates to Existing Pages . . . 872
Updating a Template . . . 874
Updating Nested Templates . . . 876
Unlinking a Page from a Template . . . 877
Exporting a Template-Based Site . . . 877
Template Tutorial . . . 879
Creating a Template . . . 879
Creating a Page Based on a Template . . . 883
Creating Another Template-Based Page . . . 886
Updating a Template . . . 888
Chapter 22: Find and Replace
. . .891
Find and Replace Basics . . . 892
Basic Text and HTML Searches . . . 892
Phase 1: Determine the Scope of Your Search . . . 893
Phase 2: Specify What to Search For . . . 894
Phase 3: Provide the Replacement Text . . . 895
Phase 4: Choose the Search Settings. . . 895
Phase 5: Take Action . . . 896
Advanced Text Searches. . . 898
Limiting the Search by Tag . . . 898
Limiting a Search by Attribute . . . 899
Advanced Tag Searches . . . 902
Chapter 23: Customizing Dreamweaver
. . .907
Keyboard Shortcuts . . . 907
Make Your Own Shortcut Set . . . 908
Changing Keyboard Shortcuts . . . 909
Create a Shortcut Cheat Sheet . . . 912
Dreamweaver Extensions . . . 912
Browse the Exchange . . . 913
Find a Good Extension . . . 915
Other Extension Sources . . . 916
Download and Install Extensions . . . 916
Extension Manager . . . 917
Make Your Own Extensions . . . 918
Part Six: Dynamic Dreamweaver
Chapter 24: Getting Started with Dynamic Websites
. . .923
Pieces of the Puzzle . . . 925
Understanding Server Models . . . 926
Picking a Server Model . . . 928
Dynamic Websites: The Setup . . . 929
Setting Up a Testing Server . . . 930
Localhost and the Local Site Root Folder . . . 931
Setting Up Dreamweaver . . . 932
Creating a Dynamic Page . . . 937
Databases: A Quick Introduction . . . 939
Tables and Records . . . 939
Relational Databases . . . 941
Loading a Database . . . 942
Connecting to a Database . . . 946
Exploring the Databases Panel . . . 949
Chapter 25: Adding Dynamic Data to Your Pages
. . .953
Retrieving Information . . . 953
Understanding Recordsets . . . 953
Creating Recordsets . . . 954
Filtering Information . . . 957
Comparison Operators for Filters . . . 959
Getting Comparison Values . . . 960
Advanced Recordsets and SQL . . . 966
Reusing Recordsets . . . 972
Editing Recordsets . . . 973
Deleting Recordsets . . . 973
Adding Dynamic Information . . . 974
Displaying Multiple Records . . . 979
Creating a Repeating Table . . . 979
Creating a Repeat Region . . . 981
Editing and Removing a Repeat Region . . . 983
Recordset Navigation . . . 984
Recordset Navigation Bar . . . 984
Recordset Navigation Status . . . 986
Master Detail Page Set . . . 988
Passing Information Between Pages . . . 991
Viewing Live Data . . . 994
HTTP Request Settings . . . 995
Navigating Live View . . . 997
Tutorial: Displaying Database Info . . . 998
Creating a Recordset . . . 998
Editing a Recordset and Linking to a Detail Page . . . 1002
Creating Repeating Regions . . . 1005
Building the Detailed Product Page . . . 1007
Filling in the Details . . . 1010
Operators Standing By . . . 1015
Chapter 26: Web Pages that Manipulate Database Records
. .1019
Adding Data . . . 1019
Dreamweaver’s Record Insertion Form Wizard . . . 1020
Using the Insert Record Behavior . . . 1024
Updating Database Records . . . 1026
The Update Record Form Wizard . . . 1027
The Update Record Server Behavior . . . 1030
Dynamic Form Fields . . . 1034
Dynamic Text Form Fields . . . 1035
Dynamic Checkboxes and Radio Buttons . . . 1036
Dynamic Menus and Lists . . . 1039
Deleting Records . . . 1042
Tutorial: Inserting and Updating Data . . . 1045
Adding an Insert Product Page . . . 1045
Finishing the Insert Form . . . 1052
Building a Page to Edit Database Records . . . 1054
Creating and Linking to the Delete Page . . . 1061
Chapter 27: Advanced Dynamic Site Features
. . .1067
Password-Protecting Web Pages . . . 1067
The Users Table . . . 1068
Creating a Registration Form . . . 1069
Creating the Login Page . . . 1071
The Log Out User Behavior. . . 1074
Additional Data Sources . . . 1077
URL Variables . . . 1079
Form Variables . . . 1080
Cookies . . . 1080
Session Variables . . . 1082
Server Variables . . . 1084
Advanced Server Behaviors . . . 1085
Recordset Paging . . . 1086
Show Region Server Behaviors . . . 1087
Tutorial: Authentication . . . 1091
Building a Login Page . . . 1091
Password-Protecting the Administration Pages . . . 1095
Displaying a Portion of a Page to Logged-In Users . . . 1098
Chapter 28: Server-Side XML and XSLT
. . .1101
Understanding Markup Technologies. . . 1102
Creating Dynamic Pages with XSLT and XML . . . 1103
Inserting and Formatting XML . . . 1107
Inserting a Repeat Region . . . 1110
Inserting a Conditional Region . . . 1115
Using Multiple Conditional Regions . . . 1118
Advanced XSLT Tricks . . . 1119
Sorting Data in a Repeat Region . . . 1119
Using XSLT Parameters . . . 1120
Appendix A: Getting Help
. . .1125
Appendix B: Dreamweaver CS5.5, Menu by Menu
. . .1129
The Missing Credits
About the Author
David Sawyer McFarland is president of Sawyer McFarland Media, Inc., a web development and training company in Portland, Oregon. He’s been building websites since 1995, when he designed an online magazine for communication professionals. He’s served as the web-master at the University of California at Berkeley and the Berkeley Multimedia Research Center, and he’s helped build, design, and pro-gram numerous sites for clients that include Macworld.com, among others.
In addition to building websites, David is a writer, trainer, and instructor. He’s taught web design at the UC Berkeley’s Graduate School of Journalism, the Center for Elec-tronic Art, the Academy of Art College, and the Art Institute of Portland. He cur-rently teaches in the Multimedia Program at Portland State University. He’s written articles about web design for Practical Web Design, Macworld, and CreativePro.com.
David is also the author of CSS: The Missing Manual and JavaScript: The Missing Manual.
Credits
About the Creative Team
Peter McKie (editor) graduated with a master’s degree from Boston University’s School of Journalism and lives in New York City, where he researches the history of old houses and, every once in a while, sneaks into abandoned buildings. Email: [email protected].
Adam Zaremba (production editor) has a master’s degree from the Editorial Institute at Boston University. He lives in Chestnut Hill, Mass., and has learned that there are three things never to discuss with people: religion, politics, and the Great Pumpkin.
Ron Strauss (indexer) specializes in the indexing of information technology publi-cations of all kinds. Ron is also an accomplished classical violist and lives in north-ern California with his wife and fellow indexer, Annie, and his miniature pinscher, Kanga. Email: [email protected].
Stacie Arellano (proofreader) is a freelance proofreader/copy editor from Wiscon-sin with a background in marketing and web development. When she isn’t editing, she is working on her fantasy adventure graphic novel at TributeWaters.com. Email: [email protected].
Murray R. Summers (technical reviewer) is an Adobe Certified Dreamweaver De-veloper and Community Professional. He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last six editions of the Dreamweaver Missing Manual, and presented at multiple national conferenc-es. His company, Great Web Sights, has been active in web development since 1998. Murray lives in southern Delaware with his wife Suzanne. One daughter attends Clemson University, and the other is a skilled web developer (carolinawebcreations. biz). His two sons live and work in Virginia Beach.
John C. Bland II (technical reviewer) is the founder of Katapult Media Inc., which focuses on desktop, mobile, and web development. Through Katapult, John works diligently on FastKast (http://fastkast.com), which powers numerous low- to high-profile media players. He is a coauthor of ColdFusion Web Application Framework for ColdFusion 9 and Flex 4 in Action. As an Adobe Community Professional, John continues give back to the community that helped mold him into the developer he is today. John blogs regularly at www.johncblandii.com.
Acknowledgments
Thanks to all of those who have helped with this book (and all of my books over the years): my students, colleagues, and the wonderful people at O’Reilly. But thanks, most of all, to my mom for all the many gifts she gave me. This book is dedicated in loving memory of her.
Credits
The Missing Manual Series
Missing Manuals are witty, superbly written guides to computer products that don’t come with printed manuals (which is just about all of them). Each book features a handcrafted index and cross-references to specific pages (not just chapters).
Recent and upcoming titles include:
Access 2007: The Missing Manual by Matthew MacDonald
Access 2010: The Missing Manual by Matthew MacDonald
Buying a Home: The Missing Manual by Nancy Conner
CSS: The Missing Manual, Second Edition, by David Sawyer McFarland
Creating a Website: The Missing Manual, Third Edition, by Matthew MacDonald
David Pogue’s Digital Photography: The Missing Manual by David Pogue
Droid X: The Missing Manual by Preston Gralla
Dreamweaver CS4: The Missing Manual by David Sawyer McFarland
Dreamweaver CS5: The Missing Manual by David Sawyer McFarland
Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland
Droid 2: The Missing Manual by Preston Gralla
Droid X: The Missing Manual by Preston Gralla
Excel 2007: The Missing Manual by Matthew MacDonald
Excel 2010: The Missing Manual by Matthew MacDonald
Facebook: The Missing Manual, Third Edition, by E.A. Vander Veer
FileMaker Pro 10: The Missing Manual by Susan Prosser and Geoff Coffey
FileMaker Pro 11: The Missing Manual by Susan Prosser and Stuart Gripman
Flash CS4: The Missing Manual by Chris Grover with E.A. Vander Veer
Flash CS5: The Missing Manual by Chris Grover
Flash CS5.5: The Missing Manual by Chris Grover
Google Apps: The Missing Manual by Nancy Conner
Google SketchUp: The Missing Manual by Chris Grover
iMovie ’09 & iDVD: The Missing Manual by David Pogue
iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller
iPad: The Missing Manual by J.D. Biersdorfer
Credits
iPhone: The Missing Manual, Fourth Edition,by David Pogue
iPhone App Development: The Missing Manual by Craig Hockenberry
iPhoto ’09: The Missing Manual by David Pogue and J.D. Biersdorfer
iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider
iPod: The Missing Manual, Ninth Edition, by J.D. Biersdorfer and David Pogue
JavaScript: The Missing Manual by David Sawyer McFarland
Living Green: The Missing Manual by Nancy Conner
Mac OS X: The Missing Manual, Leopard Edition by David Pogue
Mac OS X Snow Leopard: The Missing Manual by David Pogue
Microsoft Project 2007: The Missing Manual by Bonnie Biafore
Microsoft Project 2010: The Missing Manual by Bonnie Biafore
Motorola Xoom: The Missing Manual by Preston Gralla
Netbooks: The Missing Manual by J.D. Biersdorfer
Office 2007: The Missing Manual by Chris Grover, Matthew MacDonald, and E.A. Vander Veer
Office 2010: The Missing Manual by Nancy Connor, Chris Grover, and Matthew MacDonald
Office 2008 for Macintosh: The Missing Manual by Jim Elferdink
Office 2010 for Macintosh: The Missing Manual by Chris Grover
Palm Pre: The Missing Manual by Ed Baig
Personal Investing: The Missing Manual by Bonnie Biafore
Photoshop CS4: The Missing Manual by Lesa Snider
Photoshop CS5: The Missing Manual by Lesa Snider
Photoshop Elements 8 for Mac:The Missing Manual by Barbara Brundage
Photoshop Elements 8 for Windows: The Missing Manual by Barbara Brundage
Photoshop Elements 9: The Missing Manual by Barbara Brundage
PowerPoint 2007: The Missing Manual by E.A. Vander Veer
Premiere Elements 8: The Missing Manual by Chris Grover
QuickBase: The Missing Manual by Nancy Conner
QuickBooks 2010: The Missing Manual by Bonnie Biafore
Credits
Quicken 2009: The Missing Manual by Bonnie Biafore
Switching to the Mac: The Missing Manual, Leopard Edition by David Pogue
Switching to the Mac: The Missing Manual, Snow Leopard Edition by David Pogue
Wikipedia: The Missing Manual by John Broughton
Windows XP Home Edition: The Missing Manual, Second Edition, by David Pogue
Windows XP Pro: The Missing Manual, Second Edition, by David Pogue, Craig Zacker, and Linda Zacker
Windows Vista: The Missing Manual by David Pogue
Windows 7: The Missing Manual by David Pogue
Word 2007: The Missing Manual by Chris Grover
Your Body: The Missing Manual by Matthew MacDonald
Your Brain: The Missing Manual by Matthew MacDonald
Introduction
W
ebsites continue to evolve, growing in scope and complexity every year, with new features popping up all the time to make the Web look and work better. Even people building personal websites use various pro-gramming languages and server technologies to dish up content.Throughout its history, Dreamweaver has managed to keep pace with this changing landscape, and Dreamweaver CS5.5 is no exception. It’s capable of doing more than any previous version of the program. Whether you want to create database-enabled PHP pages, use Cascading Style Sheets (CSS) for cutting-edge design effects, dip into the dynamic world of JavaScript, explore HTML 5 and CSS3, build websites for mobile devices, use content management systems like WordPress or Drupal, or simply stick to straightforward HTML pages, Dreamweaver has just about all the tools you need.
Introduction
What Dreamweaver Is All About
Dreamweaver is a complete website development and management program. It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP.
Dreamweaver’s Cascading Style Sheet support lets you create fast-loading, easily modified pages, while its unique “Spry” technology provides one-click access to complex, interactive layout options like drop-down menus.
Dreamweaver also includes plenty of tools for managing websites once you build them. You can check for broken links, use templates to streamline site-wide page changes, and reorganize your site in a flash with the program’s site management tools.
Note: Get used to the acronym CSS, which you’ll encounter frequently in this book. It stands for Cascad-ing Style Sheets, a set of rules you write that dictate the look of your pages. Dreamweaver includes advanced CSS creation, testing, and editing tools.
Dreamweaver’s also a serious tool for creating dynamic (database-driven) websites. You can now turn your company’s database of products into an easily updated online catalog—or turn that cherished recipe collection into an online culinary resource for an adoring public. You can even create web pages that let you update and delete da-tabase records, while keeping designated areas of your site secure from unauthorized visitors. Best of all, Dreamweaver does the programming for you.
If you’ve never used Dreamweaver before, but you’ve built one or more sites, you won’t have to start over again to use Dreamweaver. It happily opens web pages and websites created in other programs without destroying any of your carefully hand-crafted code.
Why Dreamweaver?
You can find other web design programs on the market—dozens of them, in fact. But Dreamweaver is one of the leaders, thanks to key benefits like these:
• Visual page-building. If you’ve spent any time using a text editor to punch out HTML code for your web pages, you know the tedium involved in adding even a simple photograph. When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type in something like <img src=“images/staff/bigcheese.jpg” width=“100” height=“150” alt=“The Boss”>. Not only is this approach prone to typos, it also separates you from what you want the page to look like.
Introduction
Dreamweaver gives you a close approximation of what your page will look like in a web browser (and Dreamweaver’s Live View feature actually does display the page in a web browser—and right inside Dreamweaver!).
• Complex interactivity, simply. You’ve probably seen web pages where an im-age (on a navigation bar, for example) lights up or changes appearance when you move your mouse over it. Dynamic effects like this—mouse rollovers, alert boxes, and navigational pop-up menus—usually require JavaScript pro-gramming, a language browsers understand. While JavaScript can do amazing things, it requires time and practice to learn.
Dreamweaver includes an easy-to-use JavaScript-based technology called the Spry Framework. With Spry, you can easily create interactive, drop-down menus (Chapter 5), add advanced layout elements like tabbed panels (Chapter 14), and add sophisticated form validation to prevent site visitors from submitting forms without the proper information (Chapter 13).
• Solid code. Every now and then, even in Dreamweaver, you may want to put aside the visual view and look at a page’s underlying HTML. You may want to tweak the code that Dreamweaver produces, for example, or wonder how Dreamweaver codes.
Adobe realizes that many professional web developers do a lot of work “in the trenches,” typing HTML, CSS, and JavaScript code by hand. In Dreamweaver, you can edit its raw HTML to your heart’s content. Switching back and forth between the visual mode—called Design view—and Code view is seamless and, best of all, nondestructive. Unlike many visual web page programs, where mak-ing a change in the visual mode stomps all over the underlymak-ing HTML, Dream-weaver respects hand-typed code and doesn’t try to rewrite it (unless you ask it to).
You can even use “Split view” to see your HTML code side-by-side with a rep-resentation of your final page, and you can switch between Code and Design view. In addition, Dreamweaver can open many other types of files commonly used on websites, such as external JavaScript files (.js files), so you don’t have to switch to another program to work on them. Dreamweaver’s “related files” toolbar lists all JavaScript, CSS, or server-side files the current document uses. For hand-coders, this feature means that editing a page’s CSS or JavaScript is just a click away (instead of a time-draining File➝Open hunt for that danged file). Chapter 12 has the full scoop on how Dreamweaver handles writing and editing code.
• Site management tools. Rarely will you build just a single web page. More of-ten, you’ll create and edit pages that work together to form part of a website. Or you may be building an entire website from scratch.
Introduction
moving your site onto a web server. Part 4 of this book looks at how Dream-weaver helps you build and maintain websites.
• Database-driven Websites. Data makes the world go round. Whether you’re a human-resource records manager or a high school teacher, you probably keep track of a lot of information. Today, companies and individuals store reams of information in database systems like MySQL, Microsoft Access, and Oracle 10g. Dreamweaver can help you bring that information to life, from retrieving it— such as listing the latest items in your company’s product catalog—to updating and editing it online, without having to learn a lot of programming. Part 6 of this book offers a gentle introduction to building dynamic websites.
UP TO SPEED
Hand Coding vs. WYSIWYG Editors
Creating web pages in a text editor was long considered the best way to build websites. The precise control that hand-written code gave you over HTML was (and often still is) seen as the only way to assure quality web pages.
Pro site developers championed hand-coding because many visual page-building programs add unnecessary code—code that affects how a page appears and how quickly it downloads over the Internet.
But hand-coding is time-consuming and error-prone. One typo can render a web page useless.
Fortunately, Dreamweaver creates solid code even in a visu-al environment. Since its earliest incarnation, Dreamweaver has prided itself on its ability to produce clean HTML and its tolerance for code created by other programs—including text editors. In fact, Dreamweaver includes a powerful built-in text-editbuilt-ing mode that lets you freely manipulate the HTML of a page—or any other code, including JavaScript, Visual Basic, XML, PHP, and ColdFusion Markup Language.
But the real story is that the code Dreamweaver produces when you work in Design mode is as solid and well-written as hand-hewn code. Knowing this, feel free to take
advantage of the increased productivity that Dreamweav-er’s visual-editing mode brings to your day-to-day work with its one-click objects, instant JavaScript, and simplified layout tools. Doing so won’t compromise your code, and will certainly let you finish your next website in record time.
Honestly, no web design program is really WYSIWYG (“what you see is what you get”). Because every brows-er intbrows-erprets the HTML language slightly diffbrows-erently, web design is more like WYSIRWYGOAGD: “what you see is roughly what you’ll get, on a good day.” That’s why Dream-weaver’s Live View and integration with Adobe Browserlab (a browser-testing service) can help you make sure your pages really look the way you want them to.
Finally, if you have experience hand-coding HTML and CSS, you’ll be pleasantly surprised by Dreamweaver’s powerful text-editing capabilities. In fact, even though Dreamweaver has a reputation as a visual web page editor, it’s also one of the best text-editing programs on the market. Many im-provements made in Dreamweaver CS5.5 were designed specifically for people who spend time looking at raw HTML, CSS, JavaScript and PHP code.
Introduction
Suppose, for example, that you hardly ever use any of the commands in the Edit menu. By editing one text file in the Dreamweaver Configuration folder, you can get rid of unwanted menu items—or even add commands of your own cre-ation. This incredible flexibility lets you customize Dreamweaver to fit the way you work, and even add features that Adobe’s programmers never imagined. Best of all, the Adobe Exchange website includes hundreds of free and commer-cial extensions for Dreamweaver. See Chapter 23 for details.
What’s New in Dreamweaver CS5.5
If you’ve never used Dreamweaver before, see Chapter 1 for the grand tour. If you’re upgrading from Dreamweaver CS3 or some other version, you’ll find that Dream-weaver CS5.5 offers a host of new features:
• HTML5 is touted by everyone from AT&T to Google to Newsweek as the next big thing (described in more detail on page 10). It’s the first major change to HTML in years and promises to make building powerful web applications eas-ier. Dreamweaver CS5.5 provides basic support for HTML5. That means it un-derstands the new HTML5 tags, and provides code-hinting support as you type those tags in Code View (code-hinting lets you type a few letters of a tag and then select the tag you’re after from a pop-up menu—in other words, less typ-ing, fewer typos, faster web page building.) Unfortunately, code-hinting is only helpful if you type HTML by hand. If you prefer using Design view and clicking buttons on a user-friendly palette of HTML options, you’ll have to wait for the next version of Dreamweaver.
• CSS3 is, like HTML5, a new (and evolving) standard for web designers. It promises many new formatting controls to make HTML look beautiful, includ-ing drop shadows for text, rounded corners on boxes, background gradients, borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS5.5 adds code-hinting for CSS3, and adds many CSS3 properties to the CSS Styles panel.
• Mobile Web Design. iPhones, iPads, Android, WebOS, tablets, and other mo-bile devices are popping up like weeds. Web developers need to know not only what their site looks like in the many different browsers, but also customize their sites to work on mobile browsers. Dreamweaver CS5.5 adds several tools to help. The multiscreen preview feature lets you preview a page at different resolutions to simulate the small screen of a handheld device, as well as the larger screen of a desktop computer. In addition, Dreamweaver CS5.5’s new CSS3 “media query” support means that you can easily craft different versions of a site’s CSS styles to match the display capabilities of different devices. For example, you can apply one set of styles when a visitor uses a browser that has at least 960 pixels of space to display a page, and a different set of styles when there’s only 320 pixels of space (such as on a mobile phone).
Introduction
• W3C Validator. Dreamweaver CS4 and earlier had a built-in HTML validator to make sure that your page’s HTML was sound. Unfortunately, it didn’t work that well, and Adobe removed it in Dreamweaver CS5. Fortunately, they decid-ed to bring back an HTML validator in Dreamweaver CS5.5, and this time they used the esteemed validator supplied by the World Wide Web Consortium (the W3C), the group responsible for creating HTML. Now you can check a page’s HTML with Adobe’s online validator without leaving Dreamweaver. Now you can be sure that your HTML is up to code.
• jQuery Code Hinting. jQuery is a JavaScript “library”—basically just a bunch of JavaScript code—that greatly simplifies writing JavaScript programs that work across all major web browsers. jQuery is the Web’s most popular JavaScript li-brary, used on about a quarter of all websites. To make JavaScript programming with jQuery easier, Dreamweaver CS5.5 adds code-hinting for jQuery to save your tired fingers from excessive typing.
HTML, XHTML, CSS, and JavaScript 101
Underneath the hood of any web page—whether it’s your uncle’s “Check out this summer’s fishin’” page or the front door of a billion-dollar online retailer—is noth-ing more than line after line of ordinary typed text. You embed simple commands, called tags, within this text. Web browsers know how to interpret these tags to prop-erly display pages.
When you create a page with tags in them, the document becomes known as an HTML page (for Hypertext Markup Language). HTML is still at the heart of most of the Web.
The HTML code that creates a web page can be as simple as this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd">
<html> <head>
<title>Hey, I am the title of this Web page.</title> </head>
<body>
<p>Hey, I am some body text on this Web page.</p> </body>
</html>
While it may not be exciting, this short bit of HTML code is all you need to know to make an actual web page.
Document Types
The first line of code above:Introduction
is called a “doctype” and it simply identifies what flavor of HTML you used to write the page. There are two common doctypes—HTML 4.01 and XHTML 1.0—and each has two styles: strict and transitional. Dreamweaver can create any of these types of HTML documents—you simply tell it which flavor you want when you cre-ate a new web page (see page 43) and Dreamweaver handles the rest.
Dreamweaver even lets you use the latest, greatest, and simplest doctype, from HTML5. It replaces the extraneous code of earlier doctypes with much simpler and straightforward code:
<!DOCTYPE HTML>
Yep, that’s it. HTML5 is intended to be much easier in many ways, and Dreamweaver CS5.5 provides support for this not-yet-approved, new version of HTML.
But no matter which doctype you’re interested in, it’s important that you always use one, because without it, different browsers display CSS differently, and your pages will look different depending on your visitor’s browser. Today’s browsers support parts of the cutting-edge HTML5 doctype.
Fortunately, you won’t have to worry about doctype compatibility as long as you cre-ate your pages in Dreamweaver.
Of Tags and Properties
In the preceding example—and, indeed, in the HTML code of any web page you examine—you’ll notice that most commands appear in pairs surrounding a block of text or other commands.
These bracketed commands, like the <p> command that denotes the beginning of a paragraph, constitute the “markup” part of HTML (hypertext markup language) and are called tags. Sandwiched between brackets, tags are simply instructions that tell a web browser how to display a page.
The starting tag of each pair tells the browser where the instruction begins, and the closing tag tells it where the instruction ends. A closing tag always includes a for-ward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph command above is </p>.
Fortunately, Dreamweaver can generate all these tags automatically. You don’t have to memorize or even type them in (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual design into underlying code like this:
Introduction
If you were to think of a web page as a tree, the <html> tag would be its trunk. Springing from the trunk are two branches that represent the two main parts of any web page: the head of the page and the body.
• The head of a web page contains the title of the page (“Izzie’s Mail-Order Pen-cils”). It may also include other, invisible information (such as search keywords) that browsers and search engines use. You surround the head section with opening and closing <head> tags.
In addition, the head section can include information that browsers use to for-mat the page’s HTML and to add interactivity. You can store CSS styles and Ja-vaScript code in the head, for example, or you can embed links to external CSS and JavaScript files there. In fact, the interactivity you’ll see in Dreamweaver’s Spry widgets (Chapter 14) work with the help of JavaScript code stored in sepa-rate files on a server; the link to these files resides in the page’s head section. The body of a web page, identified by its beginning and ending <body> tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on. When using Dreamweaver’s Design View, the blank white portion of the document window represents the body area. It resembles the blank window of a word-processing program.
Most of your work with Dreamweaver involves inserting and formatting text, pic-tures, and other objects in the body portion of a document. Many tags commonly used in web pages appear within the <body> tag. Here are a few:
• You can tell a web browser where a paragraph of text begins with a <p> (open-ing paragraph) tag, and where it ends with a </p> (clos(open-ing paragraph) tag. • The <strong> tag emphasizes text. The text between an opening and closing
<strong> tag shows up as boldface type. The HTML snippet <strong>Warning!</ strong> would tell a web browser to display the word “Warning!” in bold type on the screen.
• The <a> tag, or anchor tag, creates a link (hyperlink) in a web page. A link, of course, can lead anywhere on the Web. How do you tell the browser where the link should point? Simply give address instructions to the browser inside the <a> tags. For instance, you might type <a href=“http://www.missingmanuals. com”>Click here!</a>.
The browser knows that when your visitor clicks the words “Click here!”, it should go to the Missing Manuals website. The href part of the tag is called, in Dreamweaver, a property (you may also hear the term attribute), and the URL (the Uniform Resource Locator, or web address) is the value of that property. In this example, http://www.missingmanuals.com is the value of the href property.
Introduction
Note: For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual. For a primer that’s geared to readers who want to master CSS, pick up a copy of CSS: The Missing Manual. And if you want to add interactivity to your web pages (beyond the cool, ready-to-use features that Dream-weaver offers), you might be interested in JavaScript: The Missing Manual. End of advertisements: now back to your regularly scheduled book.
XHTML, Too
Like any technology, HTML has evolved over time. Although standard HTML has served its purpose well, it’s always been a somewhat sloppy language. Among other things, it allows uppercase, lowercase, and mixed-case letters in tags (<body> and <BODY> are both correct, for example) and permits unclosed tags (so that you can use a <p> tag without a closing </p> tag to create a paragraph). While this flexibility may make page-writing easier, it also makes life more difficult for web browsers, smart phones, and other technologies that must interact with data on the Web. Ad-ditionally, HTML doesn’t work with one of the hottest Internet languages: XML, or Extensible Markup Language (see “Storing Data in an XML File” for a quick intro to XML).
To keep pace with the times, an improved version of HTML, called XHTML, was introduced back in 2000 and you’ll find it used frequently on many sites (in fact, XHTML is just an “XML-ified” version of HTML). Dreamweaver CS5.5 can cre-ate and work with XHTML files as well as plain HTML. If you understand only HTML, don’t worry—XHTML isn’t a revolutionary new language that takes years to learn. It’s basically HTML with somewhat stricter guidelines. For example, here’s the HTML from “HTML, XHTML, CSS, and JavaScript 101” on page 6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd">
<html> <head>
<title>Hey, I am the title of this Web page.</title> </head>
<body>
<p>Hey, I am some body text on this Web page.</p> </body>
</html>
Written in XHTML, that code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hey, I am the title of this Web page.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head> <body>
Introduction
Notice that everything below the <head> is nearly the same as the HTML page. The doctype that begins the page, however, is different from that of the earlier example. It looks basically the same, but, in this case, it merely says that the page uses a par-ticular brand of HTML called XHTML, and more specifically a type of XHTML called Transitional 1.0. (Don’t worry—Dreamweaver automatically writes all this code when you create a new XHTML page.)
As you can see, the XHTML code used to make the page is much like the HTML code. To make an XHTML file comply with XML, however, you have to keep a few strict rules in mind:
• Begin the page with a document-type declaration and a namespace. That’s the first few lines in the code above. They simply state the type of document you’re writing and point to files on the Web that contain definitions for this type of file. A doctype isn’t actually required for regular HTML, but it is for XHTML. However, a document-type declaration (or DTD) is important for both HTML and XHTML since it affects how web browsers display a page—stick with any of the DTDs Dreamweaver writes and you’ll be OK.
• Tags and tag attributes must be lowercase. Unlike in HTML, typing the tag <BODY> in an XHTML file is incorrect. It must be lowercase, like this: <body>. • Quotation marks are required for tag attributes. For example, a link writ-ten like this: <a href=http://www.missingmanuals.com> is valid in HTML, but doesn’t work in XHTML. You have to enclose the value of the href property in quotation marks: <a href=“http://www.missingmanuals.com”>.
• All tags (even empty ones) must be closed. To create a paragraph in XHTML, for example, you must begin with <p> and end with </p>.
Of course, as with everything in life, there are exceptions. Some tags don’t come in pairs. They’re called self-closing tags, and the line break tag is one example. To indicate a self-closing tag, you must include a backslash at the end of the tag, like this: <br />.
If all this seems a bit confusing, don’t worry. Dreamweaver automatically follows all these strict XHTML rules, so creating an XHTML page in Design view won’t feel one bit different from creating an old-style HTML page. (For more information on cre-ating an XHTML page in Dreamweaver, see “Crecre-ating a Web Page” on page 43.) In fact, with just a couple of exceptions, it doesn’t really matter which version of HTML or XHTML you use—pick one and let Dreamweaver take care of the rest.
And HTML5, As Well
Introduction
working group in favor of the new version of HTML, called HTML5—actually a move away from XML and back to plain old HTML, albeit an enhanced version of the language. Since all browser manufacturers support HTML5 (and since some browsers already support parts of the standard), HTML5 is the next big thing. Even mainstream news outlets like Time, Newsweek, and CNN routinely drop “HTML5” into their technology reporting.
HTML5 isn’t some radically new technology. In fact, unlike XHTML, which was intended to foster a new way to build web pages, HTML5 is about making sure the web continues to work as it always has. Most of the basics of HTML are still in place; HTML5 adds a few new elements, meant to support the way web designers currently build websites. In HTML5, the <header> tag, for example, can contain the content you’d usually find at the top of a page, such as a logo and site-wide navigation links; the new <nav> tag encloses the set of links used to navigate a site; and the <footer> tag houses the stuff you usually put at the bottom of a page, like legal notices, email contacts, and so on.
In addition, HTML5 adds new tags that let you insert video and audio into a page, and new form tags that add sophisticated form elements, like sliders and pop-up date pickers, as well as built-in browser support for form validation to make sure visitors correctly fill out your forms. Unfortunately, browser support for these new features isn’t consistent and it’s difficult to use the new tags without some pretty elaborate workarounds.
But new tags are just one small part of the HTML5 story. HTML5 originally started life as a product of the Web Hypertext Application Technology Group (WHATWG), which wanted to create a version of HTML that provided the tools needed to build powerful, browser-based applications like Gmail. So, much of HTML5 is devoted to powerful (and complicated) technologies like Canvas (for drawing pictures and dia-grams on a web page), data storage (for storing information like game scores, prefer-ences, notes, and so on on a visitor’s computer), drag and drop functionality, “web workers” for making JavaScript programs run faster and more efficiently, and “web sockets” for streaming data from a web server. All these technologies are promising, but browser support for them varies. In addition, Dreamweaver doesn’t provide any easy-to-use tools to tap into these complicated technologies, so you’re a few years off from being able to easily include most HTML5 functionality on your sites.
Add Style with Cascading Style Sheets
Introduction
From now on, think of HTML as merely the scaffolding you use to organize a page. It helps identify and structure page elements. Tags like <h1>, <h2>, and <title> denote headlines and assign them relative importance: a Heading 1 is more important than a Heading 2, for example (and can affect how a search engine like Google adds a page to its search listings). The <p> tag indicates a basic paragraph of information. Other tags provide further structural clues: for example, a <ul> tag identifies a bulleted list (to make a list of recipe ingredients more intelligible, for example).
Cascading Style Sheets, on the other hand, add design flair to that highly structured content, making it more beautiful and easier to read. Take a look at the CSS Zen Gar-den site, for example (www.csszengarden.com). Each of the striking, very different websites profiled there use the same underlying HTML. The only difference among them—and the sole reason they look so different in style and design—is that each uses a different style sheet. Essentially, a CSS style is just a rule that tells a browser how to display a particular element on a page—to make an <h1> tag appear orange, 36 pixels tall, and in the Verdana font, for example.
But CSS is more powerful than that. You use it to add borders, change margins, and even control the exact placement of an element on a page.
To be a successful web designer, you need to get to know Cascading Style Sheets. You’ll learn more about this exciting technology throughout this book.
Add Interactivity with JavaScript
A normal web page—just regular HTML and CSS—isn’t very responsive: about the only interaction visitor have with the page is clicking a link to load a new page. JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects. It can also make a web page more useful, by supplying immediate feedback to visitors. For example, a JavaScript-powered shopping cart can instantly display a total cost, with tax and shipping, the moment a visitor selects a product to buy; or JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing information.
JavaScript’s main selling point is immediacy. It lets web pages respond instantly to your visitors’ actions: clicking a link, filling out a form, or merely moving the mouse around the screen. JavaScript doesn’t suffer from the frustrating delay associated with “server-side” programming languages like PHP, which rely on communication between a web browser and a remote web server—in other words, JavaScript doesn’t rely on constantly loading and reloading pages. It lets you create pages that look like and respond with the immediacy of a desktop program.
Introduction
The JavaScript programs you create can range from the really simple (such as pop-ping up a new browser window with a web page in it) to full-blown “web applica-tions,” such as Google Docs (http://docs.google.com), which let you edit documents, build spreadsheets, and create presentations using your web browser—all as though the program were running directly on your computer.
JavaScript programming can be difficult, but Dreamweaver has plenty of tools that let you add sophisticated interactivity to your sites—from animations to drop-down navigation menus—with just a few clicks of your mouse.
The Very Basics
You’ll find very little jargon or nerd terminology in this book. You will, however, encounter a few terms and concepts you’ll come across frequently in your comput-ing life:
• Clicking. This book gives you three kinds of instructions that require you to use your computer’s mouse or trackpad. To click means to point the arrow cursor at something on the screen and then—without moving the cursor—press and release the clicker button on the mouse (or laptop trackpad). To double-click, of course, means to click twice in rapid succession, again without moving the cursor. And to drag means to move the cursor while holding down the button. • Keyboard shortcuts. Every time you take your hand off the keyboard to move
the mouse, you lose time and potentially disrupt your creative flow. That’s why many experienced computer fans use keystroke combinations instead of menu commands wherever possible. Ctrl+B (-B for Mac folks), for example, gives you boldface type in Dreamweaver documents (and most other programs). When you see a shortcut like Ctrl+S (-S), it’s telling you to hold down the Ctrl or key and, while holding it down, type the letter S, and then release both keys. (This command, by the way, saves changes to the current document.) • Choice is good. Dreamweaver frequently gives you several ways to trigger a
particular command—by selecting a menu command or by clicking a toolbar button or by pressing a key combination, for example. Some people prefer the speed of keyboard shortcuts; others like the satisfaction of a visual command available in menus or toolbars. This book lists all the alternatives; use whichever you find most convenient.
About This Book
Introduction
But even if you have no problem reading a help screen in one window as you work in another, something’s still missing. At times, the terse electronic help screens assume you already understand the discussion at hand, and hurriedly skip over important topics that require an in-depth presentation. In addition, you don’t always get an objective evaluation of the program’s features. Engineers often add technically so-phisticated capabilities to a program because they can, not because you need them. You shouldn’t have to waste your time learning tools that don’t help you get your work done.
The purpose of this book, then, is to serve as the manual that should have been in the box. You’ll find step-by-step instructions for every Dreamweaver feature, includ-ing those you may not even have understood, let alone mastered, such as Libraries, Design view, Behaviors, and Dreamweaver’s Spry tools. In addition, you’ll find hon-est evaluations of each tool to help you determine which ones are useful to you, as well as how and when to use them.
Note: This book periodically recommends other books, covering topics that are too specialized or tangential for a manual on Dreamweaver. Careful readers may notice that not every one of these titles is published by Missing Manual parent O’Reilly Media. While we’re happy to mention other Missing Manuals and books in the O’Reilly family, if there’s a great book out there that doesn’t happen to be published by O’Reilly, we’ll let you know about it.
Dreamweaver CS5.5: The Missing Manual is designed to accommodate readers at every technical level. The primary discussions are written for advanced-beginner or intermediate computer users. But if you’re new to building web pages, special side-bar articles called “Up To Speed” provide the introductory information you need to understand the topic at hand. If you’re a web veteran, on the other hand, keep your eye out for similar boxes called “Power Users’ Clinic.” They offer more technical tips, tricks, and shortcuts for the experienced computer fan.
About
➝
These
➝
Arrows
Introduction
Figure I-1: When you read “Choose Insert➝Layout Objects➝Div Tag” in a Missing Manual, that means, “Click the Insert menu to open it. Then click Layout Objects in that menu and choose Div Tag in the resulting menu.”
Macintosh and Windows
Dreamweaver CS5.5 works almost precisely the same way on the Macintosh as it does in Windows. Every button in every dialog box is exactly the same; the software response to every command is identical. In this book, the illustrations have been given even-handed treatment, alternating between the various operating systems where Dreamweaver feels at home (Windows XP, Windows Vista, and Mac OS X).
One of the biggest differences between Mac and Windows software is the keystrokes, because the Ctrl key in Windows is the equivalent of the Macintosh key. And the key labeled Alt on a PC (and on non-U.S. Macs) is the equivalent of the Option key on American Mac keyboards.
Whenever this book refers to a key combination, therefore, you’ll see the Windows keystrokes listed first (with + symbols, as is customary in Windows documentation); the Macintosh keystrokes follow in parentheses (with - symbols, in time-honored Mac fashion). In other words, you might read, “The keyboard shortcut for saving a file is Ctrl+S (-S).”
About the Outline
Dreamweaver CS5.5: The Missing Manual is divided into six parts, each with several chapters:
