facebook google plus twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Code and Technology Integration Features

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

There are many new features and enhancements in Dreamweaver since the 2015 version. We review some of them here.

Lesson Goals

  • Learn about code enhancements.
  • Learn about integrated technology.
  • Learn about views.

Code Enhancements

In this course, we didn't r4t0

use code view; however, here are a few new and enhanced features to know about.

Linting Support

Linting is the process of reviewing code blocks to let you know about potential errors or suspect usage of code. Any possible issues will be shown in the Output panel. HTML, CSS, and JavaScript can be checked by simply specifying rules in in configuration files then enable the feature.

Code Folding

Dreamweaver CC 2017 improved code folding. You no longer have to select the entire block; all you have to do is click on the Down Pointing Gray Arrowdown pointing gray arrow to the left of a opening tag, and the code will fold up to the closing tag on its own. It's a great feature to use when tracking down open and close tags for structure. Code Folding Example

Visual Media Queries

Visual Media Queries is a feature that represents the Media Queries present in a file with colored bars.

  • Green - max-width conditions.
  • Blue - min-width and max-width conditions.
  • Purple - min-width conditions.

Integrated Technology

Many technologies blend well with Dreamweaver and have options built in to the software.

Bootstrap Integration

Dreamweaver CC 2017 now supports the integration of the current favorite free HTML, CSS, and JavaScript framework. When creating a new file, Bootstrap options are built into the new dialog box.New Dialog Box

Emmet Support

Emmet is an additional plug-in that allows you to use abbreviations to generate HTML and CSS code quickly. Many software packages support Emmet abbreviations. See below a sample from the http://docs.emmet.io/abbreviations/ website.

#page>div.logo+ul#navigation>li*5>a{Item $}

Once this is entered into code view, press the Tab key and you see the code below:

<div id="page"> <div class="logo"> </div> <ul id="navigation"> <li> <a href="">Item 1</a> </li> <li> <a href="">Item 2</a> </li> <li> <a href="">Item 3</a> </li> <li> <a href="">Item 4</a> </li> <li> <a href="">Item 5</a> </li> </ul> </div>

Testing Server - Workflow Improvements

You may now designate a server as either testing or remote, and not both. File synchronization of dynamic files is now automatic.


Views and options to work with code, design, and live view have all been enhanced. Here are a few of those improvements.

DOM Panel

The Element Quick View is now named DOM panel. To view the panel Windows > DOM. The same functionality is present with new options as well. Element Quick View Dom Box

Technology Previews

Technology features will be present for customers to review and provide feedback. These can be found under Preferences > Technology Previews. You may enable and disable any features in the list to try them out.