Fireworks MX Tutorials: Macromedia
Fireworks MX Tutorials: Macromedia
Fireworks MX Tutorials: Macromedia
macromedia
®
Trademarks
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be
registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or
phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and
may be registered in certain jurisdictions including internationally.
This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for
the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia
provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any
responsibility for the content on those third-party sites.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED
COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE.
THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY
NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER
RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.
Copyright © 2002 Macromedia, Inc. All rights reserved. U.S. Patents 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927,
5,594,855 and 5,623,593. Portions of the software licensed under U.S. Patent No. 4,558,302 and foreign counterparts. Other patents
pending. Portions Copyright 1988, 2000 Aladdin Enterprises. All rights reserved. This software is based in part on the work of the
Independent JPEG Group. Portions Copyright 1998 Soft Horizons. All rights reserved. This manual may not be copied, photocopied,
reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of
Macromedia, Inc.
Part Number ZFW60M100
Acknowledgments
Writing: Tonya Estes, Dale Crawford, Kenneth Price
Editing: Rosana Francescato
Project management: Stuart Manning
Production: Patrice O’Neill, John Francis, Chris Basmajian, Caroline Branch
Photography: Chris Basmajian
Multimedia: Aaron Begley
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
2
CONTENTS
CHAPTER 1
Graphic Design Basics Tutorial . . ..................................... 5
What you’ll learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What you should know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Copy the Tutorials folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
View the completed file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Create and save a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Explore the Fireworks work environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Create and edit vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Create vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Set object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Import a bitmap and select pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Import an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Create a pixel selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Add and edit Live Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Work with layers and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Merge bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Name objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Change the object stacking order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Create and edit a mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Apply a mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Edit the mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Create and edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Create the title text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Create the body text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Set text properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Add a drop shadow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Export the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Optimize the graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Export the graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
View the exported document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Take the next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
CHAPTER 2
Web Design Basics Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
What you’ll learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
What you should know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Copy the Tutorials folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3
View the completed web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Open the source file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Import a graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Slice the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Create a drag-and-drop rollover. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Create and edit buttons to make a navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Create a button symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Create button states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Create multiple button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Change button instance text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Assign URLs to the buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Edit the button symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Create and edit a pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Create pop-up menu list items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Customize the pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Edit the pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Optimize the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Export HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Set HTML preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Export the document to HTML format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Test the completed file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
View the list of exported files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
View the Fireworks HTML file in a browser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Take the next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4 Contents
CHAPTER 1
Graphic Design Basics Tutorial
This tutorial will guide you through the basic tasks of designing graphics with Macromedia
Fireworks MX. You’ll get hands-on experience using the industry’s leading web graphics
application and learn basic graphic design concepts along the way.
If you are already familiar with designing graphics in Fireworks, you may want to proceed to
the “Web Design Basics Tutorial” on page 33, where you’ll learn about designing web pages
with Fireworks.
5
Copy the Tutorials folder
Before you begin, you’ll make a copy of the Tutorials folder, so that you can save the results of
your work while allowing you or another user to complete the tutorial at a later time using the
original files.
1 Navigate to the Fireworks application folder on your hard disk.
Note: If you are unable to view your Fireworks application folder, you may have limited access to files on your
system. You can download the files you need for this tutorial from the Fireworks Support Center on the web at
http://www.macromedia.com/support/fireworks/.
3 Select the final.jpg file and drag it to the open browser window.
For this tutorial, you will use Fireworks to design and export a copy of this ad for classic rental cars.
Note: The Complete folder also includes the Fireworks document from which this JPEG file was generated. To
view the document, double-click final.png.
6 Chapter 1
2 Enter 480 for the width and 214 for the height. Ensure that both measurements are in pixels
and that the canvas color is white, and click OK.
A document window opens, with a title bar that reads Untitled-1.png (Windows) or
Untitled-1 (Macintosh).
3 If the document window isn’t maximized, that is, if it doesn’t fill the center of the screen,
maximize it by clicking the maximize button (Windows) or the zoom box (Macintosh) at the
top of the document window. This will give you plenty of room to work.
4 Choose File > Save As.
The Save As (Windows) or Save (Macintosh) dialog box opens.
• In the center of the screen is the document window. In the center of the document window is
the canvas. This is where the Fireworks document and any graphics you create are displayed.
• At the top of the screen is a menu bar. Most Fireworks commands are accessible from the
menu bar.
• On the left side of the screen is the Tools panel. If the Tools panel isn’t visible, choose Window
> Tools. The Tools panel is where you’ll find tools for selecting, creating, and editing a variety
of graphic items and web objects.
• At the bottom of the screen is the Property inspector. If the Property inspector isn’t visible,
choose Window > Properties. The Property inspector displays properties for a selected object
or tool. You can change these properties. If no objects or tools are selected, the Property
inspector displays document properties.
The Property inspector displays either two or four rows of properties. If the Property inspector
is at half height, that is, displaying only two rows, you can click the expander arrow in the
lower right corner to see all properties.
8 Chapter 1
• On the right side of the screen are a variety of panels, such as the Layers panel and Optimize
panel. You can open these and other panels from the Window menu.
• Move your pointer over the various interface elements. If you hold the pointer over an item on
the interface long enough, a tooltip appears. Tooltips identify tools, menus, buttons, and other
interface features throughout Fireworks. Tooltips disappear when you move the pointer away
from the interface elements they identify.
You’ll learn more about each of these elements as you progress through the tutorial.
In contrast, a bitmap image is made up of a grid of colored pixels. Images with complex color
variations, such as photographs, are most often bitmap images.
While many applications offer tools to edit either vector shapes or bitmap images, Fireworks lets
you work with both types of graphics. You will work with vector graphics in this section.
3 Type 333366 in the text box at the top of the window, then press Enter.
The Fill Color box changes to a dark blue color to reflect your color choice.
4 In the document window, position the cross-hair pointer over the canvas, and drag downward
and to the right to create a rectangle. You can draw the rectangle anywhere on the canvas.
You’ll resize and position it later in this procedure.
5 When you release the mouse button, a dark blue rectangle appears, selected, in the area you
defined.
You can tell when an object is selected because it displays blue corner points. Most objects also
have a blue highlight around their outer edges, but rectangles are an exception.
10 Chapter 1
6 In the lower left corner of the Property inspector, enter 480 in the width box and 15 in the
height box, then press Enter.
The rectangle is resized to fit the specified dimensions.
7 Choose the Pointer tool in the Select section of the Tools panel.
8 Drag the rectangle so that it is positioned at the bottom of the canvas, as shown below. Use the
arrow keys for exact placement.
9 Choose the Rectangle tool again, and draw a second rectangle. Draw it anywhere on the canvas,
and make it any size you want. You’ll change its properties and position in the next section.
2 Set the Tip Size to 1 by dragging the pop-up slider or typing in the text box.
3 Click the Fill Color box in the Property inspector and click the Transparent button.
If your system uses gray as the color for the window background, it may be difficult for you to
see the rectangle at this point. But don’t worry, it’s still there.
5 Choose the Pointer tool and click anywhere away from the rectangle to deselect it.
The properties change in the Property inspector. Because no objects are selected, you now see
document properties instead of object properties.
Import an image
You will modify an image of a classic automobile. First you need to import the image.
1 Choose File > Import and navigate to the Tutorials folder on your desktop. Browse to the
Tutorial1/Assets folder.
2 Select car.jpg and click Open.
12 Chapter 1
3 Align the insertion pointer with the upper left corner of the canvas and click, as shown in the
following illustration.
Zoom tool
The Polygon Lasso tool allows you to draw a selection around pixels using a series of straight
lines. You’ll use the Polygon Lasso tool to select the pixels that make up the car image.
4 In the Property inspector, set the Edge option to Anti-alias.
6 Complete the selection by moving the pointer over the spot where you started the selection. A
small gray square appears beside the Polygon Lasso pointer to indicate you are about to
complete the selection. Click to complete the selection.
14 Chapter 1
Add and edit Live Effects
Next you’ll apply Live Effects to the original bitmap image. You’ll change the image’s hue and
saturation and apply a blur.
1 Click anywhere on the desert image. (Be careful not to click on the car, however.)
2 In the Property inspector, click the Add Effects button (the button with the plus (+) sign).
3 Choose Adjust Color > Hue/Saturation from the Effects pop-up menu.
The Hue/Saturation dialog box opens.
16 Chapter 1
Merge bitmaps
Now that you’ve applied Live Effects to the background image, you will merge it with the
grayscale car image to create a single bitmap.
1 If the Layers panel is minimized or isn’t visible, click its expander arrow or choose
Window > Layers.
Expander arrow
2 Click the thumbnail of the grayscale car image in the Layers panel.
3 With the car image selected, click the Options pop-up menu icon at the upper right of the
Layers panel.
Name objects
It’s always a good idea to name your objects so you can easily identify them later. When a
document gets large and contains many objects, it can be difficult to manage if your objects don’t
have unique names.
Here you’ll name the objects in your document using both the Layers panel and the Property
inspector.
1 Double-click the word Bitmap beside the image thumbnail in the Layers panel.
A text box appears.
3 In the document window, select the gray rectangle that borders the document. If it’s too hard
to see on the canvas, select it in the Layers panel.
This time you’ll name an object using the Property inspector.
4 Type Border in the Object Name box of the Property inspector, and press Enter.
The name you enter is also displayed beside the object thumbnail in the Layers panel.
18 Chapter 1
5 Enter a name for the remaining rectangle object using either the Layers panel or the Property
inspector. Use any name you like, but be sure to choose a name that is meaningful so you can
easily identify and manage objects in the document later.
As you drag, the pointer changes to reflect that you are dragging an object (Windows only). A
dark line in the Layers panel indicates where the object will be dropped if you release the
mouse button at that time.
3 Release the mouse button.
The blue rectangle is dropped just above the bitmap object in the Layers panel. The stacking
order of objects also changes on the canvas. The blue rectangle now overlaps the bitmap object
and the border object.
4 You want the border object to be the topmost object, so select its thumbnail and drag it to the
top of the Layers panel, above the blue rectangle.
Apply a mask
First you will apply an empty, white bitmap mask to the car image. A white mask shows a selected
object or image, whereas black pixels in a mask hide a selected object or image.
You’ll also paint on the mask to make the car image appear to be fading into the background.
1 With the Pointer tool, select the bitmap image.
2 Click the Add Mask button at the bottom of the Layers panel.
An empty, transparent mask is added to the selected image. You can see the mask has been
added by looking at the mask thumbnail in the Layers panel. The yellow highlight around the
mask thumbnail indicates it is selected.
Mask thumbnail
Mask object
20 Chapter 1
3 Choose White, Black from the bottom of the Preset pop-up menu.
The color ramp and swatches change to reflect the new setting. The color swatches located just
beneath the color ramp allow you to modify the colors in the gradient.
Color ramp
Color swatches
4 Drag the left (white) color swatch about 1/4 of the way to the right to adjust the gradient.
5 Click outside the Edit Gradient pop-up window to close it.
6 On the canvas, drag the Gradient pointer across the bitmap image, as shown in the following
illustration. Visual feedback appears onscreen as you drag, allowing you to define the angle and
distance in which the gradient will be applied.
Leading
Horizontal Scale Alignment buttons
The color pop-up window closes, and the Fill Color box changes to reflect the chosen color.
• Ensure that none of the style buttons (Bold, Italic, Underline) are selected.
• Click the Left Alignment button.
22 Chapter 1
3 With the I-beam pointer, click once in the middle of the canvas.
An empty text block is created.
The hollow circle in the upper right corner of the text block indicates that the text block is
auto-sizing. An auto-sizing text block in Fireworks adjusts its width based on the longest line of
text in the block.
Auto-sizing indicator
7 Click outside the text block to deselect it, and choose the Text tool again.
8 In the Property inspector, choose Arial as the font and 12 as the font size.
9 Click on the canvas again, somewhere beneath the text block you just created, and type
CLASSIC RENTALS in uppercase letters.
10 Choose the Pointer tool to apply the text entry.
Switching to another tool in the Tools panel applies text entries and edits just like clicking
outside a text block does. Pressing the Esc key will achieve the same result.
A text block appears. The hollow square in the upper right corner indicates that the text block is
a fixed-width text block, defined by the marquee you drew. Fixed-width text blocks retain the
width you specify no matter how much text you type. The hollow corner handle is a toggle.
Double-clicking it will toggle a text block between auto-sizing and fixed-width.
3 Type the following text without entering any line breaks as you type:
Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to
any destination.
24 Chapter 1
Tip: If you are viewing this tutorial online, you can simply copy and paste the text above into the text block in
Fireworks.
The text flows into the text block you created. The text block grows vertically but not
horizontally.
4 Choose the Pointer tool and click outside the text block to deselect it. Then choose the Text
tool again.
5 In the Property inspector, click the Fill Color box and choose white as the text color.
6 Click in the lower left corner of the canvas.
A new text block appears on top of the blue rectangle.
7 Type the following in uppercase letters without entering any line breaks:
SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC -
EXOTIC - ROADSTER
Tip: If you are viewing this tutorial online, you can simply copy and paste the text above.
8 Choose the Pointer tool and reposition the text block as shown below.
Any text you create in Fireworks can be edited as you would edit text in a word processor. To edit
text, simply double-click a text block with the Pointer tool, highlight the text you want to change,
and type over it. Or click the I-beam pointer anywhere in the text block to add new text.
• Set the Horizontal Scale option in the Property inspector to 89%, and press Enter.
The characters in the Vintage text block become thinner. Horizontal Scale stretches or shrinks
the characters in selected text horizontally. The default setting is 100%. Anything greater will
stretch text horizontally, and anything less will decrease its width.
3 Drag the Vintage text block so that it is positioned as shown in the following illustration.
26 Chapter 1
6 Drag the text block to reposition it as shown below.
9 Drag one of the text block’s corner handles to resize it, so that the text flows as shown below. If
necessary, drag the entire text block to reposition it as well.
3 Enter 5 for Distance and 60% for Opacity. Click outside the pop-up window to close it.
A drop shadow effect is added to the Vintage text block.
4 Click an empty area of the document window to deselect the text block.
28 Chapter 1
2 Choose JPEG – Better Quality from the Settings pop-up menu.
The options in the panel change to reflect the new setting.
These settings can be changed, but for this tutorial you will use the default settings.
3 Click the Preview tab near the top of the document window.
The Preview tab displays your document as it will appear when exported with the current settings.
File size
Download time
At the upper right of the window, Fireworks displays what the file size will be for the exported
file and the estimated time it will take to display the graphic when it is viewed on the web.
The filename listed has a .jpg extension. Fireworks chose this file format because you selected it
in the Optimize panel.
2 Navigate to the Tutorials folder on your desktop, and browse to Tutorial1/Export.
3 Ensure that the Save As Type (Windows) or Save As (Macintosh) pop-up menu reads Images
Only, and click Save.
The JPEG file is exported to the location you specified.
Remember that the PNG file is your source file, or working file. Although you’ve exported
your document in JPEG format, you also must save the PNG so any changes that you’ve made
will be reflected in the source file as well.
4 Choose File > Save to save the changes to the PNG file.
5 Choose File > Close.
30 Chapter 1
2 Select vintage.jpg and click Open.
The graphic opens in a new document window in Fireworks. In the Layers panel, all your
objects have been flattened. When objects are flattened, they merge into a single object and are
uneditable as separate objects.
The Property inspector displays properties for a bitmap. All the Live Effects and other attributes
you applied using the Property inspector are no longer available for the selected bitmap.
The document looks this way because Fireworks had to flatten the image and all its properties
when you chose to export it to JPEG format. However, you still have your source PNG file, so
if you need to do more work on the design, you can always open the PNG file and all the
objects will still be editable.
3 Choose File > Open and select vintage.png in the Tutorial1 folder. Click Open.
In the Layers panel, all your objects are again available as separate objects. Each object is
editable, along with its properties.
4 Click on each object.
The Property inspector displays the various options for each object you select.
5 Select the Vintage text on the canvas.
The Drop Shadow Live Effect for this text object appears in the Property inspector.
You can now see the benefit of using a Fireworks PNG as your source file. You can make
changes to a document and it always remains editable, even if you choose to export the
document to another format such as JPEG.
32 Chapter 1
CHAPTER 2
Web Design Basics Tutorial
This tutorial will guide you through the basic tasks of designing web graphics and interactivity
with Macromedia Fireworks MX. You’ll get hands-on experience using the industry’s leading web
graphics application and learn web design concepts along the way.
33
Copy the Tutorials folder
Before you begin, you’ll make a copy of the Tutorials folder so that you can save the results of your
work while allowing you or another user to complete the tutorial at a later time using the original files.
If you completed the Graphic Design Basics tutorial, you’ve already made a copy of the Tutorials
folder, so you can skip this step.
1 Navigate to the Fireworks application folder on your hard disk.
Note: If you are unable to view your Fireworks application folder, you may have limited access to files on your
system. You can download the files you need for this tutorial from the Fireworks Support Center on the web at
http://www.macromedia.com/support/fireworks/.
3 Select the final.htm file and drag it to the open browser window.
For this tutorial, you will complete a partially finished version of this page for Global, a rental
car company.
4 Move the pointer over the large Vintage image.
When the pointer moves over the Vintage image, another image on the page changes. This is
called a disjoint rollover.
5 Move the pointer across the navigation bar along the top of the web page. The buttons change
in response to the pointer passing over them. Click the Rates button to test the link.
The link takes you to the Fireworks page at http://www.macromedia.com, but you will enter
your own URL for this and other items as you complete the tutorial.
6 Use your browser’s Back button to return to the final.htm page.
7 Move the pointer over the Worldwide Airports image. A pop-up menu appears. Roll over each
item in the menu with the pointer, including the first item, which contains a submenu.
8 Click United States to test the link, then return to the final.htm page.
9 When you finish viewing the web page, you can either close it or leave it open for reference as
you take the tutorial.
Note: The Complete folder also includes the Fireworks document from which the HTML file is generated. To
view this document, double-click final.png.
34 Chapter 2
Open the source file
You’ve viewed the final.htm file in a browser, so you’re ready to begin.
1 In Fireworks, choose File > Open.
2 Navigate to the Tutorials folder on your desktop. Browse to Tutorial2/Start and open
global.png.
Note: As you perform the tutorial, remember to save your work frequently by choosing File > Save.
Import a graphic
Now that you’ve opened the unfinished design for the Global web page, you’ll import a graphic.
If you completed the Fireworks Graphic Design Basics tutorial, you will use the JPEG you
created. If you did not take that tutorial, a completed image is provided for you.
1 Choose File > Import and do one of the following:
• If you completed the Graphic Design Basics tutorial, browse to the Tutorial1/Export folder.
• If you didn’t complete the Graphic Design Basics tutorial, browse to the Tutorial2/Assets folder.
2 Select vintage.jpg and click Open.
3 Click anywhere in the empty, white area of the canvas.
The image appears, selected.
4 Drag the image so that it is positioned as shown in the following illustration.
3 Shift-click the Worldwide Airports graphic and the Great Weekend Rates graphic on the left
side of the document to select both at the same time.
4 Choose Edit > Insert > Slice. In the message box that appears, choose Multiple. This allows you
to insert multiple slices at the same time.
Slices are inserted on top of each of the selected graphics. Adding additional slices changes the
layout of auto-slices in the rest of the document.
36 Chapter 2
6 Place the pointer over the Vintage image’s left slice guide.
The pointer changes to the guide movement pointer, indicating you can grab the slice guide
and drag it. By dragging a slice guide, you can change the shape of a slice.
7 Drag the slice guide to the left until it snaps with the right slice guide on the Great Weekend
Rates graphic, as shown in the illustration below.
Behavior handle
38 Chapter 2
Behaviors can also be applied using the Behaviors panel. But for simple interactivity like
rollovers, a slice’s behavior handle is a faster and easier method of applying a behavior.
2 Drag the behavior handle onto the Great Weekend Rates slice, and release the mouse button.
A blue behavior line extends from the behavior handle to the corner of the slice, and the Swap
Image dialog box appears.
3 Ensure that Frame 2 is selected in the Swap Image From pop-up menu, and click OK.
When the pointer moves over the Vintage slice in a browser, an image in Frame 2 will replace the
Great Weekend Rates graphic. The Vintage image is considered the trigger for the rollover effect,
and the image that replaces the Great Weekend Rates graphic is considered the swap image.
4 If the Frames panel is minimized or isn’t visible, click the expander arrow for the Frames and
History panel group and click the Frames tab, or choose Window > Frames.
The Frames panel lists the frames available in the current document. Currently there is only
one frame in the document. The Frames panel is typically used for animation. In the case of
rollovers, it is used to hold swap images.
No objects are listed in the Layers panel, except the contents of the Web Layer. That’s because
layers in Fireworks are not shared across all frames by default, with the exception of the Web
Layer, which is always shared. Objects on the Web Layer appear in every frame of the
document, so any changes you make to web objects, such as slices, affect all frames.
6 Choose File > Import and browse to the Tutorial2/Assets folder. Select the file named rates.gif
and click Open.
7 Place the insertion pointer over the slice where the Great Weekend Rates graphic was located in
Frame 1. Align the pointer as best you can with the upper left corner of the slice.
40 Chapter 2
8 Click to insert the graphic.
The Vintage Classic Rates graphic appears.
9 Click the Preview tab at the top of the document window, and hide the slices in the document
by clicking the Hide Slices and Hotspots button in the Web section of the Tools panel.
Move the pointer over the Vintage image. The Great Weekend Rates image changes when the
pointer rolls over the Vintage image.
Tip: If the image seems to jump a bit or the transition between graphics doesn’t look smooth, adjust the position
of the swap image in Frame 2 while in Original view. For precise positioning, turn on Onion Skinning in the
Frames panel or verify that the X and Y coordinates of the Vintage Classic Rates image are the same as those of
the Great Weekend Rates image in the Property inspector. When you are finished, return to Frame 1 and turn off
Onion Skinning if necessary. For more about these options, refer to the index of Using Fireworks or search
Fireworks Help.
10 When you are finished, click the Original tab at the top of the document window to return to
normal view, and turn slices back on by clicking the Show Slices and Hotspots button in the
Tools panel.
You have successfully created a disjoint rollover. Simple rollovers are created in a similar manner:
when dragging a slice’s behavior handle as you did in step 2, you simply drag it back onto the
same slice.
Generally, web designers add a rollover effect to an image to provide users with a visual cue that
the graphic is clickable. If the Global web site was an actual site on the Internet, you’d probably
want the Vintage and Rates images to link to other pages that provide more information. For the
purposes of this tutorial, you’ll leave the disjoint rollover as it is. You’ll get plenty of practice
attaching links to other web objects in the following section.
A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice.
This indicates that the selection in the workspace is an instance of the symbol you just created.
Symbols are like master copies of your graphics. When you change a symbol, all of the
instances of that symbol in your document change automatically. Symbols reside in the library.
4 If the Library panel is minimized or isn’t visible, click the Assets panel group’s expander arrow
and click the Library tab, or choose Window > Library.
Your symbol is listed in the Library panel.
42 Chapter 2
Create button states
Next you’ll create various states for the button symbol. Button states are the different ways a
button appears when rolled over or clicked in a web browser.
1 Double-click the button instance you created.
Tip: Alternatively, you can double-click the preview of the button in the Library panel or the symbol icon beside it
in the Library panel’s symbol list.
The Button Editor opens with the button graphic displayed in the work area.
4 Clone two more instances of the button, and position each to the right of the previous instance.
Tip: As a shortcut, press Alt (Windows) or Option (Macintosh) while dragging the selected instance with the
pointer to make a copy of it. After positioning the new instance to the immediate right of the previous instance,
choose Edit > Repeat Duplicate to automatically create and place another copy of the instance.
44 Chapter 2
Change button instance text
Now that you’ve created all the buttons for your nav bar, you need to give each button unique
text. You can easily change the text on a button instance using the Property inspector.
1 Select the button instance at the far left.
Properties for the button instance appear in the Property inspector. With the exception of the
Export Settings pop-up menu, these properties apply to the selected instance only. Making
changes here will not affect the original button symbol in the library.
2 In the Property inspector, replace the text in the Text box with the word HOME in uppercase
letters. Then press Enter.
The text on the button changes to reflect your entry.
3 For the remaining three buttons, change the button text to VEHICLES, RATES, and
CONTACT US, respectively.
When clicked in a web browser, the Home button will jump to a page called index.htm. You’ll
discover later in the tutorial why you linked the Home button to this page.
For the purposes of this tutorial, any working URL will do. If you were creating a real web site,
you would enter the URL that you wanted the Vehicles button to jump to.
Note: Be sure to enter the URL of an actual web site, so that you can test your button links later.
4 Assign a URL to each of the remaining button instances. Once again, any working URL will do.
5 Choose File > Preview in Browser > Preview in [your preferred browser]. To test button links,
you must preview the document in a browser.
Note: If your browser is not listed, you must first select a browser by choosing File > Preview in Browser > Set
Primary Browser.
When the document opens in your browser, test the buttons you created. Except for the Home
button, which links to a file you haven’t created yet, each button should jump to the link you
specified in Fireworks.
46 Chapter 2
8 Select the button text in the Button Editor, and in the Property inspector choose Arial as the
font. Do this for each button state.
9 Double-click the text block in the Button Editor, and delete the word BUTTON.
10 Click Yes in the message box that asks if you want to change the text in the other button states.
Examine the various button states in the Button Editor. The text changes in one state are
reflected across all the button states. Compare this to when you changed the font; you had to
change it in each state. That’s because you can apply different graphical and text attributes to
each state of a button. This is useful if you want the text color to change when a user rolls over
a button, for example.
11 Click Done to exit the Button Editor.
The font on each button instance changes to reflect the new font selection, but the text
remains the same. Button instances reflect only the changes you make to a button symbol’s
graphical appearance, including its text attributes, but not changes you make to the text itself.
Button symbols make it possible for you to change the graphical appearance of all button
instances in a nav bar quickly, while preserving each instance’s unique text.
3 Double-click the text box in the upper left corner (Windows only).
4 Type North America in the text box and press Enter.
The next text box is highlighted, ready for you to create another entry.
48 Chapter 2
6 Create three more entries for Africa, Middle East, and Asia/Pacific.
7 Double-click the Link text box for the North America entry.
8 Enter a working URL of your choice and press Enter.
For the purposes of this tutorial, any URL will do. Be sure it’s an actual URL so that you’ll be
able to test your links later.
11 To test your pop-up menu, choose File > Preview in Browser > Preview in [your preferred
browser] to preview the document in a browser.
Note: Pop-up menus must be previewed in a browser; they aren’t visible using the Preview tab in Fireworks.
When the document opens in your browser, move the pointer over the Worldwide Airports
graphic. The pop-up menu you created appears. Click each entry to test the links.
3 Choose HTML as the cell type and Vertical Menu as the alignment.
4 Choose Arial, Helvetica, sans-serif as the font and 12 as the font size.
5 In the Up State section, set the text color to black, if black is not already selected. Then click
the Cell Color box. If CCCCCC is not already displayed in the text box at the top of the color
pop-up window, enter CCCCCC and press Enter.
These color values are the default colors selected in the Pop-up Menu Editor if you’ve never
created a pop-up menu before. Once you change these colors, they will be used every time you
create a pop-up menu, until you choose other colors.
50 Chapter 2
6 In the Over State section, set the text color to White if it’s not already selected, and click the
Cell Color box. Click the eyedropper pointer on the blue rectangle on the canvas that
surrounds the Worldwide Airports graphic, as shown below.
52 Chapter 2
4 Double-click the Text field of the new entry and enter Latin/South America. Click anywhere
outside the Text field to apply the entry.
6 Select the North America entry and click the Add Menu button.
7 Double-click the Text field of the new entry and enter United States. Then click anywhere
outside the entry fields. Be careful not to select another entry, however.
8 Select the United States entry if it’s not already selected, and click the Indent Menu button.
The entry is indented beneath the North America entry.
10 Assign URLs to all the new entries. Optionally, you can delete the link for North America,
because users will be choosing items from its submenu.
11 Click Done to close the Pop-up Menu Editor, and then preview the pop-up menu changes
in a browser.
54 Chapter 2
Fireworks chooses GIF as the default export file format and Websnap Adaptive as the default
color palette. Most of the graphics on the Global Rental Cars web page will be fine using these
settings. The Vintage bitmap image, however, contains a photograph and a gradient. Because
of its complex color variations, it will be best exported in another format.
2 Click the 2-Up preview tab in the document window.
The 2-Up tab allows you to view the results of your optimization settings and compare them
with the original. By now you’ve probably noticed the white slice overlay each time you view
one of the Preview tabs. The overlay allows you to focus on just the area you want to optimize.
3 Click the slice for the Vintage image in the preview on the right.
The slice overlay disappears so you can view the image beneath the slice. At the bottom of the
preview, the export file format for the selected slice is displayed, as well as the estimated export
file size, and the amount of time the graphic will take to download from the web.
Tip: Use the Hand tool in the View section of the Tools panel to view more of the image if it’s not entirely visible.
4 Hide the slices for a moment by clicking the Hide Slices and Hotspots button in the Web
section of the Tools panel.
This allows you to compare the preview with the original and see the difference between the
two graphics. The preview on the right has bands in the gradient.
5 Turn slices back on again, and click the Vintage image with the Pointer tool.
The gradient bands are now gone, and the file size has decreased significantly. That’s because
photographs and images with complex color variations are better optimized and compressed as
JPEGs than as GIFs.
Now that the file size has been decreased, the image has become fuzzy.
7 To improve the appearance of the bitmap, drag the Quality slider in the Optimize panel to 77
and set the Smoothing option to 0.
The bitmap is much clearer, but the file size has also increased. However, it is still an
improvement over the file size when the image was optimized as a GIF.
8 Click the Original tab to return to normal view.
56 Chapter 2
Export HTML
HTML, or HyperText Markup Language, is the primary method used on the Internet to create
and display web pages. You don’t need to understand HTML to use Fireworks, but it helps to
keep in mind that Fireworks slices become cells in an HTML table when exported.
Here you’ll export and view your finished document in a web browser. You’ll also examine the
HTML code that Fireworks exports.
58 Chapter 2
The Document Specific tab allows you to choose a variety of document-specific preferences,
including a customized naming convention for your exported files. Remember that the options
you set here apply only to the current Fireworks document.
Tip: You can apply the settings on the Document Specific tab to all new documents by clicking the Set Defaults
button.
7 Click OK to accept the settings on the Document Specific tab and close the HTML Setup
dialog box.
60 Chapter 2
View the Fireworks HTML file in a browser
Now that you’ve examined the exported files, you’re ready to test the web page in a browser.
1 From the Export folder, drag the index.htm file to an open web browser.
2 In the browser, click the buttons you added to test the links, then return to the index.htm file.
3 Test the other features that you added.
4 Most web browsers let you view the source code with a command such as View > Source. Find
and execute the command that lets you view the code.
5 Scroll through the source code. If you know HTML and JavaScript, you will recognize the
code that Fireworks created for you. If you don’t know HTML and JavaScript, you can
appreciate that Fireworks gives you no compelling reason to have to learn either.