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.
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.
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
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
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).
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.
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:
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.