Assigning a target

A target is an alternate web page frame or web browser window in which the linked
document
opens. You can specify a target for a selected slice in the Property inspector. If the Property
inspector is minimized, click the expander arrow to see all properties.
To specify a target for a selected slice in the Property inspector:

Type the name of the HTML frame in the Target text box or choose a reserved target from
the
Target pop-up menu:
_blank loads the linked documents in a new, unnamed browser window.
_parent loads the linked document in the parent frameset or window of the frame that
contains
the link. If the frame containing the link is not nested, then the linked document loads into
the
full browser window.
_self loads the linked document in the same frame or window as the link. This target is
implied,
so you usually need not specify it.
_top loads the linked document in the full browser window, thereby removing all frames.
Export settings
You can optimize a slice by selecting an option from the Export Settings pop-up menu in the
Property inspector. You can choose from common export settings to quickly set a file format
and
apply several format-specific settings. For more information on these settings and how to
customize them, see Using preset optimization settings on page 329.
Naming slices
Slicing cuts an image into pieces. Each piece on each frame exports as a separate file, so
each file
must have a name.
Fireworks automatically names each slice file upon export. You can accept the default
naming
convention, change the convention, or enter a custom name for each slice.
Custom-naming slice files
You can assign specific names to slices, so you can easily identify slice files in your website
file
structure. For example, if you have a button on a navigation bar that returns to the home
page,
you could name the slice Home.
To enter a custom slice name, do one of the following:

Select the slice on the canvas, enter a name in the Object Name box in the Property
inspector,
and press Enter.
Double-click the name of the slice in the Web Layer, enter a new name, and press Enter.
Do not add a file extension to the base name. Fireworks automatically adds file extensions to
slice files upon export.
282 Chapter 12

Auto-naming slice files

If you do not enter a slice name in either the Property inspector or the Layers panel,
Fireworks
reverts to auto-naming. Auto-naming assigns a unique name to each slice file automatically
based
on the default naming convention.
To auto-name a slice file:

When you export your sliced image, enter a name in the File Name (Windows) or Name
(Macintosh) text box in the Export dialog box. Do not add a file extension. Fireworks
automatically adds file extensions to slice files upon export.

Changing the default auto-naming convention

You can change the naming convention for slices from the Document Specific tab in the
HTML
Setup dialog box.
Fireworks lets you build your own naming convention using a wide range of naming options.
You
can create a naming convention that contains up to six elements. An element can consist of
any of
the following auto-naming options.
For example, if the document name is mydoc, the naming convention doc.name + slice +
Slice
# (A,B,C...) results in a slice called mydocsliceA. Chances are that you will never require a
naming
convention that uses all six elements.
If a slice has more than one frame, by default Fireworks adds a number to each frames file.
For
example, if you enter the custom slice filename home for a three-state button, then
Fireworks
names the Up state graphic home.gif, the Over state graphic home_f2.gif, and the Down
state
graphic home_f3.gif. You can create your own naming convention for multiframe slices using
the
HTML Setup dialog box.
To change the default auto-naming convention:

1
2

Choose File > HTML Setup to open the HTML Setup dialog box.
Click the Document Specific tab.

