The slicing and optimizing function of Fireworks CS3

1, in the fireworks CS3 to open the production of a good web page effect chart, as shown in Figure 1.

Figure 1 Opening a crafted effect chart in fireworks CS3

The auxiliary line in the effect diagram is added at the beginning of the design of the effect diagram.

2, select the "slice" tool in fireworks CS3, slice the effect chart, the effect of slicing finished as shown in Figure 12.

Fig. 2 The effect of Fireworks CS3 slice finish

When you slice, try to ensure that all slices and slices of the image are the same size, do not slice larger than or less than the slices of the image, while the slices as far as possible to maintain do not overlap.

3, a few special need to pay attention to the place to tell you a little bit more, first, in the content area, there is a small black triangle arrow in front of the text, which is made with an image, so you have to slice it, but because all the arrow icons are the same in front of the text, you just need to cut a sheet. As shown in Figure 3.

Figure 3 Fireworks CS3 Slice small icon

4, the same truth, in this effect chart, there are a lot of rounded corners, but in the same effect when slicing only one piece can be. As shown in Figure 4.

Figure 4 Fireworks CS3 slice fillet image

5. After the slice is finished, select the "2" window in the fireworks CS3, as shown in Figure 5. On the left side of the window is an editable artwork, and on the right side of the window, the image is optimized. Below this window, you can see detailed information about the amount of file and download time for each slice.

Figure 5 Fireworks CS3 "2" window

6, press the shortcut key "F6", open the "optimize" panel of fireworks CS3, use the Pointer tool, select slices in the left of the "2" window, and then optimize the operation in the optimization panel, and the final optimized image effect can be observed on the right side of the "2" window. As shown in Figure 6.

Figure 6 Fireworks CS3 to optimize slices

7, after each slice of optimization, you can export all the image material. Selecting the File @@ Export command (the shortcut key is "Ctrl+shift+r") pops up the Export dialog box for the fireworks CS3, as shown in Figure 7.

Figure 7 Fireworks CS3 Export dialog box

8. Select the HTML and images option in the Export Drop-down list in the Export dialog box to activate the Options button in the lower-right corner of the panel, click the Options button, and open the HTML Settings dialog box, as shown in Figure 8.

Figure 8 Fireworks CS3 Execute HTML settings

9, switch to the "Document Specific Information" tab, set up the naming rules for all slices after the export, which you can use to name the document names with slice numbers, in order to make the name of the slice shorter, and if the slice name is too long, the number of characters will increase when you write the script in the Web page. The amount of file in the page file will also increase, as shown in Figure 9. When you are finished setting, click OK to return to the Export dialog box.

Figure 9 Naming rule settings for Fireworks CS3 slices

10. Change the export type in the Export dialog box to image only. After this export, you will only generate images based on slices, but not web pages, and in the File Name text box, enter the names of the files you want, suggesting that the naming rules are easy to remember.

11, in the "Save in" Drop-down list to select the location you want to save, we are accustomed to all slices generated images saved to the site's image folder. Select export slices in the slice drop-down list, but do not check the include no slice area and current page checkbox below.

12, all set up, click the "Save" button can be all slices of this page exported to the Dreamweaver site, the resulting image as shown in Figure 10.

Figure 10 slices exported to a site