Macromedia Dreamweaver - CS5 Instruction Manual

Using

ADOBE® DREAMWEAVER® CS5 & CS5.5

Legal notices

For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.

Last updated 12/7/2011

Chapter 1: What’s New

What’s New . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapter 2: Workspace

Dreamweaver workflow and workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Working in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Using toolbars, inspectors, and context menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Customizing the Dreamweaver CS5 workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Chapter 3: Working with Dreamweaver sites

About Dreamweaver sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Set up a local version of your site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Connect to a remote server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Set up a testing server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Version Control and Advanced settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Manage Sites dialog box options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Import and export Dreamweaver site settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Edit an existing remote website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Set site preferences for transferring files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Managing Contribute sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

iii

Chapter 4: Creating and Managing Files

Creating and opening documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Managing files and folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Getting and putting files to and from your server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Checking in and checking out files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Synchronizing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Comparing files for differences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Rolling back files (Contribute users) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Cloaking files and folders in your Dreamweaver site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Storing file information in Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Testing your Dreamweaver site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Chapter 5: Managing assets and libraries

About assets and libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Working with assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Creating and managing a list of favorite assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Working with library items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Chapter 6: Creating pages with CSS

Understanding Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

The CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Last updated 12/7/2011

USING DREAMWEAVER

Contents

