Transcript of Dreamweaver reference
- 1. Adobe Dreamweaver CC Help
- 2. Last updated 2/19/2015 Legal notices Legal notices For legal
notices, see
http://help.adobe.com/en_US/legalnotices/index.html.
- 3. iii Last updated 2/19/2015 Contents Chapter 1: What's new
New features summary . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . .1 Chapter 2: Workspace and workflow Dreamweaver workflow
and workspace . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 24 Customizing the Dreamweaver
workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 34 Working in the Document window . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 43 Using toolbars, inspectors, and context
menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 47 Use the Insert panel . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 49 CSS Designer panel . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 53 Search files based
on filename or content | Mac OS . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 62 Zoom in and out . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 63 Keyboard
shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 64 Optimizing the workspace for visual development . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 CEF
integration . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 69 Chapter 3: Site management About Dreamweaver sites
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 73 About dynamic
sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74 Set up a local version of your site . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 75 Connect to a remote server . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 75 Manage Sites dialog box options . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 84 Set up a testing server . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 86 Version Control and Advanced
settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 88 Import and export Dreamweaver
site settings . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 89 Edit an existing remote website . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 90 Set site preferences for
transferring files . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 91 Chapter 4: File
management Creating and opening documents . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 93 Managing files and folders . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 105 Getting and putting files to and from your server
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 113 Checking in and checking out files . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 117 Synchronizing files . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 125 Comparing files for differences . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 127 Cloaking files and folders in your
Dreamweaver site . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 129 Storing file information in Design Notes . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 132 Testing your Dreamweaver site . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 134 Chapter 5: Layout and design Using visual aids
for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Using
Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 141 Laying out pages with CSS . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 153 Responsive design using fluid grid layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 159
- 4. ivDREAMWEAVER Contents Last updated 2/19/2015 Presenting
content with tables . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Using
jQuery UI widgets in Dreamweaver . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 176 Using jQuery
effects in Dreamweaver . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 177 Displaying
database records . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Creating media queries . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 186 Colors . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 188 Chapter 6: CSS
Understanding Cascading Style Sheets . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 CSS
Designer panel . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 194 Set CSS Styles preferences . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 204 Create a CSS rule . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 205 Set CSS properties . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Edit a
CSS rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 211 Add a property to a CSS rule . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 212 Apply, remove, or rename CSS class styles .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 213 Move/export CSS rules . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 214 Convert inline CSS to a CSS rule . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 215 Link to an external CSS style
sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 216 Edit a CSS style sheet . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 216 Format CSS
code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 217 Disable/Enable CSS . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 218 Inspect CSS in Live view . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 218 Check for cross-browser CSS
rendering issues . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 219 Use Design-Time style sheets . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 221 Working with div tags . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 222 Apply gradients to
background . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 236 CSS3 transition
effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Use Dreamweaver sample style sheets . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 The
CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 240 Chapter 7: Page content and assets Set page properties
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Set
CSS link properties for an entire page . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Set
CSS heading properties for an entire page . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 246 Set title and
encoding properties for a page . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 246 Use a tracing image
to design apage . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 247 Understanding
document encoding . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 247 Select and view
elements in the Document window . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 248 Zoom in and out . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 250 Set download time
and size preferences . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 251 Working with text . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Arabic
and Hebrew text . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
259 Edit in Live View . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 260 Element Quick View . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 270 Set text properties in the
Property inspector . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 274 Spell check a web page . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 277
- 5. vDREAMWEAVER Contents Last updated 2/19/2015 Import tabular
data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
278 Import Microsoft Office documents (Windows only) . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 278 Create a link
to a Word or Excel document . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 279 Use HTML Formatting
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Use
horizontal rules . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 281 Modify font combinations . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 282 Add Edge Web Fonts to the Font list . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 283 Insert dates . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 284 Working with assets . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Creating
and managing a list of favorite assets . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 290 Insert and edit
images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Adding media objects . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 302 Adding video . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 309 Insert HTML5 video . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 314 Inserting SWF
files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
316 Adding web widgets . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 318 Adding Sound . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 319 Insert HTML5 audio . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 321 Automating
tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. 322 About assets and libraries . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 327 Working with library items . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 328 Working with Photoshop and Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 332 Chapter 8: Linking and navigation About linking and
navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 338 Linking . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . 340 Jump menus . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 347 Navigation bars . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 348 Image maps .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 349 Troubleshooting links . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 350 Chapter 9: Previewing Preview and inspect web
pages on multiple devices . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 353 Previewing pages . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 353 Chapter 10: Coding
General information about coding in Dreamweaver . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 358 Setting up your
coding environment . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 362 Setting coding
preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Writing
and editing code . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
371 Collapsing code . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 386 Optimizing and debugging code . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 388 Editing code in Design view . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 393 Working with head content for pages . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 399 Working with server-side includes . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . 403 Managing tag libraries . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 406 Importing custom tags into
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 408
- 6. viDREAMWEAVER Contents Last updated 2/19/2015 Chapter 11:
Javascript Using JavaScript behaviors (general instructions) . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Applying built-in JavaScript behaviors . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Chapter 12: Cross-product Add-Ons . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 425 Cross-application
integration . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 428 Working
with Fireworks and Dreamweaver . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 429 Working with
Flash and Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 434 Working with Adobe
Bridgeand Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 435 Working with Device Central and
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 437 Working with ConnectNow and Dreamweaver . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
438 AIR Extension for Dreamweaver . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
439 Using Dreamweaver with Adobe Online services . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 443 Extract in
Dreamweaver CC . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Import Microsoft Office documents (Windows only) . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 462
Dreamweaver-Business Catalyst integration . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 462 Chapter
13: Templates About Dreamweaver templates . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 465 Recognizing templates and template-based documents .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 469 Creating
a Dreamweaver template . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . 472 Creating
editable regions in templates . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 475 Creating
repeating regions in templates . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 476 Using
optional regions in templates . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Defining editable tag attributes in templates . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Creating a nested template . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 482 Editing, updating, and deleting templates . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
485 Exporting and importing template content . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Applying or removing a template from an existing document . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 490 Editing content in a
template-based document . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 491 Template syntax . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 494 Setting authoring
preferences for templates . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 495 Chapter 14: Mobile and
multiscreen Change page orientation for mobile devices . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
497 Creating web applications for mobile devices . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Packaging web applications as native mobile applications with
PhoneGap Build . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 500 Chapter 15: XML About XML and XSLT . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 505 Performing
XSL transformationson the server . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 511 Performing XSL
transformationson the client . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 528 Missing character
entities for XSLT . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 529 Chapter 16:
Dynamic sites, pages and web forms Understanding web applications .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 532 Set up your computer for
application development . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 539
- 7. viiDREAMWEAVER Contents Last updated 2/19/2015 Database
connections for ColdFusion developers . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 544 Database connections for
ASP developers . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 545 Database connections for PHP
developers . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 552 Troubleshooting database connections
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 554 Removing connection scripts . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 558 Designing dynamic pages . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 559 Dynamic content sources overview
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 561 Defining sources of dynamic content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 565 Adding dynamic content to pages . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 579 Changing dynamic content . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 583 Viewing live data . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 584 Adding custom
server behaviors . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 586 About
building forms . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 596 Using forms to collect information from users . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Building ColdFusion forms . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 599 Enhanced HTML5 support for form elements . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
Creating web forms . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 612 Chapter 17: Building applications visually Building
master and detail pages . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Building search and results pages . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
633 Building a record insert page . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . 638 Building an update record page . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 641 Building a delete record page . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 646 Building pages with advanced data manipulation
objects (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . 653 Building a
registration page . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Building a login page . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . 659 Building a page that only authorized users can access
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661
Securing a folder in your application (ColdFusion) . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 664 Using
ColdFusion components . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665
Chapter 18: Accessibility Dreamweaver and accessibility . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . 671 Chapter 19: Dreamweaver and Creative
Cloud Synchronizing Dreamweaver settings with Creative Cloud . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 675 Chapter 20:
System Requirements System requirements for Dreamweaver . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 684
- 8. 1 Last updated 2/19/2015 Chapter 1: What's new New features
summary The latest updates to the 2014 release of Dreamweaver CC
include integration with Extract to help you build mobile and
desktop sites from a PSD comp directly in Dreamweaver. New Live
Guides make it easier for you to accurately place and rearrange
HTML elements, and the enhanced Live View editing enables real-time
changes. This article introduces these new features and several
other enhancements, and provides links to resources for more help
and learning. Adobe Dreamweaver CC 2014.1.1 (February 2015) New
Welcome screen Are you a first time user of Dreamweaver? Have you
used Dreamweaver and are looking for upskilling your knowledge? Do
you want to know what has changed from the previous version to the
current version? Whether you are a beginner or an experienced user,
or evaluating the new version of Dreamweaver, you can now get all
the essential learning resources right on the Welcome Screen. The
latest update to the Dreamweaver CC 2014 release of Dreamweaver
provides quick access to videos (including new features), hands-on
tutorials, tips and techniques, and more from the Welcome
Screen.
- 9. 2 What's new Last updated 2/19/2015 Note: This new Welcome
Screen is available for users in English locales only. For users in
other locales, the Welcome Screen and New Feature walk-through in
Dreamweaver CC 2014.1 are displayed. Enhancements to Extract panel
Live Guides and Element Quick View icon now appears in Live View
when you drag images from the Extract panel. These visual aids help
you place the image quickly and precisely in the required
position.
- 10. 3 What's new Last updated 2/19/2015 Enhancements to Live
View editing Drag and drop elements You can now move elements in
Live View by dragging the associated tag name. When you hover your
mouse over a tag name, the hand cursor appears indicating that the
element can be dragged. You can drop the dragged element with the
help of Live Guides that visually indicate what the placement of
the element will be after it is dropped. Marquee selection You can
now select text, images, or other elements in a tag by clicking and
dragging anywhere inside a tag (marquee selection). Marquee
selection helps you easily select multiple elements within a tag.
Note: Only those operations that are supported by the browser are
supported for marquee selection in Live View. Element Display
enhancements Element Display now shows the hint text 'Class/ID' to
clearly indicate that a class or ID can be specified. Also, changes
made in Element Display are saved when you click '+'. You can also
press Enter or Return to save changes as in earlier versions of
Dreamweaver. New Code View themes Ten new color themes are added to
Code View: RecognEyes Havenjark Solarized Dark Solarized Light
- 11. 4 What's new Last updated 2/19/2015 Wombat Monaki Schuss
Tango Cool Light Roboticket For more information on Code View
themes, see Set the color theme for Code View. CSS Designer
enhancements This update includes a few changes to the CSS Designer
user interface and a change in the default setting of the Show Set
check box. On launch, the Show Set check box is selected by default
and the changes made to this option will be persistent across
Dreamweaver sessions. For example, if you uncheck this option, the
next Dreamweaver session retains the setting and displays the
option as unchecked. The following are the changes in the user
interface: The CSS Designer panel scrolls while adding a property:
When you click "+" in the Properties section, the panel scrolls so
that the Add Property row comes almost at the center of the
Properties panel. If Properties section is too small, the panel
scrolls to show the Add Property row at the bottom of the section.
Background highlight: When the focus is on the Add New Property
text box, the row is highlighted in grey background. Position of
'+' and '-' buttons: The position of "+" and "-" buttons that
appear on each section in the CSS Designer panel (Source,
Selectors, Media query, and Properties) are now moved to the left
from extreme right to make them more visible. 'Custom' category is
now called 'More'. Remote debugging of Live View You can now
remotely debug your Dreamweaver documents open in Live View using
Google Chrome DevTools. In Google Chrome, you can use port 5471,
which you can activate by performing the following steps: 1 Launch
Dreamweaver by executing the following command: Windows:
-enableRemoteDebugging Mac: open --args -enableRemoteDebugging
Note: Type two hyphens before args 2 In the dialog box that appears
indicating that port 5471 is activated for debugging, click OK.
Dreamweaver launches.
- 12. 5 What's new Last updated 2/19/2015 3 Open the documents
that you want to debug in Live View. 4 To begin debugging, open
Google Chrome and browse to localhost:5471. A list of links to all
open documents in Dreamweaver is displayed. Note: Since the new
Welcome Screen and Extract panel use Chromium Embedded Framework
(CEF), you will also see entries related to these features. You can
now use the Google Chrome DevTools to debug the required documents.
5 To stop debugging and open Dreamweaver in the normal mode, quit
Dreamweaver and launch it again. Other enhancements Changes in
reset preferences workflow Now, when you reset preferences using
the keyboard shortcuts, Dreamweaver creates a backup of the
preferences in the 'Adobe Dreamweaver CC 2014.1 Backups' folder.
This folder is automatically created in the same folder as the
original Dreamweaver preferences folder on Windows and Mac. The
full path of the backup folder is displayed in the reset
preferences dialog box. Change in the view mode of dynamic
documents Dynamic documents such as PHP, CFM, and ASP no longer
open in Code View by default. They open in the same mode
(Code/Live/Split) as the last closed document or the last document
that was in focus. Adobe Dreamweaver CC 2014.1 (October 2014)
- 13. 6 What's new Last updated 2/19/2015 Extract in Dreamweaver
Extract integration with Dreamweaver lets web designers and
developers apply design information and extract web- optimized
assets directly within the coding environment. Extract provides a
complete, self-contained solution for extracting style information
and assets from PSD comps, reducing the need to go back and forth
between Photoshop and Dreamweaver. With the Extract panel in
Dreamweaver, you can extract CSS, images, fonts, colors, gradients,
and measurements, right into your web page. In addition to these
primary Extract features, Dreamweaver also provides the following
unique features: Direct access to your PSD files on Creative Cloud
and to those PSD files that are shared with you in a collaborative
folder Contextual code hinting to easily define fonts, colors, and
gradients in your CSS Drag-and-drop support to create image tags
from PSD layers Paste styles directly into Live View (for example,
CSS Designer and Element Display) Hands-on tutorial Extract a
Photoshop design into code in Dreamweaver (Try-it, 13 min) The
default workspace in Dreamweaver (named as Extract) shows the
Extract panel on the left to get you started quickly. On the first
launch of Dreamweaver, the Extract panel shows a simple tutorial to
help you learn about Extract workflows. You can click Get Started
to begin using Extract.
- 14. 7 What's new Last updated 2/19/2015 For more information on
the Extract workflows in Dreamweaver, see Extract in Dreamweaver
CC. 64-bit architecture The 64-bit version of Dreamweaver is now
available and supports all the features just the same as the 32-bit
version. With this addition, you can now download the following
Dreamweaver builds from the Adobe Creative Cloud application:
Frequently asked questions Will a 64-bit application run on a
32-bit version of Windows? - No Can I install both 32-bit and
64-bit on the same Windows machine? - No How can I check if my
system is running a 32 or a 64-bit version of Dreamweaver? Windows:
Launch Dreamweaver. Open the Task Manager and search for the
Dreamweaver process. If the launched Dreamweaver build is 64-bit,
then the name of the process will be Dreamweaver.exe. If the
launched build is 32-bit, the name of the process name will be
"Dreamweaver.exe *32". Mac: Open Activity Monitor, and go to check
View > Columns > Kind. Search Dreamweaver in Activity Monitor
and notice the Kind column. If Dreamweaver is 64-bit, then Kind
column indicates 64 bit. Installing the Dreamweaver 64-bit version
1 Ensure that your machine is running a 64-bit OS: To check if your
machine is 64-bit, follow the steps described in the articles
below: Windows: http://support.microsoft.com/kb/827218 Mac:
http://support.apple.com/kb/ht3696 2 Download the Dreamweaver
64-bit version from Creative Cloud and install the build.
Enhancements to Live View Live Guides Insert structural elements
precisely Context menu in Live View Changes in Element Display Move
elements in Live View Keyboard navigation in Live View Quick Tag
Editor in Live View Hands-on tutorial How to design, edit, and
preview web pages with new Live View features OS Default install
location Application Preferences folder Windows 32-bit
C:ProgramFilesAdobeAdobeDreamweaver CC 2014.1 %appdata%/Adobe/Adobe
Dreamweaver CC 2014.1 Windows 64-bit
C:ProgramFilesAdobeAdobeDreamweaver CC 2014.1 %appdata%/Adobe/Adobe
Dreamweaver CC 2014.1 Mac 64-bit /Applications/Adobe Dreamweaver CC
2014.1 ~/Library/ApplicationSupport/Adobe/Adobe Dreamweaver CC
2014.1
- 15. 8 What's new Last updated 2/19/2015 (Try-it, 60 min) Live
Guides Live Guides are visual feedback in Live View that indicate
the possible positions where you can insert an element in the
following scenarios: While dragging from the Insert panel While
dragging from the Asset panel Dragging (moving) elements within
Live View. Note: Live Guides are not supported in Fluid Grid
documents. Live Guides appear as you hover the mouse over different
elements on the page before dropping an element. They can appear
above, below, left, or to the right of the element that is hovered
over. Above and Below - Appears while hovering over all types of
elements/tags, except inline tags. When you hover the mouse in the
first (top) 50% of the element, guides appear above the hovered
element. When you hover the mouse in the last (bottom) 50% of the
element, guides appear below the hovered element. Left and Right -
Appears while hovering over inline tags, for example, , , or over
tags that have the 'float property' set. Inserting a structural
element precisely You can use the Element Quick View along with
Live Guides to insert an HTML element more precisely into the
document structure.
- 16. 9 What's new Last updated 2/19/2015 When you pause for a
while before dropping the element, the Element Quick View icon
(>) appears. When you hover your mouse over this icon, the
Element Quick View opens and you can drop the element inside the
Element Quick View. Context menu in Live View You can now cut,
copy, paste, and delete elements in Live View using the right-click
context menu. You can also duplicate elements, or select the parent
tag or child using the context menu in Live View. Note: You can
also use keyboard shortcuts (for example, on Windows, Ctrl+x,
ctrl+c, Ctrl+v, Ctrl + d, and Delete key) in Live View. First,
select an element in Live View to see the Element Display. Then,
right-click within the tag area to see the above context menu
options. Options are functional at the tag level. Changes in
Element Display Now, you can not only apply selectors to an
element, but also can create a selector in the desired CSS source
and assign a media query using Element Display. When you type a
selector that does not exist in any style sheet and press Enter,
the Element Display provides the options to choose a CSS source and
media query. If you do not want to choose a CSS source or a media
query, press Esc to dismiss the options.
- 17. 10 What's new Last updated 2/19/2015 You can also
right-click an applied selector now to go to the corresponding code
(Go To Code option) or to paste any copied styles (Paste Styles
option). Note: Go To Code option shows suboptions if the same
selector is added to multiple media queries. Paste Styles option
shows suboptions if the copied selectors are pseudo or compound
selectors. Move elements in Live View Now, Dreamweaver supports
movement of elements (tag level) in Live View. You can select an
element in Live View, and drag-and-drop it at any other position. 1
Click the element you want to move, and once the Element Display
(blue box around the element) appears, drag the element. When the
'drag' is initialized, the mouse cursor changes indicating that the
element is ready to move. 2 The reference elements (elements with
respect to which you want to place the dragged element) is
highlighted with a blue border. Live Guides (in green) appear to
indicate the possible drop locations with respect to the reference
element. Note: Only static elements can be moved in Live View.
Dynamic content tags such as PHP cannot be moved. When you pause
for a while before dropping the element, the Element Quick View
icon (>) appears. When you hover your mouse over this icon, the
Element Quick View opens and you can drop the element inside the
Element Quick View. Keyboard navigation in Live View Dreamweaver
now supports navigation of page elements using keyboard to
facilitate avid keyboard users and to speed up the web design
process. You can use: The up and down arrow keys to navigate
through the page elements. Keyboard navigation in Live View
facilitates easy access to nested and wrapped elements. The Tab key
to traverse through the selectors in Element Display For more
information, see Keyboard navigation in Live View . Quick Tag
Editor in Live View Pressing Ctrl+T on Windows or Cmd+T on Mac in
Live view now brings up a Quick Tag Editor for the selected
element. Quick Tag Editor has three states: Edit Tag, Wrap Tag, and
Insert HTML. You can toggle between these states using Ctrl/Cmd +
T.
- 18. 11 What's new Last updated 2/19/2015 Changes to Dreamweaver
workspace Changes to Document toolbar The Document toolbar is
modified and made simple to use. Design and Live View options are
merged into a single control (drop-down). The Document Title field
is now moved to the Property Inspector. Inspect and Live Code
buttons are replaced with icons.
- 19. 12 What's new Last updated 2/19/2015 Back, Forward, Refresh
options are grouped with the Address bar and placed at the center
of the Document toolbar. Preview/Debug in Browser, Live View
Options, and File Management icons are grouped together and aligned
at the right of the Document toolbar. Changes to default workspace
Out-of-the-box workspaces that are available with Dreamweaver are
changed and are as follows: Code Design Extract
- 20. 13 What's new Last updated 2/19/2015 The default workspace
now is Extract. This workspace shows the Extract panel on the left
and the web page on the right. On the first launch of Dreamweaver,
the Extract panel displays a simple tutorial to help you learn
about Extract workflows. To begin using Extract, click Get Started.
The default view for HTML documents is now the Split View, split
horizontally to show the Live and Code View. Dynamic files such as
the ones listed below open in full Code View by default. When you
split the view, these documents are shown in Design and Code View.
PHP PHP Template (Example.dwt.php) ASP ASP Template
(Example.dwt.asp) JSP JSP Template (Example.dwt.jsp) CFM CFM
Template (Example.dwt.php) defaultview_html.png
- 21. 14 What's new Last updated 2/19/2015 Click to view full
size graphic
- 22. 15 What's new Last updated 2/19/2015 Tip: To switch to
Design View, click the drop-down list adjacent to 'Live' and click
Design. To change the horizontal split to a vertical split, select
View > Split Vertically. The Live/Design View now appears on the
left. To get the Live/Design View on the right, unselect View >
Live View On Left or Design View On Left. Dreamweaver now remembers
the Live View state that you choose for an HTML document, and then
applies the same view to all HTML documents that you open later.
For example, consider that HTML1 is the document that you open
first. The document view is split with Code and Live View. Suppose
that you change the view of this document to full Live View. Then,
the next document that you open, say HTML2, is displayed in full
Live View. Changes to fluid grid documents Support for Live View
editing New editing capabilities in Live View were introduced in
the previous version of Dreamweaver CC. In this release, these
editing features in Live View are made available for fluid grid
documents too. Editing in Live View speeds up your efforts of
developing a fluid web page since you can edit and preview changes
instantly in the same view. The following features help you edit
fluid grid documents in Live View: Element Display Quick Property
Inspector Live View Property Inspector Insert elements and edit
text directly in Live View You can also now visualize the HTML DOM
structure of a fluid grid document using Element Quick View. Note:
Element Quick View in fluid grid layouts does not let you copy,
paste, duplicate, or rearrange the HTML elements. The user
interface for viewing and editing fluid grid documents has changed
to accommodate the editing features in Live View. When you now
select an element in a fluid grid document, Element Display is
shown along with the other controls such as Hide Elements and Start
A New Row.
- 23. 16 What's new Last updated 2/19/2015 Also, the fluid grid
documents now open directly in Live View. You cannot view or edit
fluid grid documents in Design View any more. For more information
on fluid grid documents, see Responsive design using fluid grid
layouts.Responsive design using fluid grid layouts Changes to
Insert workflow The Insert dialog box for fluid grid documents now
contains a 'position assist'. The position assist lets you position
the inserted element before, after, or nest it within the element
in focus (in Live View). For more information on inserting fluid
grid elements, see Insert fluid grid elements. Change in Manage
Hidden Elements option The Manage Hidden Elements option (eye
button in document toolbar) is moved to the context menu in a fluid
grid document. To Manage hidden elements, right-click on the fluid
grid page, and select "Manage Hidden elements" to see the hidden
elements. To hide these elements, you can click the eye icon in the
HUD.
- 24. 17 What's new Last updated 2/19/2015 Out-of-the-box color
themes for Code View You can now choose from one of the following
readily available color themes for Code View: Classic (default;
same as previous versions of Dreamweaver) Raven Slate Blanche
Geneva
- 25. 18 What's new Last updated 2/19/2015 Use the code coloring
preferences to specify a theme for Code View. You can customize the
theme by choosing different color schemes for backgrounds,
foregrounds, and hidden characters. For each listed document type,
you can customize the colors for different categories of tags and
code elements, such as form-related tags or JavaScript identifiers.
For example, with the Raven theme applied to all document types,
you can choose to have a blue color for form-related tags in only
HTML documents. All custom settings in a theme are saved when you
click Apply and the customized theme is available for use across
Dreamweaver sessions. You can keep the customized code themes
synchronized between your Dreamweaver instances using the Sync
Settings option in Preferences. For more information, see
Synchronizing Dreamweaver settings with Creative Cloud. For more
information, see Set the color theme for Code View Code View to
Live View sync The Code View to Live View sync enables you to
instantly preview changes that you do to the code in Live View.
Unlike previous versions of Dreamweaver, you do not have to click
refresh to preview changes in Live View. You can see the Code View
to Live View sync in action in the following workflows (when the
focus is in Code View): Text operations, such as,
Cut/Copy/paste/Delete, Undo/redo. Moving of elements in Element
Quick View when the focus is in the Code View. Typing in Code View.
Delete/Duplicate/Copy/Paste actions in Element Quick View
(right-click options). Operations in the Property Inspector, such
as, changing text formats - Bold/Italic, Changing Class, ID,
Format, Page properties, and apply fonts. Adding/deleting Classes
or IDs using code hints in Code View.
- 26. 19 What's new Last updated 2/19/2015 Inserting elements,
such as, Div, Image, hyperlink, and structural elements from the
Insert panel into Code View. Adding/editing CSS styles in the
- 27. 20 What's new Last updated 2/19/2015 For detailed
instructions on how to use the Assets panel, see Working with
assets. New starter templates Dreamweaver now includes new,
responsive starter templates that help you get started with your
responsive websites faster. You can choose from one of the
following templates in the New Document dialog box (File > New
> Starter Templates): About page Blog post eCommerce Email
Portfolio
- 28. 21 What's new Last updated 2/19/2015 When you choose a
template and click Create in the New Document dialog box,
Dreamweaver prompts you to save the new document. By saving the
document, you make a copy of the template, which you can later
customize to suit your requirement. Reset preferences on launch
Troubleshooting issues with Dreamweaver sometimes requires you to
delete the preferences folder that contains all the custom
settings. Prior to this release, you had to manually navigate to
the preferences folder on your machine and delete the folder. This
release provides you a one-click option to delete the preferences
using a dialog box: You can open the Reset Preferences dialog box
by holding down the following keyboard shortcuts while launching
Dreamweaver: (Win) Windows key + Ctrl + Shift
- 29. 22 What's new Last updated 2/19/2015 (Mac) Cmd + Option +
Shift Note: Use the reset preferences option judiciously. When you
reset preferences and settings, all custom settings in workspace,
keyboard shortcuts, extensions, and application preferences will be
lost. On Mac, hold down the Cmd + Option + Shift while launching
Dreamweaver (by clicking the Dreamweaver icon in the Dock). On
Windows, perform the following steps: 1 Go to the installation
folder, locate Dreamweaver.exe, and click the file. 2 Hold down the
Windows key + Ctrl + Shift keys and double-click Dreamweaver.exe.
Ensure that you hold down the above mentioned shortcut keys even
when the User Account Control (UAC) dialog box appears. Other
enhancements Changes to sync settings You can now import settings
from your previous version of Dreamweaver that were saved on
Creative Cloud using the Preferences dialog box. All local settings
are overridden by the settings imported from the cloud and are
applied during the next launch of Dreamweaver.
- 30. 23 What's new Last updated 2/19/2015 Also, from this
release onwards, in addition to the settings that were
Synchronizing Dreamweaver settings with Creative Cloud, the
following settings too get synchronized with Creative Cloud: Newly
added code color themes Application bar and Application frame
settings on Mac CSS Designer changes This version of Dreamweaver
includes many improvements to user experience of CSS Designer. The
CSS Designer panel also includes an on-boarding experience that
helps you quickly get started with the workflows. Changes to the
Welcome screen The Site Templates option on the Welcome screen is
now replaced with Starter Templates. You can access Site Templates
in the New Document dialog box (File > New). jQuery version
updates Dreamweaver now includes the updated the jQuery libraries
as follows: jQuery - 1.8.3 to jQuery - 1.11.1 jQuery UI - 1.9.2 to
jQuery UI - 1.10.4 jQuery starter pages have been removed. PhoneGap
update Dreamweaver's direct integration with PhoneGap Build to
package applications is not supported in the latest update to the
2014 release Dreamweaver CC (October 2014), and later. However, you
can directly access the online PhoneGap Build service and use the
latest feature updates to package your web applications as native
mobile applications. For more information, see Using PhoneGap build
with the latest update to the 2014 release of Dreamweaver CC.
- 31. 24 Last updated 2/19/2015 Chapter 2: Workspace and workflow
Dreamweaver workflow and workspace Dreamweaver workflow overview
You can use several approaches to create a website. This is one
approach: Plan and set up your site Determine where the files will
go and examine site requirements, audience profiles, and site
goals. Additionally, consider technical requirements such as user
access, as well as browser, plug-in, and download restrictions.
After youve organized your information and determined a structure,
you can begin creating your site. (See About Dreamweaver sites.)
Organize and manage your site files In the Files panel you can
easily add, delete, and rename files and folders to change the
organization as needed. The Files panel also has many tools for
managing your site, transferring files to and from a remote server,
setting up a Check In/Check Out process to prevent files from being
overwritten, and synchronizing the files on your local and remote
sites. From the Assets panel, you can easily organize the assets in
a site; you can then drag most assets directly from the Assets
panel into a Dreamweaver document. You can also use Dreamweaver to
manage aspects of your Adobe Contribute sites. (See Managing files
and foldersand Managing assets and libraries.) Lay out your web
pages Choose the layout technique that works for you, or use the
Dreamweaver layout options in conjunction with one another to
create your sites look. You can use Dreamweaver Fluid Grid layouts
or default templates to get started. You can create new pages based
on a Dreamweaver template, then update the layout of those pages
automatically when the template changes. If you want to display
multiple elements at once in a browser, you can use frames to lay
out your documents. (See Creating pages with CSS and Laying out
pages with CSS.) Add content to pages Add assets and design
elements such as text, images, rollover images, image maps, colors,
movies, sound, HTML links, jump menus, and more. You can use
built-in page-creation features for such elements as titles and
backgrounds, type directly in the page, or import content from
other documents. Dreamweaver also provides tools for maximizing
website performance and for testing pages to ensure compatibility
with different web browsers. (See Adding content to pages.) Create
pages by hand coding Coding web pages by hand is another approach
to creating pages. Dreamweaver provides easy-to-use visual editing
tools, but it also provides a sophisticated coding environment; you
can use either approach, or both, to create and edit your pages.
(See Working with page code.) Set up a web application for dynamic
content
- 32. 25 Workspace and workflow Last updated 2/19/2015 Many
websites contain dynamic pages that allow visitors to view
information stored in databases, and usually allow some visitors to
add new information and edit information in the databases. To
create such pages, you must first set up a web server and
application server, create or modify a Dreamweaver site, and
connect to a database. (See Preparing to build dynamic sites.)
Create dynamic pages In Dreamweaver, you can define a variety of
sources of dynamic content, including recordsets extracted from
databases, form parameters, and JavaBeans components. To add the
dynamic content to a page, simply drag it on to the page. You can
set your page to display one record or many records at a time,
display more than one page of records, add special links to move
from one page of records to the next (and back), and create record
counters to help users keep track of the records. (See Making pages
dynamic.) Test and publish Testing your pages is an ongoing process
that happens throughout the development cycle. At the end of the
cycle, you publish the site on a server. Many developers also
schedule periodic maintenance to ensure that the site remains
current and functional. (See Getting and putting files to and from
your server.) Workspace layout overview The Dreamweaver workspace
lets you view documents and object properties. The workspace also
places many of the most common operations in toolbars so that you
can quickly make changes to your documents. A Application bar B
Extract panel C Document toolbar D Document window E Workspace
switcher F Panel groups G Live View H Code View I Tag selector
Workspace elements overview The workspace includes the following
elements:
- 33. 26 Workspace and workflow Last updated 2/19/2015 Note:
Dreamweaver provides many other panels, inspectors, and windows. To
open the panels, inspectors, and windows, use the Window menu. The
Welcome screen Lets you open a recent document or create a new
document. From the Welcome screen, you can also learn more about
Dreamweaver by taking a product tour or accessing learn and help
content for users with varying skill levels and read about the new
features in the current and past releases. Welcome Screen lets you
create a new Starter Template too. The Application bar Is across
the top of the application window and contains a workspace
switcher, menus (Windows only), and other application controls. The
Document toolbar Contains buttons that provide options for
different views of the Document window (such as Design view, Live
view, and Code view), various viewing options, and some common
operations such as previewing in a browser. The Standard toolbar To
display the Standard toolbar, select View > Toolbars >
Standard. The toolbar contains buttons for common operations from
the File and Edit menus: New, Open, Browse in Bridge, Save, Save
All, Print Code, Cut, Copy, Paste, Undo, and Redo. The Coding
toolbar (Displayed in Code view only.) Contains buttons that let
you perform many standard coding operations. The Document window
Displays the current document as you create and edit it. The
Property inspector Lets you view and change a variety of properties
for the selected object or text. Each object has different
properties. The Tag selector Located in the Status bar at the
bottom of the Document window. Shows the hierarchy of tags
surrounding the current selection. Click any tag in the hierarchy
to select that tag and all its contents. Panels Help you monitor
and modify your work. Examples include the Insert panel, the CSS
Designer panel, and the Files panel. To expand a panel,
double-click its tab. The Extract panel Lets you upload and view
your PSD files on Creative Cloud. Using this panel, you can extract
CSS, text, images, fonts, colors, gradients, and measurements from
your PSD comps into your document. The Insert panel Contains
buttons for inserting various types of objects, such as images,
tables, and media elements, into a document. Each object is a piece
of HTML code that lets you set various attributes as you insert it.
For example, you can insert a table by clicking the Table button in
the Insert panel. If you prefer, you can insert objects using the
Insert menu instead of the Insert panel. The Files panel Lets you
manage your files and folders, whether they are part of a
Dreamweaver site or on a remote server. The Files panel also lets
you access all the files on your local disk. Document window
overview The Document window shows the current document. To switch
to a document, click its tab. You can select any of the following
views: Live view (View > Live View) Live view displays a more
realistic representation of what your document will look like in a
browser, and lets you interact with the document exactly as you
would in a browser. You can edit HTML elements directly in Live
View and instantly preview your changes in the same view as well.
For more information on editing in Live View, see Edit in Live
View. Design view (View > Design) A design environment for
visual page layout, visual editing, and rapid application
development. In this view, Dreamweaver displays a fully editable,
visual representation of the document, similar to what you would
see when viewing the page in a browser.
- 34. 27 Workspace and workflow Last updated 2/19/2015 Code view
(View > Code) A hand-coding environment for writing and editing
HTML, JavaScript, and any other kind of code. Split Code view (View
> Split Code) A split version of Code view that lets you scroll
to work on different sections of the document at the same time.
Code and Design view (View > Code And Design) Lets you see both
Code view and Design view for the same document in a single window.
Live Code view (View > Live Code) Only available when viewing a
document in Live view. Live Code view displays the actual code that
a browser uses to execute the page, and can dynamically change as
you interact with the page in Live view. Live Code view is not
editable. When a Document window is maximized (the default), tabs
appear at the top of the Document window showing the filenames of
all open documents. Dreamweaver displays an asterisk after the
filename if you have made changes that you havent saved yet.
Dreamweaver also displays the Related Files toolbar below the
documents tab (or below the documents title bar if you are viewing
documents in separate windows). Related documents are documents
associated with the current file, such as CSS files or JavaScript
files. To open one of these related files in the Document window,
click its filename in the Related Files toolbar. Document toolbar
overview The Document toolbar contains buttons that let you toggle
between different views of your document quickly. The toolbar also
contains some common commands and options related to viewing the
document and transferring it between the local and remote sites. A
Code view B Show Live and Code view C Live view D Go to Inspect
mode E Show Live view source in Code view F Refresh G File path and
name H Preview/Debug in browser I Live view options J File
management The following options appear in the Document toolbar:
Code View Displays only the Code view in the Document window. Show
Live and Code Views Splits the Document window between the Code and
the Live/Design views. Design view option is not available for
fluid grid documents. Live View Displays an interactive,
browser-based view of the document. You can also edit HTML elements
in Live View. The drop-down list adjacent to the Live options lets
you switch between Live and Design views. This drop-down list is
not available in fluid grid documents. Preview/Debug in Browser
Allows you to preview or debug your document in a browser. Select a
browser from the pop-up menu. File Management Displays the File
Management pop-up menu. Standard toolbar overview The Standard
toolbar contains buttons for common operations from the File and
Edit menus: New, Open, Browse in Bridge, Save, Save All, Print
Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as
you would use the equivalent menu commands.
- 35. 28 Workspace and workflow Last updated 2/19/2015 Browser
Navigation toolbar overview The Browser Navigation toolbar becomes
active in Live view, and shows you the address of the page youre
looking at in the Document window. Live view acts like a regular
browser, so even if you browse to a site outside of your local site
(for example, http://www.adobe.com), Dreamweaver will load the page
in the Document window. A Browser controls B Address box C Live
View options By default, links are not active in Live view. Having
links non-active lets you select or click link text in the Document
window without being taken to another page. To test links in Live
view, you can enable one-time clicking or continuous clicking by
selecting Follow Links or Follow Links Continuously from the View
options menu to the right of the address box. Coding toolbar
overview The Coding toolbar contains buttons that let you perform
many standard coding operations, such as collapsing and expanding
code selections, highlighting invalid code, applying, and removing
comments, indenting code, and inserting recently used code
snippets. The Coding toolbar appears vertically on the left side of
the Document window, and is only visible when Code view is
displayed. You cannot undock or move the Coding toolbar, but you
can hide it (View > Toolbars > Coding). 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 dont
want to use. To do so, however, you must edit the XML file that
generates the toolbar. For more information, see Extending
Dreamweaver.
- 36. 29 Workspace and workflow Last updated 2/19/2015 Status bar
overview The Status bar at the bottom of the Document window
provides additional information about the document you are
creating. A Tag selector B Mobile size C Tablet size D Desktop size
E Window size Tag selector Shows the hierarchy of tags surrounding
the current selection. Click any tag in the hierarchy to select
that tag and all its contents. Click to select the entire body of
the document. To set the class or ID attributes for a tag in the
tag selector, right-click (Windows) or Control-click (Macintosh)
the tag and select a class or ID from the context menu. Mobile size
Shows a preview of the document in mobile size - 480 X 800 by
default. To change the default size, click Window Size pop-up menu
> Edit Sizes. Tablet size Shows a preview of the document in
tablet size - 768 X 1024 by default. To change the default size,
click Window Size pop-up menu > Edit Sizes. Desktop size Shows a
preview of the document in desktop size - 1000 px width by default.
To change the default size, click Window Size pop-up menu > Edit
Sizes. Window size pop-up menu (Not available in Code view.) Lets
you resize the Document window to predetermined or custom
dimensions. When you change the view size of a page in design or
live view only the dimensions of the view size change. The document
size is unaltered. In addition to predetermined and custom sizes,
Dreamweaver also lists sizes specified in a media query. When you
select a size corresponding to a media query, Dreamweaver uses the
media query to display the page. You can also change the page
orientation to preview the page for mobile devices where the page
layout changes based on how the device is held. Property inspector
overview The Property Inspector lets you examine and edit the most
common properties for the currently selected page element, such as
text or an inserted object. The contents of the Property Inspector
vary depending on the element selected. For example, if you select
an image on your page, the Property Inspector changes to show
properties for the image (such as the file path to the image, the
width and height of the image, the border around the image, if any,
and so on). The Property Inspector is at the lower edge of the
workspace by default, but you can undock it and make it a floating
panel in the workspace.
- 37. 30 Workspace and workflow Last updated 2/19/2015 Insert
panel overview The Insert panel contains buttons for creating and
inserting objects such as tables, images, and links. The buttons
are organized into several categories, which you can switch by
selecting the desired category from the drop-down list at the top.
Some categories have buttons with pop-up menus. When you select an
option from a pop-up menu, it becomes the default action for the
button. For example, if you select Image Placeholder from the Image
buttons pop-up menu, the next time you click the Image button,
Dreamweaver inserts an image placeholder. Anytime you select a new
option from the pop-up menu, the default action for the button
changes. The Insert panel is organized in the following categories:
Common Lets you create and insert the most commonly used elements
such as div tags and objects, such as images, and tables. Structure
Lets you insert structural elements such as div tags, headings,
lists, paragraphs, headers, and footers. Media Lets you insert
media elements such as Edge Animate composition, HTML5 audio and
video, and Flash audio and video. Form Contains buttons for
creating forms and inserting form elements, such as search, month,
and password. jQuery Mobile Contains buttons for building sites
that use jQuery Mobile. jQuery UI Lets you insert jQuery UI
elements such as accordion, sliders, and buttons. Templates Lets
you save the document as a template and mark specific regiions as
editable, optional, repeating, or editable optional regions.
Favorites Lets you group and organize the Insert panel buttons you
use the most in one common place. Files panel overview Use the
Files panel to view and manage the files on your Dreamweaver
site.
- 38. 31 Workspace and workflow Last updated 2/19/2015 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 vieweither your local or remote site that
appears by default in the collapsed panel. The folders in the Files
panel are displayed in different colors based on the view - Local,
Remote, or Testing. Local view Remote Server view
- 39. 32 Workspace and workflow Last updated 2/19/2015 Testing
Server view Repository view The Files panel interacts with the
server at regular intervals to update its content. An error message
is displayed when you try to perform an action in the Files panel
when it is running these auto-updates. To disable auto-updates,
open the Files panel options menu, and deselect Auto-Update in the
View menu. To update the contents of the panel manually, use the
Refresh button in the panel. The current check-out status of files,
however, is updated only when auto-updates are enabled. CSS
Designer CSS Designer panel (Windows > CSS Designer) is a CSS
Property Inspector that lets you 'visually' create CSS styles,
files, and set properties, along with media queries.
- 40. 33 Workspace and workflow Last updated 2/19/2015 The CSS
Designer panel consists of the following panes: Sources Lists all
the CSS style sheets associated with the document. Using this pane,
you can create and attach a CSS to the document, or define styles
within the document. @Media Lists all the media queries in the
source selected in the Sources pane. If you do not select a
specific CSS, this pane displays all the media queries associated
with the document. Selectors Lists all the selectors in the source
selected in the Sources pane. If you also select a media query,
this pane narrows down the list of selectors for that media query.
If no CSS or media queries are selected, this pane displays all the
selectors in the document. When you select Global in the @Media
pane, all the selectors that are not included in a media query of
the selected source are displayed. Properties Displays properties
that you can set for the specified selector. For more information,
see Set properties . CSS Designer is context-sensitive. This means,
for any given context or selected page element, you can view the
associated selectors and properties. Further, when you select a
selector in CSS Designer, the associated source and media queries
are highlighted in the respective panes. For more information, see
CSS Designer panel.
- 41. 34 Workspace and workflow Last updated 2/19/2015 Visual
guides overview Dreamweaver provides several kinds of visual guides
to help you design documents and predict approximately how they
appear in browsers. You can do any of the following: Instantly snap
the Document window to a desired window size to see how the
elements fit on the page. Use a tracing image as the page
background to help you duplicate a design created in an
illustration or image-editing application such as Adobe Photoshop
or Adobe Fireworks. Use rulers and guides to provide a visual cue
for precise positioning and resizing of page elements. Use the grid
for precise positioning and resizing of absolutely positioned
elements (AP elements). Grid marks on the page help you align AP
elements, and when snapping is enabled, AP elements automatically
snap to the closest grid point when moved or resized. (Other
objects, such as images and paragraphs, do not snap to the grid.)
Snapping works regardless of whether the grid is visible. More Help
topics Working in the Document window About Live view Open Related
Files General information about coding in Dreamweaver Preview pages
in Live view Setting coding preferences View and edit head content
Using visual aids for layout Previewing pages in Dreamweaver Insert
code with the Coding toolbar Set window size and connection speed
Zoom in and out Resize the Document window Set download time and
size preferences Manage windows and panels Use the Property
inspector Use the Insert panel Work with files in the Files panel
Using visual aids for layout Customizing the Dreamweaver workspace
Note: The user interface has been simplified in Dreamweaver CC and
later. As a result, you may not find some of the options described
in this article in Dreamweaver CC and later. For more information,
see this article.
- 42. 35 Workspace and workflow Last updated 2/19/2015 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 windows tab to a new location in the group. To
undock (float or untab) a Document window from a group of windows,
drag the windows tab out of the group. Note: In Photoshop you can
also choose Window > Arrange > Float in Window to float a
single Document window, or Window > Arrange > Float All In
Windows to float all of the Document windows at once. See tech note
kb405298 for more information. Note: Dreamweaver does not support
docking and undocking Document windows. Use the Document windows
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 documents 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.
- 43. 36 Workspace and workflow Last updated 2/19/2015 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 cant see the drop zone,
try dragging the mouse to the place where the drop zone should be.
To move a panel, drag it by its tab. To move a panel group, drag
the title bar. A Title bar B Tab C Drop zone 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.
- 44. 37 Workspace and workflow Last updated 2/19/2015 Add and
remove panels If you remove all panels from a dock, the dock
disappears. You can create a dock by moving panels to the right
edge of the workspace until a drop zone appears. To remove a panel,
right-click (Windows) or Control-click (Mac) its tab and then
select Close, or deselect it from the Window menu. To add a panel,
select it from the Window menu and dock it wherever you want.
Manipulate panel groups To move a panel into a group, drag the
panels tab to the h