With CS4, Dreamweaver is no longer a distant cousin of the other members of the Creative Suite family. The interface, familiar since the Macromedia days, has been replaced to better align with the look and functionality of Photoshop, Illustrator, and Flash. In Dreamweaver CS4, panels and windows are arranged together in a unified whole by default underneath a new Application Bar that spans the monitor. However, you can move windows and customize panels to create the most optimal working environment to suit your needs. The program provides multiple spacing-saving ways to organize panels and windows and lets you create a comfortable work area whether you're a small business using a 17-inch monitor or a designer using side-by-side 21-inch displays.
It may take awhile for longtime Dreamweaver users to grow accustomed to the new look and feel, such as the new Application toolbar, the absence of the Insert toolbar (now treated like one of the program's other panels), or the ability to minimize panels into a space saving icon-view, but if you use any of the other programs in the Creative Suite, the more consistent user interface will be welcome.
Dreamweaver CS3 was the first version of the program to let you insert and optimize Photoshop files directly within Dreamweaver. Dreamweaver CS4 expands on this power by adding support for Smart Objects--Web-ready images with live links to original Photoshop (PSD) documents. Not only does Dreamweaver let you optimize a Photoshop file, resize it, and even crop it before inserting it into a Dreamweaver page, the new Web version of the graphic remains linked to the original PSD file. So if you make changes in Photoshop, you can, with a click of the Update from Original button, pass those changes onto the Web version of the graphic.
Calling all Web developers
From its earliest days, Dreamweaver's focus on visual design has been greeted with skepticism by the "code-it-by-hand" Web designer community. The biggest innovations in Dreamweaver CS4 are aimed at designers who are as comfortable working in code view as in the program's visual design view.
In fact, you can look at both the visual design view of a page and the code for that page, or any of its related files, side-by-side. In this way, you can immediately see changes to your Web page's design in one half of the window as you edit CSS code in the other half. While Dreamweaver has had a "split" (half code, half design) view for a long time, this version finally lets you place the two views vertically side-by-side--a boon for anyone working with a large monitor.
The program's new coder-friendly features like side-by-side code and design view, and the CSS-locating Code Navigator, streamline the production of Web pages.
Tools for the rest of us
The new Spry tooltip widget lets you add pop-up information bubbles to links, images, or any other elements on a page. In this way, you can provide extended definitions for words, or display supplementary information for a photo. And the Spry HTML data set tool makes it easy to take a simple HTML table full of data and turn it into an interactive presentation: you can make tables that are sortable simply by clicking at the top of a column of data, automate the process of adding color to alternating rows of data, and even sort data before putting it into a table. Another option, the master/detail layout, provides an easy way to display a summary of rows from a table, and highlight detail information about a single row of data. Click another row and details for that data appear--without loading a new Web page.
A revamped Property inspector clarifies the process of adding HTML and CSS to a page. Earlier versions of Dreamweaver made it easy to create messy, hard to update, and confusing CSS using the old Property inspector.
Odds and ends
Dreamweaver CS4 includes many other additions. A new method of inserting Flash movies creates standards-compliant HTML (finally), and provides a simple way to check if visitors have Flash (or the proper version of Flash) installed on their computers (and let visitors know if they don't). Subversion support is a welcome addition to the relatively small group of Dreamweaver Web developers who need to work with this open-source file version control system. InContext Editing tools let users create Web pages that can be edited via a Web browser (and Adobe's commercial InContext Editing service)--a great tool for the beleaguered Web designer who wants to let someone else update the content on a Web site in a simple, fool-proof manner. And if you're working with Adobe's AIR technology which lets you build desktop programs that use the basic languages of the Web, a free AIR authoring extension adds the tools you need to build, package, and preview AIR applications right within Dreamweaver.
Getting even older
Dreamweaver CS4 provides no improvements to the server-side tools that have made this program a favorite for designers who don't like programming, but do want a Web site 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 query generation. Web designers who want to add more advanced features have to purchase third party extensions, and, unfortunately, even Adobe's solution to this problem, the Dreamweaver Developer Toolbox, hasn't yet been updated to work with CS4.
Macworld's buying advice
[Dave Sawyer McFarland is the author of Dreamweaver CS4: The Missing Manual (O'Reilly, 2008)]
This story, "Dreamweaver CS4" was originally published by Macworld.