Dreamweaver CS6: The Missing Manual

Dreamweaver CS6 The book that should have been in the box®

David Sawyer McFarland

Beijing | Cambridge | Farnham | Köln | Sebastopol | Tokyo

Dreamweaver CS6: The Missing Manual by David Sawyer McFarland Copyright © 2012 Sawyer McFarland Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly 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]. July 2012:

First Edition.

Revision History for the 1st Edition: 2012-07-02

First release

See http://shop.oreilly.com/product/0636920022732.do for release details.

The Missing Manual is a registered trademark of O’Reilly Media, Inc. The Missing Manual logo, and “The book that should have been in the box” 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 is aware of a trademark claim, the designations are capitalized. While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it.

ISBN-13: 978-1-449-31617-4 [M]

Contents The Missing Credits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Part One:

Chapter 1:

Building a Web Page Dreamweaver CS6 Guided Tour. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 The Dreamweaver CS6 Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Setting Up a Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Creating a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Managing Files and Folders with the Files Panel. . . . . . . . . . . . . . . . . . . . . . . 49 The Dreamweaver Test Drive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53



Chapter 2:

Adding and Formatting Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Adding Text in Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Adding Special Characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Selecting Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 HTML Formatting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Paragraph Formatting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Creating and Formatting Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Text Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Spell Checking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116



Chapter 3:

Introducing Cascading Style Sheets. . . . . . . . . . . . . . . . . . . . . . . 121 Cascading Style Sheet Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Creating Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Using Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Manipulating Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Text Formatting with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Cascading Style Sheets Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168



Chapter 4: Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

185

Understanding Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Adding a Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Adding an Email Link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Linking Within a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

iii

Modifying a Link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Creating a Navigation Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Link Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

Chapter 5: Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

241

Adding Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Inserting an Image from Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Modifying an Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Controlling Images with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Editing Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Image Maps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Rollover Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Tutorial: Inserting and Formatting Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . 278

Chapter 6: Tables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

289

Table Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Inserting a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Selecting Parts of a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Expanded Table Mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Formatting Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Modifying Cell and Row Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Adding and Removing Cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 Merging and Splitting Cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Tables Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Chapter 7:

HTML: Under the Hood. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 Controlling How Dreamweaver Handles HTML. . . . . . . . . . . . . . . . . . . . . . . . . 331 Code View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Live Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 The Tag Inspector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 Comparing Versions of a Web Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Reference Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Inserting JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

Part Two:

Chapter 8:

Building a Better Web Page Advanced CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Compound Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Fast Style Editing with the Properties Pane. . . . . . . . . . . . . . . . . . . . . . . . . . 382 Moving and Managing Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 More About CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

iv

Contents

Using the Code Navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Styling for Print. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 CSS Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Using CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Advanced CSS Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Chapter 9:

Page Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Types of Web Page Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Float Layout Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Understanding the Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 Dreamweaver’s CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Modifying Dreamweaver’s CSS Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Absolute Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Adding an AP Element to Your Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Modifying AP Element Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 CSS Layout Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Chapter 10:

Troubleshooting CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Analyzing CSS with Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Overcoming Common CSS Problems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498



Chapter 11:

Designing Websites for Mobile Devices. . . . . . . . . . . . . . . . . . . 505 Previewing Pages at Different Resolutions. . . . . . . . . . . . . . . . . . . . . . . . . . . 507 Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510 Strategies for Using Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 Fluid Grid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 jQuery Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537

Part Three:

Bringing Your Pages to Life

Chapter 12: Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

563

Form Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 Adding Form Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Validating Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588 Forms Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612 Chapter 13:

Adding Interactivity with JavaScript. . . . . . . . . . . . . . . . . . . . . . 637 Introducing Adobe’s Spry Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 Tabbed Panels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639 Accordions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 Collapsible Panels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651 Spry Tooltips. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656 Spry Data Sets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661

Contents

v

Dreamweaver Behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 679 Applying Dreamweaver Behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 (Some of) the Actions, One by One. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 The Widget Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699 Chapter 14:

Add Flash and Other Multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . 709 Flash: An Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709 Automate the Flash Download. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718 Add Flash Videos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720 Other Video Options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 724

