New features summary

The 2015 release of Dreamweaver CC focuses on responsive design, improvements to code editing features, preview of web pages on devices, and batch extract of web-optimized images with multiple resolutions from Photoshop comps. Integration with the Bootstrap framework helps you build mobile-first, responsive websites. Visual Media Queries further complement the responsive web designing experience by enabling you to visualize and modify your design at various breakpoints. 

This release also includes several enhancements to editing features in Live view and CSS Designer. This article introduces these new features and enhancements, and provides links to resources for more help and learning.

Dreamweaver now lets you test your production-ready web pages simultaneously on multiple devices. You can see how your web page reflows in various form factors and also test interactive features on your pages. All these without having to install any mobile app or having to physically connect the devices to your desktop! Simply scan the auto generated QR code with your devices and preview your web pages on the devices.

Live inspect, when triggered on desktop, reflects on all connected devices and helps you inspect various elements and tweak the design as required.

For detailed information, see Preview and inspect web pages on multiple devices.

Visual Media Queries

Visual Media Query bars are a visual representation of the media queries present in a page. These bars help you visualize your web page at different breakpoints and how different components of your web page reflow in different viewports. While you view your page in different viewports, you can make design changes that are specific to a viewport without affecting the page design in other viewports.

Visual Media Query consists of three bars as horizontal rows, each representing a category of media query:

•  Green: Media queries with max-width conditions
•  Blue : Media queries with both min-width and max-width conditions
•  Purple : Media queries with min-width conditions

For more information, see Visual Media Queries.

Support for linting code

With this new version of Dreamweaver, you can now debug your code for common errors using linting. Linting is the process of analyzing code to flag potential errors or suspicious usage of code. Dreamweaver can lint HTML, CSS, and JavaScript files when they are loaded, saved, or edited. The errors and warnings are then listed in the new Output panel.

For more information, see Lint code.

Support for Emmet

Are you an avid developer who types several lines of code in Dreamweaver? Save your time by using Emmet abbreviations to code. Easy to remember and type, these abbeviations expand into full-fledged code in Code View when you press the Tab key.

For detailed information, see Insert code using Emmet.

Preview in Code view

If you are working in Split view, you can see any changes to images or colors instantly in Live or Design view. But, when you prefer to work only in Code view, images are just filenames, which tend to be unintuitive most often. Colors (unless predefined colors are used), too, are only a set of obscure set of numbers. With this version of Dreamweaver, you can quickly preview images and colors right within Code view. This feature helps you make a visual connection between the image filenames and the color formats with the actual image or color they represent. As a result, you can take design decisions faster and cut down the development time significantly.

For more information, see Preview images and colors in Code view.

The Code view also displays an error preview. The line number of the erroneous code is highlighted in red. When you hover your mouse over the number, a brief description of the error is displayed.

Note: Only the first error in the line is displayed. If the line contains only a warning, the description of the warning is displayed. If the line contains a warning and an error, only the error description is displayed.

New code snippets

Snippets are portions of code that you can reuse repeatedly in your projects. This release of Dreamweaver provides new and updated code snippets:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript Snippets (updated)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

For information on using code snippets, see Work with code snippets.

Also, you can now keep the code snippets up-to-date across your Dreamweaver installations using the cloud sync feature. For information on synchronizing code snippets with Creative Cloud and your other Dreamweaver installation, see Synchronizing Dreamweaver settings with Creative Cloud.

Bootstrap integration

Bootstrap is the most popular, free, HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. The framework includes responsive CSS and HTML templates for buttons, tables, navigation, image carousels, and other elements that you can use on your web page. A few optional JavaScript plug-ins too are available, which enable developers with even basic coding knowledge to develop great responsive websites.

Dreamweaver lets you create Bootstrap documents and also edit existing web pages created using Bootstrap. You can begin designing your Bootstrap website using one of the Bootstrap starter templates that you can choose from the New Document dialog box (Starter Templates > Bootstrap Templates). 

• Bootstrap-Agency
  
• Bootstrap-eCommerce
• Bootstrap-Portfolio
• Bootstrap-Product
• Bootstrap-Real Estate
• Bootstrap-Resume
  

You can also create a custom Bootstrap document from the New Document dialog box (New Document > Bootstrap). Then, build the website brick-by-brick using Bootstrap components such as accordions and carousels using the Insert panel in Dreamweaver. Or, if you have Photoshop comps, use Extract to bring in images, fonts, styles, text, and more into your Bootstrap document.

