capsule review

Dreamweaver 4 Fireworks 4 Studio

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

Like most Web designers, you may not have the luxury of a separate art department to create your images; you have to create them yourself and then insert them into your Web pages. For just such users, Macromedia has updated its acclaimed Web authoring and Web graphics tools and bundled them into Dreamweaver 4 Fireworks 4 Studio. For less money than you'd spend buying both products separately, you can easily change from your artist hat to your Web-designer hat and back again, saving valuable production time as you move images and HTML between applications.

Flash Comes to Fireworks 4

Many features added in Fireworks 4 are designed to lessen the need for other programs, even those from Macromedia. With the new Live Animation feature, for example, you can create simple animations that previously would have required Macromedia's Flash. After selecting the object you want to animate, you can set the amount of scaling, fading, and rotation for the animation, as well as its length in frames. Fireworks does the tweening for you, and the path of the animation appears in your document as a straight line with a string of dots on it, each representing a frame. You can move the line's endpoints to position the animation, though you can't create a curved path by moving the midpoints.

One of Fireworks' most useful new features is selective JPEG compression. This lets you compress masked portions of an image more or less than the rest of the image -- perfect for crunching a file's size while maintaining clarity in more-important parts of the image.

If you've ever had to make the same changes to many graphics files, you'll enjoy the new Batch Process Wizard. It leads you through the stages of choosing files for processing, selecting the processing steps, and picking the destination folder for the modified files. (You can also save a batch process as a scriptlet to share with coworkers. The next time you want to use the scriptlet, just drag it and the files you want to process onto the Fireworks application icon.) Fireworks' batch-processing capabilities won't fully replace Equilibrium's DeBabelizer in your arsenal, but it can handle many day-to-day needs.

Fireworks 4's improved import and export routines enhance its compatibility with Adobe Photoshop. You are now able to open and save Photoshop 5.5 files, with layers and masks translating correctly between the two programs. Fireworks can also open Photoshop 6 files, but (as in Photoshop 5.5) text will lose its editability.

Better Behaviors

Creating rollovers in Fireworks 4 is much easier than in previous versions; it's no longer a confusing process of slicing, layering, and creating new frames. The new Drag and Drop Rollover feature allows you to begin rollovers by dragging the behavior handle (which every slice now contains) onto the target. The Swap Image dialog box then opens so you can assign the layer for the other rollover state. Slices attached via behaviors to other slices are connected in the Web Layer view by blue lines.

Creating pop-up navigation menus with JavaScript is a great technique, but the coding has proved difficult or impossible for DHTML newbies. Fireworks' new Pop Up Menu Editor tool is a simple wizard that walks you through the process -- without distracting code. You set the text and the URL targets of the pop-up menu choices (this text is in HTML, so you can change it easily in Dreamweaver) and then specify the color and style of the images for the background of the menu. If you like, you can indent menu choices to create hierarchical menus. Unfortunately, custom font sets created in Dreamweaver aren't shared with Fireworks; if you want your font sets on pop-up menus, you need to do some hand-coding in JavaScript when you bring the menus into Dreamweaver.

Fireworks' increased power comes at a cost of speed. Even on a 400MHz Power Mac G4, the program often felt a bit sluggish, especially when opening or previewing documents. For me, the performance hit falls into the "noticeable" rather than "annoying" category, but some type-A users might find the slowdown bothersome.

The Web Editor of Your Dreams

Probably the first change you'll notice in Dreamweaver is the addition of a tool bar at the top of the document window. You can use this tool bar to change the document's title, preview the document in a browser, or transfer it to or from the remote site via FTP. A new Reference button calls up context-sensitive information, licensed from O'Reilly & Associates, on the proper use of HTML, CSS, or JavaScript. This is great information, presented exactly when and how you need it.

Menus Made Easy: DHTML pop-up menus load quickly and make your site easier to navigate, but they can be hard to code. Fireworks 4's Pop Up Menu Editor tool leads you through the process painlessly.

