第6章第1部分圖像的處理

第6章第1部分

圖像的處理

6.1背景圖案的設(shè)定6.2網(wǎng)頁中插入圖形6.3img標(biāo)簽屬性的使用6.4把文本排到圖像下面6.5超鏈接與圖形的應(yīng)用6.6圖像使用原則上一頁下一頁目錄結(jié)束本節(jié)圖像可以使Web頁面更加生動美觀、富有生機。目前瀏覽器可以顯示JPEG、BMP和GIF圖像。其中BMP文件因為存儲空間大，傳輸不夠快，所以并不常用。常用的是jpg文件和gif文件。其中GIF圖像最多只能使用256種顏色（即只能保存為8位顏色），而JPEG格式可保存為24位，對具有連續(xù)色調(diào)的圖像有最佳效果。不過，GIF圖像雖然在圖像質(zhì)量上不及JPEG圖像，但其卻有所占存儲空間小、下載速度快、支持動畫效果、背景色可透明等特點。因此應(yīng)視不同情況而決定應(yīng)使用哪種格式的圖像。對于徽標(biāo)、公司廠標(biāo)等在每一主頁顯示，要求能快速下載并能在低配置的系統(tǒng)中查詢的圖像。應(yīng)采用GIF格式，而對于掃描圖片、藝術(shù)作品這種對顯示質(zhì)量要求很高的圖像則應(yīng)采用JPEG格式。第6章圖像的處理上一頁下一頁目錄結(jié)束本節(jié)6.1背景圖案的設(shè)定

在網(wǎng)頁中除了用一種單一的顏色作背景外，還可以用圖像平鋪的方法制作背景。圖像平鋪就是把一張小的圖像在屏幕上一個一個地拼接起來，構(gòu)成一個屏幕的完整的背景。定義背景圖像的語法格式如下：

<bodybackground="image-URL">

其中，“image-URL”指圖像的位置。在建立這種形式的背景之前，首先要確定所選定的圖案能否看上去無痕跡地連接在一起，或者能否產(chǎn)生一種較好的背景效果。用平鋪圖像作背景，將極明顯地降低網(wǎng)頁的顯示速度。唯一的解決辦法就是盡量使用小的圖像文件，如果可能的話則不用。上一頁下一頁目錄結(jié)束本節(jié)

假設(shè)已經(jīng)有了一個圖像文件，怎樣才能將它顯示在網(wǎng)頁上呢？在HTML中使用圖像的標(biāo)簽是：<img>。<img>是用于導(dǎo)入圖像文件的標(biāo)簽，使用此標(biāo)簽可將圖像文件導(dǎo)入到HTML文件中顯示。<img>沒有結(jié)束標(biāo)簽，因為當(dāng)瀏覽器只有讀取到<img>標(biāo)簽時，會直接顯示此標(biāo)簽所代表的圖像。

1．格式：

<img

src="image-URL">6.2網(wǎng)頁中插入圖形上一頁下一頁目錄結(jié)束本節(jié)

2．說明：

src屬性是用來指出一個圖像的文件名，或是指出URL的路徑名。如果圖像的顯示有問題，應(yīng)該檢查以下內(nèi)容：①文件名是否書寫正確；②圖像文件是否是BMP、GIF或JPG格式；③是否已經(jīng)打開了瀏覽器的圖像下載功能。若上述幾項全部正確，圖像就能夠顯示出來。如果在同一個文件中需要反復(fù)使用一個相同的圖像文件時，最好在<img>標(biāo)簽中使用相對路徑名，而不是使用絕對路徑名或URL。因為使用相對路徑名，瀏覽器只須將圖像文件下載一次，再次使用這個圖像時，只要重新顯示一遍即可。如果使用的是絕對路徑名，每次顯示圖像時，都要下載一次圖像，這將會大大降低圖像的顯示速度。上一頁下一頁目錄結(jié)束本節(jié)

有些瀏覽器只支持文本，不支持圖像，這時我們可以采取一些其他辦法來替代圖像。<img>標(biāo)簽中的alt屬性能夠有所幫助。當(dāng)瀏覽器不能顯示圖像或找不到圖像時，它可以將alt引導(dǎo)的文本顯示在屏幕上，從而替代看不到的圖像。6.3.1圖像的取代文字alt上一頁下一頁目錄結(jié)束本節(jié)

<img>標(biāo)簽中還提供了兩個屬性：height和width，用來設(shè)定圖像的高度和寬度，二者可取像素值或百分比。小的圖像占的磁盤空間較少，在網(wǎng)上傳輸?shù)臅r間比較短。因此，可以充分利用這兩個屬性，先在網(wǎng)頁上建立一個比較小的圖像，然后再用這兩個屬性按比例放大，達到所希望的尺寸。但是有一點要記住，放大后圖像中的像素也被按比例放大了，所以放大倍數(shù)太大的圖像可能會顯得有些斑駁模糊。為了使網(wǎng)頁產(chǎn)生好的圖像效果，應(yīng)盡可能多試幾次，從而得到滿意的結(jié)果。6.3.2設(shè)定圖像的高度和寬度上一頁下一頁目錄結(jié)束本節(jié)6.3.3設(shè)定圖像的邊框border

<img>標(biāo)簽的border屬性可以給圖像加一個邊框。若border項默認(rèn)或取值為0時，圖像沒有邊框。上一頁下一頁目錄結(jié)束本節(jié)

在<img>標(biāo)簽中使用align屬性，可控制圖像相對于文字基準(zhǔn)線（文字中線）的水平對齊方式，其語法如下：

<imgalign=top、middle、bottom、left或right>各屬性的設(shè)置值意義如下表所示：6.3.4設(shè)定圖像的對齊方式align上一頁下一頁目錄結(jié)束本節(jié)align屬性的設(shè)置值設(shè)置值對齊方式top上對齊middle居中對齊bottom下對齊left右對齊right左對齊上一頁下一頁目錄結(jié)束本節(jié)6.3.5設(shè)定圖像與文本之間的距離

<img>標(biāo)簽中的vspacr和hspace屬性能夠調(diào)整圖像與其他文本之間的距離，兩者均取像素值。設(shè)定語法如下：

<img

vspace=nhspave=m>n，m為數(shù)值，單位為像素。

vspace

調(diào)整圖像與上下文本的距離

hspace

調(diào)整圖像與左右文本的距離上一頁下一頁目錄結(jié)束本節(jié)6.4把文本排到圖像下面

如果文本還沒有填滿圖像周圍的空間時，就希望從圖像下面重新開始另一行文本，這時，普通的換行標(biāo)簽<br>就不起作用了，它只能在圖像旁邊另起一行，而不能把文本排到圖像下面去，這就需要在<br>標(biāo)簽中使用clear屬性來滿足這一要求：

clear=left文本在圖像下面另起一行從此，用于圖像在左邊的情況

clear=right文本在圖像下面另一行從此，用于圖像在右邊的情況

clear=all文本在圖像下面另起行處一行上一頁下一頁目錄結(jié)束本節(jié)

如果將<img>標(biāo)簽放在<a>和</a>的中間，這個圖像將成為一個可點擊的圖像，產(chǎn)生一個鏈接。可以看出，這個圖像被自動地加上一個藍色的邊框，成為一個可以點擊的圖像。這里還可以巧妙地利用alt屬性，加入提示信息，當(dāng)瀏覽者的鼠標(biāo)移到圖像時，顯示提示信息。6.5超鏈接與圖形的應(yīng)用上一頁下一頁目錄結(jié)束本節(jié)6.6圖像使用原則

在使用圖像的問題上，網(wǎng)頁的制作者可能會與瀏覽者產(chǎn)生一些矛盾。比如，制作者往往希望在自己的網(wǎng)頁上有一些漂亮的圖像，使網(wǎng)頁充滿藝術(shù)的魅力；而瀏覽者常常因為網(wǎng)頁下載時間太長而不耐煩，甚至不愿等著下載全部內(nèi)容。因此，我們可以采用以下的方法來緩解這個矛盾：

1．在設(shè)計網(wǎng)頁時，應(yīng)該反復(fù)斟酌哪些圖像必須要，哪些圖像可在可無，對于那些不是必需的圖像，要舍得忍痛割愛；

2．把圖像盡量做得小一點，小圖像在網(wǎng)上的傳輸速度比較快，這對于網(wǎng)絡(luò)傳輸速度較慢的用戶更為重要。較小的圖像可以是尺寸比較小，也可以通過減少圖像顏色