Creating slices

We use the slice tool to create slices. The slice tool draws the slices automatically in the Web Layer. It also turns the visibility of the Web layer on if it is currently invisible.

We have to select the best frame for creating the slices. The frame in our document that has the down state indicators seems the right frame because the indicators delimit the gray area from the white. Use the frames panel to go to frame 3.

Draw the first slice from the beginning of the indicator in front of the word About until it almost touches the beginning of the next indicator. All slices are drawn this way.

You will notice that the slice tool snaps to the neighboring slice so it is easier to draw contiguous slices. In the end the canvas should look like this:

Setting object properties

Slices are objects of a special kind. Every object in Fireworks has certain properties which are set in the properties inspector. For drawing objects the visual properties are set via the fill, stroke, and color portions of the inspector. The objects section comes into play as soon as special properties are required. Let's have a look at the objects properties section when a slice is selected.

The first list box allows you to define the type of slice. There are two types:

1. Image
   The slice will be treated as an image and upon export the graphical content will be exported.
   
   
2. Text
   Upon export the optional text in the text box will be put into a table cell of the equivalent size.

The second list box entitled Link allows for the input of a URL. As you remember URL stands for Universal Resource Locator and points to a target location to go to. The URL for the BU Web is for example http://www.bu.edu

The Altbox allows for input of an alternate text. The text will appear when the visitor hovers with the mouse pointer over the slice. It is an attribute of the image tag <img>. To comply with the Americans with Disabilities Act (ADA) all graphics in a Web page should be furnished with an <alt> text.

The bull's-eye icon next to a list field allows you to specify a target for the link. If you don't touch this box the file linked to will always appear in the current browser window. Next to the target box is a color selection box that allows you to display the individual slice in a different than the default overlay color which is green.

In the left portion of the properties inspector is the object name. Usually objects are named automatically with system generated default identifiers. We want to change the object name to the actual text that appears in the slice with an indication that the graphics refers to the second level of our site.