Dreamweaver CC 2015.1 brings you a breakthrough experience in designing and building websites in Dreamweaver. Creative Cloud Libraries and Adobe Stock can now be accessed from within Dreamweaver to integrate design elements and styles from Adobe desktop and mobile apps, and high-quality images and videos. Collaborative features in Creative Cloud provide a smooth designer-to-developer workflows.
This release also includes several enhancements to responsive web design, Extract, Live view editing, and other enhancement requests received from users like you. This article introduces these new features and enhancements, and provides links to resources for more help and learning.
Integration with Creative Cloud Libraries
With the new support for Creative Cloud Libraries, you can collaborate and share graphics and color themes created in other design tools, such as Photoshop, Illustrator, or mobile apps. You can browse, manage, and access creative assets whenever and wherever you need them, across Dreamweaver projects.
When you insert assets from Creative Cloud Libraries, you can choose to maintain the link between the asset and the source so that your assets are kept updated at all times.
The new CC Libraries panel in Dreamweaver helps you view the assets in your Creative Cloud libraries and insert them in your web pages. You can insert the assets in Live view, or in Code view using code hints.
For detailed information, see Creative Cloud Libraries in Dreamweaver.
Integration with Adobe Stock
Integration with Adobe Stock lets you download royalty free images, vector graphics and videos directly to Creative Cloud Libraries and easily manage and reuse your Adobe Stock content from right within Dreamweaver.
Find the perfect images, graphics and videos from Adobe Stock, to give your website engaging visual appeal for your audiences – as you’re working in Dreamweaver.
Responsive design enhancements
Bootstrap version used in Dreamweaver has been updated to version 3.3.5. As a result, Bootstrap components, snippets, and starter templates are now in version 3.3.5.
jQuery version, too, has been updated to 1.11.3.
In addition to Add Column/Add Row capabilities for Bootstrap documents in Live view, Dreamweaver now also lets you duplicate rows and colums.
You can duplicate a selected row or column by clicking the duplicate icon () that appears at the lower right corner. The entire row or column is duplicated along with its contents.
The Add Row or Add Column option duplicates the row or column with classes, but without the content.
Whether you create a Bootstrap document from the New Document dialog box or from starter templates, the workflow is now seamless. No dialog boxes - Copy Dependent Files and Overwrite Existing Files - are displayed as in previous versions of Dreamweaver.
When you create and save a Bootstrap document in a specific location, the dependent files too are automatically saved in the same location.
Dreamweaver now highlights the media queries associated with the current viewport size so that you can quickly identify them. The highlight is in the form of darker arrows and a dark background for the breakpoint values of the media queries.
When you now click + on the Visual Media Query bar, Dreamweaver does not prompt you to click either max-width or min-width options. Instead, the popup for adding the media query appears immediately.
Also, in the popup, the max-width option is selected by default. A drop-down list is introduced to let you change the option to min-width or min-max.
You can now edit the media query values by double-clicking the breakpoint values in the Visual Media Query bar. When you double-click the breakpoint value, an orange border is displayed and the insertion point appears inside the border.
After entering the new values (in pixels), press Enter/Return to commit the changes, or press Escape to discard them.
The Go To Code option in the right-click context menu of Visual Media Query now displays the code line number making it easy for you to relate to the corresponding code.
Enhancements to Extract
You can now open PSDs with multiple artboards in the Dreamweaver Extract panel to extract assets. Each artboard is displayed as a folder in the layers pane. You can expand or collapse the folder to see or hide its contents.
Double-click "FIT" in the panel header to zoom out of the artboard and fit the PSD into the current view.
When you extract CSS from a PSD file that has the Drop Shadow property, the property is now extracted as box-shadow in CSS.
In many scenarios, you create multiple layer styles in a PSD file that work individually, but cannot work together. Extract checks such cases and provides you suggestions on how to handle these layer styles.
Extract detects the following cases:
- Scenario 1: Multiples instances of any properties that translate into background colors. For example, two Color Overlays or two Gradient Overlays defined in the PSD file.
- Scenario 2: A Color Overlay with an opacity less than 100% is placed above a Gradient Overlay, or the layer is assigned a background color. In such a case, it is difficult to determine the blended resultant color.
- Scenario 3: A Gradient Overlay has an opacity less than 100% and the layer has been assigned a background color. In such a case, too, it is difficult to determine the blended resultant color.
When these cases are detected, Extract displays a warning icon on the layer thumbnail in the Extract panel. The following warning message is displayed in the layer thumbnail popup, and in the CSS for that layer:
"Layer contains multiple layer styles that cannot be represented in CSS. Use the color picker or extract the layer as an image."
Additionally, in cases where a semi-transparent background color overlays another background color (scenario 2 and 3 above), values for all of the background colors are displayed in the CSS. You can then extract the required value.
Enhancements to Live view editing
You can now select rows and columns of a table in Live view with a single click. A new arrow icon has been introduced (similar to that in Design View), which you can click to select a row or a column.
You can now select multiple cells/rows/columns using drag. Click on a cell and drag across multiple cell/row/column to select them.
You can now use the Quick Property Inspector for text in Live view to quickly format, indent, and hyperlink text. The Quick Property Inspector for text appears when you click the sandwich icon for text elements: h1-h6, pre, and p.
- The format option allows you to quickly change the element tag to one of these tags: h1-h6, p, and pre.
- The link option helps you hyperlink the text element.
- The icons for Bold and Italic help you add <strong> and <em> tags to the text element.
- The blockquote icons help you add or remove text indentation. tag is added or removed from the code accordingly.
In Bootstrap documents, the Quick Property Inspector for text also lets you align and transform the text elements.
- Align: Aligns Bootstrap text elements to left, center, right, or justify by applying the corresponding classes.
- Transform: Changes the text casing of an element by applying classes for lowercase, uppercase, or sentence case.
The Quick Property Inspector for images now includes options to customize images in Bootstrap documents.
- Clip to Shape: Click to clip the corners of images to circular or rounded corners, or as a thumbnail image.
- Make image responsive: Click to make images responsive and adapt to various screen sizes.
Adobe provides updates on an on-going basis to keep Dreamweaver up-to-date with the ever-evolving technology. For example, updates to Bootstrap libraries or starter templates.
You can download and install In-App updates automatically or manually. You can also disable In-App updates, or uninstall them and revert Dreamweaver to the state in which it was last installed or updated using the Adobe Creative Cloud desktop app. The Dreamweaver preferences dialog box lets you specify the mode of update, disable, or revert In-App updates.
For more information on in-app updates, see In-app updates.
Testing server - workflow improvements
In the previous release (Dreamweaver CC 2015), automatic pushing of files to testing server was introduced for a seamless editing experience of dynamic documents in Live view. On popular request by users to have the ability to disable this feature, a new preference is now introduced in the Site Setup dialog box.
For detailed information, see Disable auto-push of dynamic files.
Selection-based code collapse
Code collapse for a selected block of code is back again. You can now:
- Collapse code at the tag-level as in the previous release of Dreamweaver, and/or;
- Collapse a portion of code by selecting it.
Click '-' to collapse the code. To expand a collapsed section of code, click '+'.
For more information on collapsing code, see Collapsing code.
CSS Designer enhancements
You can now rearrange selectors in the Selectors pane by dragging them to the required location in the pane.
If you collapse or expand the panes in CSS Designer, the sizes of the panes are remembered within a session. Sources and Media panes stick to the customized sizes until you change their sizes again.
In Bootstrap files, where the styles are defined in Bootstrap CSS files and are read-only, the Properties pane in CSS Designer is disabled.
If you want to modify the styling of your Bootstrap document, create another CSS file to override the existing styles, and then attach it to the document.
Undo/redo specific to active documents
By default, the undo and redo actions affect the currently active document and all the related files, such as the associated CSS files. When you limit the undo actions to the active document, undo/redo will be applied only for the changes made in the file that is currently in focus. For example, if you are in an HTML file, undo/redo actions will affect only the changes you made in the HTML file and not in the related CSS file. To undo/redo any changes you made in a related CSS file, you will have to switch to the CSS file before doing undo/redo.
If the focus is in Live or Design view, then undo/redo will be applied only for those changes that affected the HTML code. For example, consider that you are editing a Bootstrap page in Live view. You edit some text and then resize a media query in the Visual Media Query bar. You can undo only the text edit and not the media query changes as those changes are in a related file and not the HTML file. You can switch to the related CSS file and undo the changes.
Improvements to the DOM panel
You can now copy a tag in the DOM panel of a document and paste it into the DOM panel of another document using the right-click context menu in the panel.
Only the tags copied from the DOM panel can be pasted in another DOM panel. If you are copying a tag from Live view, then it can be pasted only in Live view and not in the DOM panel.
Reset option for new feature guides
New feature guides - Feature Floaters and Contextual Feature Tips - appear automatically during the first launch after you update Dreamweaver. Feature Floater help you explore new features in the new update and Contextual Feature Tips help you discover new workflows and feature enhancements.
During the subsequent launches of Dreameaver, these new feature guide are suppressed and are not displayed by default. If you want to view them again, you can use the Reset option in Dreamweaver preferences.
Update to W3C Validator
|none||Choice of HTML or XML parser is based on Content-Type.|
|xml||XML parser, will not load external entities|
|xmldtd||XML parser, will load external entities|
|html||HTML parser, configuration is based on doctype.|
|html5||HTML parser in the HTML5 mode.|
|html4||HTML parser in the HTML4 strict mode.|
|html4tr||HTML parser in the HTML4 transitional mode.|
As in the previous releases of Dreamweaver, you can still specify the fallback parser that Dreamweaver can pick if it is unable to identify the parser based on the document content type or DTD. Only the available list of parsers has changed with the new validator.
For more information, see Validate documents using W3C Validator.
Support for SVG files in the Assets panel
The Assets panel now lists all the SVG assets in the Dreamweaver site associated with the currently active document. Like any other asset in the Assets panel, you can perform various actions on SVG assets, for example, editing, assigning URLs, and reusing assets across documents and sites.
Change in Zooming options
Zooming in or out in Live view and Design View using the following actions is no longer available in Dreamweaver:
- Press Ctrl and use Mousewheel
- Press Ctrl and use scroll on Trackpad
- Press Cmd and use Mousewheel
- Press Cmd and use scroll on Trackpad
No changes to other ways to zoom in and out of a document: Cmd/Ctrl++ or Cmd/Ctrl+-, and zoom from View > Magnification menu.
Changes in View menu
The Code And Live/Code And Design option is renamed in the View menu to 'Split' and behaves the same way as it does in the Document toolbar.
Faster syncing of Dreamweaver settings with Creative Cloud
With several performance improvements in the sync settings feature, you can now synchronize settings between Dreamweaver instances and Creative Cloud faster than ever.
Deprecated CSS Styles panel and APIs
The older CSS Styles panel is removed from Dreamweaver and as a result, the associated APIs are removed as well.