Option Description
None No name is applied to the element.
doc.name The element takes the name of the document.
slice You can insert the word slice into the naming convention.
Slice # (1,2,3...)
Slice # (01,02,03...)
Slice # (A,B,C...)
Slice # (a,b,c...)
The element is labeled numerically or alphabetically, according to the particular style
you choose.
row/column (r3_c2, r4_c7...) Row (r##) and Col (c##) designate the rows and columns of the table that web
browsers use to reconstruct a sliced image. You can use this information in the
naming convention.
Underscore
Period
Space
Hyphen
The element uses any of these characters typically as separators between other
elements.

Slices, Rollovers, and Hotspots 283

In the File Names section, build your new naming convention by selecting from the desired
lists.
For example, the naming convention doc.name + slice + Slice # (A,B,C...) would appear
as follows:
4 (Optional) To set this information as the default for all new Fireworks documents, click
Set Defaults.
3

Note: Use caution when choosing None as a menu option for slice auto-naming. If you choose None as the
option for any of the first three menus, Fireworks exports slice files that overwrite one another, resulting in a
single exported graphic and a table that displays this graphic in every cell.

Defining how HTML tables are exported

Slicing defines how the HTML table structure will appear when a Fireworks document is
exported for use on the web.
When you export a sliced Fireworks document to HTML, your document is reassembled using
an HTML table. Each sliced element from the Fireworks document resides in a table cell.
Once
exported, a Fireworks slice translates to a table cell in HTML.

You can specify how a Fireworks table will be reconstructed in a browser. Among other
options,
you can choose whether to use spacers or nested tables when exporting to HTML:
Spacers are images that help table cells align properly when viewed in a browser.
A nested table is a table within a table. Nested tables do not use spacers. They may load
more
slowly in browsers, but because there are no spacers, it is easier to edit their HTML.
For more information about HTML, see Exporting HTML on page 351.
To define how Fireworks exports HTML tables:

1
2

Choose File > HTML Setup, or click the Options button in the Export dialog box.
Click the Table tab.

284 Chapter 12

Choose a spacing option from the Space With pop-up menu:

creates a nested table with no spacers.
Single Table No Spacers creates a single table with no spacers. This option can cause tables
to display incorrectly in some cases.
1-Pixel Transparent Spacer uses a 1-pixel by 1-pixel transparent GIF as a spacer that is resized
as needed in the HTML. This generates a 1-pixel-high row across the top of the table and a 1pixel-wide column down the right side.
4 Choose a cell color for HTML slices:
To give cells the same background color as the document canvas, choose Use Canvas
Color.
To choose a different color, deselect Use Canvas Color and choose a color from the color
pop-up window.
5 Choose what to place in empty cells from the Contents pop-up menu:
None causes empty cells to remain blank.
Spacer Image places a small transparent image called spacer.gif in empty cells.
Non-breaking Space places an HTML space tag in empty cells. The cell appears hollow.
3

Nested Tables No Spacers

Note: Empty cells occur only if you deselect Include Areas Without Slices in the Export dialog box during export.

Click OK.
For more information about specifying HTML export options, see Setting HTML export
options on page 358.
6

Note: You can specify unique table export settings for sliced objects for each document. Or you can use the Set
Defaults button on the Document Specific tab of the HTML Setup dialog box to apply defaults for all new
documents.

Working with hotspots and image maps

Web designers sometimes use hotspots to make small parts of a larger graphic interactive. A
hotspot is an area of a web graphic that links to a URL. An image map is nothing more than
a
graphic upon which one or more hotspots have been placed.
An image map with hotspots
Slices, Rollovers, and Hotspots 285

Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing can
be
more resource-intensive to web browsers because of the additional HTML code they must
download and the processing power required to reassemble sliced graphics.
Note: It is possible to create a sliced image map. Exporting a sliced image map typically generates many graphic
files. For more information about slicing, see Creating slice objects on page 266.

Hotspots are ideal when you want areas of an image to link to other web pages, but you
dont
need those areas to highlight or produce rollover effects in response to mouse movement or
actions. Hotspots and image maps are also ideal when the graphic onto which youve placed
your
hotspots would be best exported as a single graphic filein other words, the entire graphic
would
best be exported using the same file format and optimization settings.
Creating hotspots

After you identify areas on a source graphic that would make good navigation points, you
create
the hotspots and then assign URL links to them. There are two ways to create hotspots:
You can draw the hotspot around a target area in the graphic using the Rectangle, Circle,
or
Polygon (odd-shaped) Hotspot tools.
You can select an object and insert the hotspot over it.
A hotspot need not always be a rectangle or a circle. You can also create polygon hotspots
composed of many points. This can be a good approach when working with intricate images.
To create a rectangular or circular hotspot:

Choose the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools
panel.
2 Drag the Hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt
(Windows) or Option (Macintosh) to draw from a center point.
1

Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the mouse button,
simply press and hold down the Spacebar on the keyboard, then drag the hotspot to another location on the
canvas. Release the Spacebar to continue drawing the hotspot.

To create an odd-shaped hotspot:

Choose the Polygon Hotspot tool.

Click to place vector points, much as you would draw straight segments with the Pen tool.
Whether the path is open or closed, the fill defines the hotspot area.
1
2