資源描述:
《網(wǎng)頁制作技術(shù)教學(xué)課件許莉第5章.ppt》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第5章網(wǎng)頁圖像處理本章學(xué)習(xí)目標(biāo)掌握在FireworksMX2004中處理位圖的方法掌握在FireworksMX2004中創(chuàng)建動畫的方法掌握切片以及熱點的創(chuàng)建方法掌握按鈕和導(dǎo)航欄的制作方法掌握圖層的使用方法掌握優(yōu)化圖像的方法5.1位圖圖像處理5.1.1選取圖像區(qū)域1、選擇規(guī)則選區(qū)“選取框”工具和“橢圓選取框”工具可以用于選擇規(guī)則選區(qū)。2、選擇不規(guī)則選區(qū)“套索”工具、“多邊形套索”工具或“魔術(shù)棒”工具。用于選擇不規(guī)則選區(qū)。3、調(diào)整選區(qū)增加選區(qū)的方法是:按下Shift鍵繼續(xù)選擇其他的選區(qū)。減少選區(qū)的方法是:按下Alt鍵選擇需要刪除的選區(qū)。另外,在“選擇”菜
2、單中,可以對選區(qū)進行調(diào)整。5.1.2修飾位圖使用鉛筆或刷子工具使用油漆桶或漸變工具使用模糊、銳化與涂抹工具使用減淡和烙印工具使用橡皮圖章、替換顏色與紅眼消除工具使用橡皮擦工具5.1.3使用濾鏡1、雜點2、模糊3、調(diào)整顏色4、銳化5、查找邊緣和轉(zhuǎn)換為Alpha5.1.4使用效果1、斜角和浮雕2、陰影和光暈3、其他效果5.2動畫的制作5.2.1打開多個圖像文件制作動畫具體步驟見書。5.2.2手工制作動畫具體步驟見書。5.2.3分散到幀生成動畫具體步驟見書。5.2.4利用元件和實例制作動畫元件是存放在庫中可以重復(fù)使用的對象。實例是元件在文檔中的具體引用。F
3、ireworksMX2004中包含三種元件類型:圖形、動畫和按鈕。新建元件的方法使用實例創(chuàng)建動畫具體步驟見書。5.2.5導(dǎo)出動畫設(shè)置動畫循環(huán)在“幀”面板中的循環(huán)設(shè)置決定動畫重復(fù)的次數(shù)。選擇【窗口】
4、【幀】顯示幀面板,單擊面板底部的“Gif動畫循環(huán)”按鈕,可以設(shè)置循環(huán)的次數(shù)。輸出動畫在優(yōu)化面板中設(shè)置導(dǎo)出為“動畫GIF接近網(wǎng)頁128”,可以將動畫導(dǎo)出為“GIF動畫”格式。然后選擇【文件】
5、【導(dǎo)出預(yù)覽】,單擊“導(dǎo)出”按鈕即可。5.3圖像的切割5.3.1切片的創(chuàng)建和使用“切片”是建立交互響應(yīng)的基礎(chǔ)。切片的功能是把Fireworks的編輯文件分割成小的圖片,并
6、且將其單獨發(fā)布為一個文件。在輸出過程中,F(xiàn)ireworks會自動創(chuàng)建一個包含
標(biāo)簽的HTML文件,以便在瀏覽器中重新拼接成完整的圖像。切片的具體創(chuàng)建方法見書。5.3.2導(dǎo)出切片切片創(chuàng)建完成后,還需要經(jīng)過導(dǎo)出才可以在網(wǎng)頁中使用。選擇【文件】7、【導(dǎo)出】后,會彈出“導(dǎo)出”對話框。在設(shè)置導(dǎo)出文件類型時,保存類型要設(shè)置為HTML和圖像,并將其保存為網(wǎng)頁。在HTML下拉列表中,選擇“導(dǎo)出HTML文件”可以直接導(dǎo)出HTML文件。在“切片”下拉列表中選擇“導(dǎo)出切片”即可根據(jù)繪制的切片對象生成多個切片文件。設(shè)置完畢后,單擊“保存”按鈕,即可將切片導(dǎo)出。5.
8、3.3熱點的設(shè)置熱點是包含超級鏈接的網(wǎng)頁圖像區(qū)域,也就是單擊后可以連接到其他位置的區(qū)域。圖像映射是指在一幅圖中有多個對象分別指向不同的鏈接,這個設(shè)置了多個熱點的圖像就叫“映射圖”。在FireworksMX2004中,共有三種熱點:矩形熱點、圓形熱點和多邊形熱點。具體創(chuàng)建方法見書。5.4按鈕、導(dǎo)航欄和彈出菜單制作5.4.1創(chuàng)建按鈕按鈕通常包括以下4種不同的狀態(tài):“釋放”:按鈕無任何交互時所顯示的外觀,是一種默認(rèn)狀態(tài)?!盎^”:當(dāng)鼠標(biāo)移動到按鈕之上時所顯示出來的外觀?!鞍聪隆保喊粹o被單擊后的狀態(tài),通常出現(xiàn)在目標(biāo)網(wǎng)頁中?!鞍聪聲r滑過”:鼠標(biāo)滑過處于“按下”
9、狀態(tài)下的按鈕,按鈕所顯示的狀態(tài),通常極少使用。具體制作方法見書。5.4.2創(chuàng)建導(dǎo)航欄導(dǎo)航欄是一組指向不同鏈接地址的按鈕,用于在一系列具有相同級別的網(wǎng)頁間進行跳轉(zhuǎn)。使用一個按鈕元件的多個實例排列在一起,再對各個實例進行修改,為它們指定不同的鏈接地址,一個導(dǎo)航欄就繪制完成了。將剛才制作的按鈕元件從庫面板中拖到畫布,排列成一行或一列,改變每個按鈕上的文字及鏈接后,導(dǎo)航欄就創(chuàng)建完成了。5.4.3創(chuàng)建彈出菜單彈出菜單是在網(wǎng)頁中由鼠標(biāo)來觸發(fā)的一種菜單導(dǎo)航效果。當(dāng)鼠標(biāo)移動到導(dǎo)航菜單上時,或者當(dāng)鼠標(biāo)點擊導(dǎo)航菜單時,就會顯示彈出菜單。當(dāng)鼠標(biāo)從導(dǎo)航菜單上面移開時,彈出菜
10、單就會自動消失。具體制作方法見書。5.5圖像的優(yōu)化導(dǎo)出5.5.1圖像的優(yōu)化圖像的優(yōu)化是指在保持圖像品質(zhì)的前提下壓縮圖像,從而使其在網(wǎng)絡(luò)上能夠快速地下載。1、文件導(dǎo)出格式的選擇(1)JPEG圖像JPEG用于24位色圖像的優(yōu)化,采用有損壓縮法,壓縮比很高,壓縮效果顯著。(2)GIF圖像GIF最高支持256種顏色,采用無損壓縮法,色彩比較簡單,但文件容量比較小,是互聯(lián)網(wǎng)上常用的圖像格式。(3)PNG圖像PNG圖像采用無損壓縮算法,能真實重現(xiàn)原始圖像的信息,同時,它又支持真彩色,而且圖像的大小和JPEG沒有太大差別。5.5.1圖像的優(yōu)化2、優(yōu)化GIF格式(1
11、)選擇調(diào)色板(2)選擇色彩深度(3)設(shè)置失真(4)設(shè)置抖動(5)設(shè)置交錯(6)設(shè)置透明3、優(yōu)化JPEG格式(
當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。