DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks網頁切片應用詳解(1)
Fireworks網頁切片應用詳解(1)
編輯:Fireworks基礎     

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

  一、切片在網頁制作中的作用

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

   除了減少下載時間之外,切片也還有其他一些優點:

  * 制作動態效果:利用切片可以制作出各種交互效果。例如前面將的按鈕的這種狀態其實最後導出的文件實質上就是不同狀態的切片。

  * 優化圖像:完整的圖像只能使用一種文件格式,應用一種優化方式,而對於作為切片的各幅小圖片我們就可以分別對其優化,並根據各幅切片的情況還可以存為不同的文件格式。這樣既能夠保證圖片質量,有能夠使得圖片變小。

  * 創建鏈接:切片制作好了之後,就可以對不同的切片制作不同的鏈接了,而不需要在大的圖片上創建熱區了。

  二、創建切片

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

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


圖1 兩類切片工具


  1. 創建矩形切片

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

圖2 繪制矩形切片


   要使切片與對象區域緊密匹配,可以和熱點一樣先選中要制作成為切片的對象,然後點擊“Edit”菜單,選擇“Insert”->“Slice”;如果選擇了多個對象,則會出現一個如圖3所示的對話框,選擇“Multiple”按鈕,可以創建多個切片,如圖4所示。

圖3 提示對話框


圖4 制作多個切片

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved