第4章 使用圖像課件

1、 圖像與文本一樣，是網(wǎng)頁制作中不可圖像與文本一樣，是網(wǎng)頁制作中不可缺少的重要元素。使用圖像不僅可以美化缺少的重要元素。使用圖像不僅可以美化網(wǎng)頁，還可以幫助表述網(wǎng)頁主題。絢麗的網(wǎng)頁，還可以幫助表述網(wǎng)頁主題。絢麗的圖像，強(qiáng)大的視覺沖擊力往往可以更好地圖像，強(qiáng)大的視覺沖擊力往往可以更好地表述文字所無法描述的信息。本章將介紹表述文字所無法描述的信息。本章將介紹有關(guān)圖像的基本知識及其在網(wǎng)頁中的應(yīng)用。有關(guān)圖像的基本知識及其在網(wǎng)頁中的應(yīng)用。第4章使用圖像學(xué)習(xí)目標(biāo)了解圖像的基本格式。了解圖像的基本格式。掌握設(shè)置網(wǎng)頁背景的方法。掌握設(shè)置網(wǎng)頁背景的方法。掌握插入圖像的方法。掌握插入圖像的方法。掌握設(shè)置圖像屬性的方

2、法。掌握設(shè)置圖像屬性的方法。掌握創(chuàng)建網(wǎng)站相冊的方法。掌握創(chuàng)建網(wǎng)站相冊的方法。4.1網(wǎng)頁圖像格式一、一、GIF格式格式GIF格式（格式（Graphics Interchange Format，圖像交換格式，圖像交換格式，文件擴(kuò)展名為文件擴(kuò)展名為“.gif”）是由）是由Compuserve公司提出的與設(shè)備無關(guān)公司提出的與設(shè)備無關(guān)的圖像存儲標(biāo)準(zhǔn)，也是在的圖像存儲標(biāo)準(zhǔn)，也是在Web上使用最早、應(yīng)用最廣泛的圖像格上使用最早、應(yīng)用最廣泛的圖像格式。式。GIF圖像格式的優(yōu)點(diǎn)主要有以下幾點(diǎn)。圖像格式的優(yōu)點(diǎn)主要有以下幾點(diǎn)。最大支持最大支持256色，圖像在大多數(shù)瀏覽器中都能正常顯示。色，圖像在大多數(shù)瀏覽器中都能正

3、常顯示。圖像使用顏色少，壓縮效率高，文件的尺寸較小。圖像使用顏色少，壓縮效率高，文件的尺寸較小。GIF格式的圖像支持格式的圖像支持1bit透明度，可以制作背景透明的文透明度，可以制作背景透明的文字或圖像。字或圖像?？梢詫⒖梢詫IF格式的圖像制作成動(dòng)畫格式的圖像制作成動(dòng)畫GIF?？梢詫梢詫IF文件交錯(cuò)下載，在下載過程中即可呈現(xiàn)圖像內(nèi)文件交錯(cuò)下載，在下載過程中即可呈現(xiàn)圖像內(nèi)容。容。4.1網(wǎng)頁圖像格式GIF圖像格式的缺點(diǎn)主要有以下幾點(diǎn)。圖像格式的缺點(diǎn)主要有以下幾點(diǎn)。最大支持最大支持256色，不適合于有暈光、漸變色彩等顏色，不適合于有暈光、漸變色彩等顏色細(xì)膩的圖像和照片。色細(xì)膩的圖像和照片。保存

4、為保存為GIF格式后，不能通過直接打開來編輯圖像。格式后，不能通過直接打開來編輯圖像。如果確實(shí)需要編輯如果確實(shí)需要編輯4.1網(wǎng)頁圖像格式二、二、JPEG格式格式JPEG格式（格式（Joint Photographic Experts Group，聯(lián)合，聯(lián)合圖像專家組文件格式，文件擴(kuò)展名為圖像專家組文件格式，文件擴(kuò)展名為“.jpg”）是目前互聯(lián)）是目前互聯(lián)網(wǎng)中最受歡迎的圖像格式。網(wǎng)中最受歡迎的圖像格式。JPEG圖像格式的優(yōu)點(diǎn)主要有圖像格式的優(yōu)點(diǎn)主要有以下幾點(diǎn)。以下幾點(diǎn)。支持支持24位圖像，能夠很好地表現(xiàn)照片等全彩色的圖位圖像，能夠很好地表現(xiàn)照片等全彩色的圖像。像。可以生成類似可以生成類似GIF的

