![第4章 使用圖像課件_第1頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/21/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f8/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f81.gif)
![第4章 使用圖像課件_第2頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/21/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f8/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f82.gif)
![第4章 使用圖像課件_第3頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/21/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f8/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f83.gif)
![第4章 使用圖像課件_第4頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/21/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f8/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f84.gif)
![第4章 使用圖像課件_第5頁](http://file3.renrendoc.com/fileroot_temp3/2022-1/21/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f8/5d1300ca-6ee4-4e6c-9404-79f3e9c8f6f85.gif)
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
1、 圖像與文本一樣,是網(wǎng)頁制作中不可圖像與文本一樣,是網(wǎng)頁制作中不可缺少的重要元素。使用圖像不僅可以美化缺少的重要元素。使用圖像不僅可以美化網(wǎng)頁,還可以幫助表述網(wǎng)頁主題。絢麗的網(wǎng)頁,還可以幫助表述網(wǎ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)點主要有以下幾點。圖像格式的優(yōu)點主要有以下幾點。最大支持最大支持256色,圖像在大多數(shù)瀏覽器中都能正常顯示。色,圖像在大多數(shù)瀏覽器中都能正
3、常顯示。圖像使用顏色少,壓縮效率高,文件的尺寸較小。圖像使用顏色少,壓縮效率高,文件的尺寸較小。GIF格式的圖像支持格式的圖像支持1bit透明度,可以制作背景透明的文透明度,可以制作背景透明的文字或圖像。字或圖像??梢詫⒖梢詫IF格式的圖像制作成動畫格式的圖像制作成動畫GIF??梢詫梢詫IF文件交錯下載,在下載過程中即可呈現(xiàn)圖像內(nèi)文件交錯下載,在下載過程中即可呈現(xiàn)圖像內(nèi)容。容。4.1網(wǎng)頁圖像格式GIF圖像格式的缺點主要有以下幾點。圖像格式的缺點主要有以下幾點。最大支持最大支持256色,不適合于有暈光、漸變色彩等顏色,不適合于有暈光、漸變色彩等顏色細(xì)膩的圖像和照片。色細(xì)膩的圖像和照片。保存
4、為保存為GIF格式后,不能通過直接打開來編輯圖像。格式后,不能通過直接打開來編輯圖像。如果確實需要編輯如果確實需要編輯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)點主要有圖像格式的優(yōu)點主要有以下幾點。以下幾點。支持支持24位圖像,能夠很好地表現(xiàn)照片等全彩色的圖位圖像,能夠很好地表現(xiàn)照片等全彩色的圖像。像??梢陨深愃瓶梢陨深愃艷IF的
5、交錯關(guān)聯(lián)圖像的交錯關(guān)聯(lián)圖像漸變漸變JPEG。4.1網(wǎng)頁圖像格式JPEG圖像格式的缺點主要有以下幾點。圖像格式的缺點主要有以下幾點。有損壓縮使之不適合表達(dá)高清晰度的圖像。有損壓縮使之不適合表達(dá)高清晰度的圖像。最高只能以最高只能以256色顯示的用戶可能無法觀看色顯示的用戶可能無法觀看JPEG圖像。圖像。當(dāng)圖像中包含當(dāng)圖像中包含“fine”字體時,應(yīng)避免使用字體時,應(yīng)避免使用JPEG格格式,在該字體與純顏色重疊的輪廓區(qū)域會出現(xiàn)模糊的痕跡。式,在該字體與純顏色重疊的輪廓區(qū)域會出現(xiàn)模糊的痕跡。采用采用JPEG格式對圖像進(jìn)行壓縮后,不能直接打開格式對圖像進(jìn)行壓縮后,不能直接打開圖像對它重新編輯、壓縮。如果
6、確實需要重新編輯,應(yīng)打圖像對它重新編輯、壓縮。如果確實需要重新編輯,應(yīng)打開最初的開最初的24位圖像文件,編輯后再保存為位圖像文件,編輯后再保存為JPEG格式。格式。4.1網(wǎng)頁圖像格式三、三、PNG圖像圖像PNG格式(格式(Portable Network Graphics,便攜式網(wǎng)絡(luò),便攜式網(wǎng)絡(luò)圖像,文件擴(kuò)展名為圖像,文件擴(kuò)展名為“.png”)是最近使用量逐漸增多的)是最近使用量逐漸增多的圖像格式,該格式圖像的優(yōu)點是,在壓縮方面能夠像圖像格式,該格式圖像的優(yōu)點是,在壓縮方面能夠像GIF格式的圖像一樣沒有壓縮上的損失,并能像格式的圖像一樣沒有壓縮上的損失,并能像JPEG那樣呈那樣呈現(xiàn)更多的顏色。
7、而且現(xiàn)更多的顏色。而且PNG格式也提供了一種隔行顯示方案,格式也提供了一種隔行顯示方案,在顯示速度上比在顯示速度上比GIF和和JPEG更快一些。同時更快一些。同時PNG格式圖格式圖像又具有像又具有JPEG格式圖像沒有的透明度支持能力。不過格式圖像沒有的透明度支持能力。不過PNG格式圖像還沒有普及到所有的瀏覽器,但在未來它有格式圖像還沒有普及到所有的瀏覽器,但在未來它有可能是一種非常受歡迎的圖像格式??赡苁且环N非常受歡迎的圖像格式。4.1網(wǎng)頁圖像格式四、四、GIF和和JPEG兩種格式圖像的區(qū)別兩種格式圖像的區(qū)別雖然雖然GIF和和JPEG兩種格式的圖像在網(wǎng)頁中可以同時使用,但兩種格式的圖像在網(wǎng)頁中
8、可以同時使用,但還是有區(qū)別的。還是有區(qū)別的。GIF適用于純顏色、向量式、少于適用于純顏色、向量式、少于256色的圖像,而色的圖像,而JPEG在應(yīng)用于純色的插圖時遜色于在應(yīng)用于純色的插圖時遜色于GIF。GIF是制作透明圖像和動畫的首選格式。是制作透明圖像和動畫的首選格式。JPEG適用于有漸變色、顏色細(xì)膩的圖像,如照片、油畫等,適用于有漸變色、顏色細(xì)膩的圖像,如照片、油畫等,而而GIF在這方面遜色于在這方面遜色于JPEG,如圖,如圖4-2所示。所示。在實際操作過程中不但應(yīng)遵循以上原則,反復(fù)對輸出圖像的在實際操作過程中不但應(yīng)遵循以上原則,反復(fù)對輸出圖像的格式、大小、壓縮比等進(jìn)行比較,還要把圖像的下載
9、速度、顯示格式、大小、壓縮比等進(jìn)行比較,還要把圖像的下載速度、顯示器的分辨率等各種因素考慮進(jìn)去,選擇最佳方案。器的分辨率等各種因素考慮進(jìn)去,選擇最佳方案。4.2設(shè)置網(wǎng)頁背景在制作網(wǎng)頁的時候,頁面要經(jīng)常使用一些圖像來裝飾,使其在制作網(wǎng)頁的時候,頁面要經(jīng)常使用一些圖像來裝飾,使其更美觀。其中方法之一就是設(shè)置網(wǎng)頁背景,包括背景顏色和背景更美觀。其中方法之一就是設(shè)置網(wǎng)頁背景,包括背景顏色和背景圖像。選擇【修改】【頁面屬性】命令,打開【頁面屬性】對圖像。選擇【修改】【頁面屬性】命令,打開【頁面屬性】對話框,設(shè)置【背景圖像】和【背景顏色】。話框,設(shè)置【背景圖像】和【背景顏色】。4.3 插入圖像插入插入GI
10、F圖像圖像插入插入PSD圖像圖像 插入圖像占位符插入圖像占位符4.3.1 插入GIF圖像在在Dreamweaver CS3Dreamweaver CS3中插入圖像,通??梢允褂靡韵路椒?。中插入圖像,通常可以使用以下方法。 選擇【插入記錄】選擇【插入記錄】/ /【圖像】命令?!緢D像】命令。 在【插入】在【插入】/ /【常用】工具欄中單擊(圖像)按鈕或?qū)⑵渫蟿拥健境S谩抗ぞ邫谥袉螕簦▓D像)按鈕或?qū)⑵渫蟿拥轿臋n中。文檔中。 在【文件】面板中選中圖像并拖動到文檔中。在【文件】面板中選中圖像并拖動到文檔中。 在【資源】面板中選中圖像并單擊【插入】按鈕或直接拖動到文在【資源】面板中選中圖像并單擊【插入】按
11、鈕或直接拖動到文檔中。檔中。4.3.2 插入PSD圖像作為作為AdobeAdobe家族的新成員,家族的新成員,Dreamweaver CS3Dreamweaver CS3可以無縫地與其他可以無縫地與其他程序進(jìn)行組合,這其中包括程序進(jìn)行組合,這其中包括PhotoshopPhotoshop。將圖像從一個程序移到另。將圖像從一個程序移到另一個程序的方法有很多,最直接的方法就是在一個程序的方法有很多,最直接的方法就是在Dreamweaver CS3Dreamweaver CS3中中打開一個原始的打開一個原始的Photoshop PSDPhotoshop PSD文件。作為源文件,文件。作為源文件,Pho
12、toshop PSDPhotoshop PSD文件不能用于網(wǎng)頁。但是,當(dāng)選擇文件不能用于網(wǎng)頁。但是,當(dāng)選擇PSDPSD文件時,文件時,Dreamweaver CS3Dreamweaver CS3會會自動呈現(xiàn)出【圖像預(yù)覽】對話框,以創(chuàng)建一個準(zhǔn)備用于自動呈現(xiàn)出【圖像預(yù)覽】對話框,以創(chuàng)建一個準(zhǔn)備用于WebWeb的圖像。的圖像。4.3.2 插入PSD圖像4.3.3 插入圖像占位符在網(wǎng)頁中插入圖像,這些圖像通常是事先準(zhǔn)備好的。如果在網(wǎng)在網(wǎng)頁中插入圖像,這些圖像通常是事先準(zhǔn)備好的。如果在網(wǎng)頁制作過程中,需要插入的圖像當(dāng)時又沒有,怎么辦呢?此時,可頁制作過程中,需要插入的圖像當(dāng)時又沒有,怎么辦呢?此時,可以
13、臨時插入一個圖像占位符,把這塊空間臨時占著,等到有了合適以臨時插入一個圖像占位符,把這塊空間臨時占著,等到有了合適的圖像后再進(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)頁時,將鼠標(biāo)指針放在圖像上,有時會出現(xiàn)一些提示文本,在瀏覽網(wǎng)頁時,將鼠標(biāo)指針放在圖像上,有時會出現(xiàn)一些提示文本,這些文本就是替換文本。當(dāng)圖像不能正常顯示或沒有下載完時,這些替這些文本就是替換文本。當(dāng)圖像不能正常顯示或沒有下載完時,這些替換文本也會出現(xiàn)在圖像的位置,瀏覽者可以通過替換文本
15、了解圖像的信換文本也會出現(xiàn)在圖像的位置,瀏覽者可以通過替換文本了解圖像的信息??梢酝ㄟ^【圖像標(biāo)簽輔助功能屬性】對話框添加替換文本,也可以息。可以通過【圖像標(biāo)簽輔助功能屬性】對話框添加替換文本,也可以選中圖像,在【屬性】面板的【替換】文本框內(nèi)添加替換文本。當(dāng)圖像選中圖像,在【屬性】面板的【替換】文本框內(nèi)添加替換文本。當(dāng)圖像在網(wǎng)頁中不能正常顯示時,在圖像位置上會顯示出替換文本,而且當(dāng)鼠在網(wǎng)頁中不能正常顯示時,在圖像位置上會顯示出替換文本,而且當(dāng)鼠標(biāo)經(jīng)過圖像時,會浮現(xiàn)包含替換文本的信息框標(biāo)經(jīng)過圖像時,會浮現(xiàn)包含替換文本的信息框4.4.3 設(shè)置圖像大小設(shè)置圖像的大小通常有兩種方法。設(shè)置圖像的大小通常有
16、兩種方法。 選中圖像,在【屬性】面板的【寬】和【高】文本框中輸入數(shù)選中圖像,在【屬性】面板的【寬】和【高】文本框中輸入數(shù)值。值。 使用鼠標(biāo)選中圖像,然后通過拖動圖像上的控制句柄來調(diào)整圖使用鼠標(biāo)選中圖像,然后通過拖動圖像上的控制句柄來調(diào)整圖像的大小。拖動右側(cè)的句柄可以改變圖像的寬度,拖動下方的句柄可以像的大小。拖動右側(cè)的句柄可以改變圖像的寬度,拖動下方的句柄可以改變圖像的高度,拖動右下角的句柄可以同時改變圖像的寬度和高度。改變圖像的高度,拖動右下角的句柄可以同時改變圖像的寬度和高度。一旦圖像的寬度和高度發(fā)生變化,【屬性】面板的【寬】和【高】文本一旦圖像的寬度和高度發(fā)生變化,【屬性】面板的【寬】和
17、【高】文本框中的數(shù)字也會立即發(fā)生變化,并且以粗體顯示。而且在【寬】和【高】框中的數(shù)字也會立即發(fā)生變化,并且以粗體顯示。而且在【寬】和【高】文本框的后面出現(xiàn)了文本框的后面出現(xiàn)了 按鈕,單擊之將恢復(fù)圖像原來的大小。按鈕,單擊之將恢復(fù)圖像原來的大小。4.4.4 設(shè)置對齊方式在圖文混排的文檔中,如何正確處理圖像與相鄰元素的相對位置顯在圖文混排的文檔中,如何正確處理圖像與相鄰元素的相對位置顯得非常重要,如果處理不好,將直接影響頁面的美觀。得非常重要,如果處理不好,將直接影響頁面的美觀。由于插入的圖像占用了由于插入的圖像占用了1 1行,使第行,使第1 1行的行高增大,因此文本不能頂行的行高增大,因此文本不
18、能頂頭排列,變得很不整齊。那么如何能改變一下文本的排列方式,使其和頭排列,變得很不整齊。那么如何能改變一下文本的排列方式,使其和圖像緊湊地排列呢?其實方法很簡單,選中圖像,然后在【屬性】面板圖像緊湊地排列呢?其實方法很簡單,選中圖像,然后在【屬性】面板的【對齊】下拉列表中選擇【左對齊】選項即可。此時所選擇的圖像靠的【對齊】下拉列表中選擇【左對齊】選項即可。此時所選擇的圖像靠左邊界對齊,文本在右邊向左圍繞著圖像排列。左邊界對齊,文本在右邊向左圍繞著圖像排列。4.4.5 邊距和邊框可以通過設(shè)置圖像邊距的方法,控制圖像與其他文本或?qū)ο蟮木嚯x,可以通過設(shè)置圖像邊距的方法,控制圖像與其他文本或?qū)ο蟮木嚯x
19、,還可以給圖像添加邊框,設(shè)置邊框的粗細(xì)。方法是,首先選中圖像,然還可以給圖像添加邊框,設(shè)置邊框的粗細(xì)。方法是,首先選中圖像,然后在【屬性】面板的【垂直邊距】、【水平邊距】和【邊框】文本框中后在【屬性】面板的【垂直邊距】、【水平邊距】和【邊框】文本框中輸入具體數(shù)值即可。輸入具體數(shù)值即可。4.4.6 低解析度源低解析度源可以用來指定在載入主圖像之前應(yīng)該載入的圖像,這個低解析度源可以用來指定在載入主圖像之前應(yīng)該載入的圖像,這個圖像文件很小,一般只包括黑白兩色,因為它可以迅速載入,讓訪問者圖像文件很小,一般只包括黑白兩色,因為它可以迅速載入,讓訪問者對等待的內(nèi)容事先的所了解,以決定是否再繼續(xù)等待。在使
20、用該選項前,對等待的內(nèi)容事先的所了解,以決定是否再繼續(xù)等待。在使用該選項前,需要通過圖像處理軟件事先將低解析度圖像做好,然后再通過圖像【屬需要通過圖像處理軟件事先將低解析度圖像做好,然后再通過圖像【屬性】面板的【低解析度源】選項進(jìn)行設(shè)置。不過,如果確實沒有必要,性】面板的【低解析度源】選項進(jìn)行設(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) 一 放 在 一 個 文 件 夾 里 面 ,
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度新能源開發(fā)用地承包經(jīng)營合同模板
- 2025年企業(yè)間合資經(jīng)營合同范本
- 如何設(shè)定可達(dá)成的財務(wù)目標(biāo)計劃
- 2025年鈷粉系列項目合作計劃書
- 強化小學(xué)生的公平公正計劃
- 幼兒園國際交流活動策劃計劃
- 注重班級文化融合的必要性計劃
- 圖書目錄員的工作計劃
- 藝術(shù)教育與演藝技巧社團(tuán)工作計劃
- 提升工作效率的年度策略探討計劃
- 綜合實踐項目 制作細(xì)胞模型 教學(xué)設(shè)計-2024-2025學(xué)年人教版生物七年級上冊
- 煤礦安全生產(chǎn)知識培訓(xùn)考試題庫(800題)
- 青島版二年級數(shù)學(xué)下冊課程綱要
- 幼兒園2024-2025學(xué)年第二學(xué)期園務(wù)工作計劃
- 經(jīng)濟(jì)法律法規(guī)基礎(chǔ)知識單選題100道及答案
- 新蘇教版三年級科學(xué)下冊全冊課件【全套】
- 2024-2030年中國精細(xì)化工行業(yè)發(fā)展分析及發(fā)展前景與投資研究報告
- 2024年北京市中考數(shù)學(xué)試卷(含答案解析)
- 河南省2024年中考英語真題【附真題答案】
- 2024公路工程施工安全風(fēng)險辨識與管控實施指南
- 浙江省嘉興市2023-2024學(xué)年高一上學(xué)期1月期末考試政治試題
評論
0/150
提交評論