Dreamweaver, Fireworks create a Web design powerhouse

By Steve GravesSpecial to GCNMacromedia Inc. has bundled its Dreamweaver 3 and Fireworks 3 applications as one complete package for Web development. The two programs, though hardly seamless, are tightly integrated for easy movement back and forth.Dreamweaver's WYSIWYG interface produces clean Hypertext Markup Language that should please the most finicky coder while giving the graphic artist pixel-level layout control.The 3.0 Studio version can create image maps in the document window. It fully supports Dynamic HTML and cascading style sheets.I found designing with layers particularly easy. Layers convert into tables at a click, producing HTML with a similar look for older 3.x browser versions. You can also convert tables to layers.Pages can be saved as templates for content managers who post new data, and some page regions can remain editable while other regions are essentially write-protected. Changes made on the parent template pass to child pages, drastically reducing the labor of site makeovers and maintenance.In Dreamweaver, you work by altering the properties of an object via palettes and inspectors, or by right-clicking to pop up a context menu. Apple Macintosh users will feel right at home with the numerous floating palettes, although the workspace seems crowded. You set preferences to specify which palettes and inspectors always appear on top of the document. You can reduce the number of palettes by combining them: Simply drag the tabs from one palette to the other.One annoying problem I ran into was submarining'a palette would dive under the status bar on closing and I couldn't get it to surface without restarting the program. Dreamweaver also crashed a couple of times when I had Fireworks open. But because this occurred only twice in two weeks of heavy use, I would call the program stable and relatively bug-free.Not all properties are available through the palettes. For example, you can specify a background image under the page properties, but there is no option to make the background image a watermark as supported by Microsoft Internet Explorer. Coincidentally, I noticed that several functions supported by Microsoft browsers were omitted, though not those of Netscape browsers.It's easy to edit or insert HTML using the Quick Tag Editor without leaving the document window. The HTML source inspector displays the source code with optional line numbers and word wrap. Objects selected in the document window are highlighted in the HTML source inspector, and changes to the document window or the source inspector display immediately in the other.The Dreamweaver RoundTrip HTML and Extensible Markup Language feature protects custom code from alteration'the bugaboo of many WYSIWYG editors. Developers who use JavaScript, Visual Basic Script, Active Server Pages, Java Server Pages, Personal Home Page tools or Cold Fusion Markup Language can feel confident that Dreamweaver won't corrupt their code. Those who want extra assurance can call up Allaire Corp.'s HomeSite 4.5 to edit their code. I was pleasantly surprised to find this fine editor bundled with the suite.''Dreamweaver's fairly primitive collaboration features let users check documents in and out and attach Design Notes, easing documentation and team communication. Design Notes attached to Fireworks images remain readable in Dreamweaver.The site management tools are impressive. Dreamweaver automatically fixes the links when you move folders. Page-by-page and sitewide search-and-replace functions work flawlessly. You can replace text or HTML code or use regular expressions for complex changes that require variables.The file synchronization function also works without a hitch. It synchronizes files on the development site with those on the production server, ensuring the most recent versions. You can configure it to delete unused files on the server, further reducing maintenance.Document conversion and repurposing, however, are less impressive. You can't insert a text file'you must copy the text into the document. Microsoft Word documents can be imported, but only after resaving them in Word as HTML and bringing them one at a time into Dreamweaver. Then you must run a macro to clean up the HTML. It takes seven to nine mouse clicks, but it works.Dreamweaver does not support Hypertext Transfer Protocol puts and gets. Files must be downloaded via File Transfer Protocol. This might not be a problem for some users, but I miss the ability to download any Web site from the Internet as I can with Microsoft FrontPage or NetObjects Fusion from Net-Objects Inc. of Redwood City, Calif.Dreamweaver users must arrange either to have the site file placed in a folder accessible via FTP or else send out a Web spider such as Teleport Pro from Tennyson Maxwell Information Systems Inc. of Burlington, Mass., to fetch it.Power users will like Dreamweaver's History palette, which tracks and records every action. You can undo, repeat and copy steps to the Windows Clipboard and apply them in other documents. You can even save frequently used procedures as a command to call up with a click from the Commands menu. You can also edit, customize, and expand Dreamweaver menus and keyboard shortcuts.Dreamweaver 3.0 has hundreds of app programming interface functions. JavaScript writers can make extensions such as custom floating palettes and attribute translators.I'm not as fond of Fireworks 3 as I am of Dreamweaver. I found Fireworks confusing, but after repeating the one-hour tutorial several times, I was able to create a nice graphic complete with rollover buttons.The workspace is similar to Dream-weaver's. Floating palettes abound, and you can save and reapply steps and procedures. If you're comfortable with the Dreamweaver environment, you'll like Fireworks, too.Fireworks has 37 bitmap and vector editing tools. It uses layers, frames and image slicing, and everything is editable, even button text. You can edit objects with vector tools and then apply bitmap effects such as bevels, glows and drop shadows that redraw as you edit.Fireworks integrates not only with Macromedia products such as Flash but also with competitive graphics applications and HTML editors such as Adobe Photoshop and Illustrator.A button editor makes it a snap to create custom buttons for one to four mouse states'mouse-over and on-click, for example. It produces both HTML and JavaScript that can be exported and tweaked on the fly for sites built with Dreamweaver 2.x or 3.0, Adobe GoLive or FrontPage.Fireworks 3 is the first graphics program I have seen that makes image optimization effective and easy. Other packages eliminate a few colors or merely offer a choice of saving as .gif or .jpg files.The default color palettes in Dreamweaver and Fireworks easily slice images into different segments for optimization. In my test project, a splash page with a photograph atop a blue background, I sliced the image and saved the photo as a .jpg file and the background slices as .gif files. I then exported parts of the image in GIF and other parts in JPEG, exploiting the strengths of each format. Fireworks generated the HTML code to glue the image together and reduced the time to download it by about 75 percent.There are easier and even free animation tools, but once you get familiar with Fireworks, it's simple to make sophisticated animations. You can open several images simultaneously and animate them with just a couple of clicks. I found this especially useful for rotating banners.Like Dreamweaver, Fireworks is extensible and flexible. Power users will cut their production time with batch processing, savable styles and export settings, command-sequence scripting and workspace customization.Fireworks mainly creates on-screen graphics but can export images to Macromedia FreeHand and Adobe Illustrator for use in print media.Several colleagues who work in graphics design were enthusiastic about Fireworks but shared my reservations about the drawing tools. They use other programs to create their artwork, then turn to Fireworks to optimize it for the Web or design JavaScript behaviors.The printed and online documentation for both apps is superb. Tutorials are comprehensive; references are complete and logically organized. Free telephone support is limited to 30 days.Because Dreamweaver is so extensible, you can download several behaviors, commands, inspectors, palettes and templates from sites such as and . If you don't write JavaScript and a feature isn't available in Dreamweaver or Fireworks, the chances are good that someone has written a script for the function.Macromedia targets Dreamweaver 3 and Fireworks 3 to developers who want total control over their code in a visual design environment. It's a good compromise be-tween WYSIWYG editors and text editors. Even novices can build basic but decent sites if they follow the tutorials and documentation.Until now, FrontPage has been my primary development tool because its sites are easy to maintain. I was willing to overlook some of its design control deficiencies to get the ease of management lacking in other site builders.Now Dreamweaver 3 and Fireworks 3 Studio can do the link checking and synchronization necessary to keep sites organized and free of broken links. The templates and style options let you design and redesign with a minimum of fuss, and the clean code is easy to port. Move over, FrontPage.