The 2017 release of Dreamweaver CC has been reimagined for web designers who code. It is now more focused, efficient, and faster than ever before - with an all-new code editor, more intuitive user interface with a selectable dark theme, and several enhancements including support for new workflows such as CSS pre-processors.
Read on for a quick introduction to these new features and enhancements.
For a summary of features introduced in earlier releases of Dreamweaver CC, see Feature summary | Dreamweaver CC 2015 releases.
Several productivity enhancements have been made to the Code Editor in Dreamweaver to enable you to get on with the task of coding quickly and efficiently.
Code hints help new users learn HTML, CSS, and other web standards, and visual aids like auto-indentation, code coloring, and resizable fonts help reduce errors and make your code easier to read.
The code hinting functionality in Dreamweaver is enhanced to provide more useful information for the selected code.
In earlier versions of Dreamweaver, when you type a right-angle bracket, you get a drop-down list of relevant code.
In this release, you not only get the relevant code, you also get additional information that helps you to quickly ramp up on HTML, CSS, and other web technologies within Dreamweaver itself.
For more information, see Code hinting and code completion.
The overall appearance of the code is now enhanced for better readability. You can see improvements in code formatting, and code coloring.
When you write code, Dreamweaver auto-indents the code to circumvent erroneous manual indentation and improve readability.
Dreamweaver now supports code coloring for additional number of file types.
Code coloring support is now available for HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML, and YAML.
You can change syntax highlighting for different file types directly from the status bar in code view.
For more information on all these changes, see Coding environment in Dreamweaver.
Dreamweaver now supports common CSS pre-processors like Sass, Less, and SCSS, with full code coloring, and compilation, so you can save time and produce cleaner code.
For more information on Dreamweaver support for CSS preprocessors, see Using CSS preprocessors in Dreamweaver.
Quickly preview your code changes in browser in real time without manually refreshing your browser. Dreamweaver now connects with your browser so changes appear in your browser instantly without page reloads.
For more information, see Real-time Preview in browser.
To make quick changes to your code, place the cursor on specific code snippets and use the context menu, or press Ctrl-E (on Windows) or Cmd-E (on Mac) to access Quick Edit.
Dreamweaver offers context-specific code options and inline tools.
For more information, see Quick Edit.
Dreamweaver provides in-context documentation for CSS properties, right within the code view.
Now you don't have to navigate outside Dreamweaver to a web page to learn or refer to CSS properties. To bring up help for CSS, press Ctrl+K (on Windows) or Cmd+K (on Mac).
For more information, see Get help with CSS within Dreamweaver using Quick Docs.
To write multiple lines of code simultaneously, use multi-cursors.
This feature is a huge productivity booster, as you don't have to write the same line of code multiple times.
To invoke multiple cursors, you can:
- To add cursors to multiple continous lines - Hold down the Alt key, then click drag vertically.
- To add cursors in multiple discontinuous lines - Press the Ctrl key, and click the different lines where you want to place the cursor.
- To select text in multiple continuous lines - Press the Alt key and drag diagonally
- To select text in multiple discontinuous lines - Select some text, then press the Ctrl key (Windows), or Cmd key (Mac), and continue to make further selections.
For more information, see Use multiple cursors to add or change text in multiple places.
Dreamweaver's menus, toolbars, and workspaces are also redesigned in this release. Read on to learn more about these changes.
The Dreamweaver interface is optimized to include the following default workspaces:
- Developer workspace
This workspace is minimal, and by default, includes only those panels that are most essential for developers who code websites - for instance, the Files, and Snippets panels.
- Standard workspace
This workspace includes everything you need when you work with both code and design - such as Files, CC Libraries, CSS Designer, Insert, DOM, Assets, and Snippets panels.
After you select a workspace, you can customize it by adding or removing panels. For more information on customizing workspaces, see Create custom workspaces.
Here is a summary of the differences in the workspaces provided in Dreamweaver CC 2015 and Dreamweaver CC 2017.
For more information on workspace changes, see The Dreamweaver workspace.
The application menu is revamped to remove sparingly used menu items, and move others to more intuitive menu locations.
For a detailed description of the changes in Dreamweaver's application menu, see Redesigned Menus.
However, you can customize the toolbar to display the required set of tools you need.
For more information, see Toolbar overview.
You can now:
- Toggle between INS (Insert) and OVR (Overwrite) modes
- See the line and column number at the bottom of the screen. These numbers indicate the line and column where the mouse is placed.
- Select a desired code coloring for different types of code files.
For more information, see Status bar overview.
The snippets panel now wears a new cleaner look, and is also redesigned to make the process of inserting snippets easier.
The following image highlights the major changes in the Snippets panel:
In the previous releases of Dreamweaver, you had to insert snippets using keyboard shortcuts.
Inserting snippets using keyboard shortcuts was not an efficient process due to the following reasons:
- The need to remember non-intuitive shortcuts
- Possible clashes with product keyword shortcuts
In this version of Dreamweaver, you can use trigger keys to insert code snippets.
Trigger keys are user-friendly text strings assigned to code snippets. For example, for a code snippets that creates a mailto link, you can type "mailto" and make that the trigger key.
After you assign a trigger key, place the cursor in your document, type "mailto", and press Tab. Dreamweaver then inserts the related code snippet in your document.
For more information on the Snippets panel, see Reuse code with snippets.
The Files panel is redesigned to make it simpler and more intuitive to use.
At its simplest, the Files panel displays a list of only the local files in your computer. As you work more with the Files panel - setting up a site, setting up connections to remote servers, enabling check in and check out, more options appear in the Files panel.
For more information on the changes to the Files panel, see Redesigned Files panel.
When you launch Dreamweaver or when you close all Dreamweaver documents, a new Start workspace is displayed. You have convenient access to your recently used files, Libraries, and starter templates with the Start workspace.
If you prefer the older dialogs, you can still type Ctrl/Cmd + O to launch the Open dialog, or Ctrl/Cmd + N to launch the New Document dialog.
To help you ramp up quickly on the changes in the Dreamweaver CC 2017 workspace, an onboarding experience is available to you. Quickly go through the customization experience, and you will be presented with a workspace and theme options that are right for you.
For more information, see The Dreamweaver workspace.
The new, non-obtrusive, Find and Replace toolbar sits at the top of your window without blocking any portion of your screen.
Find and replace, in general, is faster and more efficient, as compared to previous versions of Dreamweaver. Dreamweaver now looks for search strings as you type in the Find panel and highlights all instances of the string in the current document.
For more information, see Find and replace text.
Archive, restore, add comments, and see version history for all your assets stored in Creative Cloud, including files in your Creative Cloud Libraries, assets created with CC desktop products, and mobile projects.
For more information, see Auto-recovery of files.