我們這里所說的切片（Slice）就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來，成為一幅完整的圖像。這樣做可以減低圖像的大小，減少網(wǎng)頁的下載時間，并且能創(chuàng)造交互的效果，如翻轉(zhuǎn)圖像等，還能將圖像的一些區(qū)域用html來代替。Fireworks在網(wǎng)頁切片制作方面有很強的優(yōu)勢，今天我們就來仔細看看Fireworks網(wǎng)頁切片全攻略。

　　一、切片在網(wǎng)頁制作中的作用

　　 在網(wǎng)頁上的圖片較大的時候，瀏覽器下載整個圖片的話需要花很長的時間，切片的使用使得整個圖片分為多個不同的小圖片分開下載，這樣下載的時間就大大地縮短了，能夠節(jié)約很多時間。在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下，運用切片來減少網(wǎng)頁下載時間而又不影響圖片的效果，這不能不說是一個兩全其美的辦法了。

　　 除了減少下載時間之外，切片也還有其他一些優(yōu)點：

　　* 制作動態(tài)效果：利用切片可以制作出各種交互效果。例如前面將的按鈕的這種狀態(tài)其實最后導出的文件實質(zhì)上就是不同狀態(tài)的切片。
　　* 優(yōu)化圖像：完整的圖像只能使用一種文件格式，應用一種優(yōu)化方式，而對于作為切片的各幅小圖片我們就可以分別對其優(yōu)化，并根據(jù)各幅切片的情況還可以存為不同的文件格式。這樣既能夠保證圖片質(zhì)量，有能夠使得圖片變小。
　　* 創(chuàng)建鏈接：切片制作好了之后，就可以對不同的切片制作不同的鏈接了，而不需要在大的圖片上創(chuàng)建熱區(qū)了。

　　二、創(chuàng)建切片

　　 使用Fireworks工具箱上的切片工具可以為已經(jīng)制作好的圖片創(chuàng)建切片。如圖1所示，切片工具有兩類，分別為“矩形切片”工具（Slice tool）和“多邊形切片”工具（Polygon Slice tool）。

　　 下面我們分別就這兩類熱區(qū)工具的使用作介紹。

圖1 兩類切片工具

　　1. 創(chuàng)建矩形切片

　　首先打開圖像，選擇工具箱上的的切片工具，在圖像的適當位置上按下鼠標左鍵并拖動繪制一個矩形區(qū)域，當矩形大小適當時釋放鼠標，這樣就生成了一個切片，如圖2所示。該切片區(qū)域被半透明的綠色所覆蓋，稱為切片對象，另外Fireworks根據(jù)切片對象的位置以紅色分割線對圖像進行了分割，稱為切片向?qū)А?

圖2 繪制矩形切片

　　 要使切片與對象區(qū)域緊密匹配，可以和熱點一樣先選中要制作成為切片的對象，然后點擊“Edit”菜單，選擇“Insert”->“Slice”；假如選擇了多個對象，則會出現(xiàn)一個如圖3所示的對話框，選擇“Multiple”按鈕，可以創(chuàng)建多個切片，如圖4所示。

圖3 提示對話框

圖4 制作多個切片

2. 創(chuàng)建多邊形切片

　　如圖5所示，打開一幅圖像，可以利用多邊形切片工具在多邊形的每個頂點單擊制作多邊形切片，如圖6所示。

圖5打開圖像

圖6 創(chuàng)建多邊形切片

　　 由上圖可見，圖像中的切片向?qū)�仍然是水平和垂直的，生成的切片文件也還是矩形的。實際上多邊形切片的外形主要是用于設(shè)置相應的行為觸發(fā)區(qū)域的。假如切片對象被設(shè)置了鏈接，那么在瀏覽器中顯示的時候，只有點擊到多邊形區(qū)域時才會實現(xiàn)鏈接跳轉(zhuǎn)，而在這個切片的其他區(qū)域則不會出現(xiàn)鏈接跳轉(zhuǎn)。

　　 同理，假如切片和對象區(qū)域完全符合或者說用戶是基于路徑對象制作切片，只需點擊“編輯”菜單，再選擇“Insert”->“Slice”即可。

查看更多 phpcms教程  phpcms模板