5、交錯(cuò)關(guān)聯(lián)圖像的交錯(cuò)關(guān)聯(lián)圖像漸變漸變JPEG。4.1網(wǎng)頁圖像格式JPEG圖像格式的缺點(diǎn)主要有以下幾點(diǎn)。圖像格式的缺點(diǎn)主要有以下幾點(diǎn)。有損壓縮使之不適合表達(dá)高清晰度的圖像。有損壓縮使之不適合表達(dá)高清晰度的圖像。最高只能以最高只能以256色顯示的用戶可能無法觀看色顯示的用戶可能無法觀看JPEG圖像。圖像。當(dāng)圖像中包含當(dāng)圖像中包含“fine”字體時(shí)，應(yīng)避免使用字體時(shí)，應(yīng)避免使用JPEG格格式，在該字體與純顏色重疊的輪廓區(qū)域會出現(xiàn)模糊的痕跡。式，在該字體與純顏色重疊的輪廓區(qū)域會出現(xiàn)模糊的痕跡。采用采用JPEG格式對圖像進(jìn)行壓縮后，不能直接打開格式對圖像進(jìn)行壓縮后，不能直接打開圖像對它重新編輯、壓縮。如果

6、確實(shí)需要重新編輯，應(yīng)打圖像對它重新編輯、壓縮。如果確實(shí)需要重新編輯，應(yīng)打開最初的開最初的24位圖像文件，編輯后再保存為位圖像文件，編輯后再保存為JPEG格式。格式。4.1網(wǎng)頁圖像格式三、三、PNG圖像圖像PNG格式（格式（Portable Network Graphics，便攜式網(wǎng)絡(luò)，便攜式網(wǎng)絡(luò)圖像，文件擴(kuò)展名為圖像，文件擴(kuò)展名為“.png”）是最近使用量逐漸增多的）是最近使用量逐漸增多的圖像格式，該格式圖像的優(yōu)點(diǎn)是，在壓縮方面能夠像圖像格式，該格式圖像的優(yōu)點(diǎn)是，在壓縮方面能夠像GIF格式的圖像一樣沒有壓縮上的損失，并能像格式的圖像一樣沒有壓縮上的損失，并能像JPEG那樣呈那樣呈現(xiàn)更多的顏色。

7、而且現(xiàn)更多的顏色。而且PNG格式也提供了一種隔行顯示方案，格式也提供了一種隔行顯示方案，在顯示速度上比在顯示速度上比GIF和和JPEG更快一些。同時(shí)更快一些。同時(shí)PNG格式圖格式圖像又具有像又具有JPEG格式圖像沒有的透明度支持能力。不過格式圖像沒有的透明度支持能力。不過PNG格式圖像還沒有普及到所有的瀏覽器，但在未來它有格式圖像還沒有普及到所有的瀏覽器，但在未來它有可能是一種非常受歡迎的圖像格式?？赡苁且环N非常受歡迎的圖像格式。4.1網(wǎng)頁圖像格式四、四、GIF和和JPEG兩種格式圖像的區(qū)別兩種格式圖像的區(qū)別雖然雖然GIF和和JPEG兩種格式的圖像在網(wǎng)頁中可以同時(shí)使用，但兩種格式的圖像在網(wǎng)頁中

8、可以同時(shí)使用，但還是有區(qū)別的。還是有區(qū)別的。GIF適用于純顏色、向量式、少于適用于純顏色、向量式、少于256色的圖像，而色的圖像，而JPEG在應(yīng)用于純色的插圖時(shí)遜色于在應(yīng)用于純色的插圖時(shí)遜色于GIF。GIF是制作透明圖像和動(dòng)畫的首選格式。是制作透明圖像和動(dòng)畫的首選格式。JPEG適用于有漸變色、顏色細(xì)膩的圖像，如照片、油畫等，適用于有漸變色、顏色細(xì)膩的圖像，如照片、油畫等，而而GIF在這方面遜色于在這方面遜色于JPEG，如圖，如圖4-2所示。所示。在實(shí)際操作過程中不但應(yīng)遵循以上原則，反復(fù)對輸出圖像的在實(shí)際操作過程中不但應(yīng)遵循以上原則，反復(fù)對輸出圖像的格式、大小、壓縮比等進(jìn)行比較，還要把圖像的下載

