Joseph Lowery |
Monday, August 11, 2014
Having reached the ripe age of 15, Adobe Dreamweaver CC 2014 is a precocious teenager.
This widely popular web design program is capable of simultaneously showing off big, wowza new features while casually accepting major productivity advancements with a no-big-deal attitude.
The latest version of Dreamweaver has ample new features from both the sonic barrier-shattering and the subtle-but-essential varieties.
Let’s take a tour of the new features in Dreamweaver.
In Dreamweaver’s latest version, Live View made a major evolutionary leap and jumped from the purely visual to the largely editable. Now, with a quick double-click, you can modify your text directly in Live View, without resorting to the code. Or you can add elements from the Insert panel outside of Design view.
As handy as Editable Live View is—and it’s great for those gotta-have-it-now client updates—Dreamweaver doesn’t stop there. Edits are performed on a tag-by-tag basis with each editable block accompanied by an identifying tab called the Element Display. Element Display is like a HUD visible to jet pilots, Iron Man, and Google Glass addicts, except Dreamweaver’s version is interactive and can be used to add an ID or multiple classes to any selection. No trips to the Property Inspector needed.
I’ve long been a fan the Tag Selector at the bottom of the Document window and Inspect mode’s ability to navigate the Document Object Model (DOM) with the press of an arrow key.
Dreamweaver CC 2014 brings the DOM hierarchy front and center with the introduction of Element Quick View. With Element Quick View, you see exactly where the current tag lies in the DOM and can jump to parent, child, or sibling with a single mouse click.
Currently, Element Quick View is housed in a non-dockable panel and disappears whenever you click anywhere on the page. Pop it back on-screen with a Ctrl+/(Windows) or Cmd+/ (Mac) keyboard combo or a quick hit of the icon on the far left of the Tag Selector.
Editable Live View and Element Quick View are big, look-at-me! features that get the lion’s share of new release coverage. Let’s turn now to some less-hyped, but still way-cool enhancements. And you don’t get much cooler than copy/paste CSS styles.
I do a lot of sites that incorporate WordPress in one way or another, either top-to-bottom or as a mini-CMS. I often work from a web page comp to whip the WordPress pages into shape, copying one set of CSS rules in the comp and pasting them into another, often different selector for the WordPress styles.
The newly introduced ability to directly copy CSS styles from one design to another seriously ramps up my productivity.
Just right-click on any selector in the CSS Designer panel and select your copy option. You can copy all the styles at once or selective ones from specific categories such as Layout, Text and Background.
Dreamweaver’s CSS Paste is pretty darn smart, too: Not only are overlapping styles omitted, but links to background images are automatically adjusted for path differences. Coolness incarnate.
Dreamweaver’s undo/redo option has saved countless hides over the years, mine included. But there’s always been a catch: Each page—whether the source file or CSS stylesheet—had its own undo history and you had to select that page before hitting Ctrl+Z/Cmd+Z to have the desired effect. No more.
From Dreamweaver CC 2014 onwards, you can quickly undo a change made in the CSS Designer panel without ever leaving Live View and performing the switch-undo-switch boogie. You’ll even see a brief highlight of the associated file tab to acknowledge the update.
How many clicks will this save you in a year? Countless.
Have you ever stared at a series of nested div tags and tried to figure out which closing tag goes with which opening tag? Of course you have, you’re a web designer. With the new tag pair highlight feature in Dreamweaver CC 2014, you can instantly identify an element’s mate. Just click on either the opening or closing tag in Code view and the matching tag is highlighted. It’s a simple, straightforward fix to a vexing, mind-scrambling problem. Nice.
Okay, that’s two from column A (big, in-your-face features) and two from column B (subtle, sotto voce features). How about I show you how to make the Hot into the Hidden? To assist new users with Dreamweaver’s complex toolset—and its even more complex integration with other products in the Creative Cloud—the latest version introduced the multi-faceted Help Center.
The first time Dreamweaver is run, a new welcome screen greets you to provide a tour, should you need it. In addition to targeted videos, a variety of pop-up messages appear as you initially try out specific UI elements.
For example, the first time you click on any Tag Selector icon, you’ll get a tip with more info on the new Element Quick View feature. There are also pop-up details on bringing other Creative Cloud products, like Behance, into play.
For the total Dreamweaver newbie, the Help Center enhancements can be a genuine leg up. However, if you’ve been working with the program for any real length of time, your “ahhhh” might become an “arrggghhh.” Here’s how you politely say thanks, but no thanks:
All the various tips and pop-ups are now effectively sidelined and you can get back to building brilliant web pages, uninterrupted. Of course, if you ever want a refresher, just return to Preferences, check that checkbox and hit Reset; you’ll be good to go, all over again.
For more insights into Dreamweaver, check out the full array of Lynda.com Dreamweaver courses including my own set.
Tags: CSS, CSS Designer, CSS3, DOM, Dreamweaver, Joseph Lowery, Live View, Web
Check out these popular Web courses.
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.