Part Four:

Managing a Website

Chapter 15:

Introducing Site Management. . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 The Structure of a Website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Setting Up a Site (in Depth). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Managing Dreamweaver Sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740 Site Assets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749

Chapter 16:

Testing Your Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Site Launch Checklist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Previewing Web Pages in BrowserLab. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 Find and Fix Broken Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 Validating Web Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 773 Cleaning Up HTML (and XHTML). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776 Site Reporting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779 Download Statistics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783

Chapter 17:

Moving Your Site to the Internet. . . . . . . . . . . . . . . . . . . . . . . . . . 785 Adding a Remote Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785 Transferring Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 Check In and Check Out. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807 Synchronizing Site Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813 Communicating with Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 817

Part Five:

Dreamweaver CS6 Power

Chapter 18:

Snippets and Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 829 Snippets Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 829 Using Snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 831 Creating Snippets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 832 Built-In Snippets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835 Library Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835

vi

Contents

Creating and Using Library Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 838 Editing Library Items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 840 Snippets and Library Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 842 Chapter 19: Templates.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

851

Template Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851 Creating a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854 Defining Editable Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 857 Building Pages Based on a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 859 Updating a Template. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864 Using Repeating Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866 Using Editable Tag Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 872 Using Optional Regions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876 Exporting a Template-Based Site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 882 Template Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 883 Chapter 20:

Find and Replace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895 Find and Replace Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Basic Text and HTML Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Advanced Text Searches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Advanced Tag Searches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Powerful Example: Adding Alt Text Fast. . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 21:

896 896 902 906 908

Customizing Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911 Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911 Dreamweaver Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916

Chapter 22:

Working with Server-Side Programming.. . . . . . . . . . . . . . . . . 925 Pieces of the Puzzle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 927 Dynamic Websites: The Setup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 929 Creating a Dynamic Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936 Using Server-Side Includes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 937 Working with Related PHP Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 939 PHP Code Hints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 942

Appendix A:

Getting Help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945 Getting Help from Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945 Getting Help from Adobe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946

Appendix B:

Dreamweaver CS6, Menu by Menu. . . . . . . . . . . . . . . . . . . . . . . . 949 File Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 949 Edit Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952 View Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 955 Insert Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 959 Modify Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 961 Contents

vii

Format Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 963 Commands Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 964 Site Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966 Window Menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 968 Help Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 973

viii

Contents

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 his first site, an online magazine for communication professionals. He’s served as the Webmaster at the University of California at Berkeley and the Berkeley Multimedia Research Center, and he has helped build, design, and program numerous websites for clients including 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 Graduate School of Journalism, the Center for Electronic Art, the Academy of Art College, and the Art Institute of Portland. He currently 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 & jQuery: The Missing Manual. He welcomes feedback about this book by email at [email protected]. (If you need technical help, however, please refer to the sources listed in Appendix A.)

About the Creative Team Peter McKie (editor) has 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]. Holly Bauer (production editor) lives in Ye Olde Cambridge, MA, where she is an avid home cook, prolific DIYer, and mid-century modern furniture design enthusiast. Email: [email protected]. Nancy Wolfe Kotary (compositor) is a copyeditor, typesetter, and former O’Reilly production manager with more years of experience in publishing than she cares to count. She is from New Hampshire and lives in Massachusetts but does not worship squirrels or drive like a maniac. Marcia Simmons (proofreader) is a writer and editor living in the San Francisco Bay Area. She’s author of the book DIY Cocktails. Blog: www.marciaisms.com. Julie Hawks (indexer) is an indexer for the Missing Manual series. She is currently pursuing a masters degree in Religious Studies while discovering the joys of warm winters in the Carolinas. Email: [email protected].

The Missing Credits

ix

