《網(wǎng)頁制作教程(8.0版)》第12章

第12章文本和位圖的應(yīng)用創(chuàng)建和編輯切片創(chuàng)建和應(yīng)用元件制作網(wǎng)頁動畫優(yōu)化并導(dǎo)出圖像和動畫12.1創(chuàng)建和編輯切片12.1.1創(chuàng)建切片切片可將Fireworks文檔分割成多個較小的部分，并將每部分導(dǎo)出為單獨(dú)的文件。12.1.2編輯切片如果對繪制的切片不滿意，可以使用“指針”工具或“部分選定”工具進(jìn)行編輯，另外，也可顯示或隱藏切片。1．顯示或隱藏切片2．改變切片尺寸、顏色等范例1用“切片”工具分割“飾品”網(wǎng)頁效果圖本例通過使用“切片”工具切割現(xiàn)有的網(wǎng)頁效果圖，來學(xué)習(xí)其在實(shí)際網(wǎng)頁制作中的應(yīng)用（具體操作見視頻12-1）。12.2創(chuàng)建和應(yīng)用元件12.2.1創(chuàng)建元件選擇“編輯”>“插入”>“新建元件”菜單，可打開“元件屬性”對話框。在“名稱”文本框中可輸入元件名，在“類型”區(qū)域可選擇元件的類型。12.2.2應(yīng)用元件用鼠標(biāo)將元件從“庫”面板中拖放到文檔編輯界面，就可以在作品中應(yīng)用該元件，此時(shí)的元件稱為實(shí)例，一個元件可以對應(yīng)多個實(shí)例。當(dāng)選中實(shí)例時(shí)，其左下角將顯示一個圖標(biāo)。范例2制作網(wǎng)頁導(dǎo)航條本例中的導(dǎo)航條是由多個按鈕元件組成的，安排本例的主要目的是讓讀者練習(xí)一下元件的創(chuàng)建和應(yīng)用（具體操作見視頻12-2）。

12.3制作網(wǎng)頁動畫12.3.1Fireworks中動畫制作要點(diǎn)

使用Fireworks制作動畫的要點(diǎn)如下：使用Fireworks制作動畫的原理是：在不同的幀設(shè)置不同的層（注意，不是對象子層）內(nèi)容。如果希望某些層內(nèi)容出現(xiàn)在所有幀中，應(yīng)將其設(shè)置為共享層。12.3.2利用現(xiàn)有素材創(chuàng)建簡單動畫啟動Fireworks后，選擇“文件”>“打開”菜單，在打開的“打開”對話框中，選擇本書“素材與實(shí)例\Fireworks\chapter12”文件夾中的“1.jpg”、“2.jpg”和“3.jpg”，然后選中對話框下方的“以動畫打開”復(fù)選框，最后單擊“打開”按鈕。

12.3.3使用分散到幀在“幀”面板下方，“新建/重制幀”按鈕的左側(cè)有一個“分散到幀”按鈕。利用該按鈕，可將同一個幀中的多個對象分散到不同的幀中。這樣，我們可以在一個幀里先繪制好物體運(yùn)動過程中的多個對象，并按照其運(yùn)動軌跡排列好，然后將這些對象分散到不同的幀，這樣就完成了動畫的制作（具體操作見視頻12.3.3）。

12.3.4補(bǔ)間動畫補(bǔ)間動畫又稱為過渡動畫，制作補(bǔ)間動畫時(shí)，系統(tǒng)實(shí)際上是根據(jù)元件的兩個形態(tài)自動生成中間形態(tài)，并將這些中間形態(tài)分別放在不同的幀中。因此，制作補(bǔ)間動畫時(shí)，圖形元件不能位于共享層。本節(jié)采用補(bǔ)間的方法，制作太陽升起落下的效果。

將太陽轉(zhuǎn)換為“圖形”元件，并創(chuàng)建實(shí)例選擇“修改”>“元件”>“補(bǔ)間實(shí)例”菜單，在打開的對話框中設(shè)置各項(xiàng)參數(shù)后單擊“確定”按鈕12.3.5制作動畫元件使用動畫元件可以方便快捷地實(shí)現(xiàn)類似于運(yùn)動、淡入淡出、旋轉(zhuǎn)或縮放等效果。選中要轉(zhuǎn)換為動畫元件的對象選擇“修改”>“動畫”>“選擇動畫”菜單，打開“動畫”對話框設(shè)置各項(xiàng)后，單擊“確定”按鈕，系統(tǒng)會提示是否添加新幀，單擊“確定”按鈕創(chuàng)建動畫元件范例3制作網(wǎng)店標(biāo)志本例通過制作一個網(wǎng)店標(biāo)志，來總結(jié)一下前面學(xué)習(xí)的動畫制作方法（具體操作見視頻12-3）。12.4優(yōu)化并導(dǎo)出圖像和動畫12.4.1使用“導(dǎo)出向?qū)А比绻麑?yōu)化和導(dǎo)出網(wǎng)頁圖像不是很熟悉，可以使用“導(dǎo)出向?qū)А?。在制作好網(wǎng)頁圖像后，選擇“文件”>“導(dǎo)出向?qū)А辈藛?，可打開“導(dǎo)出向?qū)А睂υ捒颍来位卮鸪霈F(xiàn)的問題，并在每個面板中單擊“繼續(xù)”，最后將打開“圖像預(yù)覽”對話框范例4優(yōu)化并導(dǎo)出網(wǎng)店標(biāo)志本節(jié)以范例3中制作的網(wǎng)店標(biāo)志為例，來學(xué)習(xí)優(yōu)化并導(dǎo)出動畫文件的方法（具體操作見視頻12-4）。12.4.2使用“優(yōu)化”面板將“優(yōu)化”面板和文檔窗口上方的“預(yù)覽”按鈕結(jié)合使用，可以很方便地為文檔設(shè)置優(yōu)化參數(shù)。選擇“窗口”>“優(yōu)化”菜單，可打開“優(yōu)化”面板。范例5優(yōu)