9、速度、顯示格式、大小、壓縮比等進(jìn)行比較，還要把圖像的下載速度、顯示器的分辨率等各種因素考慮進(jìn)去，選擇最佳方案。器的分辨率等各種因素考慮進(jìn)去，選擇最佳方案。4.2設(shè)置網(wǎng)頁背景在制作網(wǎng)頁的時(shí)候，頁面要經(jīng)常使用一些圖像來裝飾，使其在制作網(wǎng)頁的時(shí)候，頁面要經(jīng)常使用一些圖像來裝飾，使其更美觀。其中方法之一就是設(shè)置網(wǎng)頁背景，包括背景顏色和背景更美觀。其中方法之一就是設(shè)置網(wǎng)頁背景，包括背景顏色和背景圖像。選擇【修改】【頁面屬性】命令，打開【頁面屬性】對圖像。選擇【修改】【頁面屬性】命令，打開【頁面屬性】對話框，設(shè)置【背景圖像】和【背景顏色】。話框，設(shè)置【背景圖像】和【背景顏色】。4.3 插入圖像插入插入GI

10、F圖像圖像插入插入PSD圖像圖像 插入圖像占位符插入圖像占位符4.3.1 插入GIF圖像在在Dreamweaver CS3Dreamweaver CS3中插入圖像，通?？梢允褂靡韵路椒āＶ胁迦雸D像，通常可以使用以下方法。 選擇【插入記錄】選擇【插入記錄】/ /【圖像】命令?！緢D像】命令。 在【插入】在【插入】/ /【常用】工具欄中單擊（圖像）按鈕或?qū)⑵渫蟿?dòng)到【常用】工具欄中單擊（圖像）按鈕或?qū)⑵渫蟿?dòng)到文檔中。文檔中。 在【文件】面板中選中圖像并拖動(dòng)到文檔中。在【文件】面板中選中圖像并拖動(dòng)到文檔中。 在【資源】面板中選中圖像并單擊【插入】按鈕或直接拖動(dòng)到文在【資源】面板中選中圖像并單擊【插入】按

11、鈕或直接拖動(dòng)到文檔中。檔中。4.3.2 插入PSD圖像作為作為AdobeAdobe家族的新成員，家族的新成員，Dreamweaver CS3Dreamweaver CS3可以無縫地與其他可以無縫地與其他程序進(jìn)行組合，這其中包括程序進(jìn)行組合，這其中包括PhotoshopPhotoshop。將圖像從一個(gè)程序移到另。將圖像從一個(gè)程序移到另一個(gè)程序的方法有很多，最直接的方法就是在一個(gè)程序的方法有很多，最直接的方法就是在Dreamweaver CS3Dreamweaver CS3中中打開一個(gè)原始的打開一個(gè)原始的Photoshop PSDPhotoshop PSD文件。作為源文件，文件。作為源文件，Pho

12、toshop PSDPhotoshop PSD文件不能用于網(wǎng)頁。但是，當(dāng)選擇文件不能用于網(wǎng)頁。但是，當(dāng)選擇PSDPSD文件時(shí)，文件時(shí)，Dreamweaver CS3Dreamweaver CS3會會自動(dòng)呈現(xiàn)出【圖像預(yù)覽】對話框，以創(chuàng)建一個(gè)準(zhǔn)備用于自動(dòng)呈現(xiàn)出【圖像預(yù)覽】對話框，以創(chuàng)建一個(gè)準(zhǔn)備用于WebWeb的圖像。的圖像。4.3.2 插入PSD圖像4.3.3 插入圖像占位符在網(wǎng)頁中插入圖像，這些圖像通常是事先準(zhǔn)備好的。如果在網(wǎng)在網(wǎng)頁中插入圖像，這些圖像通常是事先準(zhǔn)備好的。如果在網(wǎng)頁制作過程中，需要插入的圖像當(dāng)時(shí)又沒有，怎么辦呢？此時(shí)，可頁制作過程中，需要插入的圖像當(dāng)時(shí)又沒有，怎么辦呢？此時(shí)，可以

