Dreamweaver CC 2014 review: Web design and development tool gets even more visual

AT A GLANCE

(1 items)

• Dreamweaver CC 2014
  4/5
  The newest version of Dreamweaver CC takes important steps to becoming a WYSIWYG Web editor that lets you rely on its visual canvas so you don't have to deal with the actual code.
  GET IT

1COMMENT

Alan Stafford

Contributor, PCWorld

• Jul 23, 2014 5:00 AM

With the latest version of Dreamweaver, Adobe adds even more visual aids—so many that it might be possible to produce Web content without even looking at the application’s code view. But it’s not FrontPage 98 or PageMill 2.0, by a long shot—Dreamweaver CC 2014 is so deep and so complex that you’ll spend as much time learning the application as you do building your pages.

What you see

As in previous versions, Dreamweaver CC 2014 has three primary ways of presenting Web content: straight code view, the Design view, and the Live view (a WYSIWYG view, or what is supposed to be an approximation of what your page really looks like). Its many control panels—for example, CSS Designer—allow you to manipulate settings that affect the code and what you see in the Design and Live views. But Dreamweaver CC 2014’s Live view gets some significant updates that make the entire application just a tad less dependent on your knowing how to code.

Click a tiny button at the lower left corner of Dreamweaver's screen to pop up the new Element Quick View, within which you move or delete components of your page.

The most visible of these updates is the fact that you can edit on-canvas in Dreamweaver CC 2014’s Live view. In previous versions, you’d have to uncheck Live view and use Design view, then switch back to Live view or preview in a browser to see the effects of your edits. This begs the question of why Dreamweaver needs both the Design view button and the Live view button, because you can’t display Live view without being in Design view, but Adobe says that you still need Design view or Code view for certain tasks (though Adobe also says that it’s working toward having a fully editable Live view in a future release).

Live view should now give you a pretty close representation of what your pages will look like in Google Chrome, because Dreamweaver now uses the open-source Chromium engine, on which Chrome is also based. In previous versions, it used the WebKit engine, on which Apple Safari and older versions of Chrome were based. Of course, Dreamweaver still can’t show you what your pages will look at in Internet Explorer or Firefox, so you’ll need to preview in those browsers.

Click on a small button at the bottom of Dreamweaver’s main view to see a new Element Quick View popup that uses a basic tree display to show your page’s structure (sections, divs, and other components). Want to move things around? Drag and drop them in the Element Quick View. Delete, duplicate, copy, or paste components within the popup, all while keeping an eye on the Live view to see the effects. You cannot resize the popup window, however, so I found myself side-scrolling frequently. The popup isn’t persistent, either: As soon as you click away, it disappears. I hate to say give me another Dreamweaver palette, but I think that would make it more useful.

Now when you use the Insert command to add a component, a large visual aid appears to help you with placement.

Now, when you add components from Dreamweaver’s Insert panel, a new “position assist” visual aid appears, giving you the option to place the component before, after, wrapped around the tag at the insertion point, or nested as part of the tag, whatever it may be. I found it useful, because the buttons are big and the functions are unambiguous.

Once you’ve decided on placement, the component’s tag appears above it, along with a small plus sign. Click the plus sign, and you can add IDs or classes, and if it’s text, you can bold, italic, or link the text from there. You get type-ahead for IDs and classes, but you don’t see a tree of them, as in Dreamweaver’s Code Navigator, so you have to at least know what letter the class or ID starts with. You can now add video clips via Live view and preview them without leaving Dreamweaver (in other words, without launching a browser).

After you complete the Insert command to add a component, a small visual aid appears; you can specify classes or IDs in it.

Taking a cue from Photoshop, Premiere Pro, and probably other Adobe applications—and Microsoft Word and Excel—it’s now possible to copy styles embedded in a CSS selector and paste them into another CSS selector. For example, say you have a square box in one area of your page and a rounded box in another. You can select the square box, look in the CSS selectors box to see what’s highlighted, right-click on the selector, then choose Copy All Styles (or only layout styles, or text styles; what shows as available depends on the type of component). Select the second box, then Paste Styles in the CSS Selectors box. It’s faster than modifying settings manually in the CSS Properties box, so it’s a useful addition.

Taking a page from Premiere Pro and Photoshop, now you can copy the style of one element and paste it onto another element.

Let’s make it snappy

Dreamweaver CC 2014 seemed pretty lethargic on my six-year-old dual-Xeon Windows workstation, which, while old, still easily meets Dreamweaver’s system requirements. Some operations in Live view required a two-count to complete on my system. I also used the application on a 2013 Retina MacBook Pro with a 2.4GHz Core i5 and 8GB of RAM, and it seemed slow on that system, too. In the past, Adobe has published tips for speeding up Dreamweaver, including excluding its program files (which rely heavily on JavaScript) from anti-virus scanning, and doing so did seem to give the application a little more pep on my Windows workstation. Dreamweaver’s system requirements for Windows systems are pretty modest—a Pentium 4 or Athlon 64 and 1GB of RAM, which means 10-year-old systems should qualify, but I wouldn’t try it, given my experience with a much faster system. Minimum specs for Macs are a multicore Intel processor, 2GB of RAM, and OS X 10.7.5.

Bottom line

To me, the target for WYSIWYG Web editors has always been to let people edit on-canvas, not only so that non-coders could build pages, but so that even coders could design visually. Otherwise, why call them WYSIWYG editors? In the past, most Web editors that tried this failed miserably. Dreamweaver CC 2014 is getting closer, though, even if you still have to know code conventions, and if you like editing on-canvas, you’ll like the updates that Adobe has made.