Slicing the image

When you dragged the Menu button onto your image Fireworks automatically create a 'slice' for it.

Slices are the way you divide up your image to export it for use on the web. The slices you create are what creates the HTML table that the web page uses to hold together the parts of your image.

You could of course just use the whole image but slicing the image means you can set different optimization settings for different parts of your image and also because you are creating an HTML table when you export it you can then use different cells of the table for content.

1. We are going to use the slice lines created by the Menu button as a starting point for slicing up the rest of the image. When you slice an image you have to take into account how it will be used in the final web page and what elements you may wish to dynamically alter.
   
   For example, in our interface image we want to ensure there is a large slice over the screen area - this will become a large HTML table cell that we can then use to display content. We also want to ensure the Back and Next buttons are largely within their own table cells/slices as we will want to create roll-over effects for these later.
   
2. Choose the Slice tool.
   
   
3. To create a slice on the image simply click and drag the tool over a section. You can modify your slices with the Pointer tool.
   
4. Slice the image into the following 11 sections:
   
   Be careful to include the narrow slices at the top and bottom of the screen content area. And make sure the Screen Divider line is totally contained in the slice below the menu bar. Make sure none of your slices overlap.
   
5. You can choose to show or hide slices using the Hide Slices and Hotspots button and the Show Slices and Hotspots button.