Enhancements to CSS3 support in the CSS styles panel (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Set CSS Styles preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Create a new CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Set CSS properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Edit a CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Add a property to a CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Apply, remove, or rename CSS class styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Move/export CSS rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Convert inline CSS to a CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Link to an external CSS style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Edit a CSS style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Format CSS code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Disable/Enable CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Inspect CSS in Live view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Check for cross-browser CSS rendering issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Use Design-Time style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Use Dreamweaver sample style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Update CSS style sheets in a Contribute site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Laying out pages with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Working with div tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Chapter 7: Laying out pages with HTML

Using visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Presenting content with tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Using Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Chapter 8: Adding content to pages

Use the Insert panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Set page properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Set CSS link properties for an entire page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Set CSS heading properties for an entire page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Set title and encoding properties for a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Use a tracing image to design a page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Understanding document encoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Select and view elements in the Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Zoom in and out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Set download time and size preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Working with text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Set text properties in the Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Spell check a web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Import tabular data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Import Microsoft Office documents (Windows only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Create a link to a Word or Excel document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Use HTML Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Use horizontal rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Modify font combinations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Last updated 12/7/2011

USING DREAMWEAVER

Contents

Insert dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Adding and modifying images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Adding video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Inserting SWF files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Adding web widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Adding Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Adding media objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Automating tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Chapter 9: Linking and navigation

About linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Linking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Jump menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Troubleshooting links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Chapter 10: Previewing pages

Previewing pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Chapter 11: Working with page code

General information about coding in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Setting up your coding environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Setting coding preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Writing and editing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

Collapsing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Optimizing and debugging code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Editing code in Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Working with head content for pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Working with server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Managing tag libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Importing custom tags into Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

Chapter 12: Adding JavaScript behaviors

Using JavaScript behaviors (general instructions) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Applying built-in JavaScript behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Chapter 13: Working with other applications

Cross-application integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

Working with Fireworks and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

Working with Photoshop and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Working with Flash and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Working with Adobe Bridge and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

Working with Device Central and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Working with ConnectNow and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

AIR Extension for Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Last updated 12/7/2011

USING DREAMWEAVER

Contents

Chapter 14: Creating and managing templates

About Dreamweaver templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

Recognizing templates and template-based documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

Creating a Dreamweaver template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Creating editable regions in templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

Creating repeating regions in templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

Using optional regions in templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Defining editable tag attributes in templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391

Creating a nested template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393

Editing, updating, and deleting templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Exporting and importing template content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

Applying or removing a template from an existing document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

Editing content in a template-based document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Template syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

Setting authoring preferences for templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Chapter 15: Building Spry pages visually

About the Spry framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Working with Spry widgets (general instructions) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Working with the Spry Accordion widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Working with the Spry Menu Bar widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Working with the Spry Collapsible Panel widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Working with the Spry Tabbed Panels widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419

Working with the Spry Tooltip widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Working with the Spry Validation Radio Group widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Working with the Spry Validation Text Field widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

Working with the Spry Validation Text Area widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

Working with the Spry Validation Select widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435

Working with the Spry Validation Checkbox widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Working with the Spry Validation Password widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Working with the Spry Validation Confirm widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Displaying data with Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447

Adding Spry effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Chapter 16: Designing for multiple screens and devices

Creating media queries (CS5.5 and later) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Change page orientation for mobile devices (CS5.5 and later) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Creating web applications for mobile devices (CS5.5 and later) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Packaging web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Preview pages using the Multiscreen Preview panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Chapter 17: Using Adobe Online Services

Using Dreamweaver with Adobe Online services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

Chapter 18: Displaying XML data with XSLT

About XML and XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

Performing XSL transformations on the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

Last updated 12/7/2011

USING DREAMWEAVER

Contents

Performing XSL transformations on the client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500

Missing character entities for XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

Chapter 19: Preparing to build dynamic sites

Understanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504

Set up your computer for application development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Database connections for ColdFusion developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516

Database connections for ASP developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518

Database connections for PHP developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525

Troubleshooting database connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526

Removing connection scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531

Chapter 20: Making pages dynamic

Optimizing the workspace for visual development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532

Designing dynamic pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535

Dynamic content sources overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536

Dynamic content panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541

Defining sources of dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543

Adding dynamic content to pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556

Changing dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560

Displaying database records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562

Viewing live data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571

Adding custom server behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572

vii

Chapter 21: Building applications visually

Building master and detail pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Building search and results pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

Building a record insert page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596

Building an update record page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599

Building a delete record page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Building pages with advanced data manipulation objects (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611

Building a registration page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

Building a login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617

Building a page that only authorized users can access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619

Securing a folder in your application (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622

Using ColdFusion components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623

Chapter 22: Building forms

Using forms to collect information from users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630

Creating web forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633

Building ColdFusion forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646

Chapter 23: Accessibility

Dreamweaver and accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

Last updated 12/7/2011

Chapter 1: What’s New

What’s New

Important: This page provides a list of new features in Dreamweaver CS5 and Dreamweaver CS5.5. This page does NOT tell you how to use those features. For more information about any of the new features, click the corresponding links provided. You can also watch a

What’s new (CS5.5)

Multiscreen support

Preview your designs in standard screen resolutions, or use media queries to define resolution. When testing for devices that change page orientation based on how the device is held, use the landscape and portrait options during preview. For more information, see

Media query support

Use media queries to customize the appearance of your site for different screen resolutions. For more information, see “Creating media queries (CS5.5 and later)” on page 462.

CS5 feature overview, or a CS5.5 feature overview on AdobeTV.

“Designing for multiple screens and devices” on page 462.

Web applications for mobile devices

Quickly design a web application that works on most mobile devices using the jQuery Mobile widget. For more information, see

“Creating web applications for mobile devices (CS5.5 and later)” on page 464.

Package web applications for Android, iPhone, and iPad

Package your web applications in Dreamweaver, and deploy them to Android™ and iOS-based devices. For more information, see

“Packaging web applications” on page 467.

HTML5, CSS3, and jQuery support

Dreamweaver supports code hinting for HTML5, CSS3, and jQuery.

Starter layouts are also available for building HTML5 pages from scratch. Dreamweaver supports the HTML5 feature to embed videos in HTML pages. For more information, see

The CSS panel has been enhanced to support commonly used CSS3 properties. For more information, see “Code

hints” on page 292 and “Enhancements to CSS3 support in the CSS styles panel (CS5.5)” on page 126.

“Embed videos in web pages (HTML5)” on page 237.

FTPS support

Transfer data using FTPS. FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that supports only encryption. For more information, see

“FTPS connections (CS5.5)” on page 41.

W3C validator support

Create standards-compliant HTML and XHTML pages using the W3C validator in Dreamweaver. For more information, see

“Validate documents using W3C validator (CS5.5)” on page 312.

Last updated 12/7/2011

USING DREAMWEAVER

What’s New

What’s new (CS5)

Adobe BrowserLab

Dreamweaver CS5 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fast and accurate solution for cross-browser compatibility testing. With BrowserLab you can preview web pages and local content using multiple viewing and comparison tools. See

Business Catalyst integration

Adobe Business Catalyst is a hosted application that replaces traditional desktop tools with one, central platform for web designers. The application works hand-in-hand with Dreamweaver, and lets you build everything from basic datadriven websites to powerful online stores. See

http://www.adobe.com/go/business_catalyst_get_extension_en.

CSS enhancements

CSS Disable/Enable

CSS Disable/Enable lets you disable and re-enable CSS properties directly from the CSS Styles panel. Disabling a CSS property simply comments out the specified property without actually deleting it. See page 141.

“BrowserLab” on page 471.

“Disable/Enable CSS” on

CSS Inspection

Inspect mode lets you visually display the CSS box model properties—including padding, border, and margin—in detail without reading code or requiring a separate third-party utility such as Firebug. See on page 142.

CSS starter layouts

Dreamweaver CS5 includes updated and simplified CSS starter layouts. The complex descendent selectors from the CS4 layouts have been removed and replaced with simplified, easy-to-understand classes. See

CSS layout” on page 150.

“Inspect CSS in Live view”

“Create a page with a

Dynamically-Related Files

The Dynamically-Related Files feature lets you discover all of the external files and scripts necessary to assemble PHPbased Content Management System (CMS) pages, and displays their filenames in the Related Files toolbar. By default Dreamweaver supports file discovery for the Wordpress, Drupal, and Joomla! CMS frameworks. See

Dynamically-Related Files” on page 70.

“Open

Live view navigation

Live view navigation activates links in Live view, allowing you to interact with server-side applications and dynamic data. The feature also allows you to enter a URL to inspect pages served from a live web server and edit pages you have browsed to if they exist in one of your locally defined sites. See

“Previewing pages in Dreamweaver” on page 276.

PHP custom class code hinting

PHP custom class code hinting displays the proper syntax for PHP functions, objects, and constants, helping you type more accurate code. Code hinting also works with your own custom functions and classes, as well as third-party frameworks, such as the Zend framework.

Last updated 12/7/2011

USING DREAMWEAVER

What’s New

Simplified site setup

The newly redesigned Site Definition dialog box (now the Site Setup dialog box) makes it easier to set up a local Dreamweaver site so that you can start building web pages right away. The remote server category lets you specify your remote and testing servers in one view. See

server” on page 38.

“Set up a local version of your site” on page 37 and “Connect to a remote

Site-specific code hints

The Site-specific code hints feature lets you customize your coding environment when working with third-party PHP libraries and CMS frameworks such as WordPress, Drupal, Joomla!, or other frameworks. Theme files for blogs and other custom PHP files and directories can be included or excluded as sources for code-hints. See

hints” on page 294.

“Site-specific code

Subversion support enhancements

Dreamweaver CS5 expands its support for Subversion, allowing you to move, copy, and delete files locally, and then synchronize changes with your remote SVN repository. The new Revert command allows you to quickly correct tree conflicts or rollback to a previous version of a file. Additionally, a new extension allows you to specify which version of Subversion you would like to work with on a given project. See page 88.

“Use Subversion (SVN) to get and check in files” on

Deprecated features

The following features have been deprecated as of Dreamweaver CS5:

• Accessibility validation report

• ASP/JavaScript server behaviors

• Check Browser JavaScript behavior

• Connect to FTP/RDS server without defining a site

• Control Shockwave or SWF JavaScript behavior

• Create Web Photo Album

• Hide Pop-up Menu JavaScript behavior

• InContext Editing Manage Available CSS Classes

• Insert FlashPaper

• Insert/Remove Mark of the Web

• Microsoft Visual Sourcesafe integration

• Navigation bars

• Play Sound JavaScript behavior

• Show Events menu (Behaviors panel)

• Show Pop-up Menu JavaScript behavior

• Timeline JavaScript behaviors

• Validate tags

• View Live Data

Last updated 12/7/2011

Chapter 2: Workspace

Dreamweaver workflow and workspace

Dreamweaver workflow overview

You can use several approaches to create a website. This is one approach:

Plan and set up your site

Determine where the files will go and examine site requirements, audience profiles, and site goals. Additionally, consider technical requirements such as user access, as well as browser, plug-in, and download restrictions. After you’ve organized your information and determined a structure, you can begin creating your

Dreamweaver sites” on page 36.)

Organize and manage your site files

In the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. The Files panel also has many tools for managing your site, transferring files to and from a remote server, setting up a Check In/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and remote sites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of your Adobe®Contribute® sites. (See page 106.)

“Managing files and folders” on page 72 and “Managing assets and libraries” on

site. (See “Working with

Lay out your web pages

Choose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with one another to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSS layouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the page structure. If you want to display multiple elements at once in a browser, you can use frames to lay out your documents. Finally, you can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the template changes. (See

HTML” on page 167.)

Add content to pages

Add assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML links, jump menus, and more. You can use built-in page-creation features for such elements as titles and backgrounds, type directly in the page, or import content from other documents. Dreamweaver also provides behaviors for performing tasks in response to specific events, such as validating a form when the visitor clicks the Submit button or opening a second browser window when the main page has finished loading. Finally, Dreamweaver provides tools for maximizing website performance and for testing pages to ensure compatibility with different web browsers. (See “Adding content to pages” on page 198.)

Create pages by hand coding

Coding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editing tools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and edit your pages. (See

“Working with page code” on page 281.)

“Creating pages with CSS” on page 118 and “Laying out pages with

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Set up a web application for dynamic content

Many websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow some visitors to add new information and edit information in the databases. To create such pages, you must first set up a web server and application server, create or modify a Dreamweaver site, and connect to a database. (See “Preparing to build dynamic sites” on page 504.)

Create dynamic pages

In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto the page.

You can set your page to display one record or many records at a time, display more than one page of records, add special links to move from one page of records to the next (and back), and create record counters to help users keep track of the records. You can encapsulate application or business logic using technologies such as Adobe® ColdFusion® and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See “Making pages dynamic” on page 532.)

Test and publish

Testing your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, you publish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remains current and functional. (See

“Getting and putting files to and from your server” on page 80.)

For a video tutorial on what you can do with Dreamweaver, see www.adobe.com/go/lrvid4040_dw.

Workspace layout overview

The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents.

In Windows®, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

A B C E FD

A. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. CS Live G. Tag selector H. Property inspector I. Files panel

H I

On Mac OS®, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can also display a floating workspace in which each document appears in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. When panel groups are docked and the document area is maximized, resizing or showing and hiding panels auto-sizes the main document, just as it does on Windows.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

A B DC E F

A. Application bar B. Document toolbar C. Workspace switcher D. Document window E. CS Live F. Panel groups G. Tag selector H. Property inspector I. Files panel

For a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.

Workspace elements overview

The workspace includes the following elements.

Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows, use the Window menu.

The Welcome screen Lets you open a recent document or create a new document. From the Welcome screen, you can

also learn more about Dreamweaver by taking a product tour or a tutorial.

The Application bar Across the top of the application window contains a workspace switcher, menus (Windows only),

and other application controls.

The Document toolbar Contains buttons that provide options for different views of the Document window (such as

Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

The Standard toolbar (Not displayed in the default workspace layout.) Contains buttons for common operations from

the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. To display the Standard toolbar, select View

The Coding toolbar (Displayed in Code view only.) Contains buttons that let you perform many standard coding

operations.

> Toolbars > Standard.

The Style Rendering toolbar (Hidden by default.) Contains buttons that let you see how your design would look in

different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable

Cascading Style Sheets

(CSS) styles.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

The Document window Displays the current document as you create and edit it.

The Property inspector Lets you view and change a variety of properties for the selected object or text. Each object has

different properties. The Property inspector is not expanded by default in the Coder workspace layout.

The Tag selector Located in the Status bar at the bottom of the Document window. Shows the hierarchy of tags

surrounding the current selection. Click any tag in the hierarchy to select that tag and all its

Panels Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files

contents.

panel. To expand a panel, double-click its tab.

The Insert panel Contains buttons for inserting various types of objects, such as images, tables, and media elements,

into a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert panel. If you prefer, you can insert objects using the Insert menu instead of the Insert panel.

The Files panel Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote

server. The Files panel also lets you access all the files on your local disk, much like

Windows Explorer

(Windows) or the Finder (Macintosh).

Document window overview

The Document window shows the current document. You can select any of the following views:

Design view A design environment for visual page layout, visual editing, and rapid application development. In this

view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see when viewing the page in a browser.

Code view A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such PHP

or ColdFusion Markup Language (CFML)—and any other kind of code.

Split Code view A split version of Code view that lets you scroll to work on different sections of the document at the

same time.

Code and Design view Lets you see both Code view and Design view for the same document in a single window.

Live view Similar to Design view, Live view displays a more realistic representation of what your document will look

like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable. However, you can edit in Code view and refresh Live view to see your changes.

Live Code view Only available when viewing a document in Live view. Live Code view displays the actual code that a

browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code view is not editable.

When a Document window is maximized (the default), tabs appear at the top of the Document window showing the filenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that you haven’t saved yet.

To switch to a document, click its tab.

Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you’re viewing documents in separate windows). Related documents are documents associated with the current file, such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in the Related Files toolbar.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

More Help topics

“Working in the Document window” on page 17

“About Live view” on page 276

“Open Related Files” on page 68

“General information about coding in Dreamweaver” on page 281

Document toolbar overview

The Document toolbar contains buttons that let you toggle between different views of your document quickly. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites. The illustration below shows the expanded Document toolbar.

A B C D E G H I J K LF

A. Show Code view B. Show Code and Design view C. Show Design view D. Live Code view E. Check Browser Compatibility F. Live view G. CSS Inspect mode H. Preview/Debug in Browser I. Visual Aids J. Refresh Design View K. Document Title L. File Management

The following options appear in the Document toolbar:

Show Code View Displays only the Code view in the Document window.

Show Code and Design Views Splits the Document window between the Code and the Design views. When you select

this combined view, the option Design View on Top becomes available in the View Options menu.

Show Design View Displays only the Design view in the Document window.

Note: If you are working with XML, JavaScript, CSS, or other code based file types, you cannot view the files in Design view and the Design and Split buttons are dimmed out.

Live View Displays a non-editable, interactive, browser based view of the document.

Live Code View Displays the actual code used by the browser to execute the page.

Document Title Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your

document already has a title, it appears in this field.

File Management Displays the File Management pop-up menu.

Preview/Debug in Browser Allows you to preview or debug your document in a browser. Select a browser from the

pop-up menu.

Refresh Design View Refreshes the document’s Design view after you make changes in Code view. Changes you make

in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.

Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to select a code block’s opening or closing tags.

View Options Allows you to set options for Code view and Design view, including which view you want to appear

above the other. Options in the menu are for the current view: Design view, Code view, or both.

Visual Aids Lets you use different visual aids to design your pages.

Validate Markup Lets you validate the current document or a selected tag.

Check Browser Compatibility Lets you check if your CSS is compatible across different browsers.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

More Help topics

“Preview pages in Live view” on page 276

“Setting coding preferences” on page 287

“View and edit head content” on page 321

“Using visual aids for layout” on page 167

Standard toolbar overview

The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the equivalent menu commands.

Style Rendering toolbar overview

The Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable CSS styles. To display the toolbar, select View

> Toolbars > Style Rendering.

This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might specify a body rule for print media and a different body rule for handheld devices. For more information on creating media-dependent style sheets, see the World Wide Web Consortium website at

www.w3.org/TR/CSS21/media.html.

By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered on a computer screen). You can view the following media type renderings by clicking the respective buttons in the Style Rendering toolbar.

Render Screen Media Type Shows you how the page appears on a computer screen.

Render Print Media Type Shows you how the page appears on a printed piece of paper.

Render Handheld Media Type Shows you how the page appears on a handheld device, such as a mobile phone or a

BlackBerry device.

Render Projection Media Type Shows you how the page appears on a projection device.

Render TTY Media Type Shows you how the page appears on a teletype machine.

Render TV Media Type Shows you how the page appears on a television screen.

Toggle Displaying Of CSS Styles Lets you enable or disable CSS styles. This button works independently of the other

media buttons.

Design-time Style Sheets Lets you specify a Design-time style sheet.

For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.

Browser Navigation toolbar overview

The Browser Navigation toolbar becomes active in Live view, and shows you the address of the page you’re looking at in the Document window. As of Dreamweaver CS5, Live view acts like a regular browser, so even if you browse to a site outside of your local site (for example, http://www.adobe.com), Dreamweaver will load the page in the Document window.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

A. Browser controls B. Address box C. Live view options

By default, links are not active in Live view. Having links non-active lets you select or click link text in the Document window without being taken to another page. To test links in Live view, you can enable one-time clicking or continuous clicking by selecting Follow Links or Follow Links Continuously from the View options menu to the right of the address box.

More Help topics

“Previewing pages in Dreamweaver” on page 276

Coding toolbar overview

The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snippets. The Coding toolbar appears vertically on the left side of the Document window, and is only visible when Code view is showing.

You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding).

You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and Auto Indent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates the toolbar. For more information, see Extending Dreamweaver.

More Help topics

“Insert code with the Coding toolbar” on page 296

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Status bar overview

The Status bar at the bottom of the Document window provides additional information about the document you are creating.

A B C D E F G H

A. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window size pop-up menu G. Document size and estimated download time H. Encoding indicator

Tag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that

tag and all its contents. Click tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from the context menu.

Select tool Enables and disables the Hand tool.

Hand tool Lets you click the document and drag it in the Document window.

Zoom tool and Set Magnification pop-up menu Let you set a magnification level for your document.

<body> to select the entire body of the document. To set the class or ID attributes for a

Window size pop-up menu (Not available in Code view.) Lets you resize the Document window to predetermined or

custom dimensions. When you change the view size of a page in design or live view only the dimensions of the view size change. The document size is unaltered.

In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you select a size corresponding to a media query, Dreamweaver uses the media query to display the page. You can also change the page orientation to preview the page for mobile devices where the page layout changes based on how the device is held.

Document size and download time Shows the estimated document size and estimated download time for the page,

including all dependent files such as images and other media files.

Encoding indicator Shows the text encoding for the current document.

More Help topics

“Set window size and connection speed” on page 20

“Zoom in and out” on page 208

“Resize the Document window” on page 18

“Set download time and size preferences” on page 209

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Property inspector overview

The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. For example, if you select an image on your page, the Property inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the border around the image, if any, and so on).

The Property inspector is at the lower edge of the workspace by default, but you can undock it and make it a floating panel in the workspace.

More Help topics

“Dock and undock panels” on page 23

“Use the Property inspector” on page 21

Insert panel overview

The Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons are organized into several categories, which you can switch by selecting the desired category from the Category pop-up menu. Additional categories appear when the current document contains server code, such as ASP or CFML documents.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the default action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, the next time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new option from the pop-up menu, the default action for the button changes.

The Insert panel is organized in the following categories:

The Common category Lets you create and insert the most commonly used objects, such as images and tables.

The Layout category Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choose

two views for tables: Standard (default) and Expanded Tables.

The Forms category Contains buttons for creating forms and inserting form elements, including Spry validation

widgets.

The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated

regions, and record insertion and update forms.

The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets.

The InContext Editing category Contains buttons for building InContext editing pages, including buttons for Editable

Regions, Repeating Regions, and managing CSS classes.

The Text category Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.

The Favorites category Lets you group and organize the Insert panel buttons you use the most in one common place.

Server-code categories Available only for pages that use a particular server language, including ASP, CFML Basic,

CFML Flow, CFML Advanced, and PHP. Each of these categories provides server-code objects that you can insert in Code view.

Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a horizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar (though you cannot hide and display it in the same way as other toolbars).

More Help topics

“Use the Insert panel” on page 198

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Files panel overview

Use the Files panel to view and manage the files in your Dreamweaver site.

When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and expand or collapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, the testing server, or the SVN repository as a list of files. When expanded, it displays the local site and either the remote site, the testing server, or the SVN repository.

For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site— that appears by default in the collapsed panel.

(CS5.5) The Files panel interacts with the server at regular intervals to update its content. An error message is displayed when you try to perform an action in the Files panel when it is running these auto-updates. To disable auto-updates, open the Files panel options menu, and deselect Auto-Update in the View menu.

To update the contents of the panel manually, use the Refresh button in the panel. The current check-out status of files, however, is updated only when auto-updates are enabled.

More Help topics

“Work with files in the Files panel” on page 75

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

CSS Styles panel overview

The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.

You can resize any of the panes by dragging the borders between the panes.

In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule defining the selection.

In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.

Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.

Visual guides overview

Dreamweaver provides several kinds of visual guides to help you design documents and predict approximately how they appear in browsers. You can do any of the following:

• Instantly snap the Document window to a desired window size to see how the elements fit on the page.

• Use a tracing image as the page background to help you duplicate a design created in an illustration or image-

editing application such as Adobe® Photoshop® or Adobe® Fireworks®.

• Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.

• Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).

Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

