First Look: Dreamweaver CS4 beta
The public beta of Dreamweaver released by Adobe Tuesday delivers significant changes to the 10-year old Web design and development tool. Not only does Dreamweaver CS4 offer a complete overhaul of the user interface, it adds many new features aimed at the “professional” Web developer. In addition, the beta expands on the powerful (and easy-to-use) Spry toolset introduced in last year's Dreamweaver CS3 release ( ).
Integration with the Creative Suite
The most obvious change to the program is Dreamweaver CS4’s new user interface. The old Macromedia look-and-feel has finally been replaced with an interface that matches the other applications in Adobe's Creative Suite. (Dreamweaver was among the Macromedia products absorbed by Adobe when it bought its one-time rival three years ago.)
While this change will take a while for long-time Dreamweaver users to get used to, the new interface significantly improves the usability of the program. Panels and windows mesh together well, are easier to organize, move and hide, and the new interface provides the flexibility to create a working environment that’s comfortable whether you’re working on a 17-inch monitor or a 30-inch Cinema Display.
In addition, the program has taken its first step toward supporting a feature that’s been in the other Creative Suite programs for years—SmartObjects. Dreamweaver CS4 now offers support for PhotoShop SmartObjects—you can drag a PSD file into a Web page within Dreamweaver, optimize the image for the Web, and even resize it. If you later update the original PSD file, a red arrow will appear on the image inside Dreamweaver indicating that the source file has changed. You can then click an “update from original” button in the Property inspector, and a new version of the image is created.
A professional Web developer tool
The related files bar really shines when combined with another new addition: vertical split view. Now you can see side-by-side, a page’s raw HTML code and its visual design. Make a change in the visual view and see the code immediately updated or vice-versa. When viewing a page that has related files (for example, an attached external style sheet), you can see the visual design of the page on one side, and a related file in the other. This lets you edit the CSS code and see the changes take place visually on the Web page.
A new “code navigator” (which is really more like a “CSS navigator”) lets you view a list of CSS styles that affect the current selection: you can view all of the properties set for that style and even jump directly to the CSS code for that style. While earlier versions of Dreamweaver provide similar tools through the CSS Styles Panel, this streamlined method makes for a more efficient workflow.
More than just code
But not all of the new features in the beta are aimed at those Web professionals who know how to code with one hand tied behind their backs. Several features will be a boon to less-experienced Web designers as well.
The revamped Property inspector reduces the risk of making errors when adding HTML and CSS for text. In earlier versions of Dreamweaver, you would sometimes add HTML to the page and sometimes create CSS styles, depending on which buttons you clicked in the Property inspector. This frequently led to a messy mix of strangely named styles, like Style1, Style2, and so on. Now the two functions—adding HTML and creating styles—are separated into two different views of the Property inspector.
Dreamweaver CS4 also includes three new form validation widgets. The password validation widget lets you enforce rules for passwords (such as “this password must be 10 characters long and contain at least 2 numbers”). The password confirm widget forces a user to confirm the password he already entered. The radio group validation widget lets you make sure that a radio button is checked before a form is submitted.
See for yourself
The Dreamweaver CS4 beta is available now from Adobe Labs. It requires either a PowerPC G5- or Intel-based Mac and OS X 10.4.11 or 10.5. The beta expires after two days unless you have an Adobe CS3 serial number. With that serial number, the beta will remain unlocked until the next version of the beta becomes available.
[David Sawyer McFarland is the author of Dreamweaver CS3: The Missing Manual (O’Reilly, 2007).]