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

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

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

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

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

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

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