The new 2014 release of Dreamweaver CC includes several enhancements to Live View and CSS Designer to help you create and update web and mobile content easily. The new Element Quick View feature helps you to quickly view, navigate, and edit your HTML markup.
This article introduces these new features and several other enhancements, and provides links to resources for more help and learning.
Review the markup in your document using the new Element Quick View, which renders an interactive HTML tree for both static and dynamic content. Modify your static content structure right within the HTML tree.
Element Quick View (View > Element Quick View) is introduced to help speed up the development process. In earlier versions of Dreamweaver, you highlighted HTML elements in Live View, switched to code view and edited the elements. After editing, you again switched back to Live View to preview the changes. Now, with Element Quick View, you can see all the elements in your page in a single, easy-to-read view and edit static content.
For more information, see Element Quick View.
Inspect and change any of the HTML elements' properties right in Live View and see how they look without refreshing anything.
Live View now displays Quick Property Inspector for HTML elements in your pages. Based on the HTML element that you select, the Quick Property Inspector lets you edit attributes or text directly in Live View.
For more information, see Quick View Property Inspector.
With the new Element Display, you can now associate HTML elements with classes and IDs directly in Live View. The Element Display hints you with the available classes and IDs to help you quickly view and choose the required option.
For more information, see Associate HTML elements with classes and IDs.
You can now edit text directly in Live View and preview the changes without having to switch between different views.
Double-click the text element in Live View to enter the editing mode. For more information, see Edit text directly in Live View.
The Property Inspector is now made available in Live View so that you can quickly make edits to your page without switching to Design or Code view.
For more information, see Live View Property Inspector.
In this release, you can insert HTML elements directly into the Live View using the Insert panel. The elements are inserted in real time without any need to switch modes. You can also preview your changes right away.
For more information, see Insert elements directly in Live View.
A tabbed control that helps you set all the four border properties in an easy and intuitive way.
For more information, see Set border properties.
You can now copy styles from one selector and paste into another. You can copy all styles or copy only specific category of styles such as Layout, Text, and Border.
Right-click a selector and choose from the available options:
Dreamweaver now includes quick-edit text boxes in which you can specify the shorthand code for properties such as margin, padding, border, and border-radius. This change has been made for users who prefer specifying code to using mouse/keyboard for specifying properties.
Earlier, you clicked + in the Properties pane of the CSS Designer to add ‘Other’ (or custom) properties. Now, a set of text boxes - property name and value - are made readily available at the end of the Properties list. These text boxes let you directly type in the property name and its value without having to click +.
To add additional rows of custom properties, press Tab.
The name of the ‘other’ property group is changed to ‘Custom’.
You can now add or delete CSS selectors and properties using keyboard shortcuts. You can also navigate between the property groups in the Properties pane.
CTRL + Alt +[Shift =]
Adds Selector (If control is in the selector section)
CTRL + Alt+ S
Add Selector (If control is anywhere in the application)
CTRL + Alt +[Shift =]
Adds Property (If control is in the property section)
CTRL + Alt+ P
Adds Property (If control is anywhere in the application)
Select + Delete
Deletes selector, if selector is selected
CTRL + Alt + (PgUp/PgDn)
Jump between section - while in the properties subpanel
With this release, Dreamweaver provides upto three (or fewer) rule hints while you add a selector. You can make it more specific or less specific using up/down arrow key.
Earlier, when you clicked Background or Other category at the top of the Properties pane in CSS Designer, these categories were made ‘visible’ in the pane. The categories were not actually displayed at the top of the pane.
Now, the Background and Other categories (renamed to Custom) are displayed at the top of the pane when you click them.
The 2014 release of Dreamweaver CC lets you connect to your publishing servers over SFTP using private-public key pairs and identity keys (with or without passphrase). With this enhancement to Dreamweaver, your choice of web hosting service providers has become wider - you can subscribe to any service provider that requires you to use private-public key pairs for authentication.
Dreamweaver supports only OpenSSH key files.
For more information, see SFTP connections.
Until now, to undo/redo an operation performed in the CSS Designer panel, you had to click the CSS file (in related files) and then undo/redo the operation.
With the new enhancements to the undo/redo feature, you can undo/redo an operation directly from the Live View of a document or form the CSS Designer panel. These changes then get automatically reflected in the associated CSS file. To let you know that the related file has changed, the affected file’s tab is highlighted for a while (around 8 seconds).
All undo/redo actions are recorded at the HTML file-level. This means, any manual changes to a CSS file can be undone from ANY related file. For example, consider that style1.css and style2.css are related to index.html. If you add styles for .h1 in style1.css, and then do an undo from style2.css, the .h1 style gets deleted from style1.css.
Business Catalyst and PhoneGap Build are now made available as add-ons to Dreamweaver. Now, install Business Catalyst and PhoneGap Build as extensions and then continue to use these services as before.
To install the Business Catalyst and PhoneGap Build extensions, go to Manage > Browse Add-Ons, search for the extensions, and install.
You can now view and install Dreamweaver extensions using Adobe Creative Cloud. The extensions are now referred to as 'Add-ons'.
To browse Adobe Creative Cloud for add-ons, click Window > Browse Add-Ons in Dreamweaver. The Adobe Creative Cloud Add-Ons page appears.
For more information on installing the add-ons, see Add-Ons.
The sync settings feature in Dreamweaver allows you to keep your settings synchronized with Dreamweaver instances on your computers and Creative Cloud. The 2014 release of Dreamweaver CC automatically detects if you had enabled sync settings in the earlier version of Dreamweaver and lets you import those settings from Creative Cloud.
When you launch the 2014 release of Dreamweaver CC for the first time after installation, the following dialog box appears:
Note: This option is not made available to you at a later point in time.
You can now directly access the Wishlist form and bug report form from within Dreamweaver - Help > Submit Bug/Feature Request.
Learn how to use new features and how to tackle common tasks from within Dreamweaver with the new Help Center.
Unlike previous releases, you can now easily discover new features and effective workflows on launching Dreamweaver for the first time. You can skip the new feature tour or disable in-app help messages at any point in time. If necessary, you can enable them back too.
Dreamweaver now includes a mini tour of new features that are shipped with the latest release.
In addition to introducing the new features, the tour also leads you to a video gallery
where you can see the new features in action.
The new feature walkthrough or the mini tour option is displayed to you as soon as
you launch Dreamweaver. You are also given an option to skip the tour and go to the
Welcome screen to proceed with your work.
Note: The new feature walkthrough is displayed when you install or update
Dreamweaver or when you delete preferences and relaunch Dreamweaver.
Here’s a summary of what is displayed in the new feature walkthrough:
At the end of the new feature walkthrough, the video gallery is displayed with videos
related to the new features. When you hover your mouse over the thumbnails, a brief
description about the video is displayed.
You can access the new feature walkthrough and the video gallery anytime while
using Dreamweaver. To do so, go to the Help menu or the Welcome screen and click the required option.
Dreamweaver now prompts you with productivity-boosting tips while you are working
on your projects. These tips are aimed at helping you accomplish the current task that
you are doing in a more efficient way.
The prompts appear based on specific ‘triggers’. For example, when you click Tag
selectors in any view or right-click an element to inspect it, the prompt for Element
Quick View appears. Element Quick View is a brand new feature that helps you view
and edit HTML markup more easily than the other methods that you tried (triggers).
Once you have acted on the suggestions given, the in-app prompt doesn’t appear again
for the same trigger. However, the prompt is displayed again for the other identified
You can disable the display of in-app messages through Preferences. For more
information, see Disable or reset in-app and in-product messages.
Examples of in-app messages:
Dreamweaver integrates seamlessly with many other applications on Creative Cloud
and in-product messages introduce such integration workflows to you. By using these
workflows, you can leverage Adobe Creative Cloud and its offerings in a better way.
In-product messages are displayed based on identified ‘triggers’. For example, when
you are trying to use CSS Transitions, the ‘Edge Animate’ workflow is suggested through
the in-product message.
An in-product message contains a short description of the alternate (or better)
workflow you can use in a specific scenario. It also includes a video thumbnail that you
can click to view a video that explains the workflow. The Tell Me More button links you
to an article/blog that provides more information.
In-product messages are displayed only once when the identified trigger occurs.
Examples of in-product messages:
Go to Preferences > Accessibility dialog box and do the following:
If you enable the messages again, the previously
displayed messages are not displayed. Only the messages that have not been displayed
earlier are shown.
Help menu is now reorganized to provide quick access to new feature walkthrough, video gallery, Help and Learn resources, and submit bug/feature request form.