Murray R. Summers (technical reviewer) is an Adobe Certified Dreamweaver Developer and Community Professional. He has co-authored and contributed chapters to several books on Dreamweaver, been the technical editor for the last seven editions of the Dreamweaver Missing Manual, and presented at multiple national conferences. 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. Danilo Celic, Jr. (technical reviewer) has been using Dreamweaver since version 1.2. In the years since, he has contributed to the Dreamweaver community in a variety of capacities. He has been a co-author, technical editor, and technical reviewer for a shelf full of Dreamweaver- and Web-related books. He loves sharing what he has learned over the years of the inner workings of Dreamweaver and various web technologies. Danilo lives in the suburbs of Chicago with his wife, Melissa, who patiently forgives the late hours he puts in in front of a glowing screen. Email: danilo@ shimmerphase.com.

Acknowledgments Thanks to all 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. Thanks to Murray Summers and Danilo Celic for their careful scrutiny and erudite corrections to my writing; thanks also to Peter McKie, for making my writing more energetic and clearer. ——Dave McFarland

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. Recent and upcoming titles include: • Access 2010: The Missing Manual by Matthew MacDonald • Abobe Edge Preview 5: The Missing Manual by Chris Grover • 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 • Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland • Droid 2: The Missing Manual by Preston Gralla • Droid X2: The Missing Manual by Preston Gralla x

The Missing Credits

• Excel 2010: The Missing Manual by Matthew MacDonald • Facebook: The Missing Manual, Third Edition by E.A. Vander Veer • FileMaker Pro 11: The Missing Manual by Susan Prosser and Stuart Gripman • Flash CS6: The Missing Manual by Chris Grover • Galaxy S II: The Missing Manual by Preston Gralla • Galaxy Tab: The Missing Manual by Preston Gralla • Google+: The Missing Manual by Kevin Purdy • Google Apps: The Missing Manual by Nancy Conner • Google SketchUp: The Missing Manual by Chris Grover • HTML5: The Missing Manual by Matthew MacDonald • iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller • iPad: The Missing Manual, Fourth Edition by J.D. Biersdorfer • iPhone: The Missing Manual, Fifth Edition by David Pogue • iPhone App Development: The Missing Manual by Craig Hockenberry • iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider • iPod: The Missing Manual, Tenth Edition by J.D. Biersdorfer and David Pogue • JavaScript & jQuery: The Missing Manual, Second Edition by David Sawyer McFarland • Kindle Fire: The Missing Manual by Peter Meyers • Living Green: The Missing Manual by Nancy Conner • Mac OS X Lion: The Missing Manual by David Pogue • Mac OS X Snow Leopard: The Missing Manual by David Pogue • 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 • NOOK Tablet: The Missing Manual by Preston Gralla • Office 2010: The Missing Manual by Nancy Conner, Chris Grover, and Matthew MacDonald • Office 2011 for Macintosh: The Missing Manual by Chris Grover • Palm Pre: The Missing Manual by Ed Baig • Personal Investing: The Missing Manual by Bonnie Biafore

The Missing Credits

xi

• Photoshop CS6: The Missing Manual by Lesa Snider • Photoshop Elements 10: The Missing Manual by Barbara Brundage • PHP & MySQL: The Missing Manual by Brett McLaughlin • 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 2012: The Missing Manual by Bonnie Biafore • Quicken 2009: The Missing Manual by Bonnie Biafore • Switching to the Mac: The Missing Manual, Lion Edition by David Pogue • Wikipedia: The Missing Manual by John Broughton • 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 • Your Money: The Missing Manual by J.D. Roth For a full list of all Missing Manuals in print, go to www.missingmanuals.com/library​ .html.

xii

The Missing Credits

Preface

W

ebsites evolve every year, growing in scope and complexity, with new features popping up to make sites look and work ever better. Even people building personal sites use various programming languages and server technologies to dish up content. Throughout its history, Dreamweaver has managed to keep pace with the changing web-development landscape, and Dreamweaver CS6 is no exception; it’s capable of doing more than any previous version of the program. Whether you want to use Cascading Style Sheets (CSS) for cutting-edge design, dip into the world of JavaScript-powered dynamic pages, explore HTML5 and CSS3, build websites for mobile devices, use content management systems like WordPress or Drupal, or simply stick to straightforward HTML, Dreamweaver has just about all the tools you need.

