網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程與上機(jī)指導(dǎo)第版綜合處理網(wǎng)頁(yè)圖像.ppt

第24章 綜合處理網(wǎng)頁(yè)圖像,教學(xué)提示和教學(xué)目標(biāo) 24.1 創(chuàng)建圖像切片和熱區(qū) 24.2 創(chuàng)建網(wǎng)頁(yè)圖像素材 24.3 色彩調(diào)整與濾鏡效果,教學(xué)提示和教學(xué)目標(biāo),教學(xué)提示：Fireworks 8是用來(lái)設(shè)計(jì)和制作專(zhuān)業(yè)化網(wǎng)頁(yè)圖形的終極解決方案。切片是Fireworks 8中用于創(chuàng)建交互性的基本構(gòu)造塊。切片是網(wǎng)頁(yè)對(duì)象它們不是以圖像的形式存在，而是最終以HTML代碼的形式出現(xiàn)?？梢酝ㄟ^(guò)【層】面板中的【網(wǎng)頁(yè)】層查看、選擇和重命名它們。本章講述切片的創(chuàng)建、圖像熱區(qū)、創(chuàng)建網(wǎng)頁(yè)圖像素材、調(diào)整圖像的色階和導(dǎo)入濾鏡等基本操作。 教學(xué)目標(biāo)： 掌握創(chuàng)建圖像的切片和熱區(qū) 掌握創(chuàng)建網(wǎng)頁(yè)圖像素材 掌握色彩調(diào)整與濾鏡效果 掌握制作網(wǎng)頁(yè)立體按鈕,24.1 創(chuàng)建圖像切片和熱區(qū),切片是組成圖像的一個(gè)矩形區(qū)域。在這個(gè)區(qū)域上，可以建立鏈接、翻轉(zhuǎn)和動(dòng)畫(huà)，從而在最后的Web頁(yè)面上看到這些效果。 熱點(diǎn)是指網(wǎng)頁(yè)圖形中鏈接到URL的區(qū)域。Web設(shè)計(jì)人員有時(shí)使用熱點(diǎn)為較大圖形中的各個(gè)小部分產(chǎn)生交互。 24.1.1 創(chuàng)建切片 24.1.2 編輯切片 24.1.3 導(dǎo)出切片 24.1.4 創(chuàng)建圖像熱區(qū),24.1.1 創(chuàng)建切片,創(chuàng)建切片可以使用兩種方法，一種是使用菜單命令的方法，可以按照層的放置創(chuàng)建切片；另一種是通過(guò)使用工具箱中的【切片】工具，自定義創(chuàng)建切片。 1. 使用菜單命令創(chuàng)建切片 2. 利用【切片】工具創(chuàng)建切片,24.1.2 編輯切片,創(chuàng)建切片對(duì)象以后，可對(duì)其進(jìn)行編輯以便使之符合要求。編輯切片對(duì)象主要包括顯示和隱藏切片、移動(dòng)切片、改變切片對(duì)象的大小以及調(diào)整切片對(duì)象的顏色等內(nèi)容。 1. 修改切片大小和顏色 (1) 如果切片大小不合適，可以使用【指針】工具拖動(dòng)切片引導(dǎo)線(xiàn)調(diào)整切片大小。 (2) 選中要更改顏色的切片，在【屬性】面板中單擊顏色框，在彈出的調(diào)色板中設(shè)置切片的顏色。 2. 顯示隱藏切片 單擊工具箱中的【隱藏切片和熱點(diǎn)】工具按鈕，就可以隱藏切片對(duì)象。如果要重新顯示，可以單擊工具箱中的【顯示切片和熱點(diǎn)】工具按鈕，也可以通過(guò)控制網(wǎng)頁(yè)圖層的顯示和隱藏來(lái)控制切片對(duì)象的顯示和隱藏，如圖24.3所示是單擊網(wǎng)頁(yè)層左側(cè)的【顯示/隱藏圖層】按鈕隱藏了切片后的效果。,24.1.3 導(dǎo)出切片,在編輯完切片以后，就要導(dǎo)出切片，導(dǎo)出切片的具體操作步驟如下。 (1) 打開(kāi)如圖24.4所示的切片對(duì)象。 (2) 選擇【文件】|【導(dǎo)出】命令，彈出【導(dǎo)出】對(duì)話(huà)框，如圖24.5所示。 在【切片】下拉列表中有3個(gè)選項(xiàng)。 【導(dǎo)出切片】：表示根據(jù)切片對(duì)象導(dǎo)出多個(gè)切片文件。 【無(wú)】：表示不生成切片文件，只是將文件導(dǎo)出為一個(gè)圖像文件。 【沿輔助線(xiàn)切片】：表示依據(jù)文件中現(xiàn)有切片向?qū)?dǎo)出切片。 (3) 設(shè)置完畢，單擊【導(dǎo)出】按鈕，即可將切片導(dǎo)出。,24.1.4 創(chuàng)建圖像熱區(qū),在原圖形中標(biāo)識(shí)出可作為導(dǎo)航點(diǎn)的區(qū)域后，就可以創(chuàng)建熱點(diǎn)。 (1) 打開(kāi)一個(gè)需要添加圖像熱區(qū)的圖像。 (2) 選擇工具箱中的【熱點(diǎn)】工具，可以看見(jiàn)3種類(lèi)型的熱點(diǎn)工具，即【矩形熱點(diǎn)】工具、【圓形熱點(diǎn)】工具和【多邊形熱點(diǎn)】工具。 (3) 根據(jù)繪制熱點(diǎn)的圖像的形狀選擇相應(yīng)的熱點(diǎn)功能，在圖像中需要?jiǎng)?chuàng)建熱點(diǎn)的位置，拖動(dòng)鼠標(biāo)，繪制熱點(diǎn)，如圖24.8所示。,24.2 創(chuàng)建網(wǎng)頁(yè)圖像素材,在制作網(wǎng)頁(yè)過(guò)程中需要大量的網(wǎng)頁(yè)圖像素材，可以使用Photoshop制作網(wǎng)頁(yè)圖像素材，同樣也可以使用Fireworks 制作網(wǎng)頁(yè)圖像素材。 24.2.1 創(chuàng)建網(wǎng)頁(yè)按鈕 24.2.2 創(chuàng)建彈出菜單,24.2.1 創(chuàng)建網(wǎng)頁(yè)按鈕,按鈕是網(wǎng)頁(yè)中的重要元素之一，在網(wǎng)頁(yè)中發(fā)揮著十分重要的作用。它主要起著兩個(gè)作用：第一個(gè)是起到提示性的作用，有提示性文本或者圖形來(lái)告訴瀏覽者單擊后有什么作用；第二是動(dòng)態(tài)響應(yīng)的作用，即當(dāng)瀏覽者進(jìn)行不同的操作時(shí)，按鈕能夠呈現(xiàn)出不同的效果。,24.2.2 創(chuàng)建彈出菜單,在網(wǎng)頁(yè)上利用彈出菜單可以節(jié)省網(wǎng)頁(yè)空間，利用Fireworks可以創(chuàng)建彈出菜單，具體操作步驟如下。,24.3 色彩調(diào)整與濾鏡效果,可以使用【屬性】面板將一個(gè)或多個(gè)動(dòng)態(tài)濾鏡應(yīng)用于所選對(duì)象。每次給對(duì)象添加新動(dòng)態(tài)濾鏡時(shí)，此新濾鏡便添加到【屬性】面板的【添加濾鏡】彈出菜單的列表中。可以打開(kāi)或關(guān)閉每種動(dòng)態(tài)濾鏡。 24.3.1 調(diào)整圖像的色階 24.3.2 調(diào)整圖像的亮度和對(duì)比度 24.3.3 調(diào)整色相和飽和度 24.3.4 模糊圖像 24.3.5 銳化圖像 24.3.6 導(dǎo)入濾鏡效果,24.3.1 調(diào)整圖像的色階,【色階】濾鏡可以調(diào)整圖像的亮部、中間調(diào)和暗部的色域，單擊【濾境】右邊的()按鈕，在彈出的菜單中選擇【調(diào)整顏色】|【色階】命令，彈出如圖24.32所示的【色階】對(duì)話(huà)框，在對(duì)話(huà)框中調(diào)整圖像的色階。 左側(cè)有兩個(gè)區(qū)域用來(lái)設(shè)置圖像的輸入色階和輸出色階，拖動(dòng)滑塊即可改變它們的數(shù)值。在對(duì)話(huà)框的右側(cè)有3個(gè)吸管形狀的按鈕，它們分別可以取【亮部顏色】、【中間調(diào)顏色】和【暗部顏色】。如果在此對(duì)話(huà)框中單擊【自動(dòng)】按鈕，相當(dāng)于選擇【自動(dòng)色階】選項(xiàng)。 設(shè)置好參數(shù)后，單擊【確定】按鈕即可。,24.3.2 調(diào)整圖像的亮度和對(duì)比度,【亮度/對(duì)比度】功能可以修改圖像中像素的對(duì)比度或亮度。這將影響圖像的亮度和色調(diào)。校正太暗或太亮的圖像時(shí)通常使用【亮度/對(duì)比度】濾鏡，具體操作步驟如下。 (1)單擊【濾境】右邊的()按鈕，在彈出的菜單中選擇【調(diào)整顏色】|【亮度/對(duì)比度】命令。彈出如圖24.36所示的【亮度/對(duì)比度】對(duì)話(huà)框，在對(duì)話(huà)框中調(diào)整圖像的亮度/對(duì)比度。 (2)拖動(dòng)【亮度】下面的滑塊或者在文本框中輸入數(shù)值。當(dāng)調(diào)整數(shù)值為正值時(shí)，圖像增加亮度；當(dāng)數(shù)值為負(fù)值時(shí)，圖像降低亮度。拖動(dòng)【對(duì)比度】下面的滑塊或者在文本框中輸入數(shù)值。當(dāng)數(shù)值為正值時(shí)，增加對(duì)比度，當(dāng)數(shù)值為負(fù)值時(shí)，減少對(duì)比度。 (3)設(shè)置完畢，單擊【確定】按鈕。,24.3.3 調(diào)整色相和飽和度,可以通過(guò)調(diào)整圖像色相和飽和度等參數(shù)，使圖像產(chǎn)生不同的效果，具體操作步驟如下。 (1)單擊【屬性】面板中【濾鏡】右邊的()按鈕，在彈出的菜單中選擇【調(diào)整顏色】|【色相/飽和度】命令，彈出如圖24.39所示的【色相/飽和度】對(duì)話(huà)框。 (2)拖動(dòng)【色相】、【飽和度】和【亮度】上的滑塊或者在文本框中輸入數(shù)值，可以改變圖像的色相、飽和度和亮度，這時(shí)可以在文檔窗口中看到調(diào)整后的效果。 (3)設(shè)置完畢，單擊【確定】按鈕。,24.3.4 模糊圖像,模糊濾鏡可以通過(guò)使邊緣過(guò)于清晰或?qū)Ρ榷冗^(guò)于強(qiáng)烈的區(qū)域產(chǎn)生模糊效果來(lái)柔化邊緣。該濾鏡沒(méi)有對(duì)話(huà)框，單擊命令，即可應(yīng)用，具體操作步驟如下。 (1)單擊【屬性】面板中【濾鏡】右邊的()按鈕，在彈出的菜單中選擇【模糊】|【模糊】命令。 (2)分別選擇選項(xiàng)3次，如圖24.41所示分別是模糊前和模糊后的效果。,24.3.5 銳化圖像,使用【銳化】濾鏡，可以使當(dāng)前的圖像增大鄰近像素的對(duì)比度，對(duì)模糊圖像的焦點(diǎn)進(jìn)行調(diào)整，具體操作步驟如下。 (1)單擊【屬性】面板中【濾鏡】右邊的()按鈕，在彈出的菜單中選擇【銳化】|【銳化】命令。 (2)分別選擇選項(xiàng)2次，如圖24.43所示分別是銳化前和銳化后的效果。,24.3.6 導(dǎo)入濾鏡效果,(