通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容

通過本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容：第5章網(wǎng)頁圖像的處理1.能夠選擇合適的網(wǎng)頁顏色2.解網(wǎng)頁圖像的基本格式3.掌握使用網(wǎng)頁圖像的要點4.在網(wǎng)頁中插入圖像的方法5.圖像屬性的設(shè)置6.調(diào)整圖像的大小及位置通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第1頁!5.1利用DreamweaverMX編輯圖像5.1.1網(wǎng)頁中的顏色在網(wǎng)頁中是以RGB方式來表示顏色的，RGB顏色包括幾百萬種之多，這么多的顏色卻有一個共同點，都是由紅、綠、藍(lán)這三種基色調(diào)混和而成的，RGB其實就是Red、Green、Blue的縮寫。這三種基色中每一種顏色的飽和度和透明度都是可以變化的，用0（表示最弱）~255（表示最強(qiáng)）的數(shù)值來表示。例如純紅色表示為：Red50%、Green0%、Blue0%，簡單的表示法為（255，0，0），用十六進(jìn)制數(shù)來表示的話就變成了“FF0000”。通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第2頁!在網(wǎng)頁中運(yùn)用色彩一般應(yīng)遵循下列幾個原則:（1）一個頁面中切忌采用過多的顏色，否則會給人一種繁雜的感覺，也烘托不了網(wǎng)頁的主題，因此一種風(fēng)格的網(wǎng)頁選用顏色一般不要超過三四種。（2）背景的顏色不要太深，顯得過于厚重，因為這樣會影響整個頁面的顯示效果。但也有例外，黑色的背景襯托出亮麗的文本和圖像，會給人一種另類的感覺。（3）要保持整個網(wǎng)頁的色調(diào)統(tǒng)一。（4）要圍繞網(wǎng)頁的主題選擇顏色，色彩要能烘托出主題。通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第3頁!5.1.2圖像格式

GIF格式（GraphicsInterchangeFormat圖像交換格式）采用無損壓縮（所謂無損壓縮是指在壓縮過程中圖像的質(zhì)量不會丟失）算法進(jìn)行圖像的壓縮處理，是目前在網(wǎng)頁設(shè)計中使用最普遍、最廣泛的一種圖像格式。GIF格式可以高度壓縮圖像;GIF格式支持圖像游離在背景之上的視覺效果;GIF格式的圖像可以被交錯下載;可以將很多幅圖像結(jié)合在一個GIF文件中。

1．GIF格式

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第4頁!1.支持24位圖像，能夠很好地表現(xiàn)照片等全彩色的圖像；2.可以生成類似GIF格式的交錯關(guān)聯(lián)圖像——漸變JPEG；3.可以制作透明JPEG圖像。JPEG格式圖像的優(yōu)點：

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第5頁!PNG格式（PortableNetworksGraphics，可移植的網(wǎng)絡(luò)圖形格式）是近年來新出現(xiàn)的一種圖像格式，它適于任何類型、任何顏色深度的圖片。該格式用無損壓縮來減小圖片文件的大小，同時保留圖片中的透明區(qū)域。此外，該格式是僅有的幾種支持透明度概念的圖片格式之一（透明GIF的透明度只能是50%，但PNG格式可以是0%~50%）。3．PNG格式

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第6頁!在Web頁上顯示圖片之前，通常需要考慮下列三個問題：①確保文件較小；1）使圖像具有所需的像素大小2）采用正確的格式進(jìn)行優(yōu)化處理②控制圖像的數(shù)量和質(zhì)量；③合理使用動畫。5.1.3使用網(wǎng)頁圖像的要點

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第7頁!（3）在對話框中選擇查找圖像文件的路徑，選中“預(yù)覽圖像”復(fù)選框，選定圖像的預(yù)覽圖就顯示在對話框的右側(cè)。（4）如果文件存放在網(wǎng)站的目錄中，那么將“相對于”下拉列表調(diào)整到“文檔”項。（5）然后單擊“確認(rèn)”按鈕，圖像就插入到網(wǎng)頁中了。通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第8頁!改變圖像的尺寸大小，可以通過在屬性面板中的“寬”和“高”文本框中直接輸入數(shù)值來改變圖像的尺寸大小，當(dāng)在網(wǎng)頁中需要精確地定位元素時，這種方法可以幫助設(shè)計者達(dá)到預(yù)想的效果。不過這種方法有一個弊端，如果數(shù)值輸入不當(dāng)，可能造成圖像在瀏覽器中無法正常顯示。此外，還可以通過拖放圖像四周的縮放邊框來改變圖像的尺寸。3．改變圖像的尺寸通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第9頁!在頁面中合理地使用圖形圖像已經(jīng)成為網(wǎng)頁制作的一個基本要求。但是并非所有圖形圖像都可以直接用在網(wǎng)頁中，大多數(shù)情況下，需要對原始圖像素材進(jìn)行一些處理，例如圖像優(yōu)化、添加特效等，然后再在網(wǎng)頁中使用。要方便地完成相關(guān)的處理工作，則需要圖形圖像處理軟件的協(xié)助。另外，對于具備創(chuàng)作才能的網(wǎng)頁制作者來說，也可以直接使用圖形圖像處理軟件創(chuàng)作出適合Web的作品。5．編輯圖像通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第10頁!在瀏覽網(wǎng)頁時，可能會遇到下列情況。當(dāng)圖像不能被瀏覽器正常顯示時，圖像區(qū)變成了空白區(qū)域。利用Dreamweaver中為圖像加文字說明的功能，可使網(wǎng)頁中的圖像在不能被瀏覽器正常顯示時，以說明文字代替，以幫助訪問者了解圖像的信息。5.1.6在DreamweaverMX中巧妙地處理圖像1．給圖像加文字說明通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第11頁!3．為圖像添加熱點熱點即圖像上不可見的區(qū)域，該區(qū)域分配了一個超鏈接。為圖像添加熱點就是在圖像上劃分區(qū)域，從而設(shè)定圖像上制作超鏈接的范圍。

