886
Creating Gradients
3. Click the Fill Color box in the Tools panel to assign colors to the
gradient.
The Fill Options window appears, as shown in Figure 3-7.

Figure 3-7:
Assign the
gradient
colors.

4. To assign colors to the gradient, simply click the existing color stops
and choose a color from the pop-up palette.
5. Click anywhere on the gradient ramp to add a stop, and edit the color.

If you don’t want to create your own gradient, click the Preset drop-down list
to choose among existing gradients, as shown in Figure 3-8.

Figure 3-8:
Pick a
preset
gradient
from this
drop-down
list.

79_607466-bk08ch03.indd 88679_607466-bk08ch03.indd 886 5/25/10 9:04 AM5/25/10 9:04 AM
Chapter 4: Creating
Text in Fireworks
In This Chapter
✓ Creating and formatting text

✓ Setting a text attribute
✓ Working on spacing, alignment, and orientation
✓ Applying effects
✓ Styling text
✓ Checking your spelling
✓ Setting text on a path
✓ Outlining your text
Y
ou definitely don’t want to attempt to create a brochure in Fireworks,
but you can take advantage of its excellent capabilities to format your
on-screen text. Whether you’re working with paragraphs or single lines
of text, you have lots of options for applying fonts, styles, and interesting
effects. In this chapter, you find out where to find the features you need to
make your words look just the way you like them.
Creating Text
You can create text in either of two ways:
✦ Select the Type tool, click in the image area, and begin typing.
✦ Copy (or cut) text from another application, select the Type tool, and
paste it on the artboard.

In a hurry? You can select text from one application and then click and drag
it into the Fireworks workspace.
80_607466-bk08ch04.indd 88780_607466-bk08ch04.indd 887 5/25/10 9:04 AM5/25/10 9:04 AM
888
Setting Text Attributes
Setting Text Attributes
Text can create mood and feeling, so you have to make sure your message
has the right font and style. You can apply text attributes by using one of
two main methods: the Type menu or the Properties panel. In this chapter,
you use the Properties panel (see Figure 4-1), because it provides an easier

method of locating text attributes. If the Properties panel isn’t visible at the
bottom of the Fireworks workspace, choose Window➪Properties.

Figure 4-1:
Choose
font, size,
and other
attributes.

Whether you use the Type menu or Properties panel, you can set text attri-
butes from the Properties panel either before or after you enter text.
The same rule applies in Fireworks as in all other applications: You have to
select it to affect it. Before you apply any attributes, use the Pointer or Text
tool to select the text you want to format.
To set text attributes with the Properties panel, follow these steps:
1. Select the text you want to format.
2. Choose a font from the Font drop-down list and then choose a style
from the Style drop-down list.

If you don’t see your favorite font in bold, you can take advantage of the
Bold button to create faux bold text. (It isn’t the true bold font, but it’s
close). The same trick works with the Italic button.
3. To assign color, click the color selector box to the right of the Size
drop-down list and then choose a color from the pop-up Swatches
panel.
Fine-Tuning Spacing, Alignment, and Orientation
Unfortunately, the Fireworks text controls leave much to be desired, compared
with the other Creative Suite applications. But if you want to fine-tune your text,
you might consider adjusting the spacing between characters or lines.
Sliders are available in the Properties panel for adjusting the kerning (spac-

ing between two characters), tracking (spacing between multiple letters),
80_607466-bk08ch04.indd 88880_607466-bk08ch04.indd 888 5/25/10 9:04 AM5/25/10 9:04 AM
Book VIII
Chapter 4
Creating Text in
Fireworks
889
Adding Effects
and leading (spacing between lines of text). Select the text you want to
format, adjust the slider as shown in Figure 4-2, and then click off the slider
to confirm the change.

Figure 4-2:
Adjust
kerning,
tracking,
and leading.

Set Text Orientation
Kerning and tracking Leading units
Leading
Kerning and tracking are controlled using the same Kerning tool. To kern
between two letters, insert the cursor between the two letters before making
a change. To adjust tracking, select multiple letters before making a change.
To align selected text, click the Left, Center, Right, or Justified alignment
button in the Properties panel.
You can also change the orientation of selected text by clicking the Set Text
Orientation button (refer to Figure 4-2).
Adding Effects
Spunk up your text by adding Live Effects from Photoshop. You can add

