Adobe Dreamweaver CS4

It only took the better part of a decade, but Dreamweaver CS4 finally adds enough features and enhancements to earn a reprieve from what I thought would be the inevitable call to nuke it from orbit. And while it doesn't get all the way to where I'd personally like to see the product, Dreamweaver CS4 seems to have reversed its slow (and sad) decline, and for the first time in a very, very long time, I've come to like where things are going.

Back during the CS3 cycle, I was harsh on Dreamweaver. The poor thing had been limping along since at least 2000, and Dreamweaver CS3 looked positively ancient next to the new hotness of streamlined, lean-and-mean tools like Panic's Coda (hell, even TextMate seemed a better choice). At the time, I was longing for the Dreamweaver of old, that awesome code-respecting bit of goodness that seemed to peak at about version 2 (circa 1998), and was hoping for a return to form -- preferably an addition-by-subtraction approach suitable for today's site building needs.

Well, Dreamweaver CS4 doesn't even come close to that vision, but darned if they didn't make the incredible heft of it all work this time around. Why it works is a reason I didn't fully consider: sure, we're busy writing sites to standards, generally separating markup from styling from scripting, but that doesn't mean we're writing incredibly nimble code. Indeed, take any modern site, and you've got a metric ton of HTML or PHP on top of oodles of CSS on top of huge amounts of JavaScript, all sitting in different files and all expected to work together as a cohesive whole. Dreamweaver CS4 excels by gathering all the ways earlier versions addressed these different types of code, then enhancing the whole experience by drawing on those strengths and tying everything together with a neat little bow. Let's go around the horn with what's new and notable, and hopefully you'll figure out just what the hell I'm talking about.

Interface

Ahh! That's really all I can say here. Boy, did the Dreamweaver CS3 interface look downright dated (less so on Windows, more so on the Mac). That's all changed now, as Dreamweaver CS4 sports the same dockable panel and tabbed document interface as other programs in the CS4 design lineup (fig. 1). As with the other CS4 products, a workspace dropdown helps you organize Dreamweaver by task.

Figure 1: The revised Dreamweaver interface, as shown on a Mac.

However, I'm not going to wait until the drawbacks section to get this first rant off my chest: as a mostly Mac user, I wish Adobe had taken it all the way and added the Application Frame (used to great effect in Photoshop and Fireworks, among others) into the mix. If there were one program that I'd love to have in a completely self-contained, smaller window on my Mac, it's Dreamweaver. It could pull duty as anything from a text editor to a complete development environment that way, and I feel less likely to use it as such if there are panels strewn all about. Heck, even being able to dock panels to the document window would have sufficed. Windows users, of course, are still golden here -- the Application Frame model that has Mac users in such a tizzy has been an ancient standard for just about every program on the Windows side, Dreamweaver (naturally) included. However, Adobe has taken its own approach to the look and layout of the application window on the Windows platform, choosing a custom look instead of the regular system chrome, which I like (fig. 2) -- it's clean, unobtrusive, and gets out of your way. In any event, in an upgrade full of stuff to like, the lack of the Application Frame on the Mac is definitely disappointing.

Figure 2: Dreamweaver adopts the CS4 design look on Windows as well, sporting its own window frame to do its business in.

Code wrangling

Even basic sites these days have at least one or two ancillary files associated with any given page -- a stylesheet here, a .js file there -- and changes to any of these external files can mean big differences in the page you're working on. To address this problem, Dreamweaver CS4 boasts a related files feature, which automatically kicks in when DW detects links to external files (fig. 3).

Figure 3: Related files (highlighted) automatically show up in the document window. In this case, we've got four extra files associated with our index page.

