Product Reviews

Dreamweaver has dominated the world of web design since its introduction. Recently, however, there's been growing concern that it's been trading on past glories, and with Adobe's takeover of Macromedia there was even the possibility it might be replaced by Adobe's own GoLive. Thankfully, it's GoLive that's gone, with Dreamweaver now central to all of Adobe's CS3 web offerings.

A fresh Expression

With GoLive's demise, Dreamweaver's biggest rival is now Microsoft's Expression Web. Moreover, where GoLive's inherent bloat ruled it out as a serious threat, Expression is the model of streamlined efficiency, which makes it all the more disappointing that Adobe hasn't extended its new CS3 cross-application interface to Dreamweaver.

Expression trumped the old Dreamweaver by recognising that modern web design is now defined by efficient CSS handling. Here, Adobe has risen to the challenge and borrowed a number of features from its new rival. To begin with, when you create a new page, you can now use one of a wide range of templates based on CSS positioning rather than HTML tables, while new visual aids make it easier to work with the layout's <DIV> building blocks. CSS-based formatting is also easier thanks to the consolidation of previously separate palettes into a single unified CSS Styles panel, a new toolbar that lets you swap between CSS media types, and the ability to move internal styles to and between external stylesheets.

Despite Dreamweaver CS3's improvements, Expression Web's CSS handling just edges it for efficiency and usability, but that's by no means the end of the story. Ultimately, page designs should work in practice. Here, the fact that Dreamweaver provides a built-in CSS reference complete with information on browser support is invaluable. Even more useful are the workarounds to known browser issues that Dreamweaver automatically adds to its template-based pages. Complete with explanatory comments and best-practice suggestions, these are a real education.

The final proof of just how serious Adobe is about helping users create CSS-based designs that always work as expected is its new Browser Compatibility Check. Here, you can target particular versions of Internet Explorer, Firefox, Netscape, Opera, Safari - even the old Mac version of IE - and any items on the page that might cause problems are highlighted. A link is then provided to Adobe's new CSS Advisor site, where you can see if anyone has posted a workaround. Compatibility checking doesn't entirely replace trying out your designs under different browsers, but it's a huge step forward. Moreover, while Expression Web boasts of its compliance with the core (X)HTML and CSS standards, Dreamweaver CS3 betters this by recognising that it isn't just the standards that matter, but how these are supported by the main browsers.

The Ajax difference

Dreamweaver CS3 also leaves its new rival standing with its much wider support for standards such as PHP, JSP, ASP and ColdFusion. This has been extended to encompass support for the popular and powerful new Ajax (Asynchronous JavaScript And XML). It isn't

ADVERTISEMENT

really a new standard at all, but rather a new way of getting existing standards - JavaScript, XML, XHTML and CSS - to work together.

The benefits of Ajax are clear, and modern sites such as Google Maps, Yahoo and Flickr show just what a difference it can make to the end user experience. But as anyone who's tried to add some Ajax magic knows, it can be fiendish to implement. Well, not any more: Dreamweaver CS3 offers a new "Spry framework", which makes it child's play to add Ajax - in most cases, you simply drag and drop a Spry "widget" onto your page. Within your code, the structure of each widget is handled by simple HTML that can be edited with the Parameters tab of the Properties panel. To control the widget's appearance, you can customise a dedicated external CSS stylesheet, while the really clever bit, the widget's behaviour, is handled by an external JavaScript file that you shouldn't even need to touch.

The implementation is simple, but it remains powerful. There are options for validating form elements such as option boxes and text areas, so you can check that end user data input meets certain criteria as it's entered - no more blanket form rejections because it wasn't filled in correctly. There are also five options for live data handling via XML so you can, for example, add an interactive product listing table that can be sorted without the need for a page refresh. When used in conjunction with a Spry "detail region", you can also set product details and an image to appear elsewhere on the page when a product is selected.

Perhaps the most useful Ajax-based options will be the new user interface components. With the Menu Bar widget, you can add navigational menu buttons that display submenus when hovered over. With the Collapsible Panel, you can hide and reveal content by clicking on the panel's title. With the Tabbed Panel, you can display multiple panels one at a time, which is just what the Accordion widget does too. In all cases, the Ajax works to make a large amount of information more accessible and manageable.

Adobe also throws in a range of Spry-based effects. These are accessed from the Behaviours panel rather than the Insert menu and are designed to let you add visual transitions to elements, making them grow, shrink, fade, highlight, squish and so on. This might smack of the bad old days of gratuitous DHTML but, used sensibly, they can give a page a lift, draw the end user's attention and simply make the page more involving - in short, better designed. This is true of the Spry framework in general, and there are few sites that couldn't benefit from some Ajax-based dynamic design.

Conclusion

That's about it for new internal power, but, as always, Dreamweaver benefits greatly from its supporting applications, particularly if you're buying it as part of one of the CS3 Web suites that includes the tight integration with the latest Contribute and Fireworks. Integration with the latter has been greatly improved, with the ability to paste copied objects directly into Dreamweaver, while maintaining the link to the original, so you can quickly edit and then paste back the new version with all optimisation settings intact. If you buy either of the Premium editions of the suites, the same capability is offered with the bundled version of Photoshop CS3 Extended. And as a standalone app, Dreamweaver includes Bridge CS3 for media management, while Device Central CS3 lets you see what content will look like on a range of mobile devices.

Over recent years, Dreamweaver has idled as Macromedia concentrated on Flash as the best way to enhance the end user's web experience. With Dreamweaver CS3, Adobe has rightly put page-based authoring back centre-stage.