New features summary

The latest updates to the 2014 release of Dreamweaver CC include integration with Extract to help you build mobile and desktop sites from a PSD comp directly in Dreamweaver. New Live Guides make it easier for you to accurately place and rearrange HTML elements, and the enhanced Live View editing enables real-time changes.

This article introduces these new features and several other enhancements, and provides links to resources for more help and learning.

New Welcome screen

Are you a first time user of Dreamweaver? Have you used Dreamweaver and are looking for upskilling your knowledge? Do you want to know what has changed from the previous version to the current version? Whether you are a beginner or an experienced user, or evaluating the new version of Dreamweaver, you can now get all the essential learning resources right on the Welcome Screen.

The latest update to the Dreamweaver CC 2014 release of Dreamweaver provides quick access to videos (including new features), hands-on tutorials, tips and techniques, and more from the Welcome Screen.

Enhancements to Extract panel

Live Guides and Element Quick View icon now appears in Live View when you drag images from the Extract panel. These visual aids help you place the image quickly and precisely in the required position.

Enhancements to Live View editing

Drag and drop elements

You can now move elements in Live View by dragging the associated tag name. When you hover your mouse over a tag name, the hand cursor appears indicating that the element can be dragged. You can drop the dragged element with the help of Live Guides that visually indicate what the placement of the element will be after it is dropped.

Marquee selection

You can now select text, images, or other elements in a tag by clicking and dragging anywhere inside a tag (marquee selection). Marquee selection helps you easily select multiple elements within a tag.

Element Display enhancements

Element Display now shows the hint text 'Class/ID' to clearly indicate that a class or ID can be specified.

Also, changes made in Element Display are saved when you click '+'. You can also press Enter or Return to save changes as in earlier versions of Dreamweaver. 

New Code View themes

Ten new color themes are added to Code View:

• RecognEyes
• Havenjark
• Solarized Dark
• Solarized Light
• Wombat
• Monaki
• Schuss
• Tango
• Cool Light
• Roboticket

For more information on Code View themes, see Set the color theme for Code View.

CSS Designer enhancements

This update includes a few changes to the CSS Designer user interface and a change in the default setting of the Show Set check box.

On launch, the Show Set check box is selected by default and the changes made to this option will be persistent across Dreamweaver sessions. For example, if you uncheck this option, the next Dreamweaver session retains the setting and displays the option as unchecked.

The following are the changes in the user interface:

• The CSS Designer panel scrolls while adding a property: When you click "+" in the Properties section, the panel scrolls so that the Add Property row comes almost at the center of the Properties panel. If Properties section is too small, the panel scrolls to show the Add Property row at the bottom of the section.
• Background highlight: When the focus is on the Add New Property text box, the row is highlighted in grey background. 
• Position of '+' and '-' buttons: The position of "+" and "-" buttons that appear on each section in the CSS Designer panel (Source, Selectors, Media query, and Properties) are now moved to the left from extreme right to make them more visible.
• 'Custom' category is now called 'More'.

Remote debugging of Live View

You can now remotely debug your Dreamweaver documents open in Live View using Google Chrome DevTools. In Google Chrome, you can use port 5471, which you can activate by performing the following steps:

Other enhancements

Changes in reset preferences workflow

Now, when you reset preferences using the keyboard shortcuts, Dreamweaver creates a backup of the preferences in the 'Adobe Dreamweaver CC 2014.1 Backups' folder. This folder is automatically created in the same folder as the original Dreamweaver preferences folder on Windows and Mac.

The full path of the backup folder is displayed in the reset preferences dialog box.

Change in the view mode of dynamic documents

Dynamic documents such as PHP, CFM, and ASP no longer open in Code View by default. They open in the same mode (Code/Live/Split) as the last closed document or the last document that was in focus.

Adobe Dreamweaver CC 2014.1 (October 2014)

Extract in Dreamweaver

Extract integration with Dreamweaver lets web designers and developers apply design information and extract web-optimized assets directly within the coding environment. Extract provides a complete, self-contained solution for extracting style information and assets from PSD comps, reducing the need to go back and forth between Photoshop and Dreamweaver.

With the Extract panel in Dreamweaver, you can extract CSS, images, fonts, colors, gradients, and measurements, right into your web page. In addition to these primary Extract features, Dreamweaver also provides the following unique features:

• Direct access to your PSD files on Creative Cloud and to those PSD files that are shared with you in a collaborative folder
• Contextual code hinting to easily define fonts, colors, and gradients in your CSS
• Drag-and-drop support to create image tags from PSD layers
• Paste styles directly into Live View (for example, CSS Designer and Element Display)

The default workspace in Dreamweaver (named as Extract) shows the Extract panel on the left to get you started quickly. On the first launch of Dreamweaver, the Extract panel shows a simple tutorial to help you learn about Extract workflows. You can click Get Started to begin using Extract.

For more information on the Extract workflows in Dreamweaver, see Dreamweaver integration with Extract.

64-bit architecture

The 64-bit version of Dreamweaver is now available and supports all the features just the same as the 32-bit version. With this addition, you can now download the following Dreamweaver builds from the Adobe Creative Cloud application:

Frequently asked questions

• Will a 64-bit application run on a 32-bit version of Windows? - No
• Can I install both 32-bit and 64-bit on the same Windows machine? - No
  
• How can I check if my system is running a 32 or a 64-bit version of Dreamweaver?
  • Windows: Launch Dreamweaver. Open the Task Manager and search for the Dreamweaver process. If the launched Dreamweaver build is 64-bit, then the name of the process will be “Dreamweaver.exe”. If the launched build is 32-bit, the name of the process name will be "Dreamweaver.exe *32".
    
  • Mac: Open Activity Monitor, and go to check View > Columns > Kind. Search Dreamweaver in Activity Monitor and notice the Kind column. If Dreamweaver is 64-bit, then Kind column indicates “64 bit”.
    

Installing the Dreamweaver 64-bit version

Enhancements to Live View

• Live Guides
• Insert structural elements precisely
• Context menu in Live View
• Changes in Element Display
• Move elements in Live View
• Keyboard navigation in Live View
• Quick Tag Editor in Live View

Live Guides

Live Guides are visual feedback in Live View that indicate the possible positions where you can insert an element in the following scenarios:

• While dragging from the Insert panel
• While dragging from the Asset panel
• Dragging (moving) elements within Live View.

Live Guides appear as you hover the mouse over different elements on the page before dropping an element. They can appear above, below, left, or to the right of the element that is hovered over.

• Above and Below - Appears while hovering over all types of elements/tags, except inline tags. When you hover the mouse in the first (top) 50% of the element, guides appear above the hovered element. When you hover the mouse in the last (bottom) 50% of the element, guides appear below the hovered element.

• Left and Right - Appears while hovering over inline tags, for example, <a>, <span>, or over tags that have the 'float property' set.

Inserting a structural element precisely

You can use the Element Quick View along with Live Guides to insert an HTML element more precisely into the document structure.  

When you pause for a while before dropping the element, the Element Quick View icon (</>) appears. When you hover your mouse over this icon, the Element Quick View opens and you can drop the element inside the Element Quick View.

Context menu in Live View

You can now cut, copy, paste, and delete elements in Live View using the right-click context menu. You can also duplicate elements, or select the parent tag or child using the context menu in Live View.

First, select an element in Live View to see the Element Display. Then, right-click within the tag area to see the above context menu options. Options are functional at the tag level. 

Changes in Element Display

Now, you can not only apply selectors to an element, but also can create a selector in the desired CSS source and assign a media query using Element Display. When you type a selector that does not exist in any style sheet and press Enter, the Element Display provides the options to choose a CSS source and media query.

If you do not want to choose a CSS source or a media query, press Esc to dismiss the options.

You can also right-click an applied selector now to go to the corresponding code (Go To Code option) or to paste any copied styles (Paste Styles option).

Move elements in Live View

Now, Dreamweaver supports movement of elements (tag level) in Live View. You can select an element in Live View, and drag-and-drop it at any other position.

When you pause for a while before dropping the element, the Element Quick View icon (</>) appears. When you hover your mouse over this icon, the Element Quick View opens and you can drop the element inside the Element Quick View. 

Keyboard navigation in Live View

Dreamweaver now supports navigation of page elements using keyboard to facilitate avid keyboard users and to speed up the web design process. You can use:

• The up and down arrow keys to navigate through the page elements. Keyboard navigation in Live View facilitates easy access to nested and wrapped elements.
• The Tab key to traverse through the selectors in Element Display