在Dreamweaver中為圖像添加熱點的方法為：（1）選定圖像，打開圖像屬性面板，選擇設(shè)置熱點按鈕，單擊鼠標(biāo)左鍵并拖動，在圖像中設(shè)置熱點形狀。（2）在屬性面板中設(shè)置熱點的超鏈接。

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第12頁!5.2.2設(shè)置圖像屬性在HTML中，使用IMG標(biāo)記符的width和height屬性可以指定圖像的寬度和寬度，以告訴瀏覽器Web頁應(yīng)分配給圖像多少空間（以像素為單位）。當(dāng)瀏覽器解釋W(xué)eb頁時，在實際下載圖像之前會給圖像預(yù)留出空間，以避免在每個圖像下載時重新繪制網(wǎng)頁，從而加快網(wǎng)頁的下載速度。width和height屬性的取值既可以是像素數(shù)，也可以是百分?jǐn)?shù)。

1．指定圖像的寬和高通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第13頁!（1）圖像在頁面中的對齊設(shè)置圖像在頁面中的對齊與設(shè)置文本對齊類似，可以使用DIV或P標(biāo)記符將IMG標(biāo)記符括起來，然后使用align屬性。

（2）圖像與周圍內(nèi)容的垂直對齊使用IMG標(biāo)記符的align屬性，可以控制圖像與周圍內(nèi)容的垂直對齊。此時，align屬性的值可以是：

top

、

middle、bottom分別表示圖像與周圍內(nèi)容的頂部、中央、底部對齊。4．圖像的對齊

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第14頁!“選擇圖像源”對話框返回

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第15頁!2．JPEG格式

JPEG格式（JointPhotoExpertGraphics，聯(lián)合圖形專家組圖片格式）是另一種在Web上應(yīng)用廣泛的圖像格式。由于它支持的顏色數(shù)幾乎沒有限制，因此適用于使用真彩色或平滑過渡色的照片和圖片。與GIF格式采用無損壓縮不同，JPEG格式使用有損壓縮來減小圖片文件的大小，因此用戶將看到隨著文件的減小，圖片的質(zhì)量也降低了。通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第16頁!1.有損壓縮使之不適合表達(dá)高清晰度的圖像：2.最高只能以256色顯示的用戶，可能無法觀看JPEG圖像；3.當(dāng)圖像中包含fine字體時應(yīng)避免用JPEG格式，在該字體與純顏色重疊的地方，JPEG壓縮作品看上去只是一種外觀近似。4.采用JPEG格式對圖像進(jìn)行壓縮后，不能再重新打開圖像。5.JPEG格式不支持透明色，也沒有動畫的概念。JPEG格式圖像的缺點：

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第17頁!GIF、JPEG、PNG這幾種格式都是標(biāo)準(zhǔn)的位圖格式，但現(xiàn)在Web上還可以使用新的矢量格式。所謂位圖格式就是指用圖片上每一點的信息來描述圖像，而矢量格式則是用線條和填充色等數(shù)學(xué)信息來描述圖像。相比而言，矢量格式的文件要比位圖格式的文件小得多，但表現(xiàn)力絲毫不遜色。除了表現(xiàn)一般的靜態(tài)畫面以外，動畫是矢量格式具有巨大優(yōu)勢的另一個領(lǐng)域。4．矢量格式

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第18頁!在Dreamweaver中插入圖像非常簡單，具體操作步驟如下：（1）打開網(wǎng)頁，將光標(biāo)移到將要插入圖像的位置。（2）用下列3種方法中的任意一種方法，打開“選擇圖像源”對話框，如圖所示。在插入“常用”面板中，單擊插入圖像按鈕。直接拖曳插入“常用”面板中的插入圖像按鈕至頁面的光標(biāo)處。選擇DreamweaverMX主菜單中的“插入”|“圖像”命令。5.1.4在網(wǎng)頁中插入圖像

