Here are some of the things you can do in Fireworks:

You can create graphics using some of the best features of both vector and bitmap graphic applications in a single application. You can edit with vector-object flexibility and apply bitmap effects—including bevels, glows, drop shadows, and now PhotoShop filters—that redraw as you edit.

You can optimize Web graphics in Fireworks to minimize file size, resulting in fast loading Web sites. In Fireworks you can add interactivity to your Web graphics to create image maps, JavaScript rollover buttons, animated banner ads, and even entire Web pages. You can save lots of time throughout the Web design process with batch processing, save able styles and export settings, optimization in the workspace, command-sequence scripting, and compatibility with Macromedia Dreamweaver and other Web design software.

Fireworks is primarily a design application for screen graphics. However, with the ability to export to applications such as FreeHand and Illustrator, you can reuse graphics designed in Fireworks for print purposes.

Web site with Fireworks

Fireworks may have been introduced to you as a graphic optimizer or as a button and image mapmaker. This section highlights some things you can do with Fireworks that you may not have known.

Web art

An extensive collection of artistic tools and effects, color control, and optimization capability are available with Fireworks. It gives a great application for creating logos and other images.

Optimized images

Before uploading photographs or any form of illustration to your Web site, run them through Fireworks optimization to make them as small as possible without sacrificing quality. (The 2-Up preview compares a JPEG optimized at 100 percent quality and 60 percent quality.)

Thumbnails

If you have a lot of pictures to put on your Web site, consider creating thumbnails with hotspots that open the full-size pictures when clicked. For more information, see Creating Thumbnails on the Fireworks Support Center.

Animated banner ads

Use frames, symbols, and optimization to build compact, animated GIF or Flash banner ads.

Image maps

Turn a graphic into an interactive map to navigate your Web site. Place hotspots on areas of the graphic that people are likely to click, and assign URLs to them.

Buttons and JavaScript rollovers

Create buttons that trigger events on your Web page. Emphasize interactivity with JavaScript rollovers that change appearance according to the current Button State.

JavaScript navigation bars

Create an entire group of JavaScript buttons as a single graphic, and then use slices to export it as a group of smaller graphics with unique URLs.

Disjoint rollovers

Create rollovers that trigger a change on another part of the Web page. For example, clicking a button on a navigation bar could replace one graphic with another. When you move the pointer over the button, the button and the text area change appearance.

Complete Web pages

Create an entire Web page in Fireworks. Create a navigation bar, banner ad, JPEG pictures, and GIF art. Then slice up the page into separate regions that you can optimize efficiently. Upon export, Fireworks writes the HTML code that puts the page back together in a browser.

Fireworks workspace

Opening Fireworks 3 displays command menus across the top of the window, the Toolbox on the left side of the screen, and several multi-tab panels on the right side of the screen. Opening a document places a document window in the middle.

You are likely to use these Fireworks components frequently:

The Original document window displays the current Fireworks PNG document.

With Preview, 2-Up, and 4-Up windows and the Optimize and Color Table panels, you can optimize in the workspace. The preview display how the graphic would appear in a browser, so you can compare the graphic optimized up to four ways.

• View and adjust optimization settings using the Optimize panel and the Color Table panel.

• The Toolbox contains the selection, drawing, and editing tools; the Magnify tool; the Hotspot tool; the Slice tool; and stroke and fill color controls.

• The Object, Stroke, Fill, and Effect inspectors control a wide range of characteristics of selected objects.

• The Color Mixer, Swatches panel, and Color Table panel manage the current document's color palette.

• The Layers and Frames panels organize a document's structure and contain options for creating, deleting, and manipulating layers and frames. The Frames panel contains options for creating animation.

• The Behaviors inspector manages behaviors, which determine what happens when hotspots or slices respond to mouse movement.

• The History panel lists recent commands that you can quickly undo and redo. You also can choose commands to repeat, and save command sequences to reuse as a single command.

• The Button Editor helps you make quick work of building JavaScript rollover buttons and navigation bars.

• Context menus give you quick access to commands pertaining to the current selection.

• The Library panel contains graphic symbols and button symbols. You can easily drag instances from the Library onto your document.

Creating hotspots and image maps

Go to the home page of most any Web site, and chances are you will find an image map. An image map is a graphic or group of graphics that appears on a Web page and has special areas called hotspots. The Web page's HTML file defines each hotspot's size and location.

When the pointer rolls over a hotspot, the pointer changes to a small hand. Clicking a hotspot typically opens a Web page by referencing the URL that is assigned to it in the HTML code.

Making an image map in Fireworks follows these general steps:

• Building the image map in the Fireworks PNG document

• Exporting the graphic and HTML files