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

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