Whether it is a fully designed Bootstrap file or a work-in-progress design, you can edit them in Dreamweaver to not only edit code, but also use visual editing features such as Live View editing, visual CSS designer, Visual Media Queries, and Extract to make design changes. 

For detailed information, see Working with Bootstrap files.

Support for editing tables in Live view

You can edit tables in Live view easily and quickly using one or a combination of the following options:

For more information, see Resize tables and Format tables and cells.

New menus in Live view

The editing capabilites in Live view have now become better with the following menus available in Live view:

• Modify
• Format
• Commands
• Site
• 'Paste Special' option in Edit and context menu

Support for jQuery UI elements in Live view

Using the Insert panel, you can now directly insert jQuery widgets in Live view. Drag the required element from the Insert panel on to Live view and hold your mouse to use one of the following features to insert:

• Live Guides: These guides appear as you hover over the elements in Live view after dragging the required element from the Insert panel. Using Live Guides, you can insert elements at the top or bottom, or to the left or right of an element in focus.

• DOM icon: The DOM icon appears when you pause for a brief while when the Live Guides appear. Click the icon to view the DOM structure in a pop-up and drop the element at a precise location in the document structure.

• Position Assist: Position Assist helps you position the element before, after, or nest within the element in focus (in Live view).

For more information, see Insert elements directly in Live view.

DOM panel

Element Quick View is now changed to DOM panel (Windows > DOM). The DOM panel provides all the functionalities that Element Quick View provided and more. This panel is available in all workspaces and is persistent, which means, you can open two documents, open, and access their DOM panels simultaneously.

Using the DOM panel, you can:

• Drag elements from the Insert panel to insert them precisely in the document structure.
• Copy, paste, duplicate, move, or delete structural elements in the document.
• View any element on the page in context with the document structure - the element in focus is highlighted in the DOM panel.

For detailed information on using the DOM panel and editing the HTML structure using the panel, see DOM panel.

SVG code hints in HTML documents

Code hints for all SVG elements and attributes are now supported in HTML documents. Using these code hints, you can now add SVG elements in Code view of HTML documents just like you add in an SVG document.

Technology Previews

Starting with this release, the Dreamweaver team provides previews of certain features to gather customer feedback. Based on the feedback, these features will be improved upon further and included as core features of Dreamweaver. You can access such features from the Technology Previews category of the Preferences dialog box.

The preview feature in this release is Code Highlighting. This feature highlights all occurences of any selected text in Code view.

To use this feature, perform the following steps:

You can navigate between the highlighted text using the following keyboard shortcuts:

• Select the next occurrence: F3 (Win); Cmd+G (Mac)
• Select the previous occurrence: Shift+F3 (Win); Cmd+Shift+G (Mac)

Custom preview in Code view using ShowPreview API

With this release of Dreamweaver, you can generate a custom preview popup that gets displayed when you hover your mouse over the code in Code view. To implement customized previews, you can use the new API, showPreview, along with the existing mm:browsercontrol API. For example, you can use these APIs to display a preview of all the parameters of a JavaScript function when you hover your mouse over the name of the function.

For more information, see Dreamweaver API reference: Code view functions.

Code folding

In previous versions of Dreamweaver, you had to select code blocks in Code view and then collapse them. In this version and later, you can collapse code blocks by simply hovering over the line numbers and clicking the triangle that appears.

Code folding (collapsing) is available in HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML, and SVG files and is based on tag blocks.

The Copy, Cut, Paste, and drag-and-drop actions retain the code folding state. For example, when you copy a code block that is collapsed, the Paste action pastes the copied text as a collapsed block.

In HTML files, unlike the earlier code collapse functionality, the collapsed content now contains the closing tag and is rendered differently. Also, the number of characters displayed in a collapsed code block is now increased. This helps you to preview the initial attributes, if any.

For detailed information, see Collapse code.

Extract enhancements

• Extract for devices
• Support for % units

Extract for devices

Devices not only vary in sizes, but also in resolutions. Your plan for a responsive web design must account for multiple resolution versions of images that are rendered appropriately on devices. However, it can be a daunting task to create so many different resolution versions for all the images in your project.

Extract in Dreamweaver eases up this task to a large extent. While extracting an image from your Photoshop comp in the 2015 release of Dreamweaver, you can choose to extract different resolution versions of that image too. The image in Photoshop is automatically scaled in different, predefined resolutions during extraction.

You can then call these images in JavaScript or media queries to display them based on the device they are viewed upon. For example, for high density retina display, you can use the 2X version of the image. 

For more information, see Extract images from PSD files.

Support for % units

In the Extract panel, you can now view the width and height of images in % values in addition to pixels. You can also view the measurements in %.

