網(wǎng)頁圖像制作與優(yōu)化PPT課件

1、10.1 Fireworks 8簡介10.2 Fireworks 8工作環(huán)境10.3 Fireworks 8的簡單操作10.4 將文本附加于路徑10.5 創(chuàng)建按鈕與菜單10.6 圖像切片的使用10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布10.8 實踐技能訓練第1010章 網(wǎng)頁圖像制作與優(yōu)化 第1頁/共48頁10.1 Fireworks 810.1 Fireworks 8簡介 Macromedia Fireworks 8是一款用來設計網(wǎng)頁圖形的多功能應用程序?？梢杂脕韯?chuàng)建和編輯位圖和矢量圖像、設計網(wǎng)頁效果（如變換圖像和彈出菜單）、修剪和優(yōu)化圖形以減小其文件大小以及通過使重復性任務自動進行來節(jié)省時間。它所含

2、的創(chuàng)新性解決方案解決了圖形設計人員和網(wǎng)站管理員所面臨的主要問題。10.1.1 Fireworks的優(yōu)點 Fireworks的優(yōu)點表現(xiàn)在效率高、操作便捷以及較好的網(wǎng)絡速配性等多方面。10.1.2 Fireworks的適用對象 當然，不會有絕對的最優(yōu)選擇，因為Fireworks是應網(wǎng)頁設計者的挑戰(zhàn)而推出的一套解決方案。因此，F(xiàn)ireworks對傳統(tǒng)傳媒（如商業(yè)印刷品）來說，并不是創(chuàng)建和處理圖形的最佳選擇。Fireworks的環(huán)境是基于RGB顏色模式的，因此，理論上講，也更適于屏幕導出，而不是打印輸出。第2頁/共48頁10.1 Fireworks 810.1 Fireworks 8簡介 10.1.3

3、 Fireworks 8的新特色 1專業(yè)設計控制 2無縫的跨軟件工作流程 3性能顯著提高 4用戶界面的改進 5新的熱效 6新的反鋸齒選項 7完整的Unicod支持第3頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.1 Fireworks 8的界面 圖10-1 Fireworks 8的操作界面第4頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.2 菜單欄（1）“文件”菜單（2）“編輯”菜單（3）“視圖”菜單（4）“選擇”菜單（5）“修改”菜單（6）“文本”菜單（7）“命令”菜單（8）“濾鏡”菜單（9）“窗

4、口”菜單（10）“幫助”菜單第5頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.3 工具欄（1）主要工具欄： （2）修改工具欄 第6頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.4 狀態(tài)欄Fireworks 8中的狀態(tài)欄顯示了設置選項、按鈕、大小與鎖定鍵及數(shù)字鎖定鍵等當前操作狀態(tài)的相關信息，如圖10-5所示。 圖10-5 狀態(tài)欄第7頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.5 工具面板在默認狀態(tài)下，工具面板放置在窗口的左側，面板上分為幾組不同種類的工

5、具，分別為選擇、位圖、矢量、網(wǎng)頁、顏色和視圖，如圖10-6所示。 圖10-6 工具面板中的幾組工具第8頁/共48頁10.2 Fireworks 810.2 Fireworks 8工作環(huán)境10.2.6 常用面板 在繪制和編輯圖像時，最常用的面板包括形狀面板屬性面板、顏色面板、混色器面板、信息面板、查找面板、行為面板、優(yōu)化面板、層面板、樣式面板、URL面板庫面板、幀面板、歷史紀錄面板及特殊字符面板等，這些面板通常被稱為面板組。 默認的情況下，F(xiàn)ireworks 8面板將面板成組停放在工作區(qū)的右側。設計者可以進行取消停放面板組、將面板添加到組、重新排列面板組的順序、折疊和關閉面板組、打開或關閉面板組

