Dreamweaver CS3 Review

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 behaviours. 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 behaviour 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 through the Adobe website).

OUR VERDICT

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.

Find the best price

Best prices today

Retailer Price Delivery

Price comparison from , and manufacturers