13、臨時(shí)插入一個(gè)圖像占位符，把這塊空間臨時(shí)占著，等到有了合適以臨時(shí)插入一個(gè)圖像占位符，把這塊空間臨時(shí)占著，等到有了合適的圖像后再進(jìn)行更換。的圖像后再進(jìn)行更換。選擇【插入記錄】【圖像對象】【圖像占位符】命令，或選擇【插入記錄】【圖像對象】【圖像占位符】命令，或在【插入】【常用】面板的【圖像】下拉按鈕組中單擊在【插入】【常用】面板的【圖像】下拉按鈕組中單擊 （圖像（圖像占位符）按鈕，打開【圖像占位符】對話框。占位符）按鈕，打開【圖像占位符】對話框。4.4 設(shè)置圖像屬性認(rèn)識圖像【屬性】面板認(rèn)識圖像【屬性】面板設(shè)置替換文本設(shè)置替換文本設(shè)置圖像大小設(shè)置圖像大小 設(shè)置對齊方式設(shè)置對齊方式邊距和邊框邊距和邊框

14、低解析度源低解析度源 4.4.1 認(rèn)識圖像【屬性】面板選中圖像，將顯示圖像【屬性】面板。在【屬性】面板中，可以設(shè)置選中圖像，將顯示圖像【屬性】面板。在【屬性】面板中，可以設(shè)置圖像名稱、大小、替換文本、邊距、邊框、圖文混排方式等。圖像名稱、大小、替換文本、邊距、邊框、圖文混排方式等。4.4.2 設(shè)置替換文本在瀏覽網(wǎng)頁時(shí)，將鼠標(biāo)指針放在圖像上，有時(shí)會出現(xiàn)一些提示文本，在瀏覽網(wǎng)頁時(shí)，將鼠標(biāo)指針放在圖像上，有時(shí)會出現(xiàn)一些提示文本，這些文本就是替換文本。當(dāng)圖像不能正常顯示或沒有下載完時(shí)，這些替這些文本就是替換文本。當(dāng)圖像不能正常顯示或沒有下載完時(shí)，這些替換文本也會出現(xiàn)在圖像的位置，瀏覽者可以通過替換文本

15、了解圖像的信換文本也會出現(xiàn)在圖像的位置，瀏覽者可以通過替換文本了解圖像的信息?？梢酝ㄟ^【圖像標(biāo)簽輔助功能屬性】對話框添加替換文本，也可以息。可以通過【圖像標(biāo)簽輔助功能屬性】對話框添加替換文本，也可以選中圖像，在【屬性】面板的【替換】文本框內(nèi)添加替換文本。當(dāng)圖像選中圖像，在【屬性】面板的【替換】文本框內(nèi)添加替換文本。當(dāng)圖像在網(wǎng)頁中不能正常顯示時(shí)，在圖像位置上會顯示出替換文本，而且當(dāng)鼠在網(wǎng)頁中不能正常顯示時(shí)，在圖像位置上會顯示出替換文本，而且當(dāng)鼠標(biāo)經(jīng)過圖像時(shí)，會浮現(xiàn)包含替換文本的信息框標(biāo)經(jīng)過圖像時(shí)，會浮現(xiàn)包含替換文本的信息框4.4.3 設(shè)置圖像大小設(shè)置圖像的大小通常有兩種方法。設(shè)置圖像的大小通常有

16、兩種方法。 選中圖像，在【屬性】面板的【寬】和【高】文本框中輸入數(shù)選中圖像，在【屬性】面板的【寬】和【高】文本框中輸入數(shù)值。值。 使用鼠標(biāo)選中圖像，然后通過拖動(dòng)圖像上的控制句柄來調(diào)整圖使用鼠標(biāo)選中圖像，然后通過拖動(dòng)圖像上的控制句柄來調(diào)整圖像的大小。拖動(dòng)右側(cè)的句柄可以改變圖像的寬度，拖動(dòng)下方的句柄可以像的大小。拖動(dòng)右側(cè)的句柄可以改變圖像的寬度，拖動(dòng)下方的句柄可以改變圖像的高度，拖動(dòng)右下角的句柄可以同時(shí)改變圖像的寬度和高度。改變圖像的高度，拖動(dòng)右下角的句柄可以同時(shí)改變圖像的寬度和高度。一旦圖像的寬度和高度發(fā)生變化，【屬性】面板的【寬】和【高】文本一旦圖像的寬度和高度發(fā)生變化，【屬性】面板的【寬】和

