Feature summary | Dreamweaver CC | 2015 releases

Dreamweaver CC 2015.1, 2015.2, and 2015.3 releases bring 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 DOM panel, 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.

This release of Dreamweaver provides a fix for the issue on Windows computers where the computer cannot go to sleep if Dreamweaver is running (wake timer issue). 

For more information, see Computer cannot sleep if Dreamweaver is running | Windows.

With support for multiple selections, editing of tags, classes, and IDs, and insertion of new elements, you can now lay out and design most part of your web page by using just the DOM panel.

Read on to know more about these enhancements to the DOM panel:

• Support for multiple selection of elements
• Edit tags, classes, and IDs within the DOM panel
• Insert elements in DOM panel
• Visual feedback for child nodes

You can now select multiple tags in the DOM panel of a document to simultaneously edit or perform other operations on multiple tags.

• For a contiguous selection, hold down the Shift key and click the tags in the DOM panel.
• For a non-contiguous selection, hold down the Ctrl key and click the tags in the DOM panel.

When you select multiple elements in the DOM panel:

• Property Inspector, and CSS Designer are disabled.
• Tag hierarchy shown at the bottom of the page is cleared.
• The insertion point in Code view becomes inactive.

You can now edit tags, classes, and IDs by double-clicking them in the DOM panel. You can also add additional classes or IDs by separating them with a space. For tags that are not associated with a class or ID, you can type the name of the class or ID after double-clicking the tag.

