Dreamweaver CS3

Adobe Dreamweaver CS3 has always been a solid tool for creating and maintaining Web sites. The latest version builds on an already powerful product by adding support for Intel processors, Photoshop integration, and templates and tools that simplify CSS (Cascading Style Sheets) design. It also expands into new territory by adding the Spry Framework for Ajax, a combination of technologies that includes JavaScript, CSS, and HTML for building interactive user interfaces such as pop-up navigation menus, tabbed panels, interactive tables, special visual effects, real-time form validation, and more, without having to return to the server to refresh the page.

Universal at last

Dreamweaver CS3 is the first version of the Web-design program to appear with the Adobe name; it’s also the first version to run natively on Intel Macs. Running on an Intel Mac, Dreamweaver CS3 is more responsive than Dreamweaver 8 (   ) running on Rosetta: startup time is faster; typing feels quicker; and sitewide operations, such as updating templates and broken links, are speedier. For example, updating a template in Dreamweaver CS3 on our 2.66GHz dual-core Xeon Mac Pro took just under a minute, as opposed to nearly four minutes in Dreamweaver 8. In another test, we relocated a site file in Dreamweaver, a process that necessitated changes to the site’s page links. It took Dreamweaver CS3 just 11 seconds to change all the links on our 350-page Web site, compared with 43 seconds for Dreamweaver 8.

The long and winding road

Full integration of Dreamweaver into the Adobe pantheon of creative programs will take time. Unlike Flash CS3, which has adopted the Adobe look-and-feel, Dreamweaver CS3 has the same user interface as Dreamweaver 8 (this may be welcome news for longtime users accustomed to the Macromedia style).

However, Dreamweaver CS3 does provide helpful integration with Photoshop (   ), offering a streamlined workflow for getting images from Photoshop into Dreamweaver. You can copy all or part of a layered or sliced Photoshop (PSD) document and paste it directly into a Dreamweaver page. You can even drag a Photoshop document from your desktop, Bridge, or the Dreamweaver Files panel onto an open Dreamweaver page. A new image-optimization window lets you apply compression settings and save a file into your site; the optimized image then appears on the Web page.

Dreamweaver CS3 also remembers the location of the original Photoshop PSD document—but only if you’re using Photoshop CS3. Clicking on Dreamweaver’s Edit button launches Photoshop and opens the PSD file; after making changes in Photoshop, you just copy the layer, the slice, or the portion of the image you want, and then paste the new, edited image back into Dreamweaver. The old image is replaced, and all of the optimization settings you applied previously are reapplied.

And this version of Dreamweaver includes Adobe’s new Device Central. This program (which is integrated with several other programs in the suite) shows how different mobile devices display Web content. You can preview a Dreamweaver CS3 page in more than 200 different mobile-device profiles; each profile simulates the display of a particular phone—in many cases, complete with a photo of the phone. Each profile also includes information about the phone’s screen size and the type of HTML, Flash, and video it supports. Device Central uses Opera Mini (a browser for handheld devices) to simulate the Web-page display. Since not all phones ship with Mini, what you see in Device Central may not exactly match what appears on a particular phone.

Building the new Web

One of the most significant additions in this version of Dreamweaver is a new set of tools for adding interactive elements to a Web page. Based on the Spry framework, these new tools go far beyond the eye candy of Dreamweaver’s old timeline animations, and they’re a significant improvement on the simplistic JavaScript produced by the previous Dreamweaver behaviors. Spry widgets—prebuilt blocks of code that you can insert into your pages—add helpful user-interface elements to a page; the Spry Menu Bar widget, for example, is a navigation bar that supports two levels of pop-up menus—the perfect way to cram a lot of links into a compact space. Form-validation widgets are coded to ensure that data is submitted correctly—for example, to make sure that a field isn’t empty or that it contains a properly formatted e-mail address or phone number. This widget offers more features and produces much more professional-looking forms than the Validate Form behavior that shipped with Dreamweaver for years. Several other page widgets make it easy to present a lot of content in a small space; for example, the Tabbed Panels widget lets you place content into separate tabbed areas, each of which is revealed by clicking on a tab.

For people who do like eye-candy, Spry effects let you draw attention to your Web pages with effects that fade out, shrink, grow, or shake an image or other page content. The Spry Data Set feature lets you take data from an XML file and display it in a table. People viewing the Web page can sort the table by clicking on column headers, and they can even see detailed information about one item—all without downloading a new page from the Web server.

Solving CSS woes

CSS is a Web designer’s main tool for creating beautiful and functional Web sites that adhere to proper Web-coding standards. Unfortunately, CSS is also a confusing technology, and thanks to the idiosyncrasies of Web browsers, creating Web pages that look and work the same on Windows machines and Macs, and on Microsoft Internet Explorer, Mozilla’s Firefox (   ) and Apple’s Safari (   ) is often difficult. This is especially troublesome to Mac-based Web designers because the most popular Web browser, Internet Explorer 6 for Windows, also has the most problems handling CSS. Dreamweaver CS3 adds two new elements—CSS layouts and the Check Browser Compatibility feature—that cut down on the laborious trial-and-error often associated with CSS-based Web design.

The CSS layouts contain the basic HTML and CSS necessary to create the most common page layouts—two-column, three-column, liquid-width, and fixed-width, for example. These templates offer more options than the few CSS templates offered in Dreamweaver 8, and also unlike the templates in the previous version, these are basic layouts without any graphics or excessive styling, so you can modify and add to them to create your own look-and-feel. In addition, the Dreamweaver CS3 layouts include all the necessary CSS workarounds required to make the designs work well in all current Web browsers.

The new Check Browser Compatibility feature lets you check a Web page for CSS or HTML code that might not work correctly in a particular browser. Potential errors are identified, and a single click takes you to Adobe.com’s CSS Advisor, which provides suggestions for how to fix the problem.

Dreamweaver CS3 improves on the program’s already powerful CSS tools. Dreamweaver’s display of CSS-based design within the program’s interface has also improved, getting closer to the “what you see in Dreamweaver is what you’ll get in a Web browser” ideal. New CSS management tools simplify the process of reordering styles in a style sheet, renaming styles, and moving styles between style sheets.

Getting old

Dreamweaver CS3 doesn’t offer any changes to the server-side tools that have made this application a favorite for designers who don’t like programming but do want Web sites that can interact with databases. The program still lacks commands for solving common server-side problems such as uploading files, sending e-mail, and visual SQL (database) query generation. Web designers who want to add more-advanced features will have to purchase third-party extensions, one of which is the new Adobe Dreamweaver Developer Toolbox ($299).

Macworld’s buying advice

With its combination of accurate visual design, excellent CSS tools, and strong site-management features, Dreamweaver continues to be the premier Web-design program. If you’re not on an Intel Mac, don’t need the fancy user-interface widgets offered by the Spry framework, and don’t have trouble with your CSS layouts, you may not find the CS3 debut that enticing. However, if you’re using an Intel Mac, are hoping to ease the frustration of building CSS-based Web layouts, or want to add responsive user-interface controls such as complex, multilayered drop-down menus, Dreamweaver CS3 is quite a worthy upgrade.

[ David Sawyer McFarland is the author of Dreamweaver 8: The Missing Manual (O’Reilly, 2006). ]