如何使用fireworks切片
當(dāng)使用Fireworks設(shè)計(jì)了一幅完整的設(shè)計(jì)效果圖之后，如果要將這份完美的網(wǎng)頁放到網(wǎng)上，瀏覽器下載一幅較大的圖像需要較長的時間，會造成用戶不必要的等待。怎么使用fireworks切片呢?通下面學(xué)習(xí)啦小編給大家整理了關(guān)于使用fireworks切片的方法，希望大家喜歡。
使用fireworks切片的方法步驟：
當(dāng)使用Fireworks設(shè)計(jì)了一幅完整的設(shè)計(jì)效果圖之后，如果要將這份完美的網(wǎng)頁放到網(wǎng)上，瀏覽器下載一幅較大的圖像需要較長的時間，會造成用戶不必要的等待。通過將這個大的圖像切割為多個容易下載的小塊，可以加速網(wǎng)頁的響應(yīng)時間，提升網(wǎng)頁的響應(yīng)速度。
在Fireworks中，被切片的圖形的每一部分都會作為一個單獨(dú)的圖像進(jìn)行保存，切片輸出時會保存為一個HTML文件以引用這些被切割的圖形。舉例來說，在Fireworks的模板的Web項(xiàng)中有一些設(shè)計(jì)好的網(wǎng)頁原型，這些原型使用Fireworks的矢量繪圖工具進(jìn)行繪制，網(wǎng)頁設(shè)計(jì)人員在需要保留布局的同時，又能去除圖像中的文本部分，用HTML文本進(jìn)行替代。例如圖14.54就是一個完整設(shè)計(jì)的網(wǎng)頁圖像。
Fireworks兩種切片類型：
矩形切片：這是比較常用的切片方式，用于按矩形對圖像進(jìn)行切分。
多邊形切片：用來創(chuàng)建不規(guī)則形狀的切片，比如試圖為非矩形的圖形添加圖像交互式效果時，可以通過非矩形切片來創(chuàng)建切片效果。
對于網(wǎng)頁圖像的切片來說，一般還是以矩形切片為主，要創(chuàng)建矩形切片，單擊繪圖工具欄中的工具，選擇該工具后，在需要進(jìn)行切片的地方繪制矩形，就可以創(chuàng)建一個切片對象。
注意：從切片對象延伸的線是切片輔助線，它確定導(dǎo)出時將文檔拆分成的單獨(dú)圖像文件的邊界。默認(rèn)情況下，這些輔助線為紅色。
切片的輔助線用于定位和對齊切片，這個功能非常實(shí)用，否則切片就會顯示得比較混亂。當(dāng)拖動以繪制切片時，可以調(diào)整切片的位置。在按住鼠標(biāo)按鈕的同時，只需按住空格鍵，然后將切片拖動到畫布上的另一個位置。釋放空格鍵以繼續(xù)繪制切片，切片效果如圖14.55所示。
除了直接繪制切片外，還可以選擇某一個圖像區(qū)域，比如選擇文字內(nèi)容，然后單擊主菜單中的“編輯|插入|矩形切片”菜單項(xiàng)，來根據(jù)選擇的區(qū)域創(chuàng)建一個矩形切片，這樣就可以根據(jù)內(nèi)容的大小來精確地創(chuàng)建切片區(qū)域。例如圖14.56中根據(jù)選擇工具創(chuàng)建了多個選擇內(nèi)容的切片。
如果選擇了多個繪圖區(qū)域，單擊菜單中的插入矩形切片，F(xiàn)ireworks會彈出如圖14.57所示的對話框，詢問用戶是創(chuàng)建單一的切片還是多重切片。
單一切片是指將所選的區(qū)域合并為單一的矩形，而多重切片將為每一個選區(qū)創(chuàng)建一個切片。在設(shè)置了切片之后，使用選擇工具選擇切片，在屬性面板中可以設(shè)置切片的類型和鏈接，如圖14.58所示。
默認(rèn)情況下，切片顯示為淡綠色，通過切片的屬性面板，可以更改切片的顏色。切片的默認(rèn)類型為前景圖像，這是指切片在輸出HTML時，HTML代碼的編寫方式?？梢詫⑵湔{(diào)整為HTML背景，比如對于顏色比較接近的圖像，就可以調(diào)整為切片的背景圖像。HTML類型的切片指定瀏覽器中出現(xiàn)普通HTML文本的區(qū)域。HTML切片不導(dǎo)出圖像，它導(dǎo)出出現(xiàn)在由切片定義的表格單元格中的HTML文本。
多邊形切片用來創(chuàng)建具有多邊形效果的切片圖像，它實(shí)際上是通過JavaScript代碼來實(shí)現(xiàn)的多邊形效果。選擇多邊形切片工具，在要創(chuàng)建多邊形熱點(diǎn)的圖像上進(jìn)行單擊以創(chuàng)建多邊形的點(diǎn)，多邊形切片的創(chuàng)建效果如圖14.59所示。
切片創(chuàng)建完成后，要查看和編輯網(wǎng)頁上的切片，可以通過圖層面板中的網(wǎng)頁層實(shí)現(xiàn)。層面板上可以顯示和隱藏切片，更改切片和切片輔助線，圖層面板的顯示如圖14.60所示。
看過“如何使用fireworks切片“的人還看了：