Any enterprising designer can create web pages, Cascading Style Sheets, and even JavaScript programs with a simple text editor. In fact, Dreamweaver CS6’s powerful text editor lets you handcraft text files to create basic or complex database-driven pages. However, hand-typing HTML, CSS, and JavaScript is not only a recipe for carpal tunnel syndrome, it’s also a slow and typo-prone way to build web pages. Dreamweaver provides buttons, dialog boxes, and panels that let you add HTML, CSS, and JavaScript quickly, with fewer keystrokes. A simple button lets you insert the complex HTML required to build an HTML table in a matter of seconds, for example. And Dreamweaver is flexible enough to let you both hand-code and use its time-saving HTML shortcuts. The choice is yours.

1

What Dreamweaver Is All About

What Dreamweaver Is All About Dreamweaver is a complete website development and site management program. It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP. Its CSS 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  If you’re not already familiar with the acronym CSS, it stands for Cascading Style Sheets—a set of rules you write that dictate the look of your pages. Dreamweaver includes advanced tools to create, test, and edit CSS in your pages.

If you’ve built one or more sites without Dreamweaver, you don’t have to start over again. The program happily opens web pages and websites created in other programs without destroying any of your carefully handcrafted 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 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 . Not only is this approach prone to typos, it also separates you from what you want the page to look like. Dreamweaver, on the other hand, gives you a several ways to stay in touch with your page’s visual design. If your interest is in design and not HTML, you can work in the program’s Design view. Drag an image to your budding web page there, and Dreamweaver displays the picture on the page. Just as a word processor displays documents as they’ll look when you print them out, so Dreamweaver gives you a close approximation of what your page will look like in a web browser. Another development approach web designers commonly use is keeping a page’s code and its browser-rendered look side-by-side. Dreamweaver’s Split view handles that, giving you direct access to the HTML of a page on one half of the screen and to its visual look in the other half.

2

Dreamweaver CS6: The Missing Manual

Finally, because Dreamweaver’s Design view is only an approximation of what a page looks like in a browser, the program offers “Live view”—a real-time look at your page in a web browser built right into Dreamweaver. That way, you can see what a page looks like and how it behaves without leaving Dreamweaver!

Why Dreamweaver?

• Complex interactivity, simply. You’ve probably seen web pages where an image (on a navigation bar, for example) lights up or changes appearance when you mouse over it. Dynamic effects like this—mouse rollovers, alert boxes, and drop-down menus—usually require JavaScript programming, 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 4), add advanced layout elements like tabbed panels (Chapter 13), and include sophisticated validation to prevent site visitors from submitting incomplete forms (Chapter 12). • 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 you may 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 a page’s raw HTML to your heart’s content. Switching back and forth between Design view and Code view is seamless and, best of all, nondestructive. Unlike many visual web page programs, where making a change in the visual mode stomps all over the underlying HTML, Dreamweaver respects hand-typed code and doesn’t try to rewrite it (unless you ask it to). You can even use Dreamweaver’s Split view to see your HTML side-by-side with a representation of your final page, or 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 handcoders, 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 7 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 often, 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.

Preface

3

Why Dreamweaver?

Either way, Dreamweaver’s site management tools make your job easier. They automate many of the routine tasks every webmaster faces, from managing links, images, pages, and other media to working with a team of people and moving your site to a web server. Part Four of this book looks at how Dreamweaver helps you build and maintain websites.

up to speed

Hand Coding vs. Visual Editors At one time, creating web pages in a text editor was considered the best way to build websites. The precise control that handwritten code gave you over HTML was (and often still is) seen as the only way to assure quality web pages. Professional site developers championed hand-coding because many early visual page-building programs added 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 visual 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-editing 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.

hand-hewn code. Knowing this, feel free to take advantage of the increased productivity that Dreamweaver’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 website in record time. Honestly, no web design program is really WYSIWYG (“what you see is what you get”). Because every browser interprets the HTML language slightly differently, web design is more like WYSIRWYGOAGD: “what you see is roughly what you’ll get, on a good day.” That’s why Dreamweaver’s Live View and integrated Adobe BrowserLab (a browser-testing service) can help you make sure your pages look the way you really 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.