17、【高】文本框中的數(shù)字也會立即發(fā)生變化，并且以粗體顯示。而且在【寬】和【高】框中的數(shù)字也會立即發(fā)生變化，并且以粗體顯示。而且在【寬】和【高】文本框的后面出現(xiàn)了文本框的后面出現(xiàn)了 按鈕，單擊之將恢復(fù)圖像原來的大小。按鈕，單擊之將恢復(fù)圖像原來的大小。4.4.4 設(shè)置對齊方式在圖文混排的文檔中，如何正確處理圖像與相鄰元素的相對位置顯在圖文混排的文檔中，如何正確處理圖像與相鄰元素的相對位置顯得非常重要，如果處理不好，將直接影響頁面的美觀。得非常重要，如果處理不好，將直接影響頁面的美觀。由于插入的圖像占用了由于插入的圖像占用了1 1行，使第行，使第1 1行的行高增大，因此文本不能頂行的行高增大，因此文本不

18、能頂頭排列，變得很不整齊。那么如何能改變一下文本的排列方式，使其和頭排列，變得很不整齊。那么如何能改變一下文本的排列方式，使其和圖像緊湊地排列呢？其實(shí)方法很簡單，選中圖像，然后在【屬性】面板圖像緊湊地排列呢？其實(shí)方法很簡單，選中圖像，然后在【屬性】面板的【對齊】下拉列表中選擇【左對齊】選項(xiàng)即可。此時(shí)所選擇的圖像靠的【對齊】下拉列表中選擇【左對齊】選項(xiàng)即可。此時(shí)所選擇的圖像靠左邊界對齊，文本在右邊向左圍繞著圖像排列。左邊界對齊，文本在右邊向左圍繞著圖像排列。4.4.5 邊距和邊框可以通過設(shè)置圖像邊距的方法，控制圖像與其他文本或?qū)ο蟮木嚯x，可以通過設(shè)置圖像邊距的方法，控制圖像與其他文本或?qū)ο蟮木嚯x

19、，還可以給圖像添加邊框，設(shè)置邊框的粗細(xì)。方法是，首先選中圖像，然還可以給圖像添加邊框，設(shè)置邊框的粗細(xì)。方法是，首先選中圖像，然后在【屬性】面板的【垂直邊距】、【水平邊距】和【邊框】文本框中后在【屬性】面板的【垂直邊距】、【水平邊距】和【邊框】文本框中輸入具體數(shù)值即可。輸入具體數(shù)值即可。4.4.6 低解析度源低解析度源可以用來指定在載入主圖像之前應(yīng)該載入的圖像，這個(gè)低解析度源可以用來指定在載入主圖像之前應(yīng)該載入的圖像，這個(gè)圖像文件很小，一般只包括黑白兩色，因?yàn)樗梢匝杆佥d入，讓訪問者圖像文件很小，一般只包括黑白兩色，因?yàn)樗梢匝杆佥d入，讓訪問者對等待的內(nèi)容事先的所了解，以決定是否再繼續(xù)等待。在使

20、用該選項(xiàng)前，對等待的內(nèi)容事先的所了解，以決定是否再繼續(xù)等待。在使用該選項(xiàng)前，需要通過圖像處理軟件事先將低解析度圖像做好，然后再通過圖像【屬需要通過圖像處理軟件事先將低解析度圖像做好，然后再通過圖像【屬性】面板的【低解析度源】選項(xiàng)進(jìn)行設(shè)置。不過，如果確實(shí)沒有必要，性】面板的【低解析度源】選項(xiàng)進(jìn)行設(shè)置。不過，如果確實(shí)沒有必要，一般不推薦使用這種方式，因?yàn)橛中枰嘞螺d一張圖像，實(shí)際上增加了一般不推薦使用這種方式，因?yàn)橛中枰嘞螺d一張圖像，實(shí)際上增加了網(wǎng)絡(luò)負(fù)擔(dān)。網(wǎng)絡(luò)負(fù)擔(dān)。4.5 創(chuàng)建網(wǎng)站相冊創(chuàng)建網(wǎng)站相冊的過程就是批處理大量圖像的過程，是通過創(chuàng)建網(wǎng)站相冊的過程就是批處理大量圖像的過程，是通過JavaScriptJavaScript調(diào)用調(diào)用FireworksFireworks來完成的。前提是要確定待處理的圖像是否來完成的。前提是要確定待處理的圖像是否統(tǒng) 一 放 在 一 個(gè) 文 件 夾 里 面 ，