1．插入圖像

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第19頁!在文檔中插入圖像后，用鼠標(biāo)單擊圖像，圖像四周出現(xiàn)可編輯的縮放手柄，說明該圖像被選定。這時屬性面板中顯示出關(guān)于圖像的屬性信息，如圖所示。2．圖像屬性參數(shù)圖像屬性面板的左上方有一個縮略圖，它的右邊是“圖像”字樣，“圖像”的右邊是當(dāng)前文件大小，下方的空格可以鍵入名稱，以便將來使用時好調(diào)用該文件。通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第20頁!Dreamweaver中調(diào)整圖像位置的方法很簡單，簡述如下：（1）選中頁面中要編輯的圖像；（2）打開圖像屬性面板中的“對齊”下拉列表，在列表中選擇需要的選項。

4．調(diào)整圖像在網(wǎng)頁中的相對位置通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第21頁!改變網(wǎng)頁背景的狀態(tài)可以通過兩種方法來實現(xiàn)，一種是設(shè)置背景顏色，通常是在網(wǎng)頁安全顏色范疇之內(nèi)選擇；另一種是設(shè)置背景圖像，但不是所有的圖像都可以做背景。1．設(shè)置網(wǎng)頁背景顏色

設(shè)置網(wǎng)頁背景色在頁面屬性對話框里設(shè)置。2．設(shè)置背景圖像設(shè)置網(wǎng)頁背景色，只能得到單一顏色的背景。如何能使背景發(fā)生更多的變化，這就需要設(shè)置網(wǎng)頁的背景圖像。5.1.5設(shè)置網(wǎng)頁背景

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第22頁!2．制作低分辨率圖像低分辨率圖像是相對于高分辨率圖像而言的，高分辨率圖像一般指的是圖像的色彩豐富逼真、壓縮比較小的圖像，這種圖像文件容量比較大，瀏覽器要費(fèi)很長時間來下載。而低分辨率圖像包含的色彩少、壓縮比較大，所以這種圖像文件容量較小，能夠較快地被瀏覽器下載。因此經(jīng)常要為高質(zhì)量、大尺寸的圖像制作一個副本，這個副本圖像采用的是較低的分辨率，從而減小了文件的大小，縮短了圖像的下載時間。

通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第23頁!5.2利用HTML處理圖像

在HTML中，使用IMG標(biāo)記符可以在網(wǎng)頁中加入圖像。它具有兩個基本屬性：src和alt，分別用于設(shè)置圖像文件的位置和替換文本。src表示要插入圖像的文件名，必須包含絕對路徑或相對路徑，圖像可以是GIF文件、JPEG文件或PNG文件。alt表示圖像的簡單文本說明，用于不能顯示圖像的瀏覽器或瀏覽器能顯示圖像但顯示時間過長時先顯示。

5.2.1插入圖像通過本章學(xué)習(xí),應(yīng)該掌握以下內(nèi)容共27頁，您現(xiàn)在瀏覽的是第24頁!2．圖像的邊框使用IMG標(biāo)記符的border屬性，可以給圖像添加邊框效果，邊框的取值是像素數(shù)。3．設(shè)置圖像周圍的空白可以在IMG標(biāo)記符內(nèi)使用屬性hspace和vspace設(shè)置圖像周圍空白，其中hspace示水平方向的空白，vspace表示垂直方向的空白，它們的取值都是像