Dreamweaver CS3: The Dynamic Web Page Made Easier

The new kid on the Adobe® Creative Suite® block, Dreamweaver®CS3 puts as much–or as little–of new web design technology hotness at your fingertips as you want to handle.

Box shot courtesy of Adobe

Times are changing; it’s a different world now.

As we’re sure many people have, it’s been an interesting experience around these parts unlearning the phrase “Macromedia Dreamweaver”; the two are about as insparable as “Coca” and “Cola”, such was the widespread popularity of what had become the web-design king-of-the-hill. Congruent with that was the thought of what Adobe was going to do with Dreamweaver now that it had it, and once it was obvious that it was going to have a Suite future.

Wonder no more. Adobe Dreamweaver CS3 is here, and it has a lot to offer, easier ways to do things with Spry, Ajax, and CSS, including features specifically designed to up your CSS game.

A New Face for CSS

In Adobe’s view, based on what they see is the most valuable new things they bring to the show, the most important is the way Dreamewaver CS3 allows you to work with CSS as painlessly as possible.

CSS, like it or not, seems the wave of at least the near-future; books are still being written about it at quite a clip, and sites like the CSS Zen Garden aptly demonstrate the power and efficency that CSS can provide. But, one still has to know it, and the journey can sometimes be a difficult one.

Dreamweaver CS3 wants to help. With improved ways of working with CSS, we found the whole thing just a little more intuitive:

• Great new Visual Aids allow inspection of the CSS layout in the browser window with highlight colors and click-selectable box boundaries, laying the CSS book of a given page open for fast and easy examination
• A positive metric armload of ready-made CSS layouts which can simply be used as is and are also profusely commented for those either using CSS or who know CSS and need a ready-to-go starting point that can be bent to the designers’ will
• Easier CSS Management, allowing any CSS rule to be lifted out of any document, exported to a new external CSS file, or rather easily attached to any other document the designer may be working on via a dialog box and a few clicks
• And, for learners, the Browser Compatibility Check function. This will find problems with your CSS and identify them, list them in a pane in the Results panel, and though a hyperlink connect you straight to a relevant page at Adobe’s CSS Advisor. This knowledge base, a website mounted by Adobe, is both a learning tool and a diagnostic tool which takes the problem identified by the Compatibility Check and offers suggestions for solutions–which are themselves commented on and rated by users. It’s a little like having a co-worker who’s a CSS know-it-all at your elbow, but you don’t have to pause your iPod to hear their answer.

It all may not make you a CSS wizard–but it could help you look a little more like one.

We’ll keep it our secret, promise.

Dreamweaver’s CSS Browser Compatibility Check finds a problem and, via a little link on the bottom, can connect you to a possible solution. (click to enlarge)

Going Dynamic With Spry

Dreamweaver CS3 new includes the Spry framework for Ajax. If that sounds a little strange to you, then you’re missing out on some of the new web-toys that can provide you with dynamic, interactive content.

Ajax, of course, is the technology that allows designers to create web pages that can update without having to completely reload. The Spry framework puts Ajax withing closer reach of web designers by providing Ajax-comprised “widgets” that perform dynamically-updated tasks.

Whether or not it’s an advanced subject for you, Dreamweaver does go a long way toward making these things more accessable to those perhaps not so experienced in adding interactive content to a web page. While there’s still a learning curve if you aren’t familiar with Ajax and Spry, it’s been shortened considerably, as the process of creating a tabbed or accordion interface or imbuing a graphic with a visual effect (such as growing or shrinking) now amounts to little more than selecting the object and assigning a behavior to that object. Experience users will find this a relief, and learners will find this a boon.

I Can Has PSDs?

With all dynamic-web-content-having taken into account, there is Suite integration to be had here. Users of Photoshop have yet another reason to invest in Dreamweaver; import of native graphics files from the two applications without the need to convert to intermediate formats. The import process even allows you to specify Alt text as part of the import process.

Along with the ability to import natively comes one mad useful feature, the stalwart Edit Original–you can now leap back into Photoshop during design, change the graphic as necessary, then leap back into Dreamweaver and continue. We’ve always found it incredibly useful in InDesign, and now we have it in Dreamweaver too. Sweet.

Still A Familiar Face

For all its changes, those hoping for a CS3-style Extreme Makeover might be a little disappointed. Everyone who knows and uses Dreamweaver should still be happy. There is a new shinier finish on the application as a whole, but the panels still work the way they always have had, and you’ll largely find familiar tools in familiar places. Far from a missed chance on Adobe’s part to recast Dreamweaver in the CS3 image, it’s actually more like not messing with success.

One of the reasons, in this reviewer’s opinion (having had the chance to use both), one of the important differences between Dreamweaver and GoLive is that, in as much as any of the applications could be intuitive, the Dreamweaver interface just seemed to work a little more naturally than the GoLive interface did. Tool usability goes a long way toward tool popularity, and Dreamweaver always seemed the more usable.

Everything you were familiar with in Dreamweaver is still where you left it, and that should work out just fine with a lot of DW users.

With all the new goodies, we’re still in Kansas, Toto–The Dreamweaver CS3 interface retains the familiar look and feel of past editions with a CS3 finish (click to enlarge)

The interface improvements are small but important–on a personal level, the use of tabs in the Insert panel rather than a drop-down list, since we like having a quick-view of all our tools and putting the names of the groups on the tabs puts what’s available to us up in front, where we can see it.

The Skinny

Now that Dreamweaver is a full-fledged member of a full-version Creative Suite, it has a lot to offer not only new users but experienced Dreamweaver-ers. Use of CSS and Ajax/Spry-based dynamic content has been made less arcane–with little no need to learn Javascript or code, web designers will be freed to concentrate on content presentation rather than toiling away under the hood. Enhanced CSS handling provides for easier deployment of CSS-based websites (whether using internal or external CSS). No less important than the content-creation tools is the connectivity to resources (both embedded and web-based) that directly promote and encourage learning better CSS practices.

That alone makes the program worth the upgrade; it not only makes what’s out there more approachable but also equips the web designer to evolve with the ever-developing standard–the CSS advisor is mad impressive.

The ability to import Photoshop files is merely the garnish on top of this dish. If you’re still working in Dreamweaver MX 2004 or Dreamweaver 8, you owe it to yourself to upgrade to this.

Dreamweaver CS3 is available standalone (US$399), as an upgrade product (US$199), and is a member of the Creative Suite 3 Web Premium (US$1.599, Upgrade US$499) and Web Standard (US$999, Upgrade US$399) editions. The systme requirements: Intel Pentium® 4 or better with Windows XP SP2 or Vista; PowerPC G4, G5 or mulitcore Intel with Mac OS X 10.4.8 or later.

Visit Adobe to find out about purchase details and more detailed system requirements.

Correction: The previous version of this article (prior to Sunday, 8 July 2007) was in error in stating that Dreamweaver CS3 can import native Illustrator files. Dreamweaver CS3 cannot import native Illustrator files, and the author regrets the error. This current version of the article is identical to the earlier version except that any statement that DW imports Illustrator files have been elided–ed.