Adobe Dreamweaver CS4 beta

by Edward Mendelson

Adobe released public betas of the next versions of Dreamweaver, Fireworks, and Soundbooth on May 27th—all of them parts of the forthcoming Creative Suite 4 (CS4) suite—and I took a quick look at the Dreamweaver beta. Dreamweaver is Adobe's Web-design application; Fireworks is its vector graphic editor, and Soundbooth is its audio editor. Adobe isn't saying, but it's easy to guess that public betas of Photoshop and other Creative Suite apps are on the way. If all the CS4 apps are as impressive as the Dreamweaver beta, then Adobe is working its way to one of its best releases in many years.


The betas will continue working for either 48 hours or until the shipping version of CS4 arrives, depending on whether or not you have an existing CS3 serial number. If you don't have a CS serial number, the betas only work for 48 hours after you first launch them. If you do have a CS3 license, enter it when prompted on Adobe's site while working your way to the download, and the site will generate a serial number that keep the betas alive until CS4 ships. Adobe won't say exactly when the full CS4 suite will ship, but it's willing to say that the product life of a Creative Suite version is 18 to 24 months, and, since CS3 shipped in March 2007, CS4 should arrive sometime between September 2008 and March 2009.
Buzz up!on Yahoo!

Despite its still-overloaded interface, I was mightily impressed by Dreamweaver CS4, which has had a thorough makeover that brings it fully into the twenty-first century. The most obvious new feature is a Related Files toolbar that appears below the top-line menu, which lets you navigate among all the files referenced by your web page, including multiple CSS, JavaScript, and XML files. The cluttered and incomprehensible Insert toolbar has been replaced by a panel in the right-hand sidebar, and the icons have labels so I no longer have to hover over each icon until a tooltip tells me what it means.
A terrific, long-needed feature is the Live View Mode, which displays dynamic data views right inside Dreamweaver, without making you open a browser. Because Dreamweaver is designed to have the same functionality on Windows and the Mac, this live view can't use the Windows-only Internet. It's based, instead, on the open-source WebKit browser engine, which is the basis for the Safari browser. This means you'll still have to test your work in Internet Explorer and Firefox—which you can do directly from Dreamweaver's menu—but you won't have to launch a separate browser window to see what your dynamic view will look like live. I like the way I can "freeze" the JavaScript in Live View so that I see the state of the dynamic code at any moment, for easy debugging.
Adobe Dreamweaver CS4 beta

Dreamweaver: From HTML to CSS

A less spectacular, but even more essential improvement is that Dreamweaver no longer acts like an old-style HTML editor with modern features tacked on. In Dreamweaver CS3, the Properties panel at the foot of the editing window displayed only HTML format options, and you had to go to the cluttered stacked tabs on the sidebar to work with CSS styles. In CS4, the Properties panel has two buttons that switch between displaying controls for applying HTML tags and controls for applying CSS tags. For me, this makes Dreamweaver finally usable as a day-to-day website editor, because CSS is at the heart of every web page I edit. I also like the new Code Navigator feature that pops up a little window with the hierarchy of the CSS style at the cursor location. If I want to edit the underlying CSS code directly, a click in the window jumps to the right place in the relevant style sheet.


Other features I like include the ability to use an HTML table as the data source for a dynamic data view, instead of only XML as in Dreamweaver CS3. The interface for inserting dynamic data from an XML file or HTML table is also improved over the one in CS3, and seems to me to be about as easy to use as the one in Microsoft Expression Web 2. I wasn't able to test another nifty-sounding new feature that tightly integrates graphics with Photoshop, so that when you insert a Photoshop PSD file in a web page as a JPEG, the JPEG has an icon that's a live link to the original PSD file, letting you update the JPEG when you make changes in the PSD, or automatically modifying the PSD to match the changes you made to the JPEG.

Adobe Dreamweaver CS4 beta

Dreamweaver: Where the Beta Needs Work

Not everything is perfect in Dreamweaver country. I would be much less annoyed by error messages that tell me I have to save the page before I can do something (like set up a data view), if error message included a button that I could simply click in order to save the page. The interface is still a maze of options with unfamiliar names, and, whenever I closed down an element like the Properties menu, I had to do a lot of menu-hunting before I figured out how to open it up again. Granted, this is an enormous app, and some degree of menu complexity is simply unavoidable. Chances are that the target audience will learn the ins and outs pretty quickly. And, I have to say, the massive range of keyboard shortcuts is already making my work in the program more efficient. Still, I think more can be done to simplify the initial barrier to entry.


Microsoft recently released a Expression Web 2, an update to the only serious rival to Dreamweaver (Microsoft Expression Web). We'll post a more detailed look at Expression Web 2 soon, but the big news about Expression Web 2 is it now has built-in support for PHP pages, support that Dreamweaver has had for years. Expression Web is still a cleaner, slightly more usable app than Dreamweaver, with a beautifully-designed interface for creating dynamic data views, but with one serious problem. If you create data views that run entirely in a browser—without using server-based support from ASP.NET or PHP or some similar technology—then the dynamic data views created by Expression Web won't work in the Safari browser, unlike similar data views created by Dreamweaver, which work anywhere. If you're an ASP.NET or PHP designer, this problem won't deter you from trying Expression Web, but this definitely rules out Expression Web for sites where those server-based technologies aren't available.

On the basis of this beta release, I can be sure that Dreamweaver CS4 the richest, most feature-packed Web site designer ever written. Whether it's also the best is something that I'll have a stronger opinion about when I've spent more time exploring the shortcuts and conveniences hidden in its massive interface. Look for an updated review when Adobe brings out the final version of the code when the CS4 suite ships. In the meanwhile, if you're a Web designer, check out the beta.