But the real story is that the code Dreamweaver produces when you work in Design mode is as solid and well-written as

• Have it your way. As if Dreamweaver didn’t have enough going for it, the program’s engineers have created a completely customizable product, or, as they call it, an extensible program. Anyone can add to or change Dreamweaver’s menus, commands, objects, and windows. 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 creation. 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 commercial extensions for Dreamweaver. See Chapter 20 for details.

4

Dreamweaver CS6: The Missing Manual

What’s New in Dreamweaver CS6

What’s New in Dreamweaver CS6 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 of the program, you’ll find that Dreamweaver CS6 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 website easier than ever. Dreamweaver CS6 provides basic support for HTML5. That means that it understands the new HTML5 tags and provides code hints 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 typing, 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 for Dreamweaver-produced HTML5 code. • CSS3 is, like HTML5, a new (and evolving) standard for web designers. It promises many new formatting controls to make web pages look beautiful, including 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 CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager (page 146) frees you from the boredom of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years. Now, Dreamweaver provides an easy way to use any of hundreds of freely available fonts to enliven the typography on your pages. And the new CSS transitions panel (page 405) lets you easily add animations to mouse rollovers, so you can turn a navigation bar into an animated visual delight. • Mobile Web Design. iPhones, iPads, Android gadgets, tablets, and other mobile devices are popping up like weeds. Web developers need to know not only what their site looks like in the many browsers on the market, but they also need to customize their sites for mobile browsers. Dreamweaver CS6 builds on the mobile tools added in CS5.5 (multiscreen preview to see designs at different screen sizes and media query support to craft your CSS to respond to different screen widths). CS6 introduces a new “fluid grid layout” tool that lets you build designs that re-flow content to match different devices: For example, using the same HTML, you can create designs that fit in a single column for a phone, two columns for a tablet, and three or more columns for a spacious desktop monitor.

Preface

5

What’s Old in Dreamweaver CS6

• Mobile Application Development. Dreamweaver CS6 includes built-in support for jQuery Mobile and PhoneGap—two programming technologies that let you build mobile phone applications using just HTML, CSS, and JavaScript. The new PhoneGap Build service simplifies the headache-inducing hurdles usually involved in creating native applications for iOS, Android, and Blackberry devices. With it, you can write an application using HTML, CSS, and JavaScript and turn it into standalone phone app you can sell in iTunes’ App Store or one of the many other smartphone marketplaces. • Under the hood improvements. Of course, any new version of software includes numerous bug fixes and performance improvements. Most notably, the Dreamweaver engineers have streamlined file transfers from your computer to your web server. In previous versions of the program, you had to transfer files one at a time; now you can move multiple files simultaneously.

What’s Old in Dreamweaver CS6 Unfortunately, not everything in Dreamweaver CS6 is shiny and new. Dreamweaver’s “Server Behaviors,” which let you save form information, retrieve information from databases, and password-protect web pages, have gotten old from neglect. This once-innovative feature was a boon to designers who needed complex features but didn’t know how to program. However, Adobe has basically ignored this feature for several versions of the program. The programming behind these behaviors is now old and unprofessional. While Adobe hasn’t yet removed the tools, this book no longer includes a section dedicated to teaching them. It’s not in your interest to learn how to use them, nor in our interest to lead you toward a tool that’s no good. (Having said that, there are some excellent Dreamweaver extensions from WebAssist [www​ .webassist.com] that let you tap into the power of database programming, bypassing the old Dreamweaver tools.)

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 nothing more than line after line of ordinary text. You embed simple commands, called tags, within this text. Web browsers know how to interpret the tags to properly display your pages. When you create a page with tags in it, the document becomes known as an HTML page (for Hypertext Markup Language). HTML is still at the heart of most of the Web.

6

Dreamweaver CS6: The Missing Manual

Document Types

The HTML code that creates a web page can be as simple as this:

Hey, I am some body text on this Web page.

While it may not be exciting, this short bit of HTML is all you need to create an actual web page.

Document Types The first line of the code above:

is called a “doctype,” and it simply identifies what flavor of HTML you used to write the page. Developers have used two doctypes for years—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 one you want when you create a new web page (see page 44) and Dreamweaver handles the rest. Dreamweaver even lets you use the latest, greatest, and simplest doctype, HTML5. It replaces the extraneous code of earlier doctypes with much simpler and straightforward code:

Yep, that’s it. HTML5 is intended to be much easier to use in many ways, and Dreamweaver CS6 provides limited support for this new version of HTML. This book uses the HTML5 doctype—it’s short, simple, and supported by every major browser (even back to Internet Explorer 6). And because HTML5 is the future of the Web, there’s no reason to use older doctypes any longer. 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.

Preface

7

Of Tags and Properties

Different doctypes do require that you write your HTML in a particular way. For example, the line break tag looks like this in HTML 4.01:


But in XHTML, it’s written this way:


HTML5 lets you write it either way. Fortunately, you won’t have to worry about these subtle differences when you use Dreamweaver to insert your HTML—it automatically adjusts to the doctype and inserts the appropriate HTML.

Of Tags and Properties In the preceding example—and, indeed, in the HTML 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

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 forward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph command above is

. 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: • The tag appears once at the beginning of a web page and again (with an added closing slash) at the end. This tells a browser that the information between these two tags is written in HTML, as opposed to some other language. All the contents of the page, including any other tags, appear between these opening and closing tags. If you were to think of a web page as a tree, the 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 Pencils”). It may also include other, invisible information, such as a page description, that browsers and search engines use. You surround the head section with opening and closing tags.

8

Dreamweaver CS6: The Missing Manual

In addition, the head section can include information that browsers use to format the page’s HTML and to add interactivity. You can store CSS styles and Java­ Script 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 13) work with the help of JavaScript code stored in separate files on a server; the link to these files resides in the page’s head section.

Of Tags and Properties

The body of a web page, identified by its beginning and ending tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on. When you work in Dreamweaver’s Design view, the blank white portion of the document window represents the body area. It resembles the blank page of a word-processing program. Most of your work with Dreamweaver involves inserting and formatting text, pictures, and other objects in the body portion of a document. Many tags commonly used in web pages appear within the tag. Here are a few: • You can tell a web browser where a paragraph of text begins with a

(opening paragraph) tag, and where it ends with a

(closing paragraph) tag. • The <strong> tag emphasizes text. The text between an opening and closing <strong> tag shows up as boldfaced type. The HTML snippet <strong>Warning! tells a web browser to display the word “Warning!” in bold type on the screen. • The tag, or anchor tag, creates a link (hyperlink) on a web page. A link, of course, can lead anywhere on the Web. How do you tell a browser where the link should point? Simply give address instructions inside the tags. For instance, you might type Click here!. 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. Fortunately, Dreamweaver exempts you from having to type any of this code, letting you add properties to tags (and other page elements) through an easy-to-use window called the Property Inspector. To create links the Dreamweaver way (read: the easy way), turn to Chapter 4.  Note  For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual , 3rd Edition.

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 Dreamweaver offers), you might be interested in JavaScript & jQuery: The Missing Manual. End of advertisements: Now back to your regularly scheduled book.

Preface

9

XHTML

XHTML 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 ( and are both correct, for example) and permits unclosed tags (so that you can use an opening

tag without a closing

tag to create a paragraph). While this flexibility may make page-writing easier, it also makes life more difficult for web browsers, smartphones, and other technologies that must interact with data on the Web. Additionally, HTML doesn’t work with one of the hottest Internet languages, XML, or Extensible Markup Language. 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 CS6 can create and work with XHTML files as well as plain old HTML pages. XHTML was seen as the future back in 2000, but HTML5 has since supplanted it. While web browsers still understand XHTML (and probably will for a long time), you won’t be using it in this book.

HTML5 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, for example, the

tag 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