[學(xué)習(xí)]網(wǎng)頁(yè)設(shè)計(jì)與制作第14章firworks進(jìn)階應(yīng)用

1、第14章 Firworks進(jìn)階應(yīng)用,學(xué)習(xí)目標(biāo)： 本章將介紹Fireworks MX 2004與Web相結(jié)合的圖像處理和加工能力，主要包括按鈕、蒙板、熱點(diǎn)等較高級(jí)的操作，最后還將介紹如何制作GIF動(dòng)畫。通過(guò)本章的學(xué)習(xí)，要求掌握制作按鈕和彈出菜單的方法，學(xué)會(huì)使用切片和熱點(diǎn)工具，能夠制作GIF動(dòng)畫。,第14章 Firworks進(jìn)階應(yīng)用,14.1 元件和實(shí)例的概念14.2 切片工具的使用14.3 創(chuàng)建熱點(diǎn)和

2、圖像映射14.4 制作按鈕14.5 制作彈出菜單,14.1 元件和實(shí)例的概念,元件是存儲(chǔ)在Fireworks庫(kù)中的一個(gè)特殊對(duì)象或?qū)ο蠼M，在圖像處理過(guò)程中，對(duì)于某些需要反復(fù)使用的相同元素，我們把它轉(zhuǎn)換成元件以后使用起來(lái)非常方便。Fireworks MX 2004提供了三種類型的元件：圖形、按鈕和動(dòng)畫。實(shí)例是元件的副本，我們從庫(kù)中將元件拖動(dòng)到文檔中，實(shí)際上就是在文檔中創(chuàng)建了該元件的一個(gè)實(shí)例。它具有該元件所具有的一切屬性，當(dāng)我們編輯

3、這個(gè)元件時(shí)，該元件的所有的實(shí)例都會(huì)自動(dòng)更新，這將大大減小我們的工作量。,14.1 元件和實(shí)例的概念,1.創(chuàng)建新元件2.轉(zhuǎn)換對(duì)象為元件3.編輯元件,14.2切片工具的使用,切片將Fireworks文檔分割成多個(gè)較小的部分，每個(gè)部分都以單獨(dú)的文件形式導(dǎo)出。切片的使用可以較好地優(yōu)化文件，其優(yōu)點(diǎn)主要表現(xiàn)在以下幾個(gè)方面：用戶可以分別對(duì)切割成的每一幅小圖片進(jìn)行不同程度或不同格式的優(yōu)化。保證圖像質(zhì)量的同時(shí)不影響網(wǎng)頁(yè)的瀏覽速度。因?yàn)榍衅氖褂?/p>

4、，可以使我們只修改網(wǎng)頁(yè)中一部分，而不用對(duì)整個(gè)網(wǎng)頁(yè)進(jìn)行修改。,14.2切片工具的使用,1.切片工具2.設(shè)置切片對(duì)象的屬性3.導(dǎo)出所選切片4.導(dǎo)出切片文檔,14.3 創(chuàng)建熱點(diǎn)和圖像映射,有時(shí)候我們需要建立一個(gè)鏈接，但是又不希望以按鈕的形式進(jìn)行交互，則可以通過(guò)創(chuàng)建熱點(diǎn)來(lái)達(dá)到這一目的。在很多網(wǎng)站上，我們也應(yīng)用過(guò)用鼠標(biāo)單擊圖片的不同部分可以鏈接到不同的網(wǎng)頁(yè)上去。這種提供多個(gè)超級(jí)鏈接的圖片稱為圖像映射。在Fireworks中創(chuàng)建熱點(diǎn)的方法很容

5、易：,14.3 創(chuàng)建熱點(diǎn)和圖像映射,熱點(diǎn)和切片的異同：兩者都可以定義鏈接和行為，都可以接受用戶事件產(chǎn)生響應(yīng)。不同的是，熱點(diǎn)只是在圖像上指定了一個(gè)區(qū)域，而切片可以將圖像分割開。,14.4 制作按鈕,在Fireworks MX 2004中，我們可以輕松地創(chuàng)建出具有交互行為的精美按鈕 :1.新建按鈕元件2.將已有圖形或文本轉(zhuǎn)換成按鈕3.制作導(dǎo)航條,14.5 制作彈出菜單,注意：彈出菜單在Fireworks中預(yù)覽是看不到彈出菜單的，只

6、有按下F12鍵，打開IE瀏覽器進(jìn)行預(yù)覽，才可以看到彈出菜單的效果。,14.6 制作蒙板,蒙板能夠隱藏或顯示對(duì)象或圖像的某些部分，也能將一個(gè)圖像混合到另一個(gè)圖像中去。蒙板并不直接應(yīng)用于圖像，而是使蒙板對(duì)象位于被遮蓋的圖像之上。Fireworks提供了矢量蒙板和位圖蒙板兩種方法。,14.6 制作蒙板,1.創(chuàng)建矢量蒙板2.使用位圖蒙板3.文字蒙板,14.6 制作蒙板,用文字作為蒙板，可以得到和本書第12章的12.4節(jié)中介紹使用圖像填

7、充文本相同的效果。制作文字蒙板的方法和創(chuàng)建矢量蒙板的方法完全相同，只要將文字作為蒙板對(duì)象放置在背景圖片的上方即可。如圖14-21所示，為文字蒙板的效果。,14.7 創(chuàng)作動(dòng)畫,在Fireworks MX 2004中，利用幀來(lái)創(chuàng)建GIF動(dòng)畫，每一個(gè)幀上包含了不同的圖像，依次顯示不同幀上的圖像，形成運(yùn)動(dòng)的錯(cuò)覺。在制作動(dòng)畫之前，我們先認(rèn)識(shí)一下用于動(dòng)畫制作的動(dòng)畫設(shè)置對(duì)話框，如圖14-22所示。,14.7 創(chuàng)作動(dòng)畫,幀，調(diào)節(jié)動(dòng)畫中的幀數(shù)。移動(dòng)，調(diào)