Feature summary | Dreamweaver CC | 2015 releases

2015 releases of Dreamweaver CC

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.

Adobe Dreamweaver CC 2015.3 release

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.

Adobe Dreamweaver CC 2015.2 (March 2016 release)

DOM panel enhancements

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 DOM elements 

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.
Contiguous selection in DOM panel
Contiguous selection in DOM panel

Non-contiguous selection in DOM panel
Non-contiguous selection in 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.

Edit tags, classes, and IDs within the DOM panel

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 (#).

Editing tags in DOM panel
Editing tags in DOM panel

Editing or adding classes in DOM panel
Editing or adding classes in DOM panel

Editing and adding IDs in DOM panel
Editing and adding IDs in DOM panel

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

Insert elements in DOM panel

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.
Insert options in the DOM panel
Insert options in the DOM panel

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

Visual feedback for child nodes

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.

Child nodes highlighted when parent is selected
Child nodes highlighted when parent is selected

Child node highlighted similar to the parent
Child node highlighted similar to the parent

Security enhancements to prevent Gatekeeper exploit

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.

Confirmation prompt for loading third-party libraries
Confirmation prompt for loading third-party libraries

For detailed information, see Preventing potential Gatekeeper exploit.

CEF integration

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

For more information, see CEF integration.

Visual Media Query enhancements

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.

Specifying units while adding a media query
Specifying units while adding a media query

For more information, see Visual Media Queries.

Enhancements to CC Libraries

Changes to the resampling dialog box

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.

Resampling dialog box in Dreamweaver CC 2015.2
Resampling dialog box in Dreamweaver CC 2015.2

For more information, see Creative Cloud Libraries in Dreamweaver.

Extract web-optimized SVG files from CC Libraries

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.

New starter templates

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.

New Email starter templates in Dreamweaver CC 2015.2
New Email starter templates in Dreamweaver CC 2015.2

Enhancements to Table editing in Live view

New editing options for rows and columns

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.

Editing options for table cells in Live view
Editing options for table cells in Live view

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.

Change in the Welcome screen

The Welcome screen is changed in this version of Dreamweaver:

Welcome screen in Dreamweaver CC 2015.2
Welcome screen in Dreamweaver CC 2015.2

Adobe Dreamweaver CC 2015.1 (November 2015 release)

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. 

CC Libraries panel in Dreamweaver

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.

Searching and purchasing images from Adobe Stock

Responsive design enhancements

Bootstrap enhancements

Support for Bootstrap v3.3.5

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.

Duplicate rows and columns

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.

Märkus.

The Add Row or Add Column option duplicates the row or column with classes, but without the content.

Duplicate row and column option in Bootstrap documents
Duplicate row and column option in Bootstrap documents

Enhancements to Bootstrap document creation workflow

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.

Enhancements to Visual Media Query

Highlight for the current breakpoint values

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.

Active media queries and inactive (highlighted above) media queries
Active media queries and inactive (highlighted above) media queries

Enhancements to add media query workflow

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. 

Changes to add media query

Enhancements to editing of breakpoints

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.

Breakpoint value 768px in editing mode with an orange border
Breakpoint value 768px in editing mode with an orange border

Display of line number in the Go To Code option

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.

Line numbers for code corresponding to Visual Media Queries
Line numbers for code corresponding to Visual Media Queries

Enhancements to Extract

Support for multiple artboards

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.

Support for extracting Drop Shadow

When you extract CSS from a PSD file that has the Drop Shadow property, the property is now extracted as box-shadow in CSS.

Tips for handling unsupported layer styles

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

Enhancements to table editing

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.

  1. Select the table to see the Element Display with the sandwich icon.

  2. Click the sandwich icon to enter into the table formatting mode.

  3. Hover your mouse over the row or column you want to select. Point the mouse to the extreme border of the row or column to see an arrow that indicates that you can now click to select.

  4. Click to select the row or column.

    Selecting a table row in Live view
    Selecting a table row in Live view

    Selecting a table column in Live view

  5. Proceed with editing the row or column as required by using the right-click context menu.

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.

  1. Select the table to see the Element Display with the sandwich icon.

  2. Click the sandwich icon to enter into the table formatting mode.

  3. Drag and select the required rows and columns.

    Selecting multiple cells by dragging
    Selecting multiple cells by dragging

  4. Proceed with editing the row or column as required by using the right-click context menu.

Delete rows or columns using Delete key

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

Quick Property Inspector for text

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.

Quick Property Inspector for text

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

Quick Property Inspector for text in Bootstrap documents
Quick Property Inspector for text in Bootstrap documents

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

Changes to the Quick Property Inspector of images

The Quick Property Inspector for images now includes options to customize images in Bootstrap documents.

Quick Property Inspector for text 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.

In-app updates

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-App updates preferences
In-App updates preferences

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.

Disable option for auto-push of dynamic files
Disable option for 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.
When you select a block of code, the option to collapse the code appears as shown below:
Click '-' to collapse the code

Click '+' to expand the code

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

Rearranging selectors

You can now rearrange selectors in the Selectors pane by dragging them to the required location in the pane.

Rearranging selectors in CSS Designer
Rearranging selectors in CSS Designer

Panes in CSS Designer retain custom sizes

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.

Properties Panel disabled for Bootstrap files

In Bootstrap files, where the styles are defined in Bootstrap CSS files and are read-only, the Properties pane in CSS Designer is disabled.

Märkus.

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

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:

  1. Click Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac).

  2. In the General category, select Limit Undo Actions to the Current Document in the Editing Options section.

    Limiting undo and redo to active document

  3. Click Apply and then Close to close the Preferences dialog box.

  4. Restart Dreamweaver for the changes to take effect.

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.

Märkus.

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.

 

  1. Go to Help > Reset New Feature Guides. The Preferences dialog box appears.

  2. Reset Feature Floaters or Contextual Feature Tips, or both based on your requirement.

  3. Close Preferences and quit Dreamweaver.

  4. Re-launch Dreamweaver. You can now view the new feature guides again.

Update to W3C Validator

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:

Value

Description

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.

W3C Validator preferences

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.

SVG assets listed in the Assets panel
SVG assets listed in the Assets panel

Change in Zooming options

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.

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.

View menu before Dreamweaver CC 2015.1

View menu in Dreamweaver CC 2015.1

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.

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()

 Adobe

Saage abi kiiremini ja hõlpsamalt

Uus kasutaja?