6、等操作，這些操作都可以通過單擊面板右上角的圖標從下拉列表中選擇，有關常用面板的具體介紹和應用將在以后的相關內容中講解，這里不再詳細介紹。 第9頁/共48頁10.3 Fireworks 810.3 Fireworks 8的簡單操作10.3.1 操作Fireworks 8文檔1新建文檔2打開文檔3保存和導出文檔第10頁/共48頁10.3 Fireworks 810.3 Fireworks 8的簡單操作10.3.2 繪制簡單的矢量圖形1繪制小腳丫2可愛的心3汽車標志的繪制第11頁/共48頁10.3 Fireworks 810.3 Fireworks 8的簡單操作10.3.3 使用濾鏡 對于某一對象應

7、用特殊效果，可以在“屬性”面板中的“濾鏡”中完成，如圖10-22所示。在該面板中，可以對一個對象使用多種效果，每一次增加的效果都會被列在其中的效果列表中。 圖10-22 使用“濾鏡” 第12頁/共48頁10.3 Fireworks 810.3 Fireworks 8的簡單操作 下面以兩個實例介紹有關Fireworks 8中有關顏色、筆觸、填充以及濾鏡效果的設置等具體的應用方法。 1繪制相片框 圖10-26 圖形效果第13頁/共48頁10.3 Fireworks 810.3 Fireworks 8的簡單操作2繪制夜晚景色 圖10-33 夜空效果 第14頁/共48頁10.4 10.4 將文本附加于

8、路徑 將文本附加到路徑后，該路徑會暫時失去其筆觸、填充以及效果屬性。隨后應用的任何筆觸、填充和效果屬性都將應用到文本，而不是路徑。如果之后將文本從路徑分離出來，該路徑會重新獲得筆觸、填充以及效果屬性。 1將文本附加于路徑圖10-36 最后的顯示效果 圖10-37 將文本附加到經(jīng)過編輯的路徑上第15頁/共48頁10.4 10.4 將文本附加于路徑2文本轉換為路徑 文本不僅可以附加到路徑上，還可以將文本轉換為路徑。轉換為路徑后，文本就可以在任何情況下正常顯示，另外，還可以利用所有的矢量編輯工具來編輯文本，就像編輯矢量對象一樣編輯字母的形狀。但是，這樣做也會導致一個問題：路徑對象再也不可能作為文本用

9、文本工具進行編輯，另外，路徑文本對象也不能再轉換化文本對象，這個過程是不可逆的。 圖10-39 文本效果 第16頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單10.5.1 創(chuàng)建按鈕 1創(chuàng)建按鈕 2將一個文本或圖像轉換為按鈕元件 3創(chuàng)建具有兩種狀態(tài)的簡單按鈕 4編輯導入的按鈕 5使用斜角效果繪制按鈕狀態(tài)第17頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單10.5.2 創(chuàng)建菜單 第18頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單10.5.2 創(chuàng)建菜單 1創(chuàng)建彈出菜單 2創(chuàng)建彈出菜單的子菜單 3創(chuàng)建彈出菜單的彈出子菜單 4將菜單項移到較高級別的子菜單或主彈出菜單中 5設計彈出菜單的外觀6設置菜單單

10、元格的外觀 7添加彈出菜單的樣式 8設置高級彈出菜單屬性 9定位彈出菜單和子菜單 10使用“彈出菜單編輯器”設置彈出菜單的位置 11使用“彈出菜單編輯器”設置彈出子菜單的位置 12通過拖動彈出菜單來為其設置位置第19頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單（2）執(zhí)行選擇“修改”“彈出菜單”“添加彈出菜單”命令,打開“彈出菜單編輯器”。（3）單擊“內容”選項卡。（4）單擊“添加菜單”按鈕以添加一個空菜單項。單擊“刪除菜單”按鈕刪除單元格（菜單項）。（5）雙擊每個單元格并輸入或選擇適當?shù)男畔ⅰ＃?）重復步驟（4）和（5），直到添加完所有的菜單項。（7）可以隨意的刪除菜單項，方法是高亮顯示該項

