Slicing Your Web Page

Slice Tools
Fireworks MX® 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 MX® 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, generate interest for the users by giving them something to look at.

Button rollovers are another good reason for slicing an image. 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. Rollovers can be explored by clicking here.

Inserting a Slice Object
You can insert a Slice into your document if you choose the SLICE TOOL from the tool menu . This process is very similar to that of a Hotspot Insertion in that it can only be applied to selected vector objects. Unlike a Hotspot Insertion it will only create rectangular slices. This approach is quick, accurate and can save you time.

Creating Slices
Right click here and select "Save Target As" to download our source file.
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. back to top

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 and all of your content must fit in HTML tables.

A selected slice will contain a small label in the top left hand corner indicating its optimization settings. We’ll deal with optimization in the next chapter so, for the time being, just make note of the location of this information. Also note the small circular icon in the center of your selected slice. This icon, known as a Behavior Control, allows us to apply drag and drop behaviors to our slice. Click here for more detail on the behavior control. See below. back to top

Behavior Control - magnified

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 gaps between slices. See below.

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. See below. back to top

Optimization information for selected slice

Slice Types
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 HTML SLICES. Image Slices are relatively straightforward. Fireworks MX® will take the content of the selected slice object and create a graphic file out of it when the document is exported. HTML slices are slightly different. In this case Fireworks MX® 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.

HTML slices changes from a transparent green to a solid green color for easy identification.

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

Fireworks MX® 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 font tags and attributes to the text as you type it in the window. back to top

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 HTML Slice Tool, although useful, does not take the place of a dedicated HTML publishing program like Dreamweaver MX ®. 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.

Create the remaining 2 slices.

Naming your Slices
You can also choose a naming convention for your slices in the Objects (Slice) Panel. Properly naming graphics is vitally important if you are working as a part of a design team in which every member is utilizing the same graphics. Proper naming is also important for tracking your work for future reference. Revising and modifying old projects can be a complete nightmare if the graphic’s names are random and inconsistent. A good rule of thumb when naming graphics is to ask yourself if you’d be able to identify it if you were someone else working on the project.

Fireworks MX® provides you with a default naming convention if you {Click} on the “Auto-Name Slices ” checkbox in the Objects (Slice) Panel. When you export your graphic Fireworks MX® will use the original name of the saved graphic file and add a row and column designation after it. Our graphic, for instance, is called “slice_image” and is cut into four squares. Upon export each file would be saved as slice_image_r1_c1, slice_image_r1_c2, slice_image_ r2_c1, and slice_image_r2_c2. Fireworks MX® labels each graphic from left to right and top to bottom.

You can give a selected slice any name you choose if you click off the “Auto Name Slice” checkbox and input text into the field from the export dialog box. When you export the document you’ll find that every other slice has followed the default naming convention while your selected slice has been given the name that you have chosen for it. A more efficient way to name your slices is to simply double-click the slice name name in the WEB LAYER to put it in edit mode and just type in the new name. back to top

Exporting your Sliced Graphic as an HTML Document
We’re now ready to export our graphic for the web. Deselect the Slice Objects in your Document Window and select FILE/EXPORT from the tool menu . A standard dialog export box will appear giving you a range of options for the naming and location of your files.

Create a new folder and call it “map” and double-click on it to open it. As stated previously the default name for your graphics is based on the name of your original work file. If you want to change it you can type an alternate name in the FILE NAME field. Select HTML and IMAGES from the SAVE AS TYPE drop down menu so the resulting document is viewable in a web browser.

Choose “Export HTML File” from the HTML drop down menu. This option instructs Fireworks MX® to create an independent HTML file that can be viewed in a web browser. If you chose “Copy to Clipboard” Fireworks MX® would export the images to a folder of your choice and place the HTML document on your clipboard. You could then paste the HTML into an already existing document in a program like Dreamweaver or Go Live. You’ll want to export the document with it’s slices so choose “Export Slices ” from the “Slices” drop down menu. If you chose “None” your document would be exported as one graphic file and if you chose “Slice Along Guides ” Fireworks MX® would create Slices using already existing guides. Make sure that “Include Areas without Slices” is checked off so your exported document contains all the files necessary to build a complete image . If this box is left unchecked you’ll find your images folder only contains the graphics for those areas of your image that you have placed slices over. back to top

The standard procedure for web design seems to be to locate your graphics in a folder called IMAGES and your HTML file one level above it. If this is your wish you can click on the “Put Images in Sub folder” checkbox. With this box checked you can click on the Browse button to place your file and navigate your way to a desired folder by way of the dialog box that appears. For this example we’ll place our HTML file in the same directory as the graphics so choose leave the box unchecked.