For more information, see Keyboard navigation in Live View.

Quick Tag Editor in Live View

Pressing Ctrl+T on Windows or Cmd+T on Mac in Live view now brings up a Quick Tag Editor for the selected element. Quick Tag Editor has three states: Edit Tag, Wrap Tag, and Insert HTML. You can toggle between these states using Ctrl/Cmd + T.

Changes to Dreamweaver workspace

Changes to Document toolbar

The Document toolbar is modified and made simple to use.

• Design and Live View options are merged into a single control (drop-down).

• The Document Title field is now moved to the Property Inspector.

• Inspect and Live Code buttons are replaced with icons.

• Back, Forward, Refresh options are grouped with the Address bar and placed at the center of the Document toolbar.

• Preview/Debug in Browser, Live View Options, and File Management icons are grouped together and aligned at the right of the Document toolbar.

Changes to default workspace

Out-of-the-box workspaces that are available with Dreamweaver are changed and are as follows:

• Code
• Design
• Extract

The default workspace now is Extract. This workspace shows the Extract panel on the left and the web page on the right. On the first launch of Dreamweaver, the Extract panel displays a simple tutorial to help you learn about Extract workflows. To begin using Extract, click Get Started.

The default view for HTML documents is now the Split View, split horizontally to show the Live and Code View. Dynamic files such as the ones listed below open in full Code View by default. When you split the view, these documents are shown in Design and Code View.

• PHP
• PHP Template (Example.dwt.php)
• ASP
• ASP Template (Example.dwt.asp)
• JSP
• JSP Template (Example.dwt.jsp)
• CFM
• CFM Template (Example.dwt.php)

Tip: To switch to Design View, click the drop-down list adjacent to 'Live' and click Design. To change the horizontal split to a vertical split, select View > Split Vertically. The Live/Design View now appears on the left. To get the Live/Design View on the right, unselect View > Live View On Left or Design View On Left.

Dreamweaver now remembers the Live View state that you choose for an HTML document, and then applies the same view to all HTML documents that you open later. For example, consider that HTML1 is the document that you open first. The document view is split with Code and Live View. Suppose that you change the view of this document to full Live View. Then, the next document that you open, say HTML2, is displayed in full Live View.  

Changes to fluid grid documents

Support for Live View editing

New editing capabilities in Live View were introduced in the previous version of Dreamweaver CC. In this release, these editing features in Live View are made available for fluid grid documents too. Editing in Live View speeds up your efforts of developing a fluid web page since you can edit and preview changes instantly in the same view.

The following features help you edit fluid grid documents in Live View:

• Element Display
• Quick Property Inspector
• Live View Property Inspector
• Insert elements and edit text directly in Live View

You can also now visualize the HTML DOM structure of a fluid grid document using Element Quick View. 

Note: Element Quick View in fluid grid layouts does not let you copy, paste, duplicate, or rearrange the HTML elements.

The user interface for viewing and editing fluid grid documents has changed to accommodate the editing features in Live View. When you now select an element in a fluid grid document, Element Display is shown along with the other controls such as Hide Elements and Start A New Row.

Also, the fluid grid documents now open directly in Live View. You cannot view or edit fluid grid documents in Design View any more.

For more information on fluid grid documents, see Responsive design using fluid grid layouts.

Changes to Insert workflow

The Insert dialog box for fluid grid documents now contains a 'position assist'. The position assist lets you position the inserted element before, after, or nest it within the element in focus (in Live View). For more information on inserting fluid grid elements, see Insert fluid grid elements.

Change in Manage Hidden Elements option

The Manage Hidden Elements option (eye button in document toolbar) is moved to the context menu in a fluid grid document.

To Manage hidden elements, right-click on the fluid grid page, and select "Manage Hidden elements" to see the hidden elements. To hide these elements, you can click the eye icon in the HUD. 

Out-of-the-box color themes for Code View

You can now choose from one of the following readily available color themes for Code View:

• Classic (default; same as previous versions of Dreamweaver)
• Raven
• Slate
• Blanche
• Geneva

Use the code coloring preferences to specify a theme for Code View. You can customize the theme by choosing different color schemes for backgrounds, foregrounds, and hidden characters.