11、，單擊“刪除菜單”按鈕，執(zhí)行下列操作之一。1）單擊“繼續(xù)”按鈕移到“外觀”選項卡，或者選擇另一個選項卡繼續(xù)生成彈出菜單。2）建彈出菜單的子菜單項目。3）單擊“完成”按鈕關閉“彈出菜單編輯器”，完成彈出菜單的創(chuàng)建工作。第20頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單2創(chuàng)建彈出菜單的子菜單 在“彈出菜單編輯器”中，使用“內容”選項卡上的“縮進菜單”和“左縮進菜單”按鈕可以創(chuàng)建子菜單，即當指針滑過或單擊另一彈出按鈕菜單時顯示的彈出菜單?？梢愿鶕?jù)需要創(chuàng)建足夠多級子菜單。3創(chuàng)建彈出菜單的彈出子菜單（1）在“彈出菜單編輯器”的“內容”選項卡上，高亮顯示一個子菜單。（2）單擊“縮進菜單”按鈕將該項再次縮

12、進，以使其從上方的相鄰子菜單項縮進。第21頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單4將菜單項移到較高級別的子菜單或主彈出菜單中（1）在“彈出菜單編輯器”的“內容”選項卡上，高亮顯示該項菜單。（2）單擊“左縮進菜單”按鈕。（3）執(zhí)行下列操作之一完成彈出菜單的創(chuàng)建或繼續(xù)生成它。1）單擊“繼續(xù)”按鈕移到“外觀”選項卡，或者選擇另一個選項卡繼續(xù)生成彈出菜單。2）單擊“完成”按鈕關閉“彈出菜單編輯器”。第22頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單5設計彈出菜單的外觀 在創(chuàng)建了基本菜單和可選子菜單之后，即可在“彈出菜單編輯器”的“外觀”選項卡上對文本進行格式設置，對“滑過狀態(tài)”和“釋放狀態(tài)”

13、應用圖形樣式，并選擇垂直或水平方向，如圖10-52所示。圖10-52 設計菜單的外觀第23頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單6設置菜單單元格的外觀7添加彈出菜單的樣式8設置高級彈出菜單屬性“彈出菜單編輯器”的“高級”選項卡提供了用于控制以下各項的附加設置：單元格的大小、邊距和間距，文字縮進、菜單消失延時，以及邊框寬度、顏色、陰影和高亮顯示。如圖10-53所示。第24頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單9定位彈出菜單和子菜單“彈出菜單編輯器”的“位置”選項卡可以指定彈出菜單的位置。當“網(wǎng)頁層”可見時，還可以通過在工作區(qū)中拖動頂級彈出菜單的輪廓來調整其位置，如圖10-54所示

14、。 圖10-54 定位菜單第25頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單10使用“彈出菜單編輯器”設置彈出菜單的位置（1）在“彈出菜單編輯器”中，使所需彈出菜單處于打開狀態(tài)，單擊“位置”選項卡。（2）單擊“位置”按鈕以相對于觸發(fā)彈出菜單的切片來調整菜單的位置。11使用“彈出菜單編輯器”設置彈出子菜單的位置。（1）在“彈出菜單編輯器”中，使所需彈出的菜單處于打開狀態(tài)，單擊“位置”選項卡。（2）單擊“子菜單位置”按鈕以相對于觸發(fā)該子菜單的彈出菜單項調整子菜單的位置。（3）若要相對于觸發(fā)子菜單的父菜單項來安排每個子菜單的位置，請為子菜單位置選擇“放在同一位置”選項。（4）單擊“完成”按鈕關閉“

15、彈出菜單編輯器” 。第26頁/共48頁10.5 10.5 創(chuàng)建按鈕與菜單12通過拖動彈出菜單來為其設置位置（1）單擊工具面板中的“顯示切片和熱點”按鈕。（2）選擇作為彈出菜單觸發(fā)器的網(wǎng)頁對象。（3）將彈出菜單的輪廓拖到工作區(qū)的其他位置。本實例的最終結果如圖10-55所示。 圖10-55 彈出菜單的結果圖第27頁/共48頁10.6 10.6 圖像切片的使用10.6.1 創(chuàng)建切片對象 1創(chuàng)建切片對象 切片對象的延伸線是切片引導線，它確定導出時將文檔拆分成的單獨圖像文件的邊界。默認情況下，這些引導線為紅色，如圖10-56所示。 圖10-56 圖像切片第28頁/共48頁10.6 10.6 圖像切片的使

