Dreamweaver CS6 The Missing Manual pdf pdf

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 corporate@oreilly.com.
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:

Building a Better Web Page

CHAPTER 8:

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:

CHAPTER 12:

Bringing Your Pages to Life
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 missing@sawmac.com. (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: pmckie@oreilly.com.
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: holly@oreilly.com.
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: juliehawks@gmail.com.

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 the title of this Web page.


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 (