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.
- Tabbed control to avoid seeing all values at once reducing confusion.
- Intuitive and friendly icons that any beginner can follow.
- Two sets of icons to indicate unset/deleted and disabled states.
- A one-stop “All sides” tab to set all border properties at once.
- Computed row that directs you to the most appropriate tab while inspecting.
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.
- If a selector has no styles, Copy and Copy All Styles are disabled.
- Paste Styles is disabled for remote sites that cannot be edited. But Copy and Copy All
styles is available. - Pasting Styles that exist partially on a selector (Overlapping) works. Union
of all the selectors is pasted. - Copy-paste Styles also works for different linkages of CSS files – Import, Link, Inline
Styles.
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.
| Shortcut | Workflow |
| 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.
Note:
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).
- When you undo/redo an action from the CSS Designer panel, the Live View is automatically refreshed.
- When you edit the document using the source code, and undo the changes from Live View, the display changes to Split view and the related source code is brought into focus.
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.
Note:
To undo/redo the changes in JavaScript files, switch to the respective JS file and then do undo/redo.
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:
- To import settings that are stored on Creative Cloud, click Import Sync Settings.
Note: This option is not made available to you at a later point in time.
- To synchronize the settings in the current Dreamweaver instance with Creative Cloud, click Sync Local.
- To synchronize settings automatically, select Always Sync Settings Automatically.
- To view advanced sync settings options, click Advanced.
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:
- Welcome message. You are also asked to specify if you have used Dreamweaver CC earlier so that the experience can be customized accordingly.
- Feature by feature introduction and brief description (with an option to skip the tour).
- Video gallery that contains videos related to the new features.
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.
Note:
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
triggers.
You can disable the display of in-app messages through Preferences. For more
information, see Disable or reset in-app and in-product messages.
Triggers:
- Tag selectors (all views) are clicked
- Live + Inspect or right-click + Inspect on an element
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.
Note:
To see the messages again, you can reset the in-app help setting in Preferences.
For more information, see Disable or reset in-app and in-product messages.
Go to Preferences > Accessibility dialog box and do the following:
- To disable the messages, deselect the Show In-app Help check box.
If you enable the messages again, the previously
displayed messages are not displayed. Only the messages that have not been displayed
earlier are shown.
- To see the previously displayed messages, click Reset.
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.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.