Since its introduction, Dreamweaver's developers have experimented with different ways to display both the layout of a page and its underlying code. Previous versions required you to switch from visual to code mode or to open a separate code window. Dreamweaver 4's new Code And Design view, available from the document tool bar, splits the document window into two panes, with HTML in the top pane and the graphic-design view below. Selecting an item in one view highlights the corresponding representation in the other view. There's still an HTML view for codeheads, who will also enjoy the new automatic syntax coloring and indenting.

Dreamweaver's new Asset panel brings together all of your site's media assets so you can manage them more easily. The Asset panel groups images; colors; external URLs; Shockwave, Flash, and QuickTime files; and scripts, templates, and library items.When you select an asset from the list, the Asset panel displays a preview of the item. You can add frequently used assets to a Favorites list and organize the list into folders, with nicknames for the assets. Best of all, you're able to drag and drop assets directly from the Asset panel to the document window.

Adding a Little Flash

Macromedia's Flash is a popular vector-animation tool, and most browsers support its SWF file format, with the help of a plug-in. Until this release, the only way to create Flash animations was to use Flash (or Adobe Live Motion, which also can save animations in Flash format). But Dreamweaver 4's new Insert Flash Button feature lets you create animated buttons in SWF format. Macromedia provides dozens of button templates, to which you add only the button text and the link for the destination page. If you need more templates, you can build them in Flash and import them into Dreamweaver, or download them from Macromedia's Dreamweaver Exchange at

Flashy Text: The headline on this page isn't a GIF; it's vector text saved as a Flash movie (in this case, it's a movie that doesn't move).

With the new Insert Flash Text feature, you can use vector text in Flash format instead of text graphics in GIF or JPEG format; this lets you scale text while maintaining letter quality. You can also add JavaScript-style rollover effects to Flash text or buttons. Of course, not all browsers can display Flash files, so you should check that the Flash player is present, using the Check Plugin JavaScript Behavior utility that comes with Dreamweaver.

There is one fly in Dreamweaver 4's ointment: the Web pages it creates still aren't fully compliant with important Web standards such as HTML 4, CSS1, and DOM 1.0; nor does the program support XHTML, unlike Adobe GoLive 5.

Go, Team!

When several designers and coders work on a site, you need a traffic cop to make sure the site stays organized and people don't get in each other's way. Dreamweaver 2 had file check-in and checkout capabilities. Dreamweaver 3 introduced Design Notes, XML-based documents that tracked the status of and comments for each file in your site. Dreamweaver 4 catches up to GoLive 5 by implementing WebDAV, an industry-standard protocol that lets team members check pages in and out of the WebDAV server, keep audit trails of site changes, and stage sites before uploading them to production servers. And Dreamweaver surpasses GoLive by adding support for Microsoft's Visual SourceSafe, another widely used version-control system. When you connect to a Visual SourceSafe or WebDAV server, Dreamweaver's Site Window becomes the client window for the server. Unfortunately, Visual SourceSafe and WebDAV servers do not run under Mac OS 9 (however, WebDAV implementations have been announced for Mac OS X).

Working Hand in Hand: Dreamweaver's Roundtrip Table Editing tool allows you to add rollovers and other behaviors to exported Fireworks tables, yet still maintain the ability to edit the table's images back in Fireworks, without messing up either HTML or JavaScript.

Suite Stuff

Besides enhancing the individual programs in the Studio, Macromedia has significantly improved how the programs work together. Dreamweaver and Fireworks, along with Dreamweaver UltraDev and Flash 5, now share a unified interface that makes it easier for new users to get their bearings in each application and for experienced users to employ skills across programs. Tool bars and inspector panels work identically in all the programs, and with customizable keyboard shortcuts, you can tune the programs so they all work as you want them to.

You have long had the ability to launch Fireworks from within Dreamweaver to edit images. But the new Roundtrip Table Editing tool turns tables and their contents into objects that can be swapped back and forth between the two programs, with edits preserved. You can create a table in Fireworks, for example, adding rollovers to slices and frames; bring that table into Dreamweaver to edit it or to add JavaScript code; and then bounce the table back to Fireworks for graphics changes, all without harming the code in either program.

1 2 Page 1
Page 1 of 2
Shop Tech Products at Amazon