What’s new
Dreamweaver CS3 offers new features in three key areas: integration with other Adobe products; new features for creating, managing, and fixing Cascading Style Sheets; and a new set of JavaScript-driven tools for building pop-up navigation menus, advanced form validation, and displaying data in an interactive table.
If you use Photoshop and Dreamweaver now, you probably have gotten tired of the number of steps required to get an image from Photoshop to Dreamweaver (and all of the steps you have to repeat whenever you edit a Photoshop file). Dreamweaver CS3 now supports direct copy and paste from Photoshop. In Photoshop CS3, you can select a single layer, “slice,” or even draw a marquee around one area of a document and copy all layers in that section; then you can copy that selection, switch to a Dreamweaver document and paste. (You can even skip all of this and just drag a PSD file directly onto a Dreamweaver page.) The new image optimization window lets you apply compression settings directly in Dreamweaver (no more, “Save for Web” from Photoshop), save the file into your Web site, and place the new optimized image into a Web page.
Even better, you can launch Photoshop and open the original image file for editing directly within Dreamweaver. After making any changes you want in Photoshop, copy the layer, slice, or portion of the Photoshop file you want, then paste the new, edited image back into Dreamweaver and replace the older image. All of the optimization settings applied previously are remembered (including the optimized file’s name) and re-applied, making edits fast and painless. Unfortunately, Dreamweaver isn’t completely integrated into the suite so you won’t find support for smart-objects or a similarly simple workflow for getting Illustrator files into your Web pages.
The most glamorous new addition to the program is a set of tools for adding dynamic layout elements and visual effects to your Web pages. Based on the “Spry Framework” (a collection of JavaScript programs developed by Adobe), these new features make it easy to add pop-up navigational menus, validate HTML forms, include complex, animated, visual effects, and add interactive data tables.
Spry features come in three flavors: effects, widgets, and data sets. Effects are fancy visual effects—such as fade out, shrink, grow, shake—that let you draw attention to images, or other page content. Widgets add interactive layout elements. The Spry Menu Bar, for example, is a navigation bar that supports two levels of pop-up menus—the perfect way to cram a lot of links in a compact space; form validation widgets let you verify entries in a Web form before the form is submitted, so you can make sure that a properly formatted date is entered by the end user. (This widget provides a much more powerful solution than the tired, old “Validate Form” behavior that’s shipped with Dreamweaver for years.) Several other page widgets provide an easy way to present a lot of content in a small space; for example, the tabbed panels widget lets you place content into separate “tabbed” areas. Clicking a tab reveals additional 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 column headers and even see detailed information about one item inside a table cell—all without every requesting a fresh page from the Web server.
What’s improved
Dreamweaver has always had powerful tools for creating and editing Cascading Style Sheets. CSS lets Web designers create beautiful and complex Web pages out of ordinary HTML. Unfortunately it’s also a complex and confusing technology. Dreamweaver CS3 adds new CSS tools to make working with Cascading Style Sheets easier.
New CSS management features make it easy to rearrange style sheets by reordering styles in a style sheet, quickly renaming styles, and moving styles between style sheets. New CSS Templates provide ready-made page layouts with basic HTML and CSS to create the most common page layouts (2 column, 3 column, liquid and fixed width, for example). The designs work well in all current Web browsers, and since the templates are merely “skeletons” you can modify and add to the supplied CSS files to create your own look and feel.
The new “Check Browser compatibility” tool might save you hours of testing and tweaking to make sure your pages work in all common Web browsers. This tool scans a Web page and identifies any CSS or HTML code that might not work in a particular browser. Potential errors are flagged and a single click takes you to information on Adobe.com that explains the problem and possible solutions in depth.