For each listed document type, you can customize the colors for different categories of tags and code elements, such as form-related tags or JavaScript identifiers. For example, with the Raven theme applied to all document types, you can choose to have a blue color for form-related tags in only HTML documents.

All custom settings in a theme are saved when you click Apply and the customized theme is available for use across Dreamweaver sessions.

For more information, see Set the color theme for Code View.

Code View to Live View sync

The Code View to Live View sync enables you to instantly preview changes that you do to the code in Live View. Unlike previous versions of Dreamweaver, you do not have to click refresh to preview changes in Live View.

You can see the Code View to Live View sync in action in the following workflows (when the focus is in Code View):

• Text operations, such as, Cut/Copy/paste/Delete, Undo/redo.
• Moving of elements in Element Quick View when the focus is in the Code View.
• Typing in Code View.
• Delete/Duplicate/Copy/Paste actions in Element Quick View (right-click options).
• Operations in the Property Inspector, such as, changing text formats - Bold/Italic, Changing Class, ID, Format, Page properties, and apply fonts.
• Adding/deleting Classes or IDs using code hints in Code View.
• Inserting elements, such as, Div, Image, hyperlink, and structural elements from the Insert panel into Code View.
• Adding/editing CSS styles in the <style> tag. 
• Editing code in CSS files.

Assets panel in Live View

The Assets panel (Windows > Assets) is now made available in Live View. Using the Assets panel, you can easily manage the following tasks:

• Drag or insert assets (images, URLs, colors, or media) from the preview pane or the list view of the Assets panel.

Note: You can drag assets from the preview pane only on Mac.

• Copy color value and paste its value on any text field in Dreamweaver such as, CSS Designer properties, Code View, color picker, or even to other apps such as Notepad.
  

For detailed instructions on how to use the Assets panel, see Working with Assets.

New starter templates

Dreamweaver now includes new, responsive starter templates that help you get started with your responsive websites faster. You can choose from one of the following templates in the New Document dialog box (File > New > Starter Templates):

• About page
• Blog post
• eCommerce
• Email
• Portfolio

When you choose a template and click Create in the New Document dialog box, Dreamweaver prompts you to save the new document. By saving the document, you make a copy of the template, which you can later customize to suit your requirement.

Reset preferences on launch

Troubleshooting issues with Dreamweaver sometimes requires you to delete the preferences folder that contains all the custom settings. Prior to this release, you had to manually navigate to the preferences folder on your machine and delete the folder. This release provides you a one-click option to delete the preferences using a dialog box:

You can open the Reset Preferences dialog box by holding down the following keyboard shortcuts while launching Dreamweaver:

• (Win) Windows key + Ctrl + Shift
• (Mac) Cmd + Option + Shift

On Mac, hold down the Cmd + Option + Shift while launching Dreamweaver (by clicking the Dreamweaver icon in the Dock).

On Windows, perform the following steps:

Ensure that you hold down the above mentioned shortcut keys even when the User Account Control (UAC) dialog box appears. 

Other enhancements

Changes to sync settings

You can now import settings from your previous version of Dreamweaver that were saved on Creative Cloud using the Preferences dialog box. All local settings are overridden by the settings imported from the cloud and are applied during the next launch of Dreamweaver.

Also, from this release onwards, in addition to the settings that were synchronized in previous versions, the following settings too get synchronized with Creative Cloud:

• Newly added code color themes
• Application bar and Application frame settings on Mac

CSS Designer changes

This version of Dreamweaver includes many improvements to user experience of CSS Designer. The CSS Designer panel also includes an on-boarding experience that helps you quickly get started with the workflows.

Changes to the Welcome screen

The Site Templates option on the Welcome screen is now replaced with Starter Templates. You can access Site Templates in the New Document dialog box (File > New).

jQuery version updates

Dreamweaver now includes the updated the jQuery libraries as follows:

• jQuery - 1.8.3 to jQuery - 1.11.1
• jQuery UI - 1.9.2 to jQuery UI - 1.10.4

jQuery starter pages have been removed. 

PhoneGap update

Dreamweaver's direct integration with PhoneGap Build to package applications is not supported in the latest update to the 2014 release Dreamweaver CC (October 2014), and later.

However, you can directly access the online PhoneGap Build service and use the latest feature updates to package your web applications as native mobile applications.