Code hints appear as you begin typing the tag, class, or ID name. To narrow down the hints to classes, begin typing with a dot. To see only the IDs in the hints, begin typing with a hash (#).

To remove a tag, right-click the tag in the DOM panel and click Remove Tag.

You can now insert new elements into your web page using the DOM panel in one of the following ways:

• Press the Spacebar or click the insert icon adjacent to the required element in the DOM panel. In the pop-up that appears, click one of the options. To wrap multiple elements with a tag, select the required elements and then choose Wrap Tag from the insert options.

• Click the required element in the Insert panel and drag it to the DOM panel. Live Guides appear to indicate where the element will be inserted. Drop the element at the required location.

When you insert tags using the DOM panel, default (placeholder) text and required attributes for the tags are also inserted:

• When you insert any of the following tags and commit changes, default text is inserted in Code, Live, and Design view:
  div, header, nav, aside, article, section, footer, h1-h6, and hgroup
• When you insert a table tag and commit the changes, a 3X3 table is inserted.
• When you insert an embed or img tag and commit the changes, the Select File dialog box appears and prompts you to select an appropriate file.
• When you insert a meta tag and commit the changes, the following code is added in Code view: <meta name="" content="">
• When you insert a figure tag and commit the changes, a figure tag with nested figcaption is inserted.
• When you insert a ul or an ol tag and commit the changes, an ol/ul tag with nested li tag is inserted.

When a node is selected in the DOM panel, it's child's nodes are shown in light blue.

If child nodes are explicitly selected, the light blue highlight is not displayed.

Gatekeeper is a built-in malware detection feature in Mac OS X 10.7 and later. This feature checks for valid Developer ID signatures in apps before they are installed on Mac. But, Gatekeeper does not detect or block apps that are dynamically loaded from within apps that have valid signatures. If you purchase Dreamweaver from unauthorized sources, this shortcoming in Gatekeeper can be exploited to introduce malicious plug-ins in the Dreamweaver install package. 

To prevent any potential exploit, Dreamweaver now prompts you to confirm if you want to load third-party plug-ins if it is installed in a location other than /Applications.

For detailed information, see Preventing potential Gatekeeper exploit.

Dreamweaver is now integrated with CEF3 2357. Live view can now render CSS3 3D transitions,
animations and transformations.

For more information, see CEF integration.

You will now be able to select a unit - px, em, or rem - while adding media queries using the Visual Media Query bar. When you specify a value in one unit, and then change the unit, the value is automatically converted to the newly selected unit.

For more information, see Visual Media Queries.

The UI label, "Resize to", in the Image optimization dialog box has been changed to "Resample to".

Also, when you are sampling an image from the CC Libraries panel, a spinner appears on the image until the image is completely sampled.

For more information, see Creative Cloud Libraries in Dreamweaver.

If you have saved licensed, Adobe Stock images in your Creative Cloud Libraries, you can extract them as web-optimized SVG files in your Dreamweaver web pages. When you drag the images from the CC Libraries panel into your web pages, they are inserted as SVG files by default.

If you want to customize the properties of SVG files, you can edit the preferences in options.json file.

For more information, see Extract web-optimized SVG files from CC Libraries.

Three new email templates have been added in this build - Email-Fluid, Email-Hybrid, Email-Responsive.

To access the templates, go to File > New > Starter Templates > Email Templates.

The following editing options are now available for tables in Live view:

• Delete using Delete/Backspace keys.
• Cut using the context menu, Edit menu, or keyboard shortcut.
• Copy using the context menu, Edit menu, or keyboard shortcut.
• Paste using the context menu, Edit menu, or keyboard shortcut.
• Copy and replace other rows or columns using Replace Selected Cells option in the context menu.

To see these options, enter into the table formatting mode by selecting the table and clicking the sandwich icon in Element Display. Then, select the required cell(s) and right-click.

You can now navigate between the cells of a table in Live view using the left and right arrow keys. Click a cell in the table and press the left arrow key to go to the previous cell and the right arrow key to go to next table cell.

The Welcome screen is changed in this version of Dreamweaver:

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

• Bootstrap enhancements
• Enhancements to Visual Media Query

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.

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.

• Highlight for the current breakpoint values
• Enhancements to add media query workflow
• Enhancements to editing of breakpoints

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.

• Support for multiple artboards
• Support for extracting Drop Shadow
• Tips for handling unsupported layer styles

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.

To zoom in to a specific artboard, simply click the artboard name.

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 table editing
• Quick Property Inspector for text
• Changes to Quick Property Inspector of images

Select row or columns with a single click

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.

Drag-select multiple cells

You can now select multiple cells/rows/columns using drag. Click on a cell and drag across multiple cell/row/column to select them.

Delete rows or columns using Delete key

You can now delete rows or columns by selecting them and pressing the Delete/Backspace key.

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.

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.

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.

• Rearranging selectors
  
• Panes in CSS Designer retain custom sizes
• Properties panel disabled for Bootstrap files
• Deprecated APIs

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.

Undo and redo actions can now be limited to active documents only.

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.

To limit undo and redo actions to the current document, perform the following steps:

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.

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.

Dreamweaver has now been updated to use the new validator service for HTML5 from W3C: https://validator.w3.org/nu/. The older validator service, validator.w3.org, is obsolete now.

The new validator service supports only the following parsers:

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.

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.

Zooming in or out in Live view and Design View using the following actions is no longer available in Dreamweaver:

Windows:

• Press Ctrl and use Mousewheel
• Press Ctrl and use scroll on Trackpad

Mac:

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

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.

With several performance improvements in the sync settings feature, you can now synchronize settings between Dreamweaver instances and Creative Cloud faster than ever.  

The older CSS Styles panel is removed from Dreamweaver and as a result, the associated APIs are removed as well.

The following basic APIs are still available:

• dreamweaver.cssRuleTracker.newRule()

• dreamweaver.cssStylePalette.getStyles()

• dreamweaver.cssStylePalette.editStyleSheet()

• dreamweaver.cssStylePalette.attachStyleSheet()

• dreamweaver.cssStylePalette.getMediaType()

• dreamweaver.cssStylePalette.setMediaType()

• dreamweaver.cssStylePalette.getDisplayStyles()

• dreamweaver.cssStylePalette.setDisplayStyles()

• dreamweaver.cssStylePalette.newStyle()

The following API’s are not supported going forward:

• dreamweaver.cssRuleTracker.editSelectedRule()

• dreamweaver.cssRuleTracker.canEditSelectedRule()

• dreamweaver.cssStylePalette.getSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.renameSelectedStyle()

• dreamweaver.cssStylePalette.applySelectedStyle()

• dreamweaver.cssStylePalette.duplicateSelectedStyle()

• dreamweaver.cssStylePalette.deleteSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.canRenameSelectedStyle()

• dreamweaver.cssStylePalette.canDuplicateSelectedStyle()

• dreamweaver.cssStylePalette.canDeleteSelectedStyle()

• dreamweaver.cssStylePalette.canApplySelectedStyle()

• dreamweaver.canDisableSelectedStyle()

• dreamweaver.canEnableAllDisabled()

• dreamweaver.canDeleteAllDisabled()

• dreamweaver.getSelectedStyleIsDisabled()

• dreamweaver.setSelectedStyleIsDisabled()

• dreamweaver.enableAllDisabled()

• dreamweaver.deleteAllDisabled()