Clicking on any one of the related files opens that file in the same tab (splitting the view if you're in Design mode), but you can also right-click on a file and bust it out to its own tab. You can make changes to, say, a CSS file, refresh the Design view, and the change is reflected in the source document. Great timesaver.

But the fun doesn't stop there -- let's talk about how well Dreamweaver continues to handle CSS, starting with the shiny New CSS Wizard. Now, CSS is a wonderful specification, but it can be kind of a bear to work with at times, never mind get up to speed with in the first place. Dreamweaver is here to help -- for example, just select some text in the Design view and head to the Properties panel, which is now split into two parts: HTML and CSS (fig. 4). This split better represents how you should be structuring you pages anyway: HTML for markup and CSS for styling information. In any event, with the CSS tab of the Properties panel selected, just pull down the Targeted Rule menu and select <New CSS Rule>. From there you're presented with the New CSS Rule box (fig. 5), where Dreamweaver can automatically fill in your compound selector to make a new rule from. The cool thing is that you can click the Less Specific and More Specific buttons to broaden or refine your selector, meaning that you can affect entire areas of your page from a single piece of text just by widening or narrowing the scope of the selector.

Figure 4: The Properties panel now toggles between HTML and CSS, effectively "forcing" you to separate markup from styling, as it should be.

Figure 5: The New CSS Rule box shows you how your selector will be constructed.

One more nugget of creamy CSS goodness comes in the form of the Code Navigator, which works the same regardless of whether you're in the Code or Design views. All you have to do is select an element in the page, and after a moment, a little navigator icon pops up. Click it, and you're presented with the entire cascade in a single list (fig. 6). Even better, click on any of the items in the cascade, and the CSS document instantly becomes active and places your cursor right at the CSS rule associated with your selection. Anyone who has found themselves switching back and forth between a HTML page and a CSS document, all the while trying to find just the right rule amongst a sea of CSS, should take to the Code Navigator like a monkey to a trucker.

Figure 6: The Code Navigator shows the entire cascade, complete with styling information, for any element on the page with a simple click or keystroke.

Moving away from CSS, let's touch on a couple of additional things that fall into this code wrangling category I've painted myself into a corner with. Now, Dreamweaver's code editor has been pretty darned good for as long as I can remember, a fact which has not changed with the unveiling of CS4 (thank goodness). Adobe has seen fit, however, to add code hinting for both JavaScript and AJAX (fig. 7), which may or may not benefit you depending on your needs, but don't you feel better knowing that those additions are there? I know I'll sleep more soundly.

Figure 7: You don't have to type quite as much when you use Dreamweaver to write JavaScript.

One more big feature of note before we move on is the ability to use regular ol' HTML as Spry data sets. Dreamweaver CS3 introduced a fairly straightforward way of adding a bit of AJAX-y goodness through XML data sets, but it required that you knew some XML in order to fully take advantage of it. In Dreamweaver CS4, though, you can now just create a HTML table (or some nested DIVs, or even a list) containing the data and images you'd like to show, and then use the completely revamped Spry Data Set wizard (fig. 8) to create what Dreamweaver terms Data Selectors. So, for example, you can create a page that contains simple event information, and when you click on an event, another area of the page automatically displays expanded data. This sort of stuff is really hard to do otherwise for those who have no experience with AJAX, yet the refinements to this feature bring this sort of interactivity to everyone.

Figure 8: Here, an HTML page containing a simple table forms the basis for a Spry data set, which is a huge development if you're not really into XML.

Views, views, views

Dreamweaver offers an almost overwhelming array of choices when it comes to how you can view your pages, and CS4 only piles on, which is generally good. First, you've got your split code view -- just select Split Code from the View menu, and you'll be magically transported to a world where you can view the same page in two adjacent code view windows (fig. 9), which is wonderful for keeping an eye on one part of your code while working in another section of the same page. Split code view can be arranged either horizontally or vertically, depending on your preference.

Figure 9: And there was much rejoicing -- thanks to Split Code view, I can view the top and bottom of a page's source code at the same time.

Then there's the new Live View. Finally, Dreamweaver includes a modern rendering engine (WebKit) for an accurate view of how your pages will look in a standards-compliant rendering engine. Just hit the Live View button in the document window, and you're sittin' pretty in WebKit (fig. 10). You can also switch to Split view and see your code side-by-side with the Live View. Make a change to your code, click in the Live View window, and the page is updated with the change you made. Or, if you prefer, you can click on an area in the Live View window and your code view jumps to that part of the code.

Figure 10: Where the Design view stumbles (top), Live View renders accurately (bottom), thanks to the built-in WebKit HTML engine.

Live View becomes really powerful when combined with Live Code view. While the two views perhaps should have been named a little more dissimilarly, the fact remains that the two working in concert make for a tremendously useful tool. Let's say you have a page with a liberal amount of JavaScript in it, and rolling over one section updates another section of the page. You can actually see how the code looks at each rollover state by enabling Live View and Live Code, and then interacting with the page. The code view turns yellow to reflect the Live Code state, and it updates to show what is going on (fig. 11). You can even freeze JavaScript with a keystroke, allowing you to inspect things like which CSS rule is active at any given moment. You can then even invoke the Code Inspector to jump right to the rule in an external stylesheet. Really powerful stuff.

Figure 11: This screenshot may not do this feature justice, but the gist of what's happening here is that the Live Code view shows the source code changing (compare the top code with the bottom code) as you interact with objects on the page, giving you a good idea of what's happening behind the scenes.

Quick Hits

So, we've hit on the big stuff. Let's look at a few things of note that I couldn't manage to shoehorn into arbitrary categories:

Photoshop integration actually works this time around. I was really miffed with the so-called "integration" with Photoshop in CS3 -- it was highly touted in the marketing materials, but it didn't work worth a damn. I'm very pleased to say that Adobe really came through with it this time around. Simply insert a native Photoshop file as an image into your page, use the resulting Image Preview box to save a Web-ready copy, and the new image is placed into your page with a document sync icon in the top corner (fig. 12). This icon will tell you when the source image has been altered, and you can then choose to update the saved image to reflect the most recent source version. It works great, and moves this feature from the "beyond useless" pile into the "really useful" one.

Figure 12: Dreamweaver shows when your Photoshop source file has been modified.

Built-in Subversion support. Those of you working in a collaborative environment may be pleased with the addition of being able to work with Subversion servers now built into Dreamweaver CS4.

AIR authoring. Dreamweaver now allows you to write desktop applications using HTML, CSS, and JavaScript and output them for the Adobe AIR platform for execution on Mac, Windows, and Linux systems.

InContext Editing. This is a new service which, as of this writing, is a free preview, though Adobe eventually plans to make this a paid resource. In any event, the gist of it is that Dreamweaver CS4 will allow you to specify areas of your pages that end-users can edit without having to know anything about Web design or development. You publish to the InContext system, and users can log on and edit pages directly through a Web browser without having to install any additional software or learn any HTML.

New way to embed Flash movies. When you add a SWF to your page, Dreamweaver CS4 automatically takes care of all the embed and object code by using the world-famous SWFObject framework to handle the heavy lifting. The advantages SWFObject provides are numerous, but the main pluses are automatic Flash detection that gets around that ridiculous (and now moot) Eolas patent workaround Microsoft implemented in IE, as well as automatic Flash Player updating if your target audience is using an older version of the Flash Player.

The Gripe List

There are a few things that bother me about Dreamweaver CS4 (other than the lack of the Application Frame on the Mac, as I complained about earlier), but we're nowhere near the deep-rooted disappointment level I was at for CS3. Here are three additional things I find bothersome, in no particular order:

One, Dreamweaver is still awkward for editing pages that use server-side technologies, such as PHP. Sure, you can define sites and do remote editing, but it really isn't a great solution (the Sites panel needs an overhaul, while we're at it). Anyway, it would be super-cool if Dreamweaver were somehow able to locally interpret and execute PHP scripts, especially now that we have Live View to accurately render pages.

