通過本章學習,應該掌握以下內(nèi)容

1、 通過本章學習，應該掌握以下內(nèi)容：通過本章學習，應該掌握以下內(nèi)容： 1. 能夠選擇合適的網(wǎng)頁顏色能夠選擇合適的網(wǎng)頁顏色 2. 解網(wǎng)頁圖像的基本格式解網(wǎng)頁圖像的基本格式 3. 掌握使用網(wǎng)頁圖像的要點掌握使用網(wǎng)頁圖像的要點 4. 在網(wǎng)頁中插入圖像的方法在網(wǎng)頁中插入圖像的方法 5. 圖像屬性的設置圖像屬性的設置 6. 調(diào)整圖像的大小及位置調(diào)整圖像的大小及位置5.1 利用利用dreamweaver mx編輯圖像編輯圖像 5.1.1 網(wǎng)頁中的顏色網(wǎng)頁中的顏色 在網(wǎng)頁中是以在網(wǎng)頁中是以rgb方式來表示顏色的，方式來表示顏色的，rgb顏顏色包括幾百萬種之多，這么多的顏色卻有一個共同點，色包括幾百萬種之多，這

2、么多的顏色卻有一個共同點，都是由紅、綠、藍這三種基色調(diào)混和而成的，都是由紅、綠、藍這三種基色調(diào)混和而成的，rgb其實就是其實就是red、green、blue的縮寫。的縮寫。 這三種基色中每一種顏色的飽和度和透明度都是這三種基色中每一種顏色的飽和度和透明度都是可以變化的，用可以變化的，用0（表示最弱）（表示最弱）255（表示最強）的（表示最強）的數(shù)值來表示。例如純紅色表示為：數(shù)值來表示。例如純紅色表示為：red 50%、green 0%、blue 0%，簡單的表示法為（，簡單的表示法為（255，0，0），用），用十六進制數(shù)來表示的話就變成了十六進制數(shù)來表示的話就變成了“ff0000”。 在網(wǎng)頁中

3、運用色彩一般應遵循下列幾個原則在網(wǎng)頁中運用色彩一般應遵循下列幾個原則:（1 1）一個頁面中切忌采用過多的顏色，否則會給人一）一個頁面中切忌采用過多的顏色，否則會給人一種繁雜的感覺，也烘托不了網(wǎng)頁的主題，因此一種風種繁雜的感覺，也烘托不了網(wǎng)頁的主題，因此一種風格的網(wǎng)頁選用顏色一般不要超過三四種。格的網(wǎng)頁選用顏色一般不要超過三四種。（2 2）背景的顏色不要太深，顯得過于厚重，因為這樣）背景的顏色不要太深，顯得過于厚重，因為這樣會影響整個頁面的顯示效果。但也有例外，黑色的背會影響整個頁面的顯示效果。但也有例外，黑色的背景襯托出亮麗的文本和圖像，會給人一種另類的感覺。景襯托出亮麗的文本和圖像，會給人一

4、種另類的感覺。（3 3）要保持整個網(wǎng)頁的色調(diào)統(tǒng)一。）要保持整個網(wǎng)頁的色調(diào)統(tǒng)一。（4 4）要圍繞網(wǎng)頁的主題選擇顏色，色彩要能烘托出主）要圍繞網(wǎng)頁的主題選擇顏色，色彩要能烘托出主題。題。5.1.2 圖像格式圖像格式 gif gif格式（格式（graphics interchange format graphics interchange format 圖圖像交換格式）采用無損壓縮（所謂無損壓縮是指像交換格式）采用無損壓縮（所謂無損壓縮是指在壓縮過程中圖像的質(zhì)量不會丟失）算法進行圖在壓縮過程中圖像的質(zhì)量不會丟失）算法進行圖像的壓縮處理，是目前在網(wǎng)頁設計中使用最普遍、像的壓縮處理，是目前在網(wǎng)頁設計中使

5、用最普遍、最廣泛的一種圖像格式。最廣泛的一種圖像格式。 gif格式可以高度壓縮圖像格式可以高度壓縮圖像; gif格式支持圖像格式支持圖像游離在背景之上的視覺效果游離在背景之上的視覺效果; gif gif格式的圖像可以格式的圖像可以被交錯下載被交錯下載;可以將很多幅圖像結(jié)合在一個可以將很多幅圖像結(jié)合在一個gif文文件中。件中。 1gif格式格式 2jpeg格式格式 jpeg格式（格式（joint photo expert graphics，聯(lián)合，聯(lián)合圖形專家組圖片格式）是另一種在圖形專家組圖片格式）是另一種在web上應用廣泛的上應用廣泛的圖像格式。由于它支持的顏色數(shù)幾乎沒有限制，因此圖像格式。由

6、于它支持的顏色數(shù)幾乎沒有限制，因此適用于使用真彩色或平滑過渡色的照片和圖片。與適用于使用真彩色或平滑過渡色的照片和圖片。與gif格式采用無損壓縮不同，格式采用無損壓縮不同，jpeg格式使用有損壓格式使用有損壓縮來減小圖片文件的大小，因此用戶將看到隨著文件縮來減小圖片文件的大小，因此用戶將看到隨著文件的減小，圖片的質(zhì)量也降低了。的減小，圖片的質(zhì)量也降低了。 1.支持支持24位圖像，能夠很好地表現(xiàn)照片等全彩色的位圖像，能夠很好地表現(xiàn)照片等全彩色的圖像；圖像； 2. 可以生成類似可以生成類似gif格式的交錯關(guān)聯(lián)圖像格式的交錯關(guān)聯(lián)圖像漸變漸變jpeg； 3.可以制作透明可以制作透明jpeg圖像。圖像。

7、 jpeg格式圖像的優(yōu)點：格式圖像的優(yōu)點： 1. 有損壓縮使之不適合表達高清晰度的圖像：有損壓縮使之不適合表達高清晰度的圖像： 2. 最高只能以最高只能以256色顯示的用戶，可能無法觀看色顯示的用戶，可能無法觀看jpeg圖像；圖像； 3. 當圖像中包含當圖像中包含fine字體時應避免用字體時應避免用jpeg格式，在格式，在該字體與純顏色重疊的地方，該字體與純顏色重疊的地方，jpeg壓縮作品看上壓縮作品看上去只是一種外觀近似。去只是一種外觀近似。 4. 采用采用jpeg格式對圖像進行壓縮后，不能再重新打格式對圖像進行壓縮后，不能再重新打開圖像。開圖像。 5. jpeg格式不支持透明色，也沒有動畫

8、的概念。格式不支持透明色，也沒有動畫的概念。 jpeg格式圖像的缺點：格式圖像的缺點： png格式（格式（portable networks graphics，可，可移植的網(wǎng)絡圖形格式）是近年來新出現(xiàn)的一種圖像移植的網(wǎng)絡圖形格式）是近年來新出現(xiàn)的一種圖像格式，它適于任何類型、任何顏色深度的圖片。該格式，它適于任何類型、任何顏色深度的圖片。該格式用無損壓縮來減小圖片文件的大小，同時保留格式用無損壓縮來減小圖片文件的大小，同時保留圖片中的透明區(qū)域。此外，該格式是僅有的幾種支圖片中的透明區(qū)域。此外，該格式是僅有的幾種支持透明度概念的圖片格式之一（透明持透明度概念的圖片格式之一（透明gif的透明度的透

9、明度只能是只能是50%，但，但png格式可以是格式可以是0% 50%）。）。 3png格式格式 gif、jpeg、png這幾種格式都是標準的位這幾種格式都是標準的位圖格式，但現(xiàn)在圖格式，但現(xiàn)在web上還可以使用新的矢量格式。上還可以使用新的矢量格式。所謂位圖格式就是指用圖片上每一點的信息來描述所謂位圖格式就是指用圖片上每一點的信息來描述圖像，而矢量格式則是用線條和填充色等數(shù)學信息圖像，而矢量格式則是用線條和填充色等數(shù)學信息來描述圖像。相比而言，矢量格式的文件要比位圖來描述圖像。相比而言，矢量格式的文件要比位圖格式的文件小得多，但表現(xiàn)力絲毫不遜色。格式的文件小得多，但表現(xiàn)力絲毫不遜色。 除了表現(xiàn)

