1. 1. Adobe Dreamweaver CC Help
2. 2. Last updated 2/19/2015 Legal notices Legal notices For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. 14 What's new Last updated 2/19/2015 Click to view full size graphic
22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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