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

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