When you click an asset in the Extract panel, the pop-up that appears provides you an option to switch between pixels and %. The unit you select in this pop-up is retained when you view measurements between assets.

Enhancements to Live view editing

Nested Insert in Live View

Now, you can insert elements within other elements in Live view. When you drag elements from the Insert panel, Asset panel, or within Live view, and hover over different elements on the page, you will notice the visual feedback for nesting elements (along with before and after guides).

• Before/After guides: When you hover over top and bottom 30% of the element.
• Nesting visual feedback: When you hover over the middle 40% of the element.

Editing Selectors directly in Element Display

You can now simply click the name of the Selector in Element Display to edit it. You can commit the changes by clicking anywhere on the page.

Coding toolbar changes

The following options in the Coding toolbar related to collapsing code have been removed:

• Collapse Full Tag
• Collapse Selection

Note: These options have been removed from the right-click context menu and the Edit menu as well.   You can now collapse code by hovering your mouse over the line number and clicking the triangle that appears.   Also, the following options are now not available for HTML, CSS, and JS files.

• Highlight Invalid Code
• Syntax Error Alerts in Info Bar

You can now use linting to find errors in the code and the Output panel displays the linting results.

CSS Designer improvements

• All and Current modes
• Hints for the property values
• Color coding for media queries
• Other changes

All and Current modes

CSS Designer now provides two different modes of viewing and editing CSS properties:

• All: All the CSS, media queries, and selectors in the current document are listed in this mode. This mode is not sensitive to the selection in Design or Live view.

This mode is optimal if you want to create CSS, media queries, or selectors.

• Current: Computed styles for any element selected in Design or Live view are listed in this mode. In a CSS file, if the focus is on a selector, this mode displays the properties of that selector.

Hints for the property values

Dreamweaver now displays code hints in CSS Designer, similar to Code view, for setting new properties.

Color coding for media queries

Media queries in the CSS Designer panel are now color coded to match Visual Media Queries.

•  Green: Media queries with max-width conditions
•  Blue : Media queries with both min-width and max-width conditions
•  Purple : Media queries with min-width conditions

Other changes

• Show Set option: The Show Set check box in the Properties section is now selected by default when you first launch Dreamweaver. Any change to this option (select or unselect) is persistent in all the subsequent Dreamweaver sessions.

• The panel scrolls to display Add Property at the center: When you click + in the Properties section, the section scrolls so that the Add Property row is displayed at the center of the panel. If Properties section is too small, add property row is displayed at the bottom of the panel.

• Background highlighting while adding new property: When the focus is on the Add New Property text box, the row is highlighted in grey background.

• Change in the position of + and - buttons: + and - buttons that appear in each pane in the CSS Designer panel are moved from extreme right to extereme left to make them more visible.

• Custom category is renamed: The category name for Custom properties is changed to More.

Testing server workflow changes

The testing server workflow improvements in this release aim to make editing of documents with server-side code in Live view easy and seamless.

Changes in server setup

Unlike the previous versions of Dreamweaver, you can now designate a specific server as either a testing server or a remote server, and not both. Check boxes in the user interface of server setup are replaced with radio buttons to enforce the specification of servers.

If you open a site or import settings of a site created in previous versions of Dreamweaver and if the site has a single server specified as both testing and remote server, a duplicate entry of the server is created. Then, one is marked as remote (suffixed with _remote) and the other is marked as testing (suffixed with _testing) server.

Automatic pushing of dynamic files

Dreamweaver now automatically syncs dynamic documents to your testing server when you open, create, or save changes made to dynamic documents. Dreamweaver no longer displays "Update Testing Server" or "Push Dependent Files" dialog boxes for testing server workflows.

For more information, see Automatic pushing of dynamic files.

Changes to Business Catalyst workflow

Business Catalyst extension is retired and will not be available for use with Dreamweaver CC 2015 release and later. Dreamweaver CC 2014.1.1 is the last release that is compatible with the Business Catalyst extension.

To use Business Catalyst with Dreamweaver CC 2015 release and later, use the SFTP connection option in Dreamweaver. For more information see the Business Catalyst documentation.

Here's the official announcement on this change on the Business Catalyst website. 

Other changes

• Insert panel is reorganized to group all options in Common, Layout ,and Media categories into a more logical category - HTML.

• Mini tour videos and the link to launch them from Help menu are removed. This option is not available for non-English locales too.

• The options present in the document bar drop-down at the bottom of a page are cleaned up - only Orientation, Full Size, and Edit Sizes options are available now.