Review: Adobe Dreamweaver CS4

Pros: Better features for working with CSS; improved Photoshop integration; new Live View and Live Code more accurately render web pages within Dreamweaver.
Cons: For Mac users, new interface takes over your screen, and requires some retraining for all longtime users.
Rating: 85
In the tenth major version of any professional application, most of the basics are already taken care of. So it is with Dreamweaver CS4. This version successfully continues Dreamweaver’s movement toward building properly structured, standards-compliant Web sites. Whether you’re a designer or a Web programmer, Dreamweaver CS4 makes it easier to work with today’s sites, split up as they are between HTML, CSS, and script files. Add tighter integration with Photoshop for creating Web graphics, and this is an upgrade worth paying for.
Getting Started
To run Dreamweaver CS4, you’ll need Windows XP SP2 or Vista, or Mac OS X 10.4.11 or later. On the Mac, you’ll also require a PowerPC G5 or Intel-based Macintosh. I installed Dreamweaver CS4 as part of the CS4 Master Collection package on Macintosh and as a standalone program on Windows. Installation on the Mac took a long time (almost an hour), as is now familiar when installing an Adobe suite. Windows installation took much less time because there was so much less to install.
Hey, This Looks Different…
The first thing you’ll notice when you open the program is the tweaked user interface. Dreamweaver now uses OWL, the cross-platform OS Widget Library meant to unify the user experience across all the Adobe applications (Figure 1).
Figure 1. The Dreamweaver interface, like all of the programs in the CS4 suite, has become more panel-oriented, banishing the old Insert Bar to the panel dock on the right side of the screen, where it becomes the Insert panel. Click on the image to see a larger version.

You can pull panels out of the panel dock to become free-floating windows, or you can collapse the panels to icons for more document space. Clicking on the panel icon causes the panel to fly out so you can use it (Figure 2). You can arrange panels however you like, and you can save your workspace so it’s always available to you. Dreamweaver comes with several workspaces optimized for designers, coders, and application developers.
Figure 2. If you need more screen real estate, you can collapse the panels to icons. Clicking a panel icon causes the panel to fly out and appear. Click on the image to see a larger version.

One drawback to the OWL interface, especially for Mac users, is that it really wants to take up your entire screen. When I open a document on my 20-inch monitor, Dreamweaver’s document window, toolbars, and panels cover up all background programs. You can shrink the document window, but the toolbars and panels stick stubbornly to the top, bottom, and left sides of your screen. In this way, the interface acts more like a maximized Windows program, which isn’t expected behavior on the Mac and sometimes gets in your way.
Longtime Dreamweaver users may be a bit disoriented at first, because the Insert bar has become the Insert panel. In fact, the whole interface has become more panel-oriented. Tip: If you’re more comfortable with the Insert bar, just drag the Insert panel out of the panel dock on the left side of the screen, and to the top of your screen, where it will turn back into the Insert bar.
New to Dreamweaver CS4, the Property Inspector now has two tabs, HTML and CSS (Figure 3). Depending on which tab you’re on, Dreamweaver applies properties of that type. For example, if you’re on the HTML tab and click the Italic button, Dreamweaver applies the style using the HTML <em> tag. If you’re on the CSS tab of the Property Inspector and click the Italic button, Dreamweaver walks you through creating a new CSS style rule for the selection.
Figure 3. The Property Inspector is now split into two tabs, one for HTML properties and the other, shown here, that helps you apply CSS styles. Click on the image to see a larger version.

Adobe has removed some features of the program that are either obsolete or not in line with current best practices for building Web sites. The old Table Layout mode is gone, and good riddance, as CSS-based layout is the way to go for modern sites. Other now-departed features include Timelines; the Site Map tool; server behaviors for ASP .NET and JSP; and Flash Buttons and Flash Text.
What You See Is a Whole Lot Closer to What You’ll Get
Web designers have long had to contend with the HTML and CSS rendering differences between browsers. Pages that looked great in Firefox, for example, might look terrible in Internet Explorer. In the past, Dreamweaver’s Design view rendered pages — sort of — but you still had to preview Web pages in several browsers to see what they would really look like to users (Figure 4).
Figure 4. Dreamweaver’s Design View shows only a basic table and doesn’t render the effects of the attached CSS and JavaScript files. Click on the image to see a larger version.

Dreamweaver CS4 goes a long way towards true WYSIWG with the new Live View. Incorporating WebKit, the cross-platform rendering engine used by Apple’s Safari and Google’s Chrome browsers, Live View gives you a much more accurate view, right in Dreamweaver, of how your page will look in browsers that support Web standards (Figure 5). It even renders the CSS and runs the JavaScript. The prudent designer will still preview pages in all browsers that your site targets, but with Live View, you can get farther, faster when developing your sites.
Figure 5. When you switch to Live View, Dreamweaver shows you the CSS styles applied to the table, and you can see that the row under the cursor is highlighted, thanks to a combination of JavaScript and CSS. Click on the image to see a larger version.

