網(wǎng)頁設(shè)計(jì)三劍客基礎(chǔ)練習(xí)典型案例第11章.ppt

1,第11章 使用Fireworks網(wǎng)頁圖像編輯,Macromedia Fireworks MX 2004是用來設(shè)計(jì)制作專業(yè)化網(wǎng)頁圖像的應(yīng)用軟件，可以切實(shí)幫助網(wǎng)頁設(shè)計(jì)和開發(fā)人員解決所面臨的特殊問題。使用Fireworks，你可以在一個(gè)專業(yè)化的環(huán)境中創(chuàng)建和編輯網(wǎng)頁圖形、對(duì)其進(jìn)行動(dòng)畫處理、添加高級(jí)交互功能以及優(yōu)化圖像。在Fireworks中，可以在單個(gè)應(yīng)用程序中同時(shí)創(chuàng)建和編輯位圖與矢量圖兩種圖形。除此之外，工作流程可以實(shí)現(xiàn)自動(dòng)化，從而提高工作效率。,2,本章學(xué)習(xí)要點(diǎn)：,熟悉Fireworks工作環(huán)境 在Fireworks中繪制圖形 編輯圖形的方法和技巧 利用層和蒙版編輯圖像 制作與優(yōu)化網(wǎng)頁動(dòng)畫,3,11.1 Fireworks工作環(huán)境,打開Fireworks應(yīng)用程序的其工作界面。Fireworks MX 2004的工作界面由4部分組成：文件視圖、功能面板、工具箱和屬性面板。 同其他Windows環(huán)境下的應(yīng)用軟件類似，F(xiàn)ireworks將常用工具和命令集合成工具欄的形式方便設(shè)計(jì)人員操作使用。通過【窗口】菜單命令可以控制工具欄的顯示和隱藏。,4,11.1.2 視圖方式,Fireworks主要用來編輯網(wǎng)頁圖像，而網(wǎng)頁圖像的大小將直接影響圖像的質(zhì)量和瀏覽速度。如何解決圖像質(zhì)量和瀏覽速度之間的矛盾，成為網(wǎng)頁設(shè)計(jì)人員的工作重點(diǎn)。Fireworks提供了四種視圖顯示方式，即可編輯的原始視圖、預(yù)覽視圖、2幅預(yù)覽視圖和4幅預(yù)覽視圖，方便網(wǎng)頁設(shè)計(jì)者在編輯網(wǎng)頁圖像時(shí)直觀地預(yù)覽圖像的顯示效果，并且可以明確預(yù)知圖像的下載速度。,5,11.2 繪制圖形,Fireworks具有強(qiáng)大的繪圖功能，繪制圖形的方法可以使用位圖繪制和繪畫工具，剪切、復(fù)制和粘貼像素選區(qū)，或者將矢量圖像轉(zhuǎn)換成位圖對(duì)象。另一種創(chuàng)建位圖對(duì)象的方法是在文檔中插入一個(gè)空的位圖圖像，然后對(duì)其進(jìn)行繪制、繪畫或填充。,6,11.2.1 繪圖工具,【鋼筆工具】 使用鋼筆工具可以繪制直線、曲線以及封閉和開放路徑。繪制直線時(shí)，選擇【鋼筆】工具，單擊畫布以放置第一個(gè)角點(diǎn)，移動(dòng)指針，然后單擊以放置下一個(gè)點(diǎn)。一條直線段將這兩個(gè)點(diǎn)連接起來，繼續(xù)繪制點(diǎn)，直線段連接點(diǎn)與點(diǎn)之間的每個(gè)間隙。執(zhí)行下列操作之一結(jié)束該路徑（路徑為斷開或封閉的）：雙擊最后一個(gè)點(diǎn)結(jié)束路徑并使其成為斷開路徑。選擇其他工具結(jié)束路徑并使其成為斷開路徑。若要封閉該路徑，請(qǐng)單擊所繪制的第一個(gè)點(diǎn)。封閉路徑的起點(diǎn)和終點(diǎn)相同。如果需要繪制曲線路徑，在繪制點(diǎn)時(shí)單擊并拖動(dòng)。繪制時(shí)，當(dāng)前點(diǎn)顯示點(diǎn)柄。不論是使用【鋼筆】工具還是使用其他Fireworks繪制工具進(jìn)行繪制，所有矢量對(duì)象上的所有點(diǎn)都有點(diǎn)手柄，但這些手柄只在曲線點(diǎn)上才可見。,7,11.3 編輯圖像,對(duì)圖像進(jìn)行編輯的軟件很多，F(xiàn)ireworks是其中一款比較出色的網(wǎng)頁圖像編輯軟件。Fireworks可以進(jìn)行兩種圖像模式的編輯操作，一種是對(duì)基于路徑的矢量對(duì)象（簡稱對(duì)象模式）的操作，另一種是對(duì)基于像素的圖形對(duì)象（簡稱圖像模式）的操作。與此相應(yīng)，工具箱中的工具作用也各個(gè)不同，有些工具適用于處理對(duì)象模式，有些工具則適用于處理圖像模式。,8,11.3.1 填充圖像,填充就是為繪制的圖形填充顏色或者圖案。在Fireworks中可以利用填充功能來得到形象化的矢量圖形，比如制作簡單的按鈕。,9,11.3.2 應(yīng)用樣式,樣式主要用于圖形及文字對(duì)樣式的直接套用。在實(shí)際使用Fireworks制作諸如導(dǎo)航項(xiàng)目的背景時(shí)，除了自己動(dòng)手制作以外，還有一種簡單快捷的方法，那就是使用Fireworks的樣式面板。【樣式】面板位于浮動(dòng)面板集中的【資源】面板中，利用樣式制作一些簡單的按鈕，要使用這些樣式，只需在繪制圖形之后從中選擇一個(gè)樣式就可以了。,10,11.4 層與蒙版,到目前為止，我們對(duì)位圖以及矢量圖有了一定程度的認(rèn)識(shí)，不過這還不夠，因?yàn)檫€有Fireworks重要的概念圖層以及蒙版，而蒙版通常被人們當(dāng)作圖形和圖像的高級(jí)應(yīng)用，事實(shí)上蒙版的應(yīng)用極其簡單，簡言之，蒙版就是一幅圖片，它的作用是掩蓋住其他圖片的一部分，不讓它完全顯示?，F(xiàn)在就讓我們開始了解Fireworks圖層以及蒙版的應(yīng)用。,11,11.4.1 層的基本操作,【層】把一個(gè)Fireworks文檔分成不連續(xù)的平面，一個(gè)文檔可以包含很多層，而每一個(gè)層又可以包含很多對(duì)象。在Fireworks中，【層】面板列出層以及每一層包含的對(duì)象。利用層面板不僅可以合并位圖以及合并位圖蒙版，還可以命名、隱藏、顯示和改變層及對(duì)象的層疊順序，利用層面板還可以添加和刪除層。,12,11.6 制作與優(yōu)化動(dòng)畫,在Fireworks MX 2004中制作動(dòng)畫的一種方法是通過創(chuàng)建元件并不停地改變它們的屬性來造成運(yùn)動(dòng)的錯(cuò)覺。一個(gè)元件就像是一個(gè)演員，其動(dòng)作是由你設(shè)計(jì)的。每個(gè)元件的動(dòng)作儲(chǔ)存在一個(gè)幀中。當(dāng)按順序播放所有幀時(shí)，就成了動(dòng)畫。,13,11.6.1 制作GIF動(dòng)畫,GIF動(dòng)畫的原理其實(shí)很簡單，就是把幾幅圖像不停地輪流播放；而在Fireworks中動(dòng)畫里的每幅圖像都以一個(gè)單獨(dú)的幀存在，這里所說的幀是我們平時(shí)觀看的電影，跟組成整部電