More Help topics

“Using visual aids for layout” on page 167

GoLive users

If you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introduction to the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.

More Help topics

Dreamweaver for GoLive users tutorial

Working in the Document window

Switch between views in the Document window

You can view a document in the Document window in Code view, Split Code view, Design view, Code and Design views (Split view), or Live view. You also have the option of viewing Split Code view or Code and Design views horizontally or vertically. (Horizontal display is the default.)

Switch to Code view

❖ Do one of the following:

• Select View > Code.

• In the Document toolbar, click the Show Code View button.

Switch to Split Code view

Split Code view splits your document in two so that you can work on two sections of the code at once.

❖ Select View > Split Code.

Switch to Design view

❖ Do one of the following:

• Select View > Design.

• In the Document toolbar, click the Show Design View button.

Show both Code and Design views

❖ Do one of the following:

• Select View > Code and Design.

• In the Document toolbar, click the Show Code and Design Views button.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

By default, Code view appears at the top of the Document window and Design view appears at the bottom. To display Design view on top, select View

> Design View on Top.

Toggle between Code view and Design view

❖ Press Control+backquote (`).

If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view to the other.

Split views vertically

This option is only available for Split Code view and Code and Design views (Split view). It is disabled for Code view and Design view.

1 Make sure that you are in Split Code view (View > Split Code) or Code and Design views (View > Code and

Design).

2 Select View > Split Vertically.

If you are in Code and Design views, you have the option of displaying Design view on the left (View > Design View on Left).

More Help topics

“Document window overview” on page 8

“Preview pages in Live view” on page 276

Cascade or tile Document windows

If you have many documents open at once, you can cascade or tile them.

More Help topics

“Manage windows and panels” on page 22

“Display tabbed documents (Dreamweaver Macintosh)” on page 28

Cascade Document windows

❖ Select Window > Cascade.

Tile Document windows

• (Windows) Select Window > Tile Horizontally or Window > Tile Vertically.

• (Macintosh) Select Window > Tile.

Resize the Document window

The Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create sizes.

When you change the view size of a page in design or live view only the dimensions of the view size change. The document size is unaltered.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Resize the Document window to a predetermined size

❖ Select one of the sizes from the Window Size pop-up menu at the bottom of the Document window. Dreamweaver

CS5.5 and later offers an extended list of choices, including choices for common mobile devices (as pictured below).

The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size or mobile device is listed to the right.

For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower-right corner of a window.

Note: (Windows only) Documents within the Document window are maximized by default, and you can't resize a document when it's maximized. To de-maximize the document, click the de-maximize button

in the upper right

corner of the document.

Change the values listed in the Window Size pop-up menu

1 Select Edit Sizes from the Window Size pop-up menu.

2 Click any of the width or height values in the Window Sizes list, and type a new value.

To make the Document window adjust only to a specific width (leaving the height unchanged), select a height value and delete it.

3 Click the Description box to enter descriptive text about a specific size.

Add a new size to the Window Size pop-up menu

1 Select Edit Sizes from the Window Size pop-up menu.

2 Click the blank space below the last value in the Width column.

3 Enter values for Width and Height.

To set the Width or Height only, simply leave one field empty.

4 Click the Description field to enter descriptive text about the size you added.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

For example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Mac next to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.

Set window size and connection speed

1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).

2 Select Status Bar (CS5) or Window Sizes (CS5.5 and later) from the Category list on the left.

3 Set any of the following options:

Window Sizes lets you customize the window sizes that appear in the Status bar’s pop-up menu.

Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size. The

download size for the page is displayed in the Status bar. When an image is selected in the Document window, the image’s download size is displayed in the Property inspector.

More Help topics

“Status bar overview” on page 12

“Resize the Document window” on page 18

Reports in Dreamweaver

You can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the following types of reports:

Search Lets you search for tags, attributes, and specific text within tags.

Reference Lets you search for helpful reference information.

Validation Lets you check for code or syntax errors.

Browser Compatibility Lets you test the HTML in your documents to see if any tags or attributes are unsupported by

your target browsers.

Link Checker Lets you find and fix broken, external, and orphaned links.

Site Reports Enable you to improve workflow and test HTML attributes in your site. Workflow reports include

checked out by, recently modified, and design notes; HTML reports include combinable nested font tags, accessibility, missing Alt text, redundant nested tags, removable empty tags, and untitled documents.

FTP Log Enables you to view all FTP file-transfer activity.

Server Debug Lets you view information to debug an Adobe® ColdFusion® application.

Using toolbars, inspectors, and context menus

Display toolbars

Use the Document and Standard toolbars to perform document-related and standard editing operations; the Coding toolbar to insert code quickly; and the Style Rendering toolbar to display your page as it would appear in different media types. You can choose to display or hide the toolbars as necessary.

• Select View > Toolbars, and then select the toolbar.

• Right-click (Windows) or Control-click (Macintosh) any of the toolbars and select the toolbar from the context menu.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Note: To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbar from the View Options pop-up menu at the top of the inspector.

More Help topics

“Document toolbar overview” on page 9

“Standard toolbar overview” on page 10

“Coding toolbar overview” on page 11

“Style Rendering toolbar overview” on page 10

Use the Property inspector

To access help for a particular Property inspector, click the help button in the upper right corner of the Property inspector, or select Help from a Property inspector’s Options menu.

Note: Use the Tag inspector to view and edit every attribute associated with a given tag’s properties.

More Help topics

“Property inspector overview” on page 13

“Set text properties in the Property inspector” on page 217

“Dock and undock panels” on page 23

“Change attributes with the Tag inspector” on page 316

Show or hide the Property inspector

❖ Select Window > Properties.

Expand or collapse the Property inspector

❖ Click the expander arrow in the lower-right corner of the Property inspector.

View and change properties for a page element

1 Select the page element in the Document window.

You might have to expand the Property inspector to view all the properties for the selected element.

2 Change any of the properties in the Property inspector.

Note: For information on specific properties, select an element in the Document window, and then click the Help icon in the upper-right corner of the

3 If your changes are not immediately applied in the Document window, apply the changes in one of these ways:

• Click outside the property-editing text fields.

• Press Enter (Windows) or Return (Macintosh).

• Press Tab to switch to another property.

Property inspector.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Use context menus

Context menus provide convenient access to the most useful commands and properties related to the object or window you’re working with. Context menus list only those commands that pertain to the current selection.

1 Right-click (Windows) or Control-click (Macintosh) the object or window.

2 Select a command from the context menu.

Customizing the Dreamweaver CS5 workspace

Manage windows and panels

You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.

Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.

Rearrange, dock, or float document windows

When you open more than one file, the Document windows are tabbed.

• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.

• To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group.

Last updated 12/7/2011

USING DREAMWEAVER

Workspace

Note: In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window, or Window > Arrange > Float All In Windows to float all of the Document windows at once. See tech note

kb405298

for more information.

Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows (Windows), or choose Window > Tile Vertically to create side-by-side Document windows. Search “Tile Vertically” in Dreamweaver Help for more information on this topic. The workflow is slightly different for Macintosh users.

• To dock a Document window to a separate group of Document windows, drag the window into the group.

• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or

sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.

Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu to help you lay out your documents.

• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s

tab for a moment.

Note: Some products do not support this functionality.

Dock and undock panels

A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving them into and out of a dock.

• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.

• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.

• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock

or make it free-floating.

Navigator panel being dragged out to new dock, indicated by blue vertical highlight

Last updated 12/7/2011

+ 638 hidden pages