Adobe Dreamweaver CC (2015) Help 2015 En

User Manual: adobe Dreamweaver - CC (2015) - Help Free User Guide for Adobe Dreamweaver Software, Manual

Open the PDF directly: View PDF .
Page Count: 700

Download
Open PDF In Browser	View PDF

Adobe® Dreamweaver® CC Help

Legal notices

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

Last updated 6/3/2015

iii

Contents
Chapter 1: What's new
New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Chapter 2: Workspace and workflow
Dreamweaver workflow and workspace
Customizing the Dreamweaver workspace
Working in the Document window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Using toolbars, inspectors, and context menus

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Use the Insert panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

CSS Designer panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

DOM panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Search files based on filename or content | Mac OS
Zoom in and out
Keyboard shortcuts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Optimizing the workspace for visual development
CEF integration

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Chapter 3: Site management
About Dreamweaver sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
About dynamic sites

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Set up a local version of your site
Connect to a remote server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Manage Sites dialog box options
Set up a testing server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Version Control and Advanced settings

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Import and export Dreamweaver site settings
Edit an existing remote website

Set site preferences for transferring files
Chapter 4: File management
Creating and opening documents
Managing files and folders

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Getting and putting files to and from your server
Checking in and checking out files
Synchronizing files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Comparing files for differences

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Cloaking files and folders in your Dreamweaver site
Storing file information in Design Notes
Testing your Dreamweaver site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Chapter 5: Layout and design
Using visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Using Frames

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Laying out pages with CSS

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

Last updated 6/3/2015

DREAMWEAVER
Contents

Working with Bootstrap files
Visual Media Queries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Responsive design using fluid grid layouts
Presenting content with tables

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Using jQuery UI widgets in Dreamweaver
Using jQuery effects in Dreamweaver
Colors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Chapter 6: CSS
Understanding Cascading Style Sheets
CSS Designer panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Set CSS Styles preferences
Create a CSS rule

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Set CSS properties
Edit a CSS rule

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Add a property to a CSS rule

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Apply, remove, or rename CSS class styles
Move/export CSS rules

Convert inline CSS to a CSS rule

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Link to an external CSS style sheet
Edit a CSS style sheet
Format CSS code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Disable/Enable CSS

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Inspect CSS in Live view

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Check for cross-browser CSS rendering issues
Use Design-Time style sheets
Working with div tags

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Apply gradients to background
CSS3 transition effects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Use Dreamweaver sample style sheets
The CSS Styles panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

Chapter 7: Page content and assets
Set page properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Set CSS link properties for an entire page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Set CSS heading properties for an entire page
Set title and encoding properties for a page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Use a tracing image to design apage

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Understanding document encoding

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Select and view elements in the Document window
Zoom in and out

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Set download time and size preferences
Working with text

DOM panel

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

Arabic and Hebrew text
Edit in Live View

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

Set text properties in the Property inspector

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Last updated 6/3/2015

DREAMWEAVER
Contents

Spell check a web page
Import tabular data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Import Microsoft Office documents (Windows only)
Create a link to a Word or Excel document
Use HTML Formatting

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Use horizontal rules

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Modify font combinations

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Add Edge Web Fonts to the Font list
Insert dates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Working with assets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Creating and managing a list of favorite assets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Insert and edit images

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Adding media objects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Adding video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Insert HTML5 video

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Inserting SWF files

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

Adding web widgets
Adding Sound

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Insert HTML5 audio
Automating tasks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

About assets and libraries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Working with library items

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

Working with Photoshop and Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Chapter 8: Linking and navigation
About linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Linking

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

Jump menus

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Navigation bars
Image maps

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Troubleshooting links

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

Chapter 9: Previewing
Preview and inspect web pages on multiple devices
Previewing pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

Chapter 10: Coding
General information about coding in Dreamweaver
Setting up your coding environment
Setting coding preferences
Writing and editing code
Collapsing code
Lint code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Optimize code

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391

Editing code in Design view

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Working with head content for pages
Working with server-side includes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Last updated 6/3/2015

DREAMWEAVER
Contents

Managing tag libraries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Importing custom tags into Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

Chapter 11: Javascript
Using JavaScript behaviors (general instructions)
Applying built-in JavaScript behaviors

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Chapter 12: Cross-product
Add-Ons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Cross-application integration

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

Working with Fireworks and Dreamweaver
Working with Flash and Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435

Working with Adobe Bridgeand Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Working with Device Central and Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Working with ConnectNow and Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

AIR Extension for Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Using Dreamweaver with Adobe Online services
Extract in Dreamweaver CC

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Dreamweaver-Business Catalyst integration

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Import Microsoft Office documents (Windows only)
Chapter 13: Templates
About Dreamweaver templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Recognizing templates and template-based documents
Creating a Dreamweaver template

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474

Creating editable regions in templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

Creating repeating regions in templates
Using optional regions in templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481

Defining editable tag attributes in templates
Creating a nested template

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

Editing, updating, and deleting templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487

Exporting and importing template content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491

Applying or removing a template from an existing document
Editing content in a template-based document
Template syntax

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496

Setting authoring preferences for templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

Chapter 14: Mobile and multiscreen
Creating media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Change page orientation for mobile devices

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Creating web applications for mobile devices

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Chapter 15: XML
About XML and XSLT

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

Performing XSL transformationson the server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511

Performing XSL transformationson the client

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528

Missing character entities for XSLT

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529

Last updated 6/3/2015

vii

DREAMWEAVER
Contents

Chapter 16: Dynamic sites, pages and web forms
Understanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Set up your computer for application development
Database connections for ColdFusion developers
Database connections for ASP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545

Database connections for PHP developers
Troubleshooting database connections
Removing connection scripts
Designing dynamic pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559

Dynamic content sources overview

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561

Defining sources of dynamic content
Adding dynamic content to pages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

Changing dynamic content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Displaying database records

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584

Viewing live data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593

Adding custom server behaviors
About building forms

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Using forms to collect information from users
Building ColdFusion forms
Creating web forms

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619

Enhanced HTML5 support for form elements

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632

Chapter 17: Building applications visually
Building master and detail pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635
Building search and results pages
Building a record insert page
Building an update record page
Building a delete record page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655

Building pages with advanced data manipulation objects (ColdFusion, ASP)
Building a registration page
Building a login page

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668

Building a page that only authorized users can access
Securing a folder in your application (ColdFusion)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673

Using ColdFusion components

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674

Chapter 18: Accessibility
Dreamweaver and accessibility

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680

Chapter 19: Dreamweaver and Creative Cloud
Synchronizing Dreamweaver settings with Creative Cloud
Chapter 20: System Requirements
System requirements for Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693

Last updated 6/3/2015

Chapter 1: What's new

New features summary

The 2015 release of Dreamweaver CC focuses on responsive design, improvements to code editing features, preview of
web pages on devices, and batch extract of web-optimized images with multiple resolutions from Photoshop comps.
Integration with the Bootstrap framework helps you build mobile-first, responsive websites. Visual Media Queries
further complement the responsive web designing experience by enabling you to visualize and modify your design at
various breakpoints.
This release also includes several enhancements to editing features in Live view and CSS Designer. This article
introduces these new features and enhancements, and provides links to resources for more help and learning.
What's new

Last updated 6/3/2015

2
What's new

What's changed

• Device preview
• Visual Media Queries
• Linting support
• Emmet support
• Preview in Code View
• New code snippets
• Bootstrap integration
• New menus in Live view
• Support for Tables in Live View
• Support for jQuery UI elements in Live View
• DOM panel
• SVG code hints in HTML documents
• Technology previews
• Code folding
• Extract improvements
• Enhancements to Live view editing
• Coding toolbar changes
• CSS Designer improvements
• Testing server - workflow improvements
• Changes to Business Catalyst workflow
• Other changes

Device preview
Dreamweaver now lets you test your production-ready web pages simultaneously on multiple devices. You can see how
your web page reflows in various form factors and also test interactive features on your pages. All these without having
to install any mobile app or having to physically connect the devices to your desktop! Simply scan the auto generated
QR code with your devices and preview your web pages on the devices.
Live inspect, when triggered on desktop, reflects on all connected devices and helps you inspect various elements and
tweak the design as required.
For detailed information, see Preview and inspect web pages on multiple devices .

Visual Media Queries
Visual Media Query bars are a visual representation of the media queries present in a page. These bars help you visualize
your web page at different breakpoints and how different components of your web page reflow in different viewports.
While you view your page in different viewports, you can make design changes that are specific to a viewport without
affecting the page design in other viewports.

Last updated 6/3/2015

3
What's new

Visual Media Query consists of three bars as horizontal rows, each representing a category of media query:

•

Green: Media queries with max-width conditions

•

Blue : Media queries with both min-width and max-width conditions

•

Purple : Media queries with min-width conditions

For more information, see Visual Media Queries .

Support for linting code
With this new version of Dreamweaver, you can now debug your code for common errors using linting. Linting is the
process of analyzing code to flag potential errors or suspicious usage of code. Dreamweaver can lint HTML, CSS, and
JavaScript files when they are loaded, saved, or edited. The errors and warnings are then listed in the new Output panel.
For more information, see Lint code .

Support for Emmet
Are you an avid developer who types several lines of code in Dreamweaver? Save your time by using Emmet
abbreviations to code. Easy to remember and type, these abbeviations expand into full-fledged code in Code View when
you press the Tab key.
For detailed information, see Insert code using Emmet .

Last updated 6/3/2015

4
What's new

Preview in Code view
If you are working in Split view, you can see any changes to images or colors instantly in Live or Design view. But, when
you prefer to work only in Code view, images are just filenames, which tend to be unintuitive most often. Colors (unless
predefined colors are used), too, are only a set of obscure set of numbers. With this version of Dreamweaver, you can
quickly preview images and colors right within Code view. This feature helps you make a visual connection between
the image filenames and the color formats with the actual image or color they represent. As a result, you can take design
decisions faster and cut down the development time significantly.
For more information, see Preview images and colors in Code view .

The Code view also displays an error preview. The line number of the erroneous code is highlighted in red. When you
hover your mouse over the number, a brief description of the error is displayed.
Note: Only the first error in the line is displayed. If the line contains only a warning, the description of the warning is
displayed. If the line contains a warning and an error, only the error description is displayed.

New code snippets
Snippets are portions of code that you can reuse repeatedly in your projects. This release of Dreamweaver provides new
and updated code snippets:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
Last updated 6/3/2015

5
What's new

• HTML_Snippets
• JavaScript Snippets (updated)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets
For information on using code snippets, see Work with code snippets.

Bootstrap integration
Bootstrap is the most popular, free, HTML, CSS, and JavaScript framework for developing responsive, mobile-first
websites. The framework includes responsive CSS and HTML templates for buttons, tables, navigation, image
carousels, and other elements that you can use on your web page. A few optional JavaScript plug-ins too are available,
which enable developers with even basic coding knowledge to develop great responsive websites.
Dreamweaver lets you create Bootstrap documents and also edit existing web pages created using Bootstrap. You can
begin designing your Bootstrap website using one of the Bootstrap starter templates that you can choose from the New
Document dialog box (Starter Templates > Bootstrap Templates).

• Bootstrap-Agency
• Bootstrap-eCommerce
• Bootstrap-Portfolio
• Bootstrap-Product
• Bootstrap-Real Estate
• Bootstrap-Resume
You can also create a custom Bootstrap document from the New Document dialog box (New Document > Bootstrap).
Then, build the website brick-by-brick using Bootstrap components such as accordions and carousels using the Insert
panel in Dreamweaver. Or, if you have Photoshop comps, use Extract to bring in images, fonts, styles, text, and more
into your Bootstrap document.

Last updated 6/3/2015

6
What's new

Whether it is a fully designed Bootstrap file or a work-in-progress design, you can edit them in Dreamweaver to not
only edit code, but also use visual editing features such as Live View editing, visual CSS designer, Visual Media Queries,
and Extract to make design changes.
Note: You can open websites created using only Bootstrap framework version 3 and later in Dreamweaver.
For detailed information, see Working with Bootstrap files .

Support for editing tables in Live view
You can edit tables in Live view easily and quickly using one or a combination of the following options:

• Formatting options in Element Display
• Modify > Table menu
Note: Modify menu is now enabled in Live view.

For more information, see Resize a tableand Format tables and cells.

New menus in Live view
The editing capabilites in Live view have now become better with the following menus available in Live view:

• Modify

Last updated 6/3/2015

7
What's new

• Format
• Commands
• Site
• 'Paste Special' option in Edit and context menu

Support for jQuery UI elements in Live view
Using the Insert panel, you can now directly insert jQuery widgets in Live view. Drag the required element from the
Insert panel on to Live view and hold your mouse to use one of the following features to insert:

• Live Guides: These guides appear as you hover over the elements in Live view after dragging the required element
from the Insert panel. Using Live Guides, you can insert elements at the top or bottom, or to the left or right of an
element in focus.
• DOM icon: The DOM icon appears when you pause for a brief while when the Live Guides appear. Click the icon
to view the DOM structure in a pop-up and drop the element at a precise location in the document structure.
• Position Assist: Position Assist helps you position the element before, after, or nest within the element in focus (in
Live view).
Note: The features above are displayed based on the element you choose to insert.
For more information, see Insert elements directly in Live view .

DOM panel
Element Quick View is now replaced with the DOM panel (Windows > DOM). The DOM panel provides all the
functionalities that Element Quick View provided and more. This panel is available in all workspaces and is persistent,
which means, you can open two documents, open, and access their DOM panels simultaneously.
Using the DOM panel, you can:

• Drag elements from the Insert panel to insert them precisely in the document structure.
• Copy, paste, duplicate, move, or delete structural elements in the document.
• View any element on the page in context with the document structure - the element in focus is highlighted in the
DOM panel.

For detailed information on using the DOM panel and editing the HTML structure using the panel, see DOM panel.

Last updated 6/3/2015

8
What's new

SVG code hints in HTML documents
Code hints for all SVG elements and attributes are now supported in HTML documents. Using these code hints, you
can now add SVG elements in Code view of HTML documents just like you add in an SVG document.

Technology Previews
Starting with this release, the Dreamweaver team provides previews of certain features to gather customer feedback.
Based on the feedback, these features will be improved upon further and included as core features of Dreamweaver. You
can access such features from the Technology Previews category of the Preferences dialog box.
The preview feature in this release is Code Highlighting. This feature highlights all occurences of any selected text in
Code view.

To use this feature, perform the following steps:
1 Go to Preferences > Technology Previews.
2 Enable Code Highlighting. Then, click Apply and Close to close the Preferences dialog box.
3 Open the document in which you want to use code highlighting. You can use code highlighting in any type of

document, such as, HTML, JS, CSS, and LESS.
4 In Code view, double-click the text - tag, word, or phrase - that needs to be highlighted.

All occurences of the selected text are highlighted in Code view.
You can navigate between the highlighted text using the following keyboard shortcuts:

• Move forward: F3 (Win); Cmd+G (Mac)
• Move backward: Shift+F3 (Win); Cmd+Shift+G (Mac)

Last updated 6/3/2015

9
What's new

Custom preview in Code view using showPreview API
With this release of Dreamweaver, you can generate a custom preview popup that gets displayed when you hover your
mouse over the code in Code view. To implement customized previews, you can use the new API, showPreview, along
with the existing mm:browsercontrol API. For example, you can use these APIs to display a preview of all the
parameters of a JavaScript function when you hover your mouse over the name of the function.

Code folding
In previous versions of Dreamweaver, you had to select code blocks in Code view and then collapse them. In this
version and later, you can collapse code blocks by simply hovering over the line numbers and clicking the triangle that
appears.
Code folding (collapsing) is available in HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML, and SVG files and is based on
tag blocks.
The Copy, Cut, Paste, and drag-and-drop actions retain the code folding state. For example, when you copy a code block
that is collapsed, the Paste action pastes the copied text as a collapsed block.
In HTML files, unlike the earlier code collapse functionality, the collapsed content now contains the closing tag and is
rendered differently. Also, the number of characters displayed in a collapsed code block is now increased. This helps
you to preview the initial attributes, if any.
For detailed information, see Collapsing code.

Extract enhancements
• Extract for devices
• Support for % units

Extract for devices
Devices not only vary in sizes, but also in resolutions. Your plan for a responsive web design must account for multiple
resolution versions of images that are rendered appropriately on devices. However, it can be a daunting task to create
so many different resolution versions for all the images in your project.
Extract in Dreamweaver eases up this task to a large extent. While extracting an image from your Photoshop comp in
the 2015 release of Dreamweaver, you can choose to extract different resolution versions of that image too. The image
in Photoshop is automatically scaled in different, predefined resolutions during extraction.
You can then call these images in JavaScript or media queries to display them based on the device they are viewed upon.
For example, for high density retina display, you can use the 2X version of the image.
For more information, see Extract images from PSD files .

Last updated 6/3/2015

10
What's new

Support for % units
In the Extract panel, you can now view the width and height of images in % values in addition to pixels. You can also
view the measurements in %.
When you click an asset in the Extract panel, the pop-up that appears provides you an option to switch between pixels
and %. The unit you select in this pop-up is retained when you view measurements between assets.

Enhancements to Live view editing

Last updated 6/3/2015

11
What's new

Nested Insert in Live View
Now, you can insert elements within other elements in Live view. When you drag elements from the Insert panel, Asset
panel, or within Live view, and hover over different elements on the page, you will notice the visual feedback for nesting
elements (along with before and after guides).

• Before/After guides: When you hover over top and bottom 30% of the element.
• Nesting visual feedback: When you hover over the middle 40% of the element.

Editing Selectors directly in Element Display
You can now simply click the name of the Selector in Element Display to edit it. You can commit the changes by clicking
anywhere on the page.

Coding toolbar changes
The following options in the Coding toolbar related to collapsing code have been removed:

• Collapse Full Tag
• Collapse Selection
Note: These options have been removed from the right-click context menu and the Edit menu as well. You can now
Collapsing codeby hovering your mouse over the line number and clicking the triangle that appears. Also, the following
options are now not available for HTML, CSS, and JS files.

• Highlight Invalid Code
• Syntax Error Alerts in Info Bar
You can now use linting to find errors in the code and the Output panel displays the linting results.

CSS Designer improvements
• All and Current modes
• Code hints
• Color coding for media queries
• Other changes

All and Current modes
CSS Designer now provides two different modes of viewing and editing CSS properties:

• All: All the CSS, media queries, and selectors in the current document are listed in this mode. This mode is not
sensitive to the selection in Design or Live view.

Last updated 6/3/2015

12
What's new

This mode is optimal if you want to create CSS, media queries, or selectors.

• Current: Computed styles for any element selected in Design or Live view are listed in this mode. In a CSS file, if
the focus is on a selector, this mode displays the properties of that selector.
This mode is optimal if you want to edit the properties of selectors associated with the element selected in the
document.

Code hints
Dreamweaver now displays code hints in CSS Designer, similar to Code view, for setting new properties.
Note: Options that have further action associated with them, such as manage fonts, color picker, and browse, are not
available in CSS Designer.

Color coding for media queries
Media queries in the CSS Designer panel are now color coded to match Visual Media Queries .

•

Green: Media queries with max-width conditions

•

Blue : Media queries with both min-width and max-width conditions

•

Purple : Media queries with min-width conditions

Last updated 6/3/2015

13
What's new

Other changes
• Show Set option: The Show Set check box in the Properties section is now selected by default when you first launch
Dreamweaver. Any change to this option (select or unselect) is persistent in all the subsequent Dreamweaver
sessions.
• The panel scrolls to display Add Property at the center: When you click + in the Properties section, the section
scrolls so that the Add Property row is displayed at the center of the panel. If Properties section is too small, add
property row is displayed at the bottom of the panel.
• Background highlighting while adding new property: When the focus is on the Add New Property text box, the
row is highlighted in grey background.
• Change in the position of + and - buttons: + and - buttons that appear in each pane in the CSS Designer panel are
moved from extreme right to extereme left to make them more visible.
• Custom category is renamed: The category name for Custom properties is changed More.

Testing server workflow changes
The testing server workflow improvements in this release aim to make editing of documents with server-side code in
Live view easy and seamless.

Changes in server setup
Unlike the previous versions of Dreamweaver, you can now designate a specific server as either a testing server or a
remote server, and not both. Check boxes in the user interface of server setup are replaced with radio buttons to enforce
the specification of servers.
If you import a site into Dreamweaver CC 2015, which has a single server specified as both testing and remote server,
a duplicate entry of the server is created. Then, one is marked as remote and the other is marked as testing server.

Automatic pushing of dynamic files
Dreamweaver now automatically syncs dynamic documents to your testing server when you open, create, or save
changes made to dynamic documents. Dreamweaver no longer displays "Update Testing Server" or "Push Dependent
Files" dialog boxes for testing server workflows.
For more information, see Set up a testing server .

Last updated 6/3/2015

14
What's new

Changes to Business Catalyst workflow
Business Catalyst extension is retired and will not be available for use with Dreamweaver CC 2015 release and later.
Dreamweaver CC 2014.1.1 is the last release that is compatible with the Business Catalyst extension.
To use Business Catalyst with Dreamweaver CC 2015 release and later, use the SFTP connection option in
Dreamweaver. For more information see the Business Catalyst documentation.
Here's the official announcement on this change on the Business Catalyst website.

Other changes
• Insert panel is reorganized to group all options in Common, Layout ,and Media categories into a more logical
category - HTML.
• Mini tour videos and the link to launch them from Help menu are removed. This option is not available for nonEnglish locales too.
• The options present in the document bar drop-down at the bottom of a page are cleaned up - only Orientation, Full
Size, and Edit Sizes options are available now.

Last updated 6/3/2015

Chapter 2: Workspace and workflow

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 site. (See About Dreamweaver
sites.)
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 Managing files and foldersand Managing assets and libraries.)
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 Fluid Grid layouts or default templates to get started. You
can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the
template changes. If you want to display multiple elements at once in a browser, you can use frames to lay out your
documents. (See Creating pages with CSS and Laying out pages with CSS.)
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 tools for maximizing website
performance and for testing pages to ensure compatibility with different web browsers. (See Adding content to pages.)
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.)
Set up a web application for dynamic content

Last updated 6/3/2015

16
Workspace and workflow

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.)
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 on to 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. (See Making pages dynamic.)
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.)

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.

A Application bar B Extract panel C Document toolbar D Document window E Workspace switcher F Panel groups G Live View H Code View
I Tag selector

Workspace elements overview
The workspace includes the following elements:

Last updated 6/3/2015

17
Workspace and workflow

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 accessing learn and help content for users with varying
skill levels and read about the new features in the current and past releases. Welcome Screen lets you create a new Starter
Template too.
The Application bar Is across the top of the application window and 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, Live view, and Code view), various viewing options, and some common operations such as previewing in
a browser.
The Standard toolbar To display the Standard toolbar, select View > Toolbars > Standard. The 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.
The Coding toolbar (Displayed in Code view only.) Contains buttons that let you perform many standard coding

operations.
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 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 contents.
Panels Help you monitor and modify your work. Examples include the Insert panel, the CSS Designer panel, and the
Files panel. To expand a panel, double-click its tab.
The Extract panel Lets you upload and view your PSD files on Creative Cloud. Using this panel, you can extract CSS,

text, images, fonts, colors, gradients, and measurements from your PSD comps into your document.
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.

Document window overview
The Document window shows the current document. To switch to a document, click its tab.
You can select any of the following views:
Live view (View > Live 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. You can edit HTML elements
directly in Live View and instantly preview your changes in the same view as well. For more information on editing in
Live View, see Edit in Live View.
Design view (View > Design) 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.

Last updated 6/3/2015

18
Workspace and workflow

Code view (View > Code) A hand-coding environment for writing and editing HTML, JavaScript, and any other kind

of code.
Split Code view (View > Split Code) 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 (View > Code And Design) Lets you see both Code view and Design view for the same

document in a single window.
Live Code view (View > Live Code) 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 have made changes that
you haven’t saved yet.
Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you
are 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.

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.

A Code view B Show Live and Code view C Live view D Go to Inspect mode E Show Live view source in Code view F Refresh G File path and
name H Preview/Debug in browser I Live view options J File management

The following options appear in the Document toolbar:
Code View Displays only the Code view in the Document window.
Show Live and Code Views Splits the Document window between the Code and the Live/Design views. Design view

option is not available for fluid grid documents.
Live View Displays an interactive, browser-based view of the document. You can also edit HTML elements in Live
View. The drop-down list adjacent to the Live options lets you switch between Live and Design views. This drop-down
list is not available in fluid grid documents.
Preview/Debug in Browser Allows you to preview or debug your document in a browser. Select a browser from the

pop-up menu.
File Management Displays the File Management pop-up menu.

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.

Last updated 6/3/2015

19
Workspace and workflow

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. 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.

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.

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 displayed.

You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding). For information on
the different options available in the toolbar, see Insert code using the Coding toolbar.
You can also edit the Coding toolbar to display more buttons (such as 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.

Last updated 6/3/2015

20
Workspace and workflow

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

A Tag selector B Mobile size C Tablet size D Desktop size E Window size

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 to select the entire body of the document. To set the class or ID attributes for a tag in the tag
selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from the context menu.
Mobile size
Shows a preview of the document in mobile size - 480 X 800 by default. To change the default size, click Window Size
pop-up menu > Edit Sizes.
Tablet size
Shows a preview of the document in tablet size - 768 X 1024 by default. To change the default size, click Window Size
pop-up menu > Edit Sizes.
Desktop size
Shows a preview of the document in desktop size - 1000 px width by default. To change the default size, click Window
Size pop-up menu > Edit Sizes.
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.

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.

Last updated 6/3/2015

21
Workspace and workflow

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 drop-down list at the
top.

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:
Common Lets you create and insert the most commonly used elements such as div tags and objects, such as images,

and tables.
Structure Lets you insert structural elements such as div tags, headings, lists, paragraphs, headers, and footers.
Media Lets you insert media elements such as Edge Animate composition, HTML5 audio and video, and Flash audio

and video.
Form Contains buttons for creating forms and inserting form elements, such as search, month, and password.
jQuery Mobile Contains buttons for building sites that use jQuery Mobile.
jQuery UI Lets you insert jQuery UI elements such as accordion, sliders, and buttons.
Templates Lets you save the document as a template and mark specific regiions as editable, optional, repeating, or

editable optional regions.
Favorites Lets you group and organize the Insert panel buttons you use the most in one common place.

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

Last updated 6/3/2015

22
Workspace and workflow

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.
The folders in the Files panel are displayed in different colors based on the view - Local, Remote, or Testing.
Local view

Remote Server view

Last updated 6/3/2015

23
Workspace and workflow

Testing Server view

Repository view

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.

CSS Designer
CSS Designer panel (Windows > CSS Designer) is a CSS Property Inspector that lets you 'visually' create CSS styles,
files, and set properties, along with media queries.

Last updated 6/3/2015

24
Workspace and workflow

The CSS Designer panel consists of the following panes:
Sources Lists all the CSS style sheets associated with the document. Using this pane, you can create and attach a CSS

to the document, or define styles within the document.
@Media Lists all the media queries in the source selected in the Sources pane. If you do not select a specific CSS, this
pane displays all the media queries associated with the document.
Selectors Lists all the selectors in the source selected in the Sources pane. If you also select a media query, this pane
narrows down the list of selectors for that media query. If no CSS or media queries are selected, this pane displays all
the selectors in the document.

When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected
source are displayed.
Properties Displays properties that you can set for the specified selector. For more information, see Set properties .

Last updated 6/3/2015

25
Workspace and workflow

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.

More Help topics
Working in the Document window
About Live view
Open Related Files
General information about coding in Dreamweaver
Preview pages in Live view
Setting coding preferences
View and edit head content
Using visual aids for layout
Previewing pages in Dreamweaver
Insert code with the Coding toolbar
Set window size and connection speed
Zoom in and out
Resize the Document window
Set download time and size preferences
Manage windows and panels
Use the Property inspector
Use the Insert panel
Work with files in the Files panel
Using visual aids for layout

Customizing the Dreamweaver workspace
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.

Last updated 6/3/2015

26
Workspace and workflow

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.
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.

Last updated 6/3/2015

27
Workspace and workflow

You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets
the edge of the workspace.

Move panels
As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can
move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you
drag to an area that is not a drop zone, the panel floats freely in the workspace.
Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the drop
zone, try dragging the mouse to the place where the drop zone should be.

• To move a panel, drag it by its tab.
• To move a panel group, drag the title bar.

A Title bar B Tab C Drop zone

Last updated 6/3/2015

28
Workspace and workflow

Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving
the panel to cancel the operation.

Add and remove panels
If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of
the workspace until a drop zone appears.

• To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from
the Window menu.
• To add a panel, select it from the Window menu and dock it wherever you want.

Manipulate panel groups
• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.

• To rearrange panels in a group, drag a panel’s tab to a new location in the group.
• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.
• To move a group, drag the title bar (the area above the tabs).

Stack floating panels
When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to
position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when
you drag the topmost title bar.

• To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.
• To change the stacking order, drag a panel up or down by its tab.
Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.

• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.

Resize panels
• To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the
tab area (the empty space next to the tabs).
• To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized
by dragging.

Last updated 6/3/2015

29
Workspace and workflow

Collapse and expand panel icons
You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the
default workspace.

• To collapse or expand all panel icons in a column, click the double arrow at the top of the dock.
• To expand a single panel icon, click it.
• To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text
disappears. To display the icon text again, make the dock wider.
• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.
In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an
expanded panel icon collapses automatically when you click away from it.

• To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically
collapsed to icons when added to an icon dock.)
• To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into
other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating
icons).

Save and switch workspaces
By saving the current size and position of panels as a named workspace, you can restore that workspace even if you
move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.

Last updated 6/3/2015

30
Workspace and workflow

Save a custom workspace
1 With the workspace in the configuration you want to save, do one of the following:

• (Illustrator) Choose Window > Workspace > Save Workspace.
• (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace.
• (Dreamweaver) Choose Window > Workspace Layout > New Workspace.
• (Flash) Choose New Workspace from the workspace switcher in the Application bar.
• (Fireworks) Choose Save Current from the workspace switcher in the Application bar.
2 Type a name for the workspace.
3 (Photoshop, InDesign) Under Capture, select one or more options:
Panel Locations Saves the current panel locations (InDesign only).
Keyboard shortcuts Saves the current set of keyboard shortcuts (Photoshop only).
Menus or Menu Customization Saves the current set of menus.

Display or switch workspaces
❖ Select a workspace from the workspace switcher in the Application bar.

In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.

Delete a custom workspace
• Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click
Delete. (The option is not available in Fireworks.)
• (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.
• (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete
icon.
• (Photoshop, InDesign) Choose Window > Workspace >Delete Workspace, select the workspace, and then click
Delete.

Restore the default workspace
1 Select the Default or Essentials workspace from the workspace switcher in the application bar. For Fireworks, see

the article http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Note: In Dreamweaver, Designer is the default workspace.
2 For Fireworks (Windows), delete these folders:Windows

Vista\\Users\\AppData\Roaming\Adobe\Fireworks CS4\ Windows XP\\Documents and
Settings\\Application Data\Adobe\Fireworks CS4
3 (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].

(Photoshop) Restore a saved workspace arrangement
In Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved
arrangement of panels.

• To restore an individual workspace, choose Window > Workspace > Reset Workspace Name.

Last updated 6/3/2015

31
Workspace and workflow

• To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface
preferences.
To rearrange the order of workspaces in the application bar, drag them.

Display tabbed documents (Dreamweaver Macintosh)
You can view multiple documents in a single Document window by using tabs to identify each document. You can also
display them as part of a floating workspace, in which each document appears in its own window.

Open a tabbed document in a separate window
❖ Control-click the tab and select Move To New Window from the context menu.

Combine separate documents into tabbed windows
❖ Select Window > Combine As Tabs.

Change the default tabbed document setting
1 Select Dreamweaver > Preferences, and then select the General category.
2 Select or deselect Open Documents in Tabs, and click OK.

Dreamweaver does not alter the display of documents that are currently open when you change preferences.
Documents opened after you select a new preference, however, display according to the preference you selected.

Turn on color icons
By default, Dreamweaver CS4 and later uses black and white icons that turn into colored icons when you hover over
them. You can turn color icons on permanently so that no hovering is required.
❖ Do one of the following:

• Choose View > Color Icons.
• Switch to the Classic or Coder workspace.
To turn color icons off again, deselect Color Icons in the View menu, or switch to a different workspace.

Hide and display the Dreamweaver Welcome screen
The Welcome screen appears when you start Dreamweaver and anytime that you do not have any documents open. You
can choose to hide the Welcome screen, and then later display it again. When the Welcome screen is hidden and no
documents are open, the Document window is blank.

Hide the Welcome screen
❖ Select the Don’t Show Again option on the Welcome screen.

Display the Welcome screen
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category, select the Show Welcome Screen option.

Last updated 6/3/2015

32
Workspace and workflow

About customizing Dreamweaver in multiuser systems
You can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows XP or Mac
OS X.
Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration.
To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that it
recognizes, the application creates copies of a variety of configuration files. These user configuration files are stored in
a folder that belongs to you.
For example, in Windows XP, they’re stored in C:\Documents and Settings\username\Application
Data\Adobe\Dreamweaver\en_US\Configuration, which is hidden by default. To show hidden files and folders, select
Tools > Folder Options in Windows Explorer, click the View tab, and select the Show Hidden Files and Folders option.
In Windows Vista, they’re stored in C:\Users\username\AppData\Roaming\Adobe\Dreamweaver
\en_US\Configuration, which is hidden by default. To show hidden files and folders, select Tools > Folder Options in
Windows Explorer, click the View tab, and select the Show Hidden Files and Folders option.
In Mac OS X, they’re stored inside your Home folder; specifically, in Users/username/Library/Application
Support/Adobe/Dreamweaver/Configuration.
If you reinstall or upgrade Dreamweaver, Dreamweaver automatically makes backup copies of existing user
configuration files, so if you customized those files by hand, you still have access to the changes you made.

Set General preferences for Dreamweaver
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Set any of the following options:
Open Documents In Tabs Opens all documents in a single window with tabs that let you switch between documents

(Macintosh only).
Show Welcome Screen Displays the Dreamweaver Welcome screen when you start Dreamweaver or when you don’t

have any documents open.
Reopen Documents on Startup Opens any documents that were open when you closed Dreamweaver. If this option

is not selected, Dreamweaver displays the Welcome screen or a blank screen when you start (depending on your
Show Welcome Screen setting).
Warn When Opening Read-Only Files Alerts you when you open a read-only (locked) file. Choose to unlock/check

out the file, view the file, or cancel.
Enable Related Files Lets you see which files are connected to the current document (for example, CSS or JavaScript
files). Dreamweaver displays a button for each related file at the top of the document, and opens the file if you click
the button.
Discover Dynamically-Related Files Lets you select whether Dynamically-Related Files appear in the Related Files

toolbar automatically, or after manual interaction. You can also choose to disable the discovery of DynamicallyRelated Files.
Update Links When Moving Files Determines what happens when you move, rename, or delete a document within

your site. Set this preference to always update links automatically, never update links, or prompt you to perform an
update. (See Update links automatically.)
Show Dialog When Inserting Objects Determines whether Dreamweaver prompts you to enter additional

information when inserting images, tables, Shockwave movies, and certain other objects by using the Insert panel
or the Insert menu. If this option is off, the dialog box does not appear and you must use the Property inspector to

Last updated 6/3/2015

33
Workspace and workflow

specify the source file for images, the number of rows in a table, and so on. For roll over images and Fireworks
HTML, a dialog box always appears when you insert the object, regardless of this option setting. (To temporarily
override this setting, Control-click (Windows) or Command-click (Macintosh) when creating and inserting
objects.)
Enable Double-Byte Inline Input Lets you enter double-byte text directly into the Document window if you are
using a development environment or language kit that facilitates double-byte text (such as Japanese characters).
When this option is deselected, a text input window appears for entering and converting double-byte text; the text
appears in the Document window after it is accepted.
Switch To Plain Paragraph After Heading Specifies that pressing Enter (Windows) or Return (Macintosh) at the end

of a heading paragraph in Design or Live view creates a new paragraph tagged with a p tag. (A heading paragraph
is one that’s tagged with a heading tag such as h1 or h2.) When the option is disabled, pressing Enter or Return at
the end of a heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type
multiple headings in a row and then go back and fill in details).
Allow Multiple Consecutive Spaces Specifies that typing two or more spaces in Design or Live view creates

nonbreaking spaces that appear in a browser as multiple spaces. (For example, you can type two spaces between
sentences, as you would on a typewriter.) This option is designed mostly for people who are used to typing in word
processors. When the option is disabled, multiple spaces are treated as a single space (because browsers treat
multiple spaces as single spaces).
Use and in Place of and Specifies that Dreamweaver applies the strong tag whenever you

perform an action that would normally apply the b tag, and applies the em tag whenever you perform an action that
would normally apply the i tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector
in HTML mode and choosing Format > Style > Bold or Format > Style > Italic. To use the b and i tags in your
documents, deselect this option.
Note: The World Wide Web Consortium discourages use of the b and i tags; the strong and em tags provide more
semantic information than the b and i tags do.
Warn when placing editable regions within or
-
tags Specifies whether a warning message is

displayed whenever you save a Dreamweaver template that has an editable region within a paragraph or heading tag.
The message tells you that users will not be able to create more paragraphs in the region. It is enabled by default.
Centering Specifies whether you want to center elements using divalign="center" or the center tag when you click

the Align Center button in the Property inspector.
Note: Both of these approaches to centering have been officially deprecated as of the HTML 4.01 specification; you
should use CSS styles to center text. Both of these approaches are still technically valid as of the XHTML 1.0 Transitional
specification, but they’re no longer valid in the XHTML 1.0 Strict specification.
Maximum Number of History Steps Determines the number of steps that the History panel retains and shows. (The

default value should be sufficient for most users.) If you exceed the given number of steps in the History panel, the
oldest steps are discarded.
For more information, see Task automation.
Spelling Dictionary lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling
conventions (such as American English and British English), the dialects are listed separately in the Dictionary
pop-up menu.

Last updated 6/3/2015

34
Workspace and workflow

Set Fonts preferences for documents in Dreamweaver
A document’s encoding determines how the document appears in a browser. Dreamweaver font preferences let you
view a given encoding in the font and size you prefer. The fonts you select in the Fonts Preferences dialog, however,
only affect the way fonts appear in Dreamweaver; they do not affect the way the document appears in a visitor’s browser.
To change the way fonts appear in a browser, you need to change the text by using the Property inspector or by applying
a CSS rule.
For information on setting a default encoding for new documents, see Creating and opening documents.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Fonts from the Category list on the left.
3 Select an encoding type (such as Western European or Japanese) from the Font Settings list.

Note: To display an Asian language, you must be using an operating system that supports double-byte fonts.
4 Select a font and size to use for each category of the selected encoding.

Note: To appear in the font pop-up menus, a font must be installed on your computer. For example, to see Japanese text
you must have a Japanese font installed.
Proportional Font The font that Dreamweaver uses to display normal text (for example, text in paragraphs,
headings, and tables). The default depends on your system’s installed fonts. For most U.S. systems, the default is
Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on Mac OS.
Fixed Font The font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your
system’s installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco
12 pt. on Mac OS.
Code View The font used for all text that appears in the Code view and Code inspector. The default depends on your

system’s installed fonts.

Customize Dreamweaver highlighting colors
Use the Highlighting preferences to customize the colors that identify template regions, library items, third-party tags,
layout elements, and code in Dreamweaver.

Change a highlighting color
1 Select Edit > Preferences and select the Highlighting category.
2 Beside the object you want to change the highlighting color for, click the color box, and then use the color picker to

select a new color, or enter a hexadecimal value.

Activate or deactivate highlighting for an object
1 Select Edit > Preferences and select the Highlighting category.
2 Beside the object you want to activate or deactivate highlighting color for, select or deselect the Show option.

Restore default preferences
For procedures on restoring default Dreamweaver preferences, see Tech Note 83912.

Last updated 6/3/2015

35
Workspace and workflow

More Help topics
Workspace layout overview
Update links automatically
Understanding document encoding
Use the color picker
Change the highlight color of div tags

Working in the Document window
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.

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.)
Note: Design view option is not available for fluid grid documents.

Switch to Code view
❖ Do one of the following:

• Select View > Code.
• In the Document toolbar, click the Code 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
In the Document toolbar, click the drop-down list adjacent to Live option and click Design. To switch to full Design
view, click the Design button.

Show both Code and Design views
In the Document toolbar, click the Split button. Then, click the drop-down list adjacent to Live option and click Design.

Split views vertically or horizontally
1 Make sure that you are in the Split view (Split Code or split Design/Live view).

Last updated 6/3/2015

36
Workspace and workflow

2 To split the view vertically, select View > Split Vertically. To split the view horizontally, deselect View > Split

Vertically.

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

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.
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.

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.

Last updated 6/3/2015

37
Workspace and workflow

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
in the upper right
document when it's maximized. To de-maximize the document, click the de-maximize button
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.

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 Window Sizes from the Category list on the left.
3 Customize the Window Sizes as required.

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.

Last updated 6/3/2015

38
Workspace and workflow

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

Note: Support for ColdFusion is removed in Dreamweaver CC and later.

More Help topics
Document window overview
Preview pages in Live view
Manage windows and panels
Display tabbed documents (Dreamweaver Macintosh)
Status bar overview

Using toolbars, inspectors, and context menus
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.

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.
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.

Use the Property inspector
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(s) selected.
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.

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.

Last updated 6/3/2015

39
Workspace and workflow

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 Property inspector.
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.

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.

Last updated 6/3/2015

40
Workspace and workflow

More Help topics
Document toolbar overview
Standard toolbar overview
Coding toolbar overview
Style Rendering toolbar overview
Property inspector overview
Set text properties in the Property inspector
Dock and undock panels
Change attributes with the Tag inspector

Use the Insert panel
The Insert panel contains buttons for creating and inserting objects such as tables and images. The buttons are
organized into categories.
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.

Hide or show the Insert panel
❖ Select Window > Insert.

Note: If you are working with certain types of files, such as XML, JavaScript, Java, and CSS, the Insert panel and the
Design view option are dimmed because you cannot insert items into these code files.

Show the buttons in a particular category
❖ Select the category name from the Category pop-up menu. For example, to show buttons for the Layout category,

select Layout.

Display the pop-up menu for a button
❖ Click the down arrow beside the button’s icon.

Last updated 6/3/2015

41
Workspace and workflow

Insert an object
1 Select the appropriate category from the Category pop-up menu of the Insert panel.
2 Do one of the following:

• Click an object button or drag the button’s icon into the Document window (into Design, Live, or Code View).
• Click the arrow on a button, then select an option from the menu.

Last updated 6/3/2015

42
Workspace and workflow

Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to
a file or specify parameters for an object. Or, Dreamweaver may insert code into the document, or open a tag
editor or a panel for you to specify information before the code is inserted.
For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you
insert the object in Code view. For a few objects, inserting the object in Design view causes Dreamweaver to
switch to Code view before inserting the object.
Note: Some objects, such as named anchors, are not visible when the page is viewed in a browser window. You can
display icons in Design view that mark the locations of such invisible objects.

More Help topics
Insert elements directly in Live View

Bypass the object-insertion dialog box and insert an empty placeholder
object
❖ Control-click (Windows) or Option-click (Macintosh) the button for the object.

For example, to insert a placeholder for an image without specifying an image file, Control-click or Option-click the
Image button.
Note: This procedure does not bypass all object-insertion dialog boxes. Many objects, including AP elements and
framesets, do not insert placeholders or default-valued objects.

Modify preferences for the Insert panel
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category of the Preferences dialog box, deselect Show Dialog When Inserting Objects to suppress

dialog boxes when you insert objects such as images, tables, scripts, and head elements or by holding down the
Control key (Windows) or the Option key (Macintosh) while creating the object.
When you insert an object with this option off, the object is given default attribute values. Use the Property inspector
to change object properties after inserting the object.

Add, delete, or manage items in the Favorites category of the Insert panel
1 Select any category in the Insert panel.
2 Right-click (Windows) or Control-click (Macintosh) in the area where the buttons appear, and then select

Customize Favorites.
3 In the Cutomize Favorite Objects dialog box, make changes as necessary, and click OK.

• To add an object, select an object in the Available Objects pane on the left, and then click the arrow between the
two panes or double-click the object in the Available Objects pane.
Note: You can add one object at a time. You cannot select a category name, such as Common, to add an entire category
to your favorites list.

• To delete an object or separator, select an object in the Favorite Objects pane on the right, and then click the
Remove Selected Object in Favorite Objects List button above the pane.
• To move an object, select an object in the Favorite Objects pane on the right, and then click the Up or Down
arrow button above the pane.

Last updated 6/3/2015

43
Workspace and workflow

• To add a separator below an object, select an object in the Favorite Objects pane on the right, and then click the
Add Separator button below the pane.
4 If you’re not in the Favorites category of the Insert panel, select that category to see your changes.

Insert objects using buttons in the Favorites category
❖ Select the Favorites category from the Category pop-up menu of the Insert panel, and then click the button for any

Favorites object that you added.

Display the Insert panel as a horizontal Insert bar
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).
1 Click the Insert panel’s tab and drag it to the top of the Document window.

2 When you see a horizontal blue line across the top of the Document window, drop the Insert panel into position.

Note: The horizontal Insert bar is also a default part of the Classic workspace. To switch to the Classic workspace, select
Classic from the workspace switcher in the Application bar.

Return the horizontal Insert bar to a panel group
1 Click the horizontal Insert bar’s gripper (on the left side of the Insert bar) and drag the bar to the place where your

panels are docked.

Last updated 6/3/2015

44
Workspace and workflow

2 Position the Insert panel and drop it. A blue line indicates where you can drop the panel.

Show horizontal Insert bar categories as tabs
❖ Click the arrow beside the category name on the left end of the horizontal Insert bar, and then select Show as Tabs.

Show horizontal Insert bar categories as a menu
❖ Right-click (Windows) or Control-click (Macintosh) a category tab in the horizontal Insert bar, and then select

Show as Menus.

More Help topics
Insert panel overview
Edit tags with Tag editors
Select and view elements in the Document window

CSS Designer panel
CSS Designer panel (Windows > CSS Designer) is a CSS Property Inspector that lets you 'visually' create CSS styles,
files, and set properties, along with media queries.
Watch video
Use the visual CSS editor in Dreamweaver (8 min)

Last updated 6/3/2015

45
Workspace and workflow

Note: You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. The changes
are automatically reflected in Live View and the relevant CSS file is also refreshed. To let you know that the related file has
changed, the affected file’s tab is highlighted for a while (around 8 seconds).
The CSS Designer panel consists of the following panes and options:
All Lists all the CSS, media queries, and selectors in the current document. This mode is not sensitive to the selection.

This means, when you select an element on the page, the associated selector, media query, or CSS are not highlighted
in CSS Designer.
Use this option to begin with creating your selectors or media queries.
Current Lists all the computed styles for any selected element in Design or Live view of the current document. When

you use this mode for a CSS file in Code view, all the properties for the selector in focus are displayed.
Use this option to edit the properties of selectors associated with selected elements in the document.
Sources Lists all the CSS style sheets associated with the document. Using this pane, you can create and attach a CSS

narrows down the list of selectors for that media query. If no CSS or media queries are selected, this pane displays all
the selectors in the document.
When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected
source are displayed.
Properties Displays properties that you can set for the specified selector. For more information, see Set properties .

CSS Designer is context-sensitive. This means, for any given context or selected page element, you can view the
associated selectors and properties. Further, when you select a selector in CSS Designer, the associated source and
media queries are highlighted in the respective panes.
Note: When you select a page element, 'Computed' is selected in the Selectors pane. Click a selector to view the associated
source, media query, or properties.
To view all the selectors, you can choose All Sources in the Sources pane. To view selectors that do not belong to any
media query in the selected source, click Global in the @Media pane.

More Help topics
Laying out pages with CSS
CSS3 transition effects

More Help topics
Add style to web pages with the CSS Designer panel

More Help topics
Using the CSS Designer panel

Last updated 6/3/2015

46
Workspace and workflow

Create and attach style sheets
1 In the Sources pane of the CSS Designer panel, click

, and then click one of the following options:

• Create a New CSS File: To create and attach a new CSS file to the document
• Attach Existing CSS File: To attach an existing CSS file to the document
• Define in Page: To define a CSS within the document
Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes appear.
2 Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file.
3 Do one of the following:

• Click Link to link the Dreamweaver document with the CSS file
• Click Import to import the CSS file into the document.
4 (Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file.

Define media queries
1 In the CSS Designer panel, click a CSS Source in the Sources pane.
2 Click

in the @Media pane to add a new media query.

The Define Media Query dialog box appears and lists all the media query conditions supported by Dreamweaver.
3 Select the Conditions as per your requirements. For detailed information on the media queries, see this article.

Ensure that you specify valid values for all the conditions you select. Else, corresponding media queries do not get
created successfully.
Note: Only 'And' operation is supported currently for multiple conditions.
If you add media query conditions through code, only the supported conditions are populated in the Define Media
Query dialog box. The Code text box in the dialog box, however, displays the code completely (including unsupported
conditions).
If you click on a media query in the Design/Live view, the viewport switches to match the selected media query. To view
the full size viewport, click Global in the @Media pane.

Define CSS Selectors
1 In the CSS Designer, select a CSS source in the Sources pane or a media query in the @Media pane.
2 In the Selectors pane, click

. Based on the element selected in the document, CSS Designer smartly identifies and
prompts you with the relevant selector (upto three rules).
You can do one or more of the following:

Last updated 6/3/2015

47
Workspace and workflow

• To move a selector from one source to another, drag the selector to the required source in the Source pane.
• To duplicate a selector in the selected source, right-click the selector, and click Duplicate.
• To duplicate a selector and add it into a media query, right-click the selector, hover the mouse over Duplicate Into
Media Query, and then choose the media query.
Note: The Duplicate Into Media Query option is available only when the source of the selected Selector contains
media queries. You cannot duplicate a Selector from one source into a media query of another source.

Copy-paste styles
You can now copy styles from one selector and paste into another. You can copy all styles or copy only specific category
of styles such as Layout, Text, and Border.
Right-click a selector and choose from the available options:

• If a selector has no styles, Copy and Copy All Styles are disabled.
• Paste Styles is disabled for remote sites that cannot be edited. But Copy and Copy All styles is available.
• Pasting Styles that already exist partially on a selector (Overlapping) works. Union of all the selectors is pasted.
• Copy-paste Styles also works for different linkages of CSS files – Import, Link, Inline Styles.

Set CSS properties
The properties are grouped into the following categories and are represented by different icons at the top of the
Properties pane:

Last updated 6/3/2015

48
Workspace and workflow

Select the Show Set check box to view only the set properties. To view all the properties that you can specify for a
selector, deselect the Show Set check box.
To set a property, such as, width or border-collapse, click the required options displayed adjacent to the property in the
Properties pane. For information on setting gradient background or box controls such as margins, padding, and
position, see the following links:
Overridden properties are indicated using a strikethrough format.

More Help topics
Set margins, padding, and position
Apply gradients to background
Use Flexible Box layouts

Set margins, padding, and position
Using the box controls in CSS Designer's Properties pane, you can quickly set the margins, padding, and position
properties. If you prefer code, you can specify shorthand code for margin and padding in the quick edit boxes.

Click the values and type the required value. If you want all the four values to be the same and changed simultaneously,
click the link icon ( )at the center.
At any point in time, you can disable (
the right, top, and bottom values.

) or delete (

) specific values, for example, left margin value while retaining

Last updated 6/3/2015

49
Workspace and workflow

Set border properties
Border Control properties are organized into logical tabs to help you quickly view or modify the properties.

If you prefer code, you can specify shorthand code for borders and border radius in the quick edit text box.
To specify the Border Control properties, first set the properties in the 'All Sides' tab. The other tabs are then enabled
and the properties set in the 'All Sides' tab are reflected for individual borders.
When you change a property in the individual border tabs, the value of the corresponding property in the 'All Sides'
tab changes to 'undefined' (default value).
In the example below, the border color was set to black and then changed to red for the Top border.

Last updated 6/3/2015

50
Workspace and workflow

Border color set to black for all sides

Last updated 6/3/2015

51
Workspace and workflow

The code that is inserted is based on the preference setting for shorthand or longhand.
Delete and disable controls are available for individual properties as before Dreamweaver CC 2014. Now, you can use
the delete and disable controls at the Border Control group level to apply these actions to all the properties.

During Inspect, the tabs are focused based on the priority of the "set" tabs. The highest priority is for "All sides" tab
followed by "Top", "Right", "Bottom" and "Left". For example, if only the top value for a border is set, the computed mode
takes the focus to the "Top" tab ignoring the "All sides" tab because "All sides" tab is not set.

Disable or delete properties
The CSS Designer panel lets you disable or delete each property. The following screenshot shows the disable (
delete ( ) icons for the width property. These icons are visible when you hover your mouse on the property.

Keyboard shortcuts
You can add or delete CSS selectors and properties using keyboard shortcuts. You can also navigate between the
property groups in the Properties pane.
Shortcut

Workflow

CTRL + Alt +[Shift =]

Adds Selector (If control is in the selector section)

CTRL + Alt+ S

Add Selector (If control is anywhere in the application)

CTRL + Alt +[Shift =]

Adds Property (If control is in the property section)

Last updated 6/3/2015

) and

52
Workspace and workflow

CTRL + Alt+ P

Adds Property (If control is anywhere in the application)

Select + Delete

Deletes selector, if selector is selected

CTRL + Alt + (PgUp/PgDn)

Jump between sections while in the properties subpanel

Identify page elements associated with a CSS Selector (13.1)
Most often, a single CSS Selector is associated with multiple page elements. For example, text in the main content of a
page, header, and footer text can all be associated with the same CSS Selector. When you edit the properties of the CSS
Selector, all the elements associated with the Selector are affected, including the ones that you do not intend to change.
Live Highlight helps you identify all the elements associated with a CSS Selector. If you want to change only one elment
or some of the elements, you can create a new CSS Selector for those elements, and then edit the properties.
To identify the page elements associated with a CSS Selector, hover your mouse over the Selector in Live View (with
Live Code 'off '). Dreamweaver highlights the associated elements with dotted lines.

To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border.

Last updated 6/3/2015

53
Workspace and workflow

To remove the blue highlight around the elements, the Selector again.
Note: The following table summarizes the scenarios where Live Highlight is not available.
Mode

Live Code

Live Highlight displayed?

Code

Design

Live

ON (button is pressed)

OFF

Yes

Disable Live Highlight
Live Highlight is enabled by default. To disable Live Highlight, click Live View options in Document Toolbar and click
Disable Live Highlight.

DOM panel
The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map
elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to
the HTML structure in the DOM panel and see the changes take effect instantly in Live View.

Step-by-step tutorial
How to visualize and visually modify your HTML structure in Dreamweaver (30 min)

To open the DOM panel, select Window > DOM. You can also use the keyboard keys - Ctrl + / (Win); Cmd + / (Mac)
- to open the DOM panel.
When you drag elments to directly insert them in Live View, the icon appears before you drop the element. You can
click this icon to open the DOM panel and insert the element at the appropriate position in the document structure.
For more information, see Inserting elements directly in Live View .
The DOM panel displays only static elements in Code or Design view, and both static and dynamic elements in Live
view.
In fluid grid documents, the DOM panel only lets you visualize the HTML DOM structure and does not let you edit
the HTML structure.
Note: You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade
of grey.

Last updated 6/3/2015

54
Workspace and workflow

You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock
the panel along with other panels.

How to use the DOM panel
1 Open the required document and then open the DOM panel by selecting Window > DOM.
2 Switch to Live view and click the element that you want to inspect or edit.

• The HTML markup of the selected element is highlighted in the DOM panel.
• The applied selector is highlighted in CSS Designer.
• The relevant code is highlighted in the Code view.
• The relevant tag is highlighted (in blue) in Tag Selector.
Alternatively, you can select an HTML element in the DOM panel. When you click any element in the DOM panel:

• Live View scrolls to the corresponding element.
• If Code View is open, the Code View scrolls to the code corresponding to the element.
• CSS Designer (Selectors pane) scrolls to the closest corresponding selector (similar to you clicking the element
in Live View).
• The tag is highlighted in the Tag Selector.
This syncing between different views and CSS Designer lets you visualize the HTML markup and styling associated
with the selected element at a glance.
3 Proceed to edit the element as required (HTML or CSS editing). For information on using the DOM panel to edit

the HTML markup, see Edit HTML structure using the DOM panel . For information on CSS Designer, see CSS
Designer panel.

Last updated 6/3/2015

55
Workspace and workflow

Edit HTML structure using the DOM panel
The current selected element on the page is highlighted in the DOM panel. You can navigate to any node or element
using the arrow keys.

• To select an element or a node, click the element or node. To expand or collapse an element or a node, click the
HTML tag or double-click the selector adjacent to the tag.
• To duplicate an element or a node, right-click the element or the node, and click Duplicate. When you duplicate an
element with an ID associated with it, the ID is incremented for the new (duplicate) element.
• To copy an element or a node, right-click the element or the node, and click Copy. If you have copied an element
with children, the child elements are also copied.
• To paste an element or a node, click the element or the node under which you want to nest the copied elements.
Then, right-click the element or the node and click Paste.
• To paste the copied element as a child of a specific element or node, right-click the element or node (parent), and
then click Paste As Child.
• To move or rearrange elements, drag the element to the required location within the DOM panel.
A green line appears to indicate where the dragged element will be positioned. If you drop the element over the element
highlighted in gray (reference element), then the dropped element is positioned as the first child of the reference
element.

• To delete an element or a node, right-click the element or the node, and click Delete.
You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
Keyboard shortcuts:

• Duplicate - Ctrl + D (Win)/ Cmd + D (Mac)
• Delete - Del or Backspace
• Copy - Ctrl + C (Win)/Cmd + C (Mac)
• Paste - Ctrl + V (Win)/Cmd + V (Mac)
• Undo - Ctrl + Z (Win)/Cmd + Z (Mac)
• Redo - Ctrl + Y (Win)/Cmd + Y (Mac)
Note: Typically, when a page is edited, the Refresh button in the Document toolbar changes to Stop button indicating that
the page is reloading. After the page is reloaded, the Refresh button appears again to indicate that the page has completely
loaded. When you make changes in the DOM panel, the page may take a while to reload even after the Refresh button
appears back again after changing to Stop button.

Last updated 6/3/2015

56
Workspace and workflow

A Location where the dragged element is placed B Reference element C Element being moved

Important: If your page contains JavaScript, the right-click menu in the DOM panel gets displayed for a while and then
becomes unavailable. To use the right-click menu, hide the Live View displays (Live View options > Hide Live View
Displays), and then disable JavaScript (Live View options > Disable JavaScript).

Search files based on filename or content | Mac OS
This feature is available only for Mac OS.

Last updated 6/3/2015

57
Workspace and workflow

Use Live Search to locate files based on filename or text present in files. The site selected in the Files panel is used for
search. If there is no site selected in the panel, the search option does not appear.
Live Search uses the Spotlight API in Mac OS. Any customization that you apply to Spotlight preferences is also used
for Live Search. Spotlight displays all files on your computer that match your search query. Live Search searches files in
the local root folder of the site currently selected in the Files panel.
1 Select Edit > Live Search. Alternatively, use CMD+SHIFT+F. The focus is set to the Live Search text box in Files

Panel.
2 Enter the word or phrase in the text box. The results are displayed as you enter text in the text box.
Matching files Displays a maximum of 10 filenames that match your search criteria. The message More Than 10

Results Found is displayed if there are more than 10 matching files. Refine your search criteria if you do not find
your desired file in the options displayed.
Matching Text In Displays a maximum of 10 files that contain text matching the word or phrase you entered. For
more options, click Find All. The results are displayed in the Search panel.

3 When you move the mouse cursor over a search result, a tool tip with the root-relative path of the file is displayed.

Press Enter, or click the item to open the file.
For files containing matching text, the first instance of the text is highlighted. Use Cmd+G to navigate to other
instances.
Note: To close the Live Search results panel, click outside the panel, or press Escape / Esc

Zoom in and out
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Dreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel
accuracy of graphics, select small items more easily, design pages with small text, design large pages, and so on.
Note: The zooming tools are only available in Design view.

Zoom in or out on a page
1 Click the Zoom tool (the magnifying glass icon) in the lower-right corner of the Document window.
2 Do one of the following:

• Click the spot on the page you want to magnify until you’ve achieved the desired magnification.
• Drag a box over the area on the page that you want to zoom in on and release the mouse button.
• Select a preset magnification level from the Zoom pop-up menu.
• Type a magnification level in the Zoom text box.
You can also zoom in without using the Zoom tool by pressing Control+= (Windows) or Command+= (Macintosh).
3To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and

click on the page.
You can also zoom out without using the Zoom tool by pressing Control+- (Windows) or Command+- (Macintosh).

Last updated 6/3/2015

58
Workspace and workflow

Edit a page after zooming
❖ Click the Select tool (the pointer icon) in the lower-right corner of the Document window, and click inside the page.

Pan a page after zooming
1 Click the Hand tool (the hand icon) in the lower-right corner of the Document window.
2 Drag the page.

Fill the Document window with a selection
1 Select an element on the page.
2 Select View > Fit Selection.

Fill the Document window with an entire page
❖ Select View > Fit All.

Fill the Document window with the entire width of a page
❖ Select View > Fit Width.

More Help topics
Change the code format

Disable/Enable CSS
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Styles panel, without
having to make changes directly in the code. When you comment out portions of the CSS, you can see what kinds of
effects particular properties and values have on your page.

Last updated 6/3/2015

214
CSS

When you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property
you’ve disabled. You can then easily re-enable or delete the disabled CSS property according to your preference.
For a video overview from the Dreamweaver engineering team about working with CSS Disable/Enable, see
www.adobe.com/go/dwcs5css_en.
1 In the Properties pane of the CSS Styles panel (Window > CSS Styles), select the property you want to disable.
2 Click the Disable/Enable CSS Property icon in the lower-right corner of the Properties pane. The icon also appears

if you hover to the left of the property itself.
Once you click the Disable/Enable CSS Property icon, a Disabled icon appears to the left of the property. To reenable the property, click the Disabled icon, or right-click (Windows) or Control-click (Macintosh OS) the property
and select Enable.
3 (Optional) To enable or delete all of the disabled properties in a selected rule, right-click (Windows) or Control-click

(Macintosh OS) any rule or property in which properties are disabled, and selectEnable All Disabled in Selected
Rule, or Delete all Disabled in Selected rule.

Inspect CSS in Live view
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS
styles. With Inspect mode turned on, you can hover over elements on your page to see the CSS box model attributes for
any block-level element.
Note: For more information on the CSS box model, see the CSS 2.1 specification.
In addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Styles panel
as you hover over elements in the Document window. When you have the CSS Styles panel open in Current mode and
hover over an element on the page, the rules and properties in the CSS Styles panel automatically update to show you
the rules and properties for that element. Additionally, any view or panel related to the element you’re hovering over
updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).
1 With your document open in the Document window, click the Inspect button (next to the Live View button in the

Document toolbar).
Note: If you’re not already in Live view, Inspect mode automatically enables it.
2 Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border,

margin, padding, and content.
3 (Optional) Press the left arrow on your computer keyboard to highlight the parent of the currently highlighted

element. Press the right arrow to return to highlighting for the child element.
4 (Optional) Click an element to lock a highlight selection.

Note: Clicking an element to lock a highlight selection turns off Inspect mode.

More Help topics
Previewing pages in Dreamweaver
The CSS Styles panel

Last updated 6/3/2015

215
CSS

Check for cross-browser CSS rendering issues
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that have problems
in certain browsers. When you run a BCC on an open file, Dreamweaver scans the file and reports any potential CSS
rendering issues in the Results panel. A confidence rating, indicated by a quarter, half, three-quarter, or completely
filled circle, indicates the likelihood of the bug’s occurrence (a quarter-filled circle indicating a possible occurrence, and
a completely-filled circle indicating a very likely occurrence). For each potential bug that it finds, Dreamweaver also
provides a direct link to documentation about the bug on Adobe CSS Advisor, a website that details commonly known
browser rendering bugs, and offers solutions for fixing them.
By default, the BCC feature checks against the following browsers: Firefox 1.5; Internet Explorer (Windows) 6.0 and
7.0; Internet Explorer (Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 and 9.0; Safari 2.0.
This feature replaces the former Target Browser Check feature, but retains the CSS functionality of that feature. That is,
the new BCC feature still tests the code in your documents to see if any of the CSS properties or values are unsupported
by your target browsers.
Three levels of potential browser-support problems can arise:

• An error indicates CSS code that might cause a serious visible problem in a particular browser, such as causing parts
of a page to disappear. (Error is the default designation for browser support problems, so in some cases, code with
an unknown effect is also marked as an error.)
• A warning indicates a piece of CSS code that isn’t supported in a particular browser, but that won’t cause any serious
display problems.
• An informational message indicates code that isn’t supported in a particular browser, but that has no visible effect.
Browser compatibility checks do not alter your document in any way.

Run a browser compatibility check
❖ Select File > Check Page > Browser Compatibility.

Select the element affected by a found issue
❖ Double-click the issue in the Results panel.

Jump to the next or previous found issue in the code
❖ Select Next Issue or Previous Issue from the Browser Compatibility Check menu in the Document toolbar.

Select browsers for Dreamweaver to check against
1 In the Results panel (Window > Results), select the Browser Compatibility Check tab.
2 Click the green arrow in the upper-left corner of the Results panel and select Settings.
3 Select the checkbox next to each browser you want to check against.
4 For each selected browser, select a minimum version to check against from the corresponding pop-up menu.

Last updated 6/3/2015

216
CSS

For example, to see if CSS rendering bugs might appear in Internet Explorer 5.0 and later and Netscape Navigator
7.0 and later, select the checkboxes next to those browser names, and select 5.0 from the Internet Explorer pop-up
menu and 7.0 from the Netscape pop-up menu.

Exclude an issue from the browser compatibility check
1 Run a browser compatibility check.
2 In the Results panel, Right-click (Windows) or Control-click (Macintosh) the issue that you want to exclude from

future checking.
3 Select Ignore Issue from the context menu.

Edit the Ignored Issues list
1 In the Results panel (Window > Results), select the Browser Compatibility Check tab.
2 Click the green arrow in the upper-left corner of the Results panel and select Edit Ignored Issues List.
3 In the Exceptions.xml file, find the issue that you want deleted from the Ignored Issues list and delete it.
4 Save and close the Exceptions.xml file.

Save a browser compatibility check report
1 Run a browser compatibility check.
2 Click the Save Report button on the left side of the Results panel.

Hover over buttons in the Results panel to see button tool tips.
Note: Reports are not saved automatically; if you want to keep a copy of a report, you must follow the above procedure
to save it.

View a browser compatibility check report in a browser
1 Run a browser compatibility check.
2 Click the Browse Report button on the left side of the Results panel.

Hover over buttons in the Results panel to see button tool tips.

Open the Adobe CSS Advisor website
1 In the Results panel (Window > Results), select the Browser Compatibility Check tab.
2 Click the link text at the bottom right of the panel.

More Help topics
Validate XML documents
CSS Advisor

Last updated 6/3/2015

217
CSS

Use Design-Time style sheets
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver
document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windowsonly style sheet as you design a page.
Design-Time style sheets only apply while you are working in the document; when the page is displayed in a browser
window, only the styles that are actually attached to or embedded in the document appear in a browser.
Note: You can also enable or disable styles for an entire page using the Style Rendering toolbar. To display the toolbar, select
View > Toolbars > Style Rendering. The Toggle Displaying of CSS Styles button (the right-most button) works
independently of the other media buttons on the toolbar.
To use a Design-time style sheet, follow these steps.
1 Open the Design-Time Style Sheets dialog box by doing one of the following:

• Right-click in the CSS Styles panel, and in the context menu select Design-time.
• Select Format > CSS Styles > Design-time.
2 In the dialog box, set options to show or hide a selected style sheet:

• To display a CSS style sheet at design-time, click the Plus (+) button above Show Only At Design Time, then in
the Select a Style Sheet dialog box, browse to the CSS style sheet you want to show.
• To hide a CSS style sheet, click the Plus (+) button above Hide At Design-Time, then in the Select a Style Sheet
dialog box, browse to the CSS style sheet you want to show.
• To remove a style sheet from either list, click the style sheet you want to remove, then click the appropriate Minus
(–) button.
3 Click OK to close the dialog box.

The CSS Styles panel updates with the selected style sheet’s name along with an indicator, “hidden” or “design,” to
reflect the style sheet’s status.

More Help topics
Style Rendering toolbar overview

Working with div tags
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
(Creative Cloud users only): Seven new semantic tags are available when you select Insert > Layout. The new tags are :
Article, Aside, HGroup, Navigation, Section, Header, and Footer. For more information, see Insert HTML5 semantic
elements from the Insert panel.

More Help topics
Video tutorial: Use div elements
Tutorial: How to use CSS to style divs and other layout elements

Last updated 6/3/2015

218
CSS

Tutorial: Style the header and navigation menu
Laying out pages with CSS
Manage tag libraries

Insert and edit div tags
You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a
tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of content, create
column effects, create different areas of color, and much more.
If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout
based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but
are familiar with using tables, you can also try using tables.
Note: Dreamweaver treats all div tags with an absolute position as AP elements (absolutely positioned elements), even if
you didn’t create those div tags using the AP Div drawing tool.

Insert div tags
You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an
existing CSS style sheet with positioning styles attached to your document. Dreamweaver enables you to quickly insert
a div tag and apply existing styles to it.
1 In the Document window, place the insertion point where you want the div tag to appear.
2 Do one of the following:

• Select Insert > Layout Objects > Div Tag.
• In the Layout category of the Insert panel, click the Insert Div Tag button

3 Set any of the following options:
Insert Lets you select the location of the div tag and the tag name if it is not a new tag.
Class Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style

sheet appear in the list. Use this pop-up menu to select the style you want to apply to the tag.
ID Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style sheet

appear in the list. IDs for blocks that are already in your document are not listed.
Note: Dreamweaver alerts you if you enter the same ID as another tag in your document.
New CSS Rule Opens the New CSS Rule dialog box.

4 Click OK.

The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of
the box, Dreamweaver highlights it.
If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely
positioned.)

Edit div tags
After you insert a div tag, you can manipulate it or add content to it.
Note: Div tags that are absolutely positioned become AP elements.

Last updated 6/3/2015

219
CSS

When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS
Layout Outlines is selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag,
Dreamweaver highlights the tag. You can change the highlight color or disable highlighting.
When you select a div tag, you can view and edit rules for it in the CSS Styles panel. You can also add content to the div
tag by simply placing your insertion point inside the div tag, and then adding content just as you would add content to
a page.

View and edit rules applied to a div tag
1 Do one of the following to select the div tag:

• Click the border of the div tag.
Look for the highlighting to see the border.

• Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
• Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.
2 Select Window > CSS Styles to open the CSS Styles panel if it is not already open.

Rules applied to the div tag appear in the panel.
3 Make edits as necessary.

Place the insertion point in a div tag to add content
❖ Click anywhere inside the tag’s borders.

Change the placeholder text in a div tag
❖ Select the text, and then type over it or press Delete.

Note: You can add content to the div tag just as you would add content to a page.

Change the highlight color of div tags
When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the tag.
You can enable or disable highlighting as necessary, or change the highlight color in the Preferences dialog box.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Highlighting from the category list on the left.
3 Make either of the following changes and click OK:

• To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color
using the color picker (or enter the hexadecimal value for the highlight color in the text box).
• To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.
Note: These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.

CSS layout blocks

Last updated 6/3/2015

220
CSS

Visualizing CSS layout blocks
You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that
you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without display:inline,
or any other page element that includes the display:block, position:absolute, or position:relative CSS declarations.
Following are a few examples of elements that are considered CSS layout blocks in Dreamweaver:

• A div tag
• An image with an absolute or relative position assigned to it
• An a tag with the display:block style assigned to it
• A paragraph with an absolute or relative position assigned to it
Note: For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls
within a line of text), or simple block elements like paragraphs.
Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines,
backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display
properties for a selected CSS layout block when you float the mouse pointer over the layout block.
The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:
CSS Layout Outlines Displays the outlines of all CSS layout blocks on the page.
CSS Layout Backgrounds Displays temporarily assigned background colors for individual CSS layout blocks, and hides
any other background colors or images that normally appear on the page.

Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each
CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there is
no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help you
differentiate between CSS layout blocks.
CSS Layout Box Model Displays the box model (that is, padding and margins) of the selected CSS layout block.

View CSS layout blocks
You can enable or disable CSS layout block visual aids as necessary.

View CSS layout block outlines
❖ Select View > Visual Aids > CSS Layout Outlines.

View CSS layout block backgrounds
❖ Select View > Visual Aids > CSS Layout Backgrounds.

View CSS layout block box models
❖ Select View > Visual Aids > CSS Layout Box Model.

You can also access CSS layout block visual aid options by clicking the Visual Aids button on the Document toolbar.

Last updated 6/3/2015

221
CSS

Use visual aids with non-CSS layout block elements
You can use a Design-time style sheet to display the backgrounds, borders, or box model for elements that aren’t
normally considered CSS layout blocks. To do so, you must first create a Design-time style sheet that assigns the
display:block attribute to the appropriate page element.
1 Create an external CSS style sheet by selecting File > New, selecting Basic page in the Category column, selecting

CSS in the Basic page column, and clicking Create.
2 In the new style sheet, create rules that assign the display:block attribute to the page elements you want to display as

CSS layout blocks.
For example, if you wanted to display a background color for paragraphs and list items, you could create a style sheet
with the following rules:
p{
display:block;
}
li{
display:block;
}

3 Save the file.
4 In Design view, open the page to which you want to attach the new styles.
5 Select Format > CSS Styles > Design-time.
6 In the Design-time Style Sheets dialog box, click the plus (+) button above the Show Only at Design Time text box,

select the style sheet you just created, and click OK.
7 Click OK to close the Design-time Style Sheets dialog box.

The style sheet is attached to your document. If you had created a style sheet using the previous example, all
paragraphs and list items would be formatted with the display:block attribute, thereby allowing you to enable or
disable CSS layout block visual aids for paragraphs and list items.

Working with AP elements

About AP elements in Dreamweaver
An AP element (absolutely positioned element) is an HTML page element—specifically, a div tag, or any other tag—
that has an absolute position assigned to it. AP elements can contain text, images, or any other content that you can
place in the body of an HTML document.
With Dreamweaver, you can use AP elements to lay out your page. You can place AP elements in front of and behind
each other, hide some AP elements while showing others, and move AP elements across the screen. You can place a
background image in one AP element, then place a second AP element, containing text with a transparent background,
in front of that.
AP elements will usually be absolutely positioned div tags. (These are the kinds of AP elements Dreamweaver inserts
by default.) But remember, you can classify any HTML element (for example, an image) as an AP element by assigning
an absolute position to it. All AP elements (not just absolutely positioned div tags) appear in the AP elements panel.

Last updated 6/3/2015

222
CSS

HTML code for AP Div elements
Dreamweaver creates AP elements using the div tag. When you draw an AP element using the Draw AP Div tool,
Dreamweaver inserts a div tag in the document and assigns the div an id value (by default apDiv1 for the first div you
draw, apDiv2 for the second div you draw, and so on). Later, you can rename the AP Div to anything you want using
the AP elements panel or the Property inspector. Dreamweaver also uses embedded CSS in the head of the document
to position the AP Div, and to assign the AP Div its exact dimensions.
The following is sample HTML code for an AP Div:

Sample AP Div Page

You can change properties for AP Divs (or any AP element) on your page, including x and y coordinates, z-index (also
called the stacking order), and visibility.
Insert an AP Div
Dreamweaver lets you easily create and position AP Divs on your page. You can also create nested AP Divs.
When you insert an AP Div, Dreamweaver displays an outline of the AP Div in Design view by default, and highlights
the block when you move the pointer over it. You can disable the visual aid that shows AP Div (or any AP element)
outlines by disabling both AP Element Outlines and CSS Layout Outlines in the View > Visual Aids menu. You can also
enable backgrounds and the box model for AP elements as a visual aid while you design.
After you create an AP Div, you can add content to it by simply placing your insertion point in the AP Div, and then
adding content just as you would add content to a page.
Draw a single AP Div or multiple AP Divs consecutively
1 In the Layout category of the Insert panel, click the Draw AP Div button
.
2 In the Document window’s Design view, do one of the following:
• Drag to draw a single AP Div.
• Control-drag (Windows) or Command-drag (Macintosh) to draw multiple AP Divs consecutively.
You can continue to draw new AP Divs as long as you do not release the Control or Command key.
Last updated 6/3/2015
223
CSS
Insert an AP Div at a particular place in the document
❖ Place the insertion point in the Document window, and then select Insert > Layout Objects > AP Div.
Note: This procedure places the tag for the AP Div wherever you clicked in the Document window. The visual rendering
of the AP Div may thus affect other page elements (like text) that surround it.
Place the insertion point in an AP Div
❖ Click anywhere inside the AP Div’s borders.
The AP Div’s borders are highlighted, and the selection handle appears, but the AP Div itself is not selected.
Show AP Div borders
❖ Select View > Visual Aids and select either AP Div Outlines or CSS Layout Outlines.
Note: Selecting both options simultaneously has the same effect.
Hide AP Div borders
❖ Select View > Visual Aids and deselect both AP Div Outlines and CSS Layout Outlines.
Work with nested AP Divs
A nested AP Div is an AP Div that has code contained within the tags of another AP Div. For example, the following
code shows two AP Divs that are not nested, and two AP Divs that are nested:

The graphical depiction for either set of AP Divs might look as follows:
In the first set of div tags, one div is sitting on top of the other on the page. In the second set, the apDiv4 div is actually
inside of the apDiv3 div. (You can change AP Div stacking order in the AP Elements panel.)
Nesting is often used to group AP Divs together. A nested AP Div moves with its parent AP Div and can be set to inherit
visibility from its parent.
You can enable the Nesting option to automatically nest when you draw an AP Div starting inside another AP Div. To
draw inside or over another AP Div, you must also have the Prevent Overlaps option deselected.
Last updated 6/3/2015
224
CSS
Draw a nested AP Div
1 Make sure Prevent Overlaps is deselected in the AP Elements panel (Window > AP Elements).
2 In the Layout category of the Insert panel, click the Draw AP Div button
.
3 In the Document window’s Design view, drag to draw an AP Div inside an existing AP Div.
If Nesting is disabled in AP Elements preferences, Alt-drag (Windows) or Option-drag (Macintosh) to nest an AP
Div inside an existing AP Div.
Nested AP Divs may appear differently in different browsers. When you create nested AP Divs, check their
appearance in various browsers frequently during the design process.
Insert a nested AP Div
1 Make sure Prevent Overlaps is deselected.
2 Place the insertion point inside an existing AP Div in the Document window’s Design view, then select Insert >
Layout Objects > AP Div.
Nest AP Divs automatically when you draw an AP Div inside another AP Div
❖ Select the Nesting option in the AP Elements preferences.
View or set AP element preferences
Use the AP Elements category in the Preferences dialog box to specify the default settings for new AP elements you
create.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select AP elements from the Category list on the left and specify any of the following preferences, and then click OK.
Visibility Determines whether AP elements are visible by default. The options are default, inherit, visible, and
hidden.
Width and Height Specify a default width and height (in pixels) for AP elements you create using Insert > Layout
Objects > AP Div.
Background Color Specifies a default background color. Select a color from the color picker.
Background Image Specifies a default background image. Click Browse to locate the image file on your computer.
Nesting: Nest When Created Within An AP Div Specifies whether an AP Div that you draw starting from a point
within the boundaries of an existing AP Div should be a nested AP Div. Hold down Alt (Windows) or Option
(Macintosh) to temporarily change this setting while you’re drawing an AP Div.
View or set properties for a single AP element
When you select an AP element, the Property inspector displays AP element properties.
1 Select an AP element.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t
already expanded, to see all properties.
Last updated 6/3/2015
225
CSS
3 Set any of the following options:
CSS-P Element Specifies an ID for the selected AP element. The ID identifies the AP element in the AP Elements
panel and in JavaScript code.
Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or
periods. Every AP element must have its own unique ID.
Note: The CSS-P Property inspector presents the same options for relatively-positioned elements.
L and T (left and top) Specify the position of the AP element’s upper-left corner relative to the upper-left corner of
the page, or of the parent AP element if nested.
W and H Specify the width and height of the AP element.
Note: If the content of the AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the
Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP
element appears in a browser, unless the Overflow property is set to Visible.)
W and H The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas),
pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent AP element’s
corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3
millimeters.
Z-Index Determines the z-index, or stacking order, of the AP element.
In a browser, higher-numbered AP elements appear in front of lower-numbered AP elements. Values can be positive
or negative. It’s easier to change the stacking order of AP elements using the AP Elements panel than to enter specific
z-index values.
Vis Specifies whether the AP element is initially visible or not. Select from the following options:
• Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
• Inherit uses the visibility property of the AP element’s parent.
• Visible displays the AP element contents, regardless of the parent’s value.
• Hidden hides the AP element contents, regardless of the parent’s value.
Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element
contents.
Bg Image Specifies a background image for the AP element.
Click the folder icon to browse to and select an image file.
Bg Color Specifies a background color for the AP element.
Leave this option blank to specify a transparent background.
Class Specifies the CSS class used to style the AP element.
Overflow Controls how AP elements appear in a browser when the content exceeds the AP element’s specified size.
Last updated 6/3/2015
226
CSS
Visible indicates that the extra content appears in the AP element; effectively, the AP element stretches to
accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser
should add scroll bars to the AP element whether they’re needed or not. Auto causes the browser to display scroll
bars for the AP element only when needed (that is, when the AP element’s contents exceed its boundaries.)
Note: The overflow option has uneven support across browsers.
Clip Defines the visible area of an AP element.
Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the AP element
(counting from the upper-left corner of the AP element). The AP element is “clipped” so that only the specified
rectangle is visible. For example, to make an AP element’s contents invisible except for a 50-pixel-wide, 75-pixelhigh visible rectangle at the upper-left corner of the AP element, set L to 0, T to 0, R to 50, and B to 75.
Note: Although CSS specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.
4 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
View or set properties for multiple AP elements
When you select two or more AP elements, the Property inspector displays text properties and a subset of the full AP
element properties, allowing you to modify several AP elements at once.
Select multiple AP elements
❖ Hold down Shift while selecting AP elements.
View and set properties for multiple AP elements
1 Select multiple AP elements.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner, if it isn’t
already expanded, to see all properties.
3 Set any of the following properties for multiple AP elements:
L and T (left and top) Specify the position of the AP elements’ upper-left corners relative to the upper-left corner of
the page, or of the parent AP element if nested.
W and H Specify the width and height of the AP elements.
Note: If the content of any AP element exceeds the specified size, the bottom edge of the AP element (as it appears in the
Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the AP
element appears in a browser, unless the Overflow property is set to Visible.)The default unit for position and size is
pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent AP element’s corresponding value). The abbreviations must follow the
value without a space: for example, 3mm indicates 3 millimeters.
Vis Specifies whether the AP elements are initially visible or not. Select from the following options:
• Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
Last updated 6/3/2015
227
CSS
• Inherit uses the visibility property of the AP elements’ parent.
• Visible displays the AP elements’ contents, regardless of the parent’s value.
• Hidden hides the AP element contents, regardless of the parent’s value.
Use a scripting language, such as JavaScript, to control the visibility property and dynamically display AP element
contents.
Tag Specifies the HTML tag used to define the AP elements.
Bg Image Specifies a background image for the AP elements.
Click the folder icon to browse to and select an image file.
Bg Color Specifies a background color for the AP elements. Leave this option blank to specify a transparent
background.
4 If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
AP Elements panel overview
You use the AP Elements panel (Window > AP Elements) to manage the AP elements in your document. Use the AP
Elements panel to prevent overlaps, to change the visibility of AP elements, to nest or stack AP elements, and to select
one or more AP elements.
Note: An AP element in Dreamweaver is an HTML page element—specifically, a div tag, or any other tag—that has an
absolute position assigned to it. The AP Elements panel does not display relatively-positioned elements.
AP elements are displayed as a list of names, in order of z-index; by default, the first created AP element (with a z-index
of 1) appears at the bottom of the list, and the most recently created AP element appears at the top. You can, however,
change the z-index of an AP element by changing its place in the stacking order. For example, if you created eight AP
elements and wanted to move the fourth AP element to the top, you could assign it a higher z-index than the others.
Select AP elements
You can select one or more AP elements to manipulate them or change their properties.
Select an AP element in the AP elements panel
❖ In the AP elements panel (Window > AP elements), click the name of the AP element.
Select an AP element in the Document window
❖ Do one of the following:
• Click an AP element’s selection handle.
If the selection handle isn’t visible, click anywhere inside the AP element to make the handle visible.
• Click an AP element’s border.
• Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside an AP element.
• Click inside an AP element and press Control+A (Windows) or Command+A (Macintosh) to select the contents
of the AP element. Press Control+A or Command+A again to select the AP element.
• Click inside an AP element and select its tag in the tag selector.
Last updated 6/3/2015
228
CSS
Select multiple AP elements
❖ Do one of the following:
• In the AP Elements panel (Window > AP Elements), Shift-click two or more AP element names.
• In the Document window, Shift-click inside or on the border of two or more AP elements.
Change the stacking order of AP elements
Use the Property inspector or the AP Elements panel to change the stacking order of AP elements. The AP element at
the top of the AP Elements panel list is at the top of the stacking order, and appears in front of the other AP elements.
In HTML code, the stacking order, or z-index, of the AP elements determines the order in which they are drawn in a
browser. The higher the z-index of an AP element, the higher that AP element is in the stacking order. (For example,
an element with a z-index of 4 will appear on top of an element with a z-index of 3; 1 is always the lowest number in
the stacking order.) You can change the z-index for each AP element using the AP Elements panel or Property inspector.
Change the stacking order of AP elements using the AP Elements panel
1 Select Window > AP Elements to open the AP Elements panel.
2 Double-click the z-index number next to the AP element whose z-index you want to change.
3 Change the number and press Return/Enter.
• Type a higher number to move the AP element up in the stacking order.
• Type a lower number to move the AP element down in the stacking order.
Change the stacking order of AP elements using the Property inspector
1 Select Window > AP Elements to open the AP Elements panel to see the current stacking order.
2 In the AP Elements panel or in the Document window, select the AP element whose z-index you want to change.
3 In the Property inspector (Window > Properties), type a number in the Z-Index text box.
• Type a higher number to move the AP element up in the stacking order.
• Type a lower number to move the AP element down in the stacking order.
Show and hide AP elements
While working on your document, you can show and hide AP elements manually, using the AP Elements panel, to see
how the page will appear under different conditions.
Note: The currently selected AP element always becomes visible and appears in front of other AP elements while it’s selected.
Change AP element visibility
1 Select Window > AP Elements to open the AP Elements panel.
2 Click in the eye icon column for an AP element to change its visibility.
• An open eye means the AP element is visible.
• A closed eye means the AP element is invisible.
• If there is no eye icon, usually the AP element inherits visibility from its parent. (When AP elements are not
nested, the parent is the document body, which is always visible.)
Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default
visibility).
Last updated 6/3/2015
229
CSS
Change the visibility of all AP elements at once
❖ In the AP Elements panel (Window > AP Elements), click the header eye icon at the top of the column.
Note: This procedure can set all AP elements to visible or hidden, but not to inherit.
Resize AP elements
You can resize an individual AP element, or simultaneously resize multiple AP elements to make them the same width
and height.
If the Prevent Overlaps option is on, you will not be able to resize an AP element so that it overlaps with another AP
element.
Resize an AP element
1 In Design view, select an AP element.
2 Do one of the following to resize the AP element:
• To resize by dragging, drag any of the AP element’s resize handles.
• To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.
The arrow keys move the right and bottom borders of the AP element; you can’t resize using the top and left
borders with this technique.
• To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh)
while pressing an arrow key.
• In the Property inspector (Window > Properties), type values for width (W) and height (H).
Resizing an AP element changes the width and height of the AP element. It does not define how much of the AP
element’s content is visible. You can define the visible region within an AP element in preferences.
Resize multiple AP elements at once
1 In the Design view, select two or more AP elements.
2 Do one of the following:
• Select Modify > Arrange > Make Same Width Or Modify > Arrange > Make Same Height.
The first selected AP elements conform to the width or height of the last selected AP element.
• In the Property inspector (Window > Properties), under Multiple CSS-P Element, enter width and height values.
The values are applied to all selected AP elements.
Move AP elements
You can move AP elements in the Design view in much the same way that you move objects in most basic graphics
applications.
If the Prevent Overlaps option is on, you will not be able to move a AP element so that it overlaps another AP element.
1 In the Design view, select an AP element or multiple AP elements.
2 Do one of the following:
• To move by dragging, drag the selection handle of the last selected AP element (highlighted in black).
• To move one pixel at a time, use the arrow keys.
Last updated 6/3/2015
230
CSS
Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping
increment.
Align AP elements
Use the AP element alignment commands to align one or more AP elements with a border of the last AP element
selected.
When you align AP elements, child AP elements that aren’t selected may move because their parent AP element is
selected and moved. To prevent this, don’t use nested AP elements.
1 In the Design view, select the AP element.
2 Select Modify > Arrange, and then select an alignment option.
For example, if you select Top, all of the AP elements move so that their top borders are in the same vertical position
as the top border of the last selected AP element (highlighted in black).
Converting AP elements to tables
Instead of using tables to create your layout, some web designers prefer to work with AP elements. Dreamweaver
enables you to create your layout using AP elements, then (if you want) convert them into tables. For example, you
might need to convert your AP elements to tables if you need to support browsers before version 4.0. Converting AP
elements to tables, however, is highly discouraged because it can result in tables with a large number of empty cells, not
to mention bloated code. If you need a page layout that uses tables, it is best to create that page layout using the standard
table layout tools available in Dreamweaver.
You can convert back and forth between AP elements and tables to adjust the layout and optimize page design. (When
you convert a table back to AP elements, however, Dreamweaver converts the table back to AP Divs, regardless of the
type of AP element you might have had on the page before the conversion to tables.) You cannot convert a specific table
or AP element on a page; you must convert AP elements to tables and tables to AP Divs for an entire page.
Note: You can’t convert AP elements to tables or tables to AP Divs in a template document or in a document to which a
template has been applied. Instead, create your layout in a non-template document and convert it before saving it as a
template.
Convert between AP elements and tables
You can create your layout using AP elements, then convert the AP elements to tables so that your layout can be viewed
in older browsers.
Before you convert to tables, make sure AP elements do not overlap. Also, make sure you’re in Standard Mode (View >
Table Mode > Standard Mode).
Convert AP elements to a table
1 Select Modify > Convert > AP Divs To Table.
2 Specify any of the following options and click OK:
Most Accurate Creates a cell for every AP element, plus any additional cells that are necessary to preserve the space
between AP elements.
Smallest: Collapse Empty Cells Specifies that the AP elements’ edges should be aligned if they are positioned within
the specified number of pixels.
If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout
precisely.
Last updated 6/3/2015
231
CSS
Use Transparent GIFs Fills the table’s last row with transparent GIFs. This ensures that the table is displayed with the
same column widths in all browsers.
When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is
disabled, the resulting table will not contain transparent GIFs, but the widths of the columns may vary from browser
to browser.
Center On Page Centers the resulting table on the page. If this option is disabled, the table starts at the left edge of
the page.
Convert tables to AP Divs
1 Select Modify > Convert > Tables to AP Divs.
2 Specify any of the following options and click OK:
Prevent AP Element Overlaps Constrains the positions of AP elements when they are created, moved, and resized
so that they don’t overlap.
Show AP Elements Panel Displays the AP elements panel.
Show Grid and Snap To Grid Let you use a grid to help position AP elements.
The tables are converted to AP Divs. Empty cells are not converted to AP elements unless they have background
colors.
Note: Page elements that were outside of tables are also placed in AP Divs.
Prevent AP element overlaps
Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to
convert the AP elements in a document to tables, use the Prevent Overlap option to constrain AP element movement
and positioning so that AP elements don’t overlap.
When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing
AP element. If you activate this option after creating overlapping AP elements, drag each overlapping AP element to
move it away from other AP elements. Dreamweaver does not automatically fix existing overlapping AP elements in
the page when you enable Prevent AP element Overlaps.
When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements to
overlap. Instead, it will snap to the edge of the closest AP element.
Note: Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert an
AP element using the Insert menu, enter numbers in the Property inspector, or reposition AP elements by editing the HTML
source code, you can cause AP elements to overlap or nest while this option is enabled. If overlaps happen, drag overlapping
AP elements in the Design view to separate them.
• In the AP Elements panel (Window > AP Elements), select the Prevent Overlaps option.
• In the Document window, select Modify > Arrange > Prevent AP Element Overlaps.
Apply gradients to background
Using the CSS Designer panel, you can apply gradients to the background of your websites. The gradient property is
available in the background category.
Last updated 6/3/2015
232
CSS
Click
adjacent to the gradient property to open the gradients panel. Using this panel, you can:
• Choose colors from different color models (RGBa, Hexadecimal, or HSLa). Then, save different color combinations
as color swatches.
• To reset the new color to the original color, click the original color (K).
• To change the order of the swatches, drag the swatches to the required position.
• To delete a color swatch, drag the swatch out of the panel.
• Use color stops to create complex gradients. Click anywhere between the default color stops to create a color stop.
To delete a color stop, drag the color stop out of the panel.
• Specify the angle for linear gradient.
• To repeat the pattern, select Repeating.
• Save custom gradients as swatches.
A Color stop B Gradient swatch C Add gradient swatch D Linear repeating E Color models F Eye Dropper G Color slider H Lightness slider
I Opacity slider J Add color swatch K Color swatch L Original color M Selected color N Angle for linear gradient
Last updated 6/3/2015
233
CSS
Note: The Eye Dropper tool is available in Dreamweaver 13.1 and later.
Let's understand the following code:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00)
46.63%,rgba(255,0,0,1.00) 100%)
• 57deg: Indicates the angle of the linear gradient
• rgba(255, 255, 255, 1.00): Color for the first color stop
• 0%: Indicates color stop
Note: Only '%' values for color stops are supported in Dreamweaver. If you use other values such as, px or em, Dreamweaver
reads them as 'nil'. Also, Dreamweaver does not support CSS colors and if you specify these colors in the code, such colors
are read as 'nil'.
Rendering gradients in web browsers
When you use gradients as background, you can configure Dreamweaver to render the gradients appropriately on
different web browsers. Dreamweaver adds appropriate vendor prefixes to the code that enables web browsers to display
gradients suitably.
Dreamweaver can write the following vendor prefixes along with w3c format:
• Webkit
• Mozilla
• Opera
• Dreamweaver Live View (old Webkit format)
By default, Dreamweaver writes vendor prefixes for Webkit and Dreamweaver Live View. You can choose the other
required vendors from the Preferences dialog box (Preferences > CSS Styles).
Note: For Box shadow, Webkit and w3c prefixes are always generated irrespective of whether you have selected them in the
Preferences or not.
Any changes to the gradients are reflected in the vendor-specific syntaxes too. If you open an existing file containing
vendor-specific syntaxes in Dreamweaver CC, ensure that you choose the required vendor prefixes in Preferences.
Because, by default, Dreamweaver updates only Webkit, and Dreamweaver Live View-related code when you use or
change gradients. So, the other vendor-specific syntaxes in your code do not get updated.
Swap background images and gradients
You can change the order (in which they appear in the code) of the background images and gradients with a single click.
Click
adjacent to the url or the gradient property in CSS Designer.
Note: Dreamweaver CC contains a basic implementation of the swap background feature. When you have multiple values
or images, swap may not work as expected. Also, suppose that you have an image, second image, and then a gradient
applied to the background. Swapping the gradient results in the following order: gradient, second image, first image.
Last updated 6/3/2015
234
CSS
CSS3 transition effects
You can create, modify, and delete CSS3 transitions using the CSS Transitions panel.
To create a CSS3 transition, create a transition class by specifying values for the transition properties of the element. If
you select an element before creating a transition class, the transition class is automatically applied to the selected
element.
You can choose to add the generated CSS code to the current document or specify an external CSS file.
Create and apply CSS3 transition effect
1 (Optional) Select an element (paragraph, heading, and so on) to which you want to apply the transition.
Alternatively, you can create a transition and apply it later to an element.
2 Select Window > CSS Transitions.
3 Click
.
4 Create a transition class using the options in the New Transition dialog box.
Target Rule Enter a name for the selector. The selector can be any CSS selector such as a tag, a rule, an ID, or a
compound selector. For example, if you want to add transition effects to all tags, enter hr
Transition On Select a state to which you want to apply the transition. For example, if you want to apply the
transition when the mouse moves over the element, use the hover option.
Use the Same Transition for All Properties Select this option if you want to specify the same Duration, Delay, and
Timing Function for all CSS properties that you want to transition.
Use a Different Transition for Each Property Select this option if you want to specify a different Duration, Delay,
and Timing Function for each of CSS properties that you want to transition.
Property Click
to add a CSS property to transition.
Duration Enter a duration in seconds (s) or milliseconds (ms) for the transition effect.
Delay The time, in seconds or milliseconds, before the transition effect starts.
Timing function Select a transition style from the available options.
End Value The end value for the transition effect. For example, if you want the font-size to increase to 40px at the
end of the transition effect, specify 40px for the font-size property.
Choose Where To Create The Transition To embed the style in the current document, select This Document Only.
If you want to create an external style sheet for the CSS3 code, select New Style Sheet File. When you click Create
Transition, you are prompted for a location to save the new CSS file. After the style sheet is created, it is added to the
Choose Where To Create Transition menu.
Edit CSS3 transition effects
1 In the CSS Transitions panel, select the transition effect that you want to edit.
Last updated 6/3/2015
235
CSS
2 Click
.
3 Use the Edit Transition dialog to change previously entered values for the transition.
Disable CSS shorthand for Transitions
See What is a CSS Shorthand Property? for information on CSS Shorthand, and its benefits.
1 Select Edit > Preferences.
2 Select CSS Styles.
3
In Use Shorthand For, deselect Transition.
Use Dreamweaver sample style sheets
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
Dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to
develop your own styles.
1 Open the CSS Styles panel by doing one of the following:
• Select Window > CSS Styles.
• Press Shift+F11.
2 In the CSS Styles panel, click the Attach External Style Sheet button. (It’s in the lower-right corner of the panel.)
3 In the Attach External Style Sheet dialog box, click Sample Style Sheets.
4 In the Sample Style Sheets dialog box, select a style sheet from the list box.
As you select style sheets within the list box, the Preview pane displays the text and color formatting of the selected
style sheet.
5 Click the Preview button to apply the style sheet and verify that it applies the styles you want to the current page.
If the styles applied are not what you expect them to be, select another style sheet from the list, and click Preview to
see those styles.
6 By default, Dreamweaver saves the style sheet in a folder named CSS just below the root of the site you defined for
your page. If that folder does not exist, Dreamweaver creates it. You can save the file to another location by clicking
Browse and browsing to another folder.
7 When you find a style sheet whose formatting rules meet your design criteria, click OK.
The CSS Styles panel
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS
Designer.
Last updated 6/3/2015
236
CSS
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current
mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of
panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and
Current mode.
The CSS Styles panel in Current mode
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 applied to the selection.
You can resize any of the panes by dragging the borders between the panes, and can resize columns by dragging
dividers.
The Summary for Selection pane displays a summary of CSS properties and their values for the item currently selected
in the active document. The summary shows the properties for all rules that directly apply to the selection. Only set
properties are shown.
For example, the following rules create a class style and a tag (in this case paragraph) style:
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
When you select paragraph text with a class style of .foo in the Document window, the Summary for Selection pane
displays the relevant properties for both rules, because both rules apply to the selection. In this case, the Summary for
Selection pane would list the following properties:
Last updated 6/3/2015
237
CSS
font-size: 12px
font-family: ‘Arial’
color: green
The Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag
style defines the font size and the class style defines the font family and the color. (The font family defined by the class
style overrides the font family defined by the tag style because class selectors have higher specificity than tag selectors.
For more information on CSS specificity, see www.w3.org/TR/CSS2/cascade.html.)
The Rules pane displays two different views—About view or Rules view—depending on your selection. In About view
(the default view), the pane displays the name of the rule that defines the selected CSS property, and the name of the
file containing the rule. In Rules view, the pane displays a cascade, or hierarchy, of all rules that apply directly or
indirectly to the current selection. (The tag to which the rule directly applies appears in the right column.) You can
toggle between the two views by clicking the Show Information and Show Cascade buttons in the upper-right corner
of the Rules pane.
When you select a property in the Summary for Selection pane, all of the properties for the defining rule appear in the
Properties pane. (The defining rule is also selected in the Rules pane, if Rules view is selected.) For example, if you have
a rule called .maintext that defines a font family, font size, and color, then selecting any of those properties in the
Summary for Selection pane will display all of the properties defined by the .maintext rule in the Properties pane, as
well as the selected .maintext rule in the Rules pane. (Additionally, selecting any rule in the Rules pane displays that
rule’s properties in the Properties pane.) You can then use the Properties pane to quickly modify your CSS, whether it
is embedded in the current document or linked by means of an attached style sheet. By default, the Properties pane
shows only those properties that have already been set, and arranges them in alphabetical order.
You can choose to display the Properties pane in two other views. Category view displays properties grouped into
categories, such as Font, Background, Block, Border, and so on, with set properties at the top of each category, displayed
in blue text. List view displays an alphabetical list of all available properties, and likewise sorts set properties to the top,
displaying them in blue text. To switch between views, click the Show Category View, Show List View, or Show Only Set
Properties button, located at the lower-left corner of the Properties pane.
In all views, set properties are displayed in blue; properties irrelevant to a selection are displayed with a red strikethrough line. Holding the mouse over a rule that is irrelevant displays a message explaining why the property is
irrelevant. Typically a property is irrelevant because it’s overridden or not an inherited property.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
The CSS Styles panel in All mode
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.
Last updated 6/3/2015
238
CSS
You can resize either pane by dragging the border between the panes, and can resize the Properties columns by dragging
their divider.
When you select a rule in the All Rules pane, all of the properties that are defined in that rule appear in the Properties
pane. You can then use the Properties pane to quickly modify your CSS, whether it is embedded in the current
document or linked in an attached style sheet. By default, the Properties pane shows only those properties that have
been previously set, and arranges them in alphabetical order.
You can choose to display properties in two other views. Category view displays properties grouped into categories,
such as Font, Background, Block, Border, and so on, with set properties at the top of each category. List view displays
an alphabetical list of all available properties, and likewise sorts set properties to the top. To switch between views, click
the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the
Properties pane. In all views, set properties are displayed in blue.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
CSS Styles panel buttons and views
In both All and Current modes, the CSS Styles panel contains three buttons that let you alter the view in the Properties
pane (the bottom pane):
A Category View B List View C Set Properties View
Category View Divides the Dreamweaver-supported CSS properties into eight categories: font, background, block,
border, box, list, positioning, and extensions. Each category’s properties are contained in a list that you expand or
collapse by clicking the Plus (+) button next to the category name. Set properties appear (in blue) at the top of the list.
List View Displays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in
blue) at the top of the list.
Set Properties View Displays only those properties that have been set. Set Properties view is the default view.
In both All and Current modes, the CSS Styles panel also contains the following buttons:
Last updated 6/3/2015
239
CSS
A Attach Style Sheet B New CSS Rule C Edit Style D Disable/enable CSS property E Delete CSS rule
Attach Style Sheet Opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import
into your current document.
New CSS Rule Opens a dialog box in which you can select the type of style you’re creating—for example, to create a class
style, redefine an HTML tag, or to define a CSS selector.
Edit Style Opens a dialog box in which you can edit the styles in the current document or in an external style sheet.
Delete CSS Rule Removes the selected rule or property from the CSS Styles panel, and removes the formatting from
any element to which it was applied. (It does not, however, remove class or ID properties referenced by that style). The
Delete CSS Rule button can also detach (or “unlink”) an attached CSS style sheet.
Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu of options for working
with CSS style sheet commands.
Open the CSS Styles panel
You use the CSS Styles panel to view, create, edit, and remove CSS styles, as well as to attach external style sheets to
documents.
❖ Do one of the following:
• Select Window > CSS Styles.
• Press Shift+F11.
• Click the CSS button in the Property inspector.
Last updated 6/3/2015
240
Chapter 7: Page content and assets
Set page properties
For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties
dialog box (Modify > Page Properties). The Page Properties dialog box lets you specify the default font family and font
size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties
for each new page you create, and modify those for existing pages. Changes you make in the Page Properties dialog box
apply to the entire page.
Dreamweaver gives you two methods for modifying page properties: CSS or HTML. Adobe recommends using CSS to
set backgrounds and modify page properties.
Note: The page properties you choose apply only to the active document. If a page uses an external CSS style sheet,
Dreamweaver does not overwrite the tags set in the style sheet, as this affects all other pages using that style sheet.
Set CSS page font, background color, and background image properties
Use the Page Properties dialog box to specify several basic page layout options for your web pages, including the font,
background color, and background image.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Select the Appearance (CSS) category and set the options.
Page Font Specifies the default font family to use in your web pages. Dreamweaver uses the font family you specify
unless another font is specifically set for a text element.
Size Specifies the default font size to use in your web pages. Dreamweaver uses the font size you specify unless
another font size is specifically set for a text element.
Text Color Specifies the default color to render fonts with.
Background Color Sets a background color for your page. Click the Background color box and select a color from
the Color Picker.
Background Image Sets a background image. Click the Browse button, then browse to and select the image.
Alternatively, enter the path to the background image in the Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To
prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)
Repeat Specifies how the background image will be displayed on the page:
• Select the No-repeat option to display the background image only once.
• Select the Repeat option to repeat, or tile, the image both horizontally and vertically.
• Select the Repeat-x option to tile the image horizontally.
• Select the Repeat-y option to tile the image vertically.
Left Margin and Right Margin Specify the size of the left and right page margins.
Last updated 6/3/2015
241
Page content and assets
Top Margin and Bottom Margin Specify the size of the top and bottom page margins.
Set HTML page properties
Setting properties in this category of the Page Properties dialog box results in HTML rather than CSS formatting of
your page.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Select the Appearance (HTML) category and set the options.
Background Image Sets a background image. Click the Browse button, then browse to and select the image.
Alternatively, enter the path to the background image in the Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To
prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)
Background Sets a background color for your page. Click the Background color box and select a color from the
Color Picker.
Text Specifies the default color to render fonts with.
Link Specifies the color to apply to link text.
Visited Links Specifies the color to apply to visited links.
Active Links Specifies the color to apply when a mouse (or pointer) clicks on a link
Left Margin and Right Margin Specify the size of the left and right page margins.
Top Margin and Bottom Margin Specify the size of the top and bottom page margins.
Set CSS link properties for an entire page
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can specify fonts, font sizes, colors, and other items for your links. By default, Dreamweaver creates CSS rules for
your links and applies them to all links you use on the page. (The rules are embedded in the head section of the page.)
Note: If you want to customize individual links on a page, you need to create individual CSS rules, and then apply them to
the links separately.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Links (CSS) category and set the options.
Link Font Specifies the default font family to use for link text. By default, Dreamweaver uses the font family specified
for the entire page unless you specify another font.
Size Specifies the default font size to use for link text.
Link Color Specifies the color to apply to link text.
Visited Links Specifies the color to apply to visited links.
Rollover Links Specifies the color to apply when a mouse (or pointer) hovers over a link.
Active Links Specifies the color to apply when a mouse (or pointer) clicks on a link
Last updated 6/3/2015
242
Page content and assets
Underline Style Specifies the underline style to apply to links. If your page already has an underline link style
defined (through an external CSS style sheet for example), the Underline Style menu defaults to a “don’t change”
option. This option alerts you to a link style that has been defined. If you modify the underline link style using the
Page Properties dialog box, Dreamweaver will change the previous link definition.
Set CSS heading properties for an entire page
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can specify fonts, font sizes, and colors for your page headings. By default, Dreamweaver creates CSS rules for your
headings and applies them to all headings you use on the page. (The rules are embedded in the head section of the
page.)
Headings are available for selection in HTML Property inspector.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Headings (CSS) category and set the options.
Heading Font Specifies the default font family to use for headings. Dreamweaver will use the font family you specify
unless another font is specifically set for a text element.
Heading 1 through Heading 6 Specify the font size and color to use for up to six levels of heading tags.
Set title and encoding properties for a page
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
The Title/Encoding Page Properties options let you specify the document encoding type that is specific to the language
used to author your web pages as well as specify which Unicode Normalization Form to use with that encoding type.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Title/Encoding category and set the options.
Title Specifies the page title that appears in the title bar of the Document window and most browser windows.
Document Type (DTD) Specifies a document type definition. For example, you can make an HTML document
XHTML-compliant by selecting XHTML 1.0 Transitional or XHTML 1.0 Strict from the pop-up menu.
Encoding Specifies the encoding used for characters in the document.
If you select Unicode (UTF-8) as the document encoding, entity encoding is not necessary because UTF-8 can safely
represent all characters. If you select another document encoding, entity encoding may be necessary to represent
certain characters. For more information on character entities, see www.w3.org/TR/REChtml40/sgml/entities.html.
Reload Converts the existing document, or reopens it using the new encoding.
Unicode Normalization Form Enabled only if you select UTF-8 as a document encoding. There are four Unicode
Normalization Forms. The most important is Normalization Form C because it’s the most common form used in
the Character Model for the World Wide Web. Adobe provides the other three Unicode Normalization Forms for
completeness.
Last updated 6/3/2015
243
Page content and assets
In Unicode, some characters are visually similar but can be stored within the document in different ways. For
example, “ë” (e-umlaut) can be represented as a single character, “e-umlaut,” or as two characters, “regular Latin e”
+ “combining umlaut.” A Unicode combining character is one that gets used with the previous character, so the
umlaut would appear above the “Latin e.” Both forms result in the same visual typography, but what is saved in the
file is different for each form.
Normalization is the process of making sure all characters that can be saved in different forms are all saved using
the same from. That is, all “ë” characters in a document are saved as single “e-umlaut” or as “e” + “combining umlaut,”
and not as both forms in one document.
For more information on Unicode Normalization and the specific forms that can be used, see the Unicode website
at www.unicode.org/reports/tr15.
Include Unicode Signature (BOM) Includes a Byte Order Mark (BOM) in the document. A BOM is 2 to 4 bytes at
the beginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes. Because
UTF-8 has no byte order, adding a UTF-8 BOM is optional. For UTF-16 and UTF-32, it is required.
Use a tracing image to design apage
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can insert an image file to use as a guide in designing your page. The image appears as a background image, which
you can “design over” as you lay out your page.
1 Select Modify > Page Properties, or click the Page Properties button in the text Property inspector.
2 Choose the Tracing Image category and set the options.
Tracing Image Specifies an image to use as a guide for copying a design. This image is for reference only, and does
not appear when the document is displayed in a browser.
Transparency Determines the opacity of the tracing image, from completely transparent to completely opaque.
Understanding document encoding
Document encoding specifies the encoding used for characters in the document. Document encoding is specified in a
meta tag in the head of the document; it tells the browser and Dreamweaver how the document should be decoded and
what fonts should be used to display the decoded text.
For example, if you specify Western European (Latin1), this meta tag is inserted:
.
Dreamweaver displays the document using the fonts you specify in Fonts Preferences for the Western European
(Latin1) encoding; a browser displays the document using the fonts the browser user specifies for the Western
European (Latin1) encoding.
If you specify Japanese (Shift JIS), this meta tag is inserted:
.
Dreamweaver displays the document using the fonts you specify for the Japanese encoding; a browser displays the
document using the fonts the browser user specifies for the Japanese encodings.
Last updated 6/3/2015
244
Page content and assets
You can change document encoding for a page and change the default encoding that Dreamweaver uses to create new
documents, including the fonts used to display each encoding.
Select and view elements in the Document window
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
To select an element in the Design view of the Document window, click the element. If an element is invisible, you must
make it visible before you can select it.
Some HTML code doesn’t have a visible representation in a browser. For example, comment tags don’t appear in
browsers. However, it can be useful while you’re creating a page to be able to select such invisible elements, edit them,
move them, and delete them.
Dreamweaver enables you to specify whether it shows icons marking the location of invisible elements in the Design
view of the Document window. To indicate which element markers appear, you can set options in Invisible Elements
preferences. For example, you can specify that named anchors be visible, but not line breaks.
You can create certain invisible elements (such as comments and named anchors) using buttons in the Common
category of the Insert panel. You can then modify these elements using the Property inspector.
Select elements
• To select a visible element in the Document window, click the element or drag across the element.
• To select an invisible element, select View > Visual Aids > Invisible Elements (if that menu item isn’t already selected)
and then click the element’s marker in the Document window.
Some objects appear on the page in a place other than where their code is inserted. For example, in Design view an
absolutely-positioned element (AP element) can be anywhere on the page, but in Code view the code defining the
AP element is in a fixed location. When invisible elements are showing, Dreamweaver displays markers in the
Document window to show the location of the code for such elements. Selecting a marker selects the entire element;
for example, selecting the marker for an AP element selects the entire AP element.
• To select a complete tag (including its contents, if any), click a tag in the tag selector at the lower left of the Document
window. (The tag selector appears in both Design view and Code view.) The tag selector always shows the tags that
contain the current selection or insertion point. The leftmost tag is the outermost tag containing the current
selection or insertion point. The next tag is contained in that outermost tag, and so on; the rightmost tag is the
innermost one that contains the current selection or insertion point.
In the following example, the insertion point is in a paragraph tag, . To select the table containing the paragraph
you want to select, select the

tag to the left of the tag.
View the HTML code associated with the selected text or object
❖ Do one of the following:
• In the Document toolbar, click the Show Code View button.
• Select View > Code.
• In the Document toolbar, click the Show Code and Design Views button.
Last updated 6/3/2015
245
Page content and assets
• Select View > Code and Design.
• Select Window > Code Inspector.
When you select something in either code editor (Code view or the Code inspector), it’s generally also selected
in the Document window. You may need to synchronize the two views before the selection appears.
Show or hide marker icons for invisible elements
❖ Select View > Visual Aids > Invisible Elements.
Note: Showing invisible elements may slightly change the layout of a page, moving other elements by a few pixels, so for
precision layout, hide the invisible elements.
Set invisible elements preferences
Use Invisible Elements preferences to specify which kinds of elements will be visible when you select View > Visual Aids
> Invisible Elements.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), then click Invisible Elements.
2 Select which elements should be made visible and click OK.
Note: A check mark next to the name of the element in the dialog box means the element is visible when View > Visual
Aids > Invisible Elements is selected.
Named Anchors Displays an icon that marks the location of each named anchor (a name = "") in the document.
Scripts Displays an icon that marks the location of JavaScript or VBScript code in the body of the document. Select
the icon to edit the script in the Property inspector or to link to an external script file.
Comments Displays an icon that marks the location of HTML comments. Select the icon to see the comment in the
Property inspector.
Line Breaks Displays an icon that marks the location of each line break (BR). This option is deselected by default.
Client-Side Image Maps Displays an icon marking the location of each client-side image map in the document.
Embedded Styles Displays an icon showing the location of CSS styles embedded in the body section of the
document. If CSS styles are placed in the head section of a document, they do not appear in the Document window.
Hidden Form Fields Displays an icon that marks the location of form fields that have the type attribute set to
"hidden".
Form Delimiter Displays a border around a form so you can see where to insert form elements. The border shows
the extent of the form tag, so any form elements inside that border are properly enclosed in form tags.
Anchor Points For AP elements Displays an icon that marks the location of code defining an AP element. The AP
element itself can be anywhere on the page. (AP elements are not invisible elements; only the code defining the AP
element is invisible.) Select the icon to select the AP element; you can then see the contents of the AP element even
if the AP element is marked as hidden.
Anchor Points For Aligned Elements Displays an icon showing the location of HTML code for elements that accept
the align attribute. These include images, tables, ActiveX objects, plug-ins, and applets. In some cases, the code for
the element may be separated from the visible object.
Visual Server Markup Tags Displays the location of server markup tags (such as Active Server Pages tags and
ColdFusion tags) whose content cannot be displayed in the Document window. These tags typically generate HTML
tags when processed by a server. For example, a tag generates an HTML table when processed by a
Last updated 6/3/2015
246
Page content and assets
ColdFusion server. Dreamweaver reperesents the tag with a ColdFusion invisible element since Dreamweaver
cannot determine the final, dynamic output of the page.
Nonvisual Server Markup Tags Displays the location of server markup tags (such as Active Server Pages tags and
ColdFusion tags) whose content cannot be displayed in the Document window. These tags are typically set-up,
processing, or logic tags (for example, , , and ) that do not generate HTML tags.
CSS Display: None Displays an icon showing the location of content that’s hidden by the display:none property in
the linked or embedded stylesheet.
Show Dynamic Text As Displays any dynamic text on your page in the format of {Recordset:Field} by default. If the
length of these values is long enough to distort your page’s formatting, you can change the display to {} instead.
Server-Side Includes Displays the actual contents of each server-side include file.
More Help topics
Viewing code
Use the Insert panel
Zoom in and out
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Dreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel
accuracy of graphics, select small items more easily, design pages with small text, design large pages, and so on.
Note: The zooming tools are only available in Design view.
Zoom in or out on a page
1 Click the Zoom tool (the magnifying glass icon) in the lower-right corner of the Document window.
2 Do one of the following:
• Click the spot on the page you want to magnify until you’ve achieved the desired magnification.
• Drag a box over the area on the page that you want to zoom in on and release the mouse button.
• Select a preset magnification level from the Zoom pop-up menu.
• Type a magnification level in the Zoom text box.
You can also zoom in without using the Zoom tool by pressing Control+= (Windows) or Command+= (Macintosh).
3To zoom out (reduce magnification), select the Zoom tool, press Alt (Windows) or Option (Macintosh) and
click on the page.
You can also zoom out without using the Zoom tool by pressing Control+- (Windows) or Command+- (Macintosh).
Edit a page after zooming
❖ Click the Select tool (the pointer icon) in the lower-right corner of the Document window, and click inside the page.
Last updated 6/3/2015
247
Page content and assets
Pan a page after zooming
1 Click the Hand tool (the hand icon) in the lower-right corner of the Document window.
2 Drag the page.
Fill the Document window with a selection
1 Select an element on the page.
2 Select View > Fit Selection.
Fill the Document window with an entire page
❖ Select View > Fit All.
Fill the Document window with the entire width of a page
❖ Select View > Fit Width.
More Help topics
Status bar overview
Set download time and size preferences
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and
plug-ins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences.
Actual download time varies depending on general Internet conditions.
A good guideline to use when checking download times for a particular web page is the 8-second rule. That is, most
users will not wait longer than 8 seconds for a page to load.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Status Bar from the Category list on the left.
3 Select a connection speed with which to calculate download time and click OK.
More Help topics
Set window size and connection speed
Working with text
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Last updated 6/3/2015
248
Page content and assets
Add text to a document
To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste
text. You can also import text from other documents.
When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command. The
Paste Special command lets you specify the format of pasted text in different ways. For example, if you wanted to paste
text from a formatted Microsoft Word document into your Dreamweaver document, but wanted to strip out all of the
formatting so that you could apply your own CSS style sheet to the pasted text, you could select the text in Word, copy
it to your Clipboard, and use the Paste Special command to select the option that lets you paste text only.
When using the Paste command to paste text from other applications, you can set paste preferences as default options.
Note: Control+V (Windows) and Command+V (Macintosh) always paste text only (no formatting) in Code view.
❖ Add text to your document by doing one of the following:
• Extract text from your PSD compositions using the Extract panel. For detailed information, see Copy text from
PSD files .
• Type text directly into the Document window.
• Copy text from another application, switch to Dreamweaver, position the insertion point in the Design view of
the Document window, and select Edit > Paste or Edit > Paste Special.
When you select Edit > Paste Special, you can select several paste formatting options.
You can also paste text using the following keyboard shortcuts:
Paste option
Keyboard shortcut
Paste
Control+V (Windows)
Command+V (Macintosh)
Paste Special
Control+Shift+V (Windows)
Command+Shift+V (Macintosh)
Insert special characters
Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes
entity names for characters such as the copyright symbol (©), the ampersand (&), and the registeredtrademark symbol (®). Each entity has both a name (such as —) and a numeric equivalent (such as —).
HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or less
than without Dreamweaver interpreting them as code. In this case, use > for greater than (>) and < for less than
(<).
Unfortunately, many older browsers don’t properly display many of the named entities.
1 In the Document window, place the insertion point where you want to insert a special character.
2 Do one of the following:
• Select the name of the character from the Insert > HTML > Special Characters submenu.
• In the Text category of the Insert panel, click the Characters button and select the character from the submenu.
Last updated 6/3/2015
249
Page content and assets
There are many other special characters available; to select one of them, select Insert > HTML > Special Characters
> Other or click the Characters button in the Text category of the Insert panel and select the Other Characters option.
Select a character from the Insert Other Character dialog box, and click OK.
Add space between characters
HTML only allows for one space between characters; to add additional space in a document you must insert a nonbreaking space. You can set a preference to automatically add non-breaking spaces in a document.
Insert a non-breaking space
❖ Do one of the following:
• Select Insert > HTML > Special Characters > Non-Breaking Space.
• Press Control+Shift+Spacebar (Windows) or Option+Spacebar (Macintosh).
• In the Text category of the Insert panel, click the Characters button and select the Non-Breaking Space icon.
Set a preference to add non-breaking spaces
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category make sure Allow Multiple Consecutive Spaces is checked.
Add paragraph spacing
Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return (Macintosh)
to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs. You can add a
single line of space between paragraphs by inserting a line break.
Add a paragraph return
❖ Press Enter (Windows) or Return (Macintosh).
Add a line break
❖ Do one of the following:
• Press Shift+Enter (Windows) or Shift+Return (Macintosh).
• Select Insert > HTML > Special Characters > Line Break.
• In the Text category of the Insert panel, click the Characters button and select the Line Break icon.
Create bulleted and numbered lists
You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new
text as you type in the Document window.
Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or
descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an
ordered or bulleted list nested within another numbered or ordered list.
You use the List Properties dialog box to set the appearance of an entire list or for an individual list item. You can set
number style, reset numbering, or set bullet style options for individual list items or for the entire list.
Last updated 6/3/2015
250
Page content and assets
Create a new list
1 In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following:
• In the HTML Property inspector, click either the Bulleted or Numbered List button.
• Select Format > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or
Definition List.
The leading character for the specified list item appears in the Document window.
2 Type the list item text, then press Enter (Windows) or Return (Macintosh) to create another list item.
3 To complete the list, press Enter twice (Windows) or press Return twice (Macintosh).
Create a list using existing text
1 Select a series of paragraphs to make into a list.
2 In the HTML Property inspector, click the Bulleted or Numbered List button, or select Format > List and select the
type of list desired—Unordered List, Ordered List, or Definition List.
Create a nested list
1 Select the list items you want to nest.
2 In the HTML Property inspector, click the Blockquote button, or select Format > Indent.
Dreamweaver indents the text and creates a separate list with the original list’s HTML attributes.
3 Apply a new list type or style to the indented text by following the same procedure used above.
Set list properties for an entire list
1 In the Document window, create at least one list item. The new style will automatically apply to additional items you
add to the list.
2 With the insertion point in the list item’s text, select Format > List > Properties to open the List Properties dialog box.
3 Set the options you want to define the list:
List Type Specifies list properties while List Item specifies an individual item in a list. Use the pop-up menu to select
a bulleted, numbered, directory, or menu list. Depending on the List Type you select different options appear in the
dialog box.
Style Determines the style of numbers or bullets used for a numbered or bulleted list. All items in the list will have
this style unless you specify a new style for items within the list.
Start Count Sets the value for the first item in a numbered list.
4 Click OK to set the choices.
Set list properties for a list item
1 In the Document window, place the insertion point in the text of a list item you want to affect
2 Select Format > List > Properties.
3 Under List Item, set the options you want to define:
New Style Specifies a style for the selected list item. Styles in the New Style menu are related to the type of list
displayed in the List Type menu. For example, if the List Item menu displays Bulleted List, only bullet options are
available in the New Style menu.
Reset Count To Sets a specific number from which to number list item entries.
Last updated 6/3/2015
251
Page content and assets
4 Click OK to set the options.
Search for and replace text
You can use the Find And Replace command to search for text and for HTML tags and attributes in a document or a
set of documents. The Search panel, in the Results panel group, shows the results of a Find All search.
Note: To search for files in a site, use different commands: Locate In Local Site and Locate In Remote Site.
Search for and replace text
1 Open the document to search in, or select documents or a folder in the Files panel.
2 Select Edit > Find And Replace.
3 Use the Find In option to specify which files to search:
Selected Text Confines the search to the text that’s currently selected in the active document.
Current Document Confines the search to the active document.
Open Documents Searches all documents that are currently open.
Folder Confines the search to a specific folder. After choosing Folder, click the folder icon to browse to and select a
folder to search.
Selected Files In Site Confines the search to the files and folders that are currently selected in the Files panel.
Entire Current Local Site Expands the search to all the HTML documents, library files, and text documents in the
current site.
4 Use the Search pop-up menu to specify the kind of search you want to perform:
Source Code Searches for specific text strings in the HTML source code. You can search for specific tags using this
option, but the Specific Tag search provides a more flexible approach to searching for tags.
Text Searches for specific text strings in the text of the document. A text search ignores any HTML that interrupts
the string. For example, a search for the black dog would match both the black dog and the black dog.
Text (Advanced) Searches for specific text strings that are either within or not within a tag or tags. For example, in
a document that contains the following HTML, searching for tries and specifying Not Inside Tag and the i tag would
find only the second instance of the word tries: John tries to get his work done on time, but he doesn’t always
succeed. He tries very hard. .
Specific Tag Searches for specific tags, attributes, and attribute values, such as all td tags with valign set to top.
Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return
(Macintosh), adds line breaks within the text search fields, allowing you to search for a Return character. When
performing such a search, deselect the Ignore Whitespace Differences option if you’re not using regular expressions. This
search finds a Return character in particular, not simply the occurrence of a line break; for instance, it doesn’t find a tag
or a tag. Return characters appear as spaces in the Design view, not as line breaks.
5 Use the following options to expand or limit the search:
Match Case Limits the search to text that exactly matches the case of the text you want to find. For example, if you
search for the brown derby, you will not find The Brown Derby.
Ignore Whitespace Treats all whitespace as a single space for the purposes of matching. For example, with this
option selected, this text would match this text and this text but not thistext. This option is not available when the
Use Regular Expressions option is selected; you must explicitly write your regular expression to ignore whitespace.
Note that
and
tags do not count as whitespace.
Last updated 6/3/2015
252
Page content and assets
Match Whole Word Limits the search to text that matches one or more complete words.
Note: Using this option is equivalent to doing a regular-expression search for a search string that starts and ends with
\b, the word-boundary regular expression.
Use Regular Expressions Causes certain characters and short strings (such as ?, *, \w, and \b) in your search string
to be interpreted as regular expression operators. For example, a search for the b\w*\b dog will match both the black
dog and the barking dog.
Note: If you are working in Code view and make changes to your document, and try to find and replace anything other
than source code, a dialog box appears letting you know that Dreamweaver is synchronizing the two views before doing
the search.
6 To search without replacing, click Find Next or Find All:
Find Next Jumps to and selects the next occurrence of the search text or tags in the current document. If there are
no more instances of the tag in the current document, Dreamweaver proceeds to the next document, if you are
searching in more than one document.
Find All Opens the Search panel in the Results panel group. If you are searching a single document, Find All displays
all occurrences of the search text or tags, with some surrounding context. If you are searching a directory or site,
Find All displays a list of documents that contain the tag.
7 To replace found text or tags, click Replace or Replace All.
8 When you’re finished, click Close.
Search again without displaying the Find And Replace dialog box
❖ Press F3 (Windows) or Command+G (Macintosh).
View a particular search result in context
1 Select Window > Results to display the Search panel.
2 Double-click a line in the Search panel.
If you’re searching the current file, the Document window displays the line containing that search result.
If you’re searching a set of files, the file containing that search result opens.
Perform the same search again
❖ Click the Find And Replace button.
Stop a search in progress
❖ Click the Stop button.
Search for a specific tag
Use the Find And Replace dialog box to search for text or tags in a document, and to replace the found material with
other text or tags.
1 Select Edit > Find And Replace.
2 In the Search pop-up menu, select Specific Tag.
3 Select a specific tag or [any tag] from the pop-up menu next to the Search pop-up menu, or type a tag name in the
text box.
Last updated 6/3/2015
253
Page content and assets
4 (Optional.) Limit the search with one of the following tag modifiers:
With Attribute Specifies an attribute that must be in the tag for it to match. You can specify a particular value for the
attribute or select [any value].
Without Attribute Selects an attribute that must not be in the tag for it to match. For example, select this option to
search for all img tags with no alt attribute.
Containing Specifies text or a tag that must be contained within the original tag for it to match. For example, in the
code heading 1, the font tag is contained within the b tag.
Not Containing Specifies text or a tag that must not be contained within the original tag for it to match.
Inside Tag Specifies a tag that the target tag must be contained in for it to match.
Not Inside Tag Specifies a tag that the target tag must not be contained in for it to match.
5 (Optional.) To limit the search further, click the Plus (+) button and repeat step 3.
6 If you didn’t apply any tag modifiers in steps 3 and 4, then click the Minus (-) button to remove the tag modifiers
pop-up menu.
7 If you want to perform an action when the tag is found (such as removing or replacing the tag), select the action
from the Action pop-up menu and, if applicable, specify any additional information necessary to perform the
action.
Search for specific text (Advanced)
Use the Find and Replace dialog box to search for text or tags in a document, and to replace the found material with
other text or tags.
1 Select Edit > Find and Replace.
2 In the Search pop-up menu, select Text (Advanced).
3 Enter text in the text field adjacent to the Search pop-up menu.
For example, type the word Untitled.
4 Select Inside Tag or Not Inside Tag, and then select a tag from the adjacent pop-up menu.
For example, select Inside Tag and then title.
5 (Optional.) Click the Plus (+) button to limit the search with one of the following tag modifiers:
With Attribute Specifies an attribute that must be in the tag for it to match. You can specify a particular value for the
attribute or select [any value].
Without Attribute Selects an attribute that must not be in the tag for it to match. For example, select this option to
search for all img tags with no alt attribute.
Containing Specifies text or a tag that must be contained within the original tag for it to match. For example, in the
code heading 1, the font tag is contained within the b tag.
Not Containing Specifies text or a tag that must not be contained within the original tag for it to match.
Inside Tag Specifies a tag that the target tag must be contained in for it to match.
Not Inside Tag Specifies a tag that the target tag must not be contained in for it to match.
6 (Optional.) To limit the search further, repeat step 4.
Last updated 6/3/2015
254
Page content and assets
Define abbreviations and acronyms
HTML provides tags that let you define the abbreviations and acronyms you use in your page for search engines, spell
checkers, language translation programs, or speech synthesizers. For example, you might want to specify that the
abbreviation ME in your page stands for mechanical engineer, or the acronym WHO stands for World Health
Organization.
1 Select the abbreviation or acronym in the text of your page.
2 Select Insert > HTML > Text Objects > Abbreviation, or Insert > HTML > Text Objects > Acronym.
3 Enter the full text of the acronym or abbreviation.
4 Enter the language, such as en for English, de for German, or it for Italian.
Set copy and paste preferences
You can set special paste preferences as default options when using Edit > Paste to paste text from other applications.
For example, if you always want to paste text as text only, or text with basic formatting, you can set the default option
in the Copy/Paste Preferences dialog box.
Note: When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command. The
Paste Special command lets you specify the format of pasted text in different ways. For example, if you wanted to paste text
from a formatted Microsoft Word document into your Dreamweaver document, but wanted to strip out all of the
formatting so that you could apply your own CSS style sheet to the pasted text, you could select the text in Word, copy it to
your Clipboard, and use the Paste Special command to select the option that lets you paste text only.
Note: Preferences set in the Copy/Paste Preferences dialog box apply only to material pasted into Design view.
1 Select Edit > Preferences (Windows) or Dreamweaver Preferences (Macintosh).
2 Click the Copy/Paste category.
3 Set the following options and click OK.
Text Only Lets you paste unformatted text. If the original text is formatted, all formatting, including line breaks and
paragraphs, will be removed.
Text With Structure Lets you paste text that retains structure, but does not retain basic formatting. For example, you
can paste text and retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other
formatting.
Text With Structure Plus Basic Formatting Lets you paste both structured and simple HTML-formatted text (e.g.,
paragraphs and tables, as well as text formatted with the b, i, u, strong, em, hr, abbr, or acronym tag).
Text With Structure Plus Full Formatting Lets you paste text that retains all structure, HTML formatting, and CSS
styles.
Note: The Full Formatting option cannot retain CSS styles that come from an external style sheet, nor can it retain styles
if the application from which you are pasting does not retain styles upon pasting to the Clipboard.
Retain Line Breaks Lets you keep line breaks in pasted text. This option is disabled if you have selected Text Only.
Clean Up Word Paragraph Spacing Select this option if you selected Text With Structure or Text With Structure Plus
Basic Formatting, and want to eliminate extra space between paragraphs when you paste your text.
More Help topics
Video tutorial: How to work with HTML text
Extract text from PSD files
Last updated 6/3/2015
255
Page content and assets
Set CSS properties
Viewing code
Regular expressions
Arabic and Hebrew text
New and improved features for working in Arabic and Hebrew are available in the Middle East and North African
edition of this software.
Bi-directional text flow
Text in Middle Eastern languages is mostly written from right to left (RTL). However, in general, the most commonly
used form is bi-directional (bidi) text - a mix of left-to-right and right-to-left text. An example of bidi text is a paragraph
that includes Arabic and English text. In CS6, you can use Dreamweaver to type Arabic, Hebrew, or bidi text, in design
view and code view.
In Dreamweaver Middle Eastern version, Right-to-left direction attribute can be applied to two notional objects,
paragraphs and characters. The direction attribute can be applied to tags supported in the HTML specification. The
direction attribute can take values: ltr (default), rtl, or inherit.
When you enter Arabic, Hebrew, or mixed text, Dreamweaver recognizes the languages as Right-to-left (RTL) and
displays it text appropriately.
Tag editor
You can apply direction and language settings using the Tag Editor.
Text direction and Unicode-bidi in CSS Rules
You can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicodebidi options.
Table properties
Right-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left
side. On tabbing, the cursor moves in RTL direction..
Specify the table direction using the Properties panel.
Last updated 6/3/2015
256
Page content and assets
Div properties
Use Direction to specify the Div direction in the Properties.
Edit in Live View
Live View uses a chromium-based rendering engine so that your content looks the same in Dreamweaver as it looks in
your favourite web browsers. During development, you can switch to Live View to quickly preview your page. And, to
save time switching between different views (code and design view), you can edit HTML elements directly within Live
View.
Live View refreshes instantly to show the changes on the page.
Hands-on tutorial
How to design, edit, and preview web pages with new Live View features
(Try-it, 60 min)
You can use the following components to edit your page in Live View:
• DOM panel: (Windows > DOM) Shows the HTML structure of your document and lets you copy-paste, duplicate,
delete, and rearrange the elements within the view. See DOM panelfor more information.
• Element Display: Appears above the selected HTML element in Live View. Element Display lets you associate
HTML elements with classes and IDs. See Associate HTML elements with classes and IDs for more information.
• Quick Property Inspector: Appears when you click the Sandwich icon in Element Display or select text. Quick
Property Inspector lets you edit image attributes and format text in Live View. See Quick Property Inspector for
more information.
• Live View Property Inspector: Appears below the Document window and lets you edit various HTML and CSS
properties in Live View. See Live View Property Inspector for more information.
• Insert panel: (Window > Insert) Lets you drag elements from the panel directly into Live View. See Insert elements
directly in Live View for more information.
Note: If your page changes dynamically (because of scripts) or has metarefresh enabled, then the edits that you do in Live
View may be lost.
Tips:
• If Live View goes blank when you are editing the page, switch off Live View and switch it on again.
• If you do not see the edits reflected on the page, click the refresh button in Live View.
Content that is rendered dynamically through databases or JavaScript, and non-editable regions in templates cannot be
edited in Live View. When you click such elements in Live View, a grey border appears around them to indicate that the
elements cannot be edited.
Last updated 6/3/2015
257
Page content and assets
Note: In Live View, only those options that are applicable for the selected element are made available in the main menu.
Options that are not applicable are greyed out when the element is selected.
Element Display
Using Element Display, you can associate HTML elements with classes and IDs directly in Live View. The Element
Display hints you with the available classes and IDs to help you quickly view and choose the required option.
You can also format tables using Element Display. For more information, see link.
Associate HTML elements with classes and IDs
Click the required element in Live View. The Element Display appears and displays the currently associated class and
ID.
While in Live View, you can also click the HTML element in the DOM panel to see the Element Display for the element.
• To dissociate the HTML element from a class or ID, click ‘x’ adjacent to the class or ID.
• To change the class or ID associated with the HTML element, click in the box. A list of available classes and IDs
appears. Click the required option.
• To add a class or an ID and apply it to the element, click ‘+’, and type in the name. To save the changes, click '+' or
press Enter.
You can then use the CSS Designer to define a selector that includes this class or ID.
Note: Element Display of transitional elements does not move along with the elements when the transition is triggered.
However, the changes that you make using the Element Display take effect even though it is not at the same location as the
transitional element.
Quick Property Inspector
Quick Property Inspector appears right above the selected elements in Live View. Using this Property Inspector, you
can edit attributes, or format text in Live View.
Last updated 6/3/2015
258
Page content and assets
To show or hide Quick Property Inspector, press Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).
Note: Code navigator icon is not displayed in Live View when you use Quick Property Inspector.
More Help topics
Edit HTML attributes
Edit text directly in Live View
Format text
Live View Property Inspector
Live View Property Inspector is the traditional Property Inspector that is available below the Document window.
The Live View 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 Live View Property Inspector vary depending on
the element selected.
Note: Live View Property Inspector is not available in Fluid Grid pages.
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.
Last updated 6/3/2015
259
Page content and assets
The following are the elements that you can edit using Live View Property Inspector:
• HTML
• CSS
• Image
• Table
• Media - only HTML5 Audio and HTML5 Video
• Anchor
• Form
• FormButton
• FormTextArea
• FormSubmitButton
• FormRange
• FormRadioButton
• FormList
• FormImage
• FormFile
• FormCheckBox
• FormColor
• FormDate
• FormDateTime
• FormDateTimeLocal
• FormMonth
• FormTime
• FormWeek
• FormNumber
• FormLabel
• FormHidden
• FormGeneric
Note: jQuery UI and template-related properties are not available for editing in the Live View Property Inspector.
Edit HTML attributes
You can quickly add, edit, or remove HTML attributes of images directly in Live View using the Quick Property
Inspector.
The Quick Property Inspector for images appears when you click the sandwich icon . Depending on the space
available, the Property Inspector appears on the right, left, top, bottom, or above the image. You can move around the
Property Inspector and place it at any convenient position.
Last updated 6/3/2015
260
Page content and assets
To edit the attributes, click the sandwich icon in the Quick Property Inspector. You can change the source of the image
along with other attributes such as “title” and ”alt”, and the changes are reflected instantaneously. Similarly you can also
adjust the Width and Height of the image in Live View.
The changes that you make are saved when you do any of the following:
• Click anywhere outside the Property Inspector
• Press Enter
• Press Tab to edit another attribute in the Property Inspector
• Save the file
When images are loaded dynamically, you can use the Quick Property Inspector of the image to quickly inspect the
attributes that are set for the image.
Edit text directly in Live View
You can now edit text elements directly in Live View. You can simply double-click the text element to edit it. Or, you
can click the text element to see the Element Display and then press Enter.
Note: When you press Enter after entering into the edit mode, the results vary depending on where the insertion point was
before you pressed Enter. The changes are similar to what happens when you press Enter while editing text in Design View.
Last updated 6/3/2015
261
Page content and assets
The orange border around the text element indicates that the mode is changed to edit mode.
The insertion point is positioned at the position of double-click. To select all the text in the text element, triple-click
the text element.
Note: If you delete all the text and type in the text again, the strong and em tags are reordered or rearranged.
Cut, copy-paste, and undo-redo are supported while you edit text in Live View. When you paste text, it is pasted as plain
text.
The following table lists the supported and unsupported scenarios during text editing in Live View:
Supported
Not supported
All HTML elements that can contain text
Editing of invalid or broken tags. If the HTML contains broken or invalid
tags, then editing of such tags is governed by the way browsers
perceive these tags:
• If browsers fix your HTML for you such that it closes
the broken tag, then you may be allowed to edit the
tags in Live View.
• If browsers add a new tag while rendering, then you
cannot edit the broken or invalid tags.
HTML files derived from templates in Live View
Editing of jQuery Pages
Structural tags containing inline elements. They are presented
together in a single box for editing.
Editing of tags that have both static and dynamic content. While you
can edit the selectors for such tags, you cannot edit text directly in Live
View. If you double-click such elements in Live View, a grey border
appears around them, indicating that text editing is not supported.
Static text in dynamic pages
Fluid Grid pages in Live View without grids
Text containing entities
Format text
You can now change the formatting of text and hyperlink text directly in Live View. To see the text formatting options,
select a word or a phrase. The Quick Property Inspector with formatting options appears just above the selected text.
Last updated 6/3/2015
262
Page content and assets
Insert elements directly in Live View
Using the Insert panel, you can directly drag elements into the required position in the document in Live View. Visual
aids in Live View such as Live Guides and DOM icons help you position the dragged elements with respect to a hovered
element.
Live Guides (in green) appear as you hover the mouse over different elements on the page before dropping the element.
These guides indicate the positions where the element can be inserted. They can appear above, below, left, or to the
right of the element that is hovered over.
• Above and Below - Appears while hovering over all types of elements/tags, except inline tags. When you hover the
mouse in the first (top) 50% of the element, guides appear above the hovered element. When you hover the mouse
in the last (bottom) 50% of the element, guides appear below the hovered element.
• Left and Right - Appears while hovering over inline tags, for example, , , or over tags that have the 'float
property' set.
Last updated 6/3/2015
263
Page content and assets
When you pause for a while before dropping the element, the DOM icon () appears. When you hover your mouse
over this icon, the DOM panel opens and you can drop the element inside the DOM structure of the document.
To insert elements directly in Live View, perform the following steps:
1 Switch to Live View.
2 From the Insert panel, click the required element and drag it into the document. Alternatively, you can just click the
required element in the Insert panel.
Tip: If you are unable to drag an element from the Insert panel on to the page, restart your computer and try again.
3 Drop the element at the top, bottom, right or left of an element based on Live Guides. Or, drop the element at a
precise place in the document structure by clicking and using the DOM panel.
The element gets inserted into the page and is highlighted.
Note: Insert panel is not available in Live View for Fluid Grid pages.
Marquee selection
Marquee selection allows you to easily select a block of text by clicking and dragging inside the tag in Live View. When
you click and drag a block of text in Dreamweaver releases prior to 2014.1, the element used to move as a whole.
Note: Marquee selection in live view is restricted to browser-supported operations.
Selection and dragging-and-dropping of elements
In Live View, you can move an element by clicking on the tag name and then dragging to the desired location. When
you click on a tag name, a hand cursor icon appears indicating that you can drag the tag from the point. When ou start
dragging the tag, guides help you place it in the precise location.
By clicking on the tag name in Live View, you can select the full contents of that tag in Code View.
Last updated 6/3/2015
264
Page content and assets
Keyboard navigation in Live View
You can traverse page elements or selectors in Element Display using your keyboard to quicken the editing process.
Traverse page elements
Up and Down arrow keys help you traverse page elements in Live View. The traversal is based on the DOM structure
of the document.
Keyboard navigation in Live View facilitates easy access to nested and wrapped elements.
When you access an element using the up or down arrow key, the Element Display for that element appears. You can
then navigate to the selectors in the Element Display or press Enter to edit the text directly in Live View.
Last updated 6/3/2015
265
Page content and assets
Traverse selectors
Press the Tab key to traverse through the selectors in Element Display. The selector in focus is displayed with an amber
border as shown below:
If you press the Tab key after the last applied selector, the add selector text box appears.
You can use Ctrl+[ or Cmd+[ to select the parent element and Ctrl+] or Cmd+] to select the child element.
Disable editing in Live View
If you prefer not to use Element Display and Quick Property Inspector in Live View, you can disable these editing
features.
Keyboard shortcuts:
• (Win) Ctrl+Alt+H
• (Mac) Cmd+Ctrl+H
1 Switch to Live View and click Live View Options (
).
2 Select Hide Live View Displays.
Last updated 6/3/2015
266
Page content and assets
Unsupported scenarios
• Dreaweaver template files cannot be edited in Live View.
• Tags that have both static and dynamic content. While you can edit the selectors for such tags, you cannot edit text
in Live View. If you double-click such elements in Live View, a grey border appears around them, indicating that text
editing is not supported.
• Tags that have pseudo selectors applied to them. You may encounter unexpected results when you try to edit such
elements in Live View.
DOM panel
The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map
elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to
the HTML structure in the DOM panel and see the changes take effect instantly in Live View.
Step-by-step tutorial
How to visualize and visually modify your HTML structure in Dreamweaver (30 min)
To open the DOM panel, select Window > DOM. You can also use the keyboard keys - Ctrl + / (Win); Cmd + / (Mac)
- to open the DOM panel.
When you drag elments to directly insert them in Live View, the icon appears before you drop the element. You can
click this icon to open the DOM panel and insert the element at the appropriate position in the document structure.
For more information, see Inserting elements directly in Live View .
The DOM panel displays only static elements in Code or Design view, and both static and dynamic elements in Live
view.
In fluid grid documents, the DOM panel only lets you visualize the HTML DOM structure and does not let you edit
the HTML structure.
Note: You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade
of grey.
Last updated 6/3/2015
267
Page content and assets
You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock
the panel along with other panels.
How to use the DOM panel
1 Open the required document and then open the DOM panel by selecting Window > DOM.
2 Switch to Live view and click the element that you want to inspect or edit.
• The HTML markup of the selected element is highlighted in the DOM panel.
• The applied selector is highlighted in CSS Designer.
• The relevant code is highlighted in the Code view.
• The relevant tag is highlighted (in blue) in Tag Selector.
Alternatively, you can select an HTML element in the DOM panel. When you click any element in the DOM panel:
• Live View scrolls to the corresponding element.
• If Code View is open, the Code View scrolls to the code corresponding to the element.
• CSS Designer (Selectors pane) scrolls to the closest corresponding selector (similar to you clicking the element
in Live View).
• The tag is highlighted in the Tag Selector.
This syncing between different views and CSS Designer lets you visualize the HTML markup and styling associated
with the selected element at a glance.
3 Proceed to edit the element as required (HTML or CSS editing). For information on using the DOM panel to edit
the HTML markup, see Edit HTML structure using the DOM panel . For information on CSS Designer, see CSS
Designer panel.
Last updated 6/3/2015
268
Page content and assets
Edit HTML structure using the DOM panel
The current selected element on the page is highlighted in the DOM panel. You can navigate to any node or element
using the arrow keys.
• To select an element or a node, click the element or node. To expand or collapse an element or a node, click the
HTML tag or double-click the selector adjacent to the tag.
• To duplicate an element or a node, right-click the element or the node, and click Duplicate. When you duplicate an
element with an ID associated with it, the ID is incremented for the new (duplicate) element.
• To copy an element or a node, right-click the element or the node, and click Copy. If you have copied an element
with children, the child elements are also copied.
• To paste an element or a node, click the element or the node under which you want to nest the copied elements.
Then, right-click the element or the node and click Paste.
• To paste the copied element as a child of a specific element or node, right-click the element or node (parent), and
then click Paste As Child.
• To move or rearrange elements, drag the element to the required location within the DOM panel.
A green line appears to indicate where the dragged element will be positioned. If you drop the element over the element
highlighted in gray (reference element), then the dropped element is positioned as the first child of the reference
element.
• To delete an element or a node, right-click the element or the node, and click Delete.
You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
Keyboard shortcuts:
• Duplicate - Ctrl + D (Win)/ Cmd + D (Mac)
• Delete - Del or Backspace
• Copy - Ctrl + C (Win)/Cmd + C (Mac)
• Paste - Ctrl + V (Win)/Cmd + V (Mac)
• Undo - Ctrl + Z (Win)/Cmd + Z (Mac)
• Redo - Ctrl + Y (Win)/Cmd + Y (Mac)
Note: Typically, when a page is edited, the Refresh button in the Document toolbar changes to Stop button indicating that
the page is reloading. After the page is reloaded, the Refresh button appears again to indicate that the page has completely
loaded. When you make changes in the DOM panel, the page may take a while to reload even after the Refresh button
appears back again after changing to Stop button.
Last updated 6/3/2015
269
Page content and assets
A Location where the dragged element is placed B Reference element C Element being moved
Important: If your page contains JavaScript, the right-click menu in the DOM panel gets displayed for a while and then
becomes unavailable. To use the right-click menu, hide the Live View displays (Live View options > Hide Live View
Displays), and then disable JavaScript (Live View options > Disable JavaScript).
Set text properties in the Property inspector
You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting. When
you apply HTML formatting, Dreamweaver adds properties to the HTML code in the body of your page. When you
apply CSS formatting, Dreamweaver writes properties to the head of the document or to a separate style sheet.
Last updated 6/3/2015
270
Page content and assets
Note: When you create CSS inline styles, Dreamweaver adds style attribute code directly to the body of the page.
About formatting text (CSS versus HTML)
Formatting text in Dreamweaver is similar to using a standard word processor. You can set default formatting styles
(Paragraph, Heading 1, Heading 2, and so on) for a block of text, change the font, size, color, and alignment of selected
text, or apply text styles such as bold, italic, code (monospace), and underline.
Dreamweaver has two Property inspectors, integrated into one: the CSS Property inspector and the HTML Property
inspector. When you use the CSS Property inspector, Dreamweaver formats text using Cascading Style Sheets (CSS).
CSS gives web designers and developers greater control over web page design, while providing improved features for
accessibility and reduced file size. The CSS Property inspector lets you access existing styles, as well as create new ones.
Using CSS is a way to control the style of a web page without compromising its structure. By separating visual design
elements (fonts, colors, margins, and so on) from the structural logic of a web page, CSS gives web designers visual and
typographic control without sacrificing the integrity of the content. In addition, defining typographic design and page
layout from within a single, distinct block of code—without having to resort to image maps, font tags, tables, and spacer
GIFs—allows for faster downloads, streamlined site maintenance, and a central point from which to control design
attributes across multiple web pages.
You can store styles created with CSS directly in the document, or for more power and flexibility, you can store styles
in an external style sheet. If you attach an external style sheet to several web pages, all the pages automatically reflect
any changes you make to the style sheet. To access all CSS rules for a page, use the CSS Styles panel (Window > CSS
Styles). To access rules that apply to a current selection, use the CSS Styles panel (Current mode) or the Targeted Rule
pop-up menu in the CSS Property inspector.
If you prefer, you can use HTML markup tags to format text in your web pages. To use HTML tags instead of CSS,
format your text using the HTML Property inspector.
Note: You can combine CSS and HTML 3.2 formatting within the same page. Formatting is applied in a hierarchical
manner: HTML 3.2 formatting overrides formatting applied by external CSS style sheets, and CSS embedded in a
document overrides external CSS.
Edit CSS rules in the Property inspector
1 Open the Property inspector (Window > Properties), if it isn’t already open and click the CSS button.
2 Do one of the following:
• Place the insertion point inside a block of text that’s been formatted by a rule you want to edit. The rule appears
in the Targeted Rule pop-up menu.
• Select a rule from the Targeted Rule pop-up menu.
3 Make changes to the rule by using the various options in the CSS Property inspector.
Targeted Rule Is the rule you are editing in the CSS Property inspector. When you have an existing style applied to
text, the rule affecting the text’s format appears when you click inside the text on the page. You can also use the
Targeted Rule pop-up menu to create new CSS rules, new in-line styles, or apply existing classes to selected text. If
you’re creating a new rule, you’ll need to complete the New CSS Rule dialog box. For more information, see the links
at the end of this topic.
Edit Rule Opens the CSS Rule Definition dialog box for the targeted rule. If you select New CSS Rule from the
Targeted Rule pop-up menu and click the Edit Rule button, Dreamweaver opens the New CSS Rule definition dialog
box instead.
CSS Panel Opens the CSS Styles panel and displays properties for the targeted rule in Current view.
Last updated 6/3/2015
271
Page content and assets
Font Changes the font of the targeted rule.
Size Sets the font size for the targeted rule.
Text Color Sets the selected color as the font color in the targeted rule. Select a web-safe color by clicking the color
box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.
Bold Adds the bold property to the targeted rule.
Italic Adds the italics property to the targeted rule.
Left, Center, and Right Align Adds the respective alignment properties to the targeted rule.
note: The Font, Size, Text Color, Bold, Italic, and Alignment properties always display the properties for the rule that
applies to the current selection in the Document window. When you change any of these properties, you affect the
targeted rule.
Set HTML formatting in the Property inspector
1 Open the Property inspector (Window > Properties), if it isn’t already open, and click the HTML button.
2 Select the text you want to format.
3 Set the options you want to apply to the selected text:
Format Sets the paragraph style of the selected text. Paragraph applies the default format for a
tag, Heading 1
adds an H1 tag, and so on.
ID Assigns an ID to your selection. The ID pop-up menu (if applicable) lists all of the document’s unused, declared
IDs.
Class Displays the class style that is currently applied to the selected text. If no styles have been applied to the
selection, the pop-up menu shows No CSS Style. If multiple styles have been applied to the selection, the menu is
blank.
Use the Style menu to do any of the following:
• Select the style you want to apply to the selection.
• Select None to remove the currently selected style.
• Select Rename to rename the style.
• Select Attach Style Sheet to open a dialog box that lets you attach an external style sheet to the page.
Bold Applies either or to the selected text according to the style preference set in the General category
of the Preferences dialog box.
Italic Applies either or to the selected text according to the style preference set in the General category of
the Preferences dialog box.
Unordered List Creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.
Ordered List Creates a numbered list of the selected text. If no text is selected, a new numbered list is started.
Blockquote and Remove Blockquote Indent or remove indentation from the selected text by applying or removing
the blockquote tag. In a list, indenting creates a nested list and removing the indentation unnests the list.
Link Creates a hypertext link of the selected text. Click the folder icon to browse to a file in your site; type the URL;
drag the Point-To-File icon to a file in the Files panel; or drag a file from the Files panel into the box.
Title Specifies the textual tooltip for a hypertext link.
Last updated 6/3/2015
272
Page content and assets
Target Specifies the frame or window in which the linked document will load:
• _blank loads the linked file in a new, unnamed browser window.
• _parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t
need to specify it.
• _top loads the linked file in the full browser window, thereby removing all frames.
Rename a class from the HTML Property inspector
Dreamweaver displays all of the classes available to your page in the Class menu of the HTML Property inspector. You
can rename styles in this list by selecting the Rename option at the end of the list of class styles.
1 Select Rename from the text Property inspector Style pop-up menu.
2 Select the style you want to rename from the Rename Style pop-up menu.
3 Enter a new name in the New Name text field and click OK.
More Help topics
Open the CSS Styles panel
Understanding Cascading StyleSheets
Spell check a web page
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Use the Check Spelling command to check the spelling in the current document. The document must be a web page
(for example, an HTML, ColdFusion, or PHP page). The Check Spelling command does not work on text files or XML
files.
Additionally, the Check Spelling command ignores HTML tags and attribute values.
Note: Dreamweaver can only spell check the file that is currently open in the Document window. It cannot spell check all
of the files in a site simultaneously.
By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, select Edit >
Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh), then in the Spelling
Dictionary pop-up menu select the dictionary you want to use.
1 Select Commands > Check Spelling or press Shift+F7.
When Dreamweaver encounters an unrecognized word, the Check Spelling dialog box appears.
2 Select the appropriate option based on how you want the discrepancy handled.
Add To Personal Adds the unrecognized word to your personal dictionary.
Ignore Ignores this instance of the unrecognized word.
Change Replaces this instance of the unrecognized word with text that you type in the Change To text box or with
the selection in the Suggestions list.
Last updated 6/3/2015
273
Page content and assets
Ignore All Ignores all instances of the unrecognized word.
Change All Replaces all instances of the unrecognized word in the same manner.
Note: Dreamweaver does not provide a way of deleting entries that have been added to personal dictionaries.
Import tabular data
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can import tabular data into your document by first saving the files (such as Microsoft Excel files or database files)
as delimited text files.
You can import and format tabular data and import text from Microsoft Word HTML documents.
You can also add text from Microsoft Excel documents to a Dreamweaver document by importing the contents of the
Excel file into a web page.
1 Select File > Import > Import Tabular Data, or Insert > Table Objects > Import Tabular Data.
2 Browse for the file you want or enter its name in the text box.
3 Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon,
and Other.
If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.
4 Use the remaining options to format or define the table into which the data will be imported and click OK.
More Help topics
Open and edit existing documents
Import and export tabular data
Import Microsoft Office documents (Windows only)
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can insert the full contents of a Microsoft Word or Excel document in a new or existing web page. When you import
a Word or Excel document, Dreamweaver receives the converted HTML and inserts it into your web page. The file’s
size, after Dreamweaver receives the converted HTML, must be less than 300K.
Instead of importing the entire contents of a file, you can also paste portions of a Word document and preserve the
formatting.
Note: If you use Microsoft Office 97, you cannot import the contents of a Word or Excel document; you must insert a link
to the document.
1 Open the web page into which you want to insert the Word or Excel document.
2 In Design view, do one of the following to select the file:
• Drag the file from its current location to the page where you want the content to appear.
Last updated 6/3/2015
274
Page content and assets
• Select File > Import > Word Document or File > Import > Excel Document.
3 In the Insert Document dialog box, browse to the file you want to add, select any of the formatting options from the
Formatting pop-up menu at the bottom of the dialog box, and then click Open.
Text Only Inserts unformatted text. If the original text is formatted, all formatting will be removed.
Text With Structure Inserts text that retains structure, but does not retain basic formatting. For example, you can
paste text and retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other
formatting.
Text With Structure Plus Basic Formatting Inserts both structured and simple HTML-formatted text (e.g.,
paragraphs and tables, as well as text formatted with the b, i, u, strong, em, hr, abbr, or acronym tag).
Text With Structure Plus Full Formatting Inserts text that retains all structure, HTML formatting, and CSS styles.
Clean Up Word Paragraph Spacing Eliminates extra space between paragraphs when you paste your text if you
selected Text With Structure or Basic Formatting.
The contents of the Word or Excel document appear in your page.
Create a link to a Word or Excel document
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
You can insert a link to a Microsoft Word or Excel document in an existing page.
1 Open the page where you want the link to appear.
2 Drag the file from its current location to your Dreamweaver page, positioning the link wherever you want.
3 Select Create A Link, and then click OK.
4 If the document you are linking to is located outside of your site’s root folder, Dreamweaver prompts you to copy the
document to the site root.
By copying the document to the site’s root folder, you ensure that the document will be available when you publish
the website.
5 When you upload your page to your web server, make sure to upload the Word or Excel file, too.
Your page now contains a link to the Word or Excel document. The link text is the name of the linked file; you can
change the link text in the Document window if you wish.
Use HTML Formatting
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
While CSS is the preferred method for formatting text, Dreamweaver still lets you format text with HTML.
Last updated 6/3/2015
275
Page content and assets
Format paragraphs
Use the Format pop-up menu in the HTML Property inspector or the Format > Paragraph Format submenu to apply
the standard paragraph and heading tags.
1 Place the insertion point in the paragraph, or select some of the text in the paragraph.
2 Using the Format > Paragraph Format submenu or the Format pop-up menu in the Property inspector, select an
option:
• Select a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag
associated with the selected style (for example, h1 for Heading 1, h2 for Heading 2, pre for Preformatted text, and
so on) is applied to the entire paragraph.
• Select None to remove a paragraph format.
When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard
paragraph. To change this setting, select Edit > Preferences (Windows) or Dreamweaver > Preferences
(Macintosh); then in the General category, under Editing Options, make sure Switch To Plain Paragraph After
Heading is not selected.
Change the color of text
You can change the default color of all the text in a page, or you can change the color of selected text in the page.
Define default text colors for a page
❖ Select Modify > Page Properties > Appearance (HTML) or Links (HTML), and then select colors for the Text Color,
Link Color, Visited Links, and Active Links options.
Note: The active link color is the color that a link changes to while it’s being clicked. Some web browsers may not use the
color you specify.
Change the color of selected text
❖ Select Format > Color, select a color from the system color picker, and then click OK.
Align text
You align text with HTML using the Format > Align submenu. You can center any element on a page using the Format
> Align > Center command.
Align text on a page
1 Select the text you want to align or simply insert the pointer at the beginning of the text.
2 Select Format > Align and select an alignment command.
Center page elements
1 Select the element (image, plug-in, table, or other page element) you want to center.
2 Select Format > Align > Center.
Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a
paragraph.
Last updated 6/3/2015
276
Page content and assets
Indent text
Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides of the
page.
1 Place the insertion point in the paragraph you want to indent.
2 Select Format > Indent or Outdent, or select List > Indent or Outdent from the context menu.
Note: You can apply multiple indents to a paragraph. Each time you select this command, the text indents further from
both sides of the document.
Apply font styles
You can use HTML to apply text formatting to one letter, or to entire paragraphs and blocks of text in a site. Use the
Format menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or
italic), and size.
1 Select the text. If no text is selected, the option applies to subsequent text you type.
2 Select from the following options:
• To change the font, select a font combination from the Format > Font submenu. Select Default to remove
previously applied fonts. Default applies the default font for the selected text (either the browser default font or
the font assigned to that tag in the CSS style sheet).
• To change the font style, select a font style (Bold, Italic, Underline, and so on) from the Format > Style submenu.
More Help topics
Set text propertiesin the Property inspector
Set CSS properties
Use the color picker
Creating pages with CSS
Create a new CSS rule
Use horizontal rules
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with
one or more rules.
Create a horizontal rule
1 In the Document window, place the insertion point where you want to insert a horizontal rule.
2 Select Insert > HTML > Horizontal Rule.
Modify a horizontal rule
1 In the Document window, select the horizontal rule.
Last updated 6/3/2015
277
Page content and assets
2 Select Window > Properties to open the Property inspector, and modify the properties as desired:
The ID text box Lets you specify an ID for the horizontal rule.
W and H Specify the width and height of the rule in pixels or as a percentage of the page size.
Align Specifies the alignment of the rule (Default, Left, Center, or Right). This setting applies only if the width of
the rule is less than the width of the browser window.
Shading Specifies whether the rule is drawn with shading. Deselect this option to draw the rule in a solid color.
Class Lets you attach a style sheet, or apply a class from an already attached style sheet.
Modify font combinations
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Format >
Font submenu.
Font combinations determine how a browser displays text in your web page. A browser uses the first font in the
combination that is installed on the user’s system; if none of the fonts in the combination is installed, the browser
displays the text as specified by the user’s browser preferences.
Modify font combinations
1 Select Format > Font > Edit Font List.
2 Select the font combination from the list at the top of the dialog box.
The fonts in the selected combination are listed in the Chosen Fonts list in the lower-left corner of the dialog box.
To the right is a list of all available fonts installed on your system.
3 Do one of the following:
• To add or remove fonts from a font combination, click the arrows button (<< or >>) between the Chosen Fonts
list and the Available Fonts list.
• To add or remove a font combination, click the Plus (+) and Minus (–) buttons at the top of the dialog box.
• To add a font that is not installed on your system, type the font name in the text field below the Available Fonts
list and click the << button to add it to the combination. Adding a font not installed on your system is useful, for
example, for specifying a Windows-only font when you are developing pages on a Macintosh.
• To move the font combination up or down in the list, click the arrow buttons at the top of the dialog box.
Add a new combination to the font list
1 Select Format > Font > Edit Font List.
2 Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list.
3 Repeat step 2 for each subsequent font in the combination.
To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list
and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for
example, for specifying a Windows-only font when you are developing pages on a Macintosh.
Last updated 6/3/2015
278
Page content and assets
4 When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and click
the << button to move the generic font family to the Chosen Fonts list.
Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen
Fonts list are available on the user’s system, the text appears in the default font associated with the generic font
family. For example, the default monospace font on most systems is Courier.
Add Edge Web Fonts to the Font list
You can add both Adobe Edge Web Fonts to the Font list in Dreamweaver. In the Font list, Dreamweaver supported font
stacks are listed first ahead of Web fonts and Edge Web Fonts.
Add Adobe Edge Web Fonts to the Font list
You can now use Adobe Edge Web Fonts in your web pages. When an Edge font is used in a page, an additional script
tag is added to reference a JavaScript file. This file downloads the font from the Creative Cloud server directly to the
browser’s cache.
When displaying the page, fonts are downloaded from the Creative Cloud server even if the font is available on the
user's computer.
For example, a Script tag that uses only the font "Abel" has the format:

1 Select Modify > Manage Fonts.
2 The Adobe Edge Fonts tab displays all the Adobe Edge Web Fonts that you can add to the Font list.
3 To find and add fonts from this list to the Font list, do the following:
• Click the font that you would like to add to the font list.
• To deselect a font, click the font again.
• Use filters to shortlist preferred fonts. For example, to shortlist fonts of the Serif type, click
.
• You can use multiple filters. For example, to shortlist filters of Serif type that can be used for paragraphs, click
and
.
• To search a font by its name, enter its name in the search box.
4 Click
to filter the fonts that you have selected.
5 Click Done.
6 Open the Font list from any location. For example, you could use the Font list in the CSS section of the Properties
panel.
In the Font list, the Dreamweaver font stacks are listed ahead of the web fonts. Scroll down the list to locate your
selected fonts.
Last updated 6/3/2015
279
Page content and assets
Add local web fonts to the Font list
You can add web fonts from your computer to the Font list in Dreamweaver. The added fonts are reflected in all Font
menus in Dreamweaver. Fonts of the type EOT, WOFF, TTF, and SVG are supported.
1 Select Modify > Manage Fonts.
2 In the dialog that appears, click the Local Web Fonts tab.
3 Click the Browse button corresponding to the font type that you wish to add. For example, if your font is in the EOT
format, click the Browse button corresponding to EOT Font.
4 Navigate to the location on your compuer containing the font. Select the file and open it. If other formats for the font
exist in that location, they are automatically added to the dilaog. The Font Name is also automatically picked from
the name of the font.
5 Select the option that asks you to confirm that you have licensed the font for website use.
6 Click Done. The list of fonts is displayed in Current List of Local Fonts.
To remove a web font from the font list, select the font in Current List of Local Fonts, and click Remove.
Create custom font stacks
A font stack is a list of fonts in a CSS font-family declaration. Using the Custom Font Stacks tab of the Manage Fonts
dialog, you can do the following:
• Add new font stacks using the “+” button.
• To edit existing font stacks, select the font stack from the Font List. Use the “>>” and "<<" buttons to update the list
of Chosen Fonts.
• Delete existing font stacks using the “-“ button.
• Reorder stacks using the arrow buttons.
Preview inserted fonts
You cannot preview Edge and Web fonts in the Design view. Switch to Live view or preview the page in a browser to
preview them.
Update web font script tag across files
When you update the font in a CSS file that is linked to multiple HTML files, you are prompted to update the script tag
in the related HTML files. When you click Update, the script tags in all the affected HTML files is updated.
Update web font script tag on a page
Select Commands > Clean Up Web Fonts Script Tag (Current Page) to update any web fonts on the web page that are
not reflected in the script tag.
Insert dates
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Last updated 6/3/2015
280
Page content and assets
Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or
without the time) and provides the option of updating that date whenever you save the file.
Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times
that a visitor sees when they display your site. They are examples only of the way you want to display this information.
1 In the Document window, place the insertion point where you want the date to be inserted.
2 Do one of the following:
• Select Insert > Date.
• In the Common category of the Insert panel, click the Date button.
3 In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format
for the time.
4 If you want the inserted date to be updated every time you save the document, select Update Automatically On Save.
If you want the date to become plain text when it’s inserted, and never update automatically, deselect that option.
5 Click OK to insert the date.
If you have selected Update Automatically On Save, you can edit the date format after it has been inserted into the
document by clicking on the formatted text and selecting Edit Date Format in the Property inspector.
Working with assets
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Assets panel overview
Use the Assets panel (Window > Assets) to manage assets in the current site. The Assets panel displays assets for the
site associated with the active document in the Document window.
Note: You must define a local site before you can view assets in the Assets panel.
Last updated 6/3/2015
281
Page content and assets
The Assets panel provides different ways to view assets:
Site list Shows all of the assets in your site, including colors and URLs that are used in any document in your site.
Favorites list Shows only the assets you’ve explicitly chosen.
To switch between these two views, select either the Site or Favorites radio button above the preview area. (These two
views are not available for the Templates and Library categories.)
Note: Most of the Assets panel operations work the same in both lists. There are a few tasks, however, that you can perform
only in the Favorites list.
In both lists, assets fall into one of the following categories:
Images
Colors
Image files in GIF, JPEG, or PNG formats.
Colors used in documents and style sheets, including colors of text, backgrounds, and links.
External links in your current site documents, including FTP, gopher, HTTP, HTTPS, JavaScript, e-mail
(mailto), and local file (file://) links.
URLs
Media
Media files such as Adobe Flash (only SWF) files, Adobe Shockwave files, QuickTime, or MPEG files.
JavaScript or VBScript files. Scripts in HTML files (rather than in independent JavaScript or VBScript files)
do not appear in the Assets panel. This category is available only in Code and Design View.
Scripts
Master page layouts used on multiple pages. Modifying a template automatically modifies all pages
attached to it. This category is available only in Code and Design View.
Templates
Design elements that you use in multiple pages; when you modify a library item, all pages containing
that item are updated. This category is available only in Code and Design View.
Library items
Note: To appear in the Assets panel, a file must fall into one of these categories. Some other types of files are sometimes
called assets, but they aren’t shown in the panel.
By default, assets in a category are listed alphabetically by name, but you can sort them by type and several other criteria.
You can also preview assets and resize the columns and the preview area.
View an asset in the preview area
❖ Select the asset in the Assets panel.
Last updated 6/3/2015
282
Page content and assets
Display assets in a category
❖ Click a category icon on the left side of the Assets panel.
Sort assets
❖ Click a column heading.
For example, to sort the list of images by type (so that all the GIF images are together, all the JPEG images are
together, and so on), click the Type column heading.
Resize a column
❖ Drag the line separating two column headings.
Resize the preview area
❖ Drag the splitter bar (between the preview area and the list of assets) up or down.
Refresh the Assets panel
It can take a few seconds to create the Site list because Dreamweaver must first read the site cache.
Certain changes don’t appear immediately in the Assets panel. For instance, when you add or remove an asset from your
site, the changes don’t appear in the Assets panel until you refresh the Site list by clicking the Refresh Site List button.
If you add or remove an asset outside Dreamweaver—usingWindows Explorer or the Finder, for example—you must
rebuild the site cache to update the Assets panel.
When you remove the only instance of a particular color or URL in your site, or when you save a new file that contains
a color or URL that isn’t already used in the site, the changes don’t appear in the Assets panel until you refresh the Site
list.
• To refresh the Site list manually, click the Refresh Site List button
it as necessary.
. Dreamweaver creates the site cache or updates
• To refresh the Site list and manually rebuild the site cache, right-click (Windows) or Command-click (Macintosh)
in the Assets list, then select Refresh Site List.
Add an asset to a document
You can insert most assets into a document by dragging them into Live View, Code View, and Design View in the
Document window, or by using the Insert button in the panel. You can drag the assets from both the list view and the
preview pane of the Assets panel.
Note: Dragging from the preview pane is supported only on Mac.
You can insert colors and URLs in Design or Live View. In Design View, you can apply colors and URLs to selected
elements.
1 In the document, place the insertion point where you want the asset to appear.
2 In the Assets panel, select from the asset category buttons at the left.
Note: Select any category except Templates. A template is applied to an entire document; it can’t be inserted into a
document.
3 Select either Site or Favorites at the top of the panel, then select the asset.
There are no Site or Favorites lists for library items; skip this step if you’re inserting a library item.
Last updated 6/3/2015
283
Page content and assets
4 Do one of the following:
• Drag the asset from the panel to the document. You can drag from the list view as well as from the preview pane.
Note: On Windows, you cannot drag assets from the preview pane.
You can drag scripts into the head content area of the Document window; if that area isn’t visible, select View >
Head Content.
• Select the asset in the panel and click Insert.
If the inserted asset is a color, it applies to text appearing after the insertion point.
Apply color to text using the Assets panel
The Assets panel shows the colors you’ve already applied to various elements, such as text, table borders, backgrounds,
and so on.
1 In Design View, perform the following steps:
a Select the text in the document.
b In the Assets panel, select the Colors category
.
c Select the desired color, and click Apply.
2 In Live View, perform the following steps:
a In the Assets panel, select the Colors category
.
b Do one of the following:
• Right-click the color in Assets panel, and click Copy Color Value. The color value is copied to your clipboard.
You can now paste the color value (Ctrl+v, Cmd+v) in CSS Designer.
• Drag the color from preview and hover the mouse on elements in Live View. When you drop the color, the
New CSS Rule dialog appears and when you click OK, the color is applied to the selected element.
• Click Apply in the Assets panel. The New CSS Rule dialog appears and when you click OK, the color is applied
to the selected element.
Assign URLs to images or text
1 In Design View, perform the following steps:
a Select the text or image.
b In the Assets panel, select the URLs category in either the Sites or Favorites view, depending on where the URL
is stored.
Note: URLs for your site’s files are stored in the Sites view by default. The Favorites view holds URLs that you have
added yourself.
c Select the URL.
d Do one of the following:
• Drag the URL from the panel to the selection in Design View.
• Select the URL, then click Insert.
2 In Live View, perform the following steps:
a In the Assets panel, select the URLs category in either the Sites or Favorites view, depending on where the URL
is stored.
Last updated 6/3/2015
284
Page content and assets
b Do one of the following:
• Drag the URL from the preview or the list view. Hover the mouse on elements in Live View. When you drop
the URL, wraps the element highlighted in Live View.
• Click the required element in Live View. Choose the URL in the Assets panel and click Apply. The selected
element is wrapped with the tag.
Select and edit assets
The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets.
Select multiple assets
1 In the Assets panel, select an asset.
2 Select the other assets in one of the following ways:
• Shift-click to select a consecutive series of assets.
• Control-click (Windows) or Command-click (Macintosh) to add an individual asset to the selection (whether or
not it’s adjacent to the existing selection). Control-click or Command-click a selected asset to deselect it.
Edit an asset
When you edit an asset in the Assets panel, the behavior varies according to the asset type. For some assets, such as
images, you use an external editor, which opens automatically if you have defined an editor for that asset type. You can
edit colors and URLs in the Favorites list only. When you edit templates and library items, you make the changes within
Dreamweaver.
1 In the Assets panel, do one of the following:
• Double-click the asset.
• Select the asset, then click the Edit button
.
Note: If the asset must be edited in an external editor and one doesn’t open automatically, select Edit > Preferences
(Windows) or Dreamweaver > Preferences (Macintosh), select the File Types/Editors category, and make sure you have
defined an external editor for that asset type.
2 Make your changes.
3 When you finish, do one of the following:
• If the asset is file-based (anything other than a color or URL), save it (in the editor you used), and close it.
• If the asset is a URL, click OK in the Edit URL dialog box.
Note: If the asset is a color, the color picker closes automatically after you pick a color. To dismiss the color picker without
picking a color, press Esc.
Reuse assets in another site
The Assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site in
another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an entire
Favorites folder at once.
You may need to locate the file in the Files panel that corresponds to an asset in the Assets panel before you transfer the
asset to or from your remote site.
Last updated 6/3/2015
285
Page content and assets
Note: The Files panel might show a different site from the one that the Assets panel shows. This is because the Assets panel
is associated with the active document.
Locate an asset file in the Files panel
1 In the Assets panel, select the category of the asset you want to find.
2 Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select Locate
In Site from the context menu.
Note: Locate In Site is unavailable for colors and URLs, which do not correspond to files in the site.
The Files panel opens, with the asset file selected. The Locate In Site command locates the file corresponding to the
asset itself; it does not locate files that use that asset.
Copy assets from the Asset panel to another site
1 In the Assets panel, select the category of the asset you want to copy.
2 Right-click (Windows) or Control-click (Macintosh) one or more assets in either the Site list or Favorites list, select
Copy To Site, and select the target site name from the submenu listing all the sites you’ve defined.
Note: In the Favorites list, you can copy a Favorites folder as well as individual assets.
The assets are copied to their corresponding locations in the target site. Dreamweaver creates new folders in the
target site’s hierarchy as needed. The assets are also added to the target site’s Favorites list.
Note: If the asset you copied is a color or a URL, it appears only in the target site’s Favorites list. Because colors and URLs
don’t correspond to files, there’s no file to copy into the other site.
More Help topics
Creating and managing a list of favorite assets
Working with library items
Add or remove favorite assets
Start an external editor for media files
Creating and managing a list of favorite assets
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Managing favorite assets
The complete list of all recognized assets list can become cumbersome for some large sites. You can add frequently used
assets to a Favorites list, group related assets together, give them nicknames to remind yourself what they’re for, and
find them easily in the Assets panel.
Note: Favorite assets are not stored as separate files on your disk; they’re references to the assets in the Site list.
Dreamweaver keeps track of which assets from the Site list to display in the Favorites list.
Most of the operations of the Assets panel are the same in the Favorites list as in the Site list. However, there are several
tasks that you can perform only in the Favorites list.
Last updated 6/3/2015
286
Page content and assets
Add or remove favorite assets
There are several ways to add assets to your site’s Favorites list in the Assets panel.
Adding a color or URL to the Favorites list requires an extra step. You can’t add new colors or URLs to the Site list; the
Site list contains only assets that are already in use in your site.
Note: There are no Favorites lists for templates and library items.
Add assets to the Favorites list
Do one of the following:
• Select one or more assets in the Site list of the Assets panel, then click the Add To Favorites button
.
• Select one or more assets in the Site list of the Assets panel, right-click (Windows) or Control-click (Macintosh),
then select Add To Favorites.
• Select one or more files in the Files panel, right-click (Windows) or Control-click (Macintosh), then select Add To
Favorites. Dreamweaver ignores files that don’t correspond to a category in the Assets panel.
• Right-click (Windows) or Control-click (Macintosh) an element in the Document window’s Design view, then select
the context menu command to add the element to a Favorites category.
The context menu for text contains either Add To Color Favorites or Add To URL Favorites, depending on whether
the text has a link attached. You can add only those elements that match one of the categories in the Assets panel.
Add a new color or URL to the Favorites list
1 In the Assets panel, select the Colors or URLs category.
2 Select the Favorites option at the top of the panel.
3 Click the New Color or New URL button
.
4 Do one of the following:
• Select a color using the color picker, then give the color a nickname if desired.
To close the color picker without selecting a color, press Esc or click the gray bar at the top of the color picker.
• Enter a URL and a nickname in the Add New URL dialog box, then click OK.
Remove assets from the Favorites list
1 In the Assets panel, select the Favorites option at the top of the panel.
2 Select one or more assets (or a folder) in the Favorites list.
3 Click the Remove From Favorites button
.
The assets are removed from the Favorites list, but not from the Site list. If you remove a Favorites folder, the folder
and all its contents are removed.
Create a nickname for a favorite asset
You can give nicknames (for instance, PageBackgroundColor rather than #999900) to assets only in the Favorites list.
The Site list retains their real filenames (or values, in the case of colors and URLs).
1 In the Assets panel (Window > Assets), select the category that contains your asset.
2 Select the Favorites option at the top of the panel.
Last updated 6/3/2015
287
Page content and assets
3 Do one of the following:
• Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, then select Edit
Nickname.
• Click the asset’s name once, pause, then click it again. (Do not double-click; double-clicking opens the item for
editing.)
4 Type a nickname for the asset, then press Enter (Windows) or Return (Macintosh).
Group assets in a Favorites folder
Placing an asset in Favorites folder does not change the location of the asset’s file on your disk.
1 In the Assets panel, select the Favorites option at the top of the panel.
2 Click the New Favorites Folder button
.
3 Type a name for the folder, then press Enter (Windows) or Return (Macintosh).
4 Drag assets into the folder.
More Help topics
Assets panel overview
Use the color picker
Assets panel overview
Insert and edit images
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF,
JPEG, and PNG. GIF and JPEG file formats are the best supported and can be viewed in most browsers. You can easily
insert images and edit them using the Dreamweaver user interface.
GIF (Graphic Interchange Format) GIF files use a maximum of 256 colors, and are best for displaying noncontinuoustone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with
uniform colors and tones.
JPEG (Joint Photographic Experts Group) The JPEG file format is the superior format for photographic or continuous-
tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file
size and the file download time. You can often strike a good balance between the quality of the image and the file size
by compressing a JPEG file.
PNG (Portable Network Group) The PNG file format is a patent-free replacement for GIFs that includes support for
indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file
format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as drop
shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG
files by Dreamweaver.
Insert an image
When you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML source
code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site,
Dreamweaver asks whether you want to copy the file into the site.
Last updated 6/3/2015
288
Page content and assets
Dreamweaver also allows you to insert images dynamically. Dynamic images are those images that change often. For
example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners,
and then dynamically display the selected banner’s image when a page is requested.
You can also drag and drop any layer in the Extract panel to any place in Dreamweaver Live View using Live Guides
and Element Quick View. The Extract Panel allows you to upload PSD files in to it and then drag and drop any layer in
the PSD file directly to your Dreamweaver document.
After you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually
impaired users. These attributes can be edited in HTML code.
For a tutorial on inserting images, see Adding images.
For information on extracting images from your PSD compositions, see Extract images from PSD files .
1 Place the insertion point where you want the image to appear in the Document window and do one of the following:
• In the Common category of the Insert panel, click the Images icon
.
• In the Common category of the Insert panel, click the Images button and select the Image icon. With the Image
icon displayed in the Insert panel, you can drag the icon to the Document window (or to the Code view window
if you are working in the code).
• Select Insert > Image.
• Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then
skip to step 3.
• Drag an image from the Files panel to the desired location in the Document window; then skip to step 3.
• Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
• In Live View, drag an image from the Extract panel or the Layers tab and drop the element at the top, bottom,
right or left of an element based on Live Guides (as explained in the following image), or drop the element at a
precise place in the document structure by clicking and using Element Quick View.
2 In the dialog box that appears, do one of the following:
• Select File System to choose an image file.
• Select Data Source to choose a dynamic image source.
• Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites.
3 Browse to select the image or content source you want to insert.
If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you
save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Note: When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e.,
an image that is not available on the local hard drive). If you experience performance problems while working, however,
you might want to disable viewing the image in Design view by deselecting Commands > Display External Files.
4 Click OK.
Set image properties
The Images Property inspector allows you to set properties for an image. If you do not see all of the image properties,
click the expander arrow in the lower-right corner.
Last updated 6/3/2015
289
Page content and assets
1 Click the image and select Window > Properties to view the Property inspector for a selected image.
2 In the text box below the thumbnail image, enter a name so you can refer to the image when using a Dreamweaver
behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.
3 Set any of the image options.
W and H The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the
image’s original dimensions when you insert an image in a page.
If you set W and H values that do not correspond to the actual width and height of the image, the image may not
display properly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image
size button that appears to the right of the W and H text boxes in entering a new value.)
Note: You can change these values to scale the display size of this image instance, but this does not reduce download
time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure
that all instances of an image appear at the same size, use an image-editing application to scale images.
Src Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.
Link Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon
to browse to a document on your site, or manually type the URL.
Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been
set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers,
the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Map Name and Hotspot tools Allow you to label and create a client-side image map.
Target Specifies the frame or window in which the linked page should load. (This option is not available when the
image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You
can also choose from the following reserved target names:
• _blank loads the linked file into a new, unnamed browser window.
• _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t
need to specify it.
• _top loads the linked file into the full browser window, thereby removing all frames.
Edit Starts the image editor you specified in External Editors preferences and opens the selected image.
When the web image (that is, the image on the Dreamweaver page) is out of sync with the
original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart
Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original
button in the Property inspector, the image updates automatically, reflecting any changes that you made to the
original Photoshop file.
Update from original
Edit image settings
Opens the Image Optimization dialog box and lets you optimize the image.
Last updated 6/3/2015
290
Page content and assets
Crop
Resample
Trims the size of an image, removing unwanted areas from the selected image.
Resamples a resized image, improving its picture quality at its new size and shape.
Brightness and Contrast
Sharpen
Adjusts the brightness and contrast settings of an image.
Adjusts the sharpness of an image.
Note: You can also edit image attributes in Live View using the Edit in Live View.
Edit image accessibility attributes in code
If you inserted accessibility attributes for an image, you can edit those values in the HTML code.
1 In the Document window, click the image or select the image tag in code.
2 Do one of the following to enter a name or a brief description for the image in less than 50 characters in to the
Alternate Text box. The screen reader reads the information you enter here.
• Edit the appropriate image attributes in Code view.
• Edit image attributes in Live View using the Edit in Live View.
• Edit the Alt value in the Property inspector.
Visually resize an image
You can visually resize elements such as images, plug-ins, Shockwave or SWF files, applets, and ActiveX controls in
Dreamweaver.
Visually resizing an image helps you see how the image affects the layout at different dimensions but it does not scale
the image file to the proportions that you specify. If you visually resize an image in Dreamweaver without using an
image-editing application (such as Adobe Fireworks) to scale the image file to the desired size, the user’s browser scales
the image when the page is loaded. This might cause a delay in page download time and the improper display of the
image in the user’s browser. To reduce download time and to ensure that all instances of an image appear at the same
size, use an image-editing application to scale images.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. Resampling adds
or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as
possible. Resampling an image reduces its file size and improves download performance.
Visually resize an element
1 Select the element (for example, an image or SWF file) in the Document window.
Resize handles appear at the bottom and right sides of the element and in the lower-right corner. If resize handles
don’t appear, click somewhere other than the element you want to resize and then reselect it, or click the appropriate
tag in the tag selector to select the element.
Last updated 6/3/2015
291
Page content and assets
2 Resize the element by doing one of the following:
• To adjust the width of the element, drag the selection handle on the right side.
• To adjust the height of the element, drag the bottom selection handle.
• To adjust the width and the height of the element at the same time, drag the corner selection handle.
• To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the
corner selection handle.
•
To adjust the width and height of an element to a specific size (for example, 1 x 1 pixel), use the Property
inspector to enter a numeric value. Elements can be visually resized to a minimum of 8 x 8 pixels.
3 To return a resized element to its original dimensions, in the Property inspector, delete the values in the W and H
text boxes, or click the Reset Size button in the image Property inspector.
Revert an image to its original size
❖ Click the Reset size button
in the image Property inspector.
Resample a resized image
1 Resize the image as described above.
2 Click the Resample button
in the image Property inspector.
Note: You cannot resample image placeholders or elements other than bitmap images.
Insert an image placeholder
An image placeholder is a graphic you use until final artwork is ready to be added to a web page. You can set the
placeholder’s size and color, as well as provide it with a text label.
1 In the Document window, place the insertion point where you want to insert a placeholder graphic.
2 Select Insert > Image Objects > Image Placeholder.
3 For Name (Optional), enter text you want to appear as a label for the image placeholder. Leave the text box blank if
you do not want a label to appear. The name must begin with a letter and can contain only letters and numbers;
spaces and high ASCII characters are not allowed.
4 For Width and Height (Required), type a number to set the image size in pixels.
5 For Color (Optional), do one of the following to apply a color:
• Use the color picker to select a color.
• Enter the color’s hexadecimal value (for example, #FF0000).
• Enter a web-safe color name (for example, red).
6 For Alternate Text (Optional), enter text to describe the image for viewers using a text-only browser.
Note: An image tag is automatically inserted into the HTML code containing an empty src attribute.
7 Click OK.
The placeholder’s color, size attributes, and label appear as follows:
Last updated 6/3/2015
292
Page content and assets
When viewed in a browser, the label and size text do not appear.
Replace an image placeholder
An image placeholder does not display an image in a browser. Before you publish your site you should replace any
image placeholders you’ve added with web-friendly image files, such as GIFs or JPEGs.
If you have Fireworks, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to
the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver.
1 In the Document window, do one of the following:
• Double-click the image placeholder.
• Click the image placeholder to select it; then in the Property inspector (Window > Properties), click the folder
icon next to the Src text box.
2 In the Image Source dialog box, navigate to the image you want to replace the image placeholder with and click OK.
Set image placeholder properties
To set properties for an image placeholder, select the placeholder in the Document window; then select Window >
Properties to display the Property inspector. To see all properties, click the expander arrow in the lower-right corner.
Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color
for a placeholder image.
In the placeholder Property inspector, the gray text box and the Align text box are disabled. You can set these properties
in the image Property inspector when you replace the placeholder with an image.
❖ Set any of the following options:
W and H Set the width and height of the image placeholder, in pixels.
Src Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button
to select a replacement image for the placeholder graphic.
Link Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the
folder icon to browse to a document on your site, or manually type the URL.
Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been
set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers,
the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Create Starts Fireworks to create a replacement image. The Create button is disabled unless Fireworks is also
installed on your computer.
When the web image (that is, the image on the Dreamweaver page) is out of sync with the
original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart
Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original
Update from original
Last updated 6/3/2015
293
Page content and assets
button in the Property inspector, the image updates automatically, reflecting any changes that you made to the
original Photoshop file.
Color Specifies a color for the image placeholder.
Edit images in Dreamweaver
You can resample, crop, optimize, and sharpen images in Dreamweaver. You can also adjust their brightness and
contrast.
Image-editing features
Dreamweaver provides basic image-editing features that let you modify images without having to use an external
image-editing application such as Fireworks or Photoshop. The Dreamweaver image-editing tools are designed to let
you easily work with content designers responsible for creating image files for use on your website.
Note: You do not need to have Fireworks or other image-editing applications installed on your computer to use the
Dreamweaver image-editing features.
❖ Select Modify > Image. Set any of these Dreamweaver image-editing features:
Resample Adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original
image as closely as possible. Resampling an image reduces its file size and improves download performance.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a
bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling
an image to a higher resolution typically causes little loss of quality. Resampling to a lower resolution, however,
always causes data loss and usually a drop in quality.
Crop Edit images by reducing the area of the image. Typically, you’ll want to crop an image to place more emphasis
on the subject of the image, and remove unwanted aspects surrounding the center of interest in the image.
Brightness and Contrast Modifies the contrast or brightness of pixels in an image. This affects the highlights,
shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark
or too light.
Sharpen Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan
an image, or take a digital photo, the default action of most image capturing software is to soften the edges of objects
in the image. This prevents extremely fine details from becoming lost in the pixels from which digital images are
composed. However, to bring out the details in digital image files, it is often necessary to sharpen the image, thereby
increasing edge contrast, and making the image appear sharper.
Note: Dreamweaver image-editing features apply only to JPEG, GIF, and PNG image file formats. Other bitmap image
file formats cannot be edited using these image-editing features.
Crop an image
Dreamweaver lets you crop (or trim) bitmap file images.
Note: When you crop an image, the source image file is changed on disk. For this reason, you may want to keep a backup
copy of the image file in the event you need to revert to the original image.
1 Open the page containing the image you want to crop, select the image, and do either of the following:
• Click the Crop Tool icon
in the image Property inspector.
• Select Modify > Image > Crop.
• Crop handles appear around the selected image.
Last updated 6/3/2015
294
Page content and assets
2 Adjust the crop handles until the bounding box surrounds the area of the image that you want to keep.
3 Double-click inside the bounding box or press Enter to crop the selection.
4 A dialog box informs you that the image file you are cropping will be changed on disk. Click OK. Every pixel in the
selected bitmap outside the bounding box is removed, but other objects in the image remain.
5 Preview the image and ensure that it meets your expectations. If not, select Edit > Undo Crop to revert to the original
image.
Note: You can undo the effect of the Crop command (and revert to the original image file) up until the time that you
quit Dreamweaver, or edit the file in an external image-editing application.
Optimize an image
You can optimize images in your web pages from within Dreamweaver.
1 Open the page containing the image you want to optimize, select the image, and do either of the following:
• Click the Edit Image Settings button
in the image Property inspector.
• Select Modify > Image > Optimize.
2 Make your edits in the Image Optimization dialog box and click OK.
Sharpen an image
Sharpening increases the contrast of pixels around the edges of objects to increase the image’s definition or sharpness.
1 Open the page containing the image you want to sharpen, select the image, and do either of the following:
• Click the Sharpen button
in the image Property inspector.
• Select Modify > Image > Sharpen.
2 You can specify the degree of sharpening Dreamweaver applies to the image by dragging the slider control, or
entering a value between 0 and 10 in the text box. As you adjust the sharpness of the image using the Sharpness
dialog box, you can preview the change to the image.
3 Click OK when you are satisfied with the image.
4 Save your changes by selecting File > Save, or revert to the original image by selecting Edit > Undo Sharpen.
Note: You can only undo the effect of the Sharpen command (and revert to the original image file) prior to saving the
page containing the image. After you save the page, the changes made to the image are permanently saved.
Adjust the brightness and contrast of an image
Brightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and
midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.
1 Open the page containing the image you want to adjust, select the image, and do either of the following:
• Click the Brightness/Contrast
button in the image Property inspector.
• Select Modify > Image > Brightness/Contrast.
2 Drag the Brightness and Contrast sliders to adjust the settings. Values range from -100 to 100.
3 Click OK.
Last updated 6/3/2015
295
Page content and assets
Create a rollover image
You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the
pointer moves across it.
You must have two images to create the rollover: a primary image (the image displayed when the page first loads) and
a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover
should be the same size; if the images are not the same size, Dreamweaver resizes the second image to match the
properties of the first image.
Rollover images are automatically set to respond to the onMouseOver event. You can set an image to respond to a
different event (for example, a mouse click) or change a rollover image.
1 In the Document window, place the insertion point where you want the rollover to appear.
2 Insert the rollover using one of these methods:
• In the Common category of the Insert panel, click the Images button and select the Rollover Image icon. With
the Rollover Image icon displayed in the Insert panel, you can drag the icon to the Document window.
• Select Insert > Image Objects > Rollover Image.
3 Set the options and click OK.
Image Name The name of the rollover image.
Original image The image you want to display when the page loads. Enter the path in the text box, or click Browse
and select the image.
Rollover Image The image you want to display when the pointer rolls over the original image. Enter the path or click
Browse to select the image.
Preload Rollover Image Preloads the images in the browser’s cache so no delay occurs when the user rolls the
pointer over the image.
Alternate Text (Optional) Text to describe the image for viewers using a text-only browser.
When clicked, Go to URL The file that you want to open when a user clicks the rollover image. Enter the path or click
Browse and select the file.
Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the
rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
4 Select File > Preview in Browser or press F12.
5 In the browser, move the pointer over the original image to see the rollover image.
Note: You cannot see the effect of a rollover image in Design view.
Use an external image editor
While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver
after saving the edited image file, any changes you made to the image are visible in the Document window.
You can set up Fireworks as your primary external editor. You can also set which file types an editor opens; and you can
select multiple image editors. For example, you can set preferences to start Fireworks when you want to edit a GIF, and
to start a different image editor when you want to edit a JPG or JPEG.
Last updated 6/3/2015
296
Page content and assets
Start the external image editor
❖ Do one of the following:
• Double-click the image you want to edit.
• Right-click (Windows) or Control-click (Macintosh) the image you want to edit, then select Edit With > Browse
and select an editor.
• Select the image you want to edit, and click Edit in the Property inspector.
• Double-click the image file in the Files panel to start the primary image editor. If you haven’t specified an image
editor, Dreamweaver starts the default editor for the file type.
Note: When you open an image from the Files panel, the Fireworks integration features are not in effect; Fireworks does
not open the original PNG file. To use the Fireworks integration features, open images from within the Document
window.
If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the
Refresh button in the Property inspector.
Set an external image editor for an existing file type
You can select an image editor for opening and editing graphic files.
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors
in the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the Extensions list, select the file extension you want to set an external editor for.
3 Click the Add (+) button above the Editors list.
4 In the Select External Editor dialog box, browse to the application you want to start as an editor for this file type.
5 In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type.
6 If you want to set up an additional editor for this file type, repeat steps 3 and 4.
Dreamweaver automatically uses the primary editor when you edit this image type. You can select the other listed
editors from the context menu for the image in the Document window.
Add a new file type to the Extensions list
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors
in the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.
A text box appears in the Extensions list.
3 Type the file extension of the file type you want to start an editor for.
4 To select an external editor for the file type, click the Add (+) button above the Editors list.
5 In the dialog box that appears, select the application you want to use to edit this image type.
6 Click Make Primary if you want this editor to be the primary editor for the image type.
Last updated 6/3/2015
297
Page content and assets
Change an existing editor preference
1 Open the File Types/Editors Preferences dialog box by doing one of the following:
• Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and select File Types/Editors
in the Category list on the left.
• Select Edit > Edit with External Editor and select File Types/Editors.
2 In the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view
the existing editor(s).
3 In the Editors list, select the editor you want to want to affect, then do one of the following:
• Click the Add (+) or Delete (–) buttons above the Editors list to add or remove an editor.
• Click the Make Primary button, to change which editor starts by default for editing.
Applying behaviors to images
You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot,
Dreamweaver inserts the HTML source code into the area tag. Three behaviors apply specifically to images: Preload
Images, Swap Image, and Swap Image Restore.
Preload Images Loads images that do not appear on the page right away (such as those that will be swapped in with
behaviors, AP elements, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is
time for the images to appear.
Swap Image Swaps one image for another by changing the SRC attribute of the img tag. Use this action to create button
rollovers and other image effects (including swapping more than one image at a time).
Swap Image Restore Restores the last set of swapped images to their previous source files. This action is automatically
added whenever you attach the Swap Image action to an object by default; you should never need to select it manually.
You can also use behaviors to create more sophisticated navigation systems, such as jump menus.
Adding media objects
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Insert and edit media objects
In addition to SWF and FLV files, you can insert QuickTime or Shockwave movies, Java applets, ActiveX controls, or
other audio or video objects in a Dreamweaver document. If you inserted accessibility attributes with a media object,
you can set the accessibility attributes and edit those values in the HTML code.
1 Place the insertion point in the Document window where you want to insert the object.
2 Insert the object by doing one of the following:
• In the Common category of the Insert panel, click the Media button and select the icon for the type of object you
want to insert.
• Select the appropriate object from the Insert > Media submenu.
• If the object you want to insert is not a Shockwave, Applet, or ActiveX object, select Plugin from the Insert >
Media submenu.
Last updated 6/3/2015
298
Page content and assets
A dialog box appears letting you select a source file and specify certain parameters for the media object.
To prevent such dialog boxes from appearing, select Edit > Preferences > General (Windows) or Dreamweaver >
Preferences > General (Macintosh) and deselect the Show Dialog When Inserting Objects option. To override
whatever preference is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh) key while
inserting the object. (For example, to insert a placeholder for a Shockwave movie without specifying the file, hold down
Control or Option, and either click the Shockwave button in Media pop-up menu of the Common Insert panel, or select
Insert > Media > Shockwave.)
3 Complete the Select File dialog box, and click OK.
Note: The Accessibility Attributes dialog box appears if you have chosen to show attributes when inserting media in the
Edit > Preferences dialog box.
4 Set the accessibility attributes.
Note: You can also edit media object attributes by selecting the object and editing the HTML code in Code view, or rightclicking (Windows) or Control-clicking (Macintosh), and selecting Edit Tag Code.
Title Enter a title for the media object.
Access Key Enter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets
a visitor to the site use the Control key (Windows) with the Access Key to access the object. For example, if you enter
B as the Access Key, use Control+B to select the object in the browser.
Tab Index Enter a number for the tab order of the form object. Setting a tab order is useful when you have other
links and form objects on the page and need the user to tab through them in a specific order. If you set tab order for
one object, be sure to set the tab order for all of them.
5 Click OK to insert the media object.
Note: If you click Cancel, a media object placeholder appears in the document, but Dreamweaver does not associate
accessibility tags or attributes with it.
To specify a source file, or to set dimensions and other parameters and attributes, use the Property inspector for each
object. You can edit accessibility attributes for an object.
Start an external editor for media files
You can start an external editor from Dreamweaver to edit most media files. You can also specify the editor you want
Dreamweaver to start to edit the file.
1 Make sure the media file type is associated to an editor on your system.
To find out what editor is associated with the file type, select Edit > Preferences in Dreamweaver and select File
Types/Editors from the Category list. Click the file’s extension in the Extensions column to view the associated editor
or editors in the Editors column. You can change the editor associated to a file type.
2 Double-click the media file in the Files panel to open it in the external editor.
The editor that starts when you double-click the file in the Files panel is called the primary editor. If you doubleclick an image file, for example, Dreamweaver opens the file in the primary external image editor such as Adobe
Fireworks.
3 If you don’t want to use the primary external editor to edit the file, you can use another editor on your system to edit
the file by doing one of the following:
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the filename and select Open With from
the context menu.
Last updated 6/3/2015
299
Page content and assets
• In Design view, right-click (Windows) or Control-click (Macintosh) the media element within the current page,
and select Edit With from the context menu.
Specify the editor to start from Dreamweaver
You can specify the editor you want Dreamweaver to use for editing a file type, and add or delete file types that
Dreamweaver recognizes.
Explicitly specify which external editors should be started for a given file type
1 Select Edit > Preferences and select File Types/Editors from the Category list.
Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a
selected extension are listed on the right under Editors.
2 Select the file type extension in the Extensions list and do one of the following:
• To associate a new editor with the file type, click the Plus (+) button above the Editors list and complete the dialog
box that appears.
For example, select the application icon for Acrobat to associate it with the file type.
• To make an editor the primary editor for a file type (that is, the editor that opens when you double-click the file
type in the Files panel), select the editor in the Editors list and click Make Primary.
• To dissociate an editor from a file type, select the editor in the Editors list and click the Minus (-) button above
the Editors list.
Add a new file type and associated editor
1 Click the Plus (+) button above the Extensions list and enter a file type extension (including the period at the
beginning of the extension) or several related extensions separated by spaces.
For example, you might enter .xml .xsl if you wanted to associate them with an XML editor installed on your system.
2 Select an editor for the file type by clicking the Plus (+) button above the Editors list and completing the dialog box
that appears.
Remove a file type
❖ Select the file type in the Extensions list and click the Minus (-) button above the Extensions list.
Note: You can’t undo after removing a file type, so be sure that you want to remove it.
Use Design Notes with media objects
As with other objects in Dreamweaver, you can add Design Notes to a media object. Design Notes are notes associated
with a particular file, that are stored in a separate file. You can use Design Notes to keep track of extra file information
associated with your documents, such as image source filenames and comments on file status.
1 Right-click (Windows) or Control-click (Macintosh) the object in the Document window.
Note: You must define your site before adding Design Notes to any object.
2 Select Design Notes for Page from the context menu.
3 Enter the information you want in the Design Note.
You can also add a Design Note to a media object from the Files panel by selecting the file, revealing the context
menu, and choosing Design Notes from the context menu.
Last updated 6/3/2015
300
Page content and assets
Insert Shockwave movies
You can use Dreamweaver to insert Shockwave movies into your documents. Adobe® Shockwave®, a standard for
interactive multimedia on the web, is a compressed format that allows media files created in Adobe® Director® to be
downloaded quickly and played by most popular browsers.
1 In the Document window, place the insertion point where you want to insert a Shockwave movie and do one of the
following:
• In the Common category of the Insert panel, click the Media button and select the Shockwave icon
popup menu.
from the
• Select Insert > Media > Shockwave.
2 In the dialog box that appears, select a movie file.
3 In the Property inspector, enter the width and height of the movie in the W and H text boxes.
Add video (non-FLV)
You can add video to your web page in different ways and using different formats. Video can be downloaded to the user
or it can be streamed so that it plays while it is downloading.
1 Place the clip in your site folder.
These clips are often in the AVI or MPEG file format.
2 Link to the clip or embed it in your page.
To link to the clip, enter text for the link such as “Download Clip”, select the text, and click the folder icon in the
Property inspector. Browse to the video file and select it.
Note: The user must download a helper application (a plug-in) to view common streaming formats like Real Media,
QuickTime, and Windows Media.
Insert plug-in content
You can create content such as a QuickTime movie for a browser plug-in, and then use Dreamweaver to insert that
content into an HTML document. Typical plug-ins include RealPlayer and QuickTime, while some content files include
mp3s and QuickTime movies.
You can preview movies and animations that rely on browser plug-ins directly in the Design view of the Document
window. You can play all plug-in elements at one time to see how the page will look to the user, or you can play each
one individually to ensure that you have embedded the correct media element.
Note: You cannot preview movies or animations that rely on ActiveX controls.
After inserting content for a plug-in, use the Property inspector to set parameters for that content. To view the following
properties in the Property inspector, select a plug-in object.
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lowerright corner to see all properties.
Insert plug-in content and set its properties
1 In the Design view of the Document window, place the insertion point where you want to insert the content, then
do one of the following:
• In the Common category of the Insert panel, click the Media button and select the Plugin icon
menu.
Last updated 6/3/2015
from the
301
Page content and assets
• Select Insert > Media > Plugin.
2 In the dialog box that appears, select a content file for a plug-in and click OK.
3 Set the plug-in options in the Property inspector.
Name Specifies a name to identify the plug-in for scripting. Enter a name in the unlabeled text box on the far left
side of the Property inspector.
W and H Specify, in pixels, the width and height allocated to the object on the page.
Src Specifies the source data file. Click the folder icon to browse to a file, or enter a filename.
Plg Url Specifies the URL of the pluginspace attribute. Enter the complete URL of the site where users can download
the plug-in. If the user viewing your page does not have the plug-in, the browser tries to download it from this URL.
Align Determines how the object is aligned on the page.
V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the plug-in.
Border Specifies the width of the border around the plug-in.
Parameters Opens a dialog box for entering additional parameters to pass to the plug-in. Many plug-ins respond to
special parameters.
You can also view the attributes assigned to the selected plug-in by clicking the Attribute button. You can edit, add,
and delete attributes such as width and height in this dialog box.
Play plug-in content in the Document window
1 Insert one or more media elements using one of the methods described in the previous section.
2 Do one of the following:
• Select one of the media elements you have inserted, and select View > Plugins > Play or click the Play button in
the Property inspector.
• Select View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.
Note: Play All only applies to the current document; it does not apply to other documents in a frameset, for example.
Stop playing plug-in content
❖ Select a media element and select View > Plugins >Stop, or click the Stop button in the Property inspector.
You can also select View > Plugins > Stop All to stop all plug-in content from playing.
Troubleshooting plug-ins
If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does
not play, try the following:
• Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version
of the plug-in you have.
• Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic
plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore
unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.)
• Check that you have enough memory. Some plug-ins require an additional 2 to 5 MB of memory to run.
Last updated 6/3/2015
302
Page content and assets
Insert an ActiveX control
You can insert an ActiveX control in your page. ActiveX controls (formerly known as OLE controls) are reusable
components, somewhat like miniature applications, that can act like browser plug-ins. They run in Internet Explorer
with Windows, but they don’t run on the Macintosh browsers. The ActiveX object in Dreamweaver lets you supply
attributes and parameters for an ActiveX control in your visitor’s browser.
After inserting an ActiveX object, use the Property inspector to set attributes of the object tag and parameters for the
ActiveX control. Click Parameters in the Property inspector to enter names and values for properties that don’t appear
in the Property inspector. There is no widely accepted standard format for parameters for ActiveX controls; to find out
which parameters to use, consult the documentation for the ActiveX control you’re using.
❖ In the Document window, place the insertion point where you want to insert the content and do one of the
following:
• In the Common category of the Insert panel, click the Media button and select the ActiveX icon
.
• In the Common category of the Insert panel, click the Media button and select the ActiveX icon. With the
ActiveX icon displayed in the Insert panel, you can drag the icon to the Document window.
• Select Insert > Media > ActiveX. An icon marks where the ActiveX control will appear on the page in Internet
Explorer.
ActiveX properties
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the
lower-right corner to see all properties.
Name Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled text box on the far
left side of the Property inspector.
W and H Specify the width and height of the object, in pixels.
Class ID Identifies the ActiveX control to the browser. Enter a value or select one from the pop-up menu. When the
page is loaded, the browser uses the class ID to locate the ActiveX control required for the ActiveX object associated
with the page. If the browser doesn’t locate the specified ActiveX control, it attempts to download it from the location
specified in Base.
Embed Adds an embed tag within the object tag for the ActiveX control. If the ActiveX control has another plug-in
equivalent, the embed tag activates the plug-in. Dreamweaver assigns the values you entered as ActiveX properties to
their plug-in equivalents.
Align Determines how the object is aligned on the page.
Parameters Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX
controls respond to special parameters.
Src Defines the data file to be used for a plug-in if the Embed option is turned on. If you don’t enter a value,
Dreamweaver attempts to determine the value from the ActiveX properties entered already.
V Space and H Space Specify the amount of white space, in pixels, above, below, and on both sides of the object.
Base Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this
location if it has not been installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t
already have the relevant ActiveX control installed, the browser can’t display the ActiveX object.
Alt Img Specifies an image to be displayed if the browser doesn’t support the object tag. This option is available only
when the Embed option is deselected.
Last updated 6/3/2015
303
Page content and assets
Data Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer,
do not use this parameter.
Insert a Java applet
You can insert a Java applet into an HTML document using Dreamweaver. Java is a programming language that allows
the development of lightweight applications (applets) that can be embedded in web pages.
After inserting a Java applet, use the Property inspector to set parameters. To view the following properties in the
Property inspector, select a Java applet.
1 In the Document window, place the insertion point where you want to insert the applet, and then do one of the
following:
• In the Common category of the Insert panel, click the Media button and select the Applet icon
.
• Select Insert > Media > Applet.
2 Select a file containing a Java applet.
Java applet properties
The Property inspector initially displays the most commonly used properties. Click the expander arrow in the
lower-right corner to see all properties.
Name Specifies a name to identify the applet for scripting. Enter a name in the unlabeled text box on the far left side
of the Property inspector.
W and H Specify the width and height of the applet, in pixels.
Code Specifies the file containing the applet’s Java code. Click the folder icon to browse to a file, or enter a filename.
Base Identifies the folder containing the selected applet. When you select an applet, this text box is filled automatically.
Align Determines how the object is aligned on the page.
Alt Specifies alternative content (usually an image) to be displayed if the user’s browser doesn’t support Java applets or
has Java disabled. If you enter text, Dreamweaver inserts the text as the value of the applet’s alt attribute. If you select an
image, Dreamweaver inserts an img tag between the opening and closing applet tags.
V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the applet.
Parameters Opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to
special parameters.
Using behaviors to control media
You can add behaviors to your page to start and stop various media objects.
Control Shockwave Or Flash Play, stop, rewind, or go to a frame in a Shockwave movie or SWF file.
Play Sound Lets you play a sound; for example, you can play a sound effect whenever the user moves the mouse pointer
over a link.
Check Plugin Lets you check to see if visitors to your site have the required plug-in installed, then route them to
different URLs, depending on whether they have the right plug-in. This only applies to plug-ins, as the Check Plugin
behavior does not check for ActiveX controls.
Last updated 6/3/2015
304
Page content and assets
Use parameters to control media objects
Define special parameters to control Shockwave and SWF files, ActiveX controls, plug-ins, and Java applets. Parameters
are used with the object, embed, and applet tags. Parameters set attributes specific to different types of objects. For
example, a SWF file can use a quality parameter for the object tag. The Parameter
dialog box is available from the Property inspector. See the documentation for the object you’re using for information
on the parameters it requires.
Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for
the ActiveX control you’re using to find out which parameters to use.
Enter a name and value for a parameter
1 Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a plug-in, or a Java applet)
in the Document window.
2 Open the dialog box using one of the following methods:
• Right-click (Windows) or Control-click (Macintosh) the object, and select Parameters from the context menu.
• Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of
the Property inspector. (Make sure the Property inspector is expanded.)
3 Click the Plus (+) button and enter the parameter name and value in the appropriate columns.
Remove a parameter
❖ Select a parameter and press the minus (–) button.
Reorder parameters
❖ Select a parameter, and use the up and down arrow buttons.
More Help topics
Optimize the work space for accessible page design
Enable and disable Design Notes for a site
Storing file information in Design Notes
Set SWF file properties
Apply the Control Shockwave or SWF behavior
Apply the Play Sound behavior
Apply the Check Plugin behavior
Adding video
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Embed videos in web pages (HTML5)
HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external
plug-in or player. Dreamweaver supports code hints for adding video and audio tags.
Last updated 6/3/2015
305
Page content and assets
Live View renders the video, providing a preview of the video that you are embedding in the web page.
Note: Although you can embed any video in your web page, Live View does not always render all videos. The audio and
video tags are supported in Dreamweaver using the Apple QuickTime plug-in. In Windows, if the Apple QuickTime plugin is not installed, then the web page does not render the media content.
Inserting FLV files
Insert FLV files
You can easily add FLV video to your web pages without using the Flash authoring tool. You must have an encoded FLV
file before you begin.
Dreamweaver inserts a SWF component that displays the FLV file; when viewed in a browser, this component displays
the selected FLV file, as well as a set of playback controls.
Dreamweaver gives you the following options for delivering FLV video to your site visitors:
Progressive Download Video Downloads the FLV file to the site visitor’s hard disk and then plays it. Unlike traditional
“download and play” methods of video delivery, however, progressive download allows the video file to start playing
before the download is complete.
Streaming Video Streams the video content and plays it on a web page after a short buffer period that ensures smooth
play back. To enable streaming video on your web pages, you must have access to Adobe® Flash® Media Server.
You must have an encoded FLV file before you can use it in Dreamweaver. You can insert video files created with two
kinds of codecs (compression/decompression technologies): Sorenson Squeeze and On2.
As with regular SWF files, when you insert an FLV file, Dreamweaver inserts code that detects whether the user has the
correct version of Flash Player to view the video. If the user does not have the correct version, the page displays
alternative content that prompts the user to download the latest version of Flash Player.
Note: To view FLV files, users must have Flash Player 8 or later installed on their computers. If a user does not have the
required version of Flash Player installed, but does have Flash Player 6.0 r65 or later installed, the browser displays a Flash
Player express installer instead of the alternative content. If the user declines the express install, the page then displays the
alternative content.
Last updated 6/3/2015
306
Page content and assets
For more information about working with video, visit the Video Technology Center at
www.adobe.com/go/flv_devcenter.
Insert an FLV file
1 Select Insert > Media > FLV.
2 In the Insert FLV dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu.
3 Complete the rest of the dialog box options and click OK.
Note: Microsoft Internet Information Server (IIS) does not process nested object tags. For ASP pages, Dreamweaver uses
nested object/embed code instead of nested object code when inserting SWF or FLV files.
Set options for progressive download video
The Insert FLV dialog box lets you set options for progressive download delivery of an FLV file inserted in a web page.
1 Select Insert > Media > FLV (or click the FLV icon in the Media category of the Common insert bar).
2 In the Insert FLV dialog box, select Progressive Download Video from the Video Type menu.
3 Specify the following options:
URL Specifies a relative or absolute path to the FLV file. To specify a relative path (for example,
mypath/myvideo.flv), click the Browse button, navigate to the FLV file, and select it. To specify an absolute path,
type the URL (for example, http://www.example.com/myvideo.flv) of the FLV file.
Skin Specifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-
up menu.
Width Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file,
click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.
Height Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV
file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.
Constrain Maintains the same aspect ratio between the width and height of the video component. This option is
selected by default.
Auto Play Specifies whether to play the video when the web page is opened.
Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing.
4 Click OK to close the dialog box and add the FLV file to your web page.
The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video
content on a web page. (To see the new files, you may need to click the Refresh button in the Files panel.) These files
are stored in the same directory as the HTML file to which you’re adding video content. When you upload the
HTML page containing the FLV file, Dreamweaver uploads these files as dependent files (as long as you click Yes in
the Put Dependent Files dialog box).
Set options for streaming video
The Insert FLV dialog box lets you set options for streaming video download of an FLV file inserted in a web page.
1 Select Insert > Media > FLV (or click the FLV icon in the Media category of the Common insert bar).
Last updated 6/3/2015
307
Page content and assets
2 Select Streaming Video from the Video Type pop-up menu.
Server URI Specifies the server name, application name, and instance name in the form
rtmp://www.example.com/app_name/instance_name.
Stream Name Specifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension
is optional.
Skin Specifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-
up menu.
Width Specifies the width of the FLV file, in pixels. To have Dreamweaver determine the exact width of the FLV file,
click the Detect Size button. If Dreamweaver cannot determine the width, you must type a width value.
Height Specifies the height of the FLV file, in pixels. To have Dreamweaver determine the exact height of the FLV
file, click the Detect Size button. If Dreamweaver cannot determine the height, you must type a height value.
Note: Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.
Constrain Maintains the same aspect ratio between the width and height of the video component. This option is
selected by default.
Live Video Feed Specifies whether the video content is live. If Live Video Feed is selected, Flash Player plays a live
video feed streamed from Flash® Media Server. The name of the live video feed is the name specified in the Stream
Name text box.
Note: When you select Live Video Feed, only the volume control appears on the component’s skin, because you cannot
manipulate live video. Additionally, the Auto Play and Auto Rewind options have no effect.
Auto Play Specifies whether to play the video when the web page is opened.
Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing.
Buffer Time Specifies the time, in seconds, required for buffering before the video starts playing. The default buffer
time is set to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the
video starts playing as soon as a connection is made with the server.) You might want to set a buffer time if you are
delivering video that has a higher bit rate than the site visitor’s connection speed, or when Internet traffic might
cause bandwidth or connectivity problems. For example, if you want to send 15 seconds of video to the web page
before the web page starts to play the video, set the buffer time to 15.
3 Click OK to close the dialog box and add the FLV file to your web page.
The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video
on a web page. The command also generates a main.asc file that you must upload to your Flash Media Server. (To
see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same
directory as the HTML file to which you’re adding video content. When you upload the HTML page containing the
FLV file, don’t forget to upload the SWF files to your web server, and the main.asc file to your Flash Media Server.
Note: If you already have a main.asc file on your server, check with your server administrator before uploading the
main.asc file generated by the Insert FLV command.
You can easily upload all of the required media files by selecting the video component placeholder in the
Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window >
Properties). To see a list of required files, click Show required files.
Note: The Upload Media button does not upload the HTML file that contains the video content.
Last updated 6/3/2015
308
Page content and assets
Edit Flash Player download information
When you insert an FLV file in a page, Dreamweaver inserts code that detects whether the user has the correct version
of Flash Player. If not, the page displays default alternative content that prompts the user to download the latest version.
You can change this alternative content at any time.
This procedure also applies to SWF files.
Note: If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash
Player express installer. If the user declines the express install, the page then displays the alternative content.
1 In the Design view of the Document window, select the SWF file or FLV file.
2 Click the eye icon in the tab of the SWF file or FLV file.
You can also press Control + ] to switch to alternative content view. To return to SWF/FLV view, press Control + [
until all of the alternative content is selected. Then press Control + [ again.
3 Edit the content just as you would edit any other content in Dreamweaver.
Note: You cannot add SWF files or FLV files as alternative content.
4 Click the eye icon again to return to the SWF or FLV file view.
Troubleshoot FLV files
This section details some of the most common causes of problems with FLV files.
Viewing problems caused by absence of related files
The code generated by Dreamweaver CS4 and later relies on four dependent files, different from the FLV file itself:
• swfobject_modified.js
• expressInstall.swf
• FLVPlayer_Progressive.swf
• The skin file (for example Clear_Skin_1.swf)
Note that there are two more dependent files for Dreamweaver CS4 and later, compared to Dreamweaver CS3.
The first two of these files (swfobject_modified.js and expressInstall.swf) are installed in a folder called Scripts, which
Dreamweaver creates in the root of your site if it doesn't already exist.
The second two files (FLVPlayer_Progressive.swf and the skin file) are installed in the same folder as the page in which
the FLV is embedded. The skin file contains the controls for the FLV, and its name depends on the skin chosen in the
options described in Dreamweaver Help. For example, if you choose Clear Skin, the file is named Clear_Skin_1.swf.
All four dependent files MUST be uploaded to your remote server for the FLV to display correctly.
Forgetting to upload these files is the most common cause of FLV files failing to run correctly in a web page. If one of
the files is missing, you might see a "white box" on the page.
To ensure that you've uploaded all of the dependent files, use the Dreamweaver Files panel to upload the page in which
the FLV appears. When you upload the page, Dreamweaver asks you if you want to upload dependent files (unless
you've turned off this option). Click yes to upload dependent files.
Viewing problems when previewing pages locally
Because of security updates in Dreamweaver CS4, you cannot use the Preview in Browser command to test a page with
an embedded FLV unless you define a local testing server in your Dreamweaver site definition and use the testing server
to preview the page.
Last updated 6/3/2015
309
Page content and assets
Normally, you require a testing server only if you are developing pages with ASP, ColdFusion, or PHP (see Set up your
computer for application development ). If you are building websites that use only HTML, and haven't defined a testing
server, pressing F12 (Windows) Opt+F12 (Macintosh) produces a jumble of skin controls onscreen. The workaround
is either to define the testing server and use the testing server to preview your page, or upload your files to a remote
server and view them there.
Note: It’s possible that security settings may also be responsible for an inability to preview local FLV content, but Adobe has
not been able to confirm this. You can try changing your security settings to see if it helps. For more information on changing
your security settings, see Tech Note 117502.
Other possible causes for problems with FLV files
• If you are having trouble previewing locally, make sure the Preview using temporary file option is deselected under
Edit > Preferences > Preview in Browser
• Make sure you have the latest FlashPlayer plug-in
• Be wary of moving files and folders around outside of Dreamweaver. When you move files and folders outside of
Dreamweaver, Dreamweaver cannot guarantee the correct paths to FLV-related files.
• You can temporarily replace the FLV file that’s giving you trouble with a known working FLV file. If the replacement
FLV file works, then the problem is with the original FLV file, and not with your browser or computer.
Edit or delete an FLV component
Change the settings for the video on your web page, by selecting the video component placeholder in the Dreamweaver
Document window and using the Property inspector. Another way is to delete the video component and reinsert it by
selecting Insert > Media > FLV.
Edit the FLV component
1 Select the video component placeholder in the Dreamweaver Document window by clicking the FLV icon at the
center of the placeholder.
2 Open the Property inspector (Window > Properties) and make your changes.
Note: You cannot change video types (from progressive download to streaming, for example) by using the Property
inspector. To change the video type, delete the FLV component, and reinsert it by selecting Insert > Media > FLV.
Delete the FLV component
❖ Select the FLV component placeholder in the Dreamweaver Document window and press Delete.
Remove FLV detection code
For Dreamweaver CS4 and later, Dreamweaver inserts Flash Player detection code directly in the object tag that
contains the FLV file. For Dreamweaver CS3 and earlier, however, the detection code resides outside the FLV file’s object
tag. For this reason, if you want to delete FLV files from pages created with Dreamweaver CS3 and earlier, you must
remove the FLV files and use the Remove FLV detection command to remove the detection code.
❖ Select Commands > Remove Flash Video Detection.
Insert HTML5 video
Dreamweaver allows you to insert HTML5 video into web pages.
The HTML5 video element provides a standard way to embed movies or videos in web pages.
Last updated 6/3/2015
310
Page content and assets
For more information on HTML5 video element, see the article on HTML5 Video at W3schools.com.
More Help topics
Adding HTML5 video in Dreamweaver
Insert HTML5 video
1 Ensure that your cursor is at the location where you want to insert the video.
2 Select Insert > Media > HTML5 Video. The HTML5 video element is inserted at the specified location.
3 In the Properties panel, specify values for the various options.
• Source / Alt Source 1 / Alt Source 2: In Source, enter the location of the video file. Alternatively, click the folder
icon to select a video file from the local file system. Support for a video format varies on different browsers. If the
video format in Source is not supported on a browser, the video format specified in Alt Source 1 or Alt Source 2
is used. The browser selects the first recognized format to display the video.
To quickly add videos to the three fields, use multiple selection. When you choose three video formats for the same
video from a folder, the first format in the list is used for the Source. The following formats in the list are used to
auto-fill Alt Source 1 and Alt Source 2.
See the table below for more information on browser and supported video format. For the latest info, see HTML5 Browser Support.
Browser
MP4
WebM
Ogg
Internet Explorer 9
YES
NO
NO
Firefox 4.0
NO
YES
YES
Google Chrome 6
YES
YES
YES
Apple Safari 5
YES
NO
NO
Opera 10.6
NO
YES
YES
• Title: Specify a title for the video.
• Width (W): Enter the width in pixel of the video.
• Height (H): Enter the height in pixel of the video.
• Controls: Select if you want to display the video controls such as Play, Pause, and Mute in the HTML page.
• Autoplay: Select if you want the video to start playing as soon as it loads on the web page.
• Poster: Enter the location of the image you want displayed until the video completes downloading, or until the
user clicks Play. The Width and Height values are auto-filled when you insert the image.
• Loop: Select this option if you want the video to continuously play until the user stops playing the movie.
• Muted: Select this option if you want to mute the audio portion of the video.
• Flash Video: Select a SWF file for browsers that do not support HTML5 video.
• Fallback text: Provide the text to display if the browser doesn't support HTML5.
• Preload: Specifies the author preferences on how the video should be loaded when the page loads. Selecting Auto
loads the entire video on page download. Selecting Metadata downloads only the metadata after the page
download is complete.
Last updated 6/3/2015
311
Page content and assets
Preview the video in browser
1 Save the web page.
2 Select File > Preview in Browser. Select the browser in which you want to preview the video.
Inserting SWF files
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About FLA, SWF, and FLV file types
Before you use Dreamweaver to insert content created with Adobe Flash, you should be familiar with the following
different file types:
FLA file (.fla) The source file for any project and created in the Flash authoring tool. This type of file can only be opened
in Flash (not in Dreamweaver or in browsers). You can open the FLA file in Flash, then publish it as a SWF or SWT file
to use in browsers.
SWF file (.swf) A compiled version of the FLA (.fla) file, optimized for viewing on the web. This file can be played back
in browsers and previewed in Dreamweaver, but cannot be edited in Flash.
FLV file (.flv) A video file that contains encoded audio and video data for delivery through Flash® Player. For example,
if you had a QuickTime or Windows Media video file, you would use an encoder (such as Flash® Video Encoder, or
Sorensen Squeeze) to convert the video file to an FLV file. For more information, visit the Video Technology Center at
www.adobe.com/go/flv_devcenter.
Insert and preview SWF files
Use Dreamweaver to add SWF files to your pages, and then preview them in a document or a browser. You can also set
properties for SWF files in the Property inspector.
For a tutorial on adding SWF files to web pages, see www.adobe.com/go/vid0150.
Insert a SWF file
1 In the Design view of the Document window, place the insertion point where you want to insert the content, then
do one of the following:
• In the Common category of the Insert panel, select Media and click the SWF icon
• Select Insert > Media > SWF.
2 In the dialog box that appears, select a SWF file (.swf).
A SWF file placeholder appears in the Document window.
Last updated 6/3/2015
.
312
Page content and assets
The placeholder has a tabbed blue outline. The tab indicates the type of asset (SWF file) and the ID of the SWF file.
The tab also displays an eye icon. It acts as toggle between the SWF file and the download information users see
when they don’t have the correct version of Flash Player.
3 Save the file.
Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved
to a Scripts folder in your site. Don’t forget to upload these files when you upload the SWF file to your web server.
Browsers can’t display the SWF file properly unless you have also uploaded these dependent files.
Note: Microsoft Internet Information Server (IIS) does not process nested object tags. For ASP pages, Dreamweaver uses
nested object/embed code instead of nested object code when inserting SWF or FLV files.
Edit Flash Player download information
When you insert a SWF file in a page, Dreamweaver inserts code that detects whether the user has the correct version
of Flash Player. If not, the page displays default alternative content that prompts the user to download the latest version.
You can change this alternative content at any time.
This procedure also applies to FLV files.
Note: If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash
Player express installer. If the user declines the express install, the page then displays the alternative content.
1 In the Design view of the Document window, select the SWF file or FLV file.
2 Click the eye icon in the tab of the SWF file or FLV file.
You can also press Control + ] to switch to alternative content view. To return to SWF/FLV view, press Control + [
until all of the alternative content is selected. Then press Control + [ again.
3 Edit the content just as you would edit any other content in Dreamweaver.
Note: You cannot add SWF files or FLV files as alternative content.
4 Click the eye icon again to return to the SWF (or FLV) file view.
Preview SWF files in the Document window
1 In the Document window, click the SWF file placeholder to select the content.
2 In the Property inspector (Window > Properties), click the Play button. Click Stop to end the preview. You can also
preview the SWF file in a browser by pressing F12.
To preview all SWF files in a page, press Control+Alt+Shift+P (Windows) or Command+Option+Shift+P
(Macintosh). All SWF files are set to Play.
Last updated 6/3/2015
313
Page content and assets
Set SWF file properties
You can set properties for SWF files using the Property inspector. The properties are also applicable to Shockwave
movies.
❖ Select a SWF file or a Shockwave movie and set the options in the Property inspector (Window > Properties). To see
all properties, click the expander arrow in the lower-right corner of the Property inspector.
ID Specifies a unique ID for the SWF file. Enter an ID in the unlabeled text box on the far left side of the Property
inspector. As of Dreamweaver CS4, a unique ID is required.
W and H Specify the width and height of the movie, in pixels.
File Specifies the path to the SWF file or Shockwave file. Click the folder icon to browse to a file, or type a path.
Src Specifies the path to the source document (the FLA file), when Dreamweaver and Flash are both installed on
your computer. To edit a SWF file, update the movie’s source document.
Bg Specifies a background color for the movie area. This color also appears while the movie is not playing (while
loading and after playing).
Edit Starts Flash to update a FLA file (a file created in the Flash authoring tool). This option is disabled if you do
not have Flash installed on your computer.
Class Lets you apply a CSS class to the movie.
Loop Makes the movie play continuously. When Loop is not selected, the movie plays once and stops.
Autoplay Automatically plays the movie when the page loads.
V Space and H Space Specifies the number of pixels of white space above, below, and on both sides of the movie.
Quality Controls anti-aliasing during playback of the movie. High settings improve the appearance of movies.
However, at high settings movies require a faster processor to render correctly on the screen. Low favors speed over
appearance, whereas High favors appearance over speed. Auto Low favors speed at first but improves appearance
when possible. Auto High favors both qualities equally at first but later sacrifices appearance for speed if necessary.
Scale Determines how the movie fits into the dimensions set in the width and height text boxes. The Default setting
displays the entire movie.
Align Determines how the movie is aligned on the page.
Wmode Sets the Wmode parameter for the SWF file to avoid conflicts with DHTML elements, such as Spry widgets.
The default value is Opaque, which allows DHTML elements to appear on top of SWF files in a browser. If the SWF
file includes transparencies and you want DHTML elements to appear behind them, select the Transparent option.
Select the Window option to remove the Wmode parameter from the code and allow the SWF file to appear on top
of other DHTML elements.
Play Plays the movie in the Document window.
Parameters Opens a dialog box for entering additional parameters to pass to the movie. The movie must be
designed to receive these additional parameters.
Insert FlashPaper documents
The Insert FlashPaper feature has been deprecated as of Dreamweaver CS5.
Last updated 6/3/2015
314
Page content and assets
More Help topics
Working with Flash and Dreamweaver
Inserting FLV files
Working with Flash and Dreamweaver
Edit a SWF file from Dreamweaver in Flash
SWF files and DHTML layers
Insert Shockwave movies
Inserting FLV files
Working with Flash tutorial
Adding web widgets
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
A web widget is a web page component comprised of HTML, CSS, and JavaScript. Examples of web widgets include
accordions, tabbed panels, and calendars.
You can make your own personal selection of web widgets available in Dreamweaver by using the Adobe Widget
Browser—an AIR application that lets you browse, configure, and preview widgets using a visual interface.
1 Select Insert > Widget.
2 In the Widget dialog box, select a widget and preset (if applicable) and click OK.
You can also add a web widget to a Dreamweaver page (CS5.5 and later) by doing the following:
1 In the Widget Browser, navigate to My Widgets.
2 Select the widget you want to add.
3 Click and hold the Drag and Drop in Dreamweaver icon at the upper left corner of the Live View tab. Drag the
widget to Dreamweaver into Design view (Windows) or Design or Code view (Macintosh OS).
You cannot drag and drop the widget into Live view, but you can use Live view to test the widget once you’ve dropped
it into the page.
More Help topics
Adobe Widget Browser Help
Working with Spry widgets (general instructions)
Adding Sound
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Last updated 6/3/2015
315
Page content and assets
Audio file formats
You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi,
and .mp3. Some factors to consider before deciding on a format and method for adding sound are its purpose, your
audience, file size, sound quality, and differences in browsers.
Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file
to a SWF file and then embed the SWF file to improve consistency.
The following list describes the more common audio file formats along with some of the advantages and disadvantages
of each for web design.
.midi or .mid (Musical Instrument Digital Interface) This format is for instrumental music. MIDI files are supported by
many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on a
visitor’s sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be
synthesized on a computer with special hardware and software.
.wav (Waveform Extension) These files have good sound quality, are supported by many browsers, and don’t require a
plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size
severely limits the length of sound clips that you can use on your web pages.
.aif (Audio Interchange File Format, or AIFF) The AIFF format, like WAV format, has good sound quality, can be played
by most browsers, and doesn’t require a plug-in; you can also record AIFF files from a CD, tape, microphone, and so
on. However, the large file size severely limits the length of sound clips that you can use on your web pages.
.mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) A compressed format that makes sound files
substantially smaller. The sound quality is very good: if an mp3 file is recorded and compressed properly, its quality can
rival that of a CD. mp3 technology lets you “stream” the file so that a visitor doesn’t have to wait for the entire file to
download before hearing it. However, the file size is larger than a Real Audio file, so an entire song could still take quite
a while to download over a typical dial-up (telephone line) modem connection. To play mp3 files, visitors must
download and install a helper application or plug-in, such as QuickTime, Windows Media Player or RealPlayer.
.ra, .ram, .rpm, or Real Audio This format has a high degree of compression, with smaller file sizes than mp3. Entire
song files can be downloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web
server, visitors can begin listening to the sound before the file has completely downloaded. Visitors must download and
install the RealPlayer helper application or plug-in to play these files.
.qt, .qtm, .mov or QuickTime This format is both an audio and video format developed by Apple Computer. QuickTime
is included with Apple Macintosh operating systems, and is used by most Macintosh applications that use audio, video,
or animation. PCs can also play files in QuickTime format, but require a special QuickTime driver. QuickTime supports
most encoding formats, including Cinepak, JPEG, and MPEG.
Note: In addition to the more common formats listed above, there are many different audio and video file formats available
for use on the web. If you encounter a media file format that you are unfamiliar with, locate the creator of the format for
information on how best to use and deploy it.
Link to an audio file
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound
files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience.
1 Select the text or image you want to use as the link to the audio file.
2 In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the file’s
path and name in the Link text box.
Last updated 6/3/2015
316
Page content and assets
Embed a sound file
Embedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have
the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if
you want to control the volume, the way the player looks on the page, or the beginning and ending points of the sound
file.
When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how
visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the
sound, in the event that visitors don’t want to listen to the audio content.
1 In Design view, place the insertion point where you want to embed the file and do one of the following:
• In the Common category of the Insert panel, click the Media button and select the Plugin icon
up menu.
from the pop-
• Select Insert > Media > Plugin.
2 Browse for the audio file and click OK.
3 Enter the width and height by entering the values in the appropriate text boxes in the Property inspector or by
resizing the plug-in placeholder in the Document window.
These values determine the size at which the audio controls are displayed in the browser.
More Help topics
Insert and edit media objects
Insert HTML5 audio
Dreamweaver allows you to insert and preview HTML5 audio in web pages. The HTML5 audio element provides a
standard way to embed audio content into web pages.
For more information on HTML5 audio element, see the article on HTML5 audio at W3schools.com.
Insert HTML5 audio
1 Ensure that your cursor is at the location where you want to insert the audio.
2 Select Insert > Media > HTML5 Audio. The audio file is inserted at the specified location.
3 In the Properties panel, enter the following information:
• Source / Alt Source 1 / Alt Source 2: In Source, enter the location of the audio file. Alternatively, click the folder
icon to select an audio file from your computer. Support for audio formats varies on different browsers. If the
audio format in Source is not supported, the format specified in Alt Source 1 or Alt Source 2 is used. The browser
selects the first recognized format to display the audio.
To quickly add videos to the three fields, use multiple selection. When you choose three video formats for the same
video from a folder, the first format in the list is used for the Source. The following formats in the list are used to
auto-fill Alt Source 1 and Alt Source 2.
Last updated 6/3/2015
317
Page content and assets
Browser
MP3
Wav
Ogg
Internet Explorer 9
YES
NO
NO
Firefox 4.0
NO
YES
YES
Google Chrome 6
YES
YES
YES
Apple Safari 5
YES
YES
NO
Opera 10.6
NO
YES
YES
• Title: Enter a title for the audio file.
• Fallback text: Enter the text to be displayed in browsers that do not support HTML5.
• Controls: Select if you want to display audio controls such as Play, Pause, and Mute in the HTML page.
• Autoplay: Select if you want the audio to start playing as soon as it loads on the web page.
• Loop Audio: Select this option if you want the audio to continuously play until the user stops playing it.
• Mute: Select this option if you want to mute the audio after download.
• Preload: Selecting Auto loads the entire audio file on page download. Selecting Metadata downloads only the
metadata after the page download is complete.
Preview the audio in browser
1 Save the web page.
2 Select File > Preview in Browser. Select the browser in which you want to preview the audio.
Automating tasks
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Task automation
The History panel records the steps you take when you complete a task. Automate a frequently performed task by
replaying those steps from the History panel or creating a new command that performs the steps automatically.
Certain mouse movements, such as selecting by clicking in the Document window, can’t be played back or saved. When
you make such a movement, a black line appears in the History panel (the line does not become obvious until you
perform another action). To avoid this, use the arrow keys instead of the mouse to move the insertion point within the
Document window
Some other steps also aren’t repeatable, such as dragging a page element to somewhere else on the page. When you
perform such a step, an icon with a small red X appears in the History panel.
Last updated 6/3/2015
318
Page content and assets
Saved commands are retained permanently (unless you delete them), while recorded commands are discarded when
you exit from Adobe Dreamweaver, and copied sequences of steps are discarded when you copy something else
Use the History panel
The History panel (Window > History) shows a list of the steps you’ve performed in the active document since you
created or opened that document (but not steps you’ve performed in other frames, in other Document windows, or in
the Site panel). Use the History panel to undo multiple steps at once and to automate tasks.
A Slider (thumb) B Steps C Replay button D Copy Steps button E Save As Command button
The slider, or thumb, in the History panel initially points to the last step that you performed.
Note: You can’t rearrange the order of steps in the History panel. Don’t think of the History panel as an arbitrary collection
of commands; think of it as a way to view the steps you’ve performed, in the order in which you performed them.
Undo the last step
❖ Do one of the following:
• Select Edit > Undo.
• Drag the History panel slider up one step in the list.
Note: To scroll automatically to a particular step, you must click to the left of the step; clicking the step itself selects the
step. Selecting a step is different from going back to that step in your undo history.
Undo multiple steps at once
❖ Drag the slider to point to any step, or click to the left of a step along the path of the slider.
The slider scrolls automatically to that step, undoing steps as it scrolls.
Note: As with undoing a single step, if you undo a series of steps and then do something new in the document, you can
no longer redo the undone steps; they disappear from the History panel.
Set the number of steps that the History panel retains and shows
The default number of steps is sufficient for most users’ needs. The higher the number, the more memory the History
panel requires, which can affect performance and slow your computer significantly.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select General from the Category list on the left.
3 Enter a number for Maximum Number Of History Steps.
When the History panel reaches this maximum number of steps, the earliest steps are discarded.
Last updated 6/3/2015
319
Page content and assets
Erase the history list for the current document:
❖ In the History panel’s context menu, select Clear History.
This command also clears all undo information for the current document; after choosing Clear History, you can’t
undo the steps that are cleared. Clear History does not undo steps; it merely removes the record of those steps from
memory.
Repeat steps
Use the History panel to repeat the last step you performed, repeat a series of adjacent steps, or repeat a series of
nonadjacent steps. Replay the steps directly from the History panel.
Repeat one step
❖ Do one of the following:
• Select Edit > Redo.
• In the History panel, select a step and click the Replay button. The step is replayed and a copy of it appears in the
History panel.
Repeat a series of steps
1 Select steps in the History panel:
• To select adjacent steps, drag from one step to another (don’t drag the slider; just drag from the text label of one
step to the text label of another step), or select the first step, and then Shift-click the last step.
• To select nonadjacent steps, select a step, and then Control-click (Windows) or Command-click (Macintosh) to
select or deselect other steps.
The steps played are the selected (highlighted) steps, not necessarily the step the slider currently points to.
Note: Although you can select a series of steps that includes a black line indicating a step that can’t be recorded, that step
is skipped when you replay the steps.
2 Click Replay.
The steps are replayed in order, and a new step, Replay Steps, appears in the History panel.
Make or extend a selection
❖ Hold down the Shift key while pressing an arrow key.
If a black mouse-movement indicator line appears while you’re performing a task you want to repeat later, you can
undo back to before that step and try another approach, perhaps using the arrow keys.
Apply steps in the History panel to objects
You can apply a set of steps from the History panel to any object in the Document window.
If you select multiple objects and then apply steps to them from the History panel, the objects are treated as a single
selection and Dreamweaver attempts to apply the steps to that combined selection; however, you can apply a set of steps
only to a single object at a time.
To apply the steps to each object in a set of objects, you must make the last step in the series select the next object in the
set. The second procedure demonstrates this principle in a specific scenario: setting the vertical and horizontal spacing
of a series of images.
Last updated 6/3/2015
320
Page content and assets
Apply steps to one other object
1 Select the object.
2 Select the relevant steps in the History panel, and click Replay.
Apply steps to multiple objects
1 Start with a document in which each line consists of a small image (such as a graphical bullet or an icon) followed
by text.
The goal is to set the images off from the text and from the other images above and below them.
2 Open the Property inspector (Window > Properties), if it isn’t already open.
3 Select the first image.
4 In the Property inspector, enter numbers in the V Space and H Space boxes to set the image’s spacing.
5 Click the image again to make the Document window active without moving the insertion point.
6 Press the Left Arrow key to move the insertion point to the left of the image.
7 Press the Down Arrow key to move the insertion point down one line, leaving it just to the left of the second image
in the series.
8 Press Shift+Right Arrow to select the second image.
Note: Do not select the image by clicking it, or you won’t be able to replay all the steps.
9 In the History panel, select the steps that correspond to changing the image’s spacing and selecting the next image.
Click Replay to replay those steps.
The current image’s spacing changes, and the next image is selected.
10 Continue to click Replay until all the images are spaced correctly.
Copy and paste steps between documents
Each open document has its own history of steps. You can copy steps from one document and paste them into another.
Closing a document clears its history. If you know you will want to use steps from a document later, copy or save the
steps before you close the document.
1 In the document containing the steps you want to reuse, select the steps in the History panel.
Last updated 6/3/2015
321
Page content and assets
2 Click Copy Steps in the History panel
.
Note: The Copy Steps button in the History panel is different from the Copy command in the Edit menu. You can’t use
Edit > Copy to copy steps, although you do use Edit > Paste to paste them.
Be careful when you copy steps that include a Copy or a Paste command:
• Don’t use Copy Steps if one of the steps is a Copy command; you may not be able to paste such steps the way you
want.
• If your steps include a Paste command, you can’t paste those steps, unless the steps also include a Copy command
before the Paste command.
3 Open the other document.
4 Place the insertion point where you want it, or select an object to apply the steps to.
5 Select Edit > Paste.
The steps are played back as they’re pasted into the document’s History panel. The History panel shows them as only
one step, called Paste Steps.
If you pasted steps into a text editor or into Code view or the Code inspector, they appear as JavaScript code. This
can be useful for learning to write your own scripts.
Create and use commands from history steps
Save a set of history steps as a named command, which then becomes available in the Commands menu. Create and
save a new command if you might use a set of steps again, especially the next time you start Dreamweaver.
Create a command
1 Select a step or set of steps in the History panel.
2 Click the Save As Command button, or select Save As Command from the History panel’s context menu.
3 Enter a name for the command and click OK.
The command appears in the Commands menu.
Note: The command is saved as a JavaScript file (or sometimes an HTML file) in your
Dreamweaver/Configuration/Commands folder. If you are using Dreamweaver on a multiuser operating system, the file
is saved in the specific user’s Commands folder.
Use a saved command
1 Select an object to apply the command to, or place the insertion point where you want to apply the command.
2 Select the command from the Commands menu.
Edit a command name
1 Select Commands > Edit Command List.
2 Select a command to rename, enter a new name for it, and then click Close.
Delete a name from the Commands menu
1 Select Commands > Edit Command List.
2 Select a command.
3 Click Delete, and then click Close.
Last updated 6/3/2015
322
Page content and assets
Record and save commands
Record a temporary command for short-term use, or record and save a command to use later. Dreamweaver retains
only one recorded command at a time; as soon as you start recording a new command, the old command is lost, unless
you save it before recording the new command.
Temporarily record a series of steps
1 Select Commands > Start Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh).
The pointer changes to indicate that you’re recording a command.
2 When you finish recording, select Commands > Stop Recording, or press Control+Shift+X (Windows) or
Command+Shift+X (Macintosh).
Play back a recorded command
❖ Select Commands > Play Recorded Command.
Save a recorded command
1 Select Commands > Play Recorded Command.
2 Select the Run Command step that appears in the History panel’s step list, and then click the Save As Command
button.
3 Enter a name for the command, and click OK.
The command appears in the Commands menu.
More Help topics
Writing and editing code
About assets and libraries
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About assets
You can use Adobe Dreamweaver to keep track of and preview assets stored in your site, such as images, movies, colors,
scripts, and links. You can also drag an asset directly to insert it in a page of the current document.
You obtain assets from various sources. For example, you might create assets in an application such as Adobe®
Fireworks® or Adobe® Flash®, receive them from a co-worker, or copy them from a clip-art CD or graphics website.
Dreamweaver also provides access to two special types of assets—libraries and templates. Both are linked assets: when
you edit a library item or template, Dreamweaver updates all documents that use those assets. Library items generally
represent small design assets, such as a site logo or copyright. To control a larger design area, use a template instead.
Last updated 6/3/2015
323
Page content and assets
About library items
A library is a special Dreamweaver file containing a collection of individual assets or copies of assets that you can place
in your web pages. The assets in a library are called library items. Items that you can store in a library include images,
tables, sounds, and files created with Adobe Flash. You can automatically update all the pages that use a library item
whenever you edit the item.
For example, suppose you’re building a large site for a company that wants a slogan to appear on every page. You can
create a library item to contain the slogan and use that library item on every page. If the slogan changes, you can change
the library item and automatically update every page that uses it.
Dreamweaver stores library items in a Library folder within the local root folder for each site. Each site has its own
library.
You can create a library item from any element in the body section of a document, including text, tables, forms, Java
applets, plug-ins, ActiveX elements, navigation bars, and images.
For linked items such as images, the library stores only a reference to the item. The original file must remain at the
specified location for the library item to work correctly.
It can still be useful to store an image in a library item, though. For example, you could store a complete img tag in a
library item, which would allow you to easily change the image’s alt text, or even its src attribute, throughout the site.
(Don’t use this technique to change an image’s width and height attributes, though, unless you also use an image editor
to change the actual size of the image.)
Note: If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied
to the new site.
When you use a library item, Dreamweaver inserts a link to it, rather than the item itself, in the web page. That is,
Dreamweaver inserts a copy of the HTML source code for that item into the document and adds an HTML comment
containing a reference to the original, external item. It is this external reference that makes automatic updating possible.
When you create a library item that includes an element with a Dreamweaver behavior attached to it, Dreamweaver
copies the element and its event handler (the attribute that specifies which event triggers the action, such as onClick,
onLoad, or onMouseOver, and which action to call when the event occurs) to the library item file. Dreamweaver does
not copy the associated JavaScript functions into the library item. Instead, when you insert the library item into a
document, Dreamweaver automatically inserts the appropriate JavaScript functions into the head section of that
document (if they aren’t already there).
Note: If you hand-code JavaScript (that is, if you create it without using Dreamweaver behaviors), you can make it part of
a library item if you use the Call JavaScript behavior to execute the code. If you don’t use a Dreamweaver behavior to
execute the code, the code isn’t retained as part of the library item.
There are special requirements for editing the behaviors in library items. Library items cannot contain style sheets,
because the code for those elements is part of the head section.
More Help topics
About Dreamweaver templates
Edit a behavior in a library item
Last updated 6/3/2015
324
Page content and assets
Working with library items
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Create a library item
Library items are elements that you want to reuse or update frequently throughout your website.
Create a library item based on a selection
1 In the Document window, select a portion of a document to save as a library item.
2 Do one of the following:
• Drag the selection into the Library category
• Click the New Library Item button
.
at the bottom of the Library category.
• Select Modify > Library > Add Object To Library.
3 Type a name for the new library item, then press Enter (Windows) or Return (Macintosh).
Dreamweaver saves each library item as a separate file (with the file extension .lbi) in the Library folder of the site’s
local root folder.
Create an empty library item
1 Make sure nothing is selected in the Document window.
If something is selected, it will be placed in the new library item.
2 In the Assets panel, select the Library category
3 Click the New Library Item button
.
at the bottom of the panel.
4 While the item is still selected, enter a name for it, then press Enter (Windows) or Return (Macintosh).
Insert a library item into a document
When you add a library item to a page, the actual content is inserted in the document along with a reference to the
library item.
1 Place the insertion point in the Document window.
2 In the Assets panel, select the Library category
.
3 Do one of the following:
• Drag a library item from the Assets panel to the Document window.
To insert the contents of a library item without including a reference to the item in the document, press Control
(Windows) or Option (Macintosh) while dragging an item out of the Assets panel. If you insert an item this way, you
can edit the item in the document, but the document won’t be updated when you update pages that use that library item.
• Select a library item, and click Insert.
Edit library items and update documents
When you edit a library item, you can update all documents that use that item. If you choose not to update, the
documents remain associated with the library item; you can update them later.
Last updated 6/3/2015
325
Page content and assets
You can rename items to break their connection with documents or templates, delete items from the site’s library, and
recreate a missing library item.
Note: The CSS Styles panel is unavailable as you edit a library item, because library items can contain only body elements
and Cascading Style Sheets (CSS) code is inserted in the head section of a document. The Page Properties dialog box is also
unavailable, because a library item can’t include a body tag or its attributes.
Edit a library item
1 In the Assets panel, select the Library category
.
2 Select a library item.
3 Either Click the Edit button
or double-click the library item.
Dreamweaver opens a new window, similar to the Document window, for editing the library item. The gray
background indicates that you’re editing a library item instead of a document.
4 Make and then save your changes.
5 Specify whether to update the documents on the local site that use the library item. Select Update to update
immediately. If you select Don’t Update, documents won’t be updated until you choose Modify > Library > Update
Current Page or Update Pages.
Update the current document to use the current version of all library items
❖ Select Modify > Library > Update Current Page.
Update the entire site or all documents that use a particular library item
1 Select Modify > Library > Update Pages.
2 In the Look In pop-up menu, specify what to update:
• To update all pages in the selected site to use the current version of all library items, select Entire Site, then select
the site name from the adjacent pop-up menu.
• To update all pages in the current site that use the library item, select Files That Use, then select a library item
name from the adjacent pop-up menu.
3 Make sure that Library Items is selected in the Update option.
To update templates at the same time, select Templates as well.
4 Click Start.
Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver generates a report
showing whether files were updated successfully, along with other information.
Rename a library item
1 In the Assets panel, select the Library category
.
2 Select the library item, pause, and then click again. (Do not double-click; double-clicking opens the item for
editing.)
3 Enter a new name.
4 Click elsewhere, or press Enter (Windows) or Return (Macintosh).
5 Specify whether to update documents that use the item by choosing either Update or Don’t Update.
Last updated 6/3/2015
326
Page content and assets
Delete a library item from a library
When you delete a library item, Dreamweaver removes it from the library but doesn’t change the contents of any
documents that use the item.
1 In the Assets panel, select the Library category
.
2 Select the library item.
3 Either click the Delete button or press the Delete key, then confirm that you want to delete the item.
Note: If you delete a library item, you can’t use Undo to retrieve it. You may be able to recreate it, however.
Recreate a missing or deleted library item
1 Select an instance of the item in one of your documents.
2 Click the Recreate button in the Property inspector (Window > Properties).
Customize highlighting of library items
You can customize the highlight color of library items and show or hide highlighting by setting Highlighting
preferences.
Change the highlight color of library items
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select the Highlighting category from the list on the left of the Preferences dialog box.
3 Click the Library Items color box, then select a highlight color using the color picker (or enter the hexadecimal color
value in the text box).
4 Select Show to display the highlight color in the Document window.
5 Click OK.
To show or hide highlighting in the Document window
❖ To show highlighting, select View > Visual Aids > Invisible Elements. To hide highlighting, deselect Invisible
Elements.
Edit the properties of a library item
You can use the Property inspector to open a library item for editing, detach a selected library item from its source file,
or overwrite an item with the currently selected library item.
1 Select a library item in a document.
2 Select one of these options in the Property inspector (Window > Properties):
Src Displays the filename and location of the source file for the library item. You can’t edit this information.
Open Opens the library item’s source file for editing. This is equivalent to selecting the item in the Assets panel and
clicking the Edit button.
Detach From Original Breaks the link between the selected library item and its source file. You can edit the detached
item in the document, but it’s no longer a library item and isn’t updated when you change the original.
Recreate Overwrites the original library item with the current selection. Use this option to re-create library items
if the original library item is missing or has been accidentally deleted.
Last updated 6/3/2015
327
Page content and assets
Make library items editable in a document
If you’ve added a library item to your document and you want to edit the item specifically for that page, you must break
the link between the item in the document and the library. Once you’ve made an instance of a library item editable, that
instance isn’t updated when the library item changes.
1 Select a library item in the current document.
2 Click Detach From Original in the Property inspector (Window > Properties).
Edit a behavior in a library item
To edit a behavior in a library item, you must first insert the item in a document, then make the item editable in that
document. After you’ve made the changes, you can re-create the library item, replacing the item in the library with the
edited item from your document.
1 Open a document that contains the library item.
Note the name of the library item, as well as the exact tags it contains. You’ll need this information later.
2 Select the library item, and then click Detach From Original in the Property inspector (Window > Properties).
3 Select the element that has the behavior attached to it.
4 In the Behaviors panel (Window > Behaviors), double-click the action you want to change.
5 In the dialog box that appears, make your changes, then click OK.
6 In the Assets panel, select the Library category
.
7 Record the exact name and capitalization of the original library item; select it, then click the Delete button.
8 In the Document window, select all the elements that make up the library item.
Be careful to select exactly the same elements that were in the original library item.
9 In the Assets panel, click the New Library Item button
, then give the new item the same name as the item you
deleted, using the same spelling and capitalization.
10 To update the library item in your site’s other documents, select Modify > Library > Update Pages.
11 In the Look In pop-up menu, select Files That Use.
12 In the adjacent pop-up menu, select the name of the library item you just created.
13 In the Update option, make sure Library Items is selected, then click Start.
14 When the updates are complete, click Close.
More Help topics
About library items
Use the color picker
Using JavaScript behaviors
Working with Photoshop and Dreamweaver
Last updated 6/3/2015
328
Page content and assets
About Photoshop integration
You can insert Photoshop image files (PSD format) into web pages in Dreamweaver and let Dreamweaver optimize
them as web-ready images (GIF, JPEG, and PNG formats). When you do this, Dreamweaver inserts the image as a
Smart Object and maintains a live connection to the original PSD file.
You can also paste all or part of a multi-layered or multi-sliced Photoshop image into a web page in Dreamweaver.
When you copy and paste from Photoshop, however, no live connection to the original file is maintained. To update
the image, make your changes in Photoshop, and copy and paste again.
Note: If you use this integration feature often, you may want to store your Photoshop files in your Dreamweaver site for
easier access. If you do, be sure to cloak them to avoid exposure of the original assets, as well as unnecessary transfers
between the local site and the remote server.
For a tutorial on Photoshop integration with Dreamweaver, see Integrating Dreamweaver with Photoshop.
About Smart Objects and Photoshop-Dreamweaver workflows
There are two main workflows for working with Photoshop files in Dreamweaver: the copy/paste workflow, and the
Smart Objects workflow.
Copy/paste workflow
The copy/paste workflow lets you select slices or layers in a Photoshop file, and then use Dreamweaver to insert them
as web-ready images. If you want to update the content later on, however, you must open the original Photoshop file,
make your changes, copy your slice or layer to the clipboard again, and then paste the updated slice or layer into
Dreamweaver. This workflow is only recommended when you want to insert part of a Photoshop file (for example, a
section of a design comp) as an image on a web page.
Smart Objects workflow
When working with complete Photoshop files, Adobe recommends the Smart Objects workflow. A Smart Object in
Dreamweaver is an image asset placed on a web page that has a live connection to an original Photoshop (PSD) file. In
Dreamweaver Design view, a Smart Object is denoted by an icon in the upper left corner of the image.
Last updated 6/3/2015
329
Page content and assets
When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file,
Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red.
When you select the web image in Design view and click the Update from Original button in the Property inspector,
the image updates automatically, reflecting any changes that you made to the original Photoshop file.
When you use the Smart Objects workflow, you do not need to open Photoshop to update a web image. Additionally,
any updates you make to a Smart Object in Dreamweaver are non-destructive. That is, you can change the web version
of the image on your page while keeping the original Photoshop image intact.
You can also update a Smart Object without selecting the web image in Design view. The Assets panel lets you update
all Smart Objects, including images that might not be selectable in the Document window (for example, CSS
background images).
Image optimization settings
For both the copy/paste and the Smart Object workflows, you can specify optimization settings in the Image
Optimization dialog box. This dialog box lets you specify the file format and image quality. If you are copying a slice or
a layer, or inserting a Photoshop file as a Smart Object for the first time, Dreamweaver displays this dialog so that you
can easily create the web image.
If you copy and paste an update to a particular slice or layer, Dreameaver remembers the original settings and re-creates
the web image with those settings. Likewise, when you update a Smart Object using the Property inspector,
Dreamweaver uses the same settings you used when you first inserted the image. You can change an image’s settings at
any time by selecting the web image in Design view, and then clicking the Edit Image Settings button in the Property
inspector.
Storing Photoshop files
If you’ve inserted a web image, and have not stored the original Photoshop file in your Dreamweaver site, Dreamweaver
recognizes the path to the original file as an absolute local file path. (This is true for both the copy/paste and Smart
Object workflows.) For example, if the path to your Dreamweaver site is C:\Sites\mySite, and your Photoshop file is
stored in C:\Images\Photoshop, Dreameaver will not recognize the original asset as part of the site called mySite. This
will cause problems if you ever want to share the Photoshop file with other team members because Dreamweaver will
only recognize the file as being available on a particular local hard drive.
If you store the Photoshop file inside your site, however, Dreamweaver establishes a site-relative path to the file. Any
user with access to the site will also be able to establish the correct path to the file, assuming that you have also provided
the original file for them to download.
For a video tutorial on roundtrip editing with Photoshop, see Roundtrip editing with Photoshop.
Create a Smart Object
When you insert a Photoshop image (PSD file) into your page, Dreamweaver creates a Smart Object. A Smart Object is
a web-ready image that maintains a live connection to the original Photoshop image. Whenever you update the original
image in Photoshop, Dreamweaver gives you the option of updating the image in Dreamweaver with the click of a
button.
1 In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
2 Select Insert > Image.
You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website.
If you do so, you’ll skip the next step.
3 Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and
navigating to it.
Last updated 6/3/2015
330
Page content and assets
4 In the Image Optimization dialog box that appears, adjust optimization settings as needed and click OK.
5 Save the web-ready image file to a location within your website’s root folder.
Dreamweaver creates the Smart Object based on the selected optimization settings and places a web-ready version of
the image on your page. The Smart Object maintains a live connection to the original image and lets you know when
the two are out of synch.
Note: If you decide later that you want to change the optimization settings for an image placed in your pages, you can select
the image, click the Edit Image Settings button in the Property inspector, and make changes in the Image Optimization
dialog box. Changes made in the Image Optimization dialog box are applied non-destructively. Dreamweaver never
modifies the original Photoshop file, and always re-creates the web image based on the original data.
For a video tutorial on roundtrip editing with Photoshop, see Roundtrip editing with Photoshop.
Update a Smart Object
If you change the Photoshop file to which your Smart Object is linked, Dreamweaver notifies you that the web-ready
image is out of sync with the original. In Dreamweaver, Smart Objects are denoted by an icon at the upper left corner
of the image. When the web-ready image in Dreamweaver is in sync with the original Photoshop file, both of the arrows
in the icon are green. When the web-ready image is out of sync with the original Photoshop file, one of the icon’s arrows
turns read.
❖ To update a Smart Object with the current contents of the original Photoshop file, select the Smart Object in the
Document window, and then click the Update from Original button in the Property inspector.
Note: You do not need Photoshop installed to make the update from Dreamweaver.
Update multiple Smart Objects
You can update multiple Smart Objects at once using the Assets panel. The Assets panel also lets you see Smart Objects
that might not be selectable in the Document window (for example, CSS background images).
1 In the Files panel, click the Assets tab to view site assets.
2 Make sure that Images view is selected. If it isn’t, click the Images button.
3 Select each image asset in the Assets panel. When you select a Smart Object, you’ll see the Smart Object icon in the
upper left corner of the image. Regular images do not have this icon.
4 For each Smart Object that you want to update, right-click the filename and select Update from Original. You can
also Control-click to select multiple filenames and update them all at once.
Note: You do not need Photoshop installed to make the update from Dreamweaver.
Resize a Smart Object
You can resize a Smart Object in the Document window just as you would any other image.
1 Select the Smart Object in the Document window and drag the resize handles to resize the image. You can maintain
the width and height proportions by holding down the Shift key as you drag.
2 Click the Update from Original button in the Property inspector.
When you update the Smart Object, the web image non-destructively re-renders at the new size, based on the
current contents of the original file, and the original optimization settings.
Last updated 6/3/2015
331
Page content and assets
Edit a Smart Object’s original Photoshop file
After you create a Smart Object on your Dreamweaver page, you can edit the original PSD file in Photoshop. After you
make your changes in Photoshop, you can then easily update the web image in Dreamweaver.
Note: Make sure that you have Photoshop set as your primary external image editor.
1 Select the Smart Object in the Document window.
2 Click the Edit button in the Property inspector.
3 Make your changes in Photoshop and save the new PSD file.
4 In Dreamweaver, select the Smart Object again and click the Update from Original button.
Note: If you changed the size of your image in Photoshop, you need to reset the size of the web image in Dreamweaver.
Dreamweaver updates a Smart Object based only on the contents of the original Photoshop file, and not its size. To sync
the size of a web image with the size of the original Photoshop file, right-click the image and select Reset Size To Original.
Smart Object states
The following table lists the various states for Smart Objects.
SmartObject state
Description
Recommended action
Images synched
The web image is in sync with the current
None
contents of the original Photoshop file. Width
and height attributes in the HTML code match
the dimensions of the web image.
Original asset modified
The original Photoshop file has been modified Use the Update From Original button in the
after the creation of the web image in
Property inspector to sync the two images.
Dreamweaver.
Dimensions of web image are different from
selected HTML width and height
The width and height attributes in the HTML
code are different from the width and height
dimensions of the web image that
Dreamweaver created upon insertion. If the
web image’s dimensions are smaller than the
selected HTML width and height values, the
web image can appear pixelated.
Dimensions of original asset are too small for
selected HTML width and height
The width and height attributes in the HTML Don’t create web images with dimensions
code are larger than the width and height
larger than the dimensions of the original
dimensions of the original Photoshop file. The Photoshop file.
web image can appear pixelated.
Original asset not found
Dreamweaver cannot find the original
Photoshop file specified in the Original text
box of the Property inspector.
Use the Update From Original button in the
Property inspector to re-create the web image
from the original Photoshop file.
Dreamweaver uses the currently specified
HTML width and height dimensions when it
re-creates the image.
Correct the file path in the Original text box of
the Property inspector, or move the
Photoshop file to the location that’s currently
specified.
Copy and paste a selection from Photoshop
You can copy all or some of a Photoshop image and paste the selection into your Dreamweaver page as a web-ready
image. You can copy a single layer or a set of layers for a selected area of the image or you can copy a slice of the image.
When you do this, however, Dreamweaver does not create a Smart Object.
Last updated 6/3/2015
332
Page content and assets
Note: While the Update from Original functionality is not available for pasted images, you can still open and edit the
original Photoshop file by selecting the pasted image and clicking the Edit button in the Property inspector.
1 In Photoshop, do one of the following:
• Copy all or part of a single layer by using the Marquee tool to select the portion you want to copy, and then choose
Edit > Copy. This copies only the active layer for the selected area into the clipboard. If you have layer-based
effects, they are not copied.
• Copy and merge multiple layers by using the Marquee tool to select the portion you want to copy, and then
choose Edit > Copy Merged. This flattens and copies all the selected area’s active and lower layers into the
clipboard. If you have layer-based effects associated with any of these layers, they are copied.
• Copy a slice by using the Slice Select tool to select the slice, and then choose Edit > Copy. This flattens and copies
all the slice’s active and lower layers into the clipboard.
You can choose Select > All to quickly select all of an image for copying.
2 In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
3 Select Edit > Paste.
4 In the Image Optimization dialog box, adjust optimization settings as needed and click OK.
5 Save the web-ready image file to a location within your website’s root folder.
Dreamweaver defines the image according to your optimization settings and places a web-ready version of your image
in your page. Information about the image, such as the location of the original PSD source file, is saved in a Design
Note, regardless of whether you have enabled Design Notes for your site. The Design Note allows you to return to edit
the original Photoshop file from Dreamweaver.
Edit pasted images
After you paste Photoshop images in your Dreamweaver pages, you can edit the original PSD file in Photoshop. When
using the copy/paste workflow, Adobe recommends that you always make your edits to the original PSD file (rather
than the web-ready image itself), and then repaste to maintain single sourcing.
Note: Make sure that you have Photoshop set as your primary external image editor for the file type you want to edit.
1 In Dreamweaver, select a web-ready image that was originally created in Photoshop and do one of the following:
• Click the Edit button in the image’s Property inspector.
• Press Control (Windows) or Command (Macintosh) as you double-click the file.
• Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Original With from the context
menu, and then choose Photoshop.
Note: This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want
to set Photoshop as the default editor for JPEG, GIF, and PNG file types.
2 Edit the file in Photoshop.
3 Return to Dreamweaver and paste the updated image or selection into your page.
If you want to reoptimize the image at any time, you can select the image and click the Edit Image Settings button in
the Property inspector.
Last updated 6/3/2015
333
Page content and assets
Setting Image Optimization dialog box options
When you create a Smart Object or paste a selection from Photoshop, Dreamweaver displays the Image Optimization
dialog box. (Dreamweaver also displays this dialog box for any other kind of image if you select the image and click the
Edit Image Settings button in the Property inspector.) This dialog box lets you define and preview settings for webready images using the right mix of color, compression, and quality.
A web-ready image is one that can be displayed by all modern web browsers and looks the same no matter what system
or browser the viewer is using. In general, the settings result in a trade-off between quality and file size.
Note: Whatever settings you select only affect the imported version of the image file. The original Photoshop PSD or
Fireworks PNG file always remains untouched.
Preset Choose a Preset that best suits your requirements. The file size of the image changes based on your chosen
preset. An instant preview of the image with the applied setting is displayed in the background.
For example, for images that have to be displayed with a high degree of clarity, choose PNG24 for Photos (Sharp
Details). Select GIF For Background Images (Patterns) if you are inserting a pattern that will act as the background of
the page.
When you select a preset, the configurable options for the preset are displayed. If you want to further customize
optimization settings, modify the values for these options.
Last updated 6/3/2015
334
Chapter 8: Linking and navigation
About linking and navigation
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About links
After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to
create connections from your documents to other documents.
Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software.
You can establish links to any text or image anywhere within a document, including text or images in a heading, list,
table, absolutely-positioned element (AP element), or frame.
There are several different ways of creating and managing links. Some web designers prefer to create links to
nonexistent pages or files as they work, while others prefer to create all the files and pages first and then add the links.
Another way to manage links is to create placeholder pages, in which you add and test links before completing all your
site pages.
Absolute, document-relative, and site root-relative paths
Understanding the file path between the document you’re linking from and the document or asset you’re linking to is
essential to creating links.
Each web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local link
(a link from one document to another on the same site), you generally don’t specify the entire URL of the document
you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder.
There are three types of link paths:
• Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
• Document-relative paths (such as dreamweaver/contents.html).
• Site root–relative paths (such as /support/dreamweaver/contents.html).
Using Dreamweaver, you can easily select the type of document path to create for your links.
Note: It is best to use the type of linking you prefer and are most comfortable with—either site root- or document-relative.
Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.
Absolute paths
Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web
pages), for example, http://www.adobe.com/support/dreamweaver/contents.html. For an image asset, the complete
URL might be something like http://www.adobe.com/support/dreamweaver/images/image1.jpg.
Last updated 6/3/2015
335
Linking and navigation
You must use an absolute path to link to a document or asset on another server. You can also use absolute paths for local
links (to documents in the same site), but that approach is discouraged—if you move the site to another domain, all of
your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you need
to move files within your site.
Note: When inserting images (not links), you can use an absolute path to an image on a remote server (that is, an image
that is not available on the local hard drive).
Document-relative paths
Document-relative paths are usually best for local links in most websites. They’re particularly useful when the current
document and the linked document or asset are in the same folder and are likely to remain together. You can also use
a document-relative path to link to a document or asset in another folder by specifying the path through the folder
hierarchy from the current document to the linked document.
The basic idea of document-relative paths is to omit the part of the absolute path that is the same for both the current
document and the linked document or asset, providing only the portion of the path that differs.
For example, suppose you have a site with the following structure:
• To link from contents.html to hours.html (both in the same folder), use the relative path hours.html.
• To link from contents.html to tips.html (in the resources subfolder), use the relative path resources/tips.html. At
each slash (/), you move down one level in the folder hierarchy.
• To link from contents.html to index.html (in the parent folder, one level above contents.html), use the relative path
../index.html. Two dots and a slash (../) moves you up one level in the folder hierarchy.
• To link from contents.html to catalog.html (in a different subfolder of the parent folder), use the relative path
../products/catalog.html. Here, ../ moves you up to the parent folder, and products/ moves you down to the products
subfolder.
When you move files as a group—for example, when you move an entire folder, so that all the files inside that folder
retain the same relative paths to each other—you don’t need to update document-relative links between those files.
However, when you move an individual file that contains document-relative links, or an individual file targeted by
a document-relative link, you do need to update those links. (If you move or rename files using the Files panel,
Dreamweaver updates all relevant links automatically.)
Site root–relative paths
Site root–relative paths describe the path from the site’s root folder to a document. You may want to use these paths if
you are working on a large website that uses several servers, or one server that hosts several sites. However, if you are
not familiar with this type of path, you may want to stick to document-relative paths.
A site root–relative path begins with a leading forward slash, which stands for the root folder of the site. For example,
/support/tips.html is a site root–relative path to a file (tips.html) in the support subfolder of the site’s root folder.
Last updated 6/3/2015
336
Linking and navigation
A site root–relative path is often the best way to specify links if you frequently move HTML files from one folder to
another in your website. When you move a document that contains site root–relative links, you don’t need to change
the links since the links are relative to the site root, and not to the document itself; for example, if your HTML files use
site root–relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are
still valid.
However, when you move or rename the documents targeted by site root–relative links, you must update those links,
even if the documents’ paths relative to each other haven’t changed. For example, if you move a folder, you must update
all site root–relative links to files in that folder. (If you move or rename files using the Files panel, Dreamweaver updates
all relevant links automatically.)
More Help topics
Test links in Dreamweaver
Set the relative path of new links
Working with Dreamweaver sites
Linking
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Linking files and documents
Before creating a link, make sure you understand how absolute, document-relative, and site root–relative paths work.
You can create several types of links in a document:
• A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
• A named anchor link, which jumps to a specific location in a document.
• An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in.
• Null and script links, which you use to attach behaviors to an object or to create a link that executes JavaScript code.
You can use the Property inspector and the Point-To-File icon to create links from an image, an object, or text to
another document or file.
Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver
to create new links using site root–relative paths.
Note: Always save a new file before creating a document-relative path; a document-relative path is not valid without a
definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an
absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path to
a relative path.
For a tutorial on creating links, see www.adobe.com/go/vid0149.
Last updated 6/3/2015
337
Linking and navigation
Attaching JavaScript behaviors to links
You can attach a behavior to any link in a document. Consider using the following behaviors when you insert linked
elements into documents:
Set Text Of Status Bar Determines the text of a message and displays it in the status bar at the lower left of the browser
window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing
the URL associated with it.
Open Browser Window Opens a URL in a new window. You can specify the properties of the new window, including
its name, size, and attributes (whether it is resizable, has a menu bar, and so on).
Jump Menu Edits a jump menu. You can change the menu list, specify a different linked file, or change the browser
location in which the linked document opens.
Link to documents using the Property inspector
You can use the Property inspector’s folder icon or Link box to create links from an image, an object, or text to another
document or file.
1 Select text or an image in the Document window’s Design view.
2 Open the Property inspector (Window > Properties) and do one of the following:
• Click the folder icon
to the right of the Link box to browse to and select a file.
The path to the linked document appears in the URL box. Use the Relative To pop-up menu in the Select HTML
File dialog box to make the path document-relative or root-relative, and then click Select. The type of path you
select applies only to the current link. (You can change the default setting of the Relative To box for the site.)
• Type the path and filename of the document in the Link box.
To link to a document in your site, enter a document-relative or site root–relative path. To link to a document
outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to
enter a link for a file that hasn’t been created yet.
3 From the Target pop-up menu, select a location in which to open the document:
• _blank loads the linked document in a new, unnamed browser window.
• _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If
the frame containing the link is not nested, then the linked document loads in the full browser window.
• _self loads the linked document in the same frame or window as the link. This target is the default, so you usually
don’t have to specify it.
• _top loads the linked document in the full browser window, thereby removing all frames.
If all the links on your page will be set to the same target, you can specify this target once by selecting Insert > HTML
> Head Tags > Base and selecting the target information. For information about targeting frames, see Control frame
content with links.
Link to documents using the Point-To-File icon
1 Select text or an image in the Document window’s Design view.
2 Create a link in one of two ways:
• Drag the Point-To-File icon (target icon) at the right of the Link box in the Property inspector and point to a
visible anchor in the current document, a visible anchor in another open document, an element that has a unique
ID assigned to it, or a document in the Files panel.
Last updated 6/3/2015
338
Linking and navigation
• Shift-drag from the selection and point to a visible anchor in the current document, a visible anchor in another
open document, an element that has a unique ID assigned to it, or a document in the Files panel.
Note: You can link to another open document only if your documents are not maximized in the Document window. To
tile documents, select Window > Cascade or Window > Tile. When you point to an open document, that document
moves to the foreground of your screen while you are making your selection.
Add a link using the Hyperlink command
The Hyperlink command lets you create a text link to an image, an object, or to another document or file.
1 Place the insertion point in the document where you want the link to appear.
2 Do one of the following to display the Insert Hyperlink dialog box:
• Select Insert > Hyperlink.
• In the Common category of the Insert panel, click the Hyperlink button.
3 Enter the text of the link and, after Link, the name of the file to link to (or click the folder icon
to browse to the
file).
4 In the Target pop-up menu, select the window in which the file should open or type its name.
The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame
that doesn’t exist, the linked page opens in a new window that has the name you specified. You can also select from
the following reserved target names:
• _blank loads the linked file into a new, unnamed browser window.
• _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t
need to specify it.
• _top loads the linked file into the full browser window, thereby removing all frames.
5 In the Tab Index box, enter a number for the tab order.
6 In the Title box, enter a title for the link.
7 In the Access Key box, enter a keyboard equivalent (one letter) to select the link in the browser.
8 Click OK.
Set the relative path of new links
By default, Dreamweaver creates links to other pages in your site using document-relative paths. To use site root–
relative path instead, you must first define a local folder in Dreamweaver by choosing a local root folder to serve as the
equivalent of the document root on a server. Dreamweaver uses this folder to determine the site root–relative paths to
files.
1 Select Site > Manage Sites.
2 In the Manage Sites dialog box, double-click your site in the list.
3 In the Site Setup dialog box, expand Advanced Settings and select the Local Info category.
4 Set the relative path of new links by selecting the Document or Site Root option.
Changing this setting will not convert the path of existing links after you click OK. The setting applies only to new
links you create with Dreamweaver.
Last updated 6/3/2015
339
Linking and navigation
Note: Content linked with a site root–relative path does not appear when you preview documents in a local browser
unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences > Preview In
Browser. This is because browsers don’t recognize site roots—servers do. A quick way to preview content linked with site
root–relative paths is to put the file on a remote server, then select File > Preview In Browser.
5 Click Save.
The new path setting applies only to the current site.
Link to a specific place in a document
You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named
anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You
can then create links to these named anchors, which quickly take your visitor to the specified position.
Creating a link to a named anchor is a two-step process. First, you create a named anchor; then you create a link to the
named anchor.
Note: You can’t place a named anchor in an absolutely-positioned element (AP element).
Create a named anchor
1 In the Document window’s Design view, place the insertion point where you want the named anchor.
2 Do one of the following:
• Select Insert > Named Anchor.
• Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).
• In the Common category of the Insert panel, click the Named Anchor button.
3 In the Anchor Name box, type a name for the anchor, and click OK. (The anchor name can’t contain spaces).
The anchor marker appears at the insertion point.
Note: If you do not see the anchor marker, select View > Visual Aids > Invisible Elements.
Link to a named anchor
1 In the Document window’s Design view, select text or an image to create a link from.
2 In the Link box of the Property inspector, type a number sign (#) and the name of the anchor. For example, to link
to an anchor named “top” in the current document, type #top. To link to an anchor named “top” in a different
document in the same folder, type filename.html#top.
Note: Anchor names are case-sensitive.
Link to a named anchor using the Point-To-File method
1 Open the document containing the named anchor.
Note: If you don’t see the anchor, select View > Visual Aids > Invisible Elements to make it visible.
2 In the Document window’s Design view, select text or an image you want to link from. (If this is another open
document, you must switch to it.)
3 Do one of the following:
• Click the Point-To-File icon (target icon) to the right of the Link box in the Property inspector and drag it to
the anchor you want to link to: either an anchor within the same document or an anchor in another open
document.
Last updated 6/3/2015
340
Linking and navigation
• Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an
anchor within the same document or an anchor in another open document.
Create an e-mail link
An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when
clicked. In the e-mail message window, the To box is automatically updated with the address specified in the e-mail link.
Create an e-mail link using the Insert Email Link command
1 In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or
select the text or image you want to appear as the e-mail link.
2 Do one of the following to insert the link:
• Select Insert > Email Link.
• In the Common category of the Insert panel, click the Email Link button.
3 In the Text box, type or edit the body of the e-mail.
4 In the Email box, type the e-mail address, then click OK.
Create an e-mail link using the Property inspector
1 Select text or an image in the Document window’s Design view.
2 In the Link box of the Property inspector, type mailto: followed by an e-mail address.
Do not type any spaces between the colon and the e-mail address.
Auto-populate the subject line of an e-mail
1 Create an e-mail link using the Property inspector as outlined above.
2 In the Link box of the Property inspector, add ?subject= after the email, and type a subject after the equals sign. Do
not type any spaces between the question mark and the end of the e-mail address.
The complete entry would look as follows:
mailto:someone@yoursite.com?subject=Mail from Our Site
Create null and script links
A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. For instance, you can
attach a behavior to a null link so that it swaps an image or displays an absolutely-positioned element (AP element)
when the pointer moves over the link.
Script links execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information
about an item without leaving the current web page. Script links can also be used to perform calculations, validate
forms, or do other processing tasks when a visitor clicks a specific item.
Create a null link
1 Select text, an image, or an object in the Document window’s Design view.
2 In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon) in the
Link box.
Last updated 6/3/2015
341
Linking and navigation
Create a script link
1 Select text, an image, or an object in the Document window’s Design view.
2 In the Link box of the Property inspector, type javascript: followed by some JavaScript code or a function call. (Do
not type a space between the colon and the code or call.)
Update links automatically
Dreamweaver can update links to and from a document whenever you move or rename the document within a local
site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk.
Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote
server.
To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the
links in your local folder. The cache file is updated invisibly as you add, change, or delete links on your local site.
Enable automatic link updates
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the Preferences dialog box, select General from the category list on the left.
3 In the Document Options section of the General preferences, select an option from the Update Links When Moving
Files pop-up menu.
Always Automatically updates all links to and from a selected document whenever you move or rename it.
Never Does not automatically update all links to and from a selected document when you move or rename it.
Prompt Displays a dialog box that lists all the files affected by the change. Click Update to update the links in these
files, or click Don’t Update to leave the files unchanged.
4 Click OK.
Create a cache file for your site
1 Select Site > Manage Sites.
2 Select a site, and then click Edit.
3 In the Site Setup dialog box, expand Advanced Settings and select the Local Info category.
4 In the Local Info category, select Enable Cache.
The first time you change or delete links to files in your local folder after starting Dreamweaver, Dreamweaver
prompts you to load the cache. If you click Yes, Dreamweaver loads the cache and updates all the links to the file you
just changed. If you click No, the change is noted in the cache, but Dreamweaver does not load the cache or update
links.
It may take a few minutes to load the cache on larger sites because Dreamweaver must determine whether the cache
is up to date by comparing the timestamps of the files on the local site against the timestamps recorded in the cache.
If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.
Re-create the cache
❖ In the Files panel, select Site > Advanced > Recreate Site Cache.
Last updated 6/3/2015
342
Linking and navigation
Change a link sitewide
In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually
change all links (including e-mail, FTP, null, and script links) so that they point somewhere else.
This option is most useful when you want to delete a file that other files link to, but you can use it for other purposes.
For example, suppose you link the words “this month’s movies” to /movies/july.html throughout your site. On August
1 you would change those links so that they point to /movies/august.html.
1 Select a file in the Local view of the Files panel.
Note: If you are changing an e-mail, FTP, null, or script link, you do not need to select a file.
2 Select Site > Change Link Sitewide.
3 Complete these options in Change Link Sitewide dialog box:
Change All Links To Click the folder icon
to browse to and select the target file from which to unlink. If you are
changing an e-mail, FTP, null, or script link, type the full text of the link you are changing.
Into Links to Click the folder icon
to browse to and select the new file to link to. If you are changing an e-mail,
FTP, null, or script link, type the full text of the replacement link.
4 Click OK.
Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path
format already used in the document (for example, if the old path was document-relative, the new path is also
document-relative).
After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it).
You can safely delete it without breaking any links in your local Dreamweaver site.
Note: Because these changes occur locally, you must manually delete the corresponding orphan file in the remote folder
and put or check in any files in which links were changed; otherwise, visitors to your site won’t see the changes.
Test links in Dreamweaver
Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the
Document window.
❖ Do one of the following:
• Select the link and select Modify > Open Linked Page.
• Press Control (Windows) or Command (Macintosh) and double-click the link.
Note: The linked document must reside on your local disk.
More Help topics
Video tutorial: How to add hyperlinks to the whole or part of an image
Absolute, document-relative, and site root-relative paths
Creating links tutorial
Applying built-in JavaScript behaviors
Working with Dreamweaver sites
Fix broken links
Last updated 6/3/2015
343
Linking and navigation
Apply a behavior
Find broken, external, and orphaned links
Jump menus
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About jump menus
A jump menu is a pop-up menu in a document, visible to your site visitors, listing links to documents or files. You can
create links to documents in your website, links to documents on other websites, e-mail links, links to graphics, or links
to any file type that can be opened in a browser.
Each option in a jump menu is associated with a URL. When users choose an option, they are redirected (“jump”) to
the associated URL. Jump menus are inserted within the Jump Menu form object.
A jump menu can contain three components:
• (Optional) A menu selection prompt, such as a category description for the menu items, or instructions, such as
“Choose one”.
• (Required) A list of linked menu items: a user selects an option and a linked document or file opens.
• (Optional) A Go button.
Insert a jump menu
1 Open a document, and then place the insertion point in the Document window.
2 Do one of the following:
• Select Insert > Form > Jump Menu.
• In the Forms category of the Insert panel, click the Jump Menu button.
3 Complete the Insert Jump menu dialog box and click OK. Here is a partial list of options:
Plus and Minus buttons Click Plus to insert an item; click Plus again to add another one. To delete an item, select it
and click Minus.
Arrow buttons Select an item and click the arrows to move it up or down in the list.
Text Type the name of an unnamed item. If your menu includes a selection prompt (such as “Choose one”), type it
here as the first menu item (if so, you must also choose the Select First Item After URL Change option at the bottom).
When Selected Go To URL Browse to the target file or type its path.
Open URLs In Specify whether to open the file in the same window or in a frame. If the frame you want to target
doesn’t appear in the menu, close the Insert Jump Menu dialog box and name the frame.
Insert Go Button After Menu Select to insert a Go button rather than a menu selection prompt.
Select First Item After URL Change Select if you inserted a menu selection prompt (“Choose one”) as the first menu
item.
Last updated 6/3/2015
344
Linking and navigation
Edit jump menu items
You can change the order of items in the menu or the file an item links to, and you can add, delete, or rename an item.
To change the location in which a linked file opens, or to add or change a menu selection prompt, you must apply the
Jump Menu behavior from the Behaviors panel.
1 Open the Property inspector (Window > Properties) if it isn’t already open.
2 In the Document window’s Design view, click the jump menu object to select it.
3 In the Property inspector, click the List Values button.
4 Use the List Values dialog box to make your changes to the menu items, and then click OK.
Troubleshooting jump menus
After a user selects a jump menu item, there is no way to reselect that menu item if the user navigates back to that page,
or if the Open URL In box specifies a frame. There are two ways to work around this problem:
• Use a menu selection prompt, such as a category, or a user instruction, such as “Choose one”. The menu selection
prompt is reselected automatically after each menu selection.
• Use a Go button, which allows a user to revisit the currently chosen link. When you use a Go button with a jump
menu, the Go button becomes the only mechanism that “jumps” the user to the URL associated with the selection
in the menu. Selecting a menu item in the jump menu no longer re-directs the user automatically to another page
or frame.
Note: Select only one of these options per jump menu, in the Insert Jump Menu dialog box, because they apply to an entire
jump menu.
More Help topics
Apply the Jump Menu behavior
Apply the Jump Menu Go behavior
View and set frame properties and attributes
Navigation bars
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About navigation bars
The navigation bar feature has been deprecated as of Dreamweaver CS5.
Adobe recommends using the Spry Menu Bar widget if you want to create a navigation bar.
More Help topics
Working with the Spry Menu Bar widget
Last updated 6/3/2015
345
Linking and navigation
Image maps
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About image maps
An image map is an image that has been divided into regions called hotspots; when a user clicks a hotspot, an action
occurs (for example, a new file opens).
Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as
server-side image maps do. When a site visitor clicks a hotspot in the image, the associated URL is sent directly to the
server. This makes client-side image maps faster than server-side image maps, because the server does not need to
interpret where the visitor clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later versions,
NCSA Mosaic 2.1 and 3.0, and all versions of Internet Explorer.
Dreamweaver does not alter references to server-side image maps in existing documents; you can use both client-side
image maps and server-side image maps in the same document. However, browsers that support both types of image
maps give priority to client-side image maps. To include a server-side image map in a document, you must write the
appropriate HTML code.
Insert client-side image maps
When you insert a client-side image map, you create a hotspot area and then define a link that opens when a user clicks
the hotspot area.
Note: You can create multiple hotspot areas, but they are part of the same image map.
1 In the Document window, select the image.
2 In the Property inspector, click the expander arrow in the lower-right corner to see all properties.
3 In the Map Name box, enter a unique name for the image map. If you are using multiple image maps in the same
document, make sure each map has a unique name.
4 To define the image map areas, do one of the following:
• Select the circle tool
• Select the rectangle tool
and drag the pointer over the image to create a circular hotspot.
and drag the pointer over the image to create a rectangular hotspot.
• Select the polygon tool
and define an irregularly shaped hotspot by clicking once for each corner point. Click
the arrow tool to close the shape.
After you create the hotspot, the hotspot Property inspector appears.
5 In the hotspot Property inspector’s Link box, click the folder icon
to browse to and select the file you want to
open when the user clicks the hotspot, or type the path.
6 In the Target pop-up menu, select the window in which the file should open or type its name.
The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame
that doesn’t exist, the linked page loads into a new window that has the name you specified. You can also select from
the following reserved target names:
• _blank loads the linked file into a new, unnamed browser window.
• _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame
containing the link is not nested, the linked file loads into the full browser window.
Last updated 6/3/2015
346
Linking and navigation
• _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t
need to specify it.
• _top loads the linked file into the full browser window, thereby removing all frames.
Note: The target option isn’t available until the selected hotspot contains a link.
7 In the Alt box, type alternative text for display in text-only browsers or browsers that download images manually.
Some browsers display this text as a tooltip when the user moves the pointer over the hotspot.
8 Repeat steps 4 through 7 to define additional hotspots in the image map.
9 When you finish mapping the image, click a blank area in the document to change the Property inspector.
Modify image map hotspots
You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a
hotspot forward or back in an absolutely-positioned element (AP element).
You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image
and paste them on another image; hotspots associated with the image are also copied to the new document.
Select multiple hotspots in an image map
1 Use the pointer hotspot tool to select a hotspot.
2 Do one of the following:
• Shift-click the other hotspots you want to select.
• Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.
Move a hotspot
1 Use the pointer hotspot tool to select the hotspot.
2 Do one of the following:
• Drag the hotspot to a new area.
• Use the Control + arrow keys to move a hotspot by 10 pixels in the selected direction.
• Use the arrow keys to move a hotspot by 1 pixel in the selected direction.
Resize a hotspot
1 Use the pointer hotspot tool
to select the hotspot.
2 Drag a hotspot selector handle to change the size or shape of the hotspot.
Troubleshooting links
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Find broken, external, and orphaned links
Use the Check Links feature to search for broken links and orphaned files (files that still exist in the site but that aren’t
linked to by any other files in the site). You can search an open file, a portion of a local site, or an entire local site.
Last updated 6/3/2015
347
Linking and navigation
Dreamweaver verifies links only to documents within the site; Dreamweaver compiles a list of external links in the
selected document or documents but does not verify them.
You can also identify and delete files that are no longer used by other files in your site.
Check links in the current document
1 Save the file to a location within your local Dreamweaver site.
2 Select File > Check Page > Links.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
3 In the Link Checker panel, select External Links from the Show pop-up menu to view another report.
The External Links report appears in the Link Checker panel (in the Results panel group).
You can check for orphaned files when you check links across an entire site.
4 To save the report, click the Save Report button in the Link Checker panel. The report is a temporary file; it will be
lost if you don’t save it.
Check links in part of a local site
1 In the Files panel, select a site from the Current Sites pop-up menu.
2 In Local view, select the files or folders to check.
3 Initiate the check by doing one of the following:
• Right-click (Windows) or Control-click (Macintosh) one of the selected files, and then select Check Links >
Selected Files/Folders from the context menu.
• Select File > Check Page > Links.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
4 In the Link Checker panel, select External Links from the Show pop-up menu to view another report.
The External Links report appears in the Link Checker panel (in the Results panel group).
You can check for orphaned files when you check links across an entire site.
5 To save a report, click the Save Report button in the Link Checker panel.
Check links across the entire site
1 In the Files panel, select a site from the Current Sites pop-up menu.
2 Select Site > Check Links Sitewide.
The Broken Links report appears in the Link Checker panel (in the Results panel group).
3 In the Link Checker panel, select External Links or Orphaned Files from the Show pop-up menu to view another
report.
A list of files that fit the report type you selected appears in the Link Checker panel.
Note: If you select Orphaned Files as your report type, you can delete orphaned files from the Link Checker panel directly
by selecting a file from the list and pressing the Delete key.
4 To save a report, click the Save Report button in the Link Checker panel.
Last updated 6/3/2015
348
Linking and navigation
Fix broken links
After you run a links reports, you can fix broken links and image references directly in the Link Checker panel, or you
can open files from the list and fix links in the Property inspector.
Fix links in the Link Checker panel
1 Run a link check report.
2 In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select
the broken link.
A folder icon appears next to the broken link.
3 Click the folder icon next
to the broken link and browse to the correct file, or type the correct path and filename.
4 Press Tab or Enter (Windows) or Return (Macintosh).
If there are other broken references to this same file, you are prompted to fix the references in the other files as well.
Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have
Dreamweaver update the current reference only.
Note: If Enable File Check In And Check Out is enabled for the site, Dreamweaver attempts to check out files that require
changes. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references
unchanged.
Fix links in the Property inspector
1 Run a link check report.
2 In the Link Checker panel (in the Results panel group), double-click an entry in the File column.
Dreamweaver opens the document, selects the broken image or link, and highlights the path and filename in the
Property inspector. (If the Property inspector is not visible, select Window > Properties to open it.)
3 To set a new path and filename in the Property inspector, click the folder icon
to browse to the correct file, or
type over the highlighted text.
If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in
the Property inspector or click the Refresh button to reset the height and width values.
4 Save the file.
As links are fixed, their entries disappear from the Link Checker list. If an entry still appears in the list after you enter
a new path or filename in the Link Checker (or after you save changes in the Property inspector), Dreamweaver
cannot find the new file and still considers the link broken.
More Help topics
Identify and delete unused files
Last updated 6/3/2015
349
Chapter 9: Previewing
Preview and inspect web pages on multiple devices
Dreamweaver now lets you test your production-ready web pages simultaneously on multiple devices. You can see how
your web page reflows in various form factors and also test interactive features on your pages. All these without having
to install any mobile app or having to physically connect the devices to your desktop! Simply scan the auto generated
QR code with your devices and preview your web pages on the devices.
Live inspect, when triggered on desktop, reflects on all connected devices and helps you inspect various elements and
tweak the design as required.
Prerequisites
Ensure that you have a QR code scanner installed on your devices.
Ensure that your desktop and mobile devices are connected to the
Internet and are on the same network.
Ensure that you have your Adobe ID credentials handy. You need the
Adobe ID that you use for Dreamweaver on your desktop to log in to
the devices during the preview.
If you are an enterprise customer, check if you have the required
permissions to access the Device Preview service.
On the devices, ensure that JavaScript and cookies are enabled in the
browser settings.
Supported devices
All Android and iOS devices
Last updated 6/3/2015
350
Previewing
Preview web pages on devices
1 On your desktop computer, launch Dreamweaver, and open the web page that you want to preview on devices.
2 Click the Device Preview icon in the document toolbar.
The Device Preview pop-up appears with a QR code and a short URL.
3 Scan the QR code with the mobile device on which you want to preview the web document. To connect multiple
devices, scan the QR code with each of those devices.
Alternatively, you can copy (using the copy button) the short link that is displayed and paste it in a browser on your
desktop.
4 On the devices, a login screen appears. Log in using your Adobe ID credentials. Ensure that you use the same Adobe
ID that you use for Dreamweaver/Creative Cloud.
Last updated 6/3/2015
351
Previewing
5 After a successful login, the names of the connected devices appear in the Device Preview pop-up. And, you will see
a preview of your web page on the connected devices.
Note: To map the device names in the pop-up with the actual device, hover your mouse on the device names. A feedback
screen appears on the corresponding device.
Inspect web pages on devices
• To inspect the web page on all the connected devices, click the Inspect icon in Dreamweaver.
Last updated 6/3/2015
352
Previewing
• To inspect the web page on a specific device, click the inspect icon that corresponds to the device name in the
Device Preview pop-up. The viewport in Dreamweaver is set to match the viewport on the corresponding device
and inspect is triggered on that specific device and Dreamweaver.
Click the Inspect icon in Dreamweaver again to exit the Inspect mode.
All the edits that you do to your web page on the desktop are reflected immediately on the devices after they are
committed.
Troubleshoot issues with Device Preview
If you run into issues while connecting your devices or previewing your web pages on devices, see the information in
the article Device Preview - Troubleshooting .
Previewing pages
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do.
Live view presents a more accurate depiction, and lets you work in Code view so that you can see changes to the design.
The Preview in Browser feature lets you see how your pages will look in specific browsers.
Previewing pages in Dreamweaver
About Live view
Live view differs from the traditional Dreamweaver design view in that it provides a more realistic rendering of what
your page will look like in a browser, which is also editable. Live view does not replace the Preview in Browser
command, but rather provides another way of seeing what your page looks like “live” without having to leave the
Dreamweaver workspace.
Last updated 6/3/2015
353
Previewing
You can switch to Live view any time you are in Design view. Switching to Live view, however, is not related to switching
between any of the other traditional views in Dreamweaver (Code/Split/Design). When you switch to Live view from
Design view, you are simply toggling the Design view between editable and “live”.
While Design view remains frozen once you enter Live view, Code view remains editable, so you can change your code,
and then refresh Live view to see your changes take effect. When you’re in Live view, you have the additional option of
viewing live code. Live Code view is like Live view in that it displays a version of the code that the browser is executing
in order to render the page. Like Live view, Live Code view is a non-editable view.
An additional advantage of Live view is the ability to freeze JavaScript. For example, you can switch to Live view and
hover over Spry-based table rows that change color as the result of user interaction. When you freeze JavaScript, Live
view freezes the page in its current state. You can then edit your CSS or JavaScript and refresh the page to see the
changes take effect. Freezing JavaScript in Live view is useful if you want to see and change properties for the different
states of pop-up menus or other interactive elements that you can’t see in traditional Design view.
More Help topics
Edit in Live View
Preview pages in Live view
1 Make sure that you are in Design view (View > Design) or Code and Design views (View > Code and Design).
2 Click the Live view button.
3 (Optional) Make your changes in Code view, in the CSS Styles panel, in an external CSS style sheet, or in another
related file.
Even though you can’t edit in Live view, your options for making edits in other areas (for example, in the CSS Styles
panel or in Code view) change as you click in Live view.
You can work with related files (such as CSS style sheets) while keeping Live view in focus by opening the related file
from the Related Files toolbar at the top of the document.
4 If you’ve made changes in Code view or in a related file, refresh Live view by clicking the Refresh button in the
Document tool bar, or by pressing F5.
5 To return to the editable Design view, click the Live view button again.
Preview Live Code
The code displayed in Live Code view is similar to what you would see if you viewed the page source from a browser.
While such page sources are static, providing you with only the source of the page from the browser, Live Code view is
dynamic, and updates as you interact with the page in Live view.
1 Make sure that you are in Live view.
2 Click the Live Code button.
Dreamweaver displays the live code that the browser would use to execute the page. The code is highlighted in
yellow and is uneditable.
When you interact with interactive elements on the page, Live Code highlights the dynamic changes in the code.
3 To turn off highlighting for changes in Live Code view, choose View > Live View Options > Highlight Changes in
Live Code.
Last updated 6/3/2015
354
Previewing
4 To return to the editable Code view, click the Live Code button again.
To change Live Code preferences, choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh
OS), and select the Code Coloring category.
Freeze JavaScript
Do one of the following:
• Press F6
• Select Freeze JavaScript from the Live View button’s pop-up menu.
An info bar at the top of the document tells you that JavaScript is frozen. To close the info bar, click the close link.
Live view options
Besides the Freeze JavaScript option, there are some other options available from the Live View button’s pop-up menu,
or from the View > Live View Options menu item.
Freeze JavaScript Freezes elements affected by JavaScript in their current state.
Disable JavaScript Disables JavaScript and re-renders the page as it would look if a browser did not have JavaScript
enabled.
Disable Plug-ins Disables plug-ins and re-renders the page as it would look if a browser did not have plug-ins enabled.
Highlight Changes in Live Code Turns highlighting for changes in Live Code off or on.
Edit the Live View Page in a New Tab Lets you open new tabs for site documents you browse to using the Browser
Navigation toolbar or the Follow Link(s) feature. You must browse to the document first, then select Edit the Live View
Page in a New Tab to create a new tab for it.
Follow Link Makes the next link you click in Live View active. Alternatively you can Control-click a link in Live view
to make it active.
Follow Links Continuously Makes links in Live View continuously active until you disable them again, or close the page.
Automatically Sync Remote Files Automatically syncs the local and remote file when you click the Refresh icon in the
Browser Navigation toolbar. Dreamweaver puts your file to the server before refreshing so that both files are in sync.
Use Testing Server for Document Source Used mainly by dynamic pages (such as ColdFusion pages), and selected by
default for dynamic pages. When this option is selected, Dreamweaver uses the version of the file on the site’s testing
server as the source for the Live view display.
Use Local Files for Document Links The default setting for non-dynamic sites. When this option is selected for dynamic
sites that use a testing server, Dreamweaver uses the local versions of files that are linked to the document (for example,
CSS and JavaScript files), instead of the files on the testing server. You can then make local changes to related files so
that you can see how they look before putting them to the testing server. If this option is deselected, Dreamweaver uses
the testing server versions of related files.
HTTP Request Settings Takes you to an advanced settings dialog box where you can enter values for displaying live
data. For more information, click the Help button in the dialog box.
Previewing pages in browsers
Last updated 6/3/2015
355
Previewing
Preview in a browser
You can preview a page in a browser at any time; you don’t have to upload it to a web server first. When you preview a
page, all browser-related functions should work, including JavaScript behaviors, document-relative and absolute links,
ActiveX® controls, and Netscape Navigator plug-ins, provided that you installed the required plug-ins or ActiveX
controls in your browsers.
Before previewing a document, save the document; otherwise, the browser does not display your most recent changes.
1 Do one of the following to preview the page:
• Select File > Preview In Browser, and then select one of the listed browsers.
Note: If no browsers are listed, select Edit > Preferences or Dreamweaver > Preferences (Macintosh), and then select
the Preview In Browser category on the left to select a browser.
• Press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser.
• Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary
browser.
2 Click links and test content in your page.
Note: Content linked with a site root-relative path does not appear when you preview documents in a local browser
unless you specify a testing server, or select the Preview Using Temporary File option in Edit > Preferences >
Preview In Browser. This is because browsers don’t recognize site roots—servers do.
To preview content linked with root-relative paths, put the file on a remote server, and then select File > Preview In
Browser to view it.
3 Close the page in the browser when you finish testing.
Set browser preview preferences
You can set preferences for the browser to use when previewing a site and define default primary and secondary
browsers.
1 Select File > Preview In Browser > Edit Browser List.
2 To add a browser to the list, click the Plus (+) button, complete the Add Browser dialog box, and then click OK.
3 To delete a browser from the list, select the browser, and then click the Minus (-) button.
4 To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and
then click OK.
5 Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the primary
or secondary browser.
F12 (Windows) or Option+F12 (Macintosh) opens the primary browser; Control+F12 (Windows) or
Command+F12 (Macintosh) opens the secondary browser.
6 Select Preview Using Temporary File to create a temporary copy for previewing and server debugging. (Deselect this
option if you want to update the document directly.)
More Help topics
Browser Navigation toolbar overview
Switch between views in the Document window
Open Related Files
Last updated 6/3/2015
356
Previewing
Live View video tutorial
Site root–relative paths
Working with Device Central and Dreamweaver
Last updated 6/3/2015
357
Chapter 10: Coding
General information about coding in Dreamweaver
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Supported languages
In addition to text-editing capabilities, Adobe Dreamweaver provides various features, such as code hints, to help you
code in the following languages:
• HTML
• XHTML
• CSS
• JavaScript
• ColdFusion Markup Language (CFML)
• VBScript (for ASP)
• C# and Visual Basic (for ASP.NET)
• JSP
• PHP
Other languages, such as Perl, are not supported by the language-specific coding features in Dreamweaver; for example,
you can create and edit Perl files, but code hints don’t apply to that language.
Invalid markup
If your document contains invalid code, Dreamweaver displays that code in Design view and optionally highlights it in
Code view. If you select the code in either view, the Property inspector displays information about why it’s invalid and
how to fix it.
Note: The option to highlight invalid code in Code view is turned off by default. To turn it on, switch to Code View (View
> Code) and then select View > Code View Options > Highlight Invalid Code.
You can also specify preferences for automatically rewriting various kinds of invalid code when you open a document.
Automatic code modification
You can set options that instruct Dreamweaver to automatically clean up your hand-written code according to criteria
that you specify. However, your code is never rewritten unless the code rewriting options are enabled or you perform
an action that changes the code. For example, Dreamweaver does not alter your white space or change the case of
attributes unless you use the Apply Source Formatting command.
A few of these code rewriting options are enabled by default.
Last updated 6/3/2015
358
Coding
The Roundtrip HTML capabilities in Dreamweaver let you move your documents back and forth between a text-based
HTML editor and Dreamweaver with little or no effect on the content and structure of the document’s original HTML
source code. These capabilities include the following:
• Use a third-party text editor to edit the current document.
• By default, Dreamweaver does not make changes in code created or edited in other HTML editors, even if the code
is invalid, unless you enable code-rewriting options.
• Dreamweaver does not change tags it doesn’t recognize—including XML tags—because it has no criteria by which
to judge them. If an unrecognized tag overlaps another tag (for example,
text), Dreamweaver marks it as an error but doesn’t rewrite the code.
• Optionally, you can set Dreamweaver to highlight invalid code in Code view (in yellow). When you select a
highlighted section, the Property inspector displays information on how to correct the error.
XHTML code
Dreamweaver generates new XHTML code and cleans up existing XHTML code in a way that meets most of the
XHTML requirements. The tools that you need to meet the few XHTML requirements that remain are also provided.
Note: Some of the requirements also are required in various versions of HTML.
The following table describes the XHTML requirements that Dreamweaver meets automatically:
XHTML requirement
Actions Dreamweaver performs
There must be a DOCTYPE declaration in the document prior to the
Adds an XHTML DOCTYPE to an XHTML document:
root element, and the declaration must reference one of the three
Document Type Definition (DTD) files for XHTML (strict, transitional, or
frameset).
Or, if the XHTML document has a frameset:

The root element of the document must be html, and the html
element must designate the XHTML namespace.
Adds the namespace attribute to the html element, as follows:
A standard document must have the head, title, and body structural
elements. A frameset document must have the head, title, and
frameset structural elements.
In a standard document, includes the head, title, and body elements.
In a frameset document, includes the head, title, and frameset
elements.
All elements in the document must nest properly:
Generates correctly nested code and, when cleaning up XHTML,
corrects nesting in code that was not generated by Dreamweaver.
This is a bad example.
This is a good
example.

All element and attribute names must be lowercase.

Forces HTML element and attribute names to be lowercase in the
XHTML code that it generates and when cleaning up XHTML,
regardless of your tag and attribute case preferences.
Every element must have a closing tag, unless it is declared in the DTD Inserts closing tags in the code that it generates, and when cleaning
as EMPTY.
up XHTML.
Empty elements must have a closing tag, or the opening tag must end Inserts empty elements with a space before the closing slash in empty
with />. For example,
is not valid; the correct form is

tags in the code that it generates, and when cleaning up XHTML.
or
. Following are the empty elements: area, base, basefont, br,
col, frame, hr, img, input, isindex, link, meta, and param.
And for backwards-compatibility with browsers that are not XMLenabled, there must be a space before the /> (for example,
, not

).
Last updated 6/3/2015
359
Coding
XHTML requirement
Actions Dreamweaver performs
Attributes can’t be minimized; for example, tag.
When you select this option, Dreamweaver does not write line breaks after a tag, even if the
formatting in the Tag Library indicates that the line break should be there.
Advanced Formatting Lets you set formatting options for Cascading Style Sheets(CSS) code and for individual tags
and attributes in the Tag Library Editor.
White Space Character (Japanese version only) Lets you select either or Zenkaku space for HTML code. The
white space selected in this option will be used for empty tags when creating a table and when the “Allow Multiple
Consecutive Spaces” option is enabled in Japanese Encoding pages.
Set the code rewriting preferences
Use the code rewriting preferences to specify how and whether Dreamweaver modifies your code while opening
documents, when copying and pasting form elements, and when entering attribute values and URLs using tools such
as the Property inspector. These preferences have no effect when you edit HTML or scripts in Code view.
If you disable the rewriting options, invalid-markup items are displayed in the Document window for HTML that it
would have rewritten.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Code Rewriting from the Category list on the left.
3 Set any of the following options:
Fix Invalidly Nested and Unclosed Tags Rewrites overlapping tags. For example, text is rewritten as
text. This option also inserts closing quotation marks and closing brackets if they are missing.
Rename Form Items When Pasting Ensures you don’t have duplicate names for form objects. This option is enabled
by default.
Last updated 6/3/2015
366
Coding
Note: Unlike the other options in this preferences dialog box, this option does not apply when you open a document,
only when you copy and paste a form element.
Remove Extra Closing Tags Deletes closing tags that have no corresponding opening tag.
Warn When Fixing Or Removing Tags Displays a summary of technically invalid HTML that Dreamweaver
attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you
can find the correction and ensure that it’s rendering as intended.
Never Rewrite Code: In Files With Extensions Allows you to prevent Dreamweaver from rewriting code in files with
the specified filename extensions. This option is particularly useful for files that contain third-party tags.
Encode <, >, &, And " In Attribute Values Using & Ensures that attribute values that you enter or edit using
Dreamweaver tools such as the Property inspector contain only legal characters. This option is enabled by default.
Note: This option and the following options do not apply to URLs that you type in Code view. Also, they do not cause
existing code already in a file to change.
Do Not Encode Special Characters Prevents Dreamweaver from changing URLs to use only legal characters. This
option is enabled by default.
Encode Special Characters In URL Using &# Ensures that when you enter or edit URLs using Dreamweaver tools
such as the Property inspector, those URLs contain only legal characters.
Encode Special Characters In URL Using % Operates the same way as the preceding option, but uses a different
method of encoding special characters. This encoding method (using the percent sign) may be more compatible
with older browsers, but doesn’t work as well with characters from some languages.
Set the color theme for Code View
Use the code coloring preferences to specify a theme for Code View. You can customize the theme by choosing different
color shemes for backgrounds, foregrounds, and hidden characters.
For each listed document type, you can customize the colors for different categories of tags and code elements, such as
form-related tags or JavaScript identifiers. For example, with the Raven theme applied to all document types, you can
choose to have a blue color for form-related tags in only HTML documents.
All custom settings in a theme are saved when you click Apply and the customized theme is available for use across
Dreamweaver sessions.
Note: To set color preferences for a specific tag, edit the tag definition in the Tag Library editor.
Customize themes
The default theme is Classic. To change the theme or to customize a theme, peform the following steps:
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Code Coloring from the Category list on the left.
3 Select a theme from the Themes list.
Last updated 6/3/2015
367
Coding
4 If you want to customize the theme, perform the following steps:
a To change the background colors, use the following options:
Default background sets the default background color for Code view and the Code inspector.
Hidden characters sets the color for hidden characters.
Live Code background sets the background color for Live Code view. The default color is yellow.
Live Code changes sets the highlighting color of code that changes in Live Code view. The default color is pink.
Read only background sets the background color for read only text.
Selection background sets the background color for the selected code.
Selection foreground sets the foreground color for the selected code.
b To change the coloring scheme of specific tag categories or code elements, select a document type from the
Document type list. Then, click Edit Theme Colors.
Note: Any edits you make to code coloring scheme of a selected document type will affect all documents of this
type.
In the Edit Coloring Scheme dialog box, select a code element from the Styles For list, and set its text color,
background color, and (optional) style (bold, italic, or underline). The sample code in the Preview pane changes
to match the new colors and styles.
Last updated 6/3/2015
368
Coding
c To revert to the factory default settings of a theme, click Restore Defaults.
5 Click Apply to save the changes.
You can keep the customized code themes synchronized between your Dreamweaver instances using the Sync Settings
option in Preferences. For more information, see Synchronizing Dreamweaver settings with Creative Cloud.
Add themes to the default list
If you want a customized theme to appear in the default theme list, perform the following steps:
1 Copy and paste Themes.xml to your desktop from the following location:
• On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes
• On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/
2 Open Themes.xml in Notepad and add the following line before the closing tag :

3 Replace the Themes.xml file in the following location with the file you edited:
• On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes
• On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/
4 To specify the color scheme for your theme, reuse the XML files for the existing themes in the following locations:
• On Win: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes
• On Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/
For example, copy Raven.xml and defaultColorsRaven.xml, and then rename the copied files to MyTheme.xml and
defaultColorsMyTheme.xml.
Last updated 6/3/2015
369
Coding
5 Relaunch Dreamweaver and check the default themes list (Preferences > Code Coloring) to see if your theme is
listed.
Use an external editor
You can specify an external editor to use for editing files with specific filename extensions. For example, you can start
a text editor such as BBEdit, Notepad, or TextEdit from Dreamweaver to edit JavaScript (JS) files.
You can assign different external editors for different filename extensions.
Set an external editor for a file type
1 Select Edit > Preferences.
2 Select File Types/Editors from the Category list on the left, set the options, and click OK.
Open In Code View Specifies the filename extensions that automatically open in Code view in Dreamweaver.
External Code Editor Specifies the text editor to use.
Reload Modified Files Specifies the behavior when Dreamweaver detects that changes were made externally to a
document that is open in Dreamweaver.
Save On Launch Specifies whether Dreamweaver should always save the current document before starting the
editor, never save the document, or prompt you to ask whether to save or not each time you start the external editor.
Fireworks Specifies editors for various media file types.
Start an external code editor
❖ Select Edit > Edit with External Editor.
More Help topics
Viewing code
Coding toolbar overview
Set code hints preferences
Format CSS code
Set code hints preferences
Clean up Microsoft Word HTML files
Set code hints preferences
Customize code coloring preferences for a template
Edit libraries, tags, and attributes
Preview Live Code
Set code hints preferences
Open files in Code view by default
Last updated 6/3/2015
370
Coding
Writing and editing code
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Code hints
The code hints feature helps you insert and edit code quickly and without mistakes. As you type characters in Code
view, you see a list of candidates that automatically complete your entry. For example, when you type the first characters
of a tag, attribute, or CSS property name, you see a list of options beginning with those characters. This feature
simplifies the insertion and editing of code. You can also use it to see the available attributes for a tag, the available
parameters for a function, or the available methods for an object.
Code hints are available for several kinds of code. When you type the beginning character of a particular code type, you
see a list of appropriate candidates. For example, to display a list of code hints for HTML tag names, type a right angle
bracket (<). Similarly, to display JavaScript code hinting, type a period (dot operator) after an object.
For best results, especially when using code hints for functions and objects, set the Delay option in the Code Hints
preferences dialog box to 0 seconds.
The code hinting feature also recognizes custom JavaScript classes that are not built in to the language. You can write
these custom classes yourself or add them through third-party libraries like Prototype.
The list of code hints disappears when you press Backspace (Windows) or Delete (Macintosh).
For a video tutorial on code hinting, see www.adobe.com/go/lrvid4048_dw.
For a video overview from the Dreamweaver engineering team about JavaScript support in Dreamweaver, see
www.adobe.com/go/dw10javascript.
Supported languages and technologies
Dreamweaver supports code hinting for the following languages and technologies:
• Adobe ColdFusion
• Ajax
• ASP JavaScript
• ASP.NET C#
• ASP.NET VB
• ASP VBScript
• CSS2 and CSS3
• DOM (Document Object Model)
• HTML4 and HTML5
• jQuery (CS5.5 and later)
• JavaScript (includes custom class hinting)
• JSP
• PHP MySQL
• Spry
Last updated 6/3/2015
371
Coding
Display a code hints menu
The code hints menu appears automatically as you type in Code view. But you can also display the code hints menu
manually, without typing.
1 In Code view (Window > Code), place the insertion point inside a tag.
2 Press Control+Spacebar.
Insert code in Code view by using code hints
1 Type the beginning of a piece of code. For example, to insert a tag, type a right angle bracket (<). To insert an
attribute, place the insertion point immediately after a tag name and press Spacebar.
A list of items (such as tag names or attribute names) appears.
To close the list at any time, press Esc.
2 Scroll through the list by using the scroll bar or the Up Arrow and Down Arrow keys.
3 To insert an item from the list, double-click it, or select it and press Enter (Windows) or Return (Macintosh).
If a recently created CSS style doesn’t appear in a code hints list of CSS styles, select Refresh Style List from the code
hints list. If Design view is visible, sometimes invalid code appears in Design view temporarily after you select
Refresh Style List. To remove that invalid code from Design view, press F5 to refresh after you finish inserting the style.
4 To insert a closing tag, type ) of the opening
tag. Alternatively, the default behavior can be to insert no closing tag at all. Select Edit > Preferences > Code Hints, and
then select one of the Close Tags options.
Edit a tag by using code hints
• To replace an attribute with a different attribute, delete the attribute and its value. Then add an attribute and its value
as described in the previous procedure.
• To change a value, delete the value, and then add a value as described in the previous procedure.
Refreshing JavaScript code hints
Dreamweaver automatically refreshes the list of available code hints as you work in JavaScript files. For example,
suppose you are working in a primary HTML file and switch to a JavaScript file to make a change. That change is
reflected in the list of code hints when you return to the primary HTML file. However, automatic updating works only
if you edit your JavaScript files in Dreamweaver.
If you edit your JavaScript files outside Dreamweaver, press Control+period to refresh the JavaScript code hints.
Code hinting and syntax errors
Code hints sometimes don’t work properly if Dreamweaver detects syntax errors in your code. Dreamweaver alerts you
to syntax errors by displaying information about them in a bar at the top of the page. The Syntax Error Information Bar
displays the first line of code on which Dreamweaver encounters the error. As you fix errors, Dreamweaver continues
to display any errors that occur later.
Dreamweaver provides additional help by highlighting (in red) the line numbers where syntax errors occur. The
highlight appears in the Code view of the file that contains the error.
Last updated 6/3/2015
372
Coding
Dreamweaver displays syntax errors not only for the current page but also for related pages. For example, suppose you
are working on an HTML page that uses an included JavaScript file. If the included file contains an error, Dreamweaver
displays an alert for the JavaScript file as well. You can easily open the related file containing the error by clicking its
name at the top of the document.
You can disable the Syntax Error Information Bar by clicking the Syntax Error Alerts button in the Coding toolbar.
Set code hints preferences
You can change default preferences for code hints. For example, if you don’t want to show CSS property names or Spry
code hints, you can deselect them in code hints preferences. You can also set preferences for code hint delay time and
closing tags.
Even if code hints are disabled, you can still display a pop-up hint in Code view by pressing Control+Spacebar.
1 Select Edit > Preferences.
2 Select Code Hints from the Category list on the left.
3 Set any of the following options:
Close Tags Specifies how you want Dreamweaver to insert closing tags. By default, Dreamweaver inserts the closing
tag automatically after you type the characters ) of the opening tag, or so that no closing tag is inserted at all.
Enable Code Hints Displays code hints while you enter code in Code view. Drag the Delay slider to set the time in
seconds before appropriate hints are displayed.
Enable Description Tooltips Displays an extended description (if available) of the selected code hint.
Menus Sets exactly which type of code hints you want displayed while typing. You can use all or some of the menus.
Site-specific code hints
Dreamweaver CS5 lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code
hints as they write in Code view. To display these code hints, you first need to create a configuration file using the SiteSpecific Code Hints dialog box. The configuration tells Dreamweaver where to look for code hints that are specific to
your site.
For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_en.
Create the configuration file
Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in
Dreamweaver.
By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver
CS5\configuration\Shared\Dinamico\Presets directory.
Last updated 6/3/2015
373
Coding
Note: The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code
hints to display, the page you are working on must reside in the currently selected site.
1 Select Site > Site-Specific Code Hints.
By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System
(CMS) framework you’re using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and
Wordpress.
The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework
structures.
Note: You cannot delete or rename the existing default framework structures.
2 In the sub-root text box, specify the sub-root folder where you store your framework’s files. You can click the folder
icon next to the text box to browse to the framework files’ location.
Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and/or files you
want to scan are all displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.
3 Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add
Files/Folders dialog box, you can specify particular file extensions that you want to include.
Note: Specifying particular file extensions speeds up the scanning process.
4 To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the
Files window.
Note: If Drupal or Joomla is the selected framework, the Site-Specific Code Hints dialog box displays an additional path
to a file within your Dreamweaver configuration folder. Don’t delete this—it’s required when using these frameworks.
5 To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do
one of the following:
• Select Scan This Folder to include the selected folder in the scan.
• Select Recursive to include all files and folders within a selected directory.
• Click the Extensions button to open the Find Extensions dialog box, where you can specify the file extensions
you want included in your scan for a particular file or folder.
Save site structure
You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.
1 Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.
2 Click the Save Structure button in the upper right-hand corner of the dialog box.
3 Specify a name for your site structure and click Save.
Note: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you
want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Rename site structures
When renaming your site structure, keep in mind that you cannot use the names of any of the three default site
framework structures, or the word “custom”.
1 Display the structure that you want to rename.
2 Click the Rename Structure icon button in the upper right-hand corner of the dialog box.
Last updated 6/3/2015
374
Coding
3 Specify a new name for the structure and click Rename.
Note: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you
want to overwrite the structure with the same name. You cannot overwrite any of the default framework structures.
Add files or folders to a site structure
You can add any files or folders that are associated with your framework. After that, you can specify the file extensions
of the files you want to scan. (See the next section.)
1 Click the plus (+) button above the Files window to open the Add File/Folder dialog box.
2 In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon
next to the text box to browse to a file or folder.
3 Click the plus (+) button above the Extensions window to specify the file extensions of files you want to scan.
Note: Specifying particular file extensions speeds up the scanning process.
4 Click Add.
Scan a site for file extensions
Use the Find Extensions dialog box to view and edit file extensions that are included in the site structure.
1 In the Site-Specific Code Hints dialog box, click the Extensions button.
The Find Extensions dialog box lists the current scannable extensions.
2 To add another extension to the list, click the plus (+) button above the Extensions window.
3 To delete an extension from the list, click the minus (-) button.
Insert code using the Coding toolbar
1 Make sure you are in Code view (View > Code).
2 Position the insertion point in the code, or select a block of code.
3 Click a button in the Coding toolbar, or select an item from a pop-up menu in the toolbar.
To find out what each button does, position the pointer over it until a tooltip appears. The Coding toolbar displays
the following buttons by default:
Open Documents Lists the documents that are open. When you select one, it is displayed in the Document window.
Show Code Navigator Displays the Code Navigator. For more information, see Navigate to related code.
Expand All Restores all collapsed code.
Select Parent Tag Selects the content and surrounding opening and closing tags of the line in which you’ve placed
the insertion point. If you repeatedly click this button, and your tags are balanced, Dreamweaver eventually selects
the outermost html and /html tags.
Balance Braces Selects the content and surrounding parentheses, braces, or square brackets of the line in which you
placed the insertion point. If you repeatedly click this button, and your surrounding symbols are balanced,
Dreamweaver eventually selects the outermost braces, parentheses, or brackets in the document.
Line Numbers Lets you hide or show numbers at the beginning of each line of code.
Word Wrap Wraps all the text in Code view so that it appears within the defined space of the view.
Highlight Invalid Code Highlights invalid code in yellow.
Last updated 6/3/2015
375
Coding
Note: This option is not available for HTML, CSS, and JS files. Use linting in these files to find potential errors in code.
Syntax Error Alerts in Info Bar Enables or disables an information bar at the top of the page that alerts you to syntax
errors. When Dreamweaver detects a syntax error, the Syntax Error Information Bar specifies the line in the code
where the error occurs. Additionally, Dreamweaver highlights the error’s line number on the left side of the
document in Code view. The info bar is enabled by default, but only appears when Dreamweaver detects syntax
errors in the page.
Note: This option is not available for HTML, CSS, and JS files. Use linting in these files to find potential errors in code.
Apply Comment Lets you wrap comment tags around selected code, or open new comment tags.
• Apply HTML Comment wraps the selected code with , or opens a new tag if no code is selected.
• Apply // Comment inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single
// tag if no code is selected.
• Apply /* */ wraps the selected CSS or JavaScript code with /* and */.
• Apply ' Comment is for Visual Basic code. It inserts a single quotation mark at the beginning of each line of a
Visual Basic script, or inserts a single quotation mark at the insertion point if no code is selected.
• When you are working in a ASP, ASP.NET, JSP, PHP, or ColdFusion file and you select the Apply Server
Comment option, Dreamweaver automatically detects the correct comment tag and applies it to your selection.
Remove Comment Removes comment tags from the selected code. If a selection includes nested comments, only
the outer comment tags are removed.
Wrap Tag Wraps selected code with the selected tag from the Quick Tag Editor.
Recent Snippets Lets you insert a recently used code snippet from the Snippets panel. For more information, see
Work with code snippets.
Move or Convert CSS Lets you move CSS to another location, or convert inline CSS to CSS rules. For more
information, see Move/export CSS rulesand Convert inline CSS to a CSS rule .
Indent Code Shifts the selection to the right.
Outdent Code Shifts the selection to the left.
Format Source Code Applies previously specified code formats to selected code, or to the entire page if no code is
selected. You can also quickly set code formatting preferences by selecting Code Formatting Settings from the
Format Source Code button, or edit tag libraries by selecting Edit Tag Libraries.
The number of buttons available in the Coding toolbar varies depending on the size of the Code view in the
Document window. To see all of the available buttons, resize the Code view window or click the expander arrow at
the bottom of the Coding toolbar.
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Hidden Characters, and Auto
Indent) or hide buttons that you don’t want to use. To do this, however, you must edit the XML file that generates
the toolbar. For more information, see Extending Dreamweaver.
Note: The option to view hidden characters, which is not a default button in the Coding toolbar, is available from the
View menu (View > Code View Options > Hidden Characters).
Insert code with the Insert panel
1 Position the insertion point in the code.
2 Select an appropriate category in the Insert panel.
3 Click a button in the Insert panel or select an item from a pop-up menu in the Insert panel.
Last updated 6/3/2015
376
Coding
When you click an icon, the code may appear in your page immediately, or a dialog box may appear requesting more
information to complete the code.
To find out what each button does, position the pointer over it until a tooltip appears. The number and type of
buttons available in the Insert panel varies depending on the current document type. It also depends on whether
you’re using Code view or Design view.
Although the Insert panel provides a collection of frequently used tags, it is not comprehensive. To choose from a
more comprehensive selection of tags, use the Tag Chooser.
Insert code using Emmet
Emmet is a plug-in that allows high-speed coding and generation of HTML and CSS code. You can now use Emmet
abbreviations in Code View or Code Inspector in Dreamweaver and press the Tab key to expand these abbreviations
into HTML markups or CSS. HTML abbreviations expand in HTML and PHP pages. CSS abbreviations expand in CSS,
LESS, Sass, SCSS pages or within the style tag in an HTML page.
Following are a few examples on how to use Emmet abbreviations in Code View. For detailed information and
reference, see the Emmet documentation.
Note: Dreamweaver currently supports only Emmet 1.0 abbreviations.
Example 1: Inserting HTML code using Emmet
To quickly add HTML code for an unordered list with three elements, open the HTML file and type the following
Emmet abreviation in Code view within :
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
Now, ensure that the cursor is placed right after the Emmet abbreviation and press Tab to expand the abbreviation.
Alternatively, select the entire abbreviation and then press Enter.
The abbreviation expands to the following code:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis
ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat
corrupti velit cupiditate eligendi tempora temporibus vel.
Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus
eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem
asperiores excepturi sapiente enim architecto esse.
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit,
voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione
eaque ad illum porro dignissimos sit eos.
Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur
ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium
consequatur provident totam vero velit nobis accusantium!

Example 2: Inserting CSS code using Emmet
Last updated 6/3/2015
377
Coding
To insert CSS code for creating border radius with vendor prefixes, open your CSS file and type the following Emmet
abbrevation:
-bdrs
When you press Tab, the abbreviation expands to the following code:
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
Insert tags with the Tag Chooser
Use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries (which include ColdFusion and
ASP.NET tag libraries).
1 Position the insertion point in the code, right-click (Windows) or Control-click (Macintosh), and select Insert Tag.
The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the right pane shows the
individual tags in the selected tag library folder.
2 Select a category of tags from the tag library, or expand the category and select a subcategory.
3 Select a tag from the right pane.
4 To view syntax and usage information for the tag in the Tag Chooser, click the Tag Info button. If available,
information about the tag appears.
5 To view the same information about the tag in the Reference panel, click the icon. If available, information about
the tag appears.
6 To insert the selected tag into your code, click Insert.
If the tag appears in the right pane with angle brackets (for example, ), it doesn’t require additional
information, and it’s immediately inserted into the document at the insertion point.
If the tag does require additional information, a tag editor appears.
7 If a tag editor opens, enter the additional information, and click OK.
8 Click the Close button.
Insert HTML comments
A comment is descriptive text that you insert in HTML code to explain the code or provide other information. The text
of the comment appears only in Code view and is not displayed in a browser.
Insert a comment at the insertion point
❖ Select Insert > Comment.
In Code view, a comment tag is inserted and the insertion point is placed in the middle of the tag. Type your
comment.
In Design view, the Comment dialog box appears. Enter the comment and click OK.
Last updated 6/3/2015
378
Coding
Display comment markers in Design view
❖ Select View > Visual Aids > Invisible Elements.
Make sure that the Comments option is selected in the Invisible Elements preferences or the comment marker does
not appear.
Edit an existing comment
• In Code view, find the comment and edit its text.
• In Design view, select the Comment marker, edit the comment’s text in the Property inspector, and then click in the
Document window.
Copy and paste code
1 Copy the code from Code view or from another application.
2 Place the insertion point in Code view, and select Edit > Paste.
Preview images and colors in Code view
After you insert the relevant code for images and colors, you can preview them right within Code view.
• Image preview
• Color preview
Image preview
Hover your mouse over any image URL to see a preview of the image in Code view. You can preview images that are
referenced as any of the following:
• url();
• data-uri()
• Src attribute value of img tag
Dreamweaver also shows image previews of remotely hosted images. For example, . If Dreamweaver is unable to display
the preview for remote paths, the message "Unable to load image" is displayed.
You can get a preview for the following image file types:
• JPEG
• JPG
• PNG
• GIF
• SVG
Last updated 6/3/2015
379
Coding
Color preview
Hover your mouse over color values to preview colors in Code View. The following are the supported formats:
• 3 and 6 digits Hexadecimal color values: #ff0000;
• RGB: rgb(0, 0, 0);
• RGBA: rgba(0, 255, 228,0.5);
• HSL: hsl(120, 100%, 50%);
• HSLA: hsla(120, 60%, 70%, 0.3);
• Pre-defined color names, such as, Olive, Teal, red.
Press Control + Spacebar to see the color picker and change the color values quickly.
Color preview is available in all document types for the above color formats.
Analyze code
Dreamweaver supports linting, which is the process of analyzin code for potential errors. The Output panel lists the
errors and warnings detected through linting. For more information, see Lint code .
In addition, Dreamweaver also shows a quick error preview in the line number column of the erroneous line. The line
number is displayed in red to indicate that it contains errors, and when you hover over it, a brief description of the error
is displayed.
Last updated 6/3/2015
380
Coding
Note:Only the first error in the line is displayed. If the line contains only a warning, the description of the warning is
displayed. If the line contains a warning and an error, only the error description is displayed.
Edit tags with Tag editors
Use Tag editors to view, specify, and edit the attributes of tags.
1 Right-click (Windows) or Control-click (Macintosh) a tag in Code view or an object in Design view, and select Edit
Tag from the pop-up menu. (The contents of this dialog box change depending on the selected tag.)
2 Specify or edit attributes for the tag and click OK.
To get more information about the tag within the Tag editor, click Tag Info.
Edit code with the Coding context menu
1 In Code view, select some code and right-click (Windows) or Control-click (Macintosh).
2 Select the Selection submenu, and select any of the following options:
Expand All Restores all collapsed code.
Apply HTML Comment Wraps the selected code with , or opens a new tag if no code is selected.
Apply /* */ Comment Wraps the selected CSS or JavaScript code with /* and */.
Apply // Comment Inserts // at the beginning of each line of selected CSS or JavaScript code, or inserts a single //
tag if no code is selected.
Apply ' Comment Inserts a single quotation mark at the beginning of each line of a Visual Basic script, or inserts a
single quotation mark at the insertion point if no code is selected.
Apply Server Comment Wraps the selected code. When you are working in a ASP, ASP.NET, JSP, PHP, or
ColdFusion file and you select the Apply Server Comment option, Dreamweaver automatically detects the correct
comment tag and applies it to your selection.
Apply Backslash-comment Hack Wraps the selected CSS code with comment tags that will cause Internet Explorer
5 for Macintosh to ignore the code.
Apply Caio Hack Wraps the selected CSS code with comment tags that will cause Netscape Navigator 4 to ignore
the code.
Remove Comment Removes comment tags from the selected code. If a selection includes nested comments, only
the outer comment tags are removed.
Remove Backslash-comment Hack Removes comment tags from the selected CSS code. If a selection includes
nested comments, only the outer comment tags are removed.
Remove Caio Hack Removes comment tags from the selected CSS code. If a selection includes nested comments,
only the outer comment tags are removed
Convert Tabs to Spaces Converts each tab in the selection to a number of spaces equal to the Tab Size value set in
Code Format preferences. For more information, see Change the code format.
Convert Spaces To Tabs Converts runs of spaces in the selection to tabs. Each run of spaces that has a number of
spaces equal to the tab size is converted to one tab.
Indent Indents the selection, shifting it to the right. For more information, see Indent code blocks.
Outdent Shifts the selection to the left.
Last updated 6/3/2015
381
Coding
Remove All Tags Removes all the tags in the selection.
Convert Lines To Table Wraps the selection in a table tag with no attributes.
Add Line Breaks Adds a br tag at the end of each line of the selection.
Convert To Uppercase Converts all letters in the selection (including tag and attribute names and values) to
uppercase.
Convert To Lowercase Converts all letters in the selection (including tag and attribute names and values) to
lowercase.
Convert Tags To Uppercase Converts all tag and attribute names and attribute values in the selection to uppercase.
Convert Tags To Lowercase Converts all tag and attribute names and attribute values in the selection to lowercase.
Edit a server-language tag with the Property inspector
Edit the code in a server-language tag (such as an ASP tag) without entering Code view by using the code Property
inspector.
1 In Design view, select the server-language tag visual icon.
2 In the Property inspector, click the Edit button.
3 Make changes to the tag code, and click OK.
Indent code blocks
As you write and edit code in Code view or the Code inspector, you can change the indentation level of a selected block
or line of code, shifting it right or left by one tab.
Indent the selected block of code
• Press Tab.
• Select Edit > Indent Code.
Unindent the selected block of code
• Press Shift+Tab.
• Select Edit > Outdent Code.
Navigate to related code
The Code Navigator displays a list of code sources related to a particular selection on your page. Use it to navigate to
related code sources, such as internal and external CSS rules, server-side includes, external JavaScript files, parent
template files, library files, and iframe source files. When you click a link in the Code Navigator, Dreamweaver opens
the file containing the relevant piece of code. The file appears in the related files area, if it is enabled. If you don’t have
related files enabled, Dreamweaver opens the selected file as a separate document in the Document window.
If you click a CSS rule in the Code Navigator, Dreamweaver takes you directly to that rule. If the rule is internal to the
file, Dreamweaver displays the rule in Split view. If the rule is in an external CSS file, Dreamweaver opens the file and
displays the rule in the related files area above the main document.
You can access the Code Navigator from Design, Code, and Split views, as well as from the Code inspector.
For a video overview from the Dreamweaver engineering team about working with the Code Navigator, see
www.adobe.com/go/dw10codenav.
Last updated 6/3/2015
382
Coding
For a video tutorial on working with Live View, related files, and the Code Navigator, see
www.adobe.com/go/lrvid4044_dw.
Open the Code Navigator
❖ Alt+click (Windows) or Command+Option+Click (Macintosh) anywhere on the page. The Code Navigator displays
links to the code affecting the area you clicked.
Click outside the Code Navigator to close it.
Note: You can also open the Code Navigator by clicking the Code Navigator indicator
insertion point on your page when the mouse has been idle for 2 seconds.
. This indicator appears near the
Navigate to code with the Code Navigator
1 Open the Code Navigator from the area of the page that you’re interested in.
2 Click the piece of code you want to go to.
The Code Navigator groups related code sources by file and lists the files alphabetically. For example, suppose that CSS
rules in three external files affect the selection in your document. In this case, the Code Navigator lists those three files
as well as the CSS rules relevant to the selection. For CSS related to a given selection, the Code Navigator functions like
the CSS Styles panel in Current Mode.
When you hover over links to CSS rules, the Code Navigator displays tool tips of the properties in the rule. These tool
tips are useful when you want to distinguish between many rules that share the same name.
Disable the Code Navigator indicator
1 Open the Code Navigator.
2 Select Disable Indicator in the lower-right corner.
3 Click outside the Code Navigator to close it.
To re-enable the Code Navigator indicator, Alt+Click (Windows) or Command+Option+Click (Macintosh) to open
the Code Navigator and deselect the Disable Indicator option.
Go to a JavaScript or VBScript function
In Code view and the Code inspector, you can view a list of all of the JavaScript or VBScript functions in your code and
jump to any one of them.
1 View the document in Code view (View > Code) or the Code inspector (Window > Code Inspector).
2 Do one of the following:
• In Code view, right-click (Windows) or Control-click (Macintosh) anywhere in Code view, and select the
Functions submenu from the context menu.
The Functions submenu does not appear in Design view.
Any JavaScript or VBScript functions in your code appear in the submenu.
To see the functions listed in alphabetical order, Control-right-click (Windows) or Option-Control-click (Macintosh)
in Code view, and then select the Functions submenu.
• In the Code inspector, click the Code Navigation button ({ }) on the toolbar.
3 Select a function name to jump to the function in your code.
Last updated 6/3/2015
383
Coding
Extract JavaScript
The JavaScript Extractor (JSE) removes all or most of the JavaScript from your Dreamweaver document, exports it to
an external file, and links the external file to your document. The JSE can also remove event handlers such as onclick
and onmouseover from your code and then unobtrusively attach the JavaScript associated with those handlers to your
document.
You should be aware of the following limitations of the JavaScript Extractor before using it:
• The JSE does not extract script tags in the body of the document (except in the case of Spry widgets). There is a
chance that externalizing these scripts could cause unexpected results. By default, Dreamweaver lists these scripts
in the Externalize JavaScript dialog box, but does not select them for extraction. (You can manually select them if
you want.)
• The JSE does not extract JavaScript from editable regions of .dwt (Dreamweaver template) files, non-editable regions
of template instances, or Dreamweaver Library items.
• After you extract JavaScript using the Externalize JavaScript and Attach Unobtrusively option, you can no longer
edit Dreamweaver behaviors in the Behaviors panel. Dreamweaver cannot inspect and populate the Behaviors panel
with behaviors that it has attached unobtrusively.
• You cannot undo your changes once you close the page. You can, however, undo changes as long as you remain in
the same editing session. Select Edit > Undo Externalize JavaScript to undo.
• Some very complex pages might not work as expected. Use care when extracting JavaScript from pages with
document.write() in the body and global variables.
For a video overview from the Dreamweaver engineering team about JavaScript support in Dreamweaver, see
www.adobe.com/go/dw10javascript.
To use the JavaScript Extractor:
1 Open a page that contains JavaScript (for example, a Spry page).
2 Select Commands > Externalize JavaScript.
3 In the Externalize JavaScript dialog box, edit the default selections if necessary.
• Select Only Externalize JavaScript if you want Dreamweaver to move any JavaScript to an external file, and to
reference that file in the current document. This option leaves event handlers such as onclick and onload in the
document, and leaves Behaviors visible in the Behaviors panel.
• Select Externalize JavaScript and Attach Unobtrusively if you want Dreamweaver to 1) move JavaScript to an
external file and reference it in the current document, and 2) remove event handlers from the HTML and insert
them at runtime using JavaScript. When you select this option, you can no longer edit Behaviors in the Behaviors
panel.
• In the Edit column, deselect any edits you do not want to make, or select edits that Dreamweaver did not select
by default.
By default, Dreamweaver lists but does not select the following edits:
• Script blocks in the head of the document that contain document.write() or document.writeln() calls.
• Script blocks in the head of the document that contain function signatures related to EOLAS handling code,
which is known to use document.write().
• Script blocks in the body of the document, unless the blocks contain only Spry widget or Spry data set
constructors.
• Dreamweaver automatically assigns IDs to elements that don’t already have IDs. If you don’t like these IDs, you
can change them by editing the ID text boxes.
Last updated 6/3/2015
384
Coding
4 Click OK.
The summary dialog provides a summary of extractions. Review the extractions and click OK.
5 Save the page.
Dreamweaver creates a SpryDOMUtils.js file, as well as another file that contains the extracted JavaScript.
Dreamweaver saves the SpryDOMUtils.js file in a SpryAssets folder in your site, and saves the other file at the same
level as the page from which you extracted the JavaScript. Don’t forget to upload both of these dependent files to your
web server when you upload the original page.
Work with code snippets
Code snippets let you store content for quick reuse. You can create, insert, edit, or delete snippets of HTML, JavaScript,
CFML, ASP, PHP, and more. You can also manage and share your code snippets with team members. Some predefined
snippets that you can use as a starting point are available.
Insert a code snippet
1 Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around.
2 In the Snippets panel (Window > Snippets), double-click the snippet.
You can also right-click (Windows) or Control-click (Macintosh) the snippet, and then select Insert from the pop-up
menu.
Create a code snippet
1 In the Snippets panel, click the New Snippet icon at the bottom of the panel.
2 Enter a name for the snippet.
Note: Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or
double quotes (“).
3 (Optional) Enter a text description of the snippet. This makes it easier for other team members to use the snippet.
4 (Optional) Select a Preview Type: Code or Design.
Design Renders the code and displays it in the Preview pane of the Snippets panel.
Code Displays the code in the Preview pane.
5 Click OK.
Edit or delete a code snippet
❖ In the Snippets panel, select a snippet, and click the Edit Snippet button or the Remove button at the bottom of the
panel.
Create code snippet folders and manage code snippets
1 In the Snippets panel, click the New Snippet Folder button at the bottom of the panel.
2 Drag snippets to the new folder or other folders, as desired.
Add or edit a keyboard shortcut for a snippet
1 In the Snippets panel, right-click (Windows) or Control-click (Macintosh) and select Edit Keyboard Shortcuts.
The Keyboard Shortcuts Editor appears.
Last updated 6/3/2015
385
Coding
2 In the Commands pop-up menu, select Snippets.
A list of snippets appears.
3 Select a snippet and assign a keyboard shortcut to it.
For more information, see Customize keyboard shortcuts.
Share a snippet with other members of your team
1 Find the file corresponding to the snippet that you want to share in the Configuration/Snippets folder in the
Dreamweaver application folder.
2 Copy the snippet file to a shared folder on your computer or a network computer.
3 Have the other members of the team copy the snippet file to their Configuration/Snippets folder.
Search for tags, attributes, or text in code
You can search for specific tags, attributes, and attribute values. For example, you can search for all img tags that have
no alt attribute.
You can also search for specific text strings that are within or not within a set of container tags. For example, you can
search for the word Untitled contained in a title tag to find all the untitled pages on your site.
1 Open the document to search in, or select documents or a folder in the Files panel.
2 Select Edit > Find And Replace.
3 Specify which files to search in, and then specify the kind of search to perform, and text or tags to search for.
Optionally, specify replacement text as well. Then click one of the Find buttons or one of the Replace buttons.
4 Click the Close button.
5 To search again without displaying the Find And Replace dialog box, press F3 (Windows) or Command+G
(Macintosh).
Save and recall search patterns
You can save search patterns and reuse them later.
Save a search pattern
1 In the Find And Replace dialog box (Edit > Find And Replace), set the parameters for the search.
2 Click the Save Query button (the disk icon).
3 In the dialog box that appears, navigate to the folder where you want to save queries. Then type a filename that
identifies the query, and click Save.
For example, if the search pattern involves looking for img tags with no alt attribute, you might name the query
img_no_alt.dwr.
Note: Saved queries have the filename extension .dwr. Some saved queries from older versions of Dreamweaver may
have the extension .dwq.
Recall a search pattern
1 Select Edit > Find And Replace.
2 Click the Load Query button (the folder icon).
Last updated 6/3/2015
386
Coding
3 Navigate to the folder where your queries are saved. Then select a query file and click Open.
4 Click Find Next, Find All, Replace, or Replace All to initiate the search.
Use language-reference material
The Reference panel provides you with a quick reference tool for markup languages, programming languages, and CSS
styles. It provides information on the specific tags, objects, and styles that you are working with in Code view (or the
Code inspector). The Reference panel also provides example code that you can paste into your documents.
Open the Reference panel
1 Do one of the following in Code view:
• Right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword, and then select Reference from
the context menu.
• Place the insertion point in a tag, attribute, or keyword, and then press Shift+F1.
The Reference panel opens and displays information about the tag, attribute, or keyword you clicked.
2 To adjust the text size in the Reference panel, select Large Font, Medium Font, or Small Font from the options menu
(the small arrow at the upper right of the panel).
Paste example code into your document
1 Click anywhere in example code in the reference content.
The entire code example is highlighted.
2 Select Edit > Copy, and then paste the example code into your document in Code view.
Browse the reference content in the Reference panel
1 To display tags, objects, or styles from another book, select a different book from the Book pop-up menu.
2 To view information about a specific item, select it from the Tag, Object, Style, or CFML pop-up menu (depending
on which book you selected).
3 To view information about an attribute of the selected item, select the attribute from the pop-up menu next to the
Tag, Object, Style, or CFML pop-up menu.
This menu contains the list of attributes for the item you select. The default selection is Description, which displays
a description of the chosen item.
Last updated 6/3/2015
387
Coding
Print code
You can print your code to edit it offline, archive it, or distribute it.
1 Open a page in Code view.
2 Select File > Print Code.
3 Specify printing options, and then click OK (Windows) or Print (Macintosh).
Video tutorial
How to code HTML5 and CSS faster (30 min)
Build the structure of a tile-based web page using tag highlighting, line number highlighting, CSS selector code hinting,
and code completion.
More Help topics
Use the hints menu in the Quick Tag Editor
W3C Document Object Model
Code hinting tutorial
Verify tags and braces are balanced
Coding toolbar overview
Display toolbars
Use the Insert panel
About Dreamweaver tag libraries
Copy and move collapsed code fragments
Collapse and expand code fragments
Set up your computer for application development
Open Related Files
Code Navigator tutorial
Building Spry pages visually
Regular expressions
Search for and replace text
Regular expressions
Search for and replace text
Collapsing code
You can collapse and expand code fragments so that you can view different sections of your document without having
to use the scroll bar. For example, to see all of the CSS rules in the head tag that apply to a div tag farther down the page,
you can fold all the code between the head tag and the div tag so that you can see both sections of code at once.
Last updated 6/3/2015
388
Coding
You can collapse code in HTML, PHP, XML, and SVG files based on tag blocks. In CSS, LESS, Sass, SCSS, and JS files,
you can collapse code based on curly braces.
• HTML files: The code between an opening and closing HTML tag is collapsed and the initial attributes, wherever
applicable, are displayed in the collapsed code. The collapsed code block is auto expanded when the code within the
block receives focus through Tag Selector, Find & Replace, Go To Line, Element Quick View, Live View, or
Undo/Redo. Once the selection in these features changes, the code is automatically collapsed back again.
• CSS, LESS, SASS, SCSS, and JS files: Code within curly brackets is collapsed and the preview is displayed as {...}.
• PHP files: HTML elements, CSS, and JS code blocks are collapsed in addition to PHP code blocks. You can collapse
any PHP code block that begins with .
Note: Files created from Dreamweaver templates display all code as fully expanded, even if the template file (.dwt) contains
collapsed code fragments.
Collapse and expand code fragments
By default, all the code in Code view is in expanded mode. You can specify the minimum number of lines for code
folding in Preferences.
Note: The collapsed or expanded states of code blocks are retained across Dreamweaver sessions.
1 In Code view, hover your mouse over the line number column that corresponds to the code block you want to
collapse or expand . A small triangle appears next to the line numbers.
2 Click the triangle to collapse or expand the code.
To expand all the collapsed code in the document, you can use the keyboard shortcut Control+Alt+E (Win);
Command+Alt+E (Mac).
Copy and move collapsed code fragments
You can copy and paste collapsed code fragments in the same document, or in other documents and applications. You
can also move collapsed code fragments by dragging them in Code view.
Copy and paste a collapsed code fragment
1 Click the collapsed code fragment to select it.
2 Select Edit > Copy.
3 Place the cursor at the point where you want to paste the code.
4 Select Edit > Paste.
Drag a collapsed code fragment
1 Click the collapsed code fragment to select it.
2 Drag the selection to the new location.
To drag a copy of the selection, Control-drag (Windows) or Alt-drag (Macintosh).
Note: You cannot drag code fragments to other documents.
Last updated 6/3/2015
389
Coding
Specify the code folding size
The default code folding size is two lines. This means, when you collapse code, all the code fragments that have at least
two lines of code are collapsed. Code fragments that are lesser than two lines are displayed in the expanded mode.
You can change the minimum number of lines for code folding in Preferences.
1 Click Edit > Preferences (Win) or Dreamweaver > Preferences (Mac).
2 Click Code Format in the Category list and specify the minimum code folding size.
Lint code
Whether you are a rookie or an experienced coder, there are always chances of errors creeping in to your code
inadvertently or due to lack of knowledge. When the web page or even a portion of it doesn't look like what you
expected, you are forced to debug code to find any syntax or logical errors. Debugging can be an extremely strenuous
and a time-consuming process especially in cases of complex implementations.
Dreamweaver makes debugging code for common errors simple and easy with the help of linting. Linting is the process
of analyzing code to flag potential errors or suspicious usage of code. HTML syntax errors, parsing errors in CSS, or
warnings in JavaScript files are some of the things flagged by linting in Dreamweaver.
The errors and warnings found are listed in a separate (Output) panel docked at the bottom of the workspace. Each line
in the panel helps you jump to the portion of the code where the error has occurred, making it easy to find and fix the
code. Also, the line numbers of the erroneous code are highlighted in red for errors and yellow for warnings. When you
hover your mouse over the highlighted line numbers, a preview of the error or warning pops-up.
You can lint HTML, CSS, and JavaScript files in Dreamweaver using the following process:
1 Specify linting rules by editing the HTML, CSS, and JS configuration files. See Specify linting rules for more
information.
2 Enable linting and specify when the linting should be triggered. You can lint files when they are loaded, saved, or
edited. See Enable linting and set preferences for more information.
Errors and warnings found in the files are displayed in the output panel. For more information, see Linting results and
the Output panel .
Enable linting and set preferences
Click Edit > Preferences (Win) or Dreamweaver > Preferences (Mac). Select Linting in the Category list.
• Select Enable Linting.
• Specify one or more triggers for linting. You can trigger linting when the file gets loaded, saved, and/or edited.
Specify linting rules
You can lint HTML, CSS, and JS files by editing the linting rules in the corresponding configuration files:
• HTML: DW.htmlhintrc
• CSS: DW.csslintrc
• JS: DW.jshintrc
Last updated 6/3/2015
390
Coding
To access and edit these files, perform the following steps:
1 Click Edit > Preferences (Win) or Dreamweaver > Preferences (Mac).
2 Select Linting in the Category list.
3 In the Edit Rule Set section, click the required file type and click Edit & Apply Changes.
The corresponding configuration file opens in Dreamweaver.
4 Edit or add linting rules to the configuration files. Refer to the following documentation for more information on
linting rules:
• HTML Linter: https://github.com/yaniswang/HTMLHint/wiki/Rules
• CSS Linter: https://github.com/CSSLint/csslint/wiki/Rules
• JS Linter: http://jshint.com/docs/options/
In these configuration files, you can also set the type of errors or warnings to be displayed. In JS configuration files,
you can also set the maximum number of errors to be found.
Linting results and the Output panel
The linting results - errors and warnings - are listed in the Output panel. The Output panel is available in the docked
mode at the bottom of all default workspaces. If the Output panel is closed, you can open it by performing one of the
following actions:
• By clicking the linting status icon in the Document window status bar
• Using the keyboard shortcut, Shift+F6
• Using Window > Results > Output
The linting icon in the Status bar indicates the linting results:
•
Red - The current document has errors and warnings
•
Yellow - The current document has warnings only
•
Green - The current document has no errors
You can use the linting icon in the Status bar to also toggle the Output panel (open/close) if the icon is red or yellow (not
green).
Last updated 6/3/2015
391
Coding
The lines that contain the errors or warnings are highlighted in red and yellow respectively. You can double click a
message in the Output panel to jump to the line where the error has occurred. In Code view, you can also hover your
mouse over the line numbers of the erroneous lines to see a preview of the error or warning.
The Output panel lists 50 messages at a time with the errors listed before warnings. As and when you fix the errors, the
list in the panel scrolls to display the next set of error.
Optimize code
Clean up code
You can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable
HTML or XHTML code.
For information on how to clean up HTML generated from a Microsoft Word document, see Open and edit existing
documents.
1 Open a document:
• If the document is in HTML, select Commands > Clean Up HTML.
• If the document is in XHTML, select Commands > Clean Up XHTML.
For an XHTML document, the Clean Up XHTML command fixes XHTML syntax errors, sets the case of tag
attributes to lowercase, and adds or reports the missing required attributes for a tag in addition to performing
the HTML cleanup operations.
2 In the dialog box that appears, select any of the options, and click OK.
Note: Depending on the size of your document and the number of options selected, it may take several seconds to
complete the cleanup.
Remove Empty Container Tags Removes any tags that have no content between them. For example, and
are empty tags, but the tag in some text is not.
Remove Redundant Nested Tags Removes all redundant instances of a tag. For example, in the code This is
what I really wanted to say, the b tags surrounding the word really are redundant and would be
removed.
Remove Non-Dreamweaver HTML Comments Removes all comments that were not inserted by Dreamweaver. For
example, would be removed, but wouldn’t,
because it’s a Dreamweaver comment that marks the beginning of an editable region in a template.
Remove Dreamweaver Special Markup Removes comments that Dreamweaver adds to code to allow documents to
be automatically updated when templates and library items are updated. If you select this option when cleaning up
code in a template-based document, the document is detached from the template. For more information, see Detach
a document from a template.
Remove Specific Tag(s) Removes the tags specified in the adjacent text box. Use this option to remove custom tags
inserted by other visual editors and other tags that you don’t want to appear on your site (for example, blink).
Separate multiple tags with commas (for example, font,blink).
Last updated 6/3/2015
392
Coding
Combine Nested Tags When Possible Consolidates two or more font tags when they control the same range
of text. For example, big red would be changed to big red.
Show Log On Completion Displays an alert box with details about the changes made to the document as soon as the
cleanup is finished.
Verify tags and braces are balanced
You can check to make sure the tags, parentheses (( )), braces ({ }), and square brackets ([ ]) in your page are balanced.
Balanced means that every opening tag, parenthesis, brace, or bracket has a corresponding closing one, and vice versa.
Check for balanced tags
1 Open the document in Code view.
2 Place the insertion point in the nested code you want to check.
3 Select Edit > Select Parent Tag.
The enclosing matching tags (and their contents) are selected in your code. If you keep selecting Edit > Select Parent
Tag, and your tags are balanced, eventually Dreamweaver will select the outermost html and /html tags.
Check for balanced parentheses, braces, or square brackets
1 Open the document in Code view.
2 Place the insertion point in the code you want to check.
3 Select Edit > Balance Braces.
All of the code between the enclosing parentheses, braces, or square brackets is selected. Choosing Edit > Balance
Braces again selects all of the code inside the parentheses, braces, or square brackets that enclose the new selection.
Check for browser compatibility
The Browser Compatibility Check (BCC) feature helps you locate combinations of HTML and CSS that can trigger
browser rendering bugs. This feature also tests the code in your documents for any CSS properties or values that are
unsupported by your target browsers.
Note: This feature replaces the former Target Browser Check feature, but retains the CSS functionality of that feature.
Validate XML documents
You can set preferences for the Validator, the specific problems that the Validator should check for, and the types of
errors that the Validator should report.
1 Do one of the following:
• For an XML or XHTML file, select File > Validate > As XML.
• The Validation tab of the Results panel displays a “No errors or warnings” message or lists the syntax errors it
found.
2 Double-click an error message to highlight the error in the document.
3 To save the report as an XML file, click the Save Report button.
4 To view the report in your primary browser (which lets you print the report), click the Browse Report button.
Last updated 6/3/2015
393
Coding
Validate documents using W3C validator
Dreamweaver helps you create standards-compliant web pages with its in-built support for the W3C validator. The
W3C validator validates your HTML documents for conformance to HTML or XHTML standards. You can validate
both open documents, and files posted on a live server.
Use the report that is generated after validation to fix errors in your file.
Validate an open document
1 Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.
2 Select File > Validate > Validate Current Document (W3C).
Validate a live document
For live documents, Dreamweaver validates code received by the browser. This code is displayed when you right-click
in your browser, and choose the option to view the source code. Validating live documents is especially useful when
validating dynamic pages using PHP, JSP, and so on.
The Validate Live Document option is enabled only when the URL of the page being validated begins with http.
1 Select Window > Results > Validation to open the Validation panel. This panel displays the results of the validation.
2 Click Live View.
3 Select File > Validate > Validate Live Document (W3C).
For live documents, when you double-click an error in the W3C validation panel, a separate window opens. The
window displays the browser-generated code, and the line with the error is highlighted.
Customize validation settings
1 Select Window > Results > Validation to open the Validation panel.
2 In the W3C Validation panel, click the W3C Validation (Play) icon. Select Settings.
3 Select a DOCTYPE for validation if a DOCTYPE has not been explicitly specified for the document.
4 If you do not want errors and warnings displayed, clear the options.
5 Click Manage if you want to delete any warnings or errors that you have hidden using the W3C Validation panel.
When you remove warnings and errors, they are not displayed when you select Show All in the W3C validation
panel.
6 Select Don't Show W3C Validator Notification Dialog if you do not want the W3C Validator Notification dialog
displayed when you begin validation.
Working with validation reports
After validation is complete, the validation reports are displayed in the W3C Validation panel.
• For more information on the error or warning, select the error/warning in the W3C Validation panel. Click More
Info.
• To save the report as an XML file, click Save Report.
• To view the entire report in HTML, click Browse Report. The HTML report provides the complete list of errors and
warnings along with a summary.
• To jump to the location in the code containing the error, select the error in the W3C Validation panel. Click the
Options button, and select Go to Line.
Last updated 6/3/2015
394
Coding
• To hide errors/warnings, select the error/warning. Click the Options button, and select Hide Error.
• To view all the errors and warnings, including the hidden errors, click the Options button. Select Show All. Any
hidden errors and warnings you deleted in the Preferences dialog are not listed.
• To clear all the results in the W3C validation panel, click the Options button. Select Clear Results.
Set Validator preferences
The Validate tags feature has been deprecated as of Dreamweaver CS5. However, Dreamweaver still supports external
code validators that you install as extensions. When you install an external validator extension, Dreamweaver lists its
preferences in the Validator category of the Preferences dialog box.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select W3C Validator from the Category list on the left.
3 Select tag libraries to validate against.
You can’t select multiple versions of the same tag library or language; for example, if you select HTML 4.0, you can’t
also select HTML 3.2 or HTML 2.0. Select the earliest version you want to validate against; for example, if a
document contains valid HTML 2.0 code, it will also be valid HTML 4.0 code.
4 Select Display options for the types of errors and warnings that you want the Validator report to include.
5 Click Apply to apply the changs, and click Close to close the Preferences dialog box.
Make pages XHTML-compliant
When you create a page, you can make it XHTML-compliant. You can also make an existing HTML document
XHTML-compliant.
Create XHTML-compliant documents
1 Select File > New.
2 Select a category and type of page to create.
3 Select one of the XHTML document type definitions (DTD) from the DocType pop-up menu on the far right of the
dialog box, and click Create.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
Note: Not all document types can be made XHTML-compliant.
Create XHTML-compliant documents by default
1 Select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the New Document category.
2 Select a default document and select one of the XHTML document type definitions from the Default Document
Type (DTD) pop-up menu, and click OK.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
Last updated 6/3/2015
395
Coding
Make an existing HTML document XHTML-compliant
1 Open a document, and do one of the following:
• For a document without frames, select File > Convert, and then select one of the XHTML document type
definitions.
For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional or
XHTML 1.0 Strict from the pop-up menu.
• For a document with frames, select a frame and select File > Convert, and then select one of the XHTML
document type definitions.
2 To convert the whole document, repeat this step for every frame and the frameset document.
Note: You can’t convert an instance of a template, because it must be in the same language as the template on which it’s
based. For example, a document based on an XHTML template will always be in XHTML, and a document based on a
non-XHTML-compliant HTML template will always be HTML and can’t be converted to XHTML or any other language.
More Help topics
Change the code format
Set the color theme for Code View
Check for cross-browser CSS rendering issues
XHTML code
Using ColdFusion components
Editing code in Design view
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About editing code in Design view
Dreamweaver lets you visually create and edit web pages without worrying about the underlying source code, but there
are times when you might need to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets
you edit some code while working in Design view.
This section is designed for people who prefer to work in Design view, but who also want quick access to the code.
Selecting child tags in Design view
If you select an object in Design view that contains child tags—for example, an HTML table—you can quickly select
the first child tag of that object by selecting Edit > Select Child.
Note: This command is only enabled in Design view.
For example, the is not valid;
the correct form is .
Inserts full attribute-value pairs in the code that it generates, and
when cleaning up XHTML.
This affects the following attributes: checked, compact, declare, defer, Note: If an HTML browser does not support HTML 4, it might fail to
disabled, ismap, multiple, noresize, noshade, nowrap, readonly, and
interpret these Boolean attributes when they appear in their full form.
selected.
All attribute values must be surrounded by quotation marks.
Places quotation marks around attribute values in the code that it
generates, and when cleaning up XHTML.
The following elements must have an id attribute as well as a name
Sets the name and id attributes to the same value, whenever the name
attribute: a, applet, form, frame, iframe, img, and map. For example, Introduction is not valid; the correct form is
generates, and when cleaning up XHTML.
Introduction or
Introduction.
For attributes with values of an enumerated type, the values must be
lowercase.
Forces enumerated type values to be lowercase in the code that it
generates, and when cleaning up XHTML.
An enumerated type value is a value from a specified list of allowed
values; for example, the align attribute has the following allowed
values: center, justify, left, and right.
All script and style elements must have a type attribute.
(The type attribute of the script element has been required since
HTML 4, when the language attribute was deprecated.)
All img and area elements must have an alt attribute.
Sets the type and language attributes in script elements, and the type
attribute in style elements, in the code that it generates and when
cleaning up XHTML.
Sets these attributes in the code that it generates and, when cleaning
up XHTML, reports missing alt attributes.
Regular expressions
Regular expressions are patterns that describe character combinations in text. Use them in your code searches to help
describe concepts such as lines that begin with “var” and attribute values that contain a number.
The following table lists the special characters in regular expressions, their meanings, and usage examples. To search
for text containing one of the special characters in the table, escape the special character by preceding it with a
backslash. For example, to search for the actual asterisk in the phrase some conditions apply*, your search pattern might
look like this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of “apply” (as well as any of “appl”,
“applyy”, and “applyyy”), not just the ones followed by an asterisk.
Character
Matches
Example
^
Beginning of input or line.
^T matches “T” in “This good earth” but not in
“Uncle Tom’s Cabin”
$
End of input or line.
h$ matches “h” in “teach” but not in “teacher”
*
The preceding character 0 or more times.
um* matches “um” in “rum”, “umm” in
“yummy”, and “u” in “huge”
+
The preceding character 1 or more times.
um+ matches “um” in “rum” and “umm” in
“yummy” but nothing in “huge”
?
The preceding character at most once (that is, st?on matches “son” in “Johnson” and “ston” in
indicates that the preceding character is
“Johnston” but nothing in “Appleton” or
optional).
“tension”
.
Any single character except newline.
Last updated 6/3/2015
.an matches “ran” and “can” in the phrase
“bran muffins can be tasty”
360
Coding
Character
Matches
Example
x|y
Either x or y.
FF0000|0000FF matches “FF0000” in
bgcolor=”#FF0000” and “0000FF’” in font
color=”#0000FF”
{n}
Exactly n occurrences of the preceding
character.
o{2} matches “oo” in “loom” and the first two
o’s in “mooooo” but nothing in “money”
{n,m}
At least n, and at most m, occurrences of the
preceding character.
F{2,4} matches “FF” in “#FF0000” and the first
four Fs in #FFFFFF
[abc]
Any one of the characters enclosed in the
brackets. Specify a range of characters with a
hyphen (for example, [a-f] is equivalent to
[abcdef]).
[e-g] matches “e” in “bed”, “f” in “folly”, and ”g”
in “guard”
[^abc]
Any character not enclosed in the brackets.
Specify a range of characters with a hyphen
(for example, [^a-f] is equivalent to
[^abcdef]).
[^aeiou] initially matches “r” in “orange”, “b” in
“book”, and “k” in “eek!”
\b
A word boundary (such as a space or carriage
return).
\bb matches “b” in “book” but nothing in
“goober” or “snob”
\B
Anything other than a word boundary.
\Bb matches “b” in “goober” but nothing in
“book”
\d
Any digit character. Equivalent to [0-9].
\d matches “3” in “C3PO” and “2” in
“apartment 2G”
\D
Any nondigit character. Equivalent to [^0-9].
\D matches “S” in “900S” and “Q” in “Q45”
\f
Form feed.
\n
Line feed.
\r
Carriage return.
\s
Any single white-space character, including
space, tab, form feed, or line feed.
\sbook matches ”book” in “blue book” but
nothing in “notebook”
\S
Any single non-white-space character.
\Sbook matches “book” in “notebook” but
nothing in “blue book”
\t
A tab.
\w
Any alphanumeric character, including
underscore. Equivalent to [A-Za-z0-9_].
b\w* matches “barking” in “the barking dog”
and both “big” and “black” in “the big black
dog”
\W
Any non-alphanumeric character. Equivalent
to [^A-Za-z0-9_].
\W matches “&” in “Jake&Mattie” and “%” in
“100%”
Control+Enter or Shift+Enter (Windows), or
Control+ Return or Shift+Return or
Command+ Return (Macintosh)
Return character. Make sure that you deselect
the Ignore Whitespace Differences option
when searching for this, if not using regular
expressions. Note that this matches a
particular character, not the general notion of
a line break; for instance, it doesn’t match a

tag or a tag. Return characters
appear as spaces in Design view, not as line
breaks.
Use parentheses to set off groupings within the regular expression to be referred to later. Then use $1, $2, $3, and so on
in the Replace With field to refer to the first, second, third, and later parenthetical groupings.
Last updated 6/3/2015
361
Coding
Note: In the Search For box, to refer to a parenthetical grouping earlier in the regular expression, use \1, \2, \3, and so on
instead of $1, $2, $3.
For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day and month in a date
separated by slashes, thereby converting between American-style dates and European-style dates.
Server behavior code
When you develop a dynamic page and select a server behavior from the Server Behaviors panel, Dreamweaver inserts
one or more code blocks into your page to make the server behavior work.
If you manually change the code within a code block, you can no longer use panels such as the Bindings and Server
Behaviors panels to edit the server behavior. Dreamweaver looks for specific patterns in the page code to detect server
behaviors and display them in the Server Behaviors panel. If you change a code block’s code in any way, Dreamweaver
can no longer detect the server behavior and display it in the Server Behaviors panel. However, the server behavior still
exists on the page, and you can edit it in the coding environment in Dreamweaver.
More Help topics
Code hints
Setting coding preferences
Customizing keyboard shortcuts
Make pages XHTML-compliant
Search for tags, attributes, or text in code
Save and recall search patterns
Optimizing the workspace for visual development
Setting up your coding environment
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Using coder-oriented workspaces
You can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the way
you view code, set up different keyboard shortcuts, or import and use your favorite tag library.
Dreamweaver comes with several workspace layouts designed for an optimal coding experience. From the workspace
switcher on the Application bar, you can select from Application Developer, Application Developer Plus, Coder, and
Coder Plus workspaces. All of these workspaces show Code view by default (in either the entire Document window, or
in Code and Design views), and have panels docked on the left side of the screen. All but Application Developer Plus
eliminate the Property inspector from the default view.
If none of the pre-designed workspaces offer exactly what you need, you can customize your own workspace layout by
opening and docking panels where you want them, and then saving the workspace as a custom workspace.
Last updated 6/3/2015
362
Coding
Viewing code
You can view the source code for the current document in several ways: you can display it in the Document window by
enabling Code view, you can split the Document window to display both the page and its associated code, or you can
work in the Code inspector, a separate coding window. The Code inspector works just like Code view; you can think
of it as a detachable Code view for the current document.
View code in the Document window
❖ Select View > Code.
Code and edit a page simultaneously in the Document window
1 Select View > Code and Design.
The code appears in the top pane and the page appears in the bottom pane.
2 To display the page on top, select Design View On Top from the View Options menu on the Document toolbar.
3 To adjust the size of the panes in the Document window, drag the splitter bar to the desired position. The splitter
bar is located between the two panes.
Code view is updated automatically when you make changes in Design view. However, after making changes in
Code view, you must manually update the document in Design view by clicking in Design view or pressing F5.
View code in a separate window with the Code inspector
The Code inspector lets you work in a separate coding window, just like working in Code view.
❖ Select Window > Code Inspector. The toolbar includes the following options:
File Management Puts or gets the file.
Preview/Debug In Browser Previews or debugs your document in a browser.
Refresh Design View Updates the document in Design view so that it reflects any changes you made in the code.
Changes you make in the code don’t automatically appear in Design view until you perform certain actions, such as
saving the file or clicking this button.
Reference Opens the Reference panel. See Use language-reference material.
Code Navigation Lets you move quickly in the code. See Go to a JavaScript or VBScript function.
View Options Lets you determine how the code is displayed. See Set the code appearance.
To use the Coding toolbar along the left side of the window, see Insert code using the Coding toolbar.
Customizing keyboard shortcuts
You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard
shortcuts—for example, Shift+Enter to add a line break, or Control+G to go to a specific position in the code—you can
add them to Dreamweaver using the Keyboard Shortcut Editor.
For instructions, see Customize keyboard shortcuts.
Open files in Code view by default
When you open a file type that normally doesn’t contain any HTML (for example, a JavaScript file), the file opens in
Code view (or Code inspector) instead of Design view. You can specify which file types open in Code view.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
Last updated 6/3/2015
363
Coding
2 Select File Types/Editors from the Category list on the left.
3 In the Open In Code View box, add the filename extension of the file type you want to open automatically in Code
view.
Type a space between filename extensions. You can add as many extensions as you like.
More Help topics
Manage windows and panels
Save and switch workspaces
Customize keyboard shortcuts
Managing tag libraries
Change the code format
Set code hints preferences
Set the color theme for Code View
Work with code snippets
Use an external editor
Set Validator preferences
Setting coding preferences
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About coding preferences
You can set coding preferences such as code formatting and coloring, among others, to meet your specific needs.
Note: To set advanced preferences, use the Tag Library editor (see Managing tag libraries ).
Set the code appearance
You can set word wrapping, display line numbers for the code, highlight invalid code, set syntax coloring for code
elements, set indenting, and show hidden characters from the View > Code View Options menu.
1 View a document in Code view or the Code inspector.
2 Do one of the following:
• Select View > Code View Options
• Click the View Options button
in the toolbar at the top of Code view or the Code inspector.
3 Select or deselect any of the following options:
Word Wrap Wraps the code so that you can view it without scrolling horizontally. This option doesn’t insert line
breaks; it just makes the code easier to view.
Line Numbers Displays line numbers along the side of the code.
Last updated 6/3/2015
364
Coding
Hidden Characters Displays special characters in place of white space. For example, a dot replaces each space, a
double chevron replaces each tab, and a paragraph marker replaces each line break.
Note: Soft line breaks that Dreamweaver uses for word wrapping are not displayed with a paragraph marker.
Highlight Invalid Code Causes Dreamweaver to highlight in yellow all HTML code that isn’t valid. When you select
an invalid tag, the Property inspector displays information on how to correct the error.
Syntax Coloring Enables or disables code coloring. For information on changing the coloring scheme, see Set the
color theme for Code View.
Auto Indent Makes your code indent automatically when you press Enter while writing code. The new line of code
indents to the same level as the previous line. For information on changing the indent spacing, see the Tab Size
option in Change the code format.
Change the code format
You can change the look of your code by specifying formatting preferences such as indentation, line length, and the case
of tag and attribute names.
All the Code Format options, except the Override Case Of option, are automatically applied only to new documents or
additions to documents that you subsequently create.
To reformat existing HTML documents, open the document, and select Commands > Apply Source Formatting.
1 Select Edit > Preferences.
2 Select Code Format from the Category list on the left.
3 Set any of the following options:
Indent Indicates whether code generated by Dreamweaver should be indented (according to the indentation rules
specified in these preferences) or not.
Note: Most of the indentation options in this dialog box apply only to code generated by Dreamweaver, not to code that
you type. To make each new line of code that you type indent to the same level as the previous line, select View > Code
View Options Auto-Indent option. For more information, see Set the code appearance.
With (Text box and pop-up menu) Specifies how many spaces or tabs Dreamweaver should use to indent code that
it generates. For example, if you type 3 in the box and select Tabs in the pop-up menu, then code generated by
Dreamweaver is indented using three tab characters for every level of indentation.
Tab Size Determines how many characters wide each tab character appears in Code view. For example, if Tab Size
is set to 4, then each tab is displayed in Code view as a four-character-wide blank space. If, additionally, Indent With
is set to 3 Tabs, then code generated by Dreamweaver is indented using three tab characters for every level of
indentation, which appears in Code view as a twelve-character-wide blank space.
Note: Dreamweaver indents using either spaces or tabs; it doesn’t convert a run of spaces to a tab when inserting code.
Line Break Type Specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site.
Choosing the correct type of line break characters ensures that your HTML source code appears correctly when
viewed on the remote server. This setting is also useful when you are working with an external text editor that
recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor,
and use CR (Macintosh) if SimpleText is your external editor.
Last updated 6/3/2015
365
Coding
Note: For servers that you connect to using FTP, this option applies only to binary transfer mode; the ASCII transfer
mode in Dreamweaver ignores this option. If you download files using ASCII mode, Dreamweaver sets line breaks based
on the operating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.
Default Tag Case and Default Attribute Case Control the capitalization of tag and attribute names. These options
are applied to tags and attributes that you insert or edit in Design view, but they are not applied to the tags and
attributes that you enter directly in Code view, or to the tags and attributes already in a document when you open
it (unless you also select one or both of the Override Case Of options).
Note: These preferences apply only to HTML pages. Dreamweaver ignores them for XHTML pages because uppercase
tags and attributes are invalid XHTML.
Override Case Of: Tags and Attributes Specifies whether to enforce your specified case options at all times,
including when you open an existing HTML document. When you select one of these options and click OK to
dismiss the dialog box, all tags or attributes in the current document are immediately converted to the specified case,
as are all tags or attributes in each document you open from then on (until you deselect this option again). Tags or
attributes you type in Code view and in the Quick Tag Editor are also converted to the specified case, as are tags or
attributes you insert using the Insert panel. For example, if you want tag names always to be converted to lowercase,
specify lowercase in the Default Tag Case option, and then select the Override Case Of: Tags option. Then when you
open a document that contains uppercase tag names, Dreamweaver converts them all to lowercase.
Note: Older versions of HTML allowed either uppercase or lowercase tag and attribute names, but XHTML requires
lowercase for tag and attribute names. The web is moving toward XHTML, so it’s generally best to use lowercase tag
and attribute names.
TD Tag: Do Not Include A Break Inside The TD Tag Addresses a rendering problem that occurs in some older
browsers when white space or line breaks exist immediately after a tag, or immediately before a or before a
tag normally has child tags. If you select a
tag in the tag selector, you can select
the first row in the table by selecting Edit > Select Child. Dreamweaver selects the first tag in the tag selector. Since
the tag itself has child tags, namely
tags, selecting Edit > Select Child again selects the first cell in the table.
Last updated 6/3/2015
396
Coding
Edit code with the Property inspector
You can use the Property inspector to inspect and edit the attributes of text or of objects on your page. The properties
shown in the Property inspector generally correspond to attributes of tags; changing a property in the Property
inspector generally has the same effect as changing the corresponding attribute in Code view.
Note: The Tag inspector and the Property inspector both let you view and edit a tag’s attributes. The Tag inspector lets you
to view and edit every attribute associated with a given tag. The Property inspector shows only the most common attributes,
but provides a richer set of controls for changing those attributes’ values, and lets you edit certain objects (such as table
columns) that don’t correspond to specific tags.
1 Click in the text or select an object on the page.
The Property inspector for the text or object appears below the Document window. If the Property inspector is not
visible, select Window > Properties.
2 Make changes to the attributes in the Property inspector.
Edit CFML with the Property inspector
Use the Property inspector to inspect and modify ColdFusion markup in Design view.
1 In the Property inspector, click the Attributes button to edit the tag’s attributes or to add new ones.
2 If the tag holds content between its opening and closing tags, click the Content button to edit the content.
The Content button appears only if the selected tag is not an empty tag (that is, if it has both an opening and a closing
tag).
3 If the tag contains a conditional expression, make changes to it in the Expression box.
Change attributes with the Tag inspector
Use the Tag inspector to edit or add attributes and attributes’ values. The Tag inspector lets you edit tags and objects by
using a property sheet similar to the ones found in other integrated development environments (IDEs).
1 Do one of the following in the Document window:
• In Code view (or the Code inspector), click anywhere in a tag’s name or in its contents.
• In Design view, select an object, or select a tag in the Tag Selector.
2 Open the Tag inspector (Window > Tag Inspector), and select the Attributes tab.
The selection’s attributes and their current values appear in the Tag inspector.
3 Do any of the following in the Tag inspector:
• To view the attributes organized by category, click the Show Category View button
• To view the attributes in an alphabetical list, click the Show List View button
.
.
• To change the attribute’s value, select the value and edit it.
• To add a value for an attribute with no value, click in the attribute-value column to the right of the attribute and
add a value.
• If the attribute takes pre-defined values, select a value from the pop-up menu (or the color picker) to the right of
the attribute-value column.
• If the attribute takes a URL value, click the Browse button or use the Point-To-File icon to select a file, or type
the URL in the box.
Last updated 6/3/2015
397
Coding
• If the attribute takes a value from a source of dynamic content (such as a database), click the Dynamic Data
button to the right of the attribute-value column. Then select a source.
• To delete the attribute’s value, select the value and press Backspace (Windows) or Delete (Macintosh).
• To change the name of an attribute, select the attribute name and edit it.
Note: If you change the name of a standard attribute and then add a value for that attribute, the attribute and its new
value move to the appropriate category.
• To add a new attribute not already listed, click in the empty space below the last listed attribute name and type a
new attribute name.
4 Press Enter (Windows) or Return (Macintosh), or click elsewhere in the Tag inspector, to update the tag in your
document.
Quick Tag Editor overview
You use the Quick Tag Editor to quickly inspect, insert, and edit HTML tags without leaving Design view.
If you type invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing
quotation marks and closing angle brackets where needed.
To set the Quick Tag Editor options, open the Quick Tag Editor by pressing Control-T (Windows) or Command-T
(Macintosh).
The Quick Tag Editor has three modes:
• Insert HTML mode is used to insert new HTML code.
• Edit Tag mode is used to edit an existing tag.
• Insert HTML mode is used to insert new HTML code.
• Edit Tag mode is used to edit an existing tag.
• Wrap Tag mode is to wrap a new tag around the current selection.
Note: The mode in which the Quick Tag Editor opens depends on the current selection in Design view.
In all three modes, the basic procedure for using the Quick Tag Editor is the same: open the editor, enter or edit tags
and attributes, and then close the editor.
You can cycle through the modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick Tag
Editor is active.
Edit code with the Quick Tag Editor
Use the Quick Tag Editor to quickly insert and edit HTML tags without leaving Design view.
Insert an HTML tag
1 In Design view, click in the page to place the insertion point where you want to insert code.
2 Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Insert HTML mode.
Last updated 6/3/2015
398
Coding
3 Enter the HTML tag and press Enter.
The tag is inserted into your code, along with a matching closing tag if applicable.
4 Press Escape to exit without making any changes.
Edit an HTML tag
1 Select an object in Design view.
You can also select the tag you want to edit from the tag selector at the bottom of the Document window. For more
information, see Edit code with the tag selector.
2 Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Edit Tag mode.
3 Enter new attributes, edit existing attributes, or edit the tag’s name.
4 Press Tab to move forward from one attribute to the next; press Shift+Tab to move back.
Note: By default, changes are applied to the document when you press Tab or Shift+Tab.
5 To close the Quick Tag Editor and apply all the changes, press Enter.
6 To exit without making any further changes, press Escape.
Wrap the current selection with HTML tags
1 Select unformatted text or an object in Design view.
Note: If you select text or an object that includes an opening or closing HTML tag, the Quick Tag Editor opens in Edit
Tag mode instead of Wrap Tag mode.
2 Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property
inspector.
The Quick Tag Editor opens in Wrap Tag mode.
3 Enter a single opening tag, such as strong, and press Enter (Windows) or Return (Macintosh).
The tag is inserted at the beginning of the current selection, and a matching closing tag is inserted at the end.
4 To exit without making any changes, press Escape.
Use the hints menu in the Quick Tag Editor
The Quick Tag Editor includes an attributes hint menu that lists all the valid attributes of the tag you are editing or
inserting.
You can also disable the hints menu or adjust the delay before the menu pops up in the Quick Tag Editor.
To see a hints menu that lists valid attributes for a tag, pause briefly while editing an attribute name in the Quick Tag
Editor. A hints menu appears, listing all the valid attributes for the tag you’re editing.
Similarly, to see a hints menu listing valid tag names, pause briefly while entering or editing a tag name in the Quick
Tag Editor.
Note: The Quick Tag Editor code hints preferences are controlled by the normal code hints preferences. For more
information, see Set code hints preferences.
Last updated 6/3/2015
399
Coding
Use a hints menu
1 Do one of the following:
• Begin to type a tag or attribute name. The selection in the Code Hints menu jumps to the first item that starts
with the letters you typed.
• Use the Up and Down Arrow keys to select an item.
• Use the scroll bar to find an item.
2 Press Enter to insert the selected item, or double-click an item to insert it.
3 To close the hints menu without inserting an item, press Escape or continue typing.
Disable the hints menu or change the delay before it appears
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and select Code Hints.
The Code Hints Preferences dialog box appears.
2 To disable the hints menu, deselect the Enable Code Hints option.
3 To change the delay before the menu appears, adjust the Delay slider, and click OK.
Edit code with the tag selector
You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the
status bar at the bottom of the Document window and shows a series of tags, as follows:
Edit or delete a tag
1 Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2 Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
3 To edit a tag, select Edit Tag from the menu. Make your changes in the Quick Tag Editor. For more information, see
Edit code with the Quick Tag Editor.
4 To delete a tag, select Remove Tag from the menu.
Select an object corresponding to a tag
1 Click in the document.
The tags that apply at the insertion point appear in the tag selector.
2 Click a tag in the tag selector.
The object represented by the tag is selected on the page.
Use this technique to select individual table rows (tr tags) or cells (td tags).
Write and edit scripts in Design view
You can work with client-side JavaScripts and VBScripts in both Code and Design views, in the following ways:
• Write a JavaScript or VBScript script for your page without leaving Design view.
Last updated 6/3/2015
400
Coding
• Create a link in your document to an external script file without leaving Design view.
• Edit a script without leaving Design view.
Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers appear on the page.
Write a client-side script
1 Place the insertion point where you want the script.
2 Select Insert > HTML > Script Objects > Script.
3 Select the scripting language from the Language pop-up menu.
If you are using JavaScript and are unsure of the version, select JavaScript rather than JavaScript1.1 or JavaScript1.2.
4 Type or paste your script code into the Content box.
You don’t need to include the opening and closing script tags.
5 Type or paste HTML code into the No Script box. Browsers that don’t support the chosen scripting language display
this code instead of running the script.
6 Click OK.
Link to an external script file
1 Place the insertion point where you want the script.
2 Select Insert > HTML > Script Objects > Script.
3 Click OK without typing anything in the Content box.
4 Select the script marker in Design view of the Document window.
5 In the Property inspector, click the folder icon and browse to and select the external script file, or type the filename
in the Source box.
Edit a script
1 Select the script marker.
2 In the Property inspector, click the Edit button.
The script appears in the Script Properties dialog box.
If you linked to an external script file, the file opens in Code view, where you can make your edits.
Note: If there is code between the script tags, the Script Properties dialog box opens even if there is also a link to an
external script file.
3 In the Language box, specify either JavaScript or VBScript as the language of the script.
4 In the Type pop-up menu, specify the type of script, either client-side or server-side.
5 (Optional) In the Source box, specify an externally linked script file.
Click the folder icon
or the Browse button to select a file, or type the path.
6 Edit the script, and click OK.
Edit ASP server-side scripts in Design view
Use the ASP script Property inspector to inspect and modify ASP server-side scripts in Design view.
1 In Design view, select the server-language tag visual icon.
Last updated 6/3/2015
401
Coding
2 In the ASP script Property inspector, click the Edit button.
3 Edit the ASP server-side script, and click OK.
Edit scripts on the page by using the Property inspector
1 In the Property inspector, select the scripting language from the Language pop-up menu, or type a language name
in the Language box.
Note: If you are using JavaScript and are unsure of the version, select JavaScript rather than JavaScript1.1 or
JavaScript1.2.
2 In the Type pop-up menu, specify the type of script, either client-side or server-side.
3 (Optional) In the Source box, specify an externally linked script file. Click the folder icon
to select the file, or
type the path.
4 Click Edit to modify the script.
Using JavaScript behaviors
You can easily attach JavaScript (client-side) behaviors to page elements by using the Behaviors tab of the Tag inspector.
For more information, see Applying built-in JavaScript behaviors.
More Help topics
Using JavaScript behaviors (general instructions)
Defining sources of dynamic content
Working with head content for pages
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Pages contain elements that describe the information on the page, which is used by search browsers. You can set the
properties of head elements to control how your pages are identified.
View and edit head content
You can view the elements in the head section of a document by using the View menu, the Document window’s Code
view, or the Code inspector.
View elements in the head section of a document
❖ Select View > Head Content. For each element of the head content, a marker appears at the top of the Document
window in Design view.
Note: If your Document window is set to show only Code view, View > Head Content is dimmed.
Insert an element into the head section of a document
1 Select an item from the Insert > HTML > Head Tags submenu.
2 Enter options for the element in the dialog box that appears, or in the Property inspector.
Last updated 6/3/2015
402
Coding
Edit an element in the head section of a document
1 Select View > Head Content.
2 Click one of the icons in the head section to select it.
3 Set or modify the properties of the element in the Property inspector.
Set the meta properties for the page
A meta tag is a head element that records information about the current page, such as the character encoding, author,
copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date, refresh
interval, and POWDER rating for the page. (POWDER, the Protocol for Web Description Resources, provides a
method for assigning ratings, such as movie ratings, to web pages.)
Add a meta tag
1 Select Insert > HTML > Head Tags > Meta.
2 Specify the properties in the dialog box that appears.
Edit an existing meta tag
1 Select View > Head Content.
2 Select the Meta marker that appears at the top of the Document window.
3 Specify the properties in the Property inspector.
Meta tag properties
❖ Set the meta tag properties as follows:
Attribute Specifies whether the meta tag contains descriptive information about the page (name) or HTTP header
information (http-equiv).
Value Specifies the type of information you’re supplying in this tag. Some values, such as description, keywords, and
refresh, are already well defined (and have their own individual Property inspectors in Dreamweaver), but you can
specify practically any value (for example, creationdate, documentID, or level).
Content Specifies the actual information. For example, if you specified level for Value, you might specify beginner,
intermediate, or advanced for Content.
Set the page title
There is only one title property: the title of the page. The title appears in the title bar of the Document window in
Dreamweaver as well as in the browser’s title bar when you view the page in most browsers. The title also appears in the
Document window toolbar.
Specify the title in the Document window
❖ Enter the title in the Title text box in the Document window toolbar.
Specify the title in the head content
1 Select View > Head Content.
2 Select the Title marker that appears at the top of the Document window.
3 Specify the page title in the Property inspector.
Last updated 6/3/2015
403
Coding
Specify keywords for the page
Many search-engine robots (programs that automatically browse the web gathering information for search engines to
index) read the contents of the Keywords meta tag and use the information to index your pages in their databases.
Because some search engines limit the number of keywords or characters they index, or ignore all keywords if you go
beyond the limit, it’s a good idea to use just a few well-chosen keywords.
Add a Keywords meta tag
1 Select Insert > HTML > Head Tags > Keywords.
2 Specify the keywords, separated by commas, in the dialog box that appears.
Edit a Keywords meta tag
1 Select View > Head Content.
2 Select the Keywords marker that appears at the top of the Document window.
3 In the Property inspector, view, modify, or delete keywords. You can also add keywords separated by commas.
Specify descriptions for the page
Many search-engine robots (programs that automatically browse the web gathering information for search engines to
index) read the contents of the Description meta tag. Some use the information to index your pages in their databases,
and some also display the information on the search results page (instead of displaying the first few lines of your
document). Some search engines limit the number of characters they index, so it’s a good idea to limit your description
to a few words (for example, Pork barbecue catering in Albany, Georgia, or Web design at reasonable rates for clients
worldwide).
Add a Description meta tag
1 Select Insert > HTML > Head Tags > Description.
2 Enter descriptive text in the dialog box that appears.
Edit a Description meta tag
1 Select View > Head Content.
2 Select the Description marker that appears at the top of the Document window.
3 In the Property inspector, view, modify, or delete the descriptive text.
Set the refresh properties of the page
Use the Refresh element to specify that the browser should automatically refresh your page—by reloading the current
page or going to a different one—after a certain amount of time. This element is often used to redirect users from one
URL to another, often after displaying a text message that the URL has changed.
Add a Refresh meta tag
1 Select Insert > HTML > Head Tags > Refresh.
2 Set the Refresh meta tag properties in the dialog box that appears.
Edit a Refresh meta tag
1 Select View > Head Content.
Last updated 6/3/2015
404
Coding
2 Select the Refresh marker that appears at the top of the Document window.
3 In the Property inspector, set the Refresh meta tag properties.
Set the Refresh meta tag properties
❖ Specify the Refresh meta tag properties as follows:
Delay The time in seconds to wait before the browser refreshes the page. To make the browser refresh the page
immediately after it finishes loading, enter 0 in this box.
URL or Action Specifies whether the browser should go to a different URL or refresh the current page, after the
specified delay. To make a different URL open (rather than refreshing the current page), click the Browse button,
then browse to and select the page to load.
Set the base URL properties of the page
Use the Base element to set the base URL that all document-relative paths in the page are considered relative to.
Add a Base meta tag
1 Select Insert > HTML > Head Tags > Base.
2 Specify the Base meta tag properties in the dialog box that appears.
Edit a Base meta tag
1 Select View > Head Content.
2 Select the Base marker that appears at the top of the Document window.
3 In the Property inspector, specify the Base meta tag properties.
Specify the Base meta tag properties
❖ Specify the Base meta tag properties as follows:
Href The base URL. Click the Browse button to browse to and select a file, or type a path in the box.
Target Specifies the frame or window in which all linked documents should open. Select one of the frames in the
current frameset, or one of the following reserved names:
• _blank loads the linked document in a new, unnamed browser window.
• _parent loads the linked document into the parent frameset or window of the frame that contains the link. If the
frame containing the link is not nested, then this is equivalent to _top; the linked document loads into the full
browser window.
• _self loads the linked document in the same frame or window as the link. This target is the default, so you usually
don’t have to specify it.
• _top loads the linked document in the full browser window, thereby removing all frames.
Set the link properties of the page
Use the link tag to define a relationship between the current document and another file.
Note: The link tag in the head section is not the same thing as an HTML link between documents in the body section.
Last updated 6/3/2015
405
Coding
Add a Link meta tag
1 Select Insert > HTML > Head Tags > Link.
2 Specify the Link meta tag properties in the dialog box that appears.
Edit a Link meta tag
1 Select View > Head Content.
2 Select the Link marker that appears at the top of the Document window.
3 In the Property inspector, specify the Link meta tag properties.
Specify the Link meta tag properties
❖ Set the Link meta tag properties as follows:
Href The URL of the file that you are defining a relationship to. Click the Browse button to browse to and select a
file, or type a path in the box. Note that this attribute does not indicate a file that you’re linking to in the usual HTML
sense; the relationships specified in a Link element are more complex.
ID Specifies a unique identifier for the link.
Title Describes the relationship. This attribute has special relevance for linked style sheets; for more information,
see the External Style Sheets section of the HTML 4.0 specification on the World Wide Web Consortium website at
www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel Specifies the relationship between the current document and the document in the Href box. Possible values
include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection,
Appendix, Help, and Bookmark. To specify more than one relationship, separate values with a space.
Rev Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the
Href box. Possible values are the same as those for Rel.
Working with server-side includes
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About server-side includes
You can use Dreamweaver to insert server-side includes in your pages, edit the includes, or preview pages containing
includes.
A server-side include is a file that the server incorporates into your document when a browser requests your document
from the server.
When a visitor’s browser requests the document that contains the include instruction, your server processes the include
instruction and creates a new document in which the include instruction is replaced by the contents of the included
file. The server then sends this new document to the visitor’s browser. When you open a local document directly in a
browser, however, there’s no server to process the include instructions in that document, so the browser opens the
document without processing those instructions, and the file that’s supposed to be included doesn’t appear in the
browser. Thus, it can be difficult, without using Dreamweaver, to look at local files and see them as they’ll appear to
visitors after you’ve put them on the server.
Last updated 6/3/2015
406
Coding
With Dreamweaver you can preview documents just as they’ll appear after they’re on the server, both in the Design view
and when you use the Preview in Browser feature. To do so, however, you must make sure you are previewing the file
that contains the include as a temporary file. (Select Edit > Preferences, select the Preview in Browser category, and
make sure the Preview using temporary file option is selected.)
Note: If you are using a testing server, such as Apache or Microsoft IIS, to preview your files on your local drive, you do not
need to preview the file as a temporary file because the server does the processing for you.
Placing a server-side include in a document inserts a reference to an external file; it doesn’t insert the contents of the
specified file in the current document. The contents of the specified file should only contain the content that you want
to include. That is, the include file should not contain any head tags, body tags, or html tags (meaning the tag—
formatting HTML tags, such as p tags, div tags, and so on, are fine). If it does, these tags will conflict with the tags in
the original document, and Dreamweaver won’t display the page properly.
You cannot edit the included file directly in a document. To edit the contents of a server-side include, you must directly
edit the file that you’re including. Any changes to the external file are automatically reflected in every document that
includes it.
There are two types of server-side includes: Virtual and File. Dreamweaver inserts File type includes by default, but you
can use the Property inspector to select the one that is appropriate for the type of web server you use:
• If your server is an Apache web server, select Virtual. In Apache, Virtual works in all cases, while File works only in
some cases.
• If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual works with IIS only in certain
circumstances.)
Note: Unfortunately, IIS won’t let you include a file in a folder above the current folder in the folder hierarchy, unless special
software has been installed on the server. If you must include a file from a folder higher in the folder hierarchy on an IIS
server, ask your system administrator if the necessary software is installed.
• For other kinds of servers, or if you don’t know what kind of server you’re using, ask your system administrator
which option to use.
Some servers are configured to examine all files to see if they contain server-side includes; other servers are
configured to examine only files with a particular file extension, such as .shtml, .shtm, or .inc. If a server-side include
isn’t working for you, ask your system administrator if you need to use a special extension in the name of the file
that uses the include. (For example, if the file is named canoe.html, you may have to rename it to canoe.shtml.) If
you want your files to retain .html or .htm extensions, ask your system administrator to configure the server to
examine all files (not just files with a certain extension) for server-side includes. Parsing a file for server-side
includes takes a little extra time, so pages that the server parses are served a little more slowly than other pages;
therefore, some system administrators won’t provide the option of parsing all files.
Insert server-side includes
You can use Dreamweaver to insert server-side includes in your page.
Insert a server-side include
1 Select Insert > Server-Side Include.
2 In the dialog box that appears, browse to and select a file.
By default, a File type of include is inserted.
Last updated 6/3/2015
407
Coding
3 To change the type of the include, select the server-side include in the Document window and change the type in
the Property inspector (Window > Properties), as follows:
• If your server is an Apache web server, select Virtual. In Apache, Virtual works in all cases, while File works only
in some cases.
• If your server is a Microsoft Internet Information Server (IIS), select File. (Virtual works with IIS only in certain
specific circumstances.)
Note: Unfortunately, IIS won’t allow you to include a file in a folder above the current folder in the folder hierarchy,
unless special software has been installed on the server. If you need to include a file from a folder higher in the folder
hierarchy on an IIS server, ask your system administrator if the necessary software is installed.
• For other kinds of servers, or if you don’t know what kind of server you’re using, ask your system administrator
which option to use.
Change which file is included
1 Select the server-side include in the Document window.
2 Open the Property inspector (Window > Properties).
3 Do one of the following:
• Click the folder icon and browse to and select a new file to include.
• In the box, type the path and filename of the new file to include.
Edit the contents of server-side includes
You can use Dreamweaver to edit server-side includes. To edit the content associated with the included file, you must
open the file.
1 Select the server-side include in either Design view or Code view, and click Edit in the Property inspector.
The included file opens in a new Document window.
2 Edit the file, and then save it.
The changes are immediately reflected in the current document and in any subsequent document you open that
includes the file.
3 Upload the include file to the remote site if necessary.
Managing tag libraries
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About Dreamweaver tag libraries
A tag library, in Dreamweaver, is a collection of tags of a particular type, along with information about how
Dreamweaver should format the tags. Tag libraries provide the information about tags that Dreamweaver uses for code
hints, target browser checks, the Tag Chooser, and other coding capabilities. Using the Tag Library editor, you can add
and delete tag libraries, tags, attributes, and attribute values; set properties for a tag library, including format (for easy
identification in the code); and edit tags and attributes.
Last updated 6/3/2015
408
Coding
Open and close the Tag Library editor
1 Select Edit >Tag Libraries to open the Tag library editor.
The Tag Library Editor dialog box appears. (The options of this dialog box change depending on the selected tag.)
2 Close the Tag Library editor in one of the following ways:
• To save changes, click OK.
• To close the editor without saving changes, click Cancel.
Note: When you click Cancel, all changes you’ve made in the Tag Library editor are discarded. If you deleted a tag or
tag library, it’s restored.
Add libraries, tags, and attributes
You can use the Tag Library editor to add tag libraries, tags, and attributes to the tag libraries in Dreamweaver.
Add a tag library
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button, and select New Tag Library.
2 In the Library Name box, type a name (for example, Miscellaneous Tags), and click OK.
Add tags to a tag library
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Tags.
2 Select Tag Library pop-up menu, and select a tag library.
3 Type the name of the new tag. To add more than one tag, separate the tags’ names with a comma and a space (for
example: cfgraph, cfgraphdata).
4 If the new tags have corresponding end tags (), select Have Matching End Tags.
5 Click OK.
Add attributes to a tag
1 In the Tag Library editor (Edit > Tag Libraries), click the Plus (+) button and select New Attributes.
2 In the Tag Library pop-up menu, select a tag library.
3 In the Tag pop-up menu, select a tag.
4 Type the name of the new attribute. To add more than one attribute, separate attributes’ names with a comma and a
space (for example: width, height).
5 Click OK.
Edit libraries, tags, and attributes
Use the Tag Library editor to set properties for a tag library and edit tags and attributes in a library.
Set properties for a tag library
1 In the Tag Library editor (Edit > Tag Libraries), select a tag library (not a tag) in the Tags list.
Note: The properties for tag libraries appear only when a tag library is selected. Tag libraries are represented by the toplevel folders in the Tags list; for example, the HTML Tags folder represents a tag library, while the abbr folder within the
HTML Tags folder represents a tag.
Last updated 6/3/2015
409
Coding
2 In the Used In list, select every document type that should use the tag library.
The document types you select here determine which document types provide code hints for the given tag library.
For example, if the HTML option is not selected for a given tag library, code hints for that tag library don’t appear
in HTML files.
3 (Optional) Enter the prefix for the tags in the Tag Prefix box.
Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.
4 Click OK.
Edit a tag in a tag library
1 In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags list and select a tag.
2 Set any of the following Tag Format options:
Line Breaks Specifies where Dreamweaver inserts line breaks for a tag.
Contents Specifies how Dreamweaver inserts the contents of a tag; that is, if it applies line break, formatting, and
indentation rules to the content.
Case Specifies the case for a specific tag. Select from Default, Lowercase, Uppercase, or Mixed Case. If you select
Mixed Case, the Tag Name Mixed Case dialog box appears. Type the tag with the case Dreamweaver should use
when inserting it (for example, getProperty) and click OK.
Set Default Sets the default case for all tags. In the Default Tag Case dialog box that appears, select
or , and click OK.
You might want to set your default case to be lowercase to comply with XML and XHTML standards.
Edit an attribute for a tag
1 In the Tag Library editor (Edit > Tag Libraries), expand a tag library in the Tags box, expand a tag, and select a tag
attribute.
2 In the Attribute Case pop-up menu, select the Default, Lowercase, Uppercase, or Mixed Case option.
If you select Mixed Case, the Attribute Name Mixed Case dialog box appears. Type the attribute with the case
Dreamweaver should use when inserting it (for example, onClick), and click OK.
Click the Set Default link to set the default case for all attribute names.
3 In the Attribute Type pop-up menu, select the type of the attribute.
If you select Enumerated, type every allowed value for the attribute in the Values box. Separate the values with
commas, but no spaces. For example, the enumerated values of the showborder attribute of the cfchart tag are listed
as yes,no.
Delete libraries, tags, and attributes
1 In the Tag Library editor (Edit > Tag Libraries), select a tag library, tag, or attribute in the Tags box.
2 Click the Minus (–) button.
3 Click OK to permanently delete the item.
The item is removed from the Tags box.
4 Click OK to close the Tag Library editor and complete the deletion.
Last updated 6/3/2015
410
Coding
More Help topics
Importing custom tags into Dreamweaver
Setting coding preferences
Setting coding preferences
Importing custom tags into Dreamweaver
Setting coding preferences
Setting coding preferences
Importing custom tags into Dreamweaver
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About importing custom tags into Dreamweaver
You can import custom tags into Dreamweaver so that they become an integral part of the authoring environment. For
example, when you start typing an imported custom tag in Code view, a code hints menu appears, listing the tag’s
attributes and letting you select one.
Import tags from XML files
You can import tags from an XML Document Type Definition (DTD) file or a schema.
1 Open the Tag Library editor (Edit > Tag Libraries).
2 Click the Plus (+) button and select DTD Schema > Import XML DTD or Schema File.
3 Enter the filename or URL of the DTD or schema file.
4 Enter the prefix to be used with the tags.
Note: A prefix is used to identify a tag in the code as part of a particular tag library. Some tag libraries don’t use prefixes.
5 Click OK.
Import custom ASP.NET tags
You can import custom ASP.NET tags into Dreamweaver.
Before you begin, make sure that the custom tag is installed on the testing server defined in the Site Definition dialog
box (see Set up a testing server). Compiled tags (DLL files) must be placed in the site root’s /bin folder. Noncompiled
tags (ASCX files) can reside in any virtual directory or subdirectory on the server. For more information, see the
Microsoft ASP.NET documentation.
1 Open an ASP.NET page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button, select one of the following options, and click OK:
• To import all the ASP.NET custom tags from the application server, select ASP.NET > Import All ASP.NET
Custom Tags.
Last updated 6/3/2015
411
Coding
• To import only certain custom tags from the application server, select ASP.NET > Import Selected ASP.NET
Custom Tags. Control-click (Windows) or Command-click (Macintosh) tags from the list.
Import JSP tags from a file or server (web.xml)
Import a JSP tag library into Dreamweaver from a variety of file types or a JSP server.
1 Open a JSP page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button, and select JSP > Import From File (*.tld, *.jar, *.zip), or JSP > Import from Server
(web.xml.)
4 Click the Browse button or enter a filename for the file that contains the tag library.
5 Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library.
The URL is not used to view the organization’s website; it is used to uniquely identify the tag library.
6 (Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as
part of a particular tag library.
7 Click OK.
Import JRun tags
If you use Adobe® JRun™, you can import your JRun tags into Dreamweaver.
1 Open a JSP page in Dreamweaver.
2 Open the Tag Library editor (Edit > Tag Libraries).
3 Click the Plus (+) button and select JSP > Import JRun Server Tags From Folder.
4 Enter a folder name for the folder that contains the JRun tags.
5 Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library.
The URL is not used to view the organization’s website; it is used to uniquely identify the tag library.
6 (Optional) Enter the prefix to be used with the tags. Some tag libraries use a prefix to identify a tag in the code as
part of a particular tag library.
7 Click OK.
Last updated 6/3/2015
412
Chapter 11: Javascript
Using JavaScript behaviors (general instructions)
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
About JavaScript behaviors
Adobe Dreamweaver behaviors place JavaScript code in documents so that visitors can change a web page in various
ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event. In the
Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that
action.
Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.
Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For
example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the
browser then checks whether it should call some JavaScript code (specified in the page being viewed) in response.
Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are
events associated with links, whereas onLoad is an event associated with images and with the body section of the
document.
An action is pre-written JavaScript code for performing a task, such as opening a browser window, showing or hiding
an AP element, playing a sound, or stopping an Adobe Shockwave movie. The actions provided with Dreamweaver
provide maximum cross-browser compatibility.
After you attach a behavior to a page element, the behavior calls the action (JavaScript code) associated with an event
whenever that event occurs for that element. (The events that you can use to trigger a given action vary from browser
to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the
onMouseOver event, then your message pops up whenever someone places the pointer over that link.
A single event can trigger several different actions, and you can specify the order in which those actions occur.
Dreamweaver provides about two dozen actions; additional actions can be found on the Exchange website at
www.adobe.com/go/dreamweaver_exchange as well as on third-party developer sites. You can write your own actions
if you are proficient in JavaScript.
Note: The terms behavior and action are Dreamweaver terms, not HTML terms. From the browser’s point of view, an
action is just like any other piece of JavaScript code.
Behaviors panel overview
You use the Behaviors panel (Window > Behaviors) to attach behaviors to page elements (more specifically to tags) and
to modify parameters of previously attached behaviors.
Last updated 6/3/2015
413
Javascript
Behaviors that have already been attached to the currently selected page element appear in the behavior list (the main
area of the panel), listed alphabetically by event. If several actions are listed for the same event, they will be executed in
the order in which they appear on the list. If no behaviors appear in the behavior list, no behaviors have been attached
to the currently selected element.
The Behaviors panel has the following options:
Show Set Events Displays only those events that have been attached to the current document. Events are organized into
client-side and server-side categories. Each category’s events are in a collapsible list. Show Set Events is the default view.
Show All Events Displays an alphabetical list of all events for a given category.
Add Behavior (+) Displays a menu of actions that can be attached to the currently selected element. When you select
an action from this list, a dialog box appears in which you can specify parameters for the action. If all the actions are
dimmed, no events can be generated by the selected element.
Remove Event (–) Removes the selected event and action from the behavior list.
Up and down arrow buttons Move the selected action up or down in the behavior list for a particular event. You can
change the order of actions only for a particular event—for example, you can change the order in which several actions
occur for the onLoad event, but all the onLoad actions stay together in the behavior list. The arrow buttons are disabled
for actions that can’t be moved up or down in the list.
Events Displays a pop-up menu, visible only when an event is selected, of all the events that can trigger the action (this
menu appears when you click the arrow button next to the selected event name). Different events appear depending on
the object selected. If the events you expect don’t appear, make sure that the correct page element or tag is selected. (To
select a specific tag, use the tag selector at the lower-left corner of the Document window.)
Note: Event names in parentheses are available only for links; selecting one of these event names automatically adds a null
link to the selected page element, and attaches the behavior to that link instead of to the element itself. The null link is
specified as href="javascript:;" in the HTML code.
About events
Each browser provides a set of events that you can associate with the actions listed in the Behavior panel’s Actions (+)
menu. When a visitor to your web page interacts with the page—for example, by clicking an image—the browser
generates events; those events can be used to call JavaScript functions that perform an action. Dreamweaver supplies
many common actions that you can trigger with these events.
For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at
www.adobe.com/go/dreamweaver_support.
Different events appear in the Events menu depending on the selected object. To find out what events a given browser
supports for a given page element, insert the page element in your document and attach a behavior to it, then look at
the Events menu in the Behaviors panel. (By default, events are drawn from the HTML 4.01 events list, and are
supported by most modern browsers.) Events may be disabled (dimmed) if the relevant objects do not yet exist on the
page or if the selected object cannot receive events. If the expected events don’t appear, make sure the correct object is
selected.
If you’re attaching a behavior to an image, some events (such as onMouseOver) appear in parentheses. These events are
available only for links. When you select one of them, Dreamweaver wraps an tag around the image to define a null
link. The null link is represented by javascript:; in the Property inspector’s Link box. You can change the link value if
you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing it with another
link, you will remove the behavior.
Last updated 6/3/2015
414
Javascript
To see which tags you can use with a given event in a given browser, search for the event in one of the files in the
Dreamweaver/Configuration/Behaviors/Events folder.
Apply a behavior
You can attach behaviors to the entire document (that is, to the tag) or to links, images, form elements, and
several other HTML elements.
The target browser you select determines which events are supported for a given element.
You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions
column of the Behaviors panel, but you can change that order.
1 Select an element on the page, such as an image or a link.
To attach a behavior to the entire page, click the tag in the tag selector at the lower-left corner of the
Document window.
2 Choose Window > Behaviors.
3 Click the Plus (+) button and select an action from the Add Behavior menu.
Actions that are dimmed in the menu can’t be chosen. They may be dimmed because a required object doesn’t exist
in the current document. For example, the Control Shockwave or SWF action is dimmed if the document contains
no Shockwave or SWF files.
When you select an action, a dialog box appears, displaying parameters and instructions for the action.
4 Enter parameters for the action, and click OK.
All actions provided in Dreamweaver work in modern browsers. Some actions do not work in older browsers, but
they will not cause errors.
Note: Targeted elements require a unique ID. For example, if you want to apply the Swap Image behavior to an image,
the image requires an ID. If you don’t have an ID specified for the element, Dreamweaver automatically specifies one
for you.
5 The default event to trigger the action appears in the Events column. If this is not the trigger event you want, select
another event from the Events pop-up menu. (To open the Events menu, select an event or action in the Behaviors
panel, and click the downward-pointing black arrow that appears between the event name and the action name.)
Change or delete a behavior
After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change
parameters for actions.
1 Select an object with a behavior attached.
2 Choose Window > Behaviors.
3 Make your changes:
• To edit an action’s parameters, double-click its name, or select it and press Enter (Windows) or Return
(Macintosh); then change parameters in the dialog box and click OK.
• To change the order of actions for a given event, select an action and click the Up or Down arrow. Alternatively,
you can select the action and cut and paste it into the desired location among the other actions.
• To delete a behavior, select it and click the Minus (–) button or press Delete.
Last updated 6/3/2015
415
Javascript
Update a behavior
1 Select an element that has the behavior attached to it.
2 Choose Window > Behaviors and double-click the behavior.
3 Make your changes and click OK in the behavior’s dialog box.
All occurrences of that behavior in that page are updated. If other pages on your site have that behavior, you must
update them page by page.
Download and install third-party behaviors
Many extensions are available on the Exchange for Dreamweaver website
(www.adobe.com/go/dreamweaver_exchange).
1 Choose Window > Behaviors and select Get More Behaviors from the Add Behavior menu.
Your primary browser opens, and the Exchange site appears.
2 Browse or search for packages.
3 Download and install the extension package you want.
For more information, see Add and manage extensions in Dreamweaver .
Applying built-in JavaScript behaviors
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see this article.
Using built-in behaviors
The behaviors included with Dreamweaver have been written to work in modern browsers. The behaviors fail silently
in older browsers.
Note: The Dreamweaver actions have been carefully written to work in as many browsers as possible. If you remove code
from a Dreamweaver action by hand, or replace it with your own code, you may lose cross-browser compatibility.
Although the Dreamweaver actions were written to maximize cross-browser compatibility, some browsers do not
support JavaScript at all, and many people who browse the web keep JavaScript turned off in their browsers. For best
cross-platform results, provide alternative interfaces enclosed in

Adobe Dreamweaver CC (2015) Help 2015 En

-

Sidebar Content

Main Content

H2 level heading

Sidebar Content

Main Content

H2 level heading