16、用 2創(chuàng)建HTML切片 HTML切片指定瀏覽器中出現(xiàn)普通HTML文本的切片圖像區(qū)域。HTML切片不導出任何像素的圖像數(shù)據(jù)，它導出出現(xiàn)在由切片定義的表格單元格的HTML文本。 如果要快速更新出現(xiàn)在站點中的文本而無須創(chuàng)建新的圖形，則HTML切片很有用。第29頁/共48頁10.6 10.6 圖像切片的使用3創(chuàng)建非矩形切片當試圖將交互性附加到非矩形圖像時，矩形切片可能無法滿足需要。例如，如果打算將變換圖像效果附加到切片，而切片對象互相重疊或者形狀不規(guī)則，則矩形切片可能會與變換圖像交換出不是所要得到的背景圖形。Firework解決此問題的辦法是：允許使用“多邊形切片”工具繪制任何多變性形狀的切片，如圖1

17、0-59所示。 圖10-59 非矩形切片第30頁/共48頁10.6 10.6 圖像切片的使用10.6.2 使用切片交互 在Firework中創(chuàng)建交互效果生成切片對象。Firework提供了兩種使切片交互的方式。 拖動變換圖像的方法是切片交互最簡單方法。只需要拖動切片的行為手柄并將其放在目標切片中，即可快速創(chuàng)建簡單的交互效果。 “行為”面板可以創(chuàng)建更復雜的交互。“行為”面板中包含各種交互行為，可以將它們附加到切片中。通過將多個行為附加到單個切片上，可以創(chuàng)建有趣的效果，還可以通過編輯現(xiàn)有行為來創(chuàng)建自定義交互效果。 Firework 8中的行為與Dreamweaver 8行為兼容。在將Firewor

18、k 8變換圖像導出到Dreamweaver 8時，可以使用Dreamweaver 8的“行為”面板編輯Firework 8行為。第31頁/共48頁10.6 10.6 圖像切片的使用 1向切片添加簡單的交互效果 拖動變換圖像方法是創(chuàng)建變換圖像和交換圖像效果的快速而有效的方法。具體來說，拖動變換圖像方法可以確定指針經(jīng)過一個切片時該切片所發(fā)生的變化。最終結果通常稱為變換圖像。變換圖像是在網(wǎng)頁瀏覽器中當指針經(jīng)過其上方移動時，其外觀發(fā)生更改的圖形。 當選定切片時，一個帶有十字的圓圈出現(xiàn)在切片的中央。這稱為行為手柄，如圖10-60所示。 圖10-60 切片示意圖第32頁/共48頁10.6 10.6 圖像切

19、片的使用2創(chuàng)建簡單的變換圖像 簡單變換圖像使用同一網(wǎng)頁對象下面的幀上的另一個圖像來交換圖像。簡單交換圖像只涉及一個切片或熱點。 可以從任何幀中選擇交換圖像，如圖10-62所示。 圖10-62 選擇交換圖像第33頁/共48頁10.6 10.6 圖像切片的使用 3創(chuàng)建不相交變換圖像 當指針在一個網(wǎng)頁對象上方滾動時，不相交變換圖像交換另一個網(wǎng)頁對象下方的圖像。當指針滑過或單擊一個觸發(fā)器圖像時，作為響應，在網(wǎng)頁的另一位置中出現(xiàn)一個圖像。鼠標滑過的圖像被視為觸發(fā)器，發(fā)生更改的圖像被視為目標。 與僅使用一個切片的簡單變換圖像一樣，首先必須對觸發(fā)器、目標切片和交換圖像所駐留的幀進行設置。然后，可以使用一條行

20、為線將觸發(fā)器鏈接到目標切片。第34頁/共48頁10.6 10.6 圖像切片的使用4將多個變換圖像應用到切片 可以從單個切片中拖動多個行為手柄來創(chuàng)建多個交換圖像交互。例如，可以從同一切片中觸發(fā)一個變換圖像和一個不相交變換圖像，如圖10-66所示。用來觸發(fā)變換圖像行為和不相交變換圖像行為的切片。 圖10-66 創(chuàng)建不相交交換圖像第35頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布 10.7.1 選擇文件的優(yōu)化格式 在Firework 8中，優(yōu)化文件涉及以下操作。（1）最佳文件格式。每種文件格式都有不同的壓縮顏色信息的方法，為某些類型的圖像選擇適當?shù)母袷娇梢源蟠鬁p小文件的大小。（2）格式特