10、一般的靜態(tài)畫面以外，動畫是矢量除了表現(xiàn)一般的靜態(tài)畫面以外，動畫是矢量格式具有巨大優(yōu)勢的另一個領(lǐng)域。格式具有巨大優(yōu)勢的另一個領(lǐng)域。 4矢量格式矢量格式 在在web頁上顯示圖片之前，通常需要考慮下列三頁上顯示圖片之前，通常需要考慮下列三個問題：個問題： 確保文件較小；確保文件較?。?1）使圖像具有所需的像素大?。┦箞D像具有所需的像素大小 2）采用正確的格式進行優(yōu)化處理）采用正確的格式進行優(yōu)化處理 控制圖像的數(shù)量和質(zhì)量；控制圖像的數(shù)量和質(zhì)量； 合理使用動畫。合理使用動畫。 5.1.3 使用網(wǎng)頁圖像的要點使用網(wǎng)頁圖像的要點 在在dreamweaver中插入圖像非常簡單，具體操作中插入圖像非常簡單，具體

11、操作步驟如下：步驟如下： （1）打開網(wǎng)頁，將光標移到將要插入圖像的位置。）打開網(wǎng)頁，將光標移到將要插入圖像的位置。 （2）用下列）用下列3種方法中的任意一種方法，打開種方法中的任意一種方法，打開“選擇選擇圖像源圖像源”對話框，對話框，如圖所示如圖所示。在插入在插入“常用常用”面板中，單擊插入圖像按鈕。面板中，單擊插入圖像按鈕。直接拖曳插入直接拖曳插入“常用常用”面板中的插入圖像按鈕至頁面板中的插入圖像按鈕至頁面的光標處。面的光標處。 選擇選擇dreamweaver mx主菜單中的主菜單中的“插入插入”|“圖像圖像”命令。命令。 5.1.4 在網(wǎng)頁中插入圖像在網(wǎng)頁中插入圖像 1插入圖像插入圖像

12、（3）在對話框中選擇查找圖像文件的路徑，選中）在對話框中選擇查找圖像文件的路徑，選中“預預覽圖像覽圖像”復選框，選定圖像的預覽圖就顯示在對話復選框，選定圖像的預覽圖就顯示在對話框的右側(cè)?？虻挠覀?cè)。（4）如果文件存放在網(wǎng)站的目錄中，那么將）如果文件存放在網(wǎng)站的目錄中，那么將“相對于相對于”下拉列表調(diào)整到下拉列表調(diào)整到“文檔文檔”項。項。（5）然后單擊）然后單擊“確認確認”按鈕，圖像就插入到網(wǎng)頁中了。按鈕，圖像就插入到網(wǎng)頁中了。 在文檔中插入圖像后，用鼠標單擊圖像，圖像四在文檔中插入圖像后，用鼠標單擊圖像，圖像四周出現(xiàn)可編輯的縮放手柄，說明該圖像被選定。這時周出現(xiàn)可編輯的縮放手柄，說明該圖像被選定

13、。這時屬性面板中顯示出關(guān)于圖像的屬性信息，如圖所示。屬性面板中顯示出關(guān)于圖像的屬性信息，如圖所示。 2圖像屬性參數(shù)圖像屬性參數(shù) 圖像屬性面板的左上方有一個縮略圖，它的右邊圖像屬性面板的左上方有一個縮略圖，它的右邊是是“圖像圖像”字樣，字樣，“圖像圖像”的右邊是當前文件大小，的右邊是當前文件大小，下方的空格可以鍵入名稱，以便將來使用時好調(diào)用該下方的空格可以鍵入名稱，以便將來使用時好調(diào)用該文件。文件。 改變圖像的尺寸大小，可以通過在屬性面板中的改變圖像的尺寸大小，可以通過在屬性面板中的“寬寬”和和“高高”文本框中直接輸入數(shù)值來改變圖像的文本框中直接輸入數(shù)值來改變圖像的尺寸大小，當在網(wǎng)頁中需要精確地

14、定位元素時，這種尺寸大小，當在網(wǎng)頁中需要精確地定位元素時，這種方法可以幫助設計者達到預想的效果。不過這種方法方法可以幫助設計者達到預想的效果。不過這種方法有一個弊端，如果數(shù)值輸入不當，可能造成圖像在瀏有一個弊端，如果數(shù)值輸入不當，可能造成圖像在瀏覽器中無法正常顯示。此外，還可以通過拖放圖像四覽器中無法正常顯示。此外，還可以通過拖放圖像四周的縮放邊框來改變圖像的尺寸。周的縮放邊框來改變圖像的尺寸。 3改變圖像的尺寸改變圖像的尺寸 dreamweaver中調(diào)整圖像位置的方法很簡單，簡中調(diào)整圖像位置的方法很簡單，簡述如下：述如下： （1）選中頁面中要編輯的圖像；）選中頁面中要編輯的圖像； （2）打開

