Review: Dreamweaver CS4

Adobe Dreamweaver CS4 is a solid upgrade to an already impressive Web site design program. The latest version adds to features introduced in Dreamweaver CS3 ( ) (Photoshop Integration and Spry JavaScript tools for building interactive interfaces, for example) and also presents a completely revamped interface that more closely resembles other products in the Creative Suite. But the most significant additions to the program are aimed squarely at Web developers building sites that rely as much on JavaScript as they do on HTML and CSS (Cascading Style Sheets).

New look

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.

The new Related Files toolbar appears when you open a Web page that uses external CSS, JavaScript, or server-side programming files. The toolbar lists the names of each linked file, and clicking the file’s name shows you the code for that file. This provides a quick and direct way of jumping to a CSS or JavaScript file, making the changes you want, and jumping back to the Web page file to view the results.

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 new Live View option lets you preview how your page will look in a browser without leaving Dreamweaver thanks to the embedded WebKit rendering engine (the same one used in Safari). Live View even lets you interact with the page so any JavaScript effects like rollovers, drop down menus, or form validation can be tested inside Dreamweaver. But Live View isn’t just for previewing a page; in Split View you can edit the CSS, JavaScript, and raw HTML code and immediately check the results in the live visual view.

JavaScript-savvy Web designers will also appreciate the Live Code view, which displays a page’s HTML code after it’s been manipulated by JavaScript. This lets you check whether your JavaScript code is altering the page’s HTML in the way you want it to—in fact, you can even pause JavaScript within Live View so that you can analyze otherwise hard-to-capture moments, such as how a mouse rollover affects elements on a page. Dreamweaver CS4 now includes a powerful code hinting feature for JavaScript, which works with popular JavaScript libraries like Spry, Prototype, and jQuery. This pop-up window contains code suggestions and shortcuts so you don’t need to type as much.

Finally, code warriors will appreciate the new Code Navigator—a useful pop-up window that shows all CSS styles affecting a particular page element. Click a style from the pop-up window and Dreamweaver takes you directly to the CSS code for that style. While Dreamweaver has similar tools (the CSS style panel’s Current view for example), Code Navigator provides the quickest way to jump to relevant CSS code. And, in Live View only the Code Navigator can let you view CSS styles applied via JavaScript to a page element, a task that’s usually a long process of trial-and-error guessing.

Tools for the rest of us

If you’re not as comfortable with raw code as you are with Dreamweaver’s visual tools, there are still some useful additions to the latest version of the program. Dreamweaver CS4 expands on the JavaScript based Spry tools added in CS3, which let non-programmers quickly and easily add sophisticated interactive user interface elements to their sites, such as drop-down navigation menus. Dreamweaver CS4 adds to the useful and professional looking Spry form validation tools that prevent visitors to your site from submitting incorrect or missing information on your Web forms. Now you can make sure someone selects an option from a group of radio buttons, supplies a suitably hacker-proof password—for example, “Your password must be at least 8 characters and at least 3 numbers”—when selecting a password, and force that person to confirm a critical piece of information (like a password or e-mail address) by having him re-type it.

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.

Solid performance

Dreamweaver CS4 isn’t noticeably faster than its predecessor, but there were quite a few speed improvements in the last version of the program. On a 2.8GHz Intel Core 2 Duo iMac, startup times between CS3 and CS4 were comparable (both are pretty fast). And although Adobe has optimized the FTP tool to run faster in this version, the speed increase for uploading files to a Web site isn’t that significant: uploading 7.6MB of HTML, Flash, CSS, JavaScript, and image files took six and half minutes with CS4 and a little over seven minutes with CS3. In my day-to-day usage Dreamweaver CS4 is substantially more stable than Dreamweaver CS3, with far fewer crashes and hang ups.

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

Dreamweaver CS4 solidly addresses the technologies that Web design professionals use and is a significant upgrade that offers a new set of tools for those who spend a lot of time with HTML, CSS, and JavaScript. If you find yourself building more and more Web sites that rely on JavaScript and complex CSS, this upgrade is a must. In fact, if you’re an old-school HTML hand-coder, now is the time to make the switch. Even if you forego the program’s visual design tools, the enhanced workflow for multiple files, advanced text-editing, and productivity boosting Code Navigator make this one of the best Web page editors available.

If you’re a Dreamweaver CS3 user the question of whether to upgrade depends on the kind of Web sites you build. If you don’t program your own JavaScript code, and usually steer clear of raw HTML code, this update may not be necessary for you. However, you might consider upgrading if you use the other programs in the Creative Suite and want a consistent interface, want the easy-updating of Photoshop Smart Objects, and are looking for more useful Spry tools to add to your Web design toolbox.

[Dave Sawyer McFarland is the author of Dreameaver CS4: The Missing Manual (O’Reilly, 2008)]