Adobe Dreamweaver CS4

Some actual new stuff equals the most worthwhile Dreamweaver in years
By Kevin Schmitt

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.