15、圖像屬性面板中的）打開圖像屬性面板中的“對齊對齊”下拉列表，在下拉列表，在列表中選擇需要的選項。列表中選擇需要的選項。 4調(diào)整圖像在網(wǎng)頁中的相對位置調(diào)整圖像在網(wǎng)頁中的相對位置 在頁面中合理地使用圖形圖像已經(jīng)成為網(wǎng)頁制作在頁面中合理地使用圖形圖像已經(jīng)成為網(wǎng)頁制作的一個基本要求。但是并非所有圖形圖像都可以直接的一個基本要求。但是并非所有圖形圖像都可以直接用在網(wǎng)頁中，大多數(shù)情況下，需要對原始圖像素材進用在網(wǎng)頁中，大多數(shù)情況下，需要對原始圖像素材進行一些處理，例如圖像優(yōu)化、添加特效等，然后再在行一些處理，例如圖像優(yōu)化、添加特效等，然后再在網(wǎng)頁中使用。要方便地完成相關(guān)的處理工作，則需要網(wǎng)頁中使用。要方便

16、地完成相關(guān)的處理工作，則需要圖形圖像處理軟件的協(xié)助。另外，對于具備創(chuàng)作才能圖形圖像處理軟件的協(xié)助。另外，對于具備創(chuàng)作才能的網(wǎng)頁制作者來說，也可以直接使用圖形圖像處理軟的網(wǎng)頁制作者來說，也可以直接使用圖形圖像處理軟件創(chuàng)作出適合件創(chuàng)作出適合web的作品。的作品。 5編輯圖像編輯圖像 改變網(wǎng)頁背景的狀態(tài)可以通過兩種方法來實現(xiàn)，改變網(wǎng)頁背景的狀態(tài)可以通過兩種方法來實現(xiàn)，一種是設置背景顏色，通常是在網(wǎng)頁安全顏色范疇之一種是設置背景顏色，通常是在網(wǎng)頁安全顏色范疇之內(nèi)選擇；另一種是設置背景圖像，但不是所有的圖像內(nèi)選擇；另一種是設置背景圖像，但不是所有的圖像都可以做背景。都可以做背景。 1設置網(wǎng)頁背景顏色設置

17、網(wǎng)頁背景顏色 設置網(wǎng)頁背景色在頁面屬性對話框里設置設置網(wǎng)頁背景色在頁面屬性對話框里設置 。 2設置背景圖像設置背景圖像 設置網(wǎng)頁背景色，只能得到單一顏色的背景。如何設置網(wǎng)頁背景色，只能得到單一顏色的背景。如何能使背景發(fā)生更多的變化，這就需要設置網(wǎng)頁的背景能使背景發(fā)生更多的變化，這就需要設置網(wǎng)頁的背景圖像。圖像。 5.1.5 設置網(wǎng)頁背景設置網(wǎng)頁背景 在瀏覽網(wǎng)頁時，可能會遇到下列情況。當圖像不在瀏覽網(wǎng)頁時，可能會遇到下列情況。當圖像不能被瀏覽器正常顯示時，圖像區(qū)變成了空白區(qū)域。能被瀏覽器正常顯示時，圖像區(qū)變成了空白區(qū)域。 利用利用dreamweaver中為圖像加文字說明的功能，中為圖像加文字說明

18、的功能，可使網(wǎng)頁中的圖像在不能被瀏覽器正常顯示時，以說可使網(wǎng)頁中的圖像在不能被瀏覽器正常顯示時，以說明文字代替，以幫助訪問者了解圖像的信息。明文字代替，以幫助訪問者了解圖像的信息。 5.1.6 在在dreamweaver mx中巧妙地處理圖像中巧妙地處理圖像 1給圖像加文字說明給圖像加文字說明2制作低分辨率圖像制作低分辨率圖像 低分辨率圖像是相對于高分辨率圖像而言的，高低分辨率圖像是相對于高分辨率圖像而言的，高分辨率圖像一般指的是圖像的色彩豐富逼真、壓縮比分辨率圖像一般指的是圖像的色彩豐富逼真、壓縮比較小的圖像，這種圖像文件容量比較大，瀏覽器要費較小的圖像，這種圖像文件容量比較大，瀏覽器要費很

