The Slice Tool

Fireworks Slice Tool is used to cut one large rectangular graphic into a collection of smaller rectangular graphics.  These smaller graphics are placed inside a Table when Fireworks exports your document as HTML. The Table’s borders are invisible so, when your document is viewed in a browser, it appears as though the graphic hasn’t been cut up at all. 

There are many different reasons why you would want to slice your graphic up into smaller chunks.  One major reason is download speed. Large graphics take a long time to appear on screen.  Users may lose interest and leave your site if they’re left watching a blank screen while your graphic loads in the background. Small files load quickly and, at the very least, pique the users interest by giving them something to look at. 

Button rollovers are another good reason for slicing an image up. JavaScript functions that swap images replace individual graphics. If your document were one large graphic you wouldn’t be able to apply rollovers to individual buttons. For the time being it is only important to know that image slicing is an important part of creating rollovers. We’ll be exploring the creation of buttons and rollovers in a later unit.

Let’s try creating a few slices with the US map that we practiced making Image Maps with.  Delete all the Hotspots from the image if you still have that document open.  If not, create a new document and import the map into it.

Select the Rectangular Slice Tool from the Toolbox and place your cursor in the Document Window.  We want to slice the map into 4 squares so, from the center, {Click} and drag all the way to the bottom right hand corner of the window.  Your map should now be divided up into 3 sections, two squares at the bottom and one long rectangle across the top.  Note that the lines that the Slice Tool creates are red and the actual Slice Objects are a transparent Green. 

Your slices will always be rectangular because HTML tables are rectangular. 

We want to divide our map into four squares so we’ll have to draw one more Slice Object on our screen.  Place your cursor at the point at which you created your original slice and {Click} and drag to the upper left hand corner of your screen.  Notice that your slice guides automatically snap to other guides that are close by.  This feature is very handy if we want to make accurate slices without much fuss.

We should now have two slice objects on our screen and our map should be divided into four squares.  Select one of your Slice Objects and check your options in the Objects Panel.  You’ll find they are very similar to those offered for Hotspots with a few exceptions. 

You are given two options when you select the "Type" drop down menu.   You can choose to create Image Slices, which is probably what you’ll do 99% of the time, or Text Slices.  Image Slices are relatively straightforward.  Fireworks will take the content of the selected slice object and create a graphic file out of it when the document is exported.  Text slices are slightly different.  In this case Fireworks will, when you export the graphic as HTML, ignore any graphic content in the slice, and instead, place any text that you have inputted into the Text Slice Object Panel into it.  The result is an HTML table cell with editable text in it.  If you were to select the Slice Object in the upper right hand corner of the map graphic and convert it into a Text Slice your Objects panel would look like this;

A sentence of text has been placed in the input field for demonstration purposes.

The resulting HTML file looks like this when viewed in a browser;

Fireworks allows you to add font tags to the text that you input into the Slice Objects Panel. You could easily change your text to an Arial Font with a Bold Style by simply adding these tags and attributes to the text as you type it in the window.

The example given above is a highly impractical use of the Text Slice Tool and is meant only to highlight its function. With proper planning you can designate areas of your graphic that will be used for text only and have them fit, almost seamlessly, into the overall design of your document.  You’ll probably find that the Text Slice Tool, although useful, does not take the place of a dedicated HTML publishing program like Dream weaver.  This is another example of the complimentary nature of the two programs.

Select the Text Slice and use the Type menu in the Object Panel to covert it back to an Image Slice.