菠蘿教你做模板之準(zhǔn)備知識-切片_PHPCms教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
我們這里所說的切片(Slice)就是將一幅大圖像分割為一些小的圖像切片,然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙的拼接起來,成為一幅完整的圖像。這樣做可以減低圖像的大小,減少網(wǎng)頁的下載時間,并且能創(chuàng)造交互的效果,如翻轉(zhuǎn)圖像等,還能將圖像的一些區(qū)域用html來代替。Fireworks在網(wǎng)頁切片制作方面有很強(qiáng)的優(yōu)勢,今天我們就來仔細(xì)看看Fireworks網(wǎng)頁切片全攻略。
* 優(yōu)化圖像:完整的圖像只能使用一種文件格式,應(yīng)用一種優(yōu)化方式,而對于作為切片的各幅小圖片我們就可以分別對其優(yōu)化,并根據(jù)各幅切片的情況還可以存為不同的文件格式。這樣既能夠保證圖片質(zhì)量,有能夠使得圖片變小。
* 創(chuàng)建鏈接:切片制作好了之后,就可以對不同的切片制作不同的鏈接了,而不需要在大的圖片上創(chuàng)建熱區(qū)了。
二、創(chuàng)建切片
圖1 兩類切片工具
要使切片與對象區(qū)域緊密匹配,可以和熱點(diǎn)一樣先選中要制作成為切片的對象,然后點(diǎn)擊“Edit”菜單,選擇“Insert”->“Slice”;假如選擇了多個對象,則會出現(xiàn)一個如圖3所示的對話框,選擇“Multiple”按鈕,可以創(chuàng)建多個切片,如圖4所示。
圖3 提示對話框
圖5打開圖像
一、切片在網(wǎng)頁制作中的作用
在網(wǎng)頁上的圖片較大的時候,瀏覽器下載整個圖片的話需要花很長的時間,切片的使用使得整個圖片分為多個不同的小圖片分開下載,這樣下載的時間就大大地縮短了,能夠節(jié)約很多時間。在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下,運(yùn)用切片來減少網(wǎng)頁下載時間而又不影響圖片的效果,這不能不說是一個兩全其美的辦法了。
除了減少下載時間之外,切片也還有其他一些優(yōu)點(diǎn):
* 制作動態(tài)效果:利用切片可以制作出各種交互效果。例如前面將的按鈕的這種狀態(tài)其實(shí)最后導(dǎo)出的文件實(shí)質(zhì)上就是不同狀態(tài)的切片。
* 優(yōu)化圖像:完整的圖像只能使用一種文件格式,應(yīng)用一種優(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)建矩形切片
首先打開圖像,選擇工具箱上的的切片工具,在圖像的適當(dāng)位置上按下鼠標(biāo)左鍵并拖動繪制一個矩形區(qū)域,當(dāng)矩形大小適當(dāng)時釋放鼠標(biāo),這樣就生成了一個切片,如圖2所示。該切片區(qū)域被半透明的綠色所覆蓋,稱為切片對象,另外Fireworks根據(jù)切片對象的位置以紅色分割線對圖像進(jìn)行了分割,稱為切片向?qū)А?
圖2 繪制矩形切片
要使切片與對象區(qū)域緊密匹配,可以和熱點(diǎn)一樣先選中要制作成為切片的對象,然后點(diǎn)擊“Edit”菜單,選擇“Insert”->“Slice”;假如選擇了多個對象,則會出現(xiàn)一個如圖3所示的對話框,選擇“Multiple”按鈕,可以創(chuàng)建多個切片,如圖4所示。
圖3 提示對話框
圖4 制作多個切片
2. 創(chuàng)建多邊形切片
如圖5所示,打開一幅圖像,可以利用多邊形切片工具在多邊形的每個頂點(diǎn)單擊制作多邊形切片,如圖6所示。
圖5打開圖像
圖6 創(chuàng)建多邊形切片
由上圖可見,圖像中的切片向?qū)匀皇撬胶痛怪钡�,生成的切片文件也還是矩形的。實(shí)際上多邊形切片的外形主要是用于設(shè)置相應(yīng)的行為觸發(fā)區(qū)域的。假如切片對象被設(shè)置了鏈接,那么在瀏覽器中顯示的時候,只有點(diǎn)擊到多邊形區(qū)域時才會實(shí)現(xiàn)鏈接跳轉(zhuǎn),而在這個切片的其他區(qū)域則不會出現(xiàn)鏈接跳轉(zhuǎn)。
同理,假如切片和對象區(qū)域完全符合或者說用戶是基于路徑對象制作切片,只需點(diǎn)擊“編輯”菜單,再選擇“Insert”->“Slice”即可。
相關(guān)PHPCms教程:
- PHPCMS v9 安裝環(huán)境要求
- PHPCMS mysql優(yōu)化教程
- PHPCMS shtml設(shè)置
- phpcms本地網(wǎng)站遷移至虛擬主機(jī)的教程
- Phpcms V9 調(diào)用全站最新文章的代碼
- Phpcms V9 調(diào)用全站文章排行的解決方案
- Phpcms V9 調(diào)用隨機(jī)文章的方法
- 讓PHPCms內(nèi)容頁支持JavaScript
- phpcms教程: phpcms V9 默認(rèn)模板文件目錄結(jié)構(gòu)
- phpcms教程:phpcms V9 常用文件目錄結(jié)構(gòu)介紹
- PhpCms系統(tǒng)設(shè)置:我的面板
- PhpCms系統(tǒng)設(shè)置:附件管理
- 相關(guān)鏈接:
- 教程說明:
PHPCms教程-菠蘿教你做模板之準(zhǔn)備知識-切片
。