drop shadows or 3D effects or even make your text look like wood!
To add effects to your text, follow these steps:
1. With the Pointer tool, select some text and then click the Add Filters
button in the Properties panel, shown in Figure 4-3.

Figure 4-3:
Click the
Filters
button
to apply
additional
effects.

80_607466-bk08ch04.indd 88980_607466-bk08ch04.indd 889 5/25/10 9:04 AM5/25/10 9:04 AM
890
Giving Your Text Some Style
2. Select Photoshop Live Effects from the pop-up window that appears.
The Photoshop Live Effects dialog box appears (see Figure 4-4).

Figure 4-4:
Set text
effects
in the
Photoshop
Live Effects
dialog box.

3. In the list on the left side of the dialog box, select the effect you want
to apply.
4. Set the related options on the right side of the dialog box and click OK.

The effects are applied to your text, as shown in Figure 4-5.

Figure 4-5:
Create
interesting
text effects.


Don’t apply all these effects to your text at the same time. You’ve heard
it before, but we have to say it again: Just because you can do something
doesn’t mean that you always should.
Giving Your Text Some Style
You can choose among an array of interesting default styles to apply to both
objects and text. You can also create your own styles — an extremely helpful
capability when text needs to be consistent throughout an entire Web site.
Styles are applied to the entire text area.
80_607466-bk08ch04.indd 89080_607466-bk08ch04.indd 890 5/25/10 9:04 AM5/25/10 9:04 AM
Book VIII
Chapter 4
Creating Text in
Fireworks
891
Giving Your Text Some Style
Applying an existing style
To apply an existing text style, follow these steps:
1. Create some text by typing, cutting, copying, and pasting or by drag-
ging the text on the artboard.
2. Use the Pointer tool to select the text you want to affect.
3. Choose Window➪Styles.
The Styles panel appears (see Figure 4-6).

4. From the drop-down list, choose a category of style that you want to
apply.
In Figure 4-6, the Chrome Styles category was selected.
5. Click the style preview that you want to apply to your selected text.

Figure 4-6:
Click a style
to apply
interesting
attributes
to your
selection.

New Style
Creating your own style
Save yourself time by applying all the text attributes you need to make your
text look just right.
To create a custom style, follow these steps:
1. Select some text and apply all the formatting and effects you want to
use, following the procedures described earlier in this chapter.
2. Choose Window➪Styles to display the Styles panel.
3. From the Style Category drop-down list, choose a category for saving
the style.
80_607466-bk08ch04.indd 89180_607466-bk08ch04.indd 891 5/25/10 9:04 AM5/25/10 9:04 AM
892
Spell-Checking Your Text
4. Click the New Style button in the lower right corner of the Styles
panel (refer to Figure 4-6).
The New Style dialog box appears.
5. Type an appropriate name for the style in the Name text box.

6. Select the attributes you want to save and click OK.
You have a saved style that you can apply to selected text at any time.
Spell-Checking Your Text
Checking your spelling is simple, right? It certainly is simple in Fireworks, so
you have no excuse for typographical errors.
To check the spelling of your text in Fireworks, follow these steps:
1. Choose Text➪Spelling Setup.
The Spelling Setup dialog box appears.
2. Choose the language that you want to use for the spelling check.
3. Set any other options you want to use and click OK.
4. Choose Text➪Check Spelling.
The Check Spelling dialog box appears with the first questionable spell-
ing highlighted.

If you want to add unique words in your document to the spell-checking
dictionary, click the Add to Personal button in the upper right corner of the
Check Spelling dialog box.
Attaching Text to a Path
Add some excitement by attaching text to a path. In Figure 4-7, the text is
attached to a curvy path, but you can just as easily create angled text or text
that follows a circle.
Follow these steps to attach text to a path:
1. Select the text that you want to attach to the path.
2. Create a path with the Pen, Line, or Shape tool.
See Book III, Chapter 5 for additional details on creating a path using the
Pen tool.
80_607466-bk08ch04.indd 89280_607466-bk08ch04.indd 892 5/25/10 9:04 AM5/25/10 9:04 AM
www.zshareall.com
Book VIII
Chapter 4

Creating Text in
Fireworks
893
Attaching Text to a Path

Figure 4-7:
You can
make text
curve by
attaching
the text to a
path.

3. Using the Pointer tool, select the text area and then Shift-click the
path.
Both the text and the path are selected.
4. Choose Text➪Attach to Path.

If you want the text to run inside a shape, such as a circle, choose
Text➪Attach in Path.
To change the orientation of the attached text on the path, choose Text➪
Orientation and then choose an orientation option from the submenu. In
Figure 4-8, the orientation has been changed to Skew Vertical.

Figure 4-8:
You can
change
the text
orientation
on the path.


80_607466-bk08ch04.indd 89380_607466-bk08ch04.indd 893 5/25/10 9:04 AM5/25/10 9:04 AM
894
Outlining Text
Outlining Text
Creating interesting text with unique fonts can be fun. But what if you need
to send the text to someone whose computer perhaps doesn’t have your
funky Giddyup font installed? No problem — Fireworks lets you outline text,
which means essentially to turn it into a vector path.
The content of your text can’t be edited after it’s been outlined.
To outline your text, follow these steps:
1. Create some text with the attributes you want, including the font.
The size doesn’t have to be exact, however; you can rescale even after
outlining the text.
2. With the Pointer tool, select the text area.
You can’t outline individual letters or words within a text area.
3. Choose Text➪Convert to Paths.
The text is outlined.
To edit the new vector path, switch to the Subselection tool and click an
individual letter, as shown in Figure 4-9.

You can ungroup your text by selecting it then choosing Modify➪UnGroup.

Figure 4-9:
Turn your
text into
vector
paths.

80_607466-bk08ch04.indd 89480_607466-bk08ch04.indd 894 5/25/10 9:04 AM5/25/10 9:04 AM

Chapter 5: Getting Images
In and Out of Fireworks
In This Chapter
✓ Importing images
✓ Editing images
✓ Optimizing and exporting images
C
reating images for your Web site is most likely what you’ll use
Fireworks for most often. In this chapter, you find out how to work
with images from various sources, discover the importance of optimizing,
and see how to export your images.
Getting Images into Fireworks
Besides making your own graphics and illustrations, you can use four main
methods for getting images into Fireworks:
✦ Open: Fireworks isn’t picky. As long as you open images (vector or
raster) by choosing File➪Open, you can open pretty much anything in
Fireworks.
When you open a native Adobe Illustrator or Photoshop file, expect to
see a dialog box, like you see in Figure 5-1. This particular dialog box
appears when you open a Vector image from Adobe Illustrator. As you
can see, you have to make some decisions as to what size the file should
be, which artboards should be imported, and how you want to handle
layers and groups.
When importing a Photoshop file, your choices are relatively the
same, as shown in Figure 5-2. The integration between Fireworks and
Photoshop is excellent; you can keep layers intact and continue your
editing process in Fireworks.
✦ Import: By choosing File➪Import, you can place an image directly in
an existing image. The imported image is placed as a sublayer in the
selected layer, as shown in Figure 5-3. Note that to complete your

import, you need to click on the image area.
81_607466-bk08ch05.indd 89581_607466-bk08ch05.indd 895 5/25/10 9:05 AM5/25/10 9:05 AM
896
Getting Images into Fireworks

Figure 5-1:
Importing
a native
Illustrator
file into
Fireworks.


Figure 5-2:
Importing
a native
Photoshop
file into
Fireworks.


Figure 5-3:
Choose
the Import
menu item
to add an
additional
image as
a layer in
Fireworks.