The new Live Code complements Live View, because when you switch it on, it splits the window (Dreamweaver adds a vertical split to the previous horizontal-only Split View) so that your code is in one pane and the Live View in the other. With Live Code, you can interact with the page in the Live View pane as a user would in a browser, and see how your actions generate new code in a browser in the Live Code pane (Figure 6). You can even temporarily lock the code while performing a particular action to troubleshoot problems.
Figure 6. In Live Code, the screen splits and you can see how the JavaScript is rewriting the HTML code on the fly. If you look closely at the class in the Code pane for Sgt. Pepper’s, you’ll see that the class has been changed to “odd over” because the cursor in the Live View pane is over the entry for that album. Click on the image to see a larger version.

Finding Your Code
Code jockeys will also be pleased at two more new features that help you find and change code faster. Related Files shows the names of the support files that are often attached to HTML pages (such as CSS or script files) in a handy toolbar at the top of the document window (Figure 7). Clicking one of the names switches Dreamweaver to Split view and opens the document in the Code pane.
Figure 7. The Related Files bar makes it easy to jump to attached CSS or JavaScript files, and to display the source code for your HTML page. Click on the image to see a larger version.

If you’ve ever spent time tracking down which linked stylesheet is affecting a particular element on a Web page, then the new Code Navigator is for you. When you place the cursor over an element and Alt-click (Option-click on Mac), the Code Navigator window appears, showing the related stylesheet(s) and rules that apply to the element (Figure 8).
Figure 8. When you want to quickly find out the properties for a particular element on your page, the Code Navigator makes it easy.

Hovering over a rule pops up a tooltip with the rule’s properties. Clicking the rule’s name switches Dreamweaver to Split View, with the rule’s stylesheet in the Code pane, and the cursor placed in the rule, ready to edit. Code Navigator is a great tool when you’re building or maintaining a site, especially if you’re taking over a site from another designer and trying to figure out the style structure.
If you’re working on big sites that use the Subversion version control system, Dreamweaver can now act as a limited Subversion client to check files in and out of the repository. However, it’s not a substitute for a full Subversion client program.
Getting Chummier with Photoshop
It’s no surprise that Adobe has brought closer integration between Dreamweaver CS4 and its graphics powerhouse, Photoshop. In Dreamweaver CS3, you could copy images (and image layers) in Photoshop and paste them into your Web page layout in Dreamweaver, after a conversion step where you specified which graphics formats you wanted (PNG, JPEG, or GIF).
In Dreamweaver CS4, you can place Photoshop documents directly into the program, where it becomes a Smart Object; that is, it maintains a link to the original Photoshop .psd file (Figure 9).
Figure 9. The red curved arrow indicates that this placed Photoshop graphic is out of sync with the original Photoshop document.

When the .psd file is updated, Dreamweaver recognizes that it has changed and alerts you to update the copy in the Dreamweaver document (Figure 10). This means that you can use a single .psd file in many different pages of your site. When you update the Photoshop file, you’ll update all the copies throughout the site at once.
Figure 10. When the graphic on your Web page and the original Photoshop document are in sync, the curved arrows are both green.

Look Ma, No Database!
Dreamweaver has long had the ability to interface with a server-side database to create dynamic Web sites, but this requires serious database and programming knowledge.
Dreamweaver CS4’s new HTML data set feature allows you to store your data in a standard HTML table, a series of div tags, or an unordered list. Through a wizard, you integrate the data into a dynamic table that’s displayed using the Spry framework for Ajax. Spry is Adobe’s JavaScript and CSS library that lets you place user interface elements or effects on your Dreamweaver pages. The wizard gives you several options for displaying the data, and when users load your page, they can interact with the page to sort or display detailed information, drawn on the fly from the data document.
The cool thing about the HTML data set is that other people without layout skills can update the data document. Thanks to the dynamic page generated by Spry, the results will still look good.
One interesting development that appeared after Dreamweaver shipped was the availability of widgets from other JavaScript frameworks on the Adobe Exchange Web site, including widgets based on Yahoo Interface Library (YUI), jQuery, and MooTools. This indicates that Adobe wants to give Dreamweaver users access to the fruits of other developer’s labors. Previously, if you wanted to take advantage of any JavaScript framework other than Spry, you needed to integrate it in Dreamweaver’s Code View. Now, you can do it without needing to dig into the code; after you install third-party widgets with the included Extension Manager, they appear in Dreamweaver’s Insert panel.
To Upgrade or Not?
Pricing for Dreamweaver is unchanged: It’s $399 for new purchasers, and $199 for upgrades from Dreamweaver MX 2004 or later, or GoLive 5 or later. Upgrades from the standalone product to the CS4 suite are more complex, ranging from $599 to $1,399, depending on which version of the suite you want. See the Adobe Web site for complete details.
Dreamweaver CS4 still reigns as the premier Web design program, and owners of Dreamweaver 8 or earlier shouldn’t hesitate to upgrade. Dreamweaver CS3 owners have a bit more difficult decision, but if you do a lot of site building from scratch, the better handling of CSS, Live View, Related Files, and the Code Navigator will save you a lot of time and should quickly justify the upgrade cost.