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

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

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

1．GIF格式

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

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

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

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

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

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

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

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

top

、

middle、bottom分別表示圖像與周?chē)鷥?nèi)容的頂部、中央、底部對(duì)齊。4．圖像的對(duì)齊

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

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

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

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

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

1．插入圖像

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

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

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

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

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

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

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