81_607466-bk08ch05.indd 89681_607466-bk08ch05.indd 896 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII
Chapter 5
Getting Images
In and Out of
Fireworks
897
Editing Images
✦ Drag and drop: You can drag and drop an image from other applica-
tions, such as Adobe Illustrator and Adobe Photoshop, right into the
Fireworks workspace.
To drag and drop between Adobe applications on the Windows plat-
form, you must drag your selection down to the application’s tab on the
taskbar and wait for the application to come forward. Then you can drag
into the work area.
✦ Browse: Just as you can in the rest of the Creative Suite applications,
you can take advantage of Adobe Bridge to preview, search, and orga-
nize images before opening them in Fireworks. Because images typically
open in Photoshop by default, you right-click the image and choose
Open with Adobe Fireworks CS5 from the contextual menu.
To open a file in Bridge, you must click the Browse in Bridge button on the
Application bar in Fireworks, as shown in Figure 5-4.

Figure 5-4:
Click this
button to
open Adobe
Bridge.


Editing Images
After you have an image open in Fireworks, you can start editing it. The
editing features in Fireworks are similar to those in Photoshop but aren’t as
extensive. You can do many basic tasks in Fireworks — crop, paint, and even
curve adjustments — but we suggest that you perform most of your in-depth
retouching in Photoshop.
This section introduces five basic image-editing tasks that you typically per-
form when creating Web graphics. We also discuss the Image Editing panel,
which lets you choose among multiple editing tools.
Scaling
Making images the right size is important. If an image is too large, you waste
valuable download time; if it’s too small, the image looks pixelized and out of
focus. We cover three scaling methods in the following sections.
81_607466-bk08ch05.indd 89781_607466-bk08ch05.indd 897 5/25/10 9:05 AM5/25/10 9:05 AM
898
Editing Images
Proportional scaling
To scale an image in Fireworks proportionally (keeping the same width and
height ratio), follow these steps:
1. Select the layers you want to scale.
If you have multiple layers, you can hold down the Ctrl (Windows) or
Ô (Mac) key and click the layers in the Layers panel to add them to the
selection.

2. Select the Scale tool in the Select section of the Tools panel.
Anchor points surround your selection.
3. To make an image smaller, click and drag a corner anchor point
toward the center; to make an image larger, click a corner anchor
point and drag outward.
Typically, you don’t scale a bitmap image to a dramatically larger size,

because it may become pixelized. The rule of thumb is to not make raster
images more than 20 percent larger. This rule, of course, doesn’t apply to
vector objects.
Nonproportional scaling
If you don’t want to scale proportionally, follow these steps:
1. Select the layers you want to scale.
2. Select the Pointer tool in the Select section of the Tools panel.
3. To resize an image, click and drag a corner anchor point without
using the Shift key.
Numeric scaling
If you need to constrain scaling to an exact amount, you’re better off using
the Image Editing panel. Follow these steps to perform numeric scaling:
1. Select the layers you want to scale.
2. Choose Window➪Others➪Image Editing.
The Image Editing panel appears.
3. Click Transform Commands and choose Numeric Transform from the
drop-down list.
The Numeric Transform dialog box appears, as shown in Figure 5-5.
4. In the Width and Height text boxes, type the percentage by which you
want to scale and click OK.
81_607466-bk08ch05.indd 89881_607466-bk08ch05.indd 898 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII
Chapter 5
Getting Images
In and Out of
Fireworks
899
Editing Images

Figure 5-5:

You can
scale
numerically
by using
the Image
Editing
panel.

Cropping
If you don’t need part of an image, get rid of it. Unwanted image data is a bad
thing for Web graphics because it takes up valuable time when downloading.
Follow these steps to eliminate unwanted image areas:

1. Select the Crop tool from the Select area of the Tools panel or from
the Image Editing panel.
Refer to the preceding section, “Numeric scaling,” to see how to open
the Image Editing panel.
2. Click and drag to select the area you want to keep when the crop is
complete.
3. Press the Enter or Return key.
The image is cropped to the selected area, and the Crop tool is
deselected.
If you’re working with a wireframe of a larger Web page design, you may
want to export only a small portion — for example, to export just the navi-
gational tools, not the rest of the page. To crop only when exporting, follow
these steps:
1. Click and hold the Crop tool to select the Export Area tool.
2. Click and drag to select the area you want to keep when the image is
exported.
3. Double-click in the middle of the cropped area.

