Assigning a targetA target is an alternate web page frame or web browser window in which the linked documentopens. You can specify a target for a selected slice in the Property inspector. If the Propertyinspector 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 theTarget 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 containsthe link. If the frame containing the link is not nested, then the linked document loads into thefull 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 settingsYou can optimize a slice by selecting an option from the Export Settings pop-up menu in theProperty inspector. You can choose from common export settings to quickly set a file format andapply several format-specific settings. For more information on these settings and how tocustomize them, see “Using preset optimization settings” on page 329.Naming slicesSlicing cuts an image into pieces. Each piece on each frame exports as a separate file, so each filemust have a name.Fireworks automatically names each slice file upon export. You can accept the default namingconvention, change the convention, or enter a custom name for each slice.Custom-naming slice filesYou can assign specific names to slices, so you can easily identify slice files in your website filestructure. 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 toslice files upon export.282 Chapter 12

Auto-naming slice filesIf you do not enter a slice name in either the Property inspector or the Layers panel, Fireworksreverts to auto-naming. Auto-naming assigns a unique name to each slice file automatically basedon 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 conventionYou can change the naming convention for slices from the Document Specific tab in the HTMLSetup dialog box.Fireworks lets you build your own naming convention using a wide range of naming options. Youcan create a naming convention that contains up to six elements. An element can consist of any ofthe 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 namingconvention that uses all six elements.If a slice has more than one frame, by default Fireworks adds a number to each frame’s file. Forexample, if you enter the custom slice filename home for a three-state button, then Fireworksnames the Up state graphic home.gif, the Over state graphic home_f2.gif, and the Down stategraphic home_f3.gif. You can create your own naming convention for multiframe slices using theHTML Setup dialog box.To change the default auto-naming convention:

1 Choose File > HTML Setup to open the HTML Setup dialog box.2 Click the Document Specific tab.Option DescriptionNone 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 styleyou choose.row/column (r3_c2, r4_c7...) Row (r##) and Col (c##) designate the rows and columns of the table that webbrowsers use to reconstruct a sliced image. You can use this information in thenaming convention.UnderscorePeriodSpaceHyphenThe element uses any of these characters typically as separators between otherelements.Slices, Rollovers, and Hotspots 283

3 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 appearas follows:4 (Optional) To set this information as the default for all new Fireworks documents, clickSet Defaults.Note: Use caution when choosing None as a menu option for slice auto-naming. If you choose None as theoption for any of the first three menus, Fireworks exports slice files that overwrite one another, resulting in asingle exported graphic and a table that displays this graphic in every cell.

Defining how HTML tables are exportedSlicing defines how the HTML table structure will appear when a Fireworks document isexported for use on the web.When you export a sliced Fireworks document to HTML, your document is reassembled usingan 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 moreslowly 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 Choose File > HTML Setup, or click the Options button in the Export dialog box.2 Click the Table tab.284 Chapter 12

3 Choose a spacing option from the Space With pop-up menu:Nested Tables — No Spacers creates a nested table with no spacers.Single Table — No Spacers creates a single table with no spacers. This option can cause tablesto display incorrectly in some cases.1-Pixel Transparent Spacer uses a 1-pixel by 1-pixel transparent GIF as a spacer that is resizedas needed in the HTML. This generates a 1-pixel-high row across the top of the table and a 1-pixel-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 colorpop-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.Note: Empty cells occur only if you deselect Include Areas Without Slices in the Export dialog box during export.

6 Click OK.For more information about specifying HTML export options, see “Setting HTML exportoptions” on page 358.Note: You can specify unique table export settings for sliced objects for each document. Or you can use the SetDefaults button on the Document Specific tab of the HTML Setup dialog box to apply defaults for all newdocuments.

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

Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing can bemore resource-intensive to web browsers because of the additional HTML code they mustdownload 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 graphicfiles. 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 don’tneed those areas to highlight or produce rollover effects in response to mouse movement oractions. Hotspots and image maps are also ideal when the graphic onto which you’ve placed your

hotspots would be best exported as a single graphic file—in other words, the entire graphic wouldbest be exported using the same file format and optimization settings.Creating hotspotsAfter you identify areas on a source graphic that would make good navigation points, you createthe 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, orPolygon (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 hotspotscomposed of many points. This can be a good approach when working with intricate images.To create a rectangular or circular hotspot:

1 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.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 thecanvas. Release the Spacebar to continue drawing the hotspot.To create an odd-shaped hotspot:

1 Choose the Polygon Hotspot tool.2 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.