Two, speaking of Live View, the integrated WebKit renderer really underscores how busted Design View really is. It was really only any good on the late 90s anyway, and it is just about worthless these days, what with the complexity of today's server-side technologies and robust JavaScript. Get rid of it. It's only useful in the most simplistic of situations, and while I realize the need to keep longstanding features available for legacy users, Design View is long past any semblance of relevance in my opinion. Make Live View the new Design View, and wean users off the long-dead WYSIWYG approach.

And lastly, I'll continue on this riff by continuing to be annoyed that changes made in code view aren't immediately reflected in Live View (or Design View, for that matter) -- you have to manually refresh via a keystroke or mouse click. Is there some technical reason behind this? In many text editors, if you have a preview window active, any change you make in the source text is instantly reflected in the preview. Why must we click in the inactive window to get it to update in Dreamweaver?

The Bottom Line

Discussed new features? Check. Whined about a few things? Check. OK, we're ready to render the verdict. While the advice put forth in my Dreamweaver CS3 review to "cut the fat" was resoundingly ignored, I'm happy to say that Adobe's decision to "embrace the heft," as it was put to me, really takes Dreamweaver in solid new directions. Dreamweaver hasn't seen this many new and profoundly useful enhancements since the Clinton administration, and it certainly is a welcome sight indeed. As for ratings, I'm quite pleased that I don't have to qualify my findings, give any grudging endorsements, or strain to find any positive angle this time around: as both a new purchase or an upgrade, Dreamweaver CS4 earns a very Strong Buy rating. As for the various suite bundles it comes with, Dreamweaver definitely pulls its weight by adding significant value across the board.

Dreamweaver CS4 is currently shipping, with a $399 price tag for a new copy. Users of Dreamweaver MX 2004 or later OR GoLive 5 or later can upgrade to Dreamweaver CS4 for $199. Yup, GoLive! Dreamweaver CS4 is also available as part of the CS4 Design Premium, Web Standard, Web Premium, and Master Collection bundles. Check Adobe.com for bundle pricing information.

Filed under: Review on November 5th, 2008
Tags: Adobe, CS4, Dreamweaver

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.