The Image Preview window appears, offering you the opportunity to set
export settings for this section of your image.
4. Choose your export settings.
81_607466-bk08ch05.indd 89981_607466-bk08ch05.indd 899 5/25/10 9:05 AM5/25/10 9:05 AM
900
Editing Images
You can choose preset GIF and JPEG settings from the Saved Settings
drop-down list in the upper right area of the Image Preview dialog box
or use the Options, File, and Animation tabs on the left to set up custom
export options.
5. Click Export.
The selected area is exported to a location you choose and you return to
your image, which is still intact.
Painting
Fireworks has many of the same painting capabilities as Photoshop, but the
method in which you use them can be quite different at times.
When you select the Brush tool from the Bitmap section of the Tools panel,
for example, you make decisions about the size of the brush, paint color, and
blending mode from the Properties panel (see Figure 5-6) rather than from
the Options panel, as in Photoshop.

Figure 5-6:
Change your
Brush tool
settings.

Brush color
Tip size
Stroke category
Opacity

Blend mode
Tip Preview
Edge softness
Cloning
The Rubber Stamp tool works much like the Clone Stamp tool in Photoshop.
Follow these steps to clone (copy) pixels in Fireworks:

1. Select the Rubber Stamp tool in the Bitmap section of the Tools panel.
2. Hold down the Alt (Windows) or Option (Mac) key and click the part
of the image you want to clone.
In Figure 5-7, the crosshair on the boy’s left shoulder indicates the pixels
that are being cloned.
81_607466-bk08ch05.indd 90081_607466-bk08ch05.indd 900 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII
Chapter 5
Getting Images
In and Out of
Fireworks
901
Editing Images

Figure 5-7:
Select
pixels for
cloning
and start
painting.

3. Position the mouse pointer over the area where you want the cloned
pixels to appear and start painting.

The cloned pixels appear in the image area (see the left side of Figure 5-6).
As you paint, follow the marker for the source; it moves simultaneously with the
mouse pointer. You can use the Properties panel to change brush attributes.
Filtering
Filters offer you many opportunities to edit your images. You can choose
to blur an image or adjust its colors by using the Curves or Hue Adjustment
layer. To access your filters, you can choose them from the Filters menu or
choose Window➪Others➪Image Editing.
If you want to apply additional filters that you can change later or even
delete, click the Add Filters button in the Properties panel and choose
Photoshop Live Effects from the drop-down list. The Photoshop Live Effects
dialog box appears (see Figure 5-8).

Figure 5-8:
Use
Photoshop
Live Effects
to create
non-
destructive
changes
to your
artwork.

81_607466-bk08ch05.indd 90181_607466-bk08ch05.indd 901 5/25/10 9:05 AM5/25/10 9:05 AM
902
Editing Images
In the following example, you use the Hue/Saturation filter to add a color tint
to an image. Follow these steps:


1. Open an image and select it with the Pointer tool.
2. Click the Add Filter button in the Properties panel.
3. Choose Adjust Color and then Hue/Saturation.
The Hue/Saturation dialog box appears (see Figure 5-9).

Figure 5-9:
Applying
a color
tint with
the Hue/
Saturation
filter.

4. Check the Colorize check box to apply a color tint.
5. Adjust the Hue slider until you find a color you want and click OK.
If you want to edit or delete a filter, follow these steps:
1. Double-click on the listed filter to edit it.
The Hue/Saturation Filter panel opens, where you can make changes to
the filter.
2. Delete a filter by selecting it from the filter list and clicking the minus
icon (–) located on top of the filter list.
Red eye is a typical result of using a camera
with a built-in flash, but you can fix this prob-
lem easily. Click and hold the Rubber Stamp
tool to select the Red Eye tool; then simply click
and drag a marquee around each red-eye
occurrence.
Red eye, be gone!
81_607466-bk08ch05.indd 90281_607466-bk08ch05.indd 902 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII

Chapter 5
Getting Images
In and Out of
Fireworks
903
Optimizing Images for the Web
Optimizing Images for the Web
Now that you have created and edited your image, you’re ready to prepare
it for the Web. You must consider two major factors in Web graphics: speed
of download and appearance. Having the best of both worlds is difficult,
however; usually, you opt to give up some appearance for better speed. This
process is optimization.
Previewing Web settings
Fireworks helps you with the optimization process from the beginning. By
using the 2-Up preview in the upper left section of the image window, you
can easily compare your optimized image with the original, based on your
settings in the Optimize panel.
You can even use the preview windows to compare two to four Web formats
and see which one looks best but has the most reasonable file size. Each pre-
view window includes important information, such as file size.
If you want to go crazy, you can compare four settings by clicking 4-Up (see
Figure 5-10). Using the preview windows, you can quickly change various
settings — such as format, number of colors, and quality — and see the
effect immediately, without previewing the image on the Web.

Figure 5-10:
Compare
four Web
image
formats by

choosing
4-Up view.

81_607466-bk08ch05.indd 90381_607466-bk08ch05.indd 903 5/25/10 9:05 AM5/25/10 9:05 AM
904
Exporting for the Web
Working with the Optimize panel
Now that you know how to compare images, where do you make the nec-
essary optimization changes? In the Optimize panel, of course (see Figure
5-11). For a more thorough description of each file format, including its bene-
fits and drawbacks, see Book IV, Chapter 10, which covers Web optimization
in Photoshop CS5.

Figure 5-11:
Use the
Optimize
panel to find
the best
quality at
the smallest
file size.

When you understand the Web-format settings, you can click the pre-
view image you want to optimize; choose Window➪Optimize to open the
Optimize panel; and apply settings that provide the best, most size-efficient
image. If you aren’t sure what to pick, choose a default setting from the
Saved settings drop-down menu. Typically, line art and vector graphics (cre-
ated with solid colors) are best to save as GIF files, whereas photographs or
images with gradient tints should be saved as JPG files. After choosing the
optimal settings, you can export the image, as the following section explains.

Exporting for the Web
You can export individual images or entire Web pages by using the Export
feature of Fireworks.
To export a Fireworks document, follow these steps:
1. Choose File➪Export.
The Export dialog box opens, as shown in Figure 5-12.
2. Navigate to an appropriate location to save your file.

If you intend to use this image on a Web site, the best practice is to save
it in the folder you typically use for Web images.
81_607466-bk08ch05.indd 90481_607466-bk08ch05.indd 904 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII
Chapter 5
Getting Images
In and Out of
Fireworks
905
Exporting for the Web

Figure 5-12:
After your
document is
optimized,
you can
export it for
Web use.

3. Type a name in the File Name text box.
4. Choose Images Only from the Export drop-down list and click Save.
In Chapter 6 in this minibook, you discover how to export entire pages with

sliced images.
81_607466-bk08ch05.indd 90581_607466-bk08ch05.indd 905 5/25/10 9:05 AM5/25/10 9:05 AM
906
Book VIII: Fireworks CS5
81_607466-bk08ch05.indd 90681_607466-bk08ch05.indd 906 5/25/10 9:05 AM5/25/10 9:05 AM
Chapter 6: Hotspots, Slices,
and CSS Layouts
In This Chapter
✓ Getting familiar with Fireworks layers
✓ Hyperlinking with hotspots and image maps
✓ Creating slices
✓ Exporting images and HTML as tables or CSS
A
simple method for organizing content and making a Web site dynamic
is the faithful hyperlink. You can link to another location from a
button, some text, or even a move of the mouse pointer. By using layers in
Fireworks, you can make those links dynamic and visually interesting.
In this chapter, you find out how Fireworks uses layers and then create navi-
gational links by using the Slice feature.
Understanding Layers
Even though you may be an Adobe Photoshop or Illustrator user, the
Layers panel in Fireworks may be somewhat of a mystery because it works
a little differently from the way you might expect. (Read on to find out how
to take advantage of Fireworks layers.) To see the Layers panel, choose
Window➪Layers.
Navigating the Layers panel
Figure 6-1 shows the two main components of the Layers panel:
✦ The Web Layer serves as a repository for anything code related, such
as links and slices. In Figure 6-1, you see the links in the Web Layer
section.

