Fireworks Web Slices Application detailed

What we are talking about here is slicing a large image into small slices of image, and then Slice the small images in a Web page with no spacing or width, to make a complete picture. This can reduce the size of the image, reduce the download time of the page, and create interactive effects, such as flipping images, but also the image of some areas in the HTML to replace. Fireworks has a strong advantage in web slicing, so today we'll take a closer look at the fireworks Web slice full raiders.

The function of slicing in Web page making

The picture on the page is larger, the browser to download the entire picture words need to spend a long time, slicing the use of the whole picture into a number of different small pictures separately download, so that the time to download greatly shortened, can save a lot of time. In the current Internet bandwidth is also limited by the circumstances, the use of slices to reduce the download time without affecting the picture, this can not be said to be a way of the best of both worlds.

In addition to reducing download time, slices have some other advantages:

* Make dynamic effects: Use slices to create a variety of interactive effects. For example, the previous button in this state in fact the last exported file is essentially a different state of the slice.

* Optimize the Image: The complete image can only use a file format, the application of an optimization method, and for the slice of each small picture we can optimize, and according to each slice of the situation can also be stored in different file formats. This will not only ensure the quality of the picture, there can make the picture smaller.

* Create a link: After slicing, you can make different links to different slices without having to create a hot zone on a large picture.

Second, create a slice

Use the slice tool on the fireworks toolbox to create slices for already-made pictures. As shown in Figure 1, the slice tool has two classes, the rectangular slice tool (Slice tool) and the polygon slicing tool (Polygon Slice tool).

Here we introduce the use of these two types of hot-zone tools respectively.

Figure 12 Class slicing tools

1. Create a rectangular slice

First open the image, select the Slice tool on the toolbox, press the left mouse button in the appropriate position of the image and drag to draw a rectangular area, releasing the mouse when the rectangle is the right size, thus generating a slice, as shown in Figure 2. The slice area is covered by a semitransparent green, called a slice object, and fireworks is segmented by a red split line based on the location of the slice object, called the Slice Wizard.

Figure 2 Drawing a rectangular slice

To make a slice closely match the area of the object, you can select the object you want to make a slice, and then click on the "Edit" menu and select "Insert"-> "Slice", and if you select more than one object, a dialog box like the one shown in Figure 3 will appear, selecting "Multiple" button, you can create multiple slices, as shown in Figure 4.

Figure 3 The prompt dialog box

Figure 4 Making multiple slices

2. Create a polygon slice

As shown in Figure 5, open an image, you can use the polygon slicing tool at each vertex of the polygon click to make a polygon slice, as shown in Figure 6.

Figure 5 Opening the image

Figure 6 Creating a polygon slice