Pros
Cons
Our Verdict
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.
Now when you use the Insert command to add a component, a large visual aid appears to help you with placement.
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 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.
After you complete the Insert command to add a component, a small visual aid appears; you can specify classes or IDs in it.
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).
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.
Minimum specs for Macs are a multicore Intel processor, 2GB of RAM, and OS X 10.7.5. Dreamweaver CC 2014 seemed slow a 2013 Retina MacBook Pro with a 2.4GHz Core i5 and 8GB of RAM. 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.
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.