✦ The default Layer 1 includes sublayers that are created automatically
for every object you add to the Fireworks canvas.
82_607466-bk08ch06.indd 90782_607466-bk08ch06.indd 907 5/25/10 9:05 AM5/25/10 9:05 AM
908
Understanding Layers

Figure 6-1:
The Layers
panel in
Fireworks.

New/Duplicate Layer
New Sublayer
Add Mask
New Bitmap Image
Trash
Note that if you open an image from Photoshop that already has a
Background layer, it carries through into Fireworks (refer to Figure 6-1).
Working with the Layers panel
Here are just some of the things you can do in the Layers panel to organize
your artwork better:
✦ Hide and show layers: Click the Visibility (Eye) icon to hide or show a
layer or sublayer.
✦ Send objects forward and backward: Drag individual layers and sublay-
ers to arrange objects on those layers in front of or behind each other.
✦ Rename layers: By double-clicking the layer or sublayer name, you can
rename the layer, which can be a huge help later when you’re trying to
find a specific object.
✦ Organize layers: Create appropriately named layers to house related
sublayers, thereby gaining the ability to move, copy, or delete multiple

layers at the same time.
✦ Keep Web components separate: Use the Web Layer to keep track of
hotspots and slices as well as control the visibility of those items.
82_607466-bk08ch06.indd 90882_607466-bk08ch06.indd 908 5/25/10 9:05 AM5/25/10 9:05 AM
Book VIII
Chapter 6
Hotspots, Slices,
and CSS Layouts
909
Creating Hotspots
Creating Hotspots
Fireworks gives you lots of ways to take advantage of hyperlinks. In this sec-
tion, you see how to create a hotspot — essentially, a simple link from text or
a graphic to a URL (Universal Resource Locator) on the Web. In Chapter 7 of
this minibook, you find out how to create buttons that interact with the user.
Defining a hotspot
To link text or a graphic to a Web URL, you must first define it as a hotspot.
You can define a hotspot by using either of two methods:
✦ Select the Hotspot tool in the Web section of the Tools panel and click
and drag over the part of the image you want to create as the linked part
of the image, as shown in Figure 6-2. Click and hold down the Rectangle
Hotspot tool to see that you have a choice of creating a rectangular, cir-
cular, or polygon hotspot.

Figure 6-2:
Click and
drag over
an area
with the Hot
spot tool to

incorporate
a hyperlink
into your
Fireworks
document.

✦ Select the item (text or graphics), right-click (Windows) or Control-click
(Mac) the selected item, and choose Insert Hotspot from the contextual
menu.
Linking a hotspot
After you define a hotspot, you can define the location (typically, a Web
page) that you want the hotspot to link to. Follow these steps:
1. Choose Window➪URL.
The URL panel appears (see Figure 6-3).
82_607466-bk08ch06.indd 90982_607466-bk08ch06.indd 909 5/25/10 9:05 AM5/25/10 9:05 AM
910
Creating Hotspots

Figure 6-3:
Assign a link
to a hotspot.

2. Type a URL address that you want the viewer to go to after selecting
this region.
In Figure 6-3, a link to a fictitious external Web site (http://www.
uxbyarturot.com) is referenced. Note that you can add your URL to a
library for later use by clicking the plus sign to the right of the URL
text box.

When you reference pages beyond your Web site (external links), you

must start the link with http://.
3. Choose Window➪Layers to display the Layers panel, if it isn’t already
open.
The hotspot you created appears as a separate sublayer of the Web
Layer.
4. Double-click the name of this sublayer and give it a more appropriate
name, as shown in Figure 6-4.
In the next section, you discover options for working with multiple hotspots.

Figure 6-4:
A new
hotspot
layer
appears
under the
Web layer.

82_607466-bk08ch06.indd 91082_607466-bk08ch06.indd 910 5/25/10 9:05 AM5/25/10 9:05 AM