Fireworks CS3 Tutorial: Slicing Tool Cut page template

The graphic design of a Web page in fireworks or Photoshop needs to be imported into Dreamweaver for layout. Before you import to Dreamweaver, you can slice and optimize the effect map using fireworks before you can layout the optimized slices to the Dreamweaver site. The purpose of slicing is to get the image footage, which means that the part that can be implemented by writing an XHTML language script does not need to be sliced, but must be sliced in place of the image. Here is an example to introduce the slices and optimization features of fireworks CS3, the following steps:

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

Figure 1-23 Opening a crafted effect chart in fireworks CS3

The guides in the description effect diagram are 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 1-24.

Figure 1-24 The effect of a slice when finished

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 1-25.

Figure 1-25 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 1-26.

Figure 1-26 Slice fillet image

5. After the slice is finished, select the "2" window in the fireworks CS3, as shown in Figure 1-27. 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 1-27 Fireworks "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 1-28.

Figure 1-28 Optimizing 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 1-29.

Figure 1-29 The Export dialog box for Fireworks CS3

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 Htnl Settings dialog box, as shown in Figure 1-30.

Figure 1-30 The HTML Settings dialog box

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 1-31. When you are finished setting, click OK to return to the Export dialog box.

Figure 1-31 Selecting the Document Specific tab in the HTML Settings dialog box

10. Change the export type in the Export dialog box to image only. After this export will only generate the image based on the slice and not the Web page, in the File Name text box, enter the desired filename, the proposed naming rules are easy to remember, as shown in Figure 1-32.

Figure 1-32 The Export dialog box for Fireworks CS3

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 tick the include no slice area and current page check box below, as shown in Figure 1-32.

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 1-33.

Figure 1-33 slices exported to a site

After all the slices have been generated, you can use these image materials and layout them in the Dreamweaver CS3.