19、長時間來下載。而低分辨率圖像包含的色彩少、壓很長時間來下載。而低分辨率圖像包含的色彩少、壓縮比較大，所以這種圖像文件容量較小，能夠較快地縮比較大，所以這種圖像文件容量較小，能夠較快地被瀏覽器下載。因此經(jīng)常要為高質(zhì)量、大尺寸的圖像被瀏覽器下載。因此經(jīng)常要為高質(zhì)量、大尺寸的圖像制作一個副本，這個副本圖像采用的是較低的分辨率，制作一個副本，這個副本圖像采用的是較低的分辨率，從而減小了文件的大小，縮短了圖像的下載時間。從而減小了文件的大小，縮短了圖像的下載時間。 3為圖像添加熱點為圖像添加熱點 熱點即圖像上不可見的區(qū)域，該區(qū)域分配了一個熱點即圖像上不可見的區(qū)域，該區(qū)域分配了一個超鏈接。為圖像添加熱點就

20、是在圖像上劃分區(qū)域，從超鏈接。為圖像添加熱點就是在圖像上劃分區(qū)域，從而設定圖像上制作超鏈接的范圍。而設定圖像上制作超鏈接的范圍。 在在dreamweaver中為圖像添加熱點的方法為：中為圖像添加熱點的方法為： （1）選定圖像，打開圖像屬性面板，選擇設置熱）選定圖像，打開圖像屬性面板，選擇設置熱點按鈕，單擊鼠標左鍵并拖動，在圖像中設置熱點形點按鈕，單擊鼠標左鍵并拖動，在圖像中設置熱點形狀。狀。 （2）在屬性面板中設置熱點的超鏈接。）在屬性面板中設置熱點的超鏈接。 5.2 利用利用html處理圖像處理圖像 在在html中，使用中，使用img標記符可以在網(wǎng)頁中加標記符可以在網(wǎng)頁中加入圖像。它具有兩個

21、基本屬性：入圖像。它具有兩個基本屬性：src和和alt，分別用，分別用于設置圖像文件的位置和替換文本。于設置圖像文件的位置和替換文本。 src表示要插入圖像的文件名，必須包含絕對表示要插入圖像的文件名，必須包含絕對路徑或相對路徑，圖像可以是路徑或相對路徑，圖像可以是gif文件、文件、jpeg文文件或件或png文件。文件。alt表示圖像的簡單文本說明，用表示圖像的簡單文本說明，用于不能顯示圖像的瀏覽器或瀏覽器能顯示圖像但于不能顯示圖像的瀏覽器或瀏覽器能顯示圖像但顯示時間過長時先顯示。顯示時間過長時先顯示。 5.2.1 插入圖像插入圖像 5.2.2 設置圖像屬性設置圖像屬性 在在htmlhtml中

22、，使用中，使用imgimg標記符的標記符的widthwidth和和heightheight屬性可以指定圖像的寬度和寬度，以告訴瀏覽器屬性可以指定圖像的寬度和寬度，以告訴瀏覽器webweb頁應分配給圖像多少空間（以像素為單位）。頁應分配給圖像多少空間（以像素為單位）。當瀏覽器解釋當瀏覽器解釋webweb頁時，在實際下載圖像之前會給頁時，在實際下載圖像之前會給圖像預留出空間，以避免在每個圖像下載時重新圖像預留出空間，以避免在每個圖像下載時重新繪制網(wǎng)頁，從而加快網(wǎng)頁的下載速度。繪制網(wǎng)頁，從而加快網(wǎng)頁的下載速度。widthwidth和和heightheight屬性的取值既可以是像素數(shù)，也可以是百屬性的取值既可以是像素數(shù)，也可以是百分數(shù)。分數(shù)。 1指定圖像的寬和高指定圖像的寬和高 2圖像的邊框圖像的邊框 使用使用img標記符的標記符的border屬性，可以給圖像屬性，可以給圖像添加邊框效果，邊框的取值是像素數(shù)。添加邊框效果，邊框的取值是像素數(shù)。 3設置圖像周圍的空白設置圖像周圍的空白 可以在可以在img標記符內(nèi)使用屬性標記符內(nèi)使用屬性hspace和和vspac