Adobe Using Dreamweaver CS5.5 Instruction Manual Cs5 En
User Manual: adobe Dreamweaver - CS5.5 - Instruction Manual Free User Guide for Adobe Dreamweaver Software, Manual
Open the PDF directly: View PDF 
.
Page Count: 668
Using
ADOBE® DREAMWEAVER® CS5 & CS5.5
Legal notices
Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
Last updated 12/7/2011
iii
Contents
Chapter 1: What’s New
What’s New . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 2: Workspace
Dreamweaver workflow and workspace
Working in the Document window
................................................................................ 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Using toolbars, inspectors, and context menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Customizing the Dreamweaver CS5 workspace
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Keyboard shortcuts
Extensions
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Chapter 3: Working with Dreamweaver sites
About Dreamweaver sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Set up a local version of your site
Connect to a remote server
Set up a testing server
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Version Control and Advanced settings
Manage Sites dialog box options
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Import and export Dreamweaver site settings
Edit an existing remote website
Set site preferences for transferring files
Managing Contribute sites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Chapter 4: Creating and Managing Files
Creating and opening documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Managing files and folders
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Getting and putting files to and from your server
Checking in and checking out files
Synchronizing files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Comparing files for differences
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Rolling back files (Contribute users)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Cloaking files and folders in your Dreamweaver site
Storing file information in Design Notes
Testing your Dreamweaver site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Chapter 5: Managing assets and libraries
About assets and libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Working with assets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Creating and managing a list of favorite assets
Working with library items
Chapter 6: Creating pages with CSS
Understanding Cascading Style Sheets
The CSS Styles panel
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Last updated 12/7/2011
iv
USING DREAMWEAVER
Contents
Enhancements to CSS3 support in the CSS styles panel (CS5.5)
Set CSS Styles preferences
Create a new CSS rule
Set CSS properties
Edit a CSS rule
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Add a property to a CSS rule
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Apply, remove, or rename CSS class styles
Move/export CSS rules
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Convert inline CSS to a CSS rule
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Link to an external CSS style sheet
Edit a CSS style sheet
Format CSS code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Disable/Enable CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Inspect CSS in Live view
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Check for cross-browser CSS rendering issues
Use Design-Time style sheets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Use Dreamweaver sample style sheets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Update CSS style sheets in a Contribute site
Laying out pages with CSS
Working with div tags
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Chapter 7: Laying out pages with HTML
Using visual aids for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Presenting content with tables
Using Frames
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Chapter 8: Adding content to pages
Use the Insert panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Set page properties
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Set CSS link properties for an entire page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Set CSS heading properties for an entire page
Set title and encoding properties for a page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Use a tracing image to design a page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Understanding document encoding
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Select and view elements in the Document window
Colors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Zoom in and out
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Set download time and size preferences
Working with text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Set text properties in the Property inspector
Spell check a web page
Import tabular data
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Import Microsoft Office documents (Windows only)
Create a link to a Word or Excel document
Use HTML Formatting
Use horizontal rules
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Modify font combinations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Last updated 12/7/2011
v
USING DREAMWEAVER
Contents
Insert dates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Adding and modifying images
Adding video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Inserting SWF files
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Adding web widgets
Adding Sound
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Adding media objects
Automating tasks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Chapter 9: Linking and navigation
About linking and navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Linking
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Jump menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Navigation bars
Image maps
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Troubleshooting links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Chapter 10: Previewing pages
Previewing pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Chapter 11: Working with page code
General information about coding in Dreamweaver
Setting up your coding environment
Setting coding preferences
Writing and editing code
Collapsing code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Optimizing and debugging code
Editing code in Design view
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Working with head content for pages
Working with server-side includes
Managing tag libraries
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Importing custom tags into Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Chapter 12: Adding JavaScript behaviors
Using JavaScript behaviors (general instructions)
Applying built-in JavaScript behaviors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Chapter 13: Working with other applications
Cross-application integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Working with Fireworks and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Working with Photoshop and Dreamweaver
Working with Flash and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Working with Adobe Bridge and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Working with Device Central and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Working with ConnectNow and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
AIR Extension for Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Last updated 12/7/2011
vi
USING DREAMWEAVER
Contents
Chapter 14: Creating and managing templates
About Dreamweaver templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Recognizing templates and template-based documents
Creating a Dreamweaver template
Creating editable regions in templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Creating repeating regions in templates
Using optional regions in templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Defining editable tag attributes in templates
Creating a nested template
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Editing, updating, and deleting templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Exporting and importing template content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Applying or removing a template from an existing document
Editing content in a template-based document
Template syntax
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Setting authoring preferences for templates
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Chapter 15: Building Spry pages visually
About the Spry framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Working with Spry widgets (general instructions)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Working with the Spry Accordion widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Working with the Spry Menu Bar widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Working with the Spry Collapsible Panel widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Working with the Spry Tabbed Panels widget
Working with the Spry Tooltip widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Working with the Spry Validation Radio Group widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Working with the Spry Validation Text Field widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Working with the Spry Validation Text Area widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Working with the Spry Validation Select widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Working with the Spry Validation Checkbox widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Working with the Spry Validation Password widget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Working with the Spry Validation Confirm widget
Displaying data with Spry
Adding Spry effects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Chapter 16: Designing for multiple screens and devices
Creating media queries (CS5.5 and later) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Change page orientation for mobile devices (CS5.5 and later)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Creating web applications for mobile devices (CS5.5 and later)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Packaging web applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Preview pages using the Multiscreen Preview panel
Chapter 17: Using Adobe Online Services
Using Dreamweaver with Adobe Online services
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Chapter 18: Displaying XML data with XSLT
About XML and XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Performing XSL transformations on the server
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Last updated 12/7/2011
vii
USING DREAMWEAVER
Contents
Performing XSL transformations on the client
Missing character entities for XSLT
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Chapter 19: Preparing to build dynamic sites
Understanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Set up your computer for application development
Database connections for ColdFusion developers
Database connections for ASP developers
Database connections for PHP developers
Troubleshooting database connections
Removing connection scripts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
Chapter 20: Making pages dynamic
Optimizing the workspace for visual development
Designing dynamic pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
Dynamic content sources overview
Dynamic content panels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Defining sources of dynamic content
Adding dynamic content to pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Changing dynamic content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Displaying database records
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Viewing live data
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Adding custom server behaviors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
Chapter 21: Building applications visually
Building master and detail pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Building search and results pages
Building a record insert page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Building an update record page
Building a delete record page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
Building pages with advanced data manipulation objects (ColdFusion, ASP)
Building a registration page
Building a login page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
Building a page that only authorized users can access
Securing a folder in your application (ColdFusion)
Using ColdFusion components
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623
Chapter 22: Building forms
Using forms to collect information from users
Creating web forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633
Building ColdFusion forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Chapter 23: Accessibility
Dreamweaver and accessibility
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Last updated 12/7/2011
1
Chapter 1: What’s New
What’s New
Important: This page provides a list of new features in Dreamweaver CS5 and Dreamweaver CS5.5. This page does NOT
tell you how to use those features. For more information about any of the new features, click the corresponding links
provided. You can also watch a CS5 feature overview, or a CS5.5 feature overview on AdobeTV.
What’s new (CS5.5)
Multiscreen support
Preview your designs in standard screen resolutions, or use media queries to define resolution. When testing for
devices that change page orientation based on how the device is held, use the landscape and portrait options during
preview. For more information, see “Designing for multiple screens and devices” on page 462.
Media query support
Use media queries to customize the appearance of your site for different screen resolutions. For more information, see
“Creating media queries (CS5.5 and later)” on page 462.
Web applications for mobile devices
Quickly design a web application that works on most mobile devices using the jQuery Mobile widget. For more
information, see “Creating web applications for mobile devices (CS5.5 and later)” on page 464.
Package web applications for Android, iPhone, and iPad
Package your web applications in Dreamweaver, and deploy them to Android™ and iOS-based devices. For more
information, see “Packaging web applications” on page 467.
HTML5, CSS3, and jQuery support
Dreamweaver supports code hinting for HTML5, CSS3, and jQuery.
Starter layouts are also available for building HTML5 pages from scratch. Dreamweaver supports the HTML5 feature
to embed videos in HTML pages. For more information, see “Embed videos in web pages (HTML5)” on page 237.
The CSS panel has been enhanced to support commonly used CSS3 properties. For more information, see “Code
hints” on page 292 and “Enhancements to CSS3 support in the CSS styles panel (CS5.5)” on page 126.
FTPS support
Transfer data using FTPS. FTPS (FTP over SSL) provides both encryption and authentication support as compared to
SFTP that supports only encryption. For more information, see “FTPS connections (CS5.5)” on page 41.
W3C validator support
Create standards-compliant HTML and XHTML pages using the W3C validator in Dreamweaver. For more
information, see “Validate documents using W3C validator (CS5.5)” on page 312.
Last updated 12/7/2011
2
USING DREAMWEAVER
What’s New
What’s new (CS5)
Adobe BrowserLab
Dreamweaver CS5 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fast
and accurate solution for cross-browser compatibility testing. With BrowserLab you can preview web pages and local
content using multiple viewing and comparison tools. See “BrowserLab” on page 471.
Business Catalyst integration
Adobe Business Catalyst is a hosted application that replaces traditional desktop tools with one, central platform for
web designers. The application works hand-in-hand with Dreamweaver, and lets you build everything from basic datadriven websites to powerful online stores. See http://www.adobe.com/go/business_catalyst_get_extension_en.
CSS enhancements
CSS Disable/Enable
CSS Disable/Enable lets you disable and re-enable CSS properties directly from the CSS Styles panel. Disabling a CSS
property simply comments out the specified property without actually deleting it. See “Disable/Enable CSS” on
page 141.
CSS Inspection
Inspect mode lets you visually display the CSS box model properties—including padding, border, and margin—in
detail without reading code or requiring a separate third-party utility such as Firebug. See “Inspect CSS in Live view”
on page 142.
CSS starter layouts
Dreamweaver CS5 includes updated and simplified CSS starter layouts. The complex descendent selectors from the
CS4 layouts have been removed and replaced with simplified, easy-to-understand classes. See “Create a page with a
CSS layout” on page 150.
Dynamically-Related Files
The Dynamically-Related Files feature lets you discover all of the external files and scripts necessary to assemble PHPbased Content Management System (CMS) pages, and displays their filenames in the Related Files toolbar. By default
Dreamweaver supports file discovery for the Wordpress, Drupal, and Joomla! CMS frameworks. See “Open
Dynamically-Related Files” on page 70.
Live view navigation
Live view navigation activates links in Live view, allowing you to interact with server-side applications and dynamic
data. The feature also allows you to enter a URL to inspect pages served from a live web server and edit pages you have
browsed to if they exist in one of your locally defined sites. See “Previewing pages in Dreamweaver” on page 276.
PHP custom class code hinting
PHP custom class code hinting displays the proper syntax for PHP functions, objects, and constants, helping you type
more accurate code. Code hinting also works with your own custom functions and classes, as well as third-party
frameworks, such as the Zend framework.
Last updated 12/7/2011
3
USING DREAMWEAVER
What’s New
Simplified site setup
The newly redesigned Site Definition dialog box (now the Site Setup dialog box) makes it easier to set up a local
Dreamweaver site so that you can start building web pages right away. The remote server category lets you specify your
remote and testing servers in one view. See “Set up a local version of your site” on page 37 and “Connect to a remote
server” on page 38.
Site-specific code hints
The Site-specific code hints feature lets you customize your coding environment when working with third-party PHP
libraries and CMS frameworks such as WordPress, Drupal, Joomla!, or other frameworks. Theme files for blogs and
other custom PHP files and directories can be included or excluded as sources for code-hints. See “Site-specific code
hints” on page 294.
Subversion support enhancements
Dreamweaver CS5 expands its support for Subversion, allowing you to move, copy, and delete files locally, and then
synchronize changes with your remote SVN repository. The new Revert command allows you to quickly correct tree
conflicts or rollback to a previous version of a file. Additionally, a new extension allows you to specify which version
of Subversion you would like to work with on a given project. See “Use Subversion (SVN) to get and check in files” on
page 88.
Deprecated features
The following features have been deprecated as of Dreamweaver CS5:
• Accessibility validation report
• ASP/JavaScript server behaviors
• Check Browser JavaScript behavior
• Connect to FTP/RDS server without defining a site
• Control Shockwave or SWF JavaScript behavior
• Create Web Photo Album
• Hide Pop-up Menu JavaScript behavior
• InContext Editing Manage Available CSS Classes
• Insert FlashPaper
• Insert/Remove Mark of the Web
• Microsoft Visual Sourcesafe integration
• Navigation bars
• Play Sound JavaScript behavior
• Show Events menu (Behaviors panel)
• Show Pop-up Menu JavaScript behavior
• Timeline JavaScript behaviors
• Validate tags
• View Live Data
Last updated 12/7/2011
4
Chapter 2: Workspace
Dreamweaver workflow and workspace
Dreamweaver workflow overview
You can use several approaches to create a website. This is one approach:
Plan and set up your site
Determine where the files will go and examine site requirements, audience profiles, and site goals. Additionally,
consider technical requirements such as user access, as well as browser, plug-in, and download restrictions. After
you’ve organized your information and determined a structure, you can begin creating your site. (See “Working with
Dreamweaver sites” on page 36.)
Organize and manage your site files
In the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. The
Files panel also has many tools for managing your site, transferring files to and from a remote server, setting up a Check
In/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and remote
sites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly from the
Assets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of your
Adobe®Contribute® sites. (See “Managing files and folders” on page 72 and “Managing assets and libraries” on
page 106.)
Lay out your web pages
Choose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with one
another to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSS
layouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the page
structure. If you want to display multiple elements at once in a browser, you can use frames to lay out your documents.
Finally, you can create new pages based on a Dreamweaver template, then update the layout of those pages
automatically when the template changes. (See “Creating pages with CSS” on page 118 and “Laying out pages with
HTML” on page 167.)
Add content to pages
Add assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML links,
jump menus, and more. You can use built-in page-creation features for such elements as titles and backgrounds, type
directly in the page, or import content from other documents. Dreamweaver also provides behaviors for performing
tasks in response to specific events, such as validating a form when the visitor clicks the Submit button or opening a
second browser window when the main page has finished loading. Finally, Dreamweaver provides tools for
maximizing website performance and for testing pages to ensure compatibility with different web browsers. (See
“Adding content to pages” on page 198.)
Create pages by hand coding
Coding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editing
tools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and edit
your pages. (See “Working with page code” on page 281.)
Last updated 12/7/2011
5
USING DREAMWEAVER
Workspace
Set up a web application for dynamic content
Many websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow
some visitors to add new information and edit information in the databases. To create such pages, you must first set
up a web server and application server, create or modify a Dreamweaver site, and connect to a database. (See
“Preparing to build dynamic sites” on page 504.)
Create dynamic pages
In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from
databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto
the page.
You can set your page to display one record or many records at a time, display more than one page of records, add
special links to move from one page of records to the next (and back), and create record counters to help users keep
track of the records. You can encapsulate application or business logic using technologies such as Adobe® ColdFusion®
and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See
“Making pages dynamic” on page 532.)
Test and publish
Testing your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, you
publish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remains
current and functional. (See “Getting and putting files to and from your server” on page 80.)
For a video tutorial on what you can do with Dreamweaver, see www.adobe.com/go/lrvid4040_dw.
Workspace layout overview
The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the
most common operations in toolbars so that you can quickly make changes to your documents.
In Windows®, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all
windows and panels are integrated into a single larger application window.
Last updated 12/7/2011
6
USING DREAMWEAVER
Workspace
A
G
B
C
H
D
E F
I
A. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. CS Live G. Tag selector
H. Property inspector I. Files panel
On Mac OS®, Dreamweaver can display multiple documents in a single window with tabs that identify each document.
Dreamweaver can also display a floating workspace in which each document appears in its own individual window.
Panel groups are initially docked together, but can be undocked into their own windows. When panel groups are
docked and the document area is maximized, resizing or showing and hiding panels auto-sizes the main document,
just as it does on Windows.
Last updated 12/7/2011
7
USING DREAMWEAVER
Workspace
A
G
B
C
D
E
H
F
I
A. Application bar B. Document toolbar C. Workspace switcher D. Document window E. CS Live F. Panel groups G. Tag selector
H. Property inspector I. Files panel
For a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.
Workspace elements overview
The workspace includes the following elements.
Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows,
use the Window menu.
The Welcome screen Lets you open a recent document or create a new document. From the Welcome screen, you can
also learn more about Dreamweaver by taking a product tour or a tutorial.
The Application bar Across the top of the application window contains a workspace switcher, menus (Windows only),
and other application controls.
The Document toolbar Contains buttons that provide options for different views of the Document window (such as
Design view and Code view), various viewing options, and some common operations such as previewing in a browser.
The Standard toolbar (Not displayed in the default workspace layout.) Contains buttons for common operations from
the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.
To display the Standard toolbar, select View > Toolbars > Standard.
The Coding toolbar (Displayed in Code view only.) Contains buttons that let you perform many standard coding
operations.
The Style Rendering toolbar (Hidden by default.) Contains buttons that let you see how your design would look in
different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable
Cascading Style Sheets
(CSS) styles.
Last updated 12/7/2011
8
USING DREAMWEAVER
Workspace
The Document window Displays the current document as you create and edit it.
The Property inspector Lets you view and change a variety of properties for the selected object or text. Each object has
different properties. The Property inspector is not expanded by default in the Coder workspace layout.
The Tag selector Located in the Status bar at the bottom of the Document window. Shows the hierarchy of tags
surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents.
Panels Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files
panel. To expand a panel, double-click its tab.
The Insert panel Contains buttons for inserting various types of objects, such as images, tables, and media elements,
into a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example,
you can insert a table by clicking the Table button in the Insert panel. If you prefer, you can insert objects using the
Insert menu instead of the Insert panel.
The Files panel Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote
server. The Files panel also lets you access all the files on your local disk, much like
Windows Explorer
(Windows) or the Finder (Macintosh).
Document window overview
The Document window shows the current document. You can select any of the following views:
Design view A design environment for visual page layout, visual editing, and rapid application development. In this
view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see
when viewing the page in a browser.
Code view A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such PHP
or ColdFusion Markup Language (CFML)—and any other kind of code.
Split Code view A split version of Code view that lets you scroll to work on different sections of the document at the
same time.
Code and Design view Lets you see both Code view and Design view for the same document in a single window.
Live view Similar to Design view, Live view displays a more realistic representation of what your document will look
like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable.
However, you can edit in Code view and refresh Live view to see your changes.
Live Code view Only available when viewing a document in Live view. Live Code view displays the actual code that a
browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code
view is not editable.
When a Document window is maximized (the default), tabs appear at the top of the Document window showing the
filenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that you
haven’t saved yet.
To switch to a document, click its tab.
Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if
you’re viewing documents in separate windows). Related documents are documents associated with the current file,
such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in
the Related Files toolbar.
Last updated 12/7/2011
9
USING DREAMWEAVER
Workspace
More Help topics
“Working in the Document window” on page 17
“About Live view” on page 276
“Open Related Files” on page 68
“General information about coding in Dreamweaver” on page 281
Document toolbar overview
The Document toolbar contains buttons that let you toggle between different views of your document quickly. The
toolbar also contains some common commands and options related to viewing the document and transferring it
between the local and remote sites. The illustration below shows the expanded Document toolbar.
A
B
C
D
E
F
G
H
I
J
K
L
A. Show Code view B. Show Code and Design view C. Show Design view D. Live Code view E. Check Browser Compatibility F. Live view
G. CSS Inspect mode H. Preview/Debug in Browser I. Visual Aids J. Refresh Design View K. Document Title L. File Management
The following options appear in the Document toolbar:
Show Code View Displays only the Code view in the Document window.
Show Code and Design Views Splits the Document window between the Code and the Design views. When you select
this combined view, the option Design View on Top becomes available in the View Options menu.
Show Design View Displays only the Design view in the Document window.
Note: If you are working with XML, JavaScript, CSS, or other code based file types, you cannot view the files in Design
view and the Design and Split buttons are dimmed out.
Live View Displays a non-editable, interactive, browser based view of the document.
Live Code View Displays the actual code used by the browser to execute the page.
Document Title Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your
document already has a title, it appears in this field.
File Management Displays the File Management pop-up menu.
Preview/Debug in Browser Allows you to preview or debug your document in a browser. Select a browser from the
pop-up menu.
Refresh Design View Refreshes the document’s Design view after you make changes in Code view. Changes you make
in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or
clicking this button.
Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to
select a code block’s opening or closing tags.
View Options Allows you to set options for Code view and Design view, including which view you want to appear
above the other. Options in the menu are for the current view: Design view, Code view, or both.
Visual Aids Lets you use different visual aids to design your pages.
Validate Markup Lets you validate the current document or a selected tag.
Check Browser Compatibility Lets you check if your CSS is compatible across different browsers.
Last updated 12/7/2011
10
USING DREAMWEAVER
Workspace
More Help topics
“Preview pages in Live view” on page 276
“Setting coding preferences” on page 287
“View and edit head content” on page 321
“Using visual aids for layout” on page 167
Standard toolbar overview
The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse in
Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the
equivalent menu commands.
Style Rendering toolbar overview
The Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look in
different media types if you use media-dependent style sheets. It also contains a button that lets you enable or disable
CSS styles. To display the toolbar, select View > Toolbars > Style Rendering.
This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet might
specify a body rule for print media and a different body rule for handheld devices. For more information on creating
media-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.
By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered on
a computer screen). You can view the following media type renderings by clicking the respective buttons in the Style
Rendering toolbar.
Render Screen Media Type Shows you how the page appears on a computer screen.
Render Print Media Type Shows you how the page appears on a printed piece of paper.
Render Handheld Media Type Shows you how the page appears on a handheld device, such as a mobile phone or a
BlackBerry device.
Render Projection Media Type Shows you how the page appears on a projection device.
Render TTY Media Type Shows you how the page appears on a teletype machine.
Render TV Media Type Shows you how the page appears on a television screen.
Toggle Displaying Of CSS Styles Lets you enable or disable CSS styles. This button works independently of the other
media buttons.
Design-time Style Sheets Lets you specify a Design-time style sheet.
For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.
Browser Navigation toolbar overview
The Browser Navigation toolbar becomes active in Live view, and shows you the address of the page you’re looking at
in the Document window. As of Dreamweaver CS5, Live view acts like a regular browser, so even if you browse to a
site outside of your local site (for example, http://www.adobe.com), Dreamweaver will load the page in the Document
window.
Last updated 12/7/2011
11
USING DREAMWEAVER
Workspace
A
B
C
A. Browser controls B. Address box C. Live view options
By default, links are not active in Live view. Having links non-active lets you select or click link text in the Document
window without being taken to another page. To test links in Live view, you can enable one-time clicking or
continuous clicking by selecting Follow Links or Follow Links Continuously from the View options menu to the right
of the address box.
More Help topics
“Previewing pages in Dreamweaver” on page 276
Coding toolbar overview
The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and
expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting
recently used code snippets. The Coding toolbar appears vertically on the left side of the Document window, and is
only visible when Code view is showing.
You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding).
You can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and Auto
Indent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates the
toolbar. For more information, see Extending Dreamweaver.
More Help topics
“Insert code with the Coding toolbar” on page 296
Last updated 12/7/2011
12
USING DREAMWEAVER
Workspace
Status bar overview
The Status bar at the bottom of the Document window provides additional information about the document you are
creating.
A
B
C
D
E
F
G
H
A. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window size pop-up menu G. Document size and estimated
download time H. Encoding indicator
Tag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that
tag and all its contents. Click 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.
Select tool Enables and disables the Hand tool.
Hand tool Lets you click the document and drag it in the Document window.
Zoom tool and Set Magnification pop-up menu Let you set a magnification level for your document.
Window size pop-up menu (Not available in Code view.) Lets you resize the Document window to predetermined or
custom dimensions. When you change the view size of a page in design or live view only the dimensions of the view
size change. The document size is unaltered.
In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you
select a size corresponding to a media query, Dreamweaver uses the media query to display the page. You can also
change the page orientation to preview the page for mobile devices where the page layout changes based on how the
device is held.
Document size and download time Shows the estimated document size and estimated download time for the page,
including all dependent files such as images and other media files.
Encoding indicator Shows the text encoding for the current document.
More Help topics
“Set window size and connection speed” on page 20
“Zoom in and out” on page 208
“Resize the Document window” on page 18
“Set download time and size preferences” on page 209
Last updated 12/7/2011
13
USING DREAMWEAVER
Workspace
Property inspector overview
The Property inspector lets you examine and edit the most common properties for the currently selected page element,
such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. For
example, if you select an image on your page, the Property inspector changes to show properties for the image (such
as the file path to the image, the width and height of the image, the border around the image, if any, and so on).
The Property inspector is at the lower edge of the workspace by default, but you can undock it and make it a floating
panel in the workspace.
More Help topics
“Dock and undock panels” on page 23
“Use the Property inspector” on page 21
Insert panel overview
The Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons are
organized into several categories, which you can switch by selecting the desired category from the Category pop-up
menu. Additional categories appear when the current document contains server code, such as ASP or CFML
documents.
Last updated 12/7/2011
14
USING DREAMWEAVER
Workspace
Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the
default action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, the
next time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new option
from the pop-up menu, the default action for the button changes.
The Insert panel is organized in the following categories:
The Common category Lets you create and insert the most commonly used objects, such as images and tables.
The Layout category Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choose
two views for tables: Standard (default) and Expanded Tables.
The Forms category Contains buttons for creating forms and inserting form elements, including Spry validation
widgets.
The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated
regions, and record insertion and update forms.
The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets.
The InContext Editing category Contains buttons for building InContext editing pages, including buttons for Editable
Regions, Repeating Regions, and managing CSS classes.
The Text category Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.
The Favorites category Lets you group and organize the Insert panel buttons you use the most in one common place.
Server-code categories Available only for pages that use a particular server language, including ASP, CFML Basic,
CFML Flow, CFML Advanced, and PHP. Each of these categories provides server-code objects that you can insert in
Code view.
Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a
horizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar (though
you cannot hide and display it in the same way as other toolbars).
More Help topics
“Use the Insert panel” on page 198
Last updated 12/7/2011
15
USING DREAMWEAVER
Workspace
Files panel overview
Use the Files panel to view and manage the files in your Dreamweaver site.
When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and expand or
collapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, the
testing server, or the SVN repository as a list of files. When expanded, it displays the local site and either the remote
site, the testing server, or the SVN repository.
For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site—
that appears by default in the collapsed panel.
(CS5.5) The Files panel interacts with the server at regular intervals to update its content. An error message is displayed
when you try to perform an action in the Files panel when it is running these auto-updates. To disable auto-updates,
open the Files panel options menu, and deselect Auto-Update in the View menu.
To update the contents of the panel manually, use the Refresh button in the panel. The current check-out status of files,
however, is updated only when auto-updates are enabled.
More Help topics
“Work with files in the Files panel” on page 75
Last updated 12/7/2011
16
USING DREAMWEAVER
Workspace
CSS Styles panel overview
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current
mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles
panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and
Current mode.
You can resize any of the panes by dragging the borders between the panes.
In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS
properties for the current selection in the document, a Rules pane that displays the location of selected properties (or
a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS
properties for the rule defining the selection.
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The
All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached
to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
Visual guides overview
Dreamweaver provides several kinds of visual guides to help you design documents and predict approximately how
they appear in browsers. You can do any of the following:
• Instantly snap the Document window to a desired window size to see how the elements fit on the page.
• Use a tracing image as the page background to help you duplicate a design created in an illustration or imageediting application such as Adobe® Photoshop® or Adobe® Fireworks®.
• Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.
• Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).
Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap
to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the
grid.) Snapping works regardless of whether the grid is visible.
Last updated 12/7/2011
17
USING DREAMWEAVER
Workspace
More Help topics
“Using visual aids for layout” on page 167
GoLive users
If you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introduction
to the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.
More Help topics
Dreamweaver for GoLive users tutorial
Working in the Document window
Switch between views in the Document window
You can view a document in the Document window in Code view, Split Code view, Design view, Code and Design
views (Split view), or Live view. You also have the option of viewing Split Code view or Code and Design views
horizontally or vertically. (Horizontal display is the default.)
Switch to Code view
❖ Do one of the following:
• Select View > Code.
• In the Document toolbar, click the Show Code View button.
Switch to Split Code view
Split Code view splits your document in two so that you can work on two sections of the code at once.
❖ Select View > Split Code.
Switch to Design view
❖ Do one of the following:
• Select View > Design.
• In the Document toolbar, click the Show Design View button.
Show both Code and Design views
❖ Do one of the following:
• Select View > Code and Design.
• In the Document toolbar, click the Show Code and Design Views button.
Last updated 12/7/2011
18
USING DREAMWEAVER
Workspace
By default, Code view appears at the top of the Document window and Design view appears at the bottom. To display
Design view on top, select View > Design View on Top.
Toggle between Code view and Design view
❖ Press Control+backquote (`).
If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view to
the other.
Split views vertically
This option is only available for Split Code view and Code and Design views (Split view). It is disabled for Code view
and Design view.
1 Make sure that you are in Split Code view (View > Split Code) or Code and Design views (View > Code and
Design).
2 Select View > Split Vertically.
If you are in Code and Design views, you have the option of displaying Design view on the left (View > Design View
on Left).
More Help topics
“Document window overview” on page 8
“Preview pages in Live view” on page 276
Cascade or tile Document windows
If you have many documents open at once, you can cascade or tile them.
More Help topics
“Manage windows and panels” on page 22
“Display tabbed documents (Dreamweaver Macintosh)” on page 28
Cascade Document windows
❖ Select Window > Cascade.
Tile Document windows
• (Windows) Select Window > Tile Horizontally or Window > Tile Vertically.
• (Macintosh) Select Window > Tile.
Resize the Document window
The Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best at
a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes,
or create sizes.
When you change the view size of a page in design or live view only the dimensions of the view size change. The
document size is unaltered.
Last updated 12/7/2011
19
USING DREAMWEAVER
Workspace
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.
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.
Last updated 12/7/2011
20
USING DREAMWEAVER
Workspace
For example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Mac
next to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.
Set window size and connection speed
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Status Bar (CS5) or Window Sizes (CS5.5 and later) from the Category list on the left.
3 Set any of the following options:
Window Sizes lets you customize the window sizes that appear in the Status bar’s pop-up menu.
Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size. The
download size for the page is displayed in the Status bar. When an image is selected in the Document window, the
image’s download size is displayed in the Property inspector.
More Help topics
“Status bar overview” on page 12
“Resize the Document window” on page 18
Reports in Dreamweaver
You can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the following
types of reports:
Search Lets you search for tags, attributes, and specific text within tags.
Reference Lets you search for helpful reference information.
Validation Lets you check for code or syntax errors.
Browser Compatibility Lets you test the HTML in your documents to see if any tags or attributes are unsupported by
your target browsers.
Link Checker Lets you find and fix broken, external, and orphaned links.
Site Reports Enable you to improve workflow and test HTML attributes in your site. Workflow reports include
checked out by, recently modified, and design notes; HTML reports include combinable nested font tags, accessibility,
missing Alt text, redundant nested tags, removable empty tags, and untitled documents.
FTP Log Enables you to view all FTP file-transfer activity.
Server Debug Lets you view information to debug an Adobe® ColdFusion® application.
Using toolbars, inspectors, and context menus
Display toolbars
Use the Document and Standard toolbars to perform document-related and standard editing operations; the Coding
toolbar to insert code quickly; and the Style Rendering toolbar to display your page as it would appear in different
media types. You can choose to display or hide the toolbars as necessary.
• Select View > Toolbars, and then select the toolbar.
• Right-click (Windows) or Control-click (Macintosh) any of the toolbars and select the toolbar from the context menu.
Last updated 12/7/2011
21
USING DREAMWEAVER
Workspace
Note: To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbar
from the View Options pop-up menu at the top of the inspector.
More Help topics
“Document toolbar overview” on page 9
“Standard toolbar overview” on page 10
“Coding toolbar overview” on page 11
“Style Rendering toolbar overview” on page 10
Use the Property inspector
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.
More Help topics
“Property inspector overview” on page 13
“Set text properties in the Property inspector” on page 217
“Dock and undock panels” on page 23
“Change attributes with the Tag inspector” on page 316
Show or hide the Property inspector
❖ Select Window > Properties.
Expand or collapse the Property inspector
❖ Click the expander arrow in the lower-right corner of the Property inspector.
View and change properties for a page element
1 Select the page element in the Document window.
You might have to expand the Property inspector to view all the properties for the selected element.
2 Change any of the properties in the Property inspector.
Note: For information on specific properties, select an element in the Document window, and then click the Help icon in
the upper-right corner of the 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.
Last updated 12/7/2011
22
USING DREAMWEAVER
Workspace
Use context menus
Context menus provide convenient access to the most useful commands and properties related to the object or window
you’re working with. Context menus list only those commands that pertain to the current selection.
1 Right-click (Windows) or Control-click (Macintosh) the object or window.
2 Select a command from the context menu.
Customizing the Dreamweaver CS5 workspace
Manage windows and panels
You can create a custom workspace by moving and manipulating Document windows and panels. You can also save
workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.
Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the
products.
Rearrange, dock, or float document windows
When you open more than one file, the Document windows are tabbed.
• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.
• To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group.
Last updated 12/7/2011
23
USING DREAMWEAVER
Workspace
Note: In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window,
or Window > Arrange > Float All In Windows to float all of the Document windows at once. See tech note kb405298
for more information.
Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s
Minimize button to create floating windows (Windows), or choose Window > Tile Vertically to create side-by-side
Document windows. Search “Tile Vertically” in Dreamweaver Help for more information on this topic. The workflow
is slightly different for Macintosh users.
• To dock a Document window to a separate group of Document windows, drag the window into the group.
• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or
sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.
Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands
in the Window menu to help you lay out your documents.
• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s
tab for a moment.
Note: Some products do not support this functionality.
Dock and undock panels
A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and
undock panels by moving them into and out of a dock.
• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.
• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.
• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock
or make it free-floating.
Navigator panel being dragged out to new dock, indicated by blue vertical highlight
Last updated 12/7/2011
24
USING DREAMWEAVER
Workspace
Navigator panel now in its own dock
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
B
C
Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.
A. Title bar B. Tab C. Drop zone
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.
Last updated 12/7/2011
25
USING DREAMWEAVER
Workspace
Manipulate panel groups
• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.
Adding a panel to a panel 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.
Free-floating stacked panels
• 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.
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.
Last updated 12/7/2011
26
USING DREAMWEAVER
Workspace
Panels collapsed to icons
Panels expanded from icons
• 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.
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.
Last updated 12/7/2011
27
USING DREAMWEAVER
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.
• To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface
preferences.
Last updated 12/7/2011
28
USING DREAMWEAVER
Workspace
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.
More Help topics
“Display or switch workspaces” on page 27
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 12/7/2011
29
USING DREAMWEAVER
Workspace
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.
Last updated 12/7/2011
30
USING DREAMWEAVER
Workspace
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” on page 268.)
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 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, Controlclick (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 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 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.
Last updated 12/7/2011
31
USING DREAMWEAVER
Workspace
For more information, see “Task automation” on page 255.
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.
More Help topics
“Workspace layout overview” on page 5
“Update links automatically” on page 268
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” on page 59.
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.
More Help topics
“Understanding document encoding” on page 204
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.
Last updated 12/7/2011
32
USING DREAMWEAVER
Workspace
More Help topics
“Use the color picker” on page 208
“Change the highlight color of div tags” on page 154
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.
Keyboard shortcuts
Create a reference sheet for the current shortcut set
A reference sheet is a record of the current shortcut set. The information is stored in HTML table format. You can view
the reference sheet in a web browser or print it.
1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh).
2 Click the Export Set As HTML button, which is the third button in the set of four at the top of the dialog box.
3 In the Save dialog box that appears, enter the name for the reference sheet, and select the appropriate location for
saving the file.
Customize keyboard shortcuts
Use the Keyboard Shortcut Editor to create your own shortcut keys, including keyboard shortcuts for code snippets.
You can also remove shortcuts, edit existing shortcuts, and select a predetermined set of shortcuts in the Keyboard
Shortcut Editor.
More Help topics
“Work with code snippets” on page 304
Create a keyboard shortcut
Create your own shortcut keys, edit existing shortcuts, or select a predetermined set of shortcuts.
1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh).
Last updated 12/7/2011
33
USING DREAMWEAVER
Workspace
2 Set any of the following options and click OK:
Current Set Allows you to choose a set of predetermined shortcuts included with Dreamweaver, or any custom set
you’ve defined. The predetermined sets are listed at the top of the menu. For example, if you are familiar with the
shortcuts found in HomeSite or BBEdit, you can use those shortcuts by choosing the corresponding predetermined set.
Commands Allows you to select a category of commands to edit. For example, you can edit menu commands, such as
the Open command, or code editing commands, such as Balance Braces.
To add or edit a keyboard shortcut for a code snippet, select Snippet from the Commands pop-up menu.
The command list Displays the commands associated with the category you selected from the Commands pop-up
menu, along with the assigned shortcuts. The Menu Commands category displays this list as a tree view that replicates
the structure of the menus. The other categories list the commands by name (such as Quit Application), in a flat list.
Shortcuts Displays all shortcuts assigned to the selected command.
Add Item (+) Adds a new shortcut to the current command. Click this button to add a new blank line to the Shortcuts.
Enter a new key combination and click Change to add a new keyboard shortcut for this command. You can assign two
different keyboard shortcuts for each command; if there are already two shortcuts assigned to a command, the Add
Item button does nothing.
Remove Item (-) Removes the selected shortcut from the list of shortcuts.
Press Key Displays the key combination you enter when you’re adding or changing a shortcut.
Change Adds the key combination shown in the Press Key to the list of shortcuts, or changes the selected shortcut to
the specified key combination.
Duplicate Set Duplicates the current set. Give the new set a name; the default name is the current set’s name with the
word copy appended.
Rename Set Renames the current set.
Export as HTML File Saves the current set in an HTML table format for easy viewing and printing. You can open the
HTML file in your browser and print the shortcuts for easy reference.
Delete Set Deletes a set. (You cannot delete the active set.)
Remove a shortcut from a command
1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh).
2 From the Commands pop-up menu, select a command category.
3 In the Commands list, select a command and then select a shortcut.
4 Click the Remove Item (-) button.
Add a shortcut to a command
1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh).
2 From the Commands pop-up menu, select a command category.
3 In the Commands list, select a command.
To add a keyboard shortcut for a code snippet, select Snippet from the Commands pop-up menu.
The shortcuts assigned to the command appear in the Shortcuts.
Last updated 12/7/2011
34
USING DREAMWEAVER
Workspace
4 Prepare to add a shortcut by doing one of the following:
• If there are fewer than two shortcuts already assigned to the command, click the Add Item (+) button. A new blank
line appears in the Shortcuts and the insertion point moves to the Press Key.
• If there are already two shortcuts assigned to the command, select one of them (that one will be replaced by the new
shortcut). Then click in the Press Key.
5 Press a key combination. The key combination appears in the Press Key.
Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another
command), an explanatory message appears just below the Shortcuts and you may be unable to add or edit the shortcut.
6 Click Change. The new key combination is assigned to the command.
Edit an existing shortcut
1 Select Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard Shortcuts (Macintosh).
2 From the Commands pop-up menu, select a command category.
3 In the Commands list, select a command and then select a shortcut to change.
4 Click in the Press Key and enter a new key combination.
5 Click the Change button to change the shortcut.
Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another
command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the
shortcut.
About keyboard shortcuts and non-U.S. keyboards
The default Dreamweaver keyboard shortcuts work primarily on U.S.-standardized keyboards. Keyboards from other
countries (including those produced in the United Kingdom), may not provide the functionality necessary for utilizing
these shortcuts. If your keyboard does not support certain Dreamweaver-enabled shortcuts, Dreamweaver disables
their functionality.
To customize keyboard shortcuts that work with non-U.S.-standardized keyboards, see “Changing keyboard shortcut
mappings” in
Extending Dreamweaver
.
Extensions
Add and manage extensions in Dreamweaver
Extensions are new features that you can add easily to Dreamweaver. You can use many types of extensions; for
example, there are extensions that let you reformat tables, connect to back-end databases, or help you write scripts for
browsers.
Note: To install extensions that all users have access to in a multiuser operating system, you must be logged in as
Administrator (Windows) or root (Mac OS X).
To find the latest extensions for Dreamweaver, use the
Last updated 12/7/2011
35
USING DREAMWEAVER
Workspace
Adobe Exchange
website at www.adobe.com/go/dreamweaver_exchange/. Once there, you can log in and download extensions (many
of which are free), join discussion groups, view user ratings and reviews, and install and use the Extension Manager.
You must install the Extension Manager before you can install extensions.
The Extension Manager is a separate application that lets you install and manage extensions in Adobe applications.
Start the Extension Manager from Dreamweaver by choosing Commands > Manage Extensions.
1 On the
2 Adobe Exchange
3
website, click the download link for an extension.
Your browser might let you choose to open and install it directly from the site or save it to disk.
• If you are opening the extension directly from the site, the Extension Manager handles the installation
automatically.
• If you are saving the extension to disk, a good place to save the extension package file (.mxp or .mxi) is the
Downloaded Extensions folder within the Dreamweaver application folder on your computer.
4 Double-click the extension package file, or open the Extension Manager and select File > Install Extension. (Some
extensions aren’t accessible until you restart the application.
Note: Use the Extension Manager to remove extensions or to see more information about an extension.
More Help topics
“About customizing Dreamweaver in multiuser systems” on page 29
Last updated 12/7/2011
36
Chapter 3: Working with Dreamweaver
sites
A Adobe® Dreamweaver® CS5 site is a collection of all of the files and assets in your website. You can create web pages
on your computer, upload them to a web server, and maintain the site by transferring updated files whenever you save
them. You can also edit and maintain websites that were created without Dreamweaver.
About Dreamweaver sites
What is a Dreamweaver “site”?
In Dreamweaver the term “site” refers to a local or remote storage location for the documents that belong to a website.
A Dreamweaver site provides a way to organize and manage all of your web documents, upload your site to a web
server, track and maintain your links, and manage and share files. You should define a site to take full advantage of
Dreamweaver features.
Note: To define a Dreamweaver site, you only need to set up a local folder. To transfer files to a web server or to develop
web applications, you must also add information for a remote site and testing server.
A Dreamweaver site consists of as many as three parts, or folders, depending on your development environment and
the type of website you are developing:
Local root folder Stores the files you’re working on. Dreamweaver refers to this folder as your “local site.” This folder
is typically on your local computer, but it can also be on a network server.
Remote folder Stores your files for testing, production, collaboration, and so on. Dreamweaver refers to this folder as
your “remote site” in the Files panel. Typically, your remote folder is on the computer where your web server is
running. The remote folder holds the files that users access on the Internet.
Together, the local and remote folders enable you to transfer files between your local hard disk and web server, making
it easy to manage files in your Dreamweaver sites. You work on files in the local folder, and then publish them to the
remote folder when you want other people to view them.
Testing server folder The folder where Dreamweaver processes dynamic pages.
For a tutorial on defining a Dreamweaver site, see www.adobe.com/go/learn_dw_comm08_en.
Understanding local and remote folder structure
When you want to use Dreamweaver to connect to a remote folder, you specify the remote folder in the Servers
category of the Site Setup dialog box. The remote folder that you specify (also referred to as the “host directory”) should
correspond to the local root folder of your Dreamweaver site. (The local root folder is the top-level folder of your
Dreamweaver site.) Remote folders, like local folders, can have any title, but commonly, Internet Service Providers
(ISPs) name the top-level remote folders for individual user accounts public_html, pub_html, or something similar. If
you are in charge of your own remote server, and can name the remote folder anything you want, it is a good idea for
your local root folder and remote folder to have the same name.
Last updated 12/7/2011
37
USING DREAMWEAVER
Working with Dreamweaver sites
The following example shows a sample local root folder on the left and a sample remote folder on the right. The local
root folder on the local machine maps directly to the remote folder on the web server, rather than to any of the remote
folder’s sub folders, or folders that exist above the remote folder in the directory structure.
login directory
no
(Shouldn’t be remote folder
in this case)
Local folder
yes
public_html
(Should be
remote folder)
(root folder)
Assets
Assets
no
(Shouldn’t be
remote folder)
HTML
HTML
Note: The above example illustrates one local root folder on the local machine, and one top-level remote folder on the
remote web server. If, however, you are maintaining a number of Dreamweaver sites on your local machine, you would
need an equal number of remote folders on the remote server. In such a case the above example would not apply, and you
would instead create different remote folders within the public_html folder, and then map them to their corresponding
local root folders on your local machine.
When you first establish a remote connection, the remote folder on the web server is usually empty. Then, when you
use Dreamweaver to upload all of the files in your local root folder, the remote folder populates with all of your web
files. The directory structure of the remote folder and the local root folder should always be the same. (That is, there
should always be a one-to-one correspondence between the files and folders in your local root folder, and the files and
folders in your remote folder.) If the structure of the remote folder doesn’t match the structure of the local root folder,
Dreamweaver uploads files to the wrong place, where they might not be visible to site visitors. Additionally, image and
link paths can easily break when folder and file structures are not in synch.
The remote folder must exist before Dreamweaver can connect to it. If you don’t have a designated folder that acts as
your remote folder on the web server, create one or ask your ISP’s server administrator to create one for you.
Set up a local version of your site
To set up a local version of your site, all you need to do is specify the local folder where you’ll store all of your site files.
The local folder can be on your local computer or on a network server.
1 Identify or create the folder on your computer where you want to store the local version of your site files. (The
folder can be anywhere on your computer.) You’ll specify this folder as your local site in Dreamweaver.
2 In Dreamweaver, choose Site > New Site.
3 In the Site Setup dialog box, make sure the Site category is selected. (It should be selected by default.)
4 In the Site Name text box, enter a name for your site. This name appears in the Files panel and in the Manage Sites
dialog box; it does not appear in the browser.
5 In the Local Site Folder text box, specify the folder you identified in step one—the folder on your computer where
you want to store the local version of your site files. You can click the folder icon to the right of the text box to
browse to the folder.
6 Click Save to close the Site Setup dialog box. You can now begin working on your local site files in Dreamweaver.
Last updated 12/7/2011
38
USING DREAMWEAVER
Working with Dreamweaver sites
When you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category,
where you can specify a remote folder on your remote server.
For a video tutorial on setting up a new Dreamweaver site, see www.adobe.com/go/learn_dw_comm08_en.
Connect to a remote server
Once you’ve specified a local site in Dreamweaver, you can specify a remote server for your site as well. The remote
server (often referred to as the web server) is where you publish your site files so that people can view them online. The
remote server is simply another computer like your local computer with a collection of files and folders on it. You’ll
specify a folder for your site on the remote server, just as you specified a folder for your local site on your local
computer.
Dreamweaver refers to the specified remote folder as your remote site.
When you set up a remote folder, you must select a connection method for Dreamweaver to upload and download files
to and from your web server. The most typical connection method is FTP, but Dreamweaver also supports
local/network, FTPS, SFTP, WebDav, and RDS connection methods. If you don’t know which connection method to
use, ask your ISP or your server administrator.
Note: Dreamweaver also supports connections to IPv6-enabled servers. Supported connection types include FTP, SFTP,
WebDav, and RDS. For more information, see www.ipv6.org/
Specify a connection method
FTP connections
Use this setting if you connect to your web server using FTP.
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
The following illustration shows the Basic screen of the Server category with the text fields already populated.
Last updated 12/7/2011
39
USING DREAMWEAVER
Working with Dreamweaver sites
Basic screen of the Server category, Site Setup dialog box.
4 In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
5 Select FTP from the Connect Using pop-up menu.
6 In the FTP Address text box, enter the address of the FTP server to which you upload files for your website.
Your FTP address is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full address
without any additional text. In particular, don’t add a protocol name in front of the address.
If you do not know your FTP address, contact your web hosting company.
Note: Port 21 is the default port for receiving FTP connections. You can change the default port number by editing the
text box to the right. The result when you save your settings is a colon and the new port number appended to your FTP
address (for example, ftp.mindspring.com:29).
7 In the Username and Password text boxes, enter the username and password that you use to connect to the FTP
server.
8 Click Test to test your FTP address, username, and password.
Note: You must obtain the FTP address, username and password information from the system administrator for the
company hosting your site. No one else has access to this information. Enter the information exactly as your system
administrator gives it to you.
9 Dreamweaver saves your password by default. Deselect the Save option if you prefer that Dreamweaver prompt you
for a password each time you connect to the remote server.
10 In the Root Directory text box, enter the directory (folder) on the remote server where you store documents that
are visible to the public.
If you’re uncertain about what to enter as the root directory, contact the server’s administrator or leave the text box
blank. On some servers, your root directory is the same as the directory you first connect to with FTP. To find out,
connect to the server. If a folder with a name like public_html, or www, or your user name, appears in the Remote File
view in your Files panel, that’s probably the directory you should enter in the Root Directory text box.
Last updated 12/7/2011
40
USING DREAMWEAVER
Working with Dreamweaver sites
11 In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses
the Web URL to create site root-relative links, and to verify links when you use the link checker.
For a more extensive explanation of this option, see “Advanced Settings category” on page 47.
12 Expand the
13 More Options
14 section if you still need to set more options.
15 Select Use Passive FTP if your firewall configuration requires use of passive FTP.
Passive FTP enables your local software to set up the FTP connection rather than requesting the remote server to set
it up. If you’re not sure whether you use passive FTP, check with your system administrator, or try both checking and
unchecking the Use Passive FTP option.
For more information, see TechNote 15220 on the Adobe website at www.adobe.com/go/tn_15220.
16 Select Use IPv6 Transfer Mode if you are using an IPv6-enabled FTP server.
With the deployment of version 6 of the Internet Protocol (IPv6), EPRT and EPSV have replaced the FTP commands
PORT and PASV, respectively. Thus, if you are trying to connect to an IPv6-enabled FTP server, you must use the
extended passive (EPSV) and the extended active (EPRT) commands for your data connection.
For more information, see www.ipv6.org/.
17 Select Use Proxy if you want to specify a proxy host or proxy port.
For more information, click the link to go to the Preferences dialog box, and then click the Help button in the Site
category of the Preferences dialog.
18 Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited
is a remote server, a testing server, or both.
For help with troubleshooting FTP connectivity problems, see TechNote kb405912 on the Adobe website at
www.adobe.com/go/kb405912.
SFTP connections
Use Secure FTP (SFTP) if your firewall configuration requires use of secure FTP. SFTP uses encryption and public keys
to secure a connection to your testing server.
Note: Your server must be running an SFTP service for you to select this option. If you don’t know whether your server is
running SFTP, check with your server administrator.
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
5 Select SFTP from the Connect Using pop-up menu.
The rest of the options are the same as the options for FTP connections. See the above section for more information.
Note: Port 22 is the default port for receiving SFTP connections.
Last updated 12/7/2011
41
USING DREAMWEAVER
Working with Dreamweaver sites
FTPS connections (CS5.5)
FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that offers only
encryption support.
When using FTPS for data transfer, you can choose to encrypt your credentials, and also the data being transmitted to
the server. In addition, you can choose to authenticate the server's credentials and connections. The credentials of a
server are validated against the current set of trusted CA server certificates in the Dreamweaver database. Certificate
Authorities (CAs), which include companies like VeriSign, Thawte, and so on, issue digitally signed server certificates
Note: This procedure describes options specific to FTPS. For information on regular FTP options, see the previous section.
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the “+” (Add New Server) button to add a new server.
• Select an existing server and click the Edit Existing Server button.
4 In Server Name, specify a name for the new server.
5 In Connect Using, select one of the following based on your requirement.
FTP over SSL/TLS (Implicit Encryption) The server terminates the connection if the security request is not received.
FTP over SSL/TLS (Explicit Encryption) If the client does not request security, the server can choose to proceed with
an insecure transaction, or refuse/limit the connection.
6 In Authentication, choose one of the following options:
None The server’s credentials, signed or self-signed, are displayed. If you accept the server’s credentials, the
certificate is added to a certificate store, trustedSites.db, in Dreamweaver. When you connect to the same server
the next time, Dreamweaver directly connects to the server.
Note: If the credentials of a self-signed certificate have changed on the server, you are prompted to accept the new
credentials.
Trusted The presented certificate is validated with the current set of trusted CA server certificates in the
Dreamweaver database. The list of trusted servers is stored in the cacerts.pem file.
Note: An error message is displayed if you select Trusted Server, and connect to a server with a self-signed certificate.
7 Expand the
8 More Options
9
section to set more options.
Encrypt Only Command Channel Select this option if you want to encrypt only the commands that are being
transmitted. Use this option when the data being transmitted is already encrypted, or does not contain sensitive
information.
Encrypt Only User Name and Password Select this option if you want to encrypt only your user name and
password.
10 Click Save to close the Basic screen. Then in the Servers category, specify whether the server you added or edited is
a remote server, a testing server, or both.
For help with troubleshooting FTP connectivity problems, see TechNote kb405912 on the Adobe website at
www.adobe.com/go/kb405912.
Last updated 12/7/2011
42
USING DREAMWEAVER
Working with Dreamweaver sites
Local or network connections
Use this setting to connect to a network folder, or if you are storing files or running your testing server on your local
computer.
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
5 Select Local/Network from the Connect Using pop-up menu.
6 Click the folder icon beside the Server Folder text box to browse to and select the folder where you store your site
files.
7 In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses
the Web URL to create site root-relative links, and to verify links when you use the link checker.
For a more extensive explanation of this option, see “Advanced Settings category” on page 47.
8 Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited
is a remote server, a testing server, or both.
WebDAV connections
Use this setting if you connect to your web server using the Web-based Distributed Authoring and Versioning
(WebDAV) protocol.
For this connection method, you must have a server that supports this protocol, such as Microsoft Internet
Information Server (IIS) 5.0 or an appropriately configured installation of Apache web server.
Note: If you select WebDAV as your connection method, and you are using Dreamweaver in a multiuser environment,
you should also make sure that all of your users select WebDAV as the connection method. If some users select WebDAV,
and other users select other connection methods (FTP, for example), Dreamweaver’s check-in/check-out feature will not
work as expected, since WebDAV uses its own locking system.
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
5 Select WebDAV from the Connect Using pop-up menu.
6 For the URL, enter the complete URL to the directory on the WebDAV server you want to connect to.
This URL includes the protocol, port, and directory (if not the root directory). For example,
http://webdav.mydomain.net/mysite.
7 Enter your username and password.
This information is for server authentication and is not related to Dreamweaver. If you are not sure of your username
and password, check with your system administrator or webmaster.
Last updated 12/7/2011
43
USING DREAMWEAVER
Working with Dreamweaver sites
8 Click Test to test your connection settings.
9 Select the Save option if you want Dreamweaver to remember your password each time you start a new session.
10 In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses
the Web URL to create site root-relative links, and to verify links when you use the link checker.
For a more extensive explanation of this option, see “Advanced Settings category” on page 47.
11 Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited
is a remote server, a testing server, or both.
RDS connections
Use this setting if you connect to your web server using Remote Development Services (RDS). For this connection
method, your remote server must be on a computer running Adobe® ColdFusion®
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 In the Server Name text box, specify a name for the new server. The name can be anything of your choosing.
5 Select RDS from the Connect Using pop-up menu.
6 Click the Settings button and provide the following information in the Configure RDS Server dialog box:
• Enter the name of the host computer where your web server is installed.
The host name is probably an IP address or a URL. If you are unsure, ask your administrator.
• Enter the port number that you connect to.
• Enter your root remote folder as the host directory.
For example, c:\inetpub\wwwroot\myHostDir\.
• Enter your RDS username and password.
Note: These options might not appear if you set your username and password in the ColdFusion Administrator security
settings.
• Select the Save option if you want Dreamweaver to remember your settings.
7 Click OK to close the Configure RDS Server dialog box.
8 In the Web URL text box enter the URL of your website (for example, http://www.mysite.com). Dreamweaver uses
the Web URL to create site root-relative links, and to verify links when you use the link checker.
For a more extensive explanation of this option, see “Advanced Settings category” on page 47.
9 Click Save to close the Basic screen. Then in the Servers category, specify whether the server you just added or edited
is a remote server, a testing server, or both.
Microsoft Visual SourceSafe connections
Support for Microsoft Visual SourceSafe has been deprecated as of Dreamweaver CS5.
Last updated 12/7/2011
44
USING DREAMWEAVER
Working with Dreamweaver sites
Set Advanced server options
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 Specify Basic options as necessary, and then click the Advanced button.
5 Select Maintain Synchronization Information if you want to automatically synchronize your local and remote files.
(This option is selected by default.)
6 Select Automatically Upload Files to Server on Save if you want Dreamweaver to upload your file to your remote
site when you save the file.
7 Select Enable File Check Out if you want to activate the Check In/Out system.
8 If you are using a Testing server, select a server model from the Server Model pop-up menu. For more information,
see “Set up a testing server” on page 45.
Connect to or disconnect from a remote folder with network access
❖ You don’t need to connect to the remote folder; you’re always connected. Click the Refresh button to see your
remote files.
Connect to or disconnect from a remote folder with FTP access
❖ In the Files panel:
• To connect, click Connects to Remote Host in the toolbar.
• To disconnect, click Disconnect in the toolbar.
Troubleshoot the remote folder setup
The following list provides information on common problems you may encounter in setting up a remote folder, and
how to resolve them.
There is also an extensive tech note that specifically provides FTP troubleshooting information on the Adobe website
at www.adobe.com/go/kb405912.
• The Dreamweaver FTP implementation might not work properly with certain proxy servers, multilevel firewalls,
and other forms of indirect server access. If you encounter problems with FTP access, ask your local system
administrator for help.
• For a Dreamweaver FTP implementation, you must connect to the remote system’s root folder. Be sure to indicate
the remote system’s root folder as the host directory. If you’ve specified the host directory using a single slash (/),
you might need to specify a relative path from the directory you are connecting to and the remote root folder. For
example, if the remote root folder is a higher level directory, you may need to specify a ../../ for the host directory.
• Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible. Colons,
slashes, periods, and apostrophes in file or folder names can sometimes cause problems.
• If you encounter problems with long filenames, rename them with shorter names. On the Mac OS, filenames
cannot be more than 31 characters long.
Last updated 12/7/2011
45
USING DREAMWEAVER
Working with Dreamweaver sites
• Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one
part of the server’s disk with another folder elsewhere. Such aliases usually have no effect on your ability to connect
to the appropriate folder or directory; however, if you can connect to one part of the server but not another, there
might be an alias discrepancy.
• If you encounter an error message such as “cannot put file,” your remote folder may be out of space. For more
detailed information, look at the FTP log.
Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Window >
Results (Windows) or Site > FTP Log (Macintosh), then clicking the FTP Log tag.
Set up a testing server
If you plan to develop dynamic pages, Dreamweaver needs the services of a testing server to generate and display
dynamic content while you work. The testing server can be your local computer, a development server, a staging server,
or a production server.
For a detailed overview about the purposes of a testing server, see David Powers’s Dreamweaver Developer Center
article, Setting up a local testing server in Dreamweaver CS5.
More Help topics
“Choosing an application server” on page 513
“Preparing to build dynamic sites” on page 504
Set up a testing server
1 Select Site > Manage Sites.
2 Click New to set up a new site, or select an existing Dreamweaver site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 Specify Basic options as necessary, and then click the Advanced button.
Note: You must specify a Web URL in the Basic screen when specifying a testing server. For more information, see the
next section.
5 Under Testing Server, select the server model you want to use for your web application.
Note: As of Dreamweaver CS5, Dreamweaver no longer installs ASP.NET, ASP JavaScript, or JSP server behaviors.
(You can manually re-enable the deprecated server behaviors if you wish, but keep in mind that Dreamweaver no
longer officially supports them.) If you’re working on ASP.NET, ASP JavaScript, or JSP pages, however, Dreamweaver
will still support Live view, code coloring, and code hinting for those pages. You do not need to select ASP.NET, ASP
JavaScript or JSP in the Site Definition dialog box for any of these features to work.
6 Click Save to close the Advanced screen. Then in the Servers category, specify the server you just added or edited
as a testing server.
Last updated 12/7/2011
46
USING DREAMWEAVER
Working with Dreamweaver sites
About the Web URL for the testing server
You must specify a Web URL so Dreamweaver can use the services of a testing server to display data and to connect
to databases while you work. Dreamweaver uses the design-time connection to provide you with useful information
about the database, such as the names of the tables in your database and the names of the columns in your tables.
A Web URL for a testing server comprises the domain name and any of your website’s home directory’s subdirectories
or virtual directories.
Note: The terminology used in Microsoft IIS may vary from server to server, but the same concepts apply to most web
servers.
The home directory The folder on the server mapped to your site’s domain name. Suppose the folder you want to use
to process dynamic pages is c:\sites\company\, and this folder is your home directory (that is, this folder is mapped to
your site’s domain name—for example, www.mystartup.com). In that case, the URL prefix is
http://www.mystartup.com/.
If the folder you want to use to process dynamic pages is a subfolder of your home directory, simply add the subfolder
to the URL. If your home directory is c:\sites\company\, your site’s domain name is www.mystartup.com, and the
folder you want to use to process dynamic pages is c:\sites\company\inventory. Enter the following Web URL:
http://www.mystartup.com/inventory/
If the folder you want to use to process dynamic pages is not your home directory or any of its subdirectories, you must
create a virtual directory.
A virtual directory A folder that is not physically contained in the home directory of the server even though it appears
to be in the URL. To create a virtual directory, specify an alias for the folder’s path in the URL. Suppose your home
directory is c:\sites\company, your processing folder is d:\apps\inventory, and you define an alias for this folder called
warehouse. Enter the following Web URL:
http://www.mystartup.com/warehouse/
Localhost Refers to the home directory in your URLs when the client (usually a browser, but in this case
Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same Windows
system as the web server, your home directory is c:\sites\company, and you defined a virtual directory called
warehouse to refer to the folder you want to use to process dynamic pages. The following are the Web URLs you would
enter for selected web servers:
Web server
Web URL
ColdFusion MX 7
http://localhost:8500/warehouse/
IIS
http://localhost/warehouse/
Apache (Windows)
http://localhost:80/warehouse/
Jakarta Tomcat (Windows)
http://localhost:8080/warehouse/
Note: By default the ColdFusion MX 7 web server runs on port 8500, the Apache web server runs on port 80, and the
Jakarta Tomcat web server runs on port 8080.
For Macintosh users running the Apache web server, your personal home directory is Users/MyUserName/Sites,
where MyUserName is your Macintosh user name. An alias called ~MyUserName is automatically defined for this
folder when you install Mac OS 10.1 or higher. Therefore, your default Web URL in Dreamweaver is as follows:
http://localhost/~MyUserName/
Last updated 12/7/2011
47
USING DREAMWEAVER
Working with Dreamweaver sites
If the folder you want to use to process dynamic pages is Users:MyUserName:Sites:inventory, then the Web URL is as
follows:
http://localhost/~MyUserName/inventory/
Version Control and Advanced settings
Access the Version Control and Advanced settings categories in the Site Setup dialog box by choosing Site > Manage
Sites, selecting the site you want to edit, and clicking Edit.
Version Control category
You can get and check in files using Subversion. For more information, see “Use Subversion (SVN) to get and check
in files” on page 88.
Advanced Settings category
Local Info
Default Images Folder The folder in which you want to store images for your site. Enter the path to the folder, or click
the folder icon to browse to the folder. Dreamweaver uses the path to the folder when you add images to documents.
Links Relative To Specifies the kind of links Dreamweaver creates when you create links to other assets or pages in
your site. Dreamweaver can create two kinds of links: document-relative and site root-relative. For more information
on the differences between the two, see “Absolute, document-relative, and site root-relative paths” on page 261.
By default, Dreamweaver creates document-relative links. If you change the default setting and select the Site Root
option, make sure the correct Web URL for the site is entered in the Web URL text box (see below). Changing this
setting does not convert the path of existing links; the setting will only apply to new links you create visually with
Dreamweaver.
Note: Content linked by site-root relative links 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.
Web URL The URL of your website. Dreamweaver uses the Web URL to create site root-relative links, and to verify
links when you use the link checker.
Site root-relative links are useful if you are uncertain about the final location in the directory structure of the page
you’re working on, or if you think you might later relocate or reorganize files that contain links. Site root-relative links
are links whose paths to other site assets are relative to the site root, not the document, so if you move the document
at some point, the path to the assets remains correct.
For example, let’s say that you’ve specified http://www.mysite.com/mycoolsite (the remote server’s site root directory)
as the Web URL, and that you also have an images folder in the mycoolsite directory on the remote server
(http://www.mysite.com/mycoolsite/images). Let’s also say that your index.html file is in the mycoolsite directory.
When you create a site root-relative link from the index.html file to an image in the images directory, the link looks as
follows:
This is different from a document-relative link, which would simply be:
Last updated 12/7/2011
48
USING DREAMWEAVER
Working with Dreamweaver sites
The appendage of /mycoolsite/ to the image source links the image relative to the site root, not the document.
Assuming the image stays in the image directory, the file path to the image (/mycoolsite/images/image1.jpg), will
always be correct, even if you move the index.html file to another directory.
For more information, see “Absolute, document-relative, and site root-relative paths” on page 261.
With regard to link verification, the Web URL is necessary for determining whether a link is internal or external to the
site. For example, if your web URL is http://www.mysite.com/mycoolsite, and the link checker finds a link with a URL
of http://www.yoursite.com on your page, the checker determines that the latter link is an external link and reports it
as such. Similarly, the link checker uses the Web URL to determine if links are internal to the site, and then checks to
see if those internal links are broken.
Case-sensitive Links Checking Checks that the case of the links matches the case of the filenames when Dreamweaver
checks links. This option is useful on UNIX systems where filenames are case-sensitive.
Enable Cache Indicates whether to create a local cache to improve the speed of link and site management tasks. If you
do not select this option, Dreamweaver asks you if you want to create a cache again before it creates the site. It is a good
idea to select this option because the Assets panel (in the Files panel group) only works if a cache is created.
Cloaking and other categories
For more information on the Cloaking, Design Notes, File View Columns, Contribute, Templates, or Spry categories,
click the Help button in the dialog box.
Manage Sites dialog box options
The Manage Sites dialog box is your gateway into various Dreamweaver site functions. From this dialog box, you can
initiate the process for creating a new site, editing an existing site, duplicating a site, removing a site, or importing or
exporting a site’s settings.
Note: The Manage Sites dialog box does not let you connect to or publish files to a remote server. For instructions on
connecting to a remote server, see “Connect to a remote server” on page 38. If you are trying to connect to an existing
website, see “Edit an existing remote website” on page 50.
1 Select Site > Manage Sites and select a site from the list on the left.
2 Click a button to select one of the options, make any changes you need to make, and click Done.
New Enables you to create a new site. When you click the New button the Site Setup dialog box opens, letting you
name and specify the location for your new site. For more information, see “Set up a local version of your site” on
page 37.
Edit Enables you to edit information such as username, password, and server information for an existing
Dreamweaver site. Select the existing site in the site list on the left and click the Edit button to edit the existing site. For
more information on editing existing site options, see “Connect to a remote server” on page 38.
Duplicate Creates a copy of an existing site. To duplicate a site, select the site in the site list on the left and click the
Duplicate button. The duplicated site appears in the site list with the word “copy” appended to the name of the site. To
change the name of the duplicated site, leave the site selected and click the Edit button.
Remove Deletes the selected site and all of its setup information from your list of Dreamweaver sites; it does not delete
the actual site files. (If you want to remove the site files from your computer, you need to do that manually.) To delete
a site from Dreamweaver, select the site in the site list and then click the Remove button. You cannot undo this action.
Last updated 12/7/2011
49
USING DREAMWEAVER
Working with Dreamweaver sites
Export/Import Enables you to either export the selected site’s settings as an XML file (*.ste), or import a site’s settings.
For more information, see “Import and export Dreamweaver site settings” on page 49.
Note: The import feature only imports site settings that have previously been exported. It does not import site files to
create a new Dreamweaver site. For information on creating a new site in Dreamweaver, see “Set up a local version of
your site” on page 37.
More Help topics
“About Dreamweaver sites” on page 36
“Edit an existing remote website” on page 50
Import and export Dreamweaver site settings
You can export your site settings as an XML file that you can later import into Dreamweaver. Exporting/importing
sites enables you to transfer site settings to other machines and product versions, share site settings with other users,
and back up site settings.
The import/export feature does not import or export site files. It only imports/exports site settings to save you the time
of recreating sites in Dreamweaver. For information on creating a new site in Dreamweaver, see “Set up a local version
of your site” on page 37.
Export your site settings regularly so that you have a backup copy if anything happens to the site.
More Help topics
“About Dreamweaver sites” on page 36
Backing up and restoring site definitions
Export your site settings
1 Select Site > Manage sites.
2 Select one or more sites whose settings you want to export and click Export:
• To select more than one site, Control-click (Windows) or Command-click (Macintosh) each site.
• To select a range of sites, Shift-click the first and last site in the range.
3 If you want to back up your site settings for yourself, select the first option in the Exporting Site dialog box and click
OK. Dreamweaver saves remote server login information, such as the user name and password, as well as local path
information.
4 If you want to share your settings with other users, select the second option in the Exporting Site dialog box and
click OK. (Dreamweaver does not save information that would not work for other users, such as your remote server
login information and local paths.)
5 For each site whose settings you want to export, browse to a location where you want to save the site file and click
Save. (Dreamweaver saves each site’s settings as an XML file, with an .ste file extension.)
6 Click Done.
Note: Save the *.ste file to your site root folder or to your desktop to make it easy to find. If you cannot remember where
you put it, do a file search on your computer for files with the *.ste extension to locate it.
Last updated 12/7/2011
50
USING DREAMWEAVER
Working with Dreamweaver sites
Import site settings
1 Select Site > Manage sites.
2 Click Import.
3 Browse to and select one or more sites—defined in files with an .ste file extension—whose settings you want to
import.
To select more than one site, Control-click (Windows) or Command-click (Macintosh) each .ste file. To select a range
of sites, Shift-click the first and last file in the range.
4 Click Open and then click Done.
After Dreamweaver imports the site settings, the site names appear in the Manage Sites dialog box.
Edit an existing remote website
You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit
it there, even if you didn’t use Dreamweaver to create the original site. You must have the correct connection
information, and connect to the site’s remote server, before you can edit the site.
1 Create a local folder to contain the existing site and set up the folder as the local folder for the site. (See “Set up a
local version of your site” on page 37.)
Note: You must locally duplicate the entire structure of the relevant branch of the existing remote site.
2 Set up a remote folder, using the remote access information about the existing site. You must connect to the remote
site to download the files to your computer before you can edit them. (See “Connect to a remote server” on page 38.)
Make sure to choose the correct root folder for the remote site.
3 In the Files panel (Window > Files), click the Connects To Remote Host button (for FTP access) or the Refresh
button (for network access) in the toolbar to view the remote site.
4 Edit the site:
• If you want to work with the entire site, select the root folder of the remote site in the Files panel, and click Get
File(s) in the toolbar to download the entire site to your local disk.
• If you want to work with just one of the files or folders of the site, locate the file or folder in the Remote view of the
Files panel, and click Get File(s) in the toolbar to download that file to your local disk.
Dreamweaver automatically duplicates as much of the remote site’s structure as is necessary to place the downloaded
file in the correct part of the site hierarchy. When editing only one part of a site, you should generally include
dependent files, such as image files.
More Help topics
“About Dreamweaver sites” on page 36
Editing an existing website (Dreamweaver blog)
Last updated 12/7/2011
51
USING DREAMWEAVER
Working with Dreamweaver sites
Set site preferences for transferring files
You select preferences to control file transfer features that appear in the Files panel.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the Preferences dialog box, select Site from the category list on the left.
3 Set the options and click OK.
Always Show Specifies which site (remote or local) is always shown, and in which Files panel pane (left or right) the
local and remote files appear.
By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the
changeable pane: this pane can display the files in the other site (the remote site by default).
Dependent Files Displays a prompt for transferring dependent files (such as images, external style sheets, and other
files referenced in the HTML file) that the browser loads when it loads the HTML file. By default, both Prompt on
Get/Check Out and Prompt on Put/Check In are selected.
It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again. This is also true for uploading
and checking in files: no need if up-to-date copies are already at the destination.
If you deselect these options, your dependent files are not transferred. Therefore, to force the Dependent Files dialog
box to appear even when these options are deselected, hold down Alt (Windows) or Option (Macintosh) while
choosing the Get, Put, Check In, or Check Out commands.
FTP Connection Determines whether the connection to the remote site is terminated after the specified number of
minutes have passed with no activity.
FTP Time Out Specifies the number of seconds in which Dreamweaver attempts to make a connection with the remote
server.
If there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you to
this fact.
FTP Transfer options Determines whether Dreamweaver selects the default option, after a specified number of
seconds, when a dialog box appears during a file transfer and there is no user response.
Proxy Host Specifies the address of the proxy server through which you connect to outside servers if you are behind a
firewall.
If you are not behind a firewall, leave this space blank. If you are behind a firewall, select the Use Proxy option in the
Site Definition dialog box (Servers > Edit Existing Server (pencil icon) >
More Options
).
Proxy Port Specifies the port in your proxy or firewall through which you pass to connect to the remote server. If you
connect through a port other than 21 (the default for FTP), enter the number here.
Put Options: Save Files Before Putting Indicates that unsaved files are saved automatically before being put onto the
remote site.
Move Options: Prompt Before Moving Files on Server Alerts you when you attempt to move files on the remote site.
Manage Sites Opens the Manage Sites dialog box, where you can edit an existing site or create a new one.
Last updated 12/7/2011
52
USING DREAMWEAVER
Working with Dreamweaver sites
You can define whether the types of files that you transfer are transferred as ASCII (text) or binary, by customizing
the FTPExtensionMap.txt file in the Dreamweaver/Configuration folder (on the Macintosh,
FTPExtensionMapMac.txt). For more information see, Extending Dreamweaver.
Managing Contribute sites
Managing Contribute sites
Adobe® Contribute® CS4 combines a web browser with a web-page editor. It enables your colleagues or clients to
browse to a page in a site that you created, and to edit or update the page if they have permission to do so. Contribute
users can add and update basic web content, including formatted text, images, tables, and links. Contribute site
administrators can limit what ordinary (non-administrator) users can do in a site.
Note: This topic assumes that you are a Contribute administrator.
As the site administrator, you give non-administrators the ability to edit pages by creating a connection key and
sending it to them (for information on how to do this, see Contribute Help. You can also set up a connection to a
Contribute site using Dreamweaver, which lets you or your site designer connect to the Contribute site and use all of
the editing capabilities available in Dreamweaver.
Contribute adds functionality to your website with Contribute Publishing Server (CPS), a suite of publishing
applications and user management tools that lets you integrate Contribute with your organization’s user directory
service—for example, Lightweight Directory Access Protocol (LDAP) or Active Directory. When you enable your
Dreamweaver site as a Contribute site, Dreamweaver reads Contribute’s administration settings whenever you
connect to the remote site. If Dreamweaver detects that CPS is enabled, it inherits some of the functionality of CPS,
such as file rollback and event logging.
You can use Dreamweaver to connect to and modify a file in a Contribute site. Most Dreamweaver capabilities work
the same way with a Contribute site as they do with any other site. However, when you use Dreamweaver with a
Contribute site, Dreamweaver automatically performs certain file-management operations, such as saving multiple
revisions of a document, and logging certain events in the CPS Console.
For more information, see Contribute Help.
Site structure and page design for a Contribute site
To enable Contribute users to edit your website, keep the following points in mind when you structure it:
• Keep your site structure simple. Don’t nest folders too deeply. Group related items together in a folder.
• Set up appropriate read and write permissions for folders on the server.
• Add index pages to folders as you create them, to encourage Contribute users to place new pages in the correct
folders. For example, if Contribute users provide pages containing meeting minutes, create a folder in the site root
folder named meeting_minutes, and create an index page in that folder. Then provide a link from your site’s main
page to the index page for meeting minutes. A Contribute user can then navigate to that index page and create a
new page of minutes for a specific meeting, linked from that page.
• On each folder’s index page, provide a list of links to the individual content pages and documents in that folder.
• Keep page designs as simple as possible, minimizing fancy formatting.
Last updated 12/7/2011
53
USING DREAMWEAVER
Working with Dreamweaver sites
• Use CSS rather than HTML tags and name your CSS styles clearly. If the Contribute users use a standard set of styles
in Microsoft Word, use the same names for the CSS styles, so that Contribute can map the styles when a user copies
information from a Word document and pastes it into a Contribute page.
• To prevent a CSS style from being available to Contribute users, change the name of the style so that the name starts
with mmhide_. For example, if you use a style named RightJustified in a page but you don’t want Contribute users
to be able to use that style, rename the style to mmhide_RightJustified.
Note: You have to add mmhide_ to the style name in Code view; you cannot add it in the CSS panel.
• Use as few CSS styles as possible, to keep things simple and clean.
• If you use server-side includes for HTML page elements, such as headers or footers, create an unlinked HTML page
that contains links to the include files. Contribute users can then bookmark that page and use it to navigate to the
include files and edit them.
More Help topics
“Creating a Dreamweaver template” on page 382
“Working with server-side includes” on page 325
File transfer to and from a Contribute site
Contribute uses a system much like the Dreamweaver Check In/Check Out system to ensure that only one user at a
time can edit a given web page. When you enable Contribute compatibility in Dreamweaver, the Dreamweaver Check
In/Check Out system is automatically enabled.
To transfer files to and from a Contribute site using Dreamweaver, always use the Check In and Check Out commands.
If you instead use the PUT and GET commands to transfer files, you might overwrite the modifications that a
Contribute user has recently made to a file.
When you check a file in to a Contribute site, Dreamweaver makes a backup copy of the previous checked-in version
of the file in the _baks folder and adds your user name and a date stamp to a Design Notes file.
More Help topics
“Checking in and checking out files” on page 85
Contribute file and folder permissions on the server
Contribute provides a way to manage file and folder permissions for each user role you define; however, Contribute
doesn’t provide a way to manage the underlying read and write permissions assigned to files and folders by the server.
In Dreamweaver, you can manage those permissions directly on the server.
If a Contribute user doesn’t have read access on the server to a dependent file, such as an image displayed in a page,
the contents of the dependent file don’t appear in the Contribute window. For example, if a user doesn’t have read
access to an images folder, the images in that folder appear as broken image icons in Contribute. Similarly,
Dreamweaver templates are stored in a subfolder of the site’s root folder, so if a Contribute user doesn’t have read
access to the root folder, they can’t use templates in that site unless you copy the templates to an appropriate folder.
When you set up a Dreamweaver site, you must give users read access on the server to the /_mm folder (the _mm
subfolder of the root folder), the /Templates folder, and all of the folders containing assets that they will need to use.
If, for security reasons, you can’t give users read access to the /Templates folder, you can still enable Contribute users
to access templates. See “Enable Contribute users to access templates without root folder access” on page 57.
Last updated 12/7/2011
54
USING DREAMWEAVER
Working with Dreamweaver sites
For more information about Contribute permissions, see Administering Contribute in Contribute Help.
Contribute special files
Contribute uses a variety of special files that aren’t intended to be viewed by visitors to your site:
• The shared settings file, which has an obfuscated filename with a CSI extension, appears in a folder named _mm in
the root folder of the site, and contains information that Contribute uses to manage the site
• Older versions of files, in folders named _baks
• Temporary versions of pages, so that users can preview changes
• Temporary lock files, indicating that a given page is being edited or previewed
• Design Notes files containing metadata about the site’s pages
In general, you shouldn’t edit any of these Contribute special files using Dreamweaver; Dreamweaver manages
them automatically.
If you don’t want these Contribute special files to appear on your publicly accessible server, you can set up a staging
server where Contribute users work on pages. Then periodically copy those web pages from the staging server to a
production server that’s on the web. If you take this staging-server approach, copy only web pages to the production
server, not any of the above-listed Contribute special files. In particular, don’t copy the _mm and _baks folders to
the production server.
Note: For information about setting up a server to prevent visitors from seeing files in folders that begin with an
underscore, see “Website security” in Contribute Help.
Occasionally you might need to manually delete Contribute special files. For example, there might be
circumstances in which Contribute fails to delete temporary preview pages when the user is finished previewing; in
that case, you would have to manually delete those temporary pages. Temporary preview pages have filenames that
begin with TMP.
Similarly, under some circumstances an outdated lock file may be accidentally left on the server. If that happens,
you must manually delete the lock file to allow others to edit the page.
Prepare a site for use with Contribute
If you’re preparing an existing Dreamweaver site for Contribute users, you need to explicitly enable Contribute
compatibility to use Contribute-related features; Dreamweaver does not prompt you to do this; however, when you
connect to a site that’s been set up as a Contribute site (that has an administrator), Dreamweaver prompts you to
enable Contribute compatibility.
Not all connection types support Contribute compatibility. The following restrictions apply to connection types:
• If your remote site connection uses WebDAV, you can’t enable Contribute compatibility, because those sourcecontrol systems aren’t compatible with the Design Notes and Check In/Check Out systems that Dreamweaver uses
for Contribute sites.
• If you use RDS to connect to your remote site, you can enable Contribute compatibility, but you must customize
your connection before you can share it with Contribute users.
• If you’re using your local computer as a web server, you must set up the site using an FTP or network connection
to your computer (rather than just a local folder path) to be able to share your connection with Contribute users.
When you enable Contribute compatibility, Dreamweaver automatically enables Design Notes (including the Upload
Design Notes For Sharing option) and the Check In/Check Out system.
Last updated 12/7/2011
55
USING DREAMWEAVER
Working with Dreamweaver sites
If Contribute Publishing Server (CPS) is enabled on the remote site you are connecting to, Dreamweaver notifies the
CPS every time you trigger a network operation such as checking in, rolling back, or publishing a file. The CPS will log
these events, and you can view the log in the CPS Administration Console. (If you disable CPS, these events are not
logged.) You enable CPS using Contribute. For more information, see Adobe Contribute Help.
Note: You can make a site Contribute compatible without having Contribute on your computer; but if you want to be
able to start Contribute Administrator from Dreamweaver, you must have Contribute installed on the same computer as
Dreamweaver and you must be connected to the remote site before you enable Contribute compatibility. Otherwise,
Dreamweaver cannot read Contribute’s administrative settings to determine whether CPS and Rollback are enabled.
Important: You must make sure that the shared settings file (CSI file) that Contribute uses to administer the site is on
the remote server and uncorrupted. Contribute automatically creates this file (and overwrites old versions of it) whenever
you administer in Contribute Administrator. If the shared settings file is not on the server or is corrupted, Dreamweaver
returns the error, "The file required for Contribute compatibility does not exist on the server" whenever you attempt a
network operation (such as put). To ensure that the correct file is on the server, disable the connection to the server in
Dreamweaver, start Contribute Administrator, make an administration change, and then reconnect to the server in
Dreamweaver. For more information, see Adobe Contribute Help.
1 Select Site > Manage Sites.
2 Select a site, then click Edit.
3 In the Site Setup dialog box, expand Advanced Settings, select the Contribute category, and then select Enable
Contribute Compatibility.
4 If a dialog box appears saying that you must enable Design Notes and Check In/Check Out, click OK.
5 If you haven’t already provided your Check In/Check Out contact information, type your name and e-mail address
in the dialog box, and then click OK. Rollback status, CPS status, the Site Root URL text box, and the Administer
Site in Contribute button appear in the Site Definition dialog box.
If Rollback is enabled in Contribute, you’ll have the ability to roll back to previous versions of files that you’ve
changed in Dreamweaver.
6 Check the URL in the Site Root URL text box and correct it if necessary. Dreamweaver constructs a site root URL
based on other site-definition information you’ve provided, but sometimes the constructed URL isn’t quite right.
7 Click the Test button to verify that you’ve entered the correct URL.
Note: If you are ready to send a connection key or perform Contribute site administration tasks now, skip the
remaining steps.
8 Click Administer Site in Contribute if you want to make administration changes. Remember, you must have
Contribute installed on the same machine if you want to open Contribute Administrator from Dreamweaver.
9 Click Save and then click Done.
More Help topics
“Rolling back files (Contribute users)” on page 97
Administer a Contribute site using Dreamweaver
After you enable Contribute compatibility, you can use Dreamweaver to start Contribute to perform site
administration tasks.
Note: Contribute must be installed on the same computer as Dreamweaver.
Last updated 12/7/2011
56
USING DREAMWEAVER
Working with Dreamweaver sites
As an administrator of a Contribute site, you can:
• Change the administrative settings for the site.
Contribute administrative settings are a collection of settings that apply to all users of your website. These settings
enable you to fine-tune Contribute to provide a better user experience.
• Change the permissions granted to user roles in Contribute.
• Set up Contribute users.
Contribute users need certain information about the site to be able to connect to it. You can package all of this
information in a file called a connection key to send to Contribute users.
Note: A connection key is not the same as a Dreamweaver exported site file.
Before you give Contribute users the connection information they need to edit pages, use Dreamweaver to create
the basic folder hierarchy for your site, and to create any templates and CSS style sheets needed for the 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 Contribute category.
4 Click the Administer Site in Contribute button.
Note: This button does not appear if you have not enabled Contribute compatibility.
5 If prompted, enter the administrator password, and then click OK.
The Administer Website dialog box appears.
• To change administrative settings, select a category from the list on the left, and then change settings as necessary.
• To change role settings, in the Users and Roles category, click Edit Role Settings, and then make changes as
necessary.
• To send a connection key to set up users, in the Users and Roles category, click Send Connection Key, and then
complete the Connection Wizard.
6 Click Close, click OK, and then click Done.
For more information about administrative settings, managing user roles, or creating a connection key, see Contribute Help.
More Help topics
“Import and export Dreamweaver site settings” on page 49
Delete, move, or rename a remote file in a Contribute site
Deleting a file from the remote server that hosts a Contribute site works much like deleting a file from the server for
any Dreamweaver site. However, when you delete a file from a Contribute site, Dreamweaver asks whether to delete
all older versions of the file. If you choose to keep the older versions, Dreamweaver saves a copy of the current version
in the _baks folder so you can restore it later.
Renaming a remote file or moving it from one folder to another in a Contribute site works the same way it works in
any Dreamweaver site. In a Contribute site, Dreamweaver also renames or moves the associated previous versions of
the file that are saved in the _baks folder.
1 Select the file in the Remote pane of the Files panel (Window > Files), and then press Backspace (Windows) or
Delete (Macintosh).
Last updated 12/7/2011
57
USING DREAMWEAVER
Working with Dreamweaver sites
A dialog box appears asking you to confirm that you want to delete the file.
2 In the confirmation dialog box:
• To delete all previous versions of the file as well as the current version, select the Delete Rollback Versions option.
• To leave previous versions on the server, deselect the Delete Rollback Versions option.
3 Click Yes to delete the file.
Enable Contribute users to access templates without root folder access
In a Contribute site, you manage underlying file and folder permissions directly on the server. If, for security reasons,
you can’t give users read access to the /Templates folder, you can still make the templates available to users.
1 Set up the Contribute site so that its root folder is the folder you want users to see as the root.
2 Manually copy the template folder from the main site’s root folder into the Contribute site’s root folder, using the
Files panel.
3 After you update templates for the main site, recopy the changed templates into appropriate subfolders as needed.
If you take this approach, don’t use site root-relative links in the subfolders. Site root-relative links are relative to the
main root folder on the server, not to the root folder you define in Dreamweaver. Contribute users can’t create site
root-relative links.
If links in a Contribute page appear to be broken, it’s possible that there’s a problem with folder permissions,
particularly if the links link to pages outside of the Contribute user’s root folder. Check read and write permissions for
folders on the server.
More Help topics
“Absolute, document-relative, and site root-relative paths” on page 261
Troubleshoot a Contribute site
If a remote file in a Contribute site appears to be checked out, but the file isn’t actually locked on the user’s computer,
you can unlock the file to enable users to edit it.
When you click any button related to Contribute site administration, Dreamweaver verifies that it can connect to your
remote site and that the Site Root URL you’ve given for the site is valid. If Dreamweaver can’t connect, or if the URL
isn’t valid, an error message appears.
If the administration tools aren’t working properly, there might be something wrong with the _mm folder.
Unlock a file in a Contribute site
Note: Before following this procedure, make sure that the file really isn’t checked out. If you unlock a file while a
Contribute user is editing it, multiple users might edit the file simultaneously.
1 Do one of the following:
• Open the file in the Document window, and then select Site > Undo Check Out.
• In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), and then select Undo
Check Out.
A dialog box might appear, indicating who has the file checked out and asking you to confirm that you want to unlock
the file.
2 If the dialog box appears, click Yes to confirm.
Last updated 12/7/2011
58
USING DREAMWEAVER
Working with Dreamweaver sites
The file is unlocked on the server.
Troubleshoot connection problems for a Contribute site
1 Check the Site Root URL in the Contribute category of the Site Definition dialog box by opening that URL in a
browser, to make sure that the correct page opens.
2 Use the Test button in the Remote Info category of the Site Definition dialog box to make sure that you can connect
to the site.
3 If the URL is correct but the Test button results in an error message, ask your system administrator for help.
Troubleshoot Contribute administration tools
1 On the server, make sure that you have read and write permissions, and executable permissions if necessary, for the
_mm folder.
2 Make sure that the _mm folder contains a shared settings file with a CSI extension.
3 If it doesn’t, use the Connection Wizard (Windows) or Connection Assistant (Macintosh) to create a connection
to the site and to become an administrator for the site. The shared settings file is created automatically when you
become an administrator. For more information about becoming an administrator for an existing Contribute
website, see Administering Contribute in Contribute Help.
Last updated 12/7/2011
59
Chapter 4: Creating and Managing Files
Creating and opening documents
About creating Dreamweaver documents
Dreamweaver offers a flexible environment for working with a variety of web documents. In addition to HTML
documents, you can create and open a variety of text-based documents, including ColdFusion Markup Language
(CFML), ASP, JavaScript, and
Cascading Style Sheets
(CSS). Source code files, such as Visual Basic, .NET, C#, and Java, are also supported.
Dreamweaver provides several options for creating a new document. You can create any of the following:
• A new blank document or template
• A document based on one of the predesigned page layouts that comes with Dreamweaver, including over 30 CSSbased page layouts
• A document based on one of your existing templates
You can also set document preferences. For example, if you typically work with one type of document, you can set
it as the default document type for new pages you create.
You can easily define document properties, such as meta tags, document title, and background colors, and several
other page properties in either Design view or Code view.
Dreamweaver file types
You can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML
file. HTML files—or Hypertext Markup Language files—contain the tag-based language responsible for displaying a
web page in a browser. You can save HTML files with either the .html or .htm extension. Dreamweaver saves files using
the .html extension by default.
Dreamweaver lets you create and edit HTML5-based web pages. Starter layouts are also available for building HTML5
pages from scratch.
Following are some of the other common file types you might use when working in Dreamweaver:
CSS Cascading Style Sheet files have a .css extension. They are used to format HTML content and control the
positioning of various page elements.
GIF Graphics Interchange Format files have a .gif extension. GIF format is a popular web graphic format for cartoons,
logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.
JPEG Joint Photographic Experts Group files (named after the organization that created the format) have a .jpg
extension, and are usually photographs or high-color images. The JPEG format is best for digital or scanned
photographs, images using textures, images with gradient color transitions, and any images that require more than 256
colors.
XML Extensible Markup Language files have a .xml extension. They contain data in a raw form that can be formatted
using XSL (Extensible Stylesheet Language).
Last updated 12/7/2011
60
USING DREAMWEAVER
Creating and Managing Files
XSL Extensible Stylesheet Language files have a .xsl or .xslt extension. They are used to style XML data that you want
to display on a web page.
CFML ColdFusion Markup Language files have a .cfm extension. They are used to process dynamic pages.
PHP Hypertext Preprocessor files have a .php extension and are used to process dynamic pages.
More Help topics
“Displaying XML data with XSLT” on page 477
“Building applications visually” on page 583
“Understanding Cascading Style Sheets” on page 118
Create a blank page
You can create a page that contains a predesigned CSS layout, or create a completely blank page and then create a
layout of your own.
1 Select File > New.
2 In the Blank Page category of the New Document dialog box, select the kind of page you want to create from the
Page Type column. For example, select HTML to create a plain HTML page, select ColdFusion to create a
ColdFusion page, and so on.
3 If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column;
otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the
right side of the dialog box.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor
makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Dreamweaver also offers two HTML5 CSS layouts: two- and three-column fixed.
4 Select a document type from the DocType pop-up menu. In most cases, you can use the default selection, XHTML
1.0 Transitional.
Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTMLcompliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional
or XHTML 1.0 Strict from the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML
as an XML application. Generally, using XHTML gives you the benefits of XML, while ensuring the backward and
future compatibility of your web documents.
Note: For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the
specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0
(www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local
files (http://validator.w3.org/file-upload.html).
Dreamweaver also offers HTML5 as a doctype option.
5 If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-
up menu.
Add To Head Adds CSS for the layout to the head of the page you’re creating.
Last updated 12/7/2011
61
USING DREAMWEAVER
Creating and Managing Files
Create New File Adds CSS for the layout to a new external CSS file and attaches the new style sheet to the page you’re
creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To
do this, click the Attach Style Sheet icon above the Attach CSS file pane and select an existing CSS style sheet. This
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.
6 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the
page. To do this, click the Attach Style Sheet icon
above the Attach CSS file pane and select a CSS style sheet.
For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to new
documents.
7 Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as
you save it.
An InContext Editing-enabled page must have at least one div tag that can be specified as an editable region. For
example, if you’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these
layouts already contain pre-defined div tags. The InContext Editing editable region is automatically placed on the div
tag with the content ID. You can later add more editable regions to the page if you like.
8 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
9 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.
10 Click the Create button.
11 Save the new document (File > Save).
12 In the dialog box that appears, navigate to the folder where you want to save the file.
It’s a good idea to save your file in a Dreamweaver site.
13 In the File Name box, type a name for the file.
Avoid using spaces and special characters in file and folder names, and do not begin a filename with a numeral. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation marks (such as colons, slashes, or periods)
in the names of files you intend to put on a remote server; many servers change these characters during upload, which
will cause any links to the files to break.
More Help topics
“XHTML code” on page 282
“Laying out pages with CSS” on page 146
“Set default document type and encoding” on page 66
“Business Catalyst InContext Editing” on page 471
Create a blank template
You can use the New Document dialog box to create Dreamweaver templates. By default, templates are saved in the
Templates folder of your site.
1 Select File > New.
Last updated 12/7/2011
62
USING DREAMWEAVER
Creating and Managing Files
2 In the New Document dialog box, select the Blank Template category.
3 Select the kind of page you want to create from the Template Type column. For example, select HTML template to
create a plain HTML template, select ColdFusion template to create a ColdFusion template, and so on.
4 If you want your new page to contain a CSS layout, select a predesigned CSS layout from the Layout column;
otherwise, select None. Based on your selection, a preview and description of the selected layout appears on the
right side of the dialog box.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor
makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
5 Select a document type from the DocType pop-up menu. In most cases, you will want to leave this selected to the
default selection, XHTML 1.0 Transitional.
Selecting one of the XHTML document type definitions from the DocType (DTD) menu makes your page XHTMLcompliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0 Transitional
or XHTML 1.0 Strict from the menu. XHTML (Extensible Hypertext Markup Language) is a reformulation of HTML
as an XML application. Generally, using XHTML gives you the benefits of XML, while ensuring the backward and
future compatibility of your web documents.
Note: For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the
specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0
(www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local
files (http://validator.w3.org/file-upload.html).
6 If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-
up menu.
Add to Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS styles sheet and attaches the new style sheet to the page
you’re creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. To
above the Attach CSS file pane and select an existing CSS style sheet. This
do this, click the Attach Style Sheet icon
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.
7 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the
page. To do this, click the Attach Style Sheet icon
above the Attach CSS file pane and select a CSS style sheet.
8 Select Enable InContext Editing if you want to create a page that becomes InContext Editing-enabled as soon as
you save it.
An InContext Editing-enabled page must have at least one div tag that can be specified as an editable region. For
example, if you’ve selected the HTML page type, you must select one of the CSS layouts for your new page, since these
layouts already contain pre-defined div tags. The InContext Editing editable region is automatically placed on the div
tag with the content ID. You can later add more editable regions to the page if you like.
9 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
10 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.
Last updated 12/7/2011
63
USING DREAMWEAVER
Creating and Managing Files
11 Click the Create button.
12 Save the new document (File > Save). If you haven’t added editable regions to the template yet, a dialog box appears
telling you that there are no editable regions in the document. Click OK to close the dialog box.
13 In the
14 Save As
15 dialog box, select a site in which to save the template.
16 In the File Name box, type a name for the new template. You do not need to append a file extension to the name of
the template. When you click Save, the .dwt extension is appended to the new template, which is saved in the
Templates folder of your site.
Avoid using spaces and special characters in file and folder names and do not begin a filename with a numeral. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the
names of files you intend to put on a remote server; many servers change these characters during upload, which will
cause any links to the files to break.
More Help topics
“XHTML code” on page 282
“Laying out pages with CSS” on page 146
“Creating and managing templates” on page 374
“Working with Dreamweaver sites” on page 36
“Set default document type and encoding” on page 66
“Business Catalyst InContext Editing” on page 471
Create a page based on an existing template
You can select, preview, and create a new document from an existing template. You can either use the New Document
dialog box to select a template from any of your Dreamweaver-defined sites or use the Assets panel to create a new
document from an existing template.
More Help topics
“Creating and managing templates” on page 374
“Working with Dreamweaver sites” on page 36
“Set default document type and encoding” on page 66
Create a document based on a template
1 Select File > New.
2 In the New Document dialog box, select the Page From Template category.
3 In the Site column, select the Dreamweaver site that contains the template you want use, and then select a template
from the list on the right.
4 Deselect Update Page When Template Changes if you don’t want to update this page each time you make changes
to the template on which this page is based.
5 Click Preferences if you want to set default document preferences, such as a document type, encoding, and a file
extension.
Last updated 12/7/2011
64
USING DREAMWEAVER
Creating and Managing Files
6 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design
content.
7 Click Create and save the document (File > Save).
Create a document from a template in the Assets panel
1 Open the Assets panel (Window > Assets), if it is not already open.
2 In the Assets panel, click the Templates icon
on the left to view the list of templates in your current site.
If you just created the template you want to apply, you might need to click the Refresh button to see it.
3 Right-click (Windows) or Control-click (Macintosh) the template you want to apply, then select New From
Template.
The document opens in the Document window.
4 Save the document.
Create a page based on a Dreamweaver sample file
Dreamweaver comes with several professionally developed frame page layout and CSS design files. You can use these
sample files as starting points for designing pages in your sites. When you create a document based on a sample file,
Dreamweaver creates a copy of the file.
You can preview a sample file and read a brief description of a document’s design elements in the New Document
dialog box. In the case of CSS style sheets, you can copy a predesigned style sheet and apply it to your documents.
Note: If you create a document based on a predefined frameset, only the frameset structure is copied, not the frame
contents; additionally, you must save each frame file separately.
1 Select File > New.
2 In the New Document dialog box, select the Page From Sample category.
3 In the Sample Folder column, select CSS Style Sheet or Frameset; then select a sample file from the list on the right.
4 Click the Create button.
The new document opens in the Document window (Code and Design views). If you selected CSS Style Sheet, the CSS
style sheet opens in Code view.
5 Save the document (File > Save).
6 If the Copy Dependent Files dialog box appears, set the options, and then click Copy to copy the assets to the
selected folder.
You can choose your own location for the dependent files or use the default folder location Dreamweaver generates
(based on the sample file’s source name).
More Help topics
“Understanding Cascading Style Sheets” on page 118
“Save frame and frameset files” on page 192
Last updated 12/7/2011
65
USING DREAMWEAVER
Creating and Managing Files
Create other kinds of pages
The Other category of the New Document dialog box lets you create various types of pages that you might want to use
in Dreamweaver, including C#, VBScript, and text-only pages.
1 Select File > New.
2 In the New Document dialog box, select the Other category.
3 Select the kind of document you want to create from the Page Type column and click the Create button.
4 Save the document (File > Save).
Save and revert documents
You can save a document using its current name and location, or save a copy of a document using a different name
and location.
When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use special
characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to
put on a remote server; many servers change these characters during upload, which will cause any links to the files to
break. Also, do not begin a filename with a numeral.
More Help topics
“Create a blank page” on page 60
Save a document
1 Do one of the following:
• To overwrite the current version on the disk, and save any changes you have made, select File > Save.
• To save the file in a different folder or using a different name, select File >
• Save As
• .
2 In the
3 Save As
4
dialog box that appears, navigate to the folder where you want to save the file.
5 In the File Name text box, type a name for the file.
6 Click Save to save the file.
Save all open documents
1 Select File > Save All.
2 If there are any unsaved documents open, the
3 Save As
4 dialog box is displayed for each unsaved document.
In the dialog box that appears, navigate to the folder where you want to save the file.
5 In the File Name box, type a name for the file and click Save.
Last updated 12/7/2011
66
USING DREAMWEAVER
Creating and Managing Files
Revert to the last saved version of a document
1 Select File > Revert.
A dialog box asks if you want to discard your changes, and revert to the previously saved version.
2 Click Yes to revert to the previous version; click No to keep your changes.
Note: If you save a document, and then exit Dreamweaver, you cannot revert to the previous version of the document
when you restart Dreamweaver.
Set default document type and encoding
You can define which document type is used as a default document for a site.
For example, if most pages in your site are of a specific file type (such as Cold Fusion, HTML, or ASP documents), you
can set document preferences that automatically create new documents of the specified file type.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
You can also click the Preferences button in the New Document dialog box to set new document preferences when you
create a new document.
2 Click New Document from the category list on the left.
3 Set or change preferences as necessary, and click OK to save them.
Default Document Select a document type that will be used for pages that you create.
Default Extension Specify the file extension you prefer (.htm or .html) for new HTML pages you create.
Note: This option is disabled for other file types.
Default Document Type (DDT) Select one of the XHTML document type definitions (DTD) to make new pages
XHTML-compliant. For example, you can make an HTML document XHTML-compliant by selecting XHTML 1.0
Transitional or XHTML 1.0 Strict from the menu.
Default Encoding Specify the encoding to be used when a new page is created, as well as when a document is opened
that does not specify any encoding.
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/REC-html40/sgml/entities.html.
If you select Unicode (UTF-8) as a default encoding, you can include a Byte Order Mark (BOM) in the document by
selecting the Include Unicode Signature (BOM) option.
A BOM is 2-4 bytes at the beginning of a text file that identifies a file as Unicode, as well as 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.
Unicode Normalization Form Select one of these options if you select Unicode (UTF-8) as a default encoding.
There are four Unicode Normalization Forms. The most important is Normalization Form C because it's the most
common one used in the Character Model for the World Wide Web. Adobe provides the other three Unicode
Normalization Forms for completeness.
Show New Document Dialog Box on Control+N Deselect this option (“on Command+N” for Macintosh) to
automatically create a document of the default document type when you use the key command.
Last updated 12/7/2011
67
USING DREAMWEAVER
Creating and Managing Files
In Unicode, there are characters that 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 form. 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.
More Help topics
“XHTML code” on page 282
“Understanding document encoding” on page 204
Converting HTML5 to an older doctype
Using File > Convert to switch from HTML5 to an older DOCTYPE doesn’t remove HTML5 elements or attributes.
Only the DOCTYPE changes, and trailing slashes (for XHTML) are inserted.
Semantic tags, such as and , and attributes such as required, placeholder, and
type="number" are not affected.
Set the default file extension of new HTML documents
You can define the default file extension of HTML documents created in Dreamweaver. For example, you can use an
.htm or .html extension for all new HTML documents.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
You can also click the Preferences button in the New Document dialog box to set new document preferences when you
create a new document.
2 Click New Document from the category list on the left.
3 Make sure that HTML is selected in the Default Document pop-up menu.
4 In the Default Extension box, specify the file extension you want for new HTML documents created in
Dreamweaver.
For Windows, you can specify the following extensions: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml.
For Macintosh, you can specify the following extensions: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Open and edit existing documents
You can open an existing web page or text-based document, whether or not it was created in Dreamweaver, and edit
it in either Design view or Code view.
If the document you open is a Microsoft Word file that was saved as an HTML document, you can use the Cleanup
Word HTML command to remove the extraneous markup tags that Word inserts into HTML files.
To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.
Last updated 12/7/2011
68
USING DREAMWEAVER
Creating and Managing Files
You can also open non-HTML text files, such as JavaScript files, XML files, CSS style sheets, or text files saved by word
processors or text editors.
1 Select File > Open.
You can also use the Files panel to open files.
2 Navigate to and select the file you want to open.
Note: If you haven’t already done so, it’s a good idea to organize files you plan to open and edit in a Dreamweaver site,
instead of opening them from another location.
3 Click Open.
The document opens in the Document window. JavaScript, text, and CSS Style Sheets open in Code view by default.
You can update the document while working in Dreamweaver, and save the changes in the file.
More Help topics
“Clean up code” on page 310
“Start an external editor for media files” on page 248
“Work with files in the Files panel” on page 75
Open Related Files
Dreamweaver lets you view files related to your main document, without losing the main document’s focus. For
example, if you have CSS and JavaScript files attached to a main document, Dreamweaver lets you view and edit these
related files in the Document window while keeping the main document visible.
Note: Dynamically Related Files (such as PHP files in Content Management Systems) are covered in the next Help
section.
By default, Dreamweaver displays the names of all files related to a main document in a Related Files toolbar below the
main document’s title. The order of the buttons in the toolbar follows the order of related files links that exist within
the main document.
Note: If a related file is missing, Dreamweaver still displays the corresponding button in the Related Files toolbar. If you
click the button, however, Dreamweaver does not display anything.
Dreamweaver supports the following kinds of related files:
• Client-side script files
• Server Side Includes
• Spry data set sources (XML and HTML)
• External CSS style sheets (including nested style sheets)
For a video overview from the Dreamweaver engineering team about working with related files, see
www.adobe.com/go/dw10relatedfiles.
For a video tutorial on working with Live View, related files, and the Code Navigator, see
www.adobe.com/go/lrvid4044_dw.
Last updated 12/7/2011
69
USING DREAMWEAVER
Creating and Managing Files
Open a related file from the Related Files toolbar
Do one of the following:
• In the Related Files toolbar at the top of the document, click the filename of the related file you want to open.
• In the Related Files toolbar, right-click the filename of the related file you want to open and select Open as Separate
File from the context menu. When you open a related file by this method, the main document does not remain
simultaneously visible.
Open a related file from the Code navigator
1 Place the insertion point on a line or in an area that you know is affected by a related file.
2 Wait for the Code Navigator indicator to appear, and then click it to open the Code Navigator.
3 Hover over the items in the Code Navigator to see more information about them. For example, if you want to
change a particular CSS color property, but don’t know which rule it resides in, you can find the property by
hovering over the available rules in the Code Navigator.
4 Click the item you’re interested in to open the corresponding related file.
Return to the source code of the main document
❖ Click the Source Code button in the Related Files toolbar.
Change the display of related files
You can view related files in a number of ways:
• When you open a related file from Design view or Code and Design views (Split view), the related file displays in a
split view above the Design view of the main document.
You can select View > Design View on Top if you want the related file to display at the bottom of the Document
window instead.
• When you open a related file from vertically split Code and Design views (View > Split vertically), the related file
displays in a split view alongside the Design view of the main document.
You can select or deselect Design View on Left (View > Design View on Left), depending on where you want the
Design view.
• When you open a related file from Split Code view or Vertical Split Code view (View > Split Code view, and View >
Split vertically), the related file displays in a split view beneath, above, or alongside the source code for the main
document, depending on the options you have selected.
The “code view” in the display option refers to the source code of the main document. For example, if you select
View > Code View on Top, Dreamweaver displays the source code of the main document in the top half of the
Document window. If you select View > Code View on Left, Dreamweaver displays the source code of the main
document on the left side of the Document window.
• Standard Code view does not let you display related Documents at the same time as the main document’s source code.
Disable related files
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 In the General category, deselect Enable Related Files.
Last updated 12/7/2011
70
USING DREAMWEAVER
Creating and Managing Files
More Help topics
“Switch between views in the Document window” on page 17
“Navigate to related code” on page 302
“Previewing pages in Dreamweaver” on page 276
Related files tutorial
Open Dynamically-Related Files
The Dynamically-Related Files feature extends the functionality of the Related Files feature by allowing you to see the
related files of dynamic pages in the Related Files toolbar. Specifically, the Dynamically-Related Files feature lets you
see the numerous dynamic includes that are required to generate the runtime code for popular open-source PHP
Content Management System (CMS) frameworks such as WordPress, Drupal and Joomla!.
To use the Dynamically-Related Files feature, you must have access to a local or remote PHP application server
running WordPress, Drupal, or Joomla!. One common approach for testing pages is to set up a localhost PHP
application server, and test the pages locally.
Before you test pages, you’ll need to perform the following steps:
• Set up a Dreamweaver site and make sure that you have filled out the Web URL text box the Site Setup dialog box.
• Set up a PHP application server.
Important: The server must be running before you attempt to work with Dynamically-Related Files in Dreamweaver.
• Install WordPress, Drupal, or Joomla! on the application server. For more information, see:
• WordPress Installation
• Drupal Installation
• Joomla Installation
• In Dreamweaver, define a local folder where you’ll download and edit your CMS files.
• Define the location of the installed WordPress, Drupal, or Joomla! files as your remote and testing folder.
• Download (Get) your CMS files from the remote folder.
More Help topics
www.adobe.com/go/dwcs5drf_en
Set Dynamically-Related Files preferences
When you open a page that is associated with Dynamically-Related Files, Dreamweaver can discover the files
automatically, or let you discover the files manually (which you do by clicking a link in the Info bar above the page).
The default setting is manual discovery.
1 Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh OS).
2 In the General category, make sure the Enable Related Files option is selected.
3 Select Manually or Automatically from the Dynamically-Related Files pop-up menu. You can also disable the
discovery entirely by selecting Disabled.
Last updated 12/7/2011
71
USING DREAMWEAVER
Creating and Managing Files
Discover Dynamically-Related Files
1 Open a page that has Dynamically-Related Files associated with it—for example, the site root index.php page of a
WordPress, Drupal, or Joomla! site.
2 If the discovery of Dynamically-Related Files is set to manual (the default), click the Discover link in the Info bar
that appears above the page in the Document window.
If the discovery of Dynamically-Related Files is automatically enabled, then a list of Dynamically-Related Files
appears in the Related Files toolbar.
The order of Related and Dynamically-Related Files in the Related Files toolbar is as follows:
• Static related files (i.e. related files that do not require any sort of dynamic processing)
• External related files (i.e. .css and .js files) that are attached to dynamic path server include files
• Dynamic path server include files (i.e. .php, .inc, and .module files)
Filter Related Files
Because Related Files and Dynamically-Related Files can often be numerous, Dreamweaver lets you filter Related Files
so that you can precisely locate the files you want to work with.
1 Open a page that has Related Files associated with it.
2 Discover Dynamically-Related Files if necessary.
3 Click the Filter Related Files icon at the right side of the Related Files toolbar.
4 Select the types of files you want to see in the Related Files toolbar. By default, Dreamweaver selects all Related Files.
5 To create a custom filter, click the Filter Related Files icon and choose Custom Filter.
The Custom Filter dialog only allows for the filtering of exact file names (style.css), file extensions (.php), and
wildcard expressions using asterisks (*menu*). You can filter on multiple wildcard expressions by separating each
expression with a semi-colon (for example, style.css;*.js;*tpl.php).
Note: Filter settings do not persist once you close the file.
Clean up Microsoft Word HTML files
You can open documents saved by Microsoft Word as HTML files, and then use the Clean Up Word HTML command
to remove the extraneous HTML code generated by Word. The Clean Up Word HTML command is available for
documents saved as HTML files by Word 97 or later.
The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not
needed to display the HTML file. Retain a copy of your original Word (.doc) file as a backup, because you may not be
able to reopen the HTML document in Word once you’ve applied the Clean Up Word HTML feature.
To clean up HTML or XHTML that was not generated by Microsoft Word, use the Cleanup HTML command.
1 Save your Microsoft Word document as an HTML file.
Note: In Windows, close the file in Word to avoid a sharing violation.
2 Open the HTML file in Dreamweaver.
To view the HTML code generated by Word, switch to Code view (View > Code).
3 Select Commands > Clean Up Word HTML.
Note: If Dreamweaver is unable to determine which version of Word was used to save the file, select the correct version
from the pop-up menu.
Last updated 12/7/2011
72
USING DREAMWEAVER
Creating and Managing Files
4 Select (or deselect) options for the cleanup. The preferences you enter are saved as default cleanup settings.
Dreamweaver applies the cleanup settings to the HTML document and a log of the changes appears (unless you
deselected that option in the dialog box).
Remove All Word Specific Markup Removes all Microsoft Word-specific HTML, including XML from HTMLtags,
Word custom metadata and link tags in the head of the document, Word XML markup, conditional tags and their
contents, and empty paragraphs and margins from styles. You can select each of these options individually using the
Detailed tab.
Clean Up CSS Removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has
the same style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from
tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab.
Clean Up Tags Removes HTML tags, converting the default body text to size 2 HTML text.
Fix Invalidly Nested Tags Removes the font markup tags inserted by Word outside the paragraph and heading (block-
level) tags.
Apply Source Formatting Applies the source formatting options you specify in HTML Format preferences and
SourceFormat.txt to the document.
Show Log On Completion Displays an alert box with details about the changes made to the document as soon as the
cleanup is finished.
5 Click OK, or click the Detailed tab if you want to further customize the Remove All Word Specific Markup and
Clean Up CSS options, and then click OK.
More Help topics
“Clean up code” on page 310
“Import Microsoft Office documents (Windows only)” on page 221
Managing files and folders
About managing files and folders
Dreamweaver includes a Files panel that helps you manage and transfer files to and from a remote server. When you
transfer files between local and remote sites, parallel file and folder structures between the sites are maintained. When
transferring files between sites, Dreamweaver creates corresponding folders if they do not yet exist in a site. You can
also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions as necessary
and removes unwanted files when appropriate.
Using the Files panel
The Files panel enables you to view files and folders, whether they are associated with a Dreamweaver site or not, and
perform standard file maintenance operations, such as opening and moving files.
Note: In previous versions of Dreamweaver the Files panel was called the Site panel.
You can move the Files panel as necessary and set preferences for the panel.
Use this panel to perform the following tasks:
• Access sites, a server, and local drives
Last updated 12/7/2011
73
USING DREAMWEAVER
Creating and Managing Files
• View files and folders
• Manage files and folders in the Files panel
For Dreamweaver sites, use the following options to display or transfer files:
A
B
C
D
E
F
G
H
I
J
K
L
M
Expanded Files panel options.
A. Site pop-up menu B. Connect/Disconnect C. Refresh D. View site FTP log E. Site files view F. Testing server G. Repository view H. Get
File(s) I. Put File(s) J. Check Out File(s) K. Check In File(s) L. Synchronize M. Expand/Collapse
Note: The Site Files view, Testing Server view, and Synchronize buttons appear only in the expanded Files panel.
The Site pop-up menu Lets you select a Dreamweaver site and display that site’s files. You can also use the Site menu
to access all the files on your local disk, much like
Windows Explorer
(Windows) or the Finder (Macintosh).
Connect/Disconnect (FTP, RDS, and WebDAV protocol) Connects to or disconnects from the remote site. By default,
Dreamweaver disconnects from the remote site if it has been idle for more than 30 minutes (FTP only). To change the
time limit, select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), then select Site from the
category list on the left.
Refresh Refreshes the local and remote directory lists. Use this button to manually refresh the directory lists if you
deselected either Refresh Local File List Automatically or Refresh Remote File List Automatically in the Site Definition
dialog box.
Site Files view Displays the file structure of the remote and local sites in the panes of the Files panel. (A preference
setting determines which site appears in the left pane and which appears in the right pane.) Site Files view is the default
view for the Files panel.
Testing Server view Displays the directory structure of the testing server and the local site.
Repository view Displays the Subversion (SVN) Repository.
Get File(s) Copies the selected files from the remote site to your local site (overwriting the existing local copy of the
file, if any). If Enable File Check In And Check Out is enabled, the local copies are read-only; the files remain available
on the remote site for other team members to check out. If Enable File Check In and Check Out is disabled, the file
copies will have both read and write privileges.
Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Remote pane is
active, the selected remote or testing server files are copied to the local site; if the Local pane is active, Dreamweaver copies
the remote or testing server version of the selected local files to the local site.
Put File(s) Copies the selected files from the local site to the remote site.
Note: The files Dreamweaver copies are the files you select in the active pane of the Files panel. If the Local pane is active,
the selected local files are copied to the remote site or testing server; if the Remote pane is active, Dreamweaver copies the
local versions of the selected remote server files to the remote site.
If you are putting a file that doesn’t already exist on the remote site, and Enable File Check In and Out is enabled, the
file is added to the remote site as “checked out.” Click the Check In Files button if you want to add a file without the
checked out status.
Last updated 12/7/2011
74
USING DREAMWEAVER
Creating and Managing Files
Check Out File(s) Transfers a copy of the file from the remote server to your local site (overwriting the existing local
copy of the file, if any) and marks the file as checked out on the server. This option is not available if Enable File Check
In and Check Out in the Site Definitions dialog box is disabled for the current site.
Check In File(s) Transfers a copy of the local file to the remote server and makes the file available for editing by others.
The local file becomes read-only. This option is not available if the Enable File Check In and Check Out option in the
Site Definitions dialog box is disabled for the current site.
Synchronize Synchronizes the files between the local and remote folders.
The Expand/Collapse button Expands or collapses the Files panel to display one or two panes.
More Help topics
“Files panel overview” on page 15
“Working with Dreamweaver sites” on page 36
“Check files into and out of a remote folder” on page 86
“Put files on a remote server” on page 83
“Get files from a remote server” on page 81
“Synchronizing files” on page 93
View files and folders
You can view files and folders in the Files panel, whether they are associated with a Dreamweaver site or not. When
you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and, for Dreamweaver
sites, you can expand or collapse the Files panel.
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. Or, you can switch the content views in the expanded Files panel using
the Always Show option.
Open or close the Files panel
❖ Select Window > Files.
Expand or collapse the Files panel (Dreamweaver sites only)
❖ In the Files panel (Window > Files), click the Expand/Collapse button
in the toolbar.
Note: If you click the Expand/Collapse button to expand the panel while it is docked, the panel maximizes so that you
cannot work in the Document window. To return to the Document window, click the Expand/Collapse button again to
collapse the panel. If you click the Expand/Collapse button to expand the panel while it is not docked, you can still work
in the Document window. Before you can dock the panel again, you must first collapse it.
When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list
of files. When expanded, it displays the local site and either the remote site or testing server.
Change the size of the view area in the expanded Files panel
❖ In the Files panel (Window > Files), with the panel expanded, do one of the following:
• Drag the bar that separates the two views to increase or decrease the view area of the right or left pane.
• Use the scroll bars at the bottom of the Files panel to scroll through the views’ contents.
Last updated 12/7/2011
75
USING DREAMWEAVER
Creating and Managing Files
Change the site view in Files panel (Dreamweaver sites only)
❖ Do one of the following:
• In the collapsed Files panel (Window > Files), select Local View, Remote View, Testing Server, or Repository View
from the Site View pop-up menu.
Note: Local View appears in the Site View menu by default.
• In the expanded Files panel (Window > Files), click the Site Files button (for the remote site), the Testing Server
button, or the Repository Files button.
A
B
C
A. Site Files B. Testing Server C. Repository Files
Note: Before you can view a remote site, testing server or repository, you must set up a remote site, testing server, or SVN
repository.
View files outside of a Dreamweaver site
❖ Navigate your computer using the Site pop-up menu, much as you would if you were using
❖ Windows Explorer
❖ (Windows) or the Finder (Macintosh).
Work with files in the Files panel
You can open or rename files; add, move, or delete files; or refresh the Files panel after you make changes.
For Dreamweaver sites, you can also determine which files (on either the local or remote site) have been updated since
the last time they were transferred.
More Help topics
“Synchronizing files” on page 93
“Access sites, a server, and local drives” on page 78
Open a file
1 In the Files panel (Window > Files), select a site, server, or drive from the pop-up menu (where the current site,
server, or drive appears).
2 Navigate to the file you want to open.
3 Do one of the following:
• Double-click the file’s icon.
• Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Open.
Dreamweaver opens the file in the Document window.
Last updated 12/7/2011
76
USING DREAMWEAVER
Creating and Managing Files
Create a file or folder
1 In the Files panel (Window > Files), select a file or folder.
Dreamweaver will create the new file or folder inside the currently selected folder, or in the same folder as the currently
selected file.
2 Right-click (Windows) or Control-click (Macintosh), then select New File or New Folder.
3 Enter a name for the new file or folder.
4 Press Enter (Windows) or Return (Macintosh).
Delete a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to delete.
2 Right-click (Windows) or Control-click (Macintosh), then select Edit > Delete.
Rename a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to rename.
2 Do one of the following to activate the name of the file or folder:
• Click in the filename, pause, then click again.
• Right-click (Windows) or Control-click (Macintosh) the file’s icon, then select Edit > Rename.
3 Type the new name over the existing name.
4 Press Enter (Windows) or Return (Macintosh).
Move a file or folder
1 In the Files panel (Window > Files), select the file or folder you want to move.
2 Do one of the following:
• Copy the file or folder, then paste it in a new location.
• Drag the file or folder to a new location.
3 Refresh the Files panel to see the file or folder in its new location.
Refresh the Files panel
❖ Do one of the following:
• Right-click (Windows) or Control-click (Macintosh) any file or folder, then select Refresh.
• (Dreamweaver sites only) Click the Refresh button in the Files panel toolbar (this option refreshes both panes).
Note: Dreamweaver refreshes the Files panel when you make changes in another application, then return to
Dreamweaver.
Find files in your Dreamweaver site
Dreamweaver makes it easy to find selected, open, checked out, or recently modified files in your site. You can also
find files that are newer in your local or remote site.
More Help topics
“Use reports to test your site” on page 104
Last updated 12/7/2011
77
USING DREAMWEAVER
Creating and Managing Files
Find an open file in your site
1 Open the file in the Document window.
2 Select Site > Locate in Site.
Dreamweaver selects the file in the Files panel.
Note: If the open file in the Document window is not part of the current site in the Files panel, Dreamweaver attempts to
determine which of your Dreamweaver sites the file belongs to; if the current file belongs to only one local site,
Dreamweaver opens that site in the Files panel, then highlights the file.
Locate and select checked out files in a Dreamweaver site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,
then select Edit > Select Checked Out Files.
Dreamweaver selects the files in the Files panel.
Find a selected file in your local or remote site
1 Select the file in the Local or Remote view of the Files panel (Window > Files).
2 Right-click (Windows) or Control-click (Macintosh), then select Locate in Local Site or Locate in Local Site
(depending on where you selected the file).
Dreamweaver selects the file in the Files panel.
Locate and select files that are newer in the local site than in the remote site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,
then select Edit > Select Newer Local.
Dreamweaver selects the files in the Files panel.
Locate and select files that are newer in the remote site than in the local site
❖ In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,
then select Edit > Select Newer Remote.
Dreamweaver selects the files in the Files panel.
Find recently modified files in your site
1 In the collapsed Files panel (Window > Files), click the Options menu in the upper-right corner of the Files panel,
and then select Edit > Select Recently Modified.
2 Do one of the following to indicate search dates for the report:
• To report on all files modified in the last several days, select Files Created or Modified in the Last and enter a
number in the box.
• To report on all files modified within a specific time frame, click the Files Created or Modified in the Between radio
button, then specify a date range.
3 (Optional) Enter a user name in the Modified By box to limit your search to files modified by a specific user between
the dates you indicated.
Note: This option is only available for reports on Contribute sites.
Last updated 12/7/2011
78
USING DREAMWEAVER
Creating and Managing Files
4 Select a radio button to indicate where you want to view files listed in the report, if necessary:
Local Machine if the site contains static pages.
Testing Server if the site contains dynamic pages.
Note: This option assumes you defined a Testing Server in the Site Definition dialog box (XREF). If you have not defined
a Testing Server and entered a URL prefix for that server, or if you are running the report for more than one site, this
option is not available.
Other Location if you want to enter a path in the text box.
5 Click OK to save your settings.
Dreamweaver highlights the files that were modified within the selected time frame in the Files panel.
Identify and delete unused files
You can identify and delete files that are no longer used by other files in your site.
1 Select Site > Check Links Sitewide.
Dreamweaver checks all the links in your site and displays the broken ones in the Results panel.
2 Select Orphaned Files from the menu on the Link Checker panel.
Dreamweaver displays all the files with no incoming links. This means that no files in your site link to these files.
3 Select the files you want to delete and press Delete.
Important: Although no other file in the site links to these files, some of the listed files may link to other files. Use caution
when deleting the files.
More Help topics
“Enable and disable site cloaking” on page 98
Access sites, a server, and local drives
You can access, modify, and save files and folders in your Dreamweaver sites, as well as files and folders that are not
part of a Dreamweaver site. In addition to Dreamweaver sites, you can access a server, a local drive, or your desktop.
Before you can access a remote server, you must set up Dreamweaver to work with that server.
Note: The best way to manage your files is to create a Dreamweaver site.
Open an existing Dreamweaver site
❖ In the Files panel (Window > Files), select a site from the menu (where the current site, server, or drive appears).
Last updated 12/7/2011
79
USING DREAMWEAVER
Creating and Managing Files
Open a folder on a remote FTP or RDS server
1 In the Files panel (Window > Files), select a server name from the menu (where the current site, server, or drive
appears).
Note: Server names appear for servers you’ve configured Dreamweaver to work with.
2 Navigate to and edit files as you normally do.
Access a local drive or your desktop
1 In the Files panel (Window > Files), select Desktop, Local Disk, or CD Drive from the menu (where the current site,
server, or drive appears).
2 Navigate to a file, then do any of the following:
• Open files in Dreamweaver or another application
• Rename files
• Copy files
• Delete files
• Drag files
When you drag a file from one Dreamweaver site to another or to a folder that is not part of a Dreamweaver site,
Dreamweavercopies the file to the location where you drop it. If you drag a file within the same Dreamweaver site,
Dreamweavermoves the file to the location where you drop it. If you drag a file that is not part of a Dreamweaver site
to a folder that is not part of a Dreamweaver site, Dreamweaver moves the file to the location where you drop it.
Note: To move a file that Dreamweaver copies by default, hold down the Shift key (Windows) or the Command key
(Macintosh) while you drag. To copy a file that Dreamweaver moves by default, hold the Control key (Windows) or the
Option key (Macintosh) while you drag.
Customize the file and folder details displayed in the expanded Files panel
When you view a Dreamweaver site in the expanded Files panel, information about the files and folders is displayed
in columns. For example, you can see the file type or the date a file was modified.
You can customize the columns by doing any of the following (some operations are only available for columns you
add, not default columns):
• Reorder or realign columns
• Add new columns (for a maximum of 10 columns)
• Hide columns (except the filename column)
• Designate columns to be shared with all users connected to a site
Last updated 12/7/2011
80
USING DREAMWEAVER
Creating and Managing Files
• Delete columns (custom columns only)
• Rename columns (custom columns only)
• Associate columns with a Design Note (custom columns only)
Change the order of the columns
❖ Select a column name, and then click the up or down arrow button to change the position of the selected column.
Note: You can change the order of any column except Name, which is always the first column.
Add, delete, or change detail columns
1 Select Site > Manage Sites.
2 Select a site, then click Edit.
3 Expand Advanced Settings and select the File View Columns category.
4 Select a column and click the Plus (+) button to add a column, or the Minus (–) button to delete a column.
Note: The column is deleted immediately and without confirmation, so make certain that you want to delete the column
before clicking the Minus (–) button.
5 In the Column Name box, enter a name for your column.
6 Select a value from the Associate with Design Notes menu, or type in your own.
Note: You must associate a new column with a Design Note, so that there is data to display in the Files panel.
7 Select an alignment to determine how text is aligned within the column.
8 Select or deselect Show to reveal or hide the column.
9 Select Share with All Users of This Site to share the column with all users connected to the remote site.
Sort by any detail column in the Files panel
❖ Click the heading for the column you want to sort.
Click the heading again to reverse the order (ascending or descending) by which Dreamweaver sorts the column.
Getting and putting files to and from your server
File transfer and dependent files
If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local
and remote sites. If you’re the only person working on the remote site, however, you can use the Get and Put
commands to transfer files without checking them in or out.
When you transfer a document between a local and remote folder using the Files panel, you have the option of
transferring the document’s dependent files. Dependent files are images, external style sheets, and other files
referenced in your document that a browser loads when it loads the document.
Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again. This is also true for uploading and
checking in files: no need if up-to-date copies are already at the remote site.
Last updated 12/7/2011
81
USING DREAMWEAVER
Creating and Managing Files
Library items are treated as dependent files.
Some servers report errors when putting library items. However, you can cloak these files to prevent them from being
transferred.
More Help topics
“Checking in and checking out files” on page 85
“Enable and disable site cloaking” on page 98
About background file transfers
You can perform other, non-server-related, activities while you’re getting or putting files. Background file transfer
works for all of the transfer protocols supported by Dreamweaver: FTP, SFTP, LAN, WebDAV, Subversion, and RDS.
Non-server-related activities include common operations like typing, editing external style sheets, generating sitewide reports, and creating new sites.
Server-related activities that Dreamweaver cannot perform during file transfers include the following:
• Put/Get/Check in/Check out files
• Undo check-out
• Create a database connection
• Bind dynamic data
• Preview data in Live view
• Insert a web service
• Delete remote files or folders
• Preview in a browser on a testing server
• Save a file to a remote server
• Insert an image from a remote server
• Open a file from a remote server
• Auto put files upon saving
• Drag files to the remote site
• Cut, copy, or paste files on the remote site
• Refresh Remote view
By default, the Background File Activity dialog box is open during file transfers. You can minimize the dialog box by
clicking the Minimize button in the upper right corner. Closing the dialog box during file transfers results in a
cancelation of the operation.
Get files from a remote server
Use the Get command to copy files from the remote site to your local site. You can use the Files panel or the Document
window to get files.
Dreamweaver creates a log of file activity during the transfer that you can view and save.
Note: You cannot turn background file transfer off. If you have the detail log open in the Background File Activity dialog
box, you can close that to improve performance.
Last updated 12/7/2011
82
USING DREAMWEAVER
Creating and Managing Files
Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP,
the Site FTP log can help you determine the problem.
More Help topics
“Checking in and checking out files” on page 85
“Synchronizing files” on page 93
Get files from a remote server using the Files panel
1 In the Files panel (Window > Files), select the desired files to download.
Usually you select these files in the Remote view, but you can select the corresponding files in the Local view if you
prefer. If the Remote view is active, then Dreamweaver copies the selected files to the local site; if the Local view is
active, then Dreamweaver copies the remote versions of the selected local files to the local site.
Note: To get only those files for which the remote version is more recent than the local version, use the Synchronize
command.
2 Do one of the following to get the file:
• Click the Get button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh) the file in the Files panel, then select Get from the context menu.
3 Click Yes in the Dependent Files dialog box to download dependent files; if you already have local copies of the
dependent files, click No. The default is to not download dependent files. You can set this option at Edit >
Preferences > Site.
Dreamweaver downloads the selected files, as follows:
• If you’re using the Check In/Check Out system, getting a file results in a read-only local copy of the file; the file
remains available on the remote site or testing server for other team members to check out.
• If you’re not using the Check In/Check Out system, getting a file results in a copy that has both read and write
privileges.
Note: If you’re working in a collaborative environment—that is, if others are working on the same files—you should
not disable Enable File Check In and Check Out. If other people are using the Check In/Check Out system with the
site, you should use that system as well.
To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.
Get files from a remote server using the Document window
1 Make sure the document is active in the Document window.
2 Do one of the following to get the file:
• Select Site > Get.
• Click the File Management icon in the Document window toolbar, then select Get from the menu.
Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, then
performs the Get operation.
Display the FTP log
1 Click the Options menu in the upper right corner of the Files panel.
2 Select View > Site FTP Log.
Last updated 12/7/2011
83
USING DREAMWEAVER
Creating and Managing Files
Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.
Put files on a remote server
You can put files from the local site to the remote site, generally without changing the file’s checked out status.
There are two common situations in which you might use the Put command instead of Check In:
• You’re not in a collaborative environment and you aren’t using the Check In/Check Out system.
• You want to put the current version of the file on the server but you’re going to keep editing it.
Note: If you put a file that didn’t previously exist on the remote site and you’re using the Check In/Check Out system,
the file is copied to the remote site and is then checked out to you so that you can continue editing.
You can use the Files panel or the Document window to put files. Dreamweaver creates a log of file activity during
the transfer that you can view and save.
Note: You cannot turn background file transfer off. If you have the detail log open in the Background File Activity
dialog box, you can close that to improve performance.
Dreamweaver also records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP,
the Site FTP log can help you determine the problem.
For a tutorial on putting files on a remote server, see www.adobe.com/go/vid0163.
For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.
More Help topics
“Synchronizing files” on page 93
“About the Check In/Check Out system” on page 85
Putting files tutorial
Troubleshoot publishing problems tutorial
Put files on a remote or testing server using the Files panel
1 In the Files panel (Window > Files), select the files to upload.
Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer.
Note: You can put only those files for which the local version is more recent than the remote version.
2 Do one of the following to put the file on the remote server:
• Click the Put button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh) the file in the Files panel, then select Put from the context menu.
3 If the file hasn’t been saved, a dialog box appears (if you set this preference in the Site category of the Preferences
dialog box) allowing you to save the file before putting it on the remote server. Click Yes to save the file or No to
put the previously saved version on the remote server.
Note: If you do not save the file, any changes you’ve made since the last time you saved will not be put onto the remote
server. However, the file remains open, so you can still save the changes after putting the file on the server if you want.
4 Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent
files. The default is to not upload dependent files. You can set this option at Edit > Preferences > Site.
Last updated 12/7/2011
84
USING DREAMWEAVER
Creating and Managing Files
Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of the
dependent files are already on the remote server, there’s no need to upload them again.
To stop the file transfer at any time, click the Cancel button in the Background File Activity dialog box.
Put files on a remote server using the Document window
1 Make sure the document is active in the Document window.
2 Do one of the following to put the file:
• Select Site > Put.
• Click the File Management icon in the Document window toolbar, then select Put from the menu.
Note: If the current file is not part of the current site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, then
performs the Put operation.
Display the FTP log
1 Click the Options menu in the upper right corner of the Files panel.
2 Select View > Site FTP Log.
Note: In the Expanded Files Panel, you can click the FTP Log button to display the log.
Manage file transfers
You can view the status of file transfer operations, as well as a list of transferred files and their outcomes (transfer
successful, skipped, or failed). You can also save a log of the file activity.
Note: Dreamweaver lets you perform other non-server-related activities while you’re transferring files to or from a server.
Cancel a file transfer
❖ Click the Cancel button in the Background File Activity dialog box. If the dialog box isn’t showing, click the File
Activity button at the bottom of the Files panel.
Show the Background File Activity dialog box during transfers
❖ Click the File Activity or Log button at the bottom of the Files panel.
Note: You cannot hide or remove the Log button. It’s a permanent part of the panel.
View details of the last file transfer
1 Click the Log button at the bottom of the Files panel to open the Background File Activity dialog box.
2 Click the Details expander arrow.
Save a log of the last file transfer
1 Click the Log button at the bottom of the Files panel to open the Background File Activity dialog box.
2 Click the Save Log button and save the information as a text file.
You can review the file activity by opening the log file in Dreamweaver or in any text editor.
Last updated 12/7/2011
85
USING DREAMWEAVER
Creating and Managing Files
Checking in and checking out files
About the Check In/Check Out system
If you’re working in a collaborative environment, you can check files in and out from local and remote servers. If you’re
the only person working on the remote server, you can use the Put and Get commands without checking files in or out.
Note: You can use Get and Put functionality with a testing server, but you cannot use the Check In/ Check Out system
with a testing server.
Checking out a file is the equivalent of declaring “I’m working on this file now—don’t touch it!” When a file is checked
out, the name of the person who checked out the file is displayed in the Files panel, along with a red check mark (if a
team member checked out the file) or green check mark (if you checked out the file) next to the file’s icon.
Checking in a file makes the file available for other team members to check out and edit. When you check in a file after
editing it, your local version becomes read-only and a lock symbol appears beside the file in the Files panel to prevent
you from making changes to the file.
Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application
other than Dreamweaver, you can overwrite checked-out files. However, in applications other than Dreamweaver, the
LCK file is visible next to the checked-out file in the file hierarchy to help prevent such accidents.
More Help topics
“Getting and putting files to and from your server” on page 80
Set up the Check In/Check Out system
Before you can use the Check In/Check Out system, you must associate your local site with a remote server.
1 Select Site > Manage Sites.
2 Select a site and click Edit.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 Specify Basic options as necessary, and then click the Advanced button.
5 Select Enable File Check Out if you are working in a team environment (or working alone but from several different
machines). Deselect this option if you want to disable file check in and check out for your website.
This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have
left a more recent version of a file on another machine.
If you do not see Check In/Out options, it means that you have not set up a remote server.
6 Select the Check Out Files when Opening option if you want to automatically check out files when you double-click
to open them from the Files panel.
Using File > Open to open a file doesn’t check the file out even when this option is selected.
7 Set the remaining options:
Check Out Name The check-out name appears in the Files panel alongside any files that are checked out; this enables
team members to communicate with the right person if a file they need is checked out.
Last updated 12/7/2011
86
USING DREAMWEAVER
Creating and Managing Files
Note: If you work alone from several different machines, use a different check-out name on each machine (for example,
AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.
Email Address If you enter an e-mail address, when you check out a file, your name appears in the Files panel as a link
(blue and underlined) next to that file. If a team member clicks on the link, their default e-mail program opens a new
message with the user’s e-mail address and a subject that corresponds to the file and site name.
Check files into and out of a remote folder
After you set up the Check In/Check Out system, you can check in and check out files on a remote server using the
Files panel or from the Document window.
Check out files using the Files panel
1 In the Files panel (Window > Files), select files to check out from the remote server.
Note: You can select files in the Local or Remote view, not the Testing Server view.
A red check mark indicates that another team member has the file checked out and a lock symbol indicates that the
file is read-only (Windows) or locked (Macintosh).
2 Do one of the following to check out the file(s):
• Click the Check Out button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh), then select Check Out from the context menu.
3 In the Dependent Files dialog box, click Yes to download dependent files along with the selected files, or click No
to refrain from downloading dependent files. The default is to not download dependent files. You can set this
option at Edit > Preferences > Site.
Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the
dependent files are already on the local disk, there’s no need to download them again.
A green check mark appears beside the local file’s icon indicating that you have checked it out.
Important: If you check out the currently active file, the currently open version of the file is overwritten by the new
checked-out version.
Check in files using the Files panel
1 In the Files panel (Window > Files), select checked-out or new file(s).
Note: You can select files in the Local or Remote view, but not the Testing Server view.
2 Do one of the following to check in the file(s):
• Click the Check In button in the Files panel toolbar.
• Right-click (Windows) or Control-click (Macintosh), then select Check In from the context menu.
3 Click Yes to upload dependent files along with the selected files, or click No to refrain from uploading dependent
files. The default is to not upload dependent files. You can set this option at Edit > Preferences > Site.
Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of the
dependent files are already on the remote server, there’s no need to upload them again.
A lock symbol appears beside the local file’s icon indicating that the file is now read-only.
Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending
on the preference options you’ve set.
Last updated 12/7/2011
87
USING DREAMWEAVER
Creating and Managing Files
Check in an open file from the Document window
1 Make sure the file you want to check in is open in the Document window.
Note: You can check in only one open file at a time.
2 Do one of the following:
• Select Site > Check In.
• Click the File Management icon in the Document window toolbar, then select Check In from the menu.
If the current file is not part of the active site in the Files panel, Dreamweaver attempts to determine which locally
defined site the current file belongs to. If the current file belongs to a site other than the one that’s active in the Files
panel, Dreamweaver opens that site, then performs the check in operation.
Important: If you check in the currently active file, the file may be automatically saved before it’s checked in, depending
on the preference options you’ve set.
Undo a file check-out
If you check out a file, then decide not to edit it (or decide to discard the changes you made), you can undo the checkout operation and the file returns to its original state.
To undo a file check-out, do one of the following:
• Open the file in the Document window, then select Site > Undo Check Out.
• In the Files panel (Window > Files), right-click (Windows) or Control-click (Macintosh), then select Undo Check Out.
The local copy of the file becomes read-only, and any changes you’ve made to it are lost.
Use WebDAV to check in and check out files
Dreamweaver can connect to a server that uses WebDAV (Web-based Distributed Authoring and Versioning), which
is a set of extensions to the HTTP protocol that allow users to collaboratively edit and manage files on remote web
servers. For more information, see www.webdav.org.
1 If you have not already done so, define a Dreamweaver site that specifies the local folder you use to store your
project files.
2 Select Site > Manage Sites, and then double-click your site in the list.
3 In the Site Setup dialog box, select the Servers category and do one of the following:
• Click the Add New Server button to add a new server
• Select an existing server and click the Edit Existing Server button
4 In the Basic screen, select WebDAV from the Connect Using pop-up menu, and complete the rest of the Basic
screen options, as necessary.
5 Click the Advanced button.
6 Select the Enable File Check Out option and enter the following information:
• In the Check Out Name box, enter a name identifying you to other team members.
• In the Email Address box, enter your e-mail address.
The name and e-mail addresses are used to identify ownership on the WebDAV server and appear in the Files panel
for contact purposes.
7 Click Save.
Last updated 12/7/2011
88
USING DREAMWEAVER
Creating and Managing Files
Dreamweaver configures the site for WebDAV access. When you use the Check In or Check Out command on any
site file, the file is transferred using WebDAV.
Note: WebDAV may be unable to properly check out any files with dynamic content like PHP tags or SSIs because the
HTTP GET renders these as they are checked out.
Use Subversion (SVN) to get and check in files
Dreamweaver can connect to a server that uses Subversion (SVN), a versioning control system that lets users
collaboratively edit and manage files on remote web servers. Dreamweaver is not a full SVN client, but does let users
get the latest versions of files, make changes, and commit the files.
Important: Dreamweaver CS5 uses the Subversion 1.6.6 client library, and Dreamweaver CS5.5 uses the 1.6.9 client
library. Later versions of the Subversion client library are not backward-compatible. Be aware, if you update a third-party
client application (for example, TortoiseSVN) to work with a later version of Subversion, the updated Subversion
application will update local Subversion meta data, and Dreamweaver will no longer be able to communicate with
Subversion. This issue is not affected by updates to the Subversion server as those updates are backward-compatible. If
you do upgrade to a third-party client application that works with Subversion 1.7 or later, you’ll need to check with Adobe
for updates before you can use Subversion with Dreamweaver again. For more information on this issue, see
www.adobe.com/go/dw_svn_en.
Adobe recommends that you use a third-party file comparison tool as you work with SVN version-controlled files.
When you compare files for differences, you can learn exactly what kinds of changes other users made to the files. For
more information on file comparison tools, use a web search engine such as Google Search to search for “file
comparison” or “diff” tools. Dreamweaver works with most third-party tools.
For a video overview of working with SVN and Dreamweaver, see www.adobe.com/go/lrvid4049_dw.
Set up an SVN connection
Before you use Subversion (SVN) as a version control system with Dreamweaver, you must set up a connection to an
SVN server. You set up a connection to an SVN server in the Version Control category of the Site Definition dialog box.
The SVN server is a repository of files from which you and other users can get and commit files. It is different from
the remote server you typically use with Dreamweaver. When using SVN, the remote server remains the “live” server
for your web pages, and the SVN server exists to hold the repository of files over which you want to maintain version
control. The typical workflow is to get and commit files back and forth between the SVN server, and then publish them
to your remote server from Dreamweaver. The remote server setup is completely separate from the SVN set up.
You must have access to an SVN server and an SVN repository before you begin this set up. For more information
about SVN, see the Subversion website at http://subversion.apache.org/.
To set up the SVN connection, follow these steps:
1 Choose Sites > Manage Sites, select the site you want to set up version control for, and click the Edit button.
Note: If you haven’t already set up local and remote folders for a Dreamweaver site, you’ll at least need to set up a
local site before proceeding. (The remote site is not required at this stage, but you will eventually need to set it up before
publishing your files to the Web.) For more information, see “Working with Dreamweaver sites” on page 36.
2 In the Site Setup dialog box, select the Version Control category.
3 Select Subversion from the Access pop-up menu.
4 Set access options as follows:
• Select a protocol from the Protocol pop-up menu. The available protocols are HTTP, HTTPS, SVN, and
SVN+SSH.
Last updated 12/7/2011
89
USING DREAMWEAVER
Creating and Managing Files
Note: Using the SVN+SSH protocol requires special configuration. For more information, see
www.adobe.com/go/learn_dw_svn_ssh_en.
• Enter the address for the SVN server in the Server address text box (typically in the form of
servername.domain.com).
• Enter the path to your repository on the SVN server in the Repository path text box (typically something like
/svn/your_root_directory. It is up to the server administrator to name the root folder for the SVN repository.)
• (Optional) If you want to use a server port other than the default server port, select Non Default and enter the
port number in the text box.
• Enter your SVN server user name and password.
5 Click Test to test your connection, or click OK to close the dialog box. Then click Done to close the Manage Sites
dialog box.
Once the connection with the server established, your SVN repository is available for viewing in the Files panel. To
in the
view it, you can select Repository View from the View pop-up menu, or click the Repository Files button
expanded Files panel.
More Help topics
“Working with Dreamweaver sites” on page 36
“Using the Files panel” on page 72
Get the latest versions of files
When you get the latest version of a file from the SVN repository, Dreamweaver merges the contents of that file with
the contents of its corresponding local copy. (In other words, if someone else has updated the file since you last
committed it, those updates are merged into the local version of the file on your computer.) If the file does not yet exist
on the local hard drive, Dreamweaver simply gets the file.
Note: When getting files for the first time from the repository, you should work with a local directory that is empty, or a
local directory that does not contain files with the same names as files in the repository. Dreamweaver will not mount
repository files to the local drive upon first try if the local drive contains files whose names match files in the remote
repository.
1 Make sure that you’ve successfully set up an SVN connection.
2 Do one of the following:
• Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.) Then right-click
(Windows) or Control-click (Macintosh) the file or folder you’re interested in and select Version Control > Get
Latest Versions.
• Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel,
or by clicking the Repository Files button in the expanded Files panel. Then right-click (Windows) or Controlclick (Macintosh) the file or folder you’re interested in and select Get Latest Versions.
Note: You can also either right-click a file and choose Check Out from the context menu, or select the file and click the
Check Out button to get the latest version. Because SVN does not support a check-out workflow, however, this action does
not actually check out the file in the traditional sense.
Commit files
1 Make sure that you’ve successfully set up an SVN connection.
Last updated 12/7/2011
90
USING DREAMWEAVER
Creating and Managing Files
2 Do one of the following:
• Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.) Then select the file
you want to commit and click the Check In button.
• Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel,
or by clicking the Repository Files button in the expanded Files panel. Then right-click (Windows) or Controlclick (Macintosh) the file you want to commit and select Check In.
3 Review the actions in the Commit dialog box, make changes if necessary, and click OK.
You can change actions by selecting the file whose action you want to change, and clicking the buttons at the bottom
of the Commit dialog box. Two choices are available: commit and ignore.
Note: A green check mark on a file in the Files panel denotes a changed file that has not yet been committed to the
repository.
Update status of files or folders in the repository
You can update the SVN status of a single file or folder. The update does not refresh the entire display.
1 Make sure that you’ve successfully set up an SVN connection.
2 Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel, or by
clicking the Repository Files button in the expanded Files panel.
3 Right-click (Windows) or Control-click (Macintosh) any folder or file in the repository and select Update Status.
Update status of local file or folders
You can update the SVN status of a single file or folder. The update does not refresh the entire display.
1 Make sure that you’ve successfully set up an SVN connection.
2 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.)
3 Right-click (Windows) or Control-click (Macintosh) any folder or file in the Files panel and select Update Status.
View revisions for a file
1 Make sure that you’ve successfully set up an SVN connection.
2 Do one of the following:
• Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.) Then right-click
(Windows) or Control-click (Macintosh) the file you want to see revisions for and select Version Control >
Show Revisions.
• Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel,
or by clicking the Repository Files button in the expanded Files panel. Then right-click (Windows) or Controlclick (Macintosh) the file you want to see revisions for and select Show Revisions.
3 In the Revision History dialog box, select the revision or revisions you’re interested in and do one of the following:
• Click Compare to Local to compare the selected revision with the local version of the file.
Note: You must install a third-party file comparison tool before you can compare files. For more information on
file comparison tools, use a web search engine such as Google Search to search for “file comparison” or “diff” tools.
Dreamweaver works with most third-party tools.
Last updated 12/7/2011
91
USING DREAMWEAVER
Creating and Managing Files
• Click Compare to compare two selected revisions. Control-click to select two revisions simultaneously.
• Click View to view the selected revision. This action does not overwrite the current local copy of the same file.
You can save the selected revision to your hard drive just as you would save any other file.
• Click Promote to make the selected revision the most current revision in the repository.
Lock and unlock files
Locking a file in the SVN repository lets other users know that you are working on a file. Other users can still edit the
file locally, but will not be able to commit the file until you’ve unlocked it. When you lock a file in the repository, you’ll
see an open-lock icon on the file. Other users see a completely locked icon.
1 Make sure that you’ve successfully set up an SVN connection.
2 Do one of the following:
• Display the SVN repository files by selecting Repository View from the View pop-up menu in the Files panel,
or by clicking the Repository Files button in the expanded Files panel. Then right-click (Windows) or Controlclick (Macintosh) the file you’re interested in and select Lock or Unlock.
• Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.) Then right-click
(Windows) or Control-click (Macintosh) the file you’re interested in and select Lock or Unlock.
Add a new file to the repository
A blue plus sign on a file in the Files panel denotes a file that does not yet exist in the SVN repository.
1 Make sure that you’ve successfully set up an SVN connection.
2 In the Files panel, select the file you want to add to the repository and click the Check In button.
3 Make sure that the file is selected for Commit in the Commit dialog box and click OK.
Move, copy, delete, or revert files
• To move a file, drag the file to the destination folder in your local site.
When you move a file, Dreamweaver marks the file in the new location with an Add With History sign, and marks
the file in the old location with a Delete sign. When you Commit these files, the file in the old location disappears.
• To copy a file, select the file, copy it (Edit > Copy), and paste (Edit > Paste) the file in the new location.
When you copy and paste a file, Dreamweaver marks the file in the new location with an Add With History sign.
• To delete a file, select the file and press delete.
Dreamweaver gives you the option of whether you want to delete the local version of the file only, or both the local
version and the version on the SVN server. If you select to delete the local version only, the file on the SVN server
is not affected. If you select to delete the version on the SVN server as well, the local version is marked with a Delete
sign, and you must commit the file for the deletion to take place.
• To revert a copied or moved file to its original location, right-click the file and select Version Control > Revert.
Last updated 12/7/2011
92
USING DREAMWEAVER
Creating and Managing Files
Resolve conflicting files
If your file conflicts with another file on the server, you can edit it and then mark it as resolved. For example, if you try
to check in a file that conflicts with another user’s changes, SVN will not let you commit the file. You can get the latest
version of the file from the repository, manually make changes to your working copy, and then mark your file as
resolved so that you can commit it.
1 Make sure that you’ve successfully set up an SVN connection.
2 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.)
3 Right-click (Windows) or Control-click (Macintosh) the file you want to resolve and select Version Control > Mark
as Resolved.
Go offline
You might find it useful to avoid repository access during other file-transfer activities by going off-line. Dreamweaver
will reconnect to the SVN repository as soon as you invoke an activity that requires a connection (Get Latest Versions,
Commit, and so on).
1 Make sure that you’ve successfully set up an SVN connection.
2 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.)
3 Right-click (Windows) or Control-click (Macintosh) any file or folder in the Files panel and select Version
Control > Go Offline.
Clean up a local SVN site
This command lets you remove locks on files so that you can resume unfinished operations. You should use this
command to remove old locks if you receive “working copy locked” errors.
1 Make sure that you’ve successfully set up an SVN connection.
2 Display the local version of your SVN files in the Files panel by selecting Local view from the View pop-up menu.
(If you are working in the expanded Files panel, the Local view is automatically displayed.)
3 Right-click (Windows) or Control-click (Macintosh) the file you want to clean up and select Version Control >
Clean Up.
About moving files and folders in Subversion-controlled sites
When you move the local versions of files or folders in a Subversion-controlled site, you run the risk of creating
problems for other users who might be synching to the SVN repository. For example, if you move a file locally, and
don't commit that file to the repository for a few hours, another user might try to get the latest version of the file from
the file’s old location. For this reason, you should always commit files back to the SVN server immediately after you've
moved them locally.
Files and folders remain on the SVN server until you've manually deleted them. So even if you move a file to a different
local folder and commit it, the old version of the file remains in the previous location on the server. To avoid confusion,
delete the old copies of files and folders that you've moved.
When you move a file locally and commit it back to the SVN server, the file’s version history is lost.
Last updated 12/7/2011
93
USING DREAMWEAVER
Creating and Managing Files
Synchronizing files
Synchronize the files on your local and remote sites
After you’ve created files in your local and remote sites, you can synchronize the files between the two sites.
Note: If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP.
Before you synchronize your sites, you can verify which files you want to put, get, delete, or ignore. Dreamweaver also
confirms which files have been updated after you complete the synchronization.
More Help topics
“Manage file transfers” on page 84
“Check files into and out of a remote folder” on page 86
“Get files from a remote server” on page 81
“Put files on a remote server” on page 83
“Comparing files for differences” on page 94
Check which files are newer on the local or remote site, without synchronizing
❖ In the Files panel, do one of the following:
• Click the Options menu in the upper-right corner, and then select Edit > Select Newer Local or Edit > Select Newer
Remote.
• In the Files panel, right-click (Windows) or Control-click (Macintosh), and then select Select > Newer Local or
Select > Newer Remote.
Display detailed synchronization information for a particular file
❖ In the Files panel, right-click (Windows) or Control-click (Macintosh) the file you want information about, and
then select Display Synchronize information.
Note: You must have the Maintain Synchronization Information option selected in the Remote category of the Site
Definition dialog box for this feature to be available.
Synchronize your files
1 In the Files panel (Window > Files), select a site from the menu where the current site, server, or drive appears.
2 (Optional) Select specific files or folders or go to the next step to synchronize the entire site.
3 Click the Options menu in the upper-right corner of the Files panel and select Site > Synchronize.
You can also click the Synchronize button at the top of the Files panel to synchronize files.
4 In the Synchronize menu, do one of the following:
• To synchronize the entire site, select Entire Site Name Site.
• To synchronize selected files only, select Selected Local Files Only (or Selected Remote Files Only if the Remote
view of the Files panel was where you made the most recent selection).
Last updated 12/7/2011
94
USING DREAMWEAVER
Creating and Managing Files
5 Select the direction in which you want to copy the files:
Put Newer Files To Remote Uploads all the local files that don’t exist on the remote server or have changed since the
last upload.
Get Newer Files From Remote Downloads all the remote files that don’t exist locally or have changed since the last
download.
Get And Put Newer Files Places the most recent versions of all the files on both the local and the remote sites.
6 Select whether to delete the files on the destination site that don’t have counterparts on the origin site. (This is not
available if you select Get and Put from the Direction menu.)
If you select Put Newer Files to Remote and you select the Delete option, then any files in your remote site for which
there are no corresponding local files are deleted. If you select Get Newer Files from Remote, then any files in your
local site for which there are no corresponding remote files are deleted.
7 Click Preview.
Note: Before you can synchronize the files, you must preview the actions Dreamweaver performs to accomplish this task.
If the newest version of each chosen file is already in both locations and nothing needs to be deleted, an alert appears
informing you that no synchronization is necessary. Otherwise, the Synchronize dialog box appears to let you change
the actions (put, get, delete, and ignore) for those files before executing the synchronization.
8 Verify the action that will be performed for each file.
9 To change the action for a particular file, select the file, and then click one of the action icons at the bottom of the
preview window.
Compare The Compare action works only if you installed and specified a file comparison tool in Dreamweaver. If the
action icon is grayed out, the action cannot be performed.
Mark Selected Files As Already Synched This option lets you specify that the selected file or files are already
synchronized.
10 Click OK to synchronize the files. You can view or save the details of the synchronization to a local file.
Comparing files for differences
Compare local and remote files for differences
Dreamweaver can work with file comparison tools (also known as “diff tools”) to compare the code of local and remote
versions of the same file, two different remote files, or two different local files. Comparing local and remote versions
is useful if you’re working on a file locally and you suspect the copy of the file on the server has been modified by
someone else. Without leaving Dreamweaver, you can view and merge the remote changes into your local version
before putting the file to the server.
Comparing two local files or two remote files is also useful if you keep previous, renamed versions of your files. If
you’ve forgotten the changes made to a file from a previous version, a quick comparison will remind you.
Before you start, you must install a third-party file comparison tool on your system. For more information on file
comparison tools, use a web search engine such as Google Search to search for “file comparison” or “diff” tools.
Dreamweaver works with most third-party tools.
Last updated 12/7/2011
95
USING DREAMWEAVER
Creating and Managing Files
Specify a comparison tool in Dreamweaver
1 Install the file comparison tool on the same system as Dreamweaver.
2 In Dreamweaver, open the Preferences dialog box by selecting Edit > Preferences (Windows) or Dreamweaver >
Preferences (Macintosh), and then select the File Compare category.
3 Do one of the following:
• In Windows, click the Browse button and select the application that compares files.
• On the Macintosh, click the Browse button and select the tool or script that launches the file comparison tool from
the command line, not the actual comparison tool itself.
Launch tools or scripts are typically located in the /usr/bin folder on your Macintosh. For example, if you want to use
FileMerge, browse to /usr/bin and select opendiff, which is the tool that launches FileMerge.
The following table lists common file comparison tools for the Macintosh and the location of their launch tools or
scripts on your hard disk:
If you use
Select the following file
FileMerge
/usr/bin/opendiff (or /Developer/usr/bin/opendiff)
BBEdit
/usr/bin/bbdiff
TextWrangler
/usr/bin/twdiff
Note: The usr folder is normally hidden in Finder. However, you can access it with the Browse button in Dreamweaver.
Note: The actual results displayed depends on the diff tool you are using. Check the user manual for your tool to
understand how to interpret the results.
Compare two local files
You can compare two files located anywhere on your computer.
1 In the Files panel, Control-click (Windows) or Command-click (Macintosh) the two files to select them.
To select files outside your defined site, select your local disk from the left pop-up menu in the Files panel and then
select the files.
2 Right-click one of the selected files and select Compare Local Files from the context menu.
Note: If you have a one-button mouse, Control-click one of the selected files instead.
The file comparison tool starts and compares the two files.
Compare two remote files
You can compare two files located on your remote server. You must define a Dreamweaver site with remote settings
before you can accomplish this task.
1 In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu.
2 Control-click (Windows) or Command-click (Macintosh) the two files to select them
3 Right-click one of the selected files and select Compare Remote Files from the context menu.
Note: If you have a one-button mouse, Control-click one of the selected files instead.
The file comparison tool starts and compares the two files.
Last updated 12/7/2011
96
USING DREAMWEAVER
Creating and Managing Files
Compare a local file to a remote file
You can compare a local file to a file located on your remote server. To do this, you must first define a Dreamweaver
site with remote settings.
❖ In the Files panel, right-click a local file and select Compare With Remote from the context menu.
Note: If you have a one-button mouse, Control-click the local file instead.
The file comparison tool starts and compares the two files.
Compare a remote file to a local file
You can compare a remote file to a local file. You must define a Dreamweaver site with remote settings before
accomplishing this task.
1 In the Files panel, display the files on the remote server by selecting Remote View from the right pop-up menu.
2 Right-click a file in the panel and select Compare with Local from the context menu.
Note: If you have a one-button mouse, Control-click the file instead.
Compare an open file to a remote file
You can compare a file open in Dreamweaver to its counterpart on the remote server.
❖ In the Document window, select File > Compare with Remote.
The file comparison tool starts and compares the two files.
You can also right-click the document tab along the top of the Document window and select Compare with Remote
from the context menu.
Compare before putting files
If you edit a file locally and then try to upload it to your remote server, Dreamweaver will notify you if the remote
version of the file has changed. You have the option of comparing the two files before you upload the file and overwrite
the remote version.
Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.
1 After editing a file in a Dreamweaver site, put the file (Site > Put) to your remote site.
If the remote version of the file has been modified, you’ll receive a notification with the option of seeing the differences.
2 To view the differences, click the Compare button.
The file comparison tool starts and compares the two files.
If you haven’t specified a file comparison tool, you are prompted to specify one.
3 After you’ve reviewed or merged the changes in the tool, you can proceed with the Put operation or cancel it.
Compare files when synchronizing
You can compare the local versions of your files with the remote versions when you synchronize your site files with
Dreamweaver.
Before you start, you must install a file comparison tool on your system and specify it in Dreamweaver.
1 Right-click anywhere in the Files panel and select Synchronize from the context menu.
2 Complete the Synchronize Files dialog box and click Preview.
Last updated 12/7/2011
97
USING DREAMWEAVER
Creating and Managing Files
After you click Preview, the selected files and the actions that will be taken during synchronization are listed.
3 In the list, select each file you want to compare and click the Compare button (the icon with two small pages).
Note: The file must be text-based, such as HTML or ColdFusion files.
Dreamweaver starts the comparison tool, which compares the local and remote versions of each file you selected.
More Help topics
“Synchronizing files” on page 93
Rolling back files (Contribute users)
Roll back files (Contribute users)
Dreamweaver automatically saves multiple versions of a document when you have Adobe Contribute compatibility
enabled.
Note: You must have Contribute installed on the same machine as Dreamweaver.
File rollback must also be enabled in Contribute’s administrative settings. For more information, see Administering
Contribute.
1 Right-click (Windows) or Control-click (Macintosh) a file in the Files panel.
2 Select Roll Back Page.
If there is any previous version of the page to roll back, the Rollback dialog box appears.
3 Select the version of the page you want to roll back to and click Roll Back.
More Help topics
“Prepare a site for use with Contribute” on page 54
“Delete, move, or rename a remote file in a Contribute site” on page 56
Cloaking files and folders in your Dreamweaver site
About site cloaking
Site cloaking enables you to exclude files and folders from operations such as Get or Put. You can also cloak all files of
a particular type (JPEG, FLV, XML, and so on) from site operations. Dreamweaver remembers your settings for each
site so that you don’t have to make selections each time you work on that site.
For example, if you’re working on a large site and you don’t want to upload your multimedia files each day, you can
use site cloaking to cloak your multimedia folder. Dreamweaver will then exclude files in that folder from site
operations you perform.
You can cloak files and folders on the remote or local site. Cloaking excludes cloaked files and folders from the
following operations:
• Performing Put, Get, Check In, and Check Out operations
Last updated 12/7/2011
98
USING DREAMWEAVER
Creating and Managing Files
• Generating reports
• Finding newer local and newer remote files
• Performing sitewide operations, such as checking and changing links
• Synchronizing
• Working with Asset panel contents
• Updating templates and libraries
Note: You can still perform an operation on a specific cloaked folder or file by selecting the item in the Files panel and
performing an operation on it. Performing an operation directly on a file or folder overrides cloaking.
Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver
does not exclude these items from batch operations, because it might cause them to become out of sync with their
instances.
Enable and disable site cloaking
Site cloaking enables you to exclude folders, files, and file types in a site from sitewide operations such as Get or Put,
and is enabled by default. You can disable cloaking permanently or just temporarily to perform an operation on all
files, including cloaked files. When you disable site cloaking, all cloaked files are uncloaked. When you enable site
cloaking again, any previously cloaked files become cloaked again.
Note: You can also use the Uncloak All option to uncloak all files, but this does not disable cloaking; also there is no way
to re-cloak all files and folders that were previously cloaked, except to set cloaking again for each folder, file, and file type.
1 In the Files panel (Window > Files) select a file or folder.
2 Right-click (Windows) or Control-click (Macintosh), and do one of the following:
• Select Cloaking > (deselect to disable).
• Select Cloaking > Settings to open the Cloaking category of the Site Setup dialog box. Select or deselect , and select
or deselect Cloak Files Ending With to enable or disable cloaking for specific file types. You can enter or delete file
suffixes in the text box that you want to cloak or uncloak.
Cloak and uncloak site files and folders
You can cloak specific files and folders, but you cannot cloak all files and folders or cloak an entire site. When you cloak
specific files and folders, you can cloak multiple files and folders at the same time.
1 In the Files panel (Window > Files), select a site that has site cloaking enabled.
2 Select the folder(s) or file(s) you want to cloak or uncloak.
3 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Cloak or Cloaking > Uncloak from the
context menu.
A red line through the file or folder icon appears or disappears, indicating that the folder is cloaked or uncloaked.
Note: You can still perform an operation on a specific cloaked file or folder by selecting the item in the Files panel and
performing an operation on it. Performing an operation directly on a file or folder overrides cloaking.
Last updated 12/7/2011
99
USING DREAMWEAVER
Creating and Managing Files
Cloak and uncloak specific file types
You can indicate specific file types to cloak, so that Dreamweaver cloaks all files ending with a specified pattern. For
example, you can cloak all files ending with the .txt extension. The file types that you enter do not have to be file
extensions; they can be any pattern at the end of a filename.
Cloak specific file types within a site
1 In the Files panel (Window > Files), select a site that has site cloaking enabled.
2 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings.
3 Select the Cloak Files Ending With option, enter the file types to cloak in the box, and click OK.
For example, you might enter .jpg to cloak all files with names ending in .jpg in your site.
Separate multiple file types with one space; do not use a comma or semicolon.
In the Files panel, a red line appears through the affected files, indicating that they are cloaked.
Some software creates backup files ending in a particular suffix, such as .bak. You can cloak such files.
Note: You can still perform an operation on a specific cloaked file or folder by selecting the item in the Files panel and
performing an operation on it. Performing an operation directly on a file or folder overrides cloaking.
Uncloak specific file types within a site
1 In the Files panel (Window > Files), select a site that has site cloaking enabled.
2 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Settings.
3 In the Advanced Site Definition dialog box, do one of the following:
• Deselect the Cloak Files Ending With option to uncloak all the file types listed in the box.
• Delete specific file types from the box to uncloak those file types.
4 Click OK.
The red lines disappear from the affected files, indicating that they are uncloaked.
Uncloak all files and folders
You can uncloak all files and folders in a site at the same time. This action cannot be undone; there is no way to re-cloak
all items that were previously cloaked. You have to re-cloak items individually.
If you want to temporarily uncloak all folders and files, then re-cloak those items, disable site cloaking.
1 In the Files panel (Window > Files), select a site that has site cloaking enabled.
2 Select any file or folder in that site.
3 Right-click (Windows) or Control-click (Macintosh), then select Cloaking > Uncloak All.
Note: This step also deselects the Cloak Files Ending With option in the Cloaking category of the Site Definition dialog box.
The red lines through folder and file icons disappear, indicating that all files and folders in the site are uncloaked.
Last updated 12/7/2011
100
USING DREAMWEAVER
Creating and Managing Files
Storing file information in Design Notes
About Design Notes
Design Notes are notes that you create for a file. Design Notes are associated with the file they describe, but stored in
a separate file. You can see which files have Design Notes attached in the expanded Files panel: A Design Notes icon
appears in the Notes column.
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. For example, if you copy a document from one site to another, you can
add Design Notes for that document, with the comment that the original document is in the other site folder.
You can also use Design Notes to keep track of sensitive information that you can’t put inside a document for security
reasons, such as notes on how a particular price or configuration was chosen, or what marketing factors influenced a
design decision.
If you open a file in Adobe® Fireworks® or Flash, and export it to another format, Fireworks and Flash automatically
save the name of the original source file in a Design Notes file. For example, if you open myhouse.png in Fireworks
and export it to myhouse.gif, Fireworks creates a Design Notes file called myhouse.gif.mno. This Design Notes file
contains the name of the original file, as an absolute file: URL. So, the Design Notes for myhouse.gif might contain
the following line:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
A similar Flash Design Note might contain the following line:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Note: To share Design Notes, users should define the same site-root path (for example, sites/assets/orig).
When you import the graphic into Dreamweaver, the Design Notes file is automatically copied into your site along
with the graphic. When you select the image in Dreamweaver and choose to edit it using Fireworks, Fireworks opens
the original file for editing.
More Help topics
“Start an external editor for media files” on page 248
Enable and disable Design Notes for a site
Design Notes are notes associated with a file, but stored in a separate file. Use Design Notes to keep track of extra file
information associated with your documents, such as image source-filenames and comments on file status.
You enable and disable Design Notes for a site in the Design Notes category of the Site Definition dialog box. When
you enable Design Notes, you can also choose to share them with others, if you want.
1 Select Site > Manage Sites.
2 In the Manage Sites dialog box, select a site, then click Edit.
3 In the Site Setup dialog box, expand Advanced Settings and select the Design Notes category.
4 Select Maintain Design Notes to enable Design Notes (deselect to disable them).
5 If you want to delete all local Design Notes files for your site, click Clean Up, and then click Yes. (If you want to
delete remote Design Notes files, you’ll need to delete them manually).
Last updated 12/7/2011
101
USING DREAMWEAVER
Creating and Managing Files
Note: The Clean Up Design Notes command only deletes MNO (Design Notes) files. It does not delete the _notes folder
or the dwsync.xml file inside the _notes folder. Dreamweaver uses the dwsync.xml file to maintain information about site
synchronization.
6 Select Enable Upload Design Notes For Sharing to upload Design Notes associated with your site with the rest of
your documents and click OK.
• If you select this option, you can share Design Notes with the rest of your team. When you put or get a file,
Dreamweaver automatically puts or gets the associated Design Notes file.
• If you do not select this option, Dreamweaver maintains Design Notes locally but does not upload them with your
files. If you work alone on your site, deselecting this option improves performance. Design Notes will not be
transferred to the remote site when you check in or put your files and you can still add and modify the Design Notes
for your site locally.
Associate Design Notes with files
You can create a Design Notes file for each document or template in your site. You can also create Design Notes for
applets, ActiveX controls, images, Flash content, Shockwave objects, and image fields in your documents.
Note: If you add Design Notes to a template file, documents you create with the template do not inherit the Design Notes.
1 Do one of the following:
• Open the file in the Document window and select File > Design Notes.
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the file, and select Design Notes.
Note: If the file resides in a remote site, you must first check out or get the file, and then select it in the local folder.
2 In the Basic Info tab, select a status for the document from the Status menu.
3 Click the date icon (above the Notes box) to insert the current local date in your notes.
4 Type comments in the Notes box.
5 Select Show When File Is Opened to make the Design Notes file appear every time the file is opened.
6 In the All Info tab, click the Plus (+) button to add a new key-value pair; select a pair and click the Minus (–) button
to remove it.
For example, you might name a key Author (in the Name box) and define the value as Heidi (in the Value box).
7 Click OK to save the notes.
Dreamweaver saves your notes to a folder called _notes, in the same location as the current file. The filename is the
document’s filename, plus the extension .mno. For example, if the filename is index.html, the associated Design Notes
file is named index.html.mno.
More Help topics
“Getting and putting files to and from your server” on page 80
“Check files into and out of a remote folder” on page 86
Work with Design Notes
After you associate a Design Note with a file, you can open the Design Note, change its status, or delete it.
Last updated 12/7/2011
102
USING DREAMWEAVER
Creating and Managing Files
Open Design Notes associated with a file
❖ Do one of the following to open the Design Notes:
• Open the file in the Document window, then select File > Design Notes.
• In the Files panel, right-click (Windows) or Control-click (Macintosh) the file, then select Design Notes.
• In the Notes column of the Files panel, double-click the yellow Design Notes icon.
Note: To show the yellow Design Notes icons, select Site > Manage Sites > [your site name] > Edit > Advanced Settings
> File View Columns. Select Notes in the list panel and choose the Show option. When you click the Expand button on
the Files toolbar to show both the local and remote site, you have a Notes column in your local site that shows a yellow
note icon for any file with a Design Note.
Assign a custom Design Notes status
1 Open Design Notes for a file or object (see the previous procedure).
2 Click the All Info tab.
3 Click the Plus (+) button.
4 In the Name field, enter the word status.
5 In the Value field, enter the status.
If a status value already existed, it’s replaced with the new one.
6 Click the Basic Info tab and note that the new status value appears in the Status pop-up menu.
Note: You can have only one custom value in the status menu at a time. If you follow this procedure again, Dreamweaver
replaces the status value you entered the first time with the new status value you enter.
Delete unassociated Design Notes from your site
1 Select Site > Manage Sites.
2 Select the site and click Edit.
3 In the Site Definition dialog box, select Design Notes from the category list on the left.
4 Click the Clean Up button.
Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a file in
your site.
If you use Dreamweaver to delete a file that has an associated Design Notes file, Dreamweaver deletes the Design Notes
file too; so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver.
Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notes
files for your site.
Testing your Dreamweaver site
Site testing guidelines
Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s a
good idea to test and troubleshoot your site frequently throughout its construction—you can catch problems early and
avoid repeating them.)
Last updated 12/7/2011
103
USING DREAMWEAVER
Creating and Managing Files
You should make sure that your pages look and work as expected in the browsers you’re targeting, that there are no
broken links, and that the pages don’t take too long to download. You can also test and troubleshoot your entire site
by running a site report.
The following guidelines will help you create a good experience for visitors to your site:
1. Make sure your pages function in the browsers you’re targeting.
Your pages should be legible and functional in browsers that do not support styles, layers, plug-ins, or JavaScript. For
pages that fail badly in older browsers, consider using the Check Browser behavior to automatically redirect visitors to
another page.
2. Preview your pages in different browsers and platforms.
This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that
cannot be predicted in a target browser check.
3. Check your site for broken links and fix them.
Other sites undergo redesign and reorganization too, and the page you’re linking to may have been moved or deleted.
You can run a link check report to test your links.
4. Monitor the file size of your pages and the time they take to download.
Keep in mind that if a page consists of one large table, in some browsers, visitors will see nothing until the entire table
finishes loading. Consider breaking up large tables; if this is not possible, consider putting a small amount of content—
such as a welcome message or an advertising banner—outside the table at the top of the page so users can view this
material while the table downloads.
5. Run a few site reports to test and troubleshoot the entire site.
You can check your entire site for problems, such as untitled documents, empty tags, and redundant nested tags.
6. Validate your code to locate tag or syntax errors.
7. Update and maintain the site after its published.
Publishing your site—that is, making it live—can be accomplished in several ways and is an ongoing process. An
important part of the process is defining and implementing a version-control system, either with the tools
Dreamweaver includes or through an external version-control application.
8. Use the discussion forums.
The Dreamweaver discussion forums can be found on the Adobe website at
www.adobe.com/go/dreamweaver_newsgroup.
The forums are a great resource for getting information on different browsers, platforms, and so on. You can also
discuss technical issues and share helpful hints with other Dreamweaver users.
For a tutorial on troubleshooting publishing problems, see www.adobe.com/go/vid0164.
More Help topics
“Fix broken links” on page 275
“Test links in Dreamweaver” on page 270
“Apply the Check Browser behavior” on page 337
Last updated 12/7/2011
104
USING DREAMWEAVER
Creating and Managing Files
“Validate XML documents” on page 311
“Check for browser compatibility” on page 311
Troubleshoot publishing problems tutorial
Use reports to test your site
You can run site reports on workflow or HTML attributes. You can also use the Reports command to check links in
your site.
Workflow reports can improve collaboration among members of a web team. You can run workflow reports that
display who has checked out a file, which files have Design Notes associated with them, and which files have been
modified recently. You can further refine Design Note reports by specifying name/value parameters.
Note: You must have a remote site connection defined to run the workflow reports.
HTML reports enable you to compile and generate reports for several HTML attributes. You can check combinable
nested font tags, missing Alt text, redundant nested tags, removable empty tags, and untitled documents.
After you run a report, you can save it as an XML file, then import it into a template instance or a database or
spreadsheet and print it, or display it on a website.
Note: You can also add different report types to Dreamweaver through the Adobe Dreamweaver Exchange website.
More Help topics
“Reports in Dreamweaver” on page 20
“Test links in Dreamweaver” on page 270
“Add and manage extensions in Dreamweaver” on page 34
Run reports to test a site
1 Select Site > Reports.
2 Select what to report on from the Report On pop-up menu and set any of the report types to run (workflow or
HTML).
You cannot run a Selected Files In Site report unless you have already selected files in the Files panel.
3 If you selected a workflow report, click Report Settings. Otherwise, skip this step.
Note: If you selected more than one workflow report, you need to click the Report Settings button for each report. Select
a report, click Report Settings, and enter settings; then, repeat the process for any other workflow reports.
Checked Out By Creates a report listing all documents checked out by a specific team member. Enter the name of a
team member, and then click OK to return to the Reports dialog box.
Design Notes Creates a report listing all Design Notes for selected documents or for the site. Enter one or more name
and value pairs, then select comparison values from the corresponding pop-up menus. Click OK to return to the
Reports dialog box.
Recently Modified Creates a report listing files that have changed during a specified time frame. Enter date ranges and
location for the files you want to view.
4 If you selected an HTML report, select from the following reports:
Combinable Nested Font Tags Creates a report that lists all nested font tags that can be combined to clean up the code.
Last updated 12/7/2011
105
USING DREAMWEAVER
Creating and Managing Files
For example, STOP! is reported.
Missing Alt Text Creates a report listing all the img tags that don’t have alternate text.
Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images
manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over the
image.
Redundant Nested Tags Creates a report detailing nested tags that should be cleaned up.
For example, The rain in
Spain stays mainly in the plain is reported.
Removable Empty Tags Creates a report detailing all empty tags that can be removed to clean up the HTML code.
For example, you may have deleted an item or image in Code view, but left behind the tags that applied to that item.
Untitled Documents Creates a report listing all the untitled documents found within the selected parameters.
Dreamweaver reports all documents with default titles, multiple title tags, or missing title tags.
5 Click Run to create the report.
Depending on the type of report you run, you might be prompted to save your file, define your site, or select a folder
(if you haven’t already done so).
A list of results appears in the Site Reports panel (in the Results panel group).
Use and save a report
1 Run a report (see the previous procedure).
2 In the Site Reports panel, do any of the following to view the report:
• Click the column heading you want to sort results by.
You can sort by filename, line number, or description. You can also run several different reports and keep the different
reports open.
• Select any line in the report, then click the More Info button on the left side of the Site Reports panel for a
description of the problem.
• Double-click any line in the report to view the corresponding code in the Document window.
Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code.
3 Click Save Report to save the report.
When you save a report, you can import it into an existing template file. You can then import the file into a database
or spreadsheet and print it, or use the file to display the report on a website.
After running HTML reports, use the Clean Up HTML command to correct any HTML errors the reports listed.
Last updated 12/7/2011
106
Chapter 5: Managing assets and libraries
About assets and libraries
About assets
You can use Adobe® Dreamweaver® CS5 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.
More Help topics
“About Dreamweaver templates” on page 374
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.
Last updated 12/7/2011
107
USING DREAMWEAVER
Managing assets and libraries
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
“Edit a behavior in a library item” on page 117
Working with assets
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.
Asset panel with Site list displayed. Category icons are at left, and preview area is above list.
The Assets panel provides two 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.
Last updated 12/7/2011
108
USING DREAMWEAVER
Managing assets and libraries
In both lists, assets fall into one of the following categories:
Images
Image files in GIF, JPEG, or PNG formats.
Colors
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
Files in any version of Adobe Flash. The Assets panel displays only SWF files (compressed files created with
Flash), but not FLA (Flash source) files.
Flash
Files in any version of Adobe Shockwave.
Shockwave
Movies
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.
Scripts
Templates
Master page layouts used on multiple pages. Modifying a template automatically modifies all pages
attached to it.
Design elements that you use in multiple pages; when you modify a library item, all pages
containing that item are updated.
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.
More Help topics
“Creating and managing a list of favorite assets” on page 111
“Working with library items” on page 113
View an asset in the preview area
❖ Select the asset in the Assets panel.
For example, when you select a movie asset, the preview area shows an icon. To view the movie, click the Play button
(the green triangle) in the upper-right corner of the preview area.
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.
Last updated 12/7/2011
109
USING DREAMWEAVER
Managing assets and libraries
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—using
Windows 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
. Dreamweaver creates the site cache or
updates it as necessary.
• 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 the Code view or Design view in the Document
window, or by using the Insert button in the panel. You can either insert colors and URLs or apply them to selected
text in the Design view. (URLs can also be applied to other elements in the Design view, such as images.)
1 In Design view, 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.
4 Do one of the following:
• Drag the asset from the panel to the document.
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 a 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 Select the text in the document.
2 In the Assets panel, select the Colors category
.
3 Select the desired color and click Apply.
Last updated 12/7/2011
110
USING DREAMWEAVER
Managing assets and libraries
More Help topics
“Add or remove favorite assets” on page 112
Apply a URL to an image or text using the Assets panel
1 Select the text or image.
2 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.
3 Select the URL.
4 Do one of the following:
• Drag the URL from the panel to the selection in the Design view.
• Select the URL, then click Insert.
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.
More Help topics
“Start an external editor for media files” on page 248
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.
Last updated 12/7/2011
111
USING DREAMWEAVER
Managing assets and libraries
• 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.
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.
Creating and managing a list of favorite assets
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.
Last updated 12/7/2011
112
USING DREAMWEAVER
Managing assets and libraries
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.
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.
More Help topics
“Assets panel overview” on page 107
“Use the color picker” on page 208
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
4 New Color
5
or New URL button
.
6 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.
Last updated 12/7/2011
113
USING DREAMWEAVER
Managing assets and libraries
• 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.
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).
More Help topics
“Assets panel overview” on page 107
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.
Working with library items
Create a library item
Library items are elements that you want to reuse or update frequently throughout your website.
More Help topics
“About library items” on page 106
Last updated 12/7/2011
114
USING DREAMWEAVER
Managing assets and libraries
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.
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
.
Last updated 12/7/2011
115
USING DREAMWEAVER
Managing assets and libraries
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.
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.
Important: If you delete a library item, you can’t use Undo to retrieve it. You may be able to recreate it, however.
Last updated 12/7/2011
116
USING DREAMWEAVER
Managing assets and libraries
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.
More Help topics
“Use the color picker” on page 208
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.
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.
Last updated 12/7/2011
117
USING DREAMWEAVER
Managing assets and libraries
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
“Using JavaScript behaviors” on page 321
Last updated 12/7/2011
118
Chapter 6: Creating pages with CSS
Understanding Cascading Style Sheets
About Cascading Style Sheets
Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page.
Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—
resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external
style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation
makes it much easier to maintain the appearance of your site from a central location because you don’t need to update
every property on every page whenever you want to make a change. Separating content from presentation also results
in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for
people with accessibility issues (for example, those using screen readers).
CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text
properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and
background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also
ensure a more consistent treatment of your page layout and appearance in multiple browsers.
In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web
page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and visually
formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web page. You
can set margins and borders for block-level elements, position them in a specific location, add background color to
them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out pages
with CSS.
More Help topics
“Working with div tags” on page 152
“Laying out pages with CSS” on page 146
Understanding CSS tutorial
About CSS rules
A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations).
The selector is a term (such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration
block defines what the style properties are. In the following example, h1 is the selector, and everything that falls
between the braces ({}) is the declaration block:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica).
In the previous CSS rule, a particular style has been created for h1 tags: the text for all h1 tags linked to this style will
be 16 pixels in size, Helvetica font, and bold.
Last updated 12/7/2011
119
USING DREAMWEAVER
Creating pages with CSS
The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s
formatting—usually in an external style sheet, or in the head portion of an HTML document. Thus, one rule for h1
tags can apply to many tags at once (and in the case of external style sheets, the rule can apply to many tags at once on
many different pages). In this way, CSS provides extremely easy update capability. When you update a CSS rule in one
place, the formatting of all the elements that use the defined style are automatically updated to the new style.
Where to stay
H1 {
font-family: Ariel;
font-size: 16px;
font-weight: bold;
}
What to do
main.html
Spring Festival
events.html
External Style Sheet
You can define the following types of styles in Dreamweaver:
• Class styles let you apply style properties to any element or elements on the page.
• HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for
the h1 tag, all text formatted with the h1 tag is immediately updated.
• Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as
allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.)
Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles
defined by #myStyle apply to all tags that contain the attribute-value pair id="myStyle").
CSS rules can reside in the following locations:
External CSS style sheets Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This
file is linked to one or more pages in a website using a link or an @import rule in the head section of a document.
Internal (or embedded) CSS style sheets Collections of CSS rules included in a style tag in the head portion of an
HTML document.
Inline styles Defined within specific instances of tags throughout an HTML document. (Using Inline styles is not
recommended.)
Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines.
Dreamweaver also renders most applied styles directly in Design view. (Previewing the document in a browser
window, however, gives you the most accurate “live” rendering of the page.) Some CSS styles are rendered differently
in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently
supported by any browser.
To display the O’Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O’Reilly
CSS Reference from the pop-up menu in the Reference panel.
More Help topics
“Apply, remove, or rename CSS class styles” on page 136
Last updated 12/7/2011
120
USING DREAMWEAVER
Creating pages with CSS
About cascading styles
The term cascading refers to the way a browser ultimately displays styles for specific elements on a web page. Three
different sources are responsible for the styles you see on a web page: the style sheet created by the author of the page,
the user’s customized style selections (if any), and the default styles of the browser itself. The previous topics describe
creating styles for a web page as the author of both the web page and the style sheet attached to that page. But browsers
also have their own default style sheets that dictate the rendering of web pages, and in addition to that, users can
customize their browsers by making selections that adjust the display of web pages. The final appearance of a web page
is the result of the rules of all three of these sources coming together (or “cascading”) to render the web page in an
optimal way.
A common tag—the paragraph tag, or tag—illustrates the concept. By default, browsers come with style sheets that
define the font and font size for paragraph text (that is, text that falls between
tags in the HTML code). In Internet
Explorer, for example, all body text, including paragraph text, displays in Times New Roman, Medium font by default.
As the author of a web page, however, you can create a style sheet that overrides the browser’s default style for
paragraph font and font size. For example, you can create the following rule in your style sheet:
p {
font-family: Arial;
font-size: small;
}
When a user loads the page, the paragraph font and font size settings set by you as the author override the default
paragraph text settings of the browser.
Users can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer,
for example, the user can select View > Text Size > Largest to expand the page font to a more readable size if they think
the font is too small. Ultimately (at least in this case), the user’s selection overrides both the default browser styles for
paragraph font size and the paragraph styles created by the author of the web page.
Inheritance is another important part of the cascade. Properties for most elements on a web page are inherited—for
example, paragraph tags inherit certain properties from body tags, span tags inherit certain properties from paragraph
tags, and so on. Thus, if you create the following rule in your style sheet:
body {
font-family: Arial;
font-style: italic;
}
All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and
italic because the paragraph tag inherits these properties from the body tag. You can, however, become more specific
with your rules, and create styles that override the standard formula for inheritence. For example, if you create the
following rules in your style sheet:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Last updated 12/7/2011
121
USING DREAMWEAVER
Creating pages with CSS
All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal
(non-italic). Technically, the paragraph tag first inherits the properties that are set for the body tag, but then ignores
those properties because it has properties of its own defined. In other words, while page elements generally inherit
properties from above, the direct application of a property to a tag always causes an override of the standard formula
for inheritance.
The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives
different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where
items with higher priorities override properties that have lower priorities. For more information on the rules
governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.
About text formatting and CSS
By default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the
Property inspector or menu commands create CSS rules that are embedded in the head of the current document.
You can also use the CSS Styles panel to create and edit CSS rules and properties. The CSS Styles panel is a much more
robust editor than the Property inspector, and displays all CSS rules defined for the current document, whether those
rules are embedded in the head of the document or in an external style sheet. Adobe recommends that you use the CSS
Styles panel (rather than the Property inspector) as the primary tool for creating and editing your CSS. As a result, your
code will be cleaner and easier to maintain.
In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles
to your documents.
For a tutorial about formatting text with CSS, see www.adobe.com/go/vid0153.
More Help topics
“The CSS Styles panel” on page 122
“Create a new CSS rule” on page 128
Formatting text with CSS tutorial
About Shorthand CSS properties
The CSS specification allows for the creation of styles using an abbreviated syntax known as shorthand CSS. Shorthand
CSS lets you specify the values of several properties using a single declaration. For example, the font property lets you set
font-style, font-variant, font-weight, font-size, line-height, and font-family properties on a single line.
A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their
default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag.
For example, the h1 rule shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, fontsize-adjust, and font-style properties have been assigned their default values.
Last updated 12/7/2011
122
USING DREAMWEAVER
Creating pages with CSS
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Rewritten as a single, shorthand property, the same rule might appear as follows:
h1 { font: bold 16pt/18pt Arial }
When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the
previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.
If you have styles defined in more than one location (for example, both embedded in an HTML page and imported
from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties in a
shorthand rule may override (or cascade) properties that are explicitly set in another rule.
For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused
by a shorthand rule overriding a longhand rule. If you open a web page that was coded with shorthand CSS notation
in Dreamweaver, be aware that Dreamweaver will create any new CSS rules using the longhand form. You can specify
how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of
the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh).
Note: The CSS Styles panel creates rules using only longhand notation. If you create a page or CSS style sheet using the
CSS Styles panel, be aware that hand coding shorthand CSS rules may result in the shorthand properties overriding those
created in longhand form. For this reason, use longhand CSS notation to create your styles.
The CSS Styles panel
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.
Last updated 12/7/2011
123
USING DREAMWEAVER
Creating pages with CSS
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:
font-size: 12px
font-family: 'Arial'
color: green
Last updated 12/7/2011
124
USING DREAMWEAVER
Creating pages with CSS
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.
More Help topics
“Open the CSS Styles panel” on page 126
Last updated 12/7/2011
125
USING DREAMWEAVER
Creating pages with CSS
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.
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.
More Help topics
“Open the CSS Styles panel” on page 126
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):
Last updated 12/7/2011
126
USING DREAMWEAVER
Creating pages with CSS
A
B
C
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:
A
B
C
D
E
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.
Enhancements to CSS3 support in the CSS styles panel
(CS5.5)
A pop-up panel has been introduced in the CSS panel for the following properties:
• text-shadow
Last updated 12/7/2011
127
USING DREAMWEAVER
Creating pages with CSS
• box-shadow
• border-radius
• border-image
The options in the pop-up panel ensure that you apply the property correctly even if you are unfamiliar with their W3C
syntax.
The pop-up panel displaying options for the CSS3 property border-image
Apply CSS3 properties using the pop-up panel
❖ Click the “+” icon corresponding to these properties. Use the options in the pop-up panel to apply the property.
Specifying multiple value-sets
CSS3 properties like text-shadow support multiple value sets. For example: text-shadow: 3px 3px #000, -3px 3px #0f0;
When you specify multiple value-sets in the code view and open the pop-up panel for editing, only the first value-set
is displayed. If you edit this value-set in the pop-up panel, only the first value-set in the code is affected. The other
value-sets are unaffected, and applied as specified in the code.
Locate properties in the Category view
In the category view, text-shadow is listed under the Font category. box-shadow, border-radius, and borderimage are listed under the Border category.
Ensuring compliance with browsers
Dreamweaver CS5.5 also supports browser (webkit, Mozilla) specific implementation of box-shadow, border-radius,
and border-image properties.
In the Category view, use the options under the respective browser category to ensure browser compliance for these
properties. For example, to comply with Mozilla’s implementation of the border-image property, edit -moz-borderimage in the Mozilla category.
Preview changes in Live view
Changes made to CSS properties are not displayed in the Design view. Switch to Live view to preview changes. You
can also make quick edits to CSS3 properties in the Live view, and the changes are immediately reflected in this view.
Last updated 12/7/2011
128
USING DREAMWEAVER
Creating pages with CSS
The following CSS3 properties are supported in Live View:
• text-shadow
• border-radius
• -webkit-box-shadow
• -webkit-border-image
Set CSS Styles preferences
CSS style preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a
shorthand form that some people find easier to work with. Some older versions of browsers, however, do not correctly
interpret the shorthand.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and from the Category list select
CSS Styles.
2 Set the CSS style options you want to apply:
When Creating CSS Rules Use Shorthand For Lets you select which CSS style properties Dreamweaver writes
in shorthand.
When Editing CSS Rules Use Shorthand Controls whether Dreamweaver rewrites existing styles in shorthand.
Select If Original Used Shorthand to leave all styles as they are.
Select According to Settings Above to rewrite styles in shorthand for the properties selected in Use Shorthand For.
When Double-Clicking In CSS Panel Lets you select a tool for editing CSS rules.
3 Click OK.
Create a new CSS rule
You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by class or ID
attributes.
1 Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
• Select Format > CSS Styles > New.
• In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side
of the panel.
• Select text in the Document window, select New CSS Rule from the Targeted Rule pop-up menu in the CSS
Property inspector (Window > Properties); then click the Edit Rule button or select an option from the Property
inspector (for example, click the Bold button), to initiate a new rule.
2 In the New CSS Rule dialog box, specify the selector type for the CSS rule you want to create:
• To create a custom style that can be applied as a class attribute to any HTML element, select the Class option from
the Selector Type pop-up menu and then enter a name for the style in the Selector Name text box.
Note: Class names must begin with a period and can contain any combination of letters and numbers (for example,
.myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.
Last updated 12/7/2011
129
USING DREAMWEAVER
Creating pages with CSS
• To define the formatting for a tag that contains a specific ID attribute, select the ID option from the Selector Type
pop-up menu and then enter the unique ID (for example, containerDIV) in the Selector Name text box.
Note: IDs must begin with a pound (#) sign and can contain any combination of letters and numbers (for example,
#myID1). If you don’t enter a beginning pound sign, Dreamweaver automatically enters it for you.
• To redefine the default formatting of a specific HTML tag, select the Tag option from the Selector Type pop-up
menu; then enter an HTML tag in the Selector Name text box or select one from the pop-up menu.
• To define a compound rule that affects two or more tags, classes, or IDs simultaneously, select the Compound
option and enter the selectors for your compound rule. For example if you enter div p, all p elements within div
tags will be affected by the rule. A description text area explains exactly which elements the rule will affect as you
add or delete selectors.
3 Select the location in which you want to define the rule, and then click OK:
• To place the rule in a style sheet that is already attached to the document, select the style sheet.
• To create an external style sheet, select New Style Sheet File.
• To embed the style in the current document, select This Document Only.
4 In the CSS Rule Definition dialog box, select the style options you want to set for the new CSS rule. For more
information, see the next section.
5 When you are finished setting style properties, click OK.
Note: Clicking OK without setting style options results in a new, empty rule.
Set CSS properties
You can define properties for CSS rules such as text font, background image and color, spacing and layout properties,
and the appearance of list elements. First create a new rule, then set any of the following properties.
Define CSS type properties
You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.
1 Open the CSS Styles panel (Shift + F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Type, and then set the style properties.
Leave any of the following properties empty if they are not important to the style:
Font-family Sets the font family (or series of families) for the style. Browsers display text in the first font in the series
that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font
attribute is supported by both browsers.
Font-size Defines the size of the text. You can choose a specific size by selecting the number and the unit of
measurement, or you can choose a relative size. Pixels work well to prevent browsers from distorting your text. The
size attribute is supported by both browsers.
Font-style Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is
supported by both browsers.
Last updated 12/7/2011
130
USING DREAMWEAVER
Creating pages with CSS
Line-height Sets the height of the line on which the text is placed. This setting is traditionally called leading. Select
Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of
measurement.The line height attribute is supported by both browsers.
Text-decoration Adds an underline, overline, or line-through to the text, or makes the text blink. The default setting
for regular text is None. The default setting for links is Underline. When you set the link setting to none, you can
remove the underline from links by defining a special class.The decoration attribute is supported by both browsers.
Font-weight Applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is
equivalent to 700. The weight attribute is supported by both browsers.
Font-variant Sets the small caps variant on text. Dreamweaver does not display this attribute in the Document
window. The variant attribute is supported by Internet Explorer but not Navigator.
Text-transform Capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase.
The case attribute is supported by both browsers.
Color Sets the text color. The color attribute is supported by both browsers.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style background properties
Use the Background category of the CSS Rule Definition dialog box to define background settings for a CSS style. You
can apply background properties to any element in a web page. For example, create a style which adds a background
color or background image to any page element, for example behind text, a table, the page, and so on. You can also set
the positioning of a background image.
1 Open the CSS Styles panel (Shift+F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Background, then set the style properties.
Leave any of the following properties empty if they are not important to the style:
Background Color Sets the background color for the element. The background color attribute is supported by both
browsers.
Background Image Sets the background image for the element.The background image attribute is supported by both
browsers.
Background Repeat Determines whether and how the background image is repeated. The Repeat attribute is
supported by both browsers.
• No Repeat displays the image once at the beginning of the element.
• Repeat tiles the image horizontally and vertically behind the element.
• Repeat-x and Repeat-y display a horizontal and vertical band of images, respectively. Images are clipped to fit
within the boundaries of the element.
Note: Use the Repeat property to redefine the body tag and set a background image that does not tile or repeat.
Background Attachment Determines whether the background image is fixed at its original position or scrolls along
with the content. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer
but not Netscape Navigator.
Background Position (X) and Background Position (Y) Specify the initial position of the background image in relation
to the element. This can be used to align a background image to the center of the page, both vertically (Y) and
Last updated 12/7/2011
131
USING DREAMWEAVER
Creating pages with CSS
horizontally (X). If the attachment property is Fixed, the position is relative to the Document window, not to the
element.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style block properties
You use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags and
properties.
1 Open the CSS Styles panel (Shift+F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Block, then set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Word Spacing Sets the spacing between words. To set a specific value, in the pop-up menu, select Value, then enter a
numeric value. In the second pop-up menu, select a measurement unit (for example, pixel, points, and so on).
Note: You can specify negative values, but the display depends on the browser. Dreamweaver does not display this
attribute in the Document window.
Letter Spacing Increases or decreases space between letters or characters. To decrease the space between characters
specify a negative value, for example (-4). Letter spacing settings override justified text settings. The Letter Spacing
attribute is supported by Internet Explorer 4 and later and Netscape Navigator 6.
Vertical Align Specifies the vertical alignment of the element to which it is applied. Dreamweaver displays this
attribute in the Document window only when it is applied to the ![]()
tag.
Text Align Sets how text is aligned within the element. The Text Align attribute is supported by both browsers.
Text Indent Specifies how far the first line of text indents. A negative value may be used to create an outdent, but the
display depends on the browser. Dreamweaver displays this attribute in the Document window only when the tag is
applied to block-level elements. The Text Indent attribute is supported by both browsers.
Whitespace Determines how white space within the element is handled. Select from three options: Normal collapses
white space; Pre handles it as if the text were enclosed in pre tags (that is, all white space, including spaces, tabs, and
returns, is respected); Nowrap specifies that the text only wraps when a br tag is encountered. Dreamweaver does not
display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and
Internet Explorer 5.5.
Display Specifies whether an element is displayed and if so how it is displayed. None disables the display of an element
to which it is assigned.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style box properties
Use the Box category of the CSS Rule Definition dialog box to define settings for tags and properties that control the
placement of elements on the page.
You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same
For All setting to apply the same setting to all sides of an element.
1 Open the CSS Styles panel (Shift + F11) if it isn’t already open.
Last updated 12/7/2011
132
USING DREAMWEAVER
Creating pages with CSS
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Box, and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
Width and Height Sets the width and height of the element.
Float Sets which side other elements, such as text, AP Divs, tables and so on, will float around an element. Other
elements wrap around the floating element as usual. The Float attribute is supported by both browsers.
Clear Defines the sides that do not allow AP elements. If an AP element appears on the clear side, the element with the
clear setting moves below it. The Clear attribute is supported by both browsers.
Padding Specifies the amount of space between the content of an element and its border (or margin if there is no
border). Deselect the Same For All option to set the padding for individual sides of the element.
Same For All Sets the same padding properties to the Top, Right, Bottom, and Left of the element to which it is applied.
Margin Specifies the amount of space between the border of an element (or the padding if there is no border) and
another element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level
elements (paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the
element.
Same For All Sets the same margin properties to the Top, Right, Bottom, and Left of the element to which it is applied.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style border properties
Use the Border category of the CSS Rule Definition dialog box to define settings, such as width, color, and style, for the
borders around elements.
1 Open the CSS Styles panel (Shift+F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Border, and set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Type Sets the style appearance of the border. The way the style appears depends on the browser. Deselect Same For
All to set the border style for individual sides of the element.
Same For All Sets the same border style properties to the Top, Right, Bottom, and Left of the element to which it is
applied.
Width Sets the thickness of the element’s border. The Width attribute is supported by both browsers. Deselect Same
For All to set the border width for individual sides of the element.
Same For All Sets the same border width to the Top, Right, Bottom, and Left of the element to which it is applied.
Color Sets the color of the border. You can set each side’s color independently, but the display depends on the browser.
Deselect Same For All to set the border color for individual sides of the element.
Same For All Sets the same border color to the Top, Right, Bottom, and Left of the element to which it is applied.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Last updated 12/7/2011
133
USING DREAMWEAVER
Creating pages with CSS
Define CSS style list properties
The List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.
1 Open the CSS Styles panel (Shift+F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select List, and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
List style type Sets the appearance of bullets or numbers. Type is supported by both browsers.
List style image Lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to
browse to an image, or type the image’s path.
List style position Sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin
(inside).
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style positioning properties
The Positioning style properties determine how the content related to the selected CSS style is positioned on the page.
1 Open the CSS Styles panel (Shift+F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Positioning, and then set the style properties you want.
Leave any of the following properties empty if they are not important to the style:
Position Determines how the browser should position the selected element as follows:
• Absolute places the content using the coordinates entered in the Placement boxes relative to the nearest absolutelyor relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the upper-left
corner of the page.
• Relative places the content block using the coordinates entered in the Placement boxes relative to block’s position
in the text flow of the document. For example, giving an element a relative position and top and left coordinates of
20px each will shift the element 20px to the right and 20px down from its normal position in the flow. Elements
can also be positioned relatively, with or without top, left, right, or bottom coordinates, to establish a context for
absolutely-positioned children.
• Fixed places the content using the coordinates entered in the Placement boxes, relative to the top left corner of the
browser. The content will remain fixed in this position as the user scrolls the page.
• Static places the content at its location in the text flow. This is the default position of all positionable HTML
elements.
Visibility Determines the initial display condition of the content. If you do not specify a visibility property, by default
the content inherits the parent tag’s value. The default visibility of the body tag is visible. Select one of the following
visibility options:
• Inherit inherits the visibility property of the content’s parent.
• Visible displays the content, regardless of the parent’s value.
• Hidden hides the content, regardless of the parent’s value.
Last updated 12/7/2011
134
USING DREAMWEAVER
Creating pages with CSS
Z-Index Determines the stacking order of the content. Elements with a higher z-index appear above elements with a
lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier
to change the stacking order using the AP Elements panel).
Overflow Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. These
properties control the expansion as follows:
• Visible increases the container’s size so that all of its contents are visible. The container expands down and to the
right.
• Hidden maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.
• Scroll adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically
providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic
environment. This option is not displayed in the Document window.
• Auto makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not
displayed in the Document window.
Placement Specifies the location and size of the content block. How the browser interprets the location depends on
the setting for Type. Size values are overridden if the content of the content block exceeds the specified size.
The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in
(inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations
must follow the value without a space: for example, 3mm.
Clip Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting
language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be
set up by using the Change Property behavior.
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Define CSS style extension properties
Extensions style properties include filters, page break, and pointer options.
Note: There are a number of other extension properties available in Dreamweaver, but to access them, you need to go
through the CSS Styles panel. You can easily see a list of extension properties available by opening the CSS Styles panel
(Windows > CSS Styles), clicking the Show Category View button at the bottom of the panel, and expanding the
Extensions category.
1 Open the CSS Styles panel (Shift + F11) if it isn’t already open.
2 Double-click an existing rule or property in the top pane of the CSS Styles panel.
3 In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the
property blank if it is not important to the style.)
Page break before Forces a page break during printing either before or after the object controlled by the style. Select
the option you want to set in the pop-up menu. This option is not supported by any 4.0 browser, but support may be
provided by future browsers.
Cursor Changes the pointer image when the pointer is over the object controlled by the style. Select the option you
want to set in the pop-up menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.
Filter Applies special effects to the object controlled by the style, including blur and inversion. Select an effect from
the pop-up menu.
Last updated 12/7/2011
135
USING DREAMWEAVER
Creating pages with CSS
4 When you are finished setting these options, select another CSS category on the left side of the panel to set
additional style properties, or click OK.
Edit a CSS rule
You can easily edit both internal and external rules that you have applied to a document.
When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text
controlled by that CSS style sheet. Edits to an external style sheet affect all the documents linked to it.
You can set an external editor to use for editing style sheets.
Edit a rule in the CSS Styles panel (Current mode)
1 Open the CSS Styles panel by selecting Window > CSS Styles.
2 Click the Current button at the top of the CSS Styles panel.
3 Select a text element in the current page to display its properties.
4 Do one of the following:
• Double-click a property in the Summary for Selection pane to display the CSS Rule Definition dialog box, and then
make your changes.
• Select a property in the Summary for Selection pane, and then edit the property in the Properties pane below.
• Select a rule in the Rules pane, and then edit the rule’s properties in the Properties pane below.
Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver
preferences.
Edit a rule in the CSS Styles panel (All mode)
1 Open the CSS Styles panel by selecting Window > CSS Styles.
2 Click the All button at the top of the CSS Styles panel.
3 Do one of the following:
• Double-click a rule in the All Rules pane to display the CSS Rule Definition dialog box, and then make your
changes.
• Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below.
• Select a rule in the All Rules pane, and then click the Edit Style button in the lower-right corner of the CSS Styles
panel.
Note: You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver
preferences.
Change the name of a CSS selector
1 In the CSS Styles panel (All mode) select the selector you want to change.
2 Click the selector again to make the name editable.
3 Make your changes and press Enter (Windows) or Return (Macintosh).
Last updated 12/7/2011
136
USING DREAMWEAVER
Creating pages with CSS
More Help topics
“Set text properties in the Property inspector” on page 217
Add a property to a CSS rule
You can use the CSS Styles panel to add properties to rules.
1 In the CSS Styles panel (Window > CSS), select a rule in the All Rules pane (All mode), or select a property in the
Summary for Selection pane (Current mode).
2 Do one of the following:
• If Show Only Set Properties view is selected in the Properties pane, click the Add Properties link and add a property.
• If Category view or List view is selected in the Properties pane, fill in a value for the property you want to add.
Apply, remove, or rename CSS class styles
Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control
the text. All class styles associated with the current document are displayed in the CSS Styles panel (with a period [.]
preceding their name) and in the Style pop-up menu of the text Property inspector.
You’ll see most styles updated immediately, however, you should preview your page in a browser to verify a style was
applied as expected. When you apply two or more styles to the same text, the styles may conflict and produce
unexpected results.
When previewing styles defined in an external CSS style sheet, be sure to save the style sheet to ensure that your
changes are reflected when you preview the page in a browser.
More Help topics
“About Cascading Style Sheets” on page 118
“About cascading styles” on page 120
“The CSS Styles panel” on page 122
Apply a CSS class style
1 In the document, select the text to which you want to apply a CSS style.
Place the insertion point in a paragraph to apply the style to the entire paragraph.
If you select a range of text within a single paragraph, the CSS style affects only the selected range.
To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the lower
left of the Document window.
2 To apply a class style, do one of the following:
• In the CSS Styles panel (Window > CSS Styles), select All mode, right-click the name of the style you want to apply,
and select Apply from the context menu.
• In the HTML Property inspector, select the class style you want to apply from the Class pop-up menu.
Last updated 12/7/2011
137
USING DREAMWEAVER
Creating pages with CSS
• In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in the context
menu, select CSS Styles and then select the style you want to apply.
• Select Format > CSS Styles, and in the submenu select the style you want to apply.
Remove a class style from a selection
1 Select the object or text you want to remove the style from.
2 In the HTML Property inspector (Window > Properties), select None from the Class pop-up menu.
Rename a class style
1 In the CSS styles panel, right-click the CSS class style you want to rename and select Rename Class.
You can also rename a class by selecting Rename Class from the CSS Styles panel options menu.
2 In the Rename Class dialog box, make sure that the class you want to rename is selected in the Rename Class pop-up
menu.
3 In the New Name text box, enter the new name for the new class and click OK.
If the class you’re renaming is internal to the head of the current document, Dreamweaver changes the class name as
well as all instances of the class name in the current document. If the class you’re renaming is in an external CSS file,
Dreamweaver opens and changes the class name in the file. Dreamweaver also launches a site-wide Find and Replace
dialog box so that you can search for all instances of the old class name in your site.
Move/export CSS rules
The CSS management features in Dreamweaver make it easy for you to move or export CSS rules to different locations.
You can move rules from document to document, from the head of a document to an external style sheet, between
external CSS files, and more.
Note: If the rule you’re trying to move conflicts with a rule in the destination style sheet, Dreamweaver displays the Rule
With Same Name Exists dialog box. If you elect to move the conflicting rule, Dreamweaver places the moved rule
immediately adjacent to the conflicting rule in the destination style sheet.
More Help topics
“Insert code with the Coding toolbar” on page 296
Move/export CSS rules to a new style sheet
1 Do one of the following:
• In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move
CSS Rules from the context menu. To select multiple rules, Control-click (Windows) or Command-click
(Macintosh) the rules you want to select.
• In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles > Move
CSS Rules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.
2 In the Move To External Style Sheet dialog box, select the new style sheet option and click OK.
Last updated 12/7/2011
138
USING DREAMWEAVER
Creating pages with CSS
3 In the Save Style Sheet File As dialog box, enter a name for the new style sheet and click Save.
When you click Save, Dreamweaver saves a new style sheet with the rules you selected and attaches it to the current
document.
You can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.
Move/export CSS rules to an existing style sheet
1 Do one of the following:
• In the CSS Styles panel, select the rule or rules you want to move. Then right-click the selection and select Move
CSS Rules from the context menu. To select multiple rules, Control-click (Windows) or Command-click
(Macintosh) the rules you want to select.
• In Code view, select the rule or rules you want to move. Then right-click the selection and select CSS Styles > Move
CSS Rules from the context menu.
Note: Partial selection of a rule will result in the relocation of the entire rule.
2 In the Move To External Style Sheet dialog box, select an existing style sheet from the pop-up menu or browse to
an existing style sheet and click OK.
Note: The pop-up menu displays all style sheets that are linked to the current document.
You can also move rules by using the Coding toolbar. The Coding toolbar is available in Code view only.
Rearrange or move CSS rules by dragging
❖ In the CSS Styles panel (All mode), select a rule and drag it rule to the desired location. You can select and drag to
re-order rules within a style sheet, or move a rule to another style sheet or the document head.
You can move more than one rule at a time by Control-clicking (Windows) or Command-clicking (Macintosh)
multiple rules to select them.
Select multiple rules before moving them
❖ In the CSS Styles panel, Control-click (Windows) or Command-click (Macintosh) the rules you want to select.
Convert inline CSS to a CSS rule
In-line styles are not recommended best practices. To make your CSS cleaner and more organized, you can convert
inline styles to CSS rules that reside in the head of the document or in an external style sheet.
1 In Code view (View > Code), select the entire style attribute that contains the inline CSS you want to convert
2 Right-click and select CSS Styles > Convert Inline CSS to Rule.
3 In the Convert Inline CSS dialog box, enter a class name for the new rule, and then do one of the following:
• Specify a style sheet where you want the new CSS rule to appear and click OK.
• Select the head of the document as the location where you want the new CSS rule to appear and click OK.
You can also convert rules by using the Coding toolbar. The Coding toolbar is available in Code view only.
Last updated 12/7/2011
139
USING DREAMWEAVER
Creating pages with CSS
More Help topics
“Insert code with the Coding toolbar” on page 296
Link to an external CSS style sheet
When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those
edits. You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an
external style sheet to apply the styles found there.
You can attach to your pages any style sheet that you create or copy into your site. In addition, Dreamweaver is shipped
with prebuilt style sheets that can be automatically moved into your site and attached to your pages.
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 Style Sheet button. (It’s in the lower-right corner of the panel.)
3 Do one of the following:
• Click Browse to browse to an external CSS style sheet.
• Type the path to the style sheet in the File/URL box.
4 For Add As, select one of the options:
• To create a link between the current document and an external style sheet, select Link. This creates a link href tag
in the HTML code, and references the URL where the published style sheet is located. This method is supported by
both Microsoft Internet Explorer and Netscape Navigator.
• You cannot use a link tag to add a reference from one external style sheet to another. If you want to nest style sheets,
you must use an import directive. Most browsers also recognize the import directive within a page (rather than just
within style sheets). There are subtle differences in how conflicting properties are resolved when overlapping rules
exist within external style sheets that are linked versus imported to a page. If you want to import, rather than link
to, an external style sheet, select Import.
5 In the Media pop-up menu, specify the target medium for the style sheet.
For more information on media-dependent style sheets, see the World Wide Web Consortium website at
www.w3.org/TR/CSS21/media.html.
6 Click the Preview button to verify that the style sheet applies the styles you want to the current page.
If the styles applied are not what you expect them to be, click Cancel to remove the style sheet. The page will revert to
its previous appearance.
7 Click OK.
More Help topics
“Create a page based on a Dreamweaver sample file” on page 64
Last updated 12/7/2011
140
USING DREAMWEAVER
Creating pages with CSS
Edit a CSS style sheet
A CSS style sheet typically includes one or more rules. You can edit an individual rule in a CSS style sheet using the
CSS Styles panel, or if you prefer, you can work directly in the CSS style sheet.
1 In the CSS Styles panel (Window > CSS Styles), select All mode.
2 In the All rules pane, double-click the name of the style sheet you want to edit.
3 In the Document window, modify the style sheet as desired, and then save the style sheet.
Format CSS code
You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the
Dreamweaver interface. For example, you can set preferences that will place all CSS properties on separate lines, place
a blank line between CSS rules, and so on.
When you set CSS code formatting preferences, the preferences you select are automatically applied to all new CSS
rules that you create. You can, however, also apply these preferences manually to individual documents. This might
be useful if you have an older HTML or CSS document that needs formatting.
Note: CSS code formatting preferences apply to CSS rules in external or embedded style sheets only (not to in-line styles)
More Help topics
“Change the code format” on page 288
Set CSS code formatting preferences
1 Select Edit > Preferences.
2 In the Preferences dialog box, select the Code Format category.
3 Next to Advanced Formatting, click the CSS button.
4 In the CSS Source Format Options dialog box, select the options that you want to apply to your CSS source code.
A preview of the CSS as it would look according to the options you’ve selected appears in the Preview window
below.
Indent Properties With Sets the indentation value for properties within a rule. You can specify tabs or spaces.
Each Property On A Separate Line Places each property within a rule on a separate line.
Opening Brace On Separate Line Places the opening brace for a rule on a separate line from the selector.
Only If More Than One Property Places single-property rules on the same line as the selector.
All Selectors For A Rule On Same Line Places all selectors for the rule on the same line.
Blank Line Between Rules Inserts a blank line between each rule.
5 Click OK.
Note: CSS code formatting also inherits the Line Break Type preference that you set in the Code Format category of the
Preferences dialog box.
Last updated 12/7/2011
141
USING DREAMWEAVER
Creating pages with CSS
Format CSS code in a CSS style sheet manually
1 Open a CSS style sheet.
2 Select Commands > Apply Source Formatting.
The formatting options you set in CSS code formatting preferences are applied to the entire document. You cannot
format individual selections.
Format embedded CSS code manually
1 Open an HTML page that contains CSS embedded in the head of the document.
2 Select any part of the CSS code.
3 Select Commands > Apply Source Formatting To Selection.
The formatting options you set in CSS code formatting preferences are applied to all CSS rules in the head of the
document only.
Note: You can select Commands > Apply Source Formatting to format the entire document according to your specified
code formatting preferences.
Disable/Enable CSS
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.
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 select
4 Enable All
5
Disabled in Selected Rule, or Delete all Disabled in Selected rule.
Last updated 12/7/2011
142
USING DREAMWEAVER
Creating pages with CSS
Inspect CSS in Live view
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” on page 276
“The CSS Styles panel” on page 122
Check for cross-browser CSS rendering issues
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.
Last updated 12/7/2011
143
USING DREAMWEAVER
Creating pages with CSS
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.
More Help topics
“Validate XML documents” on page 311
CSS Advisor
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.
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.
Last updated 12/7/2011
144
USING DREAMWEAVER
Creating pages with CSS
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.
Use Design-Time style sheets
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.
Last updated 12/7/2011
145
USING DREAMWEAVER
Creating pages with CSS
• 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” on page 10
Use Dreamweaver sample style sheets
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.
Update CSS style sheets in a Contribute site
Adobe Contribute users can’t make changes to a CSS style sheet. To change a style sheet for a Contribute site, use
Dreamweaver.
1 Edit the style sheet using the Dreamweaver style-sheet-editing tools.
2 Tell all of the Contribute users who are working on the site to publish pages that use that style sheet, then re-edit
those pages to view the new style sheet.
Last updated 12/7/2011
146
USING DREAMWEAVER
Creating pages with CSS
The following are important factors to keep in mind when updating style sheets for a Contribute site:
• If you make changes to a style sheet while a Contribute user is editing a page that uses that style sheet, the user won’t
see the changes to the style sheet until they publish the page.
• If you delete a style from a style sheet, the style name is not deleted from pages that use that style sheet, but since
the style no longer exists, it isn’t displayed the way the Contribute user may expect. Thus, if a user tells you that
nothing happens when they apply a particular style, the problem may be that the style has been deleted from the
style sheet.
Laying out pages with CSS
About CSS page layout
A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize
the content on a web page. The basic building block of the CSS layout is the div tag—an HTML tag that in most cases
acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the
page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing
somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div
tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page
elements). You can also position div tags by specifying floats, paddings, and margins—the preferred method by today’s
web standards.
Creating CSS layouts from scratch can be difficult because there are so many ways to do it. You can create a simple
two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of
combinations. Additionally, the problem of cross-browser rendering causes certain CSS layouts to display properly in
some browsers, and display improperly in others. Dreamweaver makes it easy for you to build pages with CSS layouts
by providing 16 pre-designed layouts that work across different browsers.
Using the pre-designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout,
but you can also create CSS layouts using Dreamweaver absolutely-positioned elements (AP elements). 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 limitation of Dreamweaver AP elements, however, is that since they are absolutely positioned, their
positions never adjust on the page according to the size of the browser window.
If you are an advanced user, you can also insert div tags manually and apply CSS positioning styles to them to create
page layouts.
About CSS page layout structure
Before proceeding with this section, you should be familiar with basic CSS concepts.
The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text,
images, and other page elements. The following example shows an HTML page that contains three separate div tags:
one large “container” tag, and two other tags—a sidebar tag, and a main content tag—within the container tag.
Last updated 12/7/2011
147
USING DREAMWEAVER
Creating pages with CSS
B
A
C
A. Container div B. Sidebar div C. Main Content div
Following is the code for all three div tags in the HTML:
Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
In the above example, there is no “styling” attached to any of the div tags. Without CSS rules defined, each div tag and
its contents fall into a default location on the page. However, if each div tag has a unique id (as in the above example),
you can use the ids to create CSS rules that, when applied, change the style and positioning of the div tags.
The following CSS rule, which can reside in the head of the document or in an external CSS file, creates styling rules
for the first, or “container” div tag on the page:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
The #container rule styles the container div tag to have a width of 780 pixels, a white background, no margin (from the
left side of the page), a solid, black, 1-pixel border, and text that is aligned left. The results of applying the rule to the
container div tag are as follows:
Last updated 12/7/2011
148
USING DREAMWEAVER
Creating pages with CSS
A
B
C
Container div tag, 780 pixels, no margin
A. Text aligned left B. White background C. 1-pixel solid black border
The next CSS rule creates styling rules for the sidebar div tag:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
The #sidebar rule styles the sidebar div tag to have a width of 200 pixels, a gray background, a top and bottom padding
of 15 pixels, a right padding of 10 pixels, and a left padding of 20 pixels. (The default order for padding is top-rightbottom-left.) Additionally, the rule positions the sidebar div tag with float: left—a property that pushes the sidebar div
tag to the left side of the container div tag. The results of applying the rule to the sidebar div tag are as follows:
A
B
B
Sidebar div, float left
A. Width 200 pixels B. Top and bottom padding, 15 pixels
Lastly, the CSS rule for the main container div tag finishes the layout:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Last updated 12/7/2011
149
USING DREAMWEAVER
Creating pages with CSS
The #mainContent rule styles the main content div with a left margin of 250 pixels, which means that it places 250
pixels of space between the left side of the container div, and the left side of the main content div. Additionally, the rule
provides for 20 pixels of spacing on the right, bottom, and left sides of the main content div. The results of applying
the rule to the mainContent div are as follows:
A
B
C
Main Content div, left margin of 250 pixels
A. 20 pixels left padding B. 20 pixels right padding C. 20 pixels bottom padding
The complete code looks as follows:
Untitled Document
Last updated 12/7/2011
150
USING DREAMWEAVER
Creating pages with CSS
Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
Note: The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout
when you create a new document using the predesigned layouts that come with Dreamweaver.
More Help topics
“Understanding Cascading Style Sheets” on page 118
Create a page with a CSS layout
When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver
comes with 16 different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts and
add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, 2.0,
and 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0, and 8.0; Opera (Windows and Macintosh) 8.0, 9.0, and 10.0; Safari
2.0, 3.0, and 4.0; and Chrome 3.0.
For an informational article that explains how to use the CSS layouts that come with Dreamweaver, see the
Dreamweaver Developer Center.
There are also more CSS layouts available on the Adobe Dreamweaver Exchange.
More Help topics
“Create a blank page” on page 60
“Set default document type and encoding” on page 66
“Link to an external CSS style sheet” on page 139
Create a page with a CSS layout
1 Select File > New.
2 In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3 For Page Type, select the kind of page you want to create.
Last updated 12/7/2011
151
USING DREAMWEAVER
Creating pages with CSS
Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so
on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with
a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS
page layouts.
4 For Layout, select the CSS layout you want to use. You can choose from 16 different layouts. The Preview window
shows the layout and gives a brief description of the selected layout.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor
makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
5 Select a document type from the DocType pop-up menu.
6 Select a location for the layout’s CSS from the Layout CSS in pop-up menu.
Add To Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page
you’re creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.
7 Do one of the following:
• If you selected Add to Head from the Layout CSS in pop-up menu (the default option), click Create.
• If you selected Create New File from the Layout CSS pop-up menu, click Create, and then specify a name for the
new external file in the Save Style Sheet File As dialog box.
• If you selected Link to Existing File from the Layout CSS in pop-up menu, add the external file to the Attach CSS
file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking
OK. When you’re finished, click Create in the New Document dialog box.
Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file
contained within it.
When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the
HTML page you’re creating.
Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in
the head of the new CSS layout document, even if you select New External File or Existing External File as the location
for your layout CSS.
8 (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the
page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.
For a detailed walk-through of this process, see David Powers’s article, Automatically attaching a style sheet to new
documents.
Add custom CSS layouts to the list of choices
1 Create an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document
dialog box. The CSS for the layout must reside in the head of the HTML page.
Last updated 12/7/2011
152
USING DREAMWEAVER
Creating pages with CSS
To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save
your HTML file with the .htm extension.
2 Add the HTML page to the Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts folder.
3 (Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver
CS5\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x
193 pixels high PNG files.
Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if
your HTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.
4 (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver
CS5\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same
folder, and renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno
file, and rename it myCustomLayout.htm.mno.
5 (Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout
name, description, and preview image.
Working with div tags
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.
More Help topics
“About AP elements in Dreamweaver” on page 156
“Create a page with a CSS layout” on page 150
“Presenting content with tables” on page 170
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
Last updated 12/7/2011
.
153
USING DREAMWEAVER
Creating pages with CSS
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.)
More Help topics
“About AP elements in Dreamweaver” on page 156
“Create a page with a CSS layout” on page 150
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.
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.
More Help topics
“About AP elements in Dreamweaver” on page 156
“Open the CSS Styles panel” on page 126
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.
Last updated 12/7/2011
154
USING DREAMWEAVER
Creating pages with CSS
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
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.
Last updated 12/7/2011
155
USING DREAMWEAVER
Creating pages with CSS
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.
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.
Last updated 12/7/2011
156
USING DREAMWEAVER
Creating pages with CSS
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.
More Help topics
“Use Design-Time style sheets” on page 144
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.
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:
Last updated 12/7/2011
157
USING DREAMWEAVER
Creating pages with CSS
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.
More Help topics
“Select AP elements” on page 162
“Change the highlight color of div tags” on page 154
“Visualizing CSS layout blocks” on page 154
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.
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.
Last updated 12/7/2011
158
USING DREAMWEAVER
Creating pages with CSS
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.
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.
Last updated 12/7/2011
159
USING DREAMWEAVER
Creating pages with CSS
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.
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.
Last updated 12/7/2011
160
USING DREAMWEAVER
Creating pages with CSS
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.)
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.
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-pixel-high
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.
Last updated 12/7/2011
161
USING DREAMWEAVER
Creating pages with CSS
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.
• 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.
Last updated 12/7/2011
162
USING DREAMWEAVER
Creating pages with CSS
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.
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.
Last updated 12/7/2011
163
USING DREAMWEAVER
Creating pages with CSS
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).
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.
Last updated 12/7/2011
164
USING DREAMWEAVER
Creating pages with CSS
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.
More Help topics
“Use the layout grid” on page 169
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.
Hold down the Shift key while pressing an arrow key to move the AP element by the current grid-snapping increment.
More Help topics
“Use the layout grid” on page 169
Last updated 12/7/2011
165
USING DREAMWEAVER
Creating pages with CSS
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.
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.
Last updated 12/7/2011
166
USING DREAMWEAVER
Creating pages with CSS
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.
Last updated 12/7/2011
167
Chapter 7: Laying out pages with HTML
Using visual aids for layout
Set rulers
Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page,
marked in pixels, inches, or centimeters.
• To toggle rulers on and off, select View > Rulers > Show.
• To change the origin, drag the ruler-origin icon
(at the upper-left corner of the Design view of the Document
window) anywhere on the page.
• To reset the origin to its default position, select View > Rulers > Reset Origin.
• To change the unit of measure, select View > Rulers, and then select Pixels, Inches, or Centimeters.
Set layout guides
Guides are lines that you drag onto the document from the rulers. They help you place and align objects more precisely.
You can also use guides to measure the size of page elements, or emulate the folds (visible areas) of web browsers.
To help you align elements, you can snap elements to guides, and snap guides to elements. (Elements must be
absolutely positioned in order for the snap feature to work.) You can also lock guides to prevent them from being
accidentally moved by another user.
Create a horizontal or vertical guide
1 Drag from the corresponding ruler.
2 Position the guide in the Document window and release the mouse button (reposition the guide by dragging it
again).
Note: By default, guides are recorded as absolute pixel measurements from the top or left side of the document, and are
shown relative to the origin of the ruler. To record the guide as a percentage, press the Shift key while you create or move
the guide.
Show or hide guides
❖ Select View > Guides > Show Guides.
Snap elements to guides
• To snap elements to guides, select View > Guides > Snap to Guides.
• To snap guides to elements, select View > Guides > Guides Snap to Elements.
Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized
elements snap to guides.
Lock or unlock all guides
❖ Select View > Guides > Lock Guides.
Last updated 12/7/2011
168
USING DREAMWEAVER
Laying out pages with HTML
View and move a guide to a specific position
1 Hold the mouse pointer over the guide to view its position.
2 Double-click the guide.
3 Enter the new position in the Move Guide dialog box and click OK.
View the distance between guides
❖ Press Control (Windows) or Command (Macintosh) and hold the mouse pointer anywhere between the two
guides.
Note: The unit of measure is the same as the unit of measure used for the rulers.
Emulate the fold (visible area) of a web browser
❖ Select View > Guides, and then select a preset browser size from the menu.
Remove a guide
❖ Drag the guide off the document.
Change guide settings
❖ Select View > Guides > Edit Guides, set the following options, and click OK.
Guide color Specifies the color of the guide lines. Click the color swatch and select a color from the color picker, or
type a hexadecimal number in the text box.
Distance Color Specifies the color of the lines that appear as distance indicators when you hold the mouse pointer
between guides. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the
text box.
Show Guides Makes guides visible in Design view.
Snap to Guides Makes page elements snap to guides as you move elements around the page.
Lock Guides Locks guides in place.
Guides Snap to Elements Snaps guides to elements on the page as you drag guides.
Clear All Clears all guides from the page.
Using guides with templates
When guides are added to a Dreamweaver template, all instances of the template inherit the guides. Guides in template
instances, however, are treated as editable regions, so users can modify them. Modified guides in template instances
are restored to their original location whenever the instance is updated with the master template.
You can also add your own guides to instances of a template. Guides added in this manner are not overwritten when
the template instance is updated with the master template.
More Help topics
“Align AP elements” on page 165
“Move AP elements” on page 164
Last updated 12/7/2011
169
USING DREAMWEAVER
Laying out pages with HTML
Use the layout grid
The grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects
precisely. You can make absolutely-positioned page elements automatically snap to the grid as you move them, and
change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid
is visible.
More Help topics
“Align AP elements” on page 165
“Move AP elements” on page 164
Show or hide the grid
❖ Select View > Grid > Show Grid.
Enable or disable snapping
❖ Select View > Grid > Snap to Grid.
Change grid settings
1 Select View > Grid > Grid Settings.
2 Set the options and click OK to apply the changes.
Color Specifies the color of the grid lines. Click the color swatch and select a color from the color picker, or type a
hexadecimal number in the text box.
Show Grid Makes the grid visible in Design view.
Snap to Grid Makes page elements snap to the lines of the grid.
Spacing Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.
Display Specifies whether the grid lines appear as lines or dots.
Note: If Show Grid is not selected, the grid does not appear in the document and no changes are visible.
Use a tracing image
You can use a tracing image as a guide to re-create a page design that was created in a graphics application such as
Adobe Freehand or Fireworks.
A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can
hide the image, set its opacity, and change its position.
The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the
tracing image is visible, the page’s real background image and color are not visible in the Document window; however,
the background image and color will be visible when the page is viewed in a browser.
Place a tracing image in the Document window
1 Do one of the following:
• Select View > Tracing Image > Load.
• Select Modify > Page Properties, then click Browse (next to the Tracing Image text box).
2 In the Select Image Source dialog box, select an image file and click OK.
Last updated 12/7/2011
170
USING DREAMWEAVER
Laying out pages with HTML
3 In the Page Properties dialog box, specify the transparency for the image by dragging the Image Transparency
slider, then click OK.
To switch to another tracing image or change the transparency of the current tracing image at any time, select
Modify > Page Properties.
Show or hide the tracing image
❖ Select View > Tracing Image > Show.
Change the position of a tracing image
❖ Select View > Tracing Image > Adjust Position.
• To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
• To move the image 1 pixel at a time, use the arrow keys.
• To move the image 5 pixels at a time, press Shift and an arrow key.
Reset the position of the tracing image
❖ Select View > Tracing Image > Reset Position.
The tracing image returns to the upper-left corner of the Document window (0,0).
Align the tracing image to a selected element
1 Select an element in the Document window.
2 Select View > Tracing Image > Align with Selection.
The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.
Presenting content with tables
About tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table
consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly
specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.
Dreamweaver displays the table width and the column width for each table column when the table is selected or when
the insertion point is in the table. Next to the widths are arrows for the table header menu and the column header
menus. Use the menus for quick access to common table-related commands. You can enable or disable the widths and
menus.
If you do not see a width for the table or for a column, then that table or column does not have a specified width in the
HTML code. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width
specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when you
add content to a cell that’s larger than its set width.
For example, if you set a column’s width to 200 pixels and then add content that stretches the width to 250 pixels, two
numbers appear for that column: 200 (the width specified in the code) and (250) in parentheses (the visual width of
the column as it’s rendered on your screen).
Note: You can also lay out your pages using CSS positioning.
Last updated 12/7/2011
171
USING DREAMWEAVER
Laying out pages with HTML
More Help topics
“Laying out pages with CSS” on page 146
Table formatting precedence in HTML
When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or
cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and
another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes
precedence over table formatting.
The order of precedence for table formatting is as follows:
1 Cells
2 Rows
3 Table
For example, if you set the background color for a single cell to blue, then set the background color of the entire table
to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell
in the column.
About splitting and merging table cells
You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce
a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of
whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary colspan
or rowspan attributes) to create the specified arrangement.
In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans
two rows.
Insert a table and add content
Use the Insert panel or the Insert menu to create a new table. Then, add text and images to table cells the same way
that you add text and images outside of a table.
Note: The Layout mode feature is deprecated as of Dreamweaver CS4 and later. Layout mode created page layouts using
layout tables, which are no longer recommended by Adobe. For more information on Layout mode and why it was
deprecated, see the Dreamweaver Team Blog.
1 In the Design view of the Document window, place the insertion point where you want the table to appear.
Note: If your document is blank, you can place the insertion point only at the beginning of the document.
• Select Insert > Table.
• In the Common category of the Insert panel, click Table.
Last updated 12/7/2011
172
USING DREAMWEAVER
Laying out pages with HTML
2 Set the attributes of the Table dialog box and click OK to create the table.
Rows Determines the number of table rows.
Columns Determines the number of table columns.
Table Width Specifies the width of the table in pixels, or as a percentage of the browser window’s width.
Border Thickness Specifies the width, in pixels, of the table’s borders.
Cell Spacing Determines the number of pixels between adjacent table cells.
When you don’t explicitly assign values for border thickness or cell spacing and cell padding, most browsers display
the table border thickness and cell padding set to 1 and cell spacing were set to 2. To ensure that browsers display the
table with no border, padding or spacing, set Cell Padding and Cell Spacing to 0.
Cell Padding Determines the number of pixels between a cell’s border and its contents.
None Does not enable column or row headings for the table.
Left Makes the first column of the table a column for headings, so that you can enter a heading for each row of the
table.
Top Makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.
Both Enables you to enter column and row headings in the table.
It’s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table
headings and help screen-reader users keep track of table information.
Caption Provides a table title which displays outside of the table.
Align Caption Specifies where the table caption appears in relation to the table.
Summary Provides a table description. Screen readers read the summary text, but the text does not appear in the user’s
browser.
More Help topics
“Adding and modifying images” on page 226
Import and export tabular data
You can import tabular data that has been created in another application (such as Microsoft Excel) and saved in a
delimited text format (with items separated by tabs, commas, colons, or semicolons) into Dreamweaver and format it
as a table.
You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a
delimiter. You can use commas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table
is exported; you cannot select portions of a table to export.
If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy the
cells containing that data, paste those cells outside of the table (to create a new table), and export the new table.
Import table data
1 Do one of the following:
• Select File > Import > Tabular Data.
• In the Data category of the Insert panel, click the Import Tabular Data icon
• Select Insert > Table Objects > Import Tabular Data.
Last updated 12/7/2011
.
173
USING DREAMWEAVER
Laying out pages with HTML
2 Specify the options for the tabular data and click OK.
Data File The name of the file to import. Click the Browse button to select a file.
Delimiter The delimiter used in the file you’re importing.
If you select Other, a text box appears to the right of the pop-up menu. Enter the delimiter used in your file.
Note: Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be imported
properly, and your data will not be correctly formatted in a table.
Table Width The width of the table.
• Select Fit to Data to make each column wide enough to fit the longest text string in the column.
• Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.
Border Specifies the width, in pixels, of the table’s borders.
Cell Padding The number of pixels between a cell’s content and the cell boundaries.
Cell Spacing The number of pixels between adjacent table cells.
If you don’t explicitly assign values for borders, cell spacing, and cell padding, most browsers display the table with
borders and cell padding set to 1, and cell spacing set to 2. To ensure that browsers display the table with no padding
or spacing, set Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select
View > Visual Aids > Table Borders.
Format Top Row Determines what formatting, if any, is applied to the top row of the table. Select from four formatting
options: no formatting, bold, italic, or bold italic.
Export a table
1 Place the insertion point in any cell of the table.
2 Select File > Export > Table.
3 Specify the following options:
Delimiter Specifies which delimiter character should be used to separate items in the exported file.
Line Breaks Specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX.
(Different operating systems have different ways of indicating the end of a line of text.)
4 Click Export.
5 Enter a name for the file and click Save.
Select table elements
You can select an entire table, row, or column at once. You can also select one or more individual cells.
When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection
so that you know which cells will be selected. This is useful when you have tables without borders, cells that span
multiple columns or rows, or nested tables. You can change the highlight color in preferences.
If you position the pointer over a table’s border, then hold the Control key (Windows) or Command key (Macintosh),
the entire structure of the table—that is, all cells in the table—is highlighted. This is useful when you have nested tables
and want to see the structure of one of the tables.
Last updated 12/7/2011
174
USING DREAMWEAVER
Laying out pages with HTML
Select an entire table
❖ Do one of the following:
• Click the upper-left corner of the table, anywhere on the top or bottom edge of the table, or on a row or column’s
border.
Note: The pointer changes to the table grid icon
border).
when you can select the table (unless you click a row or column
• Click in a table cell, then select the tag in the tag selector at the lower-left corner of the Document window.
• Click in a table cell, then select Modify > Table > Select Table.
• Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected
table’s lower and right edges.
Select individual or multiple rows or columns
1 Position the pointer to point to the left edge of a row or the top edge of a column.
2 When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or
columns.
Select a single column
1 Click in the column.
2 Click the column header menu and choose Select Column.
Select a single cell
❖ Do one of the following:
• Click in the cell, then select the tag in the tag selector at the lower-left corner of the Document window.
• Control-click (Windows) or Command-click (Macintosh) in the cell.
• Click in the cell and select Edit >
• Select All
• .
Select Edit >
Select All
again when a cell is selected to select the entire table.
Last updated 12/7/2011
175
USING DREAMWEAVER
Laying out pages with HTML
Select a line or a rectangular block of cells
❖ Do one of the following:
• Drag from a cell to another cell.
• Click in one cell, Control-click (Windows) or Command-click (Macintosh) in the same cell to select it, then Shiftclick another cell.
All of the cells within the linear or rectangular region defined by the two cells are selected.
Select nonadjacent cells
❖ Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.
If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If it
is already selected, it’s removed from the selection.
Change the highlight color for table elements
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
2 Select Highlighting from the category list on the left, make either of the following changes, and click OK.
• To change the highlighting color for table elements, click the Mouse-Over color box, 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 table elements, select or deselect the Show option for Mouse-Over.
Note: These options affect all objects, such as absolutely-positioned elements (AP elements), that Dreamweaver highlights
when you move the pointer over them.
Set table properties
You can use the Property inspector to edit tables.
1 Select a table.
2 In the Property inspector (Window > Properties), change properties as necessary.
Table Id An ID for the table.
Rows and Cols The number of rows and columns in the table.
W The width of the table in pixels, or as a percentage of the browser window’s width.
Note: You usually don’t need to set the height of a table.
CellPad The number of pixels between a cell’s content and the cell boundaries.
CellSpace The number of pixels between adjacent table cells.
Align Determines where the table appears, relative to other elements in the same paragraph, such as text or images.
Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right);
Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the
table (with text appearing above and/or below the table). Default indicates that the browser should use its default
alignment.
Last updated 12/7/2011
176
USING DREAMWEAVER
Laying out pages with HTML
When alignment is set to Default, other content is not displayed next to the table. To display a table next to other
content, use Left or Right alignment.
Border Specifies the width, in pixels, of the table’s borders.
If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with
the border and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding
or spacing, set Border to 0, Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set
to 0, select View > Visual Aids > Table Borders.
Class sets a CSS class on the table.
Note: You might need to expand the Table Property inspector to see the following options. To expand the Table Property
inspector, click the expander arrow in the lower-right corner.
Clear Column Widths and Clear Row Heights delete all explicitly specified row height or column width values from the
table.
Convert Table Widths To Pixels and Convert Table Heights To Pixels set the width or height of each column in the
table to its current width in pixels (also sets the width of the whole table to its current width in pixels).
Convert Table Widths To Percent and Convert Table Heights To Percent set the width or height of each column in the
table to its current width expressed as a percentage of the Document window’s width (also sets the width of the whole
table to its current width as a percentage of the Document window’s width).
If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Set cell, row, or column properties
You can use the Property inspector to edit cells and rows in a table.
1 Select the column or row.
2 In the Property inspector (Window > Properties), set the following options:
Horz Specifies the horizontal alignment of the contents of a cell, row, or column. You can align the contents to the left,
right, or center of the cells, or you can indicate that the browser should use its default alignment (usually left for regular
cells and center for header cells).
Vert Specifies the vertical alignment of the contents of a cell, row, or column. You can align the contents to the top,
middle, bottom, or baseline of the cells, or indicate that the browser should use its default alignment (usually middle).
W and H The width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To
specify a percentage, follow the value with a percent symbol (%). To let the browser determine the proper width or
height based on the contents of the cell and the widths and heights of the other columns and rows, leave the field blank
(the default).
By default, a browser chooses a row height and column width to accommodate and the widest image or the longest
line in a column. This is why a column sometimes becomes much wider than the other columns in the table when you
add content to it.
Note: You can specify a height as a percentage of the total table height, but the row may not display at the specified
percentage height in browsers.
Bg The background color for a cell, column, or row, chosen with the color picker.
Merge Cells Combines selected cells, rows, or columns into one cell. You can merge cells only if they form a
rectangular or linear block.
Last updated 12/7/2011
177
USING DREAMWEAVER
Laying out pages with HTML
Split Cell Divides a cell, creating two or more cells. You can split only one cell at a time; this button is disabled if more
than one cell is selected.
No Wrap Prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen
to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the
longest word or widest image in the cell, then expand vertically as necessary to accommodate other contents.)
Header Formats the selected cells as table header cells. The contents of table header cells are bold and centered by
default.
You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages and
back.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell
in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag
rather than changing the attributes of each td tag in the row. When you’re applying the same format to all the cells in a
row, applying the format to the tr tag produces cleaner, more concise HTML code.
3 Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.
Use Expanded Tables mode for easier table editing
Expanded Tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’
borders to make editing easier. This mode enables you to select items in tables or precisely place the insertion point.
For example, you might expand a table to place the insertion point to the left or right of an image, without
inadvertently selecting the image or table cell.
B
A
A. Table in Standard mode B. Table in Expanded tables mode
Note: After you make your selection or place the insertion point, you should return to the Standard mode of Design view
to make your edits. Some visual operations, such as resizing, will not give expected results in Expanded Tables mode.
Switch to Expanded Tables mode
1 If you are working in Code view, select View > Design or View > Code And Design (you cannot switch to Expanded
Tables mode in Code view).
2 Do one of the following:
• Select View > Table Mode > Expanded Tables Mode.
• In the Layout category of the Insert panel, click Expanded Tables Mode.
A bar labeled Expanded Tables Mode appears across the top of the Document window. Dreamweaver adds cell
padding and spacing to all tables on the page and increases the tables’ borders.
Switch out of Expanded Tables mode
❖ Do one of the following:
• Click Exit in the bar labeled Expanded Tables Mode at the top of the Document window.
Last updated 12/7/2011
178
USING DREAMWEAVER
Laying out pages with HTML
• Select View > Table Mode > Standard Mode.
• In the Layout category of the Insert panel, click Standard Mode.
Format tables and cells
You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design
to the table. Before you set table and cell properties, be aware that the order of precedence for formatting is cells, rows,
and tables.
To format the text inside a table cell, use the same procedures you would use to format text outside of a table.
Change the format of a table, row, cell, or column
1 Select a table, cell, row, or column.
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and change
properties as necessary.
3 Change the properties as necessary.
For more information on the options, click the Help icon on the Property inspector.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell
in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag
rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a
row, applying the format to the tr tag produces cleaner, more concise HTML code.
Add or edit accessibility values for a table in Code view
❖ Edit the appropriate attributes in the code.
To quickly locate the tags in the code, click in the table, then select the tag in the tag selector at the bottom
of the Document window.
Add or edit accessibility values for a table in Design view
• To edit the table caption, highlight the caption and type a new caption.
• To edit the caption alignment, place the insertion point in the table caption, right-click (Windows) or Control-click
(Macintosh), then select Edit Tag Code.
• To edit the table summary, select the table, right-click (Windows) or Control-click (Macintosh), then select Edit
Tag Code.
Resizing tables, columns, and rows
Resizing tables
You can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the
table change size proportionately. If a table’s cells have explicit widths or heights specified, resizing the table changes
the visual size of the cells in the Document window but does not change the specified widths and heights of the cells.
You can resize a table by dragging one of its selection handles. Dreamweaver displays the table width, along with a table
header menu, at the top or bottom of the table when the table is selected or the insertion point is in the table.
Last updated 12/7/2011
179
USING DREAMWEAVER
Laying out pages with HTML
Sometimes the column widths set in the HTML code do not match their apparent widths on the screen. When this
happens, you can make the widths consistent. Table and column widths and header menus appear in Dreamweaver to
help you lay out your tables; you can enable or disable the widths and menus as necessary.
Resizing columns and rows
You can change the width of a column or the height of a row in the Property inspector or by dragging the borders of
the column or row. If you have trouble resizing, you can clear the column widths or row heights and start over.
Note: You can also change cell widths and heights directly in the HTML code using Code view.
Dreamweaver displays column widths, along with column header menus, at the tops or bottoms of columns when the
table is selected or the insertion point is in the table; you can enable or disable the column header menus as necessary.
More Help topics
“Working with page code” on page 281
Resize tables, columns, and rows
Resize a table
❖ Select the table.
• To resize the table horizontally, drag the selection handle on the right.
• To resize the table vertically, drag the selection handle on the bottom.
• To resize the table in both dimensions, drag the selection handle at the lower-right corner.
Change a column’s width and keep the overall table width
❖ Drag the right border of the column you want to change.
The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how
the columns will adjust; the overall table width does not change.
Note: In tables with percentage-based widths (not pixels), if you drag the right border of the rightmost column, the entire
table’s width changes, and all of the columns grow wider or narrow proportionately.
Change a column’s width and maintain the size of the other columns
❖ Hold the Shift key and drag the column’s border.
Last updated 12/7/2011
180
USING DREAMWEAVER
Laying out pages with HTML
The width of one column changes. Visual feedback shows you how the columns will adjust; the overall table width
changes to accommodate the column you are resizing.
Change a row’s height visually
❖ Drag the lower border of the row.
Make column widths in code consistent with visual widths
1 Click in a cell.
2 Click the table header menu, then select Make All Widths Consistent.
Dreamweaver resets the width specified in the code to match the visual width.
Clear all set widths or heights in a table
1 Select the table.
2 Do one of the following:
• Select Modify > Table > Clear Cell Widths, or Modify > Table > Clear Cell Heights.
• In the Property inspector, (Window > Properties), click the Clear Row Heights button
Widths button
.
• Click the table header menu, then select
• Clear All
•
Heights or
• Clear All
•
Widths.
Clear a column’s set width
❖ Click in the column, click the column header menu, and select Clear Column Width.
Enable or disable table and column widths and menus
1 Select View > Visual Aids > Table Widths.
Last updated 12/7/2011
or the Clear Column
181
USING DREAMWEAVER
Laying out pages with HTML
2 Right-click (Windows) or Control-click (Macintosh) in the table, then select Table > Table Widths.
Add and remove rows and columns
To add and remove rows and columns, use the Modify > Table or column header menu.
Pressing Tab in the last cell of a table automatically adds another row to the table.
Add a single row or column
❖ Click in a cell and do one of the following:
• Select Modify > Table > Insert Row or Modify > Table > Insert Column.
A row appears above the insertion point or a column appears to the left of the insertion point.
• Click the column header menu, and then select Insert Column Left or Insert Column Right.
Add multiple rows or columns
1 Click in a cell.
2 Select Modify > Table > Insert Rows Or Columns, complete the dialog box, and click OK.
Insert Indicates whether to insert rows or columns.
Number of Rows or Number of Columns The number of rows or columns to insert.
Where Specifies whether the new rows or columns should appear before or after the row or column of the selected cell.
Delete a row or column
❖ Do one of the following:
• Click in a cell within the row or column you want to delete, then select Modify > Table > Delete Row, or Modify >
Table > Delete Column.
• Select a complete row or column, then select Edit > Clear or press Delete.
Add or delete rows or columns using the Property inspector
1 Select the table.
2 In the Property inspector (Windows > Properties), do one of the following:
• To add or delete rows, increase or decrease the Rows value.
• To add or delete columns, increase or decrease the Cols value.
Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.
Split and merge cells
Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells.
Last updated 12/7/2011
182
USING DREAMWEAVER
Laying out pages with HTML
Merge two or more cells in a table
1 Select the cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be merged.
In the following illustration, the selection is not a rectangle, so the cells can’t be merged.
2 Do one of the following:
• Select Modify > Table > Merge Cells.
• In the expanded HTML Property inspector (Window > Properties), click Merge Cells
.
Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you
see all the options.
The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are
applied to the merged cell.
Split a cell
1 Click in the cell and do one of the following:
• Select Modify > Table > Split Cell.
• In the expanded HTML Property inspector (Window > Properties), click Split Cell
.
Note: If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you
see all the options.
2 In the Split Cell dialog box, specify how to split the cell:
Split Cell Into Specifies whether to split the cell into rows or columns.
Number Of Rows/Number Of Columns Specifies how many rows or columns to split the cell into.
Increase or decrease the number of rows or columns spanned by a cell
❖ Do one of the following:
• Select Modify > Table > Increase Row Span, or Modify > Table > Increase Column Span.
• Select Modify > Table > Decrease Row Span, or Modify > Table > Decrease Column Span.
Last updated 12/7/2011
183
USING DREAMWEAVER
Laying out pages with HTML
Copy, paste, and delete cells
You can copy, paste, or delete a single table cell or multiple cells at once, preserving the cells’ formatting.
You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells, the
contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the
cells will be pasted.
Cut or copy table cells
1 Select one or more cells in a contiguous line and in the shape of a rectangle.
In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.
In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.
2 Select Edit > Cut or Edit > Copy.
Note: If you selected an entire row or column and you select Edit > Cut, the entire row or column is removed from the
table (not just the contents of the cells).
Paste table cells
1 Select where you want to paste the cells:
• To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells
on the clipboard. (For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of
cells to replace by pasting.)
• To paste a full row of cells above a particular cell, click in that cell.
• To paste a full column of cells to the left of a particular cell, click in that cell.
Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and paste the cells from
the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the
cells you are pasting.
• To create a new table with the pasted cells, place the insertion point outside of the table.
2 Select Edit > Paste.
Last updated 12/7/2011
184
USING DREAMWEAVER
Laying out pages with HTML
If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are
pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows,
columns, or cells are used to define a new table.
Remove cell content but leave the cells intact
1 Select one or more cells.
Note: Make sure the selection does not consist entirely of complete rows or columns.
2 Select Edit > Clear or press Delete.
Note: If only complete rows or columns are selected when you select Edit > Clear or press Delete, the entire rows or
columns—not just their contents—are removed from the table.
Delete rows or columns that contain merged cells
1 Select the row or column.
2 Select Modify > Table > Delete Row, or Modify > Table > Delete Column.
Nest tables
A nested table is a table inside a cell of another table. You can format a nested table as you would any other table;
however, its width is limited by the width of the cell in which it appears.
1 Click in a cell of the existing table.
2 Select Insert > Table, set the Insert Table options, and click OK.
Sort tables
You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated
table sort based on the contents of two columns.
You cannot sort tables that contain colspan or rowspan attributes—that is, tables that contain merged cells.
1 Select the table or click in any cell.
2 Select Commands > Sort Table, set the options in the dialog box, and click OK.
Sort By Determines which column’s values will be used to sort the table’s rows.
Order Determines whether to sort the column alphabetically or numerically, and whether to sort it in ascending order
(A to Z, lower numbers to higher numbers) or descending order.
When the contents of a column are numbers, select Numerically. An alphabetic sort applied to a list of one- and twodigit numbers results in the numbers being sorted as if they were words (resulting in ordering such as 1, 10, 2, 20, 3,
30) rather than being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30).
Then By/Order Determines the sorting order for a secondary sort on a different column. Specify the secondary-sort
column in the Then By pop-up menu, and the secondary sort order in the Order pop-up menus.
Sort Includes The First Row Specifies that the first row of the table should be included in the sort. If the first row is a
heading that should not be moved, do not select this option.
Sort Header Rows Specifies to sort all the rows in the table’s thead section (if any) using the same criteria as the body
rows. (Note that thead rows remain in the thead section and still appear at the top of the table even after sorting.) For
information about the thead tag, see the Reference panel (select Help > Reference).
Last updated 12/7/2011
185
USING DREAMWEAVER
Laying out pages with HTML
Sort Footer Rows Specifies to sort all the rows in the table’s tfoot section (if any) using the same criteria as the body
rows. (Note that tfoot rows remain in the tfoot section and still appear at the bottom of the table even after sorting.)
For information about the tfoot tag, see the Reference panel (select Help > Reference).
Keep All Row Colors The Same After The Sort Has Been Completed Specifies that table row attributes (such as color)
should remain associated with the same content after the sort. If your table rows are formatted with two alternating
colors, do not select this option to ensure that the sorted table still has alternating-colored rows. If the row attributes
are specific to the content of each row, then select this option to ensure that those attributes remain associated with
the correct rows in the sorted table.
Using Frames
How frames and framesets work
A frame is a region in a browser window that can display an HTML document independent of what’s being displayed
in the rest of the browser window. Frames provide a way to divide a browser window into multiple regions, each of
which can display a different HTML document. In the most common use of frames, one frame displays a document
containing navigation controls, while another frame displays a document with content
A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the
size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset file itself
doesn’t contain HTML content that displays in a browser, except in the noframes section; the frameset file simply
provides information to the browser about how a set of frames should look and what documents should appear in them.
To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant documents
to display in the frames. The frameset file for a site is often named index.html, so that it displays by default if a visitor
doesn’t specify a filename.
Last updated 12/7/2011
186
USING DREAMWEAVER
Laying out pages with HTML
The following example shows a frame layout consisting of three frames: one narrow frame on the side that contains a
navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame that
takes up the rest of the page and contains the main content. Each of these frames displays a separate HTML document.
In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame
navigation bar contains links; clicking one of these links changes the content of the main content frame, but the
contents of the side frame itself remain static. The main content frame on the right displays the appropriate document
for the link the visitor clicks on the left.
A frame is not a file; it’s easy to think of the document that currently appears in a frame as an integral part of the frame,
but the document isn’t actually part of the frame. The frame is a container that holds the document.
Note: A “page” refers either to a single HTML document or to the entire contents of a browser window at a given moment,
even if several HTML documents appear at once. The phrase “a page that uses frames,” for example, usually refers to a
set of frames and the documents that initially appear in those frames.
A site that appears in a browser as a single page comprising three frames actually consists of at least four HTML
documents: the frameset file, plus the three documents containing the content that initially appears in the frames.
When you design a page using framesets in Dreamweaver, you must save each of these four files in order for the page
to work properly in the browser.
For more comprehensive information about Frames, consult Thierry Koblentz’s website at
www.tjkdesign.com/articles/frames/.
Deciding whether to use frames
Adobe discourages the use of frames for web page layout. Some of the disadvantages of using frames include:
• Precise graphical alignment of elements in different frames can be difficult.
• Testing the navigation can be time-consuming.
• The URLs of the individual framed pages don’t appear in browsers, so it can be difficult for a visitor to bookmark
a specific page (unless you provide server code that enables them to load a framed version of a particular page).
Last updated 12/7/2011
187
USING DREAMWEAVER
Laying out pages with HTML
For a full treatment of why you should not use frames, see Gary White’s explanation at
http://apptools.com/rants/framesevil.php.
The most common use of frames, if you do decide to use them, is for navigation. A set of frames often includes one
frame containing a navigation bar and another frame to display the main content pages. Using frames in this way has
a couple of advantages:
• A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
• Each frame has its own scroll bar (if the content is too large to fit in a window), so a visitor can scroll the frames
independently. For example, a visitor who scrolls to the bottom of a long page of content in a frame doesn’t need
to scroll back up to the top to use the navigation bar if the navigation bar is in a different frame.
In many cases, you can create a web page without frames that accomplishes the same goals as a set of frames. For
example, if you want a navigation bar to appear on the left side of your page, you can either replace your page with a
set of frames, or just include the navigation bar on every page in your site. (Dreamweaver helps you create multiple
pages that use the same layout.) The following example shows a page design with a framelike layout that doesn’t use
frames.
Poorly designed sites use frames unnecessarily, such as a frameset that reloads the contents of the navigation frames
every time the visitor clicks a navigation button. When frames are used well (for example, to keep navigation controls
static in one frame while allowing the contents of another frame to change), they can be very useful for a site.
Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so
if you do use frames, always provide a noframes section in your frameset, for visitors who can’t view them. You might
also provide an explicit link to a frameless version of the site.
For more comprehensive information about Frames, consult Thierry Koblentz’s website at
www.tjkdesign.com/articles/frames/.
Last updated 12/7/2011
188
USING DREAMWEAVER
Laying out pages with HTML
Nested framesets
A frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested
framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in
Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or
columns requires a nested frameset.
For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and
two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a tworow frameset, with a two-column frameset nested in the second row.
A
B
A. Main frameset B. Menu frame and content frame are nested within the main frameset.
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t
need to worry about the details of which frames are nested and which are not.
There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer
frameset, or in a separate file of its own. Each predefined frameset in Dreamweaver defines all of its framesets in the
same file.
Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of
nesting is being used. The most likely situation in which an external frameset file would be used in Dreamweaver is
when you use the Open in Frame command to open a frameset file inside a frame; doing this may result in problems
with setting targets for links. It’s generally simplest to keep all framesets defined in a single file.
Work with framesets in the Document window
Dreamweaver enables you to view and edit all of the documents associated with a set of frames in one Document
window. This approach enables you to see approximately how the framed pages will appear in a browser as you edit
them. However, some aspects of this approach can be confusing until you get used to them. In particular, each frame
displays a separate HTML document. Even if the documents are empty, you must save them all before you can preview
them (because the frameset can be accurately previewed only if it contains the URL of a document to display in each
frame).
To ensure that your frameset appears correctly in browsers, follow these general steps:
1 Create your frameset and specify a document to appear in each frame.
Last updated 12/7/2011
189
USING DREAMWEAVER
Laying out pages with HTML
2 Save every file that’s going to appear in a frame. Remember that each frame displays a separate HTML document,
and you must save each document, along with the frameset file.
3 Set the properties for each frame and for the frameset (including naming each frame, setting scrolling and non-
scrolling options).
4 Set the Target property in the Property inspector for all your links so that the linked content appears in the correct area.
Create frames and framesets
There are two ways to create a frameset in Dreamweaver: You can select from several predefined framesets or you can
design it yourself.
Choosing a predefined frameset sets up all the framesets and frames needed to create the layout and is the easiest way to
create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view.
You can also design your own frameset in Dreamweaver by adding “splitters” to the Document window.
Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design
view by selecting View >Visual Aids > Frame Borders.
More Help topics
“Dreamweaver and accessibility” on page 659
Create a predefined frameset and display an existing document in a frame
1 Place the insertion point in a document and do one of the following:
•
Choose Insert > HTML > Frames and select a predefined frameset.
• In the Layout category of the Insert panel, click the drop-down arrow on the Frames button and select a predefined
frameset.
The frameset icons provide a visual representation of each frameset as applied to the current document. The blue area
of a frameset icon represents the current document, and the white areas represent frames that will display other
documents.
2 If you have set up Dreamweaver to prompt you for frame accessibility attributes, select a frame from the pop-up
menu, enter a name for the frame, and click OK. (For visitors who use screen readers, the screen reader will read
this name when it encounters the frame in a page.)
Note: If you click OK without entering a new name, Dreamweaver gives the frame a name that corresponds to its position
(left frame, right frame, and so on) in the frameset.
Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags
or attributes with it.
Select Window > Frames to view a diagram of the frames you are naming.
Create an empty predefined frameset
1 Select File > New.
2 In the New Document dialog box, select the Page from Sample category.
3 Select the Frameset folder in the Sample Folder column.
4 Select a frameset from the Sample Page column and click Create.
Last updated 12/7/2011
190
USING DREAMWEAVER
Laying out pages with HTML
5 If you have activated the frame accessibility attributes in Preferences, the Frame Tag Accessibility Attributes dialog
box appears; complete the dialog box for each frame and click OK.
Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags
or attributes with it.
Create a frameset
❖ Select Modify > Frameset, then select a splitting item (such as Split Frame Left or Split Frame Right) from the
submenu.
Dreamweaver splits the window into frames. If you had an existing document open, it appears in one of the frames.
Split a frame into smaller frames
• To split the frame where the insertion point is, select a splitting item from the Modify > Frameset submenu.
• To split a frame or set of frames vertically or horizontally, drag a frame border from the edge into the middle of the
Design view.
• To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag
(Macintosh) a frame border.
• To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle
of a frame.
To create three frames, start with two frames, then split one of them. It’s not easy to merge two adjacent frames
without editing the frameset code, so changing four frames into three frames is harder than changing two frames into
three frames.
Delete a frame
❖ Drag a frame border off the page or to a border of the parent frame.
If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the
document.
Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that
displays it. If the frameset file has been saved, delete the file.
Resize a frame
• To set approximate sizes for frames, drag frame borders in the Document window’s Design view.
• To specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when the
browser window size doesn’t allow the frames to display at full size, use the Property inspector.
Select frames and framesets
To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change.
You can select a frame or frameset either in the Document window or by using the Frames panel.
Last updated 12/7/2011
191
USING DREAMWEAVER
Laying out pages with HTML
The Frames panel provides a visual representation of the frames within a frameset. It shows the hierarchy of the
frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick
border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.
In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when a
frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line.
Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are
various operations (such as setting frame properties) for which you must select a frame.
Select a frame or frameset in the Frames panel
1 Select Window > Frames.
2 In the Frames panel:
• To select a frame, click the frame. (A selection outline appears around the frame in both the Frames panel and the
Document window’s Design view.)
• To select a frameset, click the border that surrounds the frameset.
Select a frame or frameset in the Document window
• To select a frame, Shift-Alt-click (Windows) or Shift-Option-click (Macintosh) inside a frame in Design view.
• To select a frameset, click one of the frameset’s internal frame borders in Design view. (Frame borders must be
visible to do this; select View >Visual Aids > Frame Borders to make frame borders visible if they aren’t.)
Note: It’s generally easier to select framesets in the Frames panel than in the Document window. For more information,
see the above topics.
Last updated 12/7/2011
192
USING DREAMWEAVER
Laying out pages with HTML
Select a different frame or frameset
• To select the next or previous frame or frameset at the same hierarchical level as the current selection, press Alt+Left
Arrow or Alt+Right Arrow (Windows), or Command+Left Arrow or Command+Right Arrow (Macintosh). Using
these keys, you can cycle through frames and framesets in the order in which they’re defined in the frameset file.
• To select the parent frameset (the frameset that contains the current selection), press Alt+Up Arrow (Windows) or
Command+Up Arrow (Macintosh).
• To select the first child frame or frameset of the currently selected frameset (that is, first in the order in which
they’re defined in the frameset file), press Alt+Down Arrow (Windows) or Command+Down Arrow (Macintosh).
Open a document in a frame
You can specify the initial content of a frame by either inserting new content into an empty document in a frame, or
opening an existing document in a frame.
1 Place the insertion point in a frame.
2 Select File > Open in Frame.
3 Select a document to open in the frame, and click OK (Windows) or Choose (Macintosh).
4 (Optional) To make this document the default document to display in the frame when the frameset is opened in a
browser, save the frameset.
Save frame and frameset files
Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that will
display in the frames. You can save each frameset file and framed document individually, or you can save the frameset
file and all documents appearing in frames at once.
Note: When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame
is given a default filename. For example, the first frameset file is named UntitledFrameset-1, while the first document in
a frame is named UntitledFrame-1.
Save a frameset file
❖ Select the frameset in the Frames panel or the Document window.
• To save the frameset file, select File > Save Frameset.
• To save the frameset file as a new file, select File > Save Frameset As.
Note: If the frameset file has not previously been saved, these two commands are equivalent.
Save a document that appears in a frame
❖ Click in the frame, then select File > Save Frame or File > Save Frame As.
Save all files associated with a set of frames
❖ Select File > Save All Frames.
This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset
file has not yet been saved, a heavy border appears around the frameset (or the unsaved frame) in the Design view, and
you can select a filename.
Last updated 12/7/2011
193
USING DREAMWEAVER
Laying out pages with HTML
Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document
you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document
to be the default, don’t save the frameset file.
View and set frame properties and attributes
Use the Property inspector to view and set most frame properties, including borders, margins, and whether scroll bars
appear in frames. Setting a frame property overrides the setting for that property in a frameset.
You may also want to set some frame attributes, such as the title attribute (which is not the same as the name attribute),
to improve accessibility. You can enable the accessibility authoring option for frames to set attributes when you create
frames, or you can set attributes after inserting a frame. To edit accessibility attributes for a frame, use the Tag
inspector to edit the HTML code directly.
More Help topics
“Dreamweaver and accessibility” on page 659
View or set frame properties
1 Select a frame by doing one of the following:
• Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
• Click a frame in the Frames panel (Window > Frames).
2 In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner to see all of
the frame properties.
3 Set the frame Property inspector options.
Frame Name The name used by a link’s target attribute or by a script to refer to the frame. A frame name must be a
single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with
a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in
JavaScript (such as top or navigator) as frame names.
To make a link change the contents of another frame, you must name the target frame. To make it easier to create
cross-frame links later, name each of your frames when you create it.
Src Specifies the source document to display in the frame. Click the folder icon to browse to and select a file.
Scroll Specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for the
corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that
scroll bars appear only when there is not enough room in a browser window to display the full contents of the current
frame.
No Resize Prevents visitors from dragging the frame borders to resize the frame in a browser.
Note: You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.
Borders Shows or hides the borders of the current frame when it’s viewed in a browser. Selecting a Borders option for
a frame overrides the frameset’s border settings.
Border options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders,
unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have
Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have
Borders set to Default.
Last updated 12/7/2011
194
USING DREAMWEAVER
Laying out pages with HTML
Border Color Sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame,
and overrides the specified border color of the frameset.
Margin Width Sets the width in pixels of the left and right margins (the space between the frame borders and the
content).
Margin Height Sets the height in pixels of the top and bottom margins (the space between the frame borders and the
content).
Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties
dialog box.
To change the background color of a frame, set the background color of the document in the frame in page properties.
Set accessibility values for a frame
1 In the Frames panel (Window > Frames), select a frame by placing the insertion point in one of the frames.
2 Select Modify > Edit Tag |