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.

Adobe Dreamweaver CC 2014.1.1 (February 2015)

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.

Welcome screen
Welcome screen

Note:

This new Welcome Screen is available for users in English locales only. For users in other locales, the Welcome Screen and New Feature walk-through in Dreamweaver CC 2014.1 are displayed.

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.

Extract panel
Extract panel

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.

Note:

Only those operations that are supported by the browser are supported for marquee selection in Live View.

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:

  1. Launch Dreamweaver by executing the following command:

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: open <installation_path> --args -enableRemoteDebugging

    Note: Type two hyphens before args

  2. In the dialog box that appears indicating that port 5471 is activated for debugging, click OK.

    Dreamweaver launches.

    Click OK in the dialog box to launch Dreamweaver
    Click OK in the dialog box to launch Dreamweaver

  3. Open the documents that you want to debug in Live View.

  4. To begin debugging, open Google Chrome and browse to localhost:5471. A list of links to all open documents in Dreamweaver is displayed. 

    Note: Since the new Welcome Screen and Extract panel use Chromium Embedded Framework (CEF), you will also see entries related to these features.

    You can now use the Google Chrome DevTools to debug the required documents.

  5. To stop debugging and open Dreamweaver in the normal mode, quit Dreamweaver and launch it again.

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.

Reset preferences and settings
Reset preferences and settings

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.

Extract panel default workspace
Extract panel

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:

OS Default install location Application Preferences folder
Windows 32-bit C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64-bit C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64-bit /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

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

  1. Ensure that your machine is running a 64-bit OS:

    To check if your machine is 64-bit, follow the steps described in the articles below:

  2. Download the Dreamweaver 64-bit version from Creative Cloud and install the build.

Enhancements to 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.

Note:

Live Guides are not supported in Fluid Grid documents.

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.
Live Guides above and below hovered elements
Live Guides above and below hovered elements

  • Left and Right - Appears while hovering over inline tags, for example, <a>, <span>, or over tags that have the 'float property' set.
Live Guides on the right and left of hovered elements
Live Guides on the right and left of hovered elements

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.

Element Quick View icon
Element Quick View icon that helps in precision insert

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.

Note:

You can also use keyboard shortcuts (for example, on Windows, Ctrl+x, ctrl+c, Ctrl+v, Ctrl + d, and Delete key) 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.

CSS Source and Media Query options in Element Display
CSS Source and Media Query options in Element Display

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

Go To Code and Paste Styles options in Element Display
Go To Code and Paste Styles options in Element Display

Note:

Go To Code option shows suboptions if the same selector is added to multiple media queries. Paste Styles option shows suboptions if the copied selectors are pseudo or compound selectors.

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.

  1. Click the element you want to move, and once the Element Display (blue box around the element) appears, drag the element. When the 'drag' is initialized, the mouse cursor changes indicating that the element is ready to move.

  2. The reference elements (elements with respect to which you want to place the dragged element) is highlighted with a blue border. Live Guides (in green) appear to indicate the possible drop locations with respect to the reference element.

Note:

Only static elements can be moved in Live View. Dynamic content tags such as PHP cannot be moved.

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.

Quick Tag Editor in Live View
Quick Tag Editor in Live View

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).
Design and Live View options in Dreamweaver CC (October 2014)
Design and Live View options in the latest update - Dreamweaver CC (October 2014)

Design and Live View buttons in the Document toolbar in previous versions
Design and Live View buttons in the Document toolbar in previous versions

  • The Document Title field is now moved to the Property Inspector.
Document toolbar in Dreamweaver CC (October 2014)
Document toolbar in the latest update - Dreamweaver CC (October 2014)

Document Title field moved to Property Inspector in Dreamweaver CC (October 2014)
Document Title field moved to Property Inspector in the latest update - Dreamweaver CC (October 2014)

Title field in the Document toolbar in previous versions
Title field in the Document toolbar in previous versions

  • Inspect and Live Code buttons are replaced with icons.
Live Code and Inspect icons in Dreamweaver CC (October 2014)
Live Code and Inspect icons in the latest update - Dreamweaver CC (October 2014)

Live Code and Inspect buttons in previous versions
Live Code and Inspect buttons in previous versions

  • Back, Forward, Refresh options are grouped with the Address bar and placed at the center of the Document toolbar.
Address bar with Back, Forward, and Refresh options in Dreamweaver CC (October 2014)
Address bar with Back, Forward, and Refresh options in the latest update - Dreamweaver CC (October 2014)

Address bar with Back, Forward, and Refresh options in previous versions
Address bar with Back, Forward, and Refresh options in previous versions

  • Preview/Debug in Browser, Live View Options, and File Management icons are grouped together and aligned at the right of the Document toolbar.
Preview, debug in browser, Live View options, and File Management icons in Dreamweaver CC (October 2014)
Preview, debug in browser, Live View options, and File Management icons in the latest update - Dreamweaver CC (October 2014)

Preview, Debug In Browser, Live View options, and File Management icons in previous versions
Preview, Debug In Browser, Live View options, and File Management icons in previous versions

Changes to default workspace

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

  • Code
  • Design
  • Extract
Workspaces
Workspaces

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.

Extract workspace
Extract workspace

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)
Default view for HTML documents showing Live and Code View
Default view for HTML documents showing Live and Code View

Default view for dynamic documents showing full Code View
Default view for dynamic documents showing full Code View

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.

Fluid grid options in previous versions
Fluid grid options in previous versions

Fluid grid options along with Element Display in Dreamweaver CC (October 2014)
Fluid grid options along with Element Display in the latest update - Dreamweaver CC (October 2014)


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

Document toolbar in Dreamweaver CC (October 2014)
Document toolbar in the latest update - Dreamweaver CC (October 2014)

Document toolbar in a fluid grid document in previous versions
Document toolbar in a fluid grid document in previous versions

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. 

Manage Hidden Elements option in the right-click menu in Dreamweaver CC (October 2014)
Manage Hidden Elements option in the right-click menu in the latest update - Dreamweaver CC (October 2014)

The 'eye' icon for managing hidden elements in previous versions
The 'eye' icon for managing hidden elements in previous versions

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
Classic, Raven, Slate, Blanche, and Geneva themes
Classic, Raven, Slate, Blanche, and Geneva themes

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.

Note:

You can keep the customized code themes synchronized between your Dreamweaver instances using the Sync Settings option in Preferences. For more information, see Synchronizing Dreamweaver settings with Creative Cloud.

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.

Note:

Any change in JavaScript code requires full refresh or reload of the page for reflecting the changes in Live View. 

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.

Note:

 

  • As Scripts, Template and Library categories are more relevant in Code View, they have been hidden in the Assets panel of Live View.
  • In this release of Dreamweaver CC, Flash and Movies categories are combined into a single category called "Media" .
         

Assets panel in Live View
Assets panel in Live View

Assets panel in Design and Code View
Assets panel in Design and Code View


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
New responsive starter templates
New responsive starter templates

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:

Reset preferences
Reset preferences

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

Note:

Use the reset preferences option judiciously. When you reset preferences and settings, all custom settings in workspace, keyboard shortcuts, extensions, and application preferences will be lost.

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:

  1. Go to the installation folder, locate Dreamweaver.exe, and click the file.

  2. Hold down the Windows key + Ctrl + Shift keys and double-click Dreamweaver.exe.

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.

Import settings from previous versions of Dreamweaver
Import settings from previous versions 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. For more information, see Using PhoneGap build with the latest update to the 2014 release of Dreamweaver CC.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy