娱乐送彩金38元电玩城

書名：精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)（視頻教學(xué)版）（第2版）
作者名：王英英
本章字?jǐn)?shù)： 2577字
更新時(shí)間： 2019-12-09 14:23:52

2.4 網(wǎng)頁(yè)中的圖像<img>

俗話說(shuō)“一圖勝千言”，圖片是網(wǎng)頁(yè)中不可缺少的元素，巧妙地在網(wǎng)頁(yè)中使用圖片可以為網(wǎng)頁(yè)增色不少。網(wǎng)頁(yè)支持多種圖片格式，并且可以對(duì)插入的圖片設(shè)置寬度和高度。

2.4.1 網(wǎng)頁(yè)中支持的圖片格式

圖片在網(wǎng)頁(yè)中具有畫龍點(diǎn)睛的作用，既能裝飾網(wǎng)頁(yè)又能表達(dá)個(gè)人的情調(diào)和風(fēng)格。但在網(wǎng)頁(yè)上加入的圖片不宜過(guò)多，否則瀏覽的速度就會(huì)受到影響，導(dǎo)致用戶失去耐心而離開頁(yè)面。網(wǎng)頁(yè)中使用的可以是GIF、JPEG、BMP、TIFF、PNG等格式的圖片文件，其中使用廣泛的主要是GIF和JPEG兩種格式。

GIF格式是由Compuserve公司提出的與設(shè)備無(wú)關(guān)的圖像存儲(chǔ)標(biāo)準(zhǔn)，也是Web上使用最早、應(yīng)用最廣泛的圖像格式。GIF是通過(guò)減少組成圖像每個(gè)像素的儲(chǔ)存位數(shù)和LZH壓縮存儲(chǔ)技術(shù)來(lái)降低圖像文件大小的。GIF格式最多只能是256色的圖像。GIF圖像文件短小、下載速度快、低顏色數(shù)下比JPEG裝載速度更快，并且可用許多具有同樣大小的圖像文件組成動(dòng)畫。在GIF圖像中可指定透明區(qū)域，使圖像具有非同一般的顯示效果。

JPEG格式是在目前Internet中最受歡迎的圖像格式，可支持多達(dá)16M種顏色，它能展現(xiàn)十分豐富生動(dòng)的圖像，還能壓縮。但壓縮方式是以損失圖像質(zhì)量為代價(jià)的，壓縮比越高，圖像質(zhì)量損失越大，圖像文件也就越小。一般情況下，Windows支持的BMP格式圖像大小是JPEG格式的5至10倍，而GIF格式最多只能是256色，因此可以載入256色以上圖像的JPEG格式成了Internet中最受歡迎的圖像格式。

當(dāng)網(wǎng)頁(yè)中需要載入一個(gè)較大的GIF或JPEG圖像文件時(shí)，裝載速度會(huì)很慢。為改善網(wǎng)頁(yè)的視覺效果，可在載入時(shí)設(shè)置為隔行掃描。隔行掃描在顯示圖像開始看起來(lái)非常模糊，接著細(xì)節(jié)逐漸添加上去直到圖像完全顯示出來(lái)。

GIF是支持透明、動(dòng)畫的圖片格式，但色彩只有256色。JPEG是一種不支持透明和動(dòng)畫的圖片格式，但是色彩模式比較豐富，保留大約1670萬(wàn)種顏色。

技巧提示

網(wǎng)頁(yè)中現(xiàn)在也有很多PNG格式的圖片。PNG圖片具有不失真、兼有GIF和JPEG的色彩模式、網(wǎng)絡(luò)傳輸速度快、支持透明圖像的制作特點(diǎn)，近年來(lái)在網(wǎng)絡(luò)中也很流行。

2.4.2 使用路徑

HTML文檔支持文字、圖片、聲音、視頻等媒體格式，但是在這些格式中，除了文本是寫在HTML中的，其他都是嵌入式的，HTML文檔只記錄了這些文件的路徑。這些媒體信息能否正確顯示，路徑至關(guān)重要。

路徑的作用是定位一個(gè)文件的位置。文件的路徑可以有兩種表述方法：以當(dāng)前文檔為參照物表示文件的位置，即相對(duì)路徑；以根目錄為參照物表示文件的位置，即絕對(duì)路徑。

為了方便講述絕對(duì)路徑和相對(duì)路徑，現(xiàn)有目錄結(jié)構(gòu)如圖2-12所示。

圖2-12 目錄結(jié)構(gòu)

1．絕對(duì)路徑

例如，在E盤的webs目錄下的../Images下有一個(gè)tp.jpg圖像，那么它的路徑就是E:\webs\../Images\tp.jpg，像這種完整地描述文件位置的路徑就是絕對(duì)路徑。如果將圖片文件tp.jpg插入到網(wǎng)頁(yè)index.html，絕對(duì)路徑表示方式如下：

     E:\webs\../Images\tp.jpg

如果使用了絕對(duì)路徑E:\webs\../Images\tp.jpg進(jìn)行圖片鏈接，那么在本地電腦中將一切正常，因?yàn)樵贓:\webs\../Images下的確存在tp.jpg這個(gè)圖片。如果將文檔上傳到網(wǎng)站服務(wù)器上后就不會(huì)正常了，因?yàn)榉?wù)器給你劃分的存放空間可能在E盤其他目錄中，也可能在D盤其他目錄中。為了保證圖片正常顯示，必須從webs文件夾開始，放到服務(wù)器或其他電腦的E盤根目錄下。

通過(guò)上述講解讀者會(huì)發(fā)現(xiàn)，當(dāng)鏈接本站點(diǎn)內(nèi)的資源時(shí)，使用絕對(duì)路徑對(duì)位置要求非常嚴(yán)格。因此，鏈接本站內(nèi)的資源不建議采用絕對(duì)路徑。如果鏈接其他站點(diǎn)的資源，就必須使用絕對(duì)路徑。

2．相對(duì)路徑

如何使用相對(duì)路徑設(shè)置上述圖片呢？所謂相對(duì)路徑，顧名思義就是以當(dāng)前位置為參考點(diǎn)，自己相對(duì)于目標(biāo)的位置。例如，在index.html中連接tp.jpg就可以使用相對(duì)路徑。index.html和tp.jpg圖片的路徑根據(jù)上述目錄結(jié)構(gòu)圖可以這樣來(lái)定位。從index.html位置出發(fā)，它和../Images屬于同級(jí)，路徑是通的，因此可以定位到../Images，../Images的下級(jí)就是tp.jpg。使用相對(duì)路徑表示圖片如下：

     ../Images/tp.jpg

使用相對(duì)路徑，不論將這些文件放到哪里，只要tp.jpg和index.html文件的相對(duì)關(guān)系沒有變，就不會(huì)出錯(cuò)。

在相對(duì)路徑中，“..”表示上一級(jí)目錄，“../..”表示上級(jí)的上級(jí)目錄，以此類推。例如，將tp.jpg圖片插入a.html文件中，使用相對(duì)路徑表示如下：

     ../../Images/tp.jpg

技巧提示

細(xì)心的讀者會(huì)發(fā)現(xiàn)，路徑分隔符使用了“\”和“/”兩種，其中“\”表示本地分隔符，“/”表示網(wǎng)絡(luò)分隔符。因?yàn)榫W(wǎng)站制作好肯定是在網(wǎng)絡(luò)上運(yùn)行的，所以要求使用“/”作為路徑分隔符。

有的讀者可能會(huì)有這樣的疑惑：一個(gè)網(wǎng)站有許多鏈接，怎么能保證它們的連接都正確，如果調(diào)整了一下圖片或網(wǎng)頁(yè)的存儲(chǔ)路徑，那不是全亂了嗎？如何提高工作效率呢？

技巧提示

Dreamweaver工具的站點(diǎn)管理功能，不但可以將絕對(duì)路徑自動(dòng)地轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)在站點(diǎn)中改動(dòng)文件路徑時(shí)，與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改。

2.4.3 網(wǎng)頁(yè)中插入圖像標(biāo)記<img>

圖像可以美化網(wǎng)頁(yè)，插入圖像使用單標(biāo)記<img>。<img>標(biāo)記的屬性及描述如表2-2所示。

表2-2 <img>標(biāo)記的屬性及描述

1．圖像的源文件src

src屬性用于指定圖片源文件的路徑，是<img>標(biāo)記必不可少的屬性。語(yǔ)法格式如下：

     <img src="圖片路徑">

圖片的路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑。下面的實(shí)例是在網(wǎng)頁(yè)中插入圖片。

【例2.9】（實(shí)例文件：ch02\2.9.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>插入圖片</title>
     </head>
     <body>
     <img src="../Images/meishi.jpg">
     </body>
     </html>

在IE 11.0中的預(yù)覽效果如圖2-13所示。

圖2-13 插入圖片

2．設(shè)置圖像的寬度width和高度height

在HTML文檔中，還可以設(shè)置插入圖片的顯示大小，一般是按原始尺寸顯示，但也可以任意設(shè)置顯示尺寸。設(shè)置圖像尺寸分別用屬性width（寬度）和height（高度）。

【例2.10】（實(shí)例文件：ch02\2.10.html）

在IE 11.0中預(yù)覽效果，如圖2-14所示。

圖2-14 設(shè)置圖片的寬度和高度

從中可以看到，圖片的顯示尺寸是由width（寬度）和height（高度）控制的。當(dāng)只為圖片設(shè)置一個(gè)尺寸屬性時(shí)，另外一個(gè)尺寸就以圖片原始的長(zhǎng)寬比例來(lái)顯示。圖片的尺寸單位可以選擇百分比或數(shù)值。百分比為相對(duì)尺寸，數(shù)值是絕對(duì)尺寸。

技巧提示

因?yàn)榫W(wǎng)頁(yè)中插入的圖像都是位圖，放大尺寸，圖像會(huì)出現(xiàn)馬賽克，變得模糊。

在Windows中查看圖片的尺寸，只需要找到圖像文件，把鼠標(biāo)指針移動(dòng)到圖像上，停留幾秒后，就會(huì)出現(xiàn)一個(gè)提示框，說(shuō)明圖像文件的尺寸。尺寸后顯示的數(shù)字代表圖像的寬度和高度，如256×256。

3．設(shè)置圖像的提示文字alt

在瀏覽網(wǎng)頁(yè)時(shí)，圖像提示文字的作用有兩個(gè)：一是如果圖像下載完成，將鼠標(biāo)指針?lè)旁谠搱D像上，鼠標(biāo)指針旁邊會(huì)出現(xiàn)提示文字；二是如果圖像沒有成功下載，在圖像的位置上就會(huì)顯示提示文字。

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)速已經(jīng)不是制約因素，因此一般都能成功下載圖像。現(xiàn)在，alt還有另外一個(gè)作用，在百度、google等大搜索引擎中，搜索圖片不如文字方便，如果給圖片添加適當(dāng)提示，可以方便搜索引擎的檢索。

下面的實(shí)例將為圖片添加提示文字效果。

【例2.11】（實(shí)例文件：ch02\2.11.html）

在IE 11.0中的預(yù)覽效果如圖2-15所示。用戶將鼠標(biāo)放在圖片上，即可看到提示文字。

圖2-15 圖片文字提示

注意：在火狐瀏覽器中不支持該功能。

官术网_书友最值得收藏!

精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)（視頻教學(xué)版）（第2版）

2.4 網(wǎng)頁(yè)中的圖像<img>

2.4.1 網(wǎng)頁(yè)中支持的圖片格式

2.4.2 使用路徑

1．絕對(duì)路徑

2．相對(duì)路徑

2.4.3 網(wǎng)頁(yè)中插入圖像標(biāo)記<img>

1．圖像的源文件src

2．設(shè)置圖像的寬度width和高度height

3．設(shè)置圖像的提示文字alt