21、定選項。每種圖像文件格式都有一組惟一選項，可以用諸如色階這樣的選項來減小文件的大小。某些圖像格式（如GIF和JPEG）還具有控制圖像壓縮的選項。（3）調整圖形中的顏色（僅限于8位文件格式），可以通過將圖像局限于一個稱為調色板的特定顏色集來限定顏色，然后，修剪掉調色板中未使用的顏色，調色板中的顏色越少意味著圖像中的顏色也越少，而這會使調色板圖像文件類型的文件也越小。第36頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布10.7.2 優(yōu)化GIF格式 1、所謂索引調色板：是指GIF圖像中用來存儲和引用顏色的一個索引。索引調色板是一個最多有2510種色彩的列表，僅定義圖形中可以出現(xiàn)的顏色。在優(yōu)

22、化過程中，調整調色板會影響輸出圖像的色彩，如圖10-68所示，在默認情況下，索引調色板可用。 圖10-67 優(yōu)化面板圖10-68 選擇調色板 第37頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布 2設置失真 從理論上講，GIF文件是無損的，但在實際上，有時若要讓GIF文件壓縮得比通常所占的存儲空間還小，可以在優(yōu)化面板中進行失真量的設置。這個值越高，壓縮得就越多，但得到圖像的質量也就越低，如圖10-70所示圖像的對比，左側圖形為不失真，右側圖形為50%失真。 3設置抖動 在一些圖像中，當兩種或兩種以上的顏色相近時，很難分辨出來，以為是一種顏色，抖動的功能就是利用調色板上有限的顏色模擬調

23、色板上不存在的顏色。當輸出帶有復雜混合或漸變的圖像或把照片圖像輸出成索引格式的GIF文件時，抖動近似的顏色會起到很好的作用。第38頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布 4設置交錯 在網(wǎng)頁瀏覽器上查看時，交錯式圖像隨下載逐漸出現(xiàn)。它們首先以低分辨率顯示，到下載結束時，過渡為完整分辨率，從優(yōu)化面板的“選項”菜單中選擇“交錯”即可。 5設置透明 可以為GIF格式設置透明區(qū)域，這樣在網(wǎng)頁瀏覽器中，透過這些區(qū)域可以看到網(wǎng)頁的背景。在Fireworks 8中，“預覽”選項卡上的灰白方格圖案表示透明區(qū)域。第39頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布10.7.3 優(yōu)化JP

24、EG格式 JPEG格式經(jīng)常被存儲為24位顏色，JPEG格式的壓縮方式特殊化了壓縮漸變和過渡圖像的過程，打開優(yōu)化面板，如圖10-72所示。 1調整優(yōu)化面板中的“品質” 圖10-70 JPEG格式優(yōu)化面板 第40頁/共48頁10.7 10.7 網(wǎng)頁圖形圖像的優(yōu)化與發(fā)布 2JPEG格式的選擇性壓縮 3柔化邊緣 調整優(yōu)化面板中的“平滑”設置可以減小文件尺寸。平滑柔化堅硬的邊緣，設置的數(shù)值越大對輸出的JPEG圖像柔化效果越強烈，同時產(chǎn)生越小尺寸的文件。 4銳化色彩邊緣和細節(jié) 從優(yōu)化面板中的“選項”彈出菜單中選擇“銳化JPEG邊緣”，以保持兩種顏色之間的細小邊緣。當輸出帶有文本的JPEG圖像時，使用這一選項以維持這些區(qū)域的銳化度。 5漸進JPEG 從優(yōu)化面板中的“選項”彈出菜單中選擇“連續(xù)的JPEG”可以輸出交錯漸進的JPEG圖像。它類似于交錯的GIF文件，交錯處理的圖像先以低分辨率快速出現(xiàn)，然后隨著下