Adobe Dreamweaver CS4 new features
Along with the rest of its Creative Suite software, Adobe has just updated Dreamweaver to the latest version - CS4. Adobe's claiming lots of new features - but do the new features make it worth the upgrade price?
02 December 2008
The first impression when launching Dreamweaver CS4 isn't that positive. Despite the overhaul of the interface to bring it in line with the rest of Adobe's products (quite honestly something that should have happened with Dreamweaver CS3) the overall impression is one of little change.
If anything, the interface shows itself needing a real rethink: on all but the largest of monitors, it's hard to see what you're working on for all of the toolbars and panels. Adobe's interface means that these can be stashed away easily, but that defeats the object of them being there.
That's not comforting when you've forked out a few hundred pounds for the upgrade. Dig a little deeper, though, and the benefits of change begin to make themselves known.
In established software most new features fall into the 'nice to have' category - they look good on a features list, but you seldom use them. But with Dreamweaver CS4, Adobe has added a couple of features that you'll be using again and again.
Code Navigator
The first of these is the new Code Navigator. When you're editing HTML in the WYSIWYG view and want to make a change, finding the relevant piece of CSS takes time. Now, when you hover over an element on a HTML page, Dreamweaver's Code Navigator icon appears - click on that and you are presented with a list of all the CSS attributes that are related to the HTML element you hovered over. This makes it really, really rapid to move from your HTML to exactly the right part of the CSS. It's not quite perfect in use - the icon takes just a little too long to appear - but it's a fantastic productivity aid. Thankfully, Code Navigator also works when you're editing code by hand - there's a Code Navigator icon to the left of the working area; clicking on this brings up references to CSS that are relevant to where your cursor is.
Related Files
A feature that works well in combination with the code navigator is Related Files - and it's such as simple idea that it's a small wonder it's taken so long to appear. When you are editing a file, Dreamweaver now shows you all of the files that are referenced from that file - whether it's HTML, CSS or JavaScript. It's only a small aid, that saves you from opening the files manually, but it's something you quickly get used to and wonder how you managed without - making it easy to jump between related CSS and HTML files, for instance.
Live View
To emphasise how most of Dreamweaver CS4's changes are focused on productivity, Live View is the next big change. A big issue when working with dynamic sites, where data is pulled to the page using AJAX or some other form of control, is that Dreamweaver couldn't show you what the live page looks like, even in its WYSIWYG view. It would, instead, show you the underlying code, formatted roughly - not nearly good enough to see how a data control might display the data itself. Personally, we never found that too much of an issue, because it's not terribly difficult to open a browser and browse to the page - but Live View shortcuts all of that by displaying the page, as it would appear in a browser, with all of the data in place. You make a change to the code and the page immediately reflects how that change looks, using live data. Again, it's one of those 'why didn't it do that before?' features, but once you get used to it, it's something you use again and again.
Extended Code Hinting
The Code Hinting that works so well with HTML and CSS is now extended to include popular JavaScript frameworks, such as Spry and JQuery. Again, hardly rocket science, but of great benefit on a day-to-day basis.
The best of the rest
From this point in, the change become progressively less and less riveting.
There's Photoshop Live Objects, which lets you edit a graphic - using Photoshop - from directly within Dreamweaver. This is useful but hardly revolutionary - and most Web developers would prefer to work directly with PNG, JPG and GIF files to manually get the best compression results.
There's support for Adobe's new InContext Editing. This is best thought of as an on-line version of Contribute - simple content management (well, page editing, really). Unlike Contribute, you can edit Web pages without installing any software - InContext Editing works via a Web browser, and allows anyone with access rights to edit a page where editable regions have been created. Access to the system is currently free, while it is still 'pre release' - and there's no indication of what will be charged once the InContext is launched.
There's support for version control, via Subversion - an open source version control system. Visual Studio Team System this is not, but it's powerful enough to work well for many development companies.
You can now create Adobe AIR applications from directly within Dreamweaver. Adobe's AIR, while promising, is still to set the market alight, but it's a useful addition nonetheless.
It's also much easier to add widgets to a page, such as those from the Yahoo Under Interface Library (YUI). These can be added via the Extensions Manager and are then available for dragging and dropping onto the page you're editing. It's very nifty and quite time saving - though it's of little value of you're the kind of person who works in code all of the time, you'd probably rather handle it by hand.
The bottom line
While Dreamweaver's WYSIWYG layout edit is useful, many Web developers code by hand - and it's to hand-coders that the majority of improvements have the least relevance. They are all of most benefit to those who work only occasionally with code.
While Dreamweaver still rules the Web development roost, it's interesting to see that most of the up-and-coming competition (such as Coda on the Mac and even Microsoft's Expression on the PC) are more firmly aimed at coders. Beside these newbies, Dreamweaver looks decidedly old-fashioned and clunky, even sporting the Adobe Interface.
But it's certainly not all bad news. Even for coders, and even taking into account that most of the new features are evolutionary, the new truly productivity-enhancing features - such as Code Navigator, Related Files and Live View - make it worth upgrading. These kinds of features are rare in an update - they're so useful that you immediately use them, and, once you've started using them, you quickly can't imagine how you managed without them.
So the answer to our initial question is yes - Dreamweaver CS4 is worth the upgrade fee, for these features alone. Although we've not looked at Fireworks in this review, the combined new features of Dreamweaver and Fireworks make the upgrade to the whole suite for Web designers and developers a compelling one.
