第04章 圖像處理.ppt

1、第4章圖像處理，4.1背景模式的設(shè)置4.2將圖形插入網(wǎng)頁4.3使用img標(biāo)簽屬性4.4將文本放置在圖像下4.5超鏈接和圖形的應(yīng)用4.6圖像使用原則，上一頁，下一頁，參考書目，裝訂，本節(jié)，4.3使用img標(biāo)簽屬性，4.3.1用文本替換圖像4.3.2設(shè)置圖像的高度和寬度4.3.3設(shè)置圖像的框架4.3.4設(shè)置圖像的對齊方式4.3.5設(shè)置圖像和文本之間的距離在這一節(jié)中，圖像可以使網(wǎng)頁更加生動、美觀和充滿活力。目前，瀏覽器可以顯示JPEG、BMP和GIF圖像。其中，BMP文件由于存儲空間大、傳輸速度慢而不常用。常用的是jpg文件和gif文件。GIF圖像最多只能使用256種顏色(也就是說，它們只能保存為8

2、位顏色)，而JPEG格式可以保存為24位，這對連續(xù)色調(diào)的圖像效果最好。然而，GIF圖像在圖像質(zhì)量上不如JPEG圖像，但它具有存儲空間小、下載速度快、支持動畫、背景顏色透明等特點。因此，我們應(yīng)該根據(jù)不同的情況決定使用哪種圖像格式。用于徽標(biāo)、公司徽標(biāo)等。為了在每個主頁上顯示，需要能夠快速下載并在低配置系統(tǒng)中查詢的圖像。應(yīng)該采用GIF格式，而對于掃描圖片和藝術(shù)作品，應(yīng)該采用JPEG格式，這需要高顯示質(zhì)量。第4章，圖像處理，上一頁，下一頁，內(nèi)容，裝訂，本節(jié)，4.1背景圖案的設(shè)置，除了在網(wǎng)頁中使用單一顏色作為背景，還可以使用圖像平鋪的方法來制作背景。圖像拼接是在屏幕上一個接一個地拼接小圖像，形成完整的屏

3、幕背景。定義背景圖像的語法格式如下：其中“圖像-網(wǎng)址”指的是圖像的位置。在設(shè)置這種背景之前，我們必須首先確定所選擇的圖案是否可以看起來是無痕跡地連接在一起的，或者它們是否可以產(chǎn)生更好的背景效果。使用平鋪圖像作為背景顯然會降低網(wǎng)頁的顯示速度。唯一的解決辦法是使用盡可能小的圖像文件，但如果可能就不要了。上一頁，下一頁，目錄，綁定，這一部分，假設(shè)有一個圖像文件，它如何在網(wǎng)頁上顯示？在超文本標(biāo)記語言中使用圖像的標(biāo)簽是：是用于導(dǎo)入圖像文件的標(biāo)簽，可用于將圖像文件導(dǎo)入到超文本標(biāo)記語言文件中進行顯示。沒有結(jié)束標(biāo)記，因為當(dāng)瀏覽器只讀取標(biāo)記時，它將直接顯示由標(biāo)記表示的圖像。1格式：4.2插入圖形，上一頁，下一頁

4、，目錄，綁定，本節(jié)，2說明：src屬性用于指示圖像的文件名或網(wǎng)址的路徑名。如果圖像顯示有問題，您應(yīng)該檢查以下內(nèi)容：文件名是否寫正確；圖像文件是BMP、GIF還是JPG格式；瀏覽器的圖像下載功能是否已打開。如果以上所有項目都正確，則可以顯示圖像。如果同一圖像文件需要在同一文件中重復(fù)使用，最好使用相對路徑名，而不是絕對路徑名或標(biāo)簽中的網(wǎng)址。由于使用了相對路徑名，瀏覽器只需下載一次圖像文件，當(dāng)再次使用圖像時，只需再次顯示。如果使用絕對路徑名，每次顯示圖像時都會下載圖像，這將大大降低圖像的顯示速度。在這一部分，一些瀏覽器只支持文本而不支持圖像，所以我們可以采取一些其他措施來替換圖像。標(biāo)簽中的alt屬性

5、會有所幫助。當(dāng)瀏覽器無法顯示圖像或找不到圖像時，它可以在屏幕上顯示由alt引導(dǎo)的文本，從而替換不可見的圖像。4.3.1備選，上一頁，下一頁，目錄，裝訂。在本節(jié)中，標(biāo)簽還提供了兩個屬性：高度和寬度，用于設(shè)置圖像的高度和寬度，它們可以是像素值或百分比。小圖像占用較少的磁盤空間，并且在互聯(lián)網(wǎng)上的傳輸時間較短。因此，我們可以充分利用這兩個屬性，首先在網(wǎng)頁上創(chuàng)建一個相對較小的圖像，然后使用這兩個屬性來放大以達到所需的大小。但是要記住的一點是，放大后的圖像中的像素也會按比例放大，所以放大太大的圖像可能會顯得斑駁和模糊。為了使網(wǎng)頁產(chǎn)生良好的圖像效果，我們應(yīng)該盡可能多地嘗試以獲得滿意的結(jié)果。4.3.2設(shè)置圖像

6、、上一頁、下一頁、目錄和裝訂的高度和寬度。在本節(jié)中，4.3.3設(shè)置圖像的邊框，標(biāo)簽的邊框?qū)傩钥梢越o圖像添加邊框。如果邊框項為默認值或值為0，則圖像沒有邊框。上一頁，下一頁，目錄，綁定。在本節(jié)中，標(biāo)簽中使用“對齊”屬性來控制圖像相對于文本基準(zhǔn)線(文本中心線)的水平對齊。語法如下：每個屬性的設(shè)置值的含義如下表所示：4.3.4設(shè)置圖像的對齊方式對齊，上一頁、下一頁、目錄、綁定、本節(jié)、對齊在本節(jié)中，4.3.5設(shè)置圖像和文本之間的距離，標(biāo)簽中的vspacr和hspace屬性可以調(diào)整圖像和其他文本之間的距離，兩者都取像素值。設(shè)置語法如下：n，m是一個數(shù)值，單位是像素。Vspace調(diào)整圖像與上下文本之間的距

7、離。hspace調(diào)整圖像與左右文本之間的距離。上一頁、下一頁、目錄和綁定。在本節(jié)4.4中，文本排列在圖像下方。如果文本沒有填滿圖像周圍的空間，希望從圖像下面重新開始另一行文本。此時，普通的換行標(biāo)簽將不起作用，它只能從圖像旁邊的另一行開始。有必要在標(biāo)簽中使用clear屬性來滿足這個要求：clear=左文本在圖像下開始另一行。從那時起，當(dāng)圖像在左邊時，clear=右文本在圖像下開始另一行。從那時起，當(dāng)圖像在右邊時，清除=所有文本在圖像下開始另一行。一行，上一頁，下一頁，參考書目，裝訂，這一部分，如果你把標(biāo)簽和，可以看到，這個圖像是自動添加藍色邊框，成為一個可點擊的圖像。在這里，您還可以巧妙地使用a

8、lt屬性來添加提示信息，當(dāng)查看者的鼠標(biāo)移動到圖像時，就會顯示這些信息。4.5超鏈接和圖形的應(yīng)用，上一頁，下一頁，內(nèi)容，綁定，本節(jié)，4.6使用圖像的原則，在使用圖像的問題上，網(wǎng)頁制作人可能與瀏覽者有一些沖突。例如，制作人經(jīng)常希望在自己的網(wǎng)頁上有一些漂亮的圖片，這樣網(wǎng)頁就充滿了藝術(shù)魅力；然而，由于網(wǎng)頁的下載時間太長，訪問者往往不耐煩，甚至不想等待所有的內(nèi)容被下載。因此，我們可以用以下方法來緩解這一矛盾：1 .在設(shè)計網(wǎng)頁時，我們應(yīng)該反復(fù)考慮哪些圖片是必要的，哪些圖片是可選的。對于那些不必要的圖像，我們應(yīng)該愿意放棄自己喜歡的東西；使圖像盡可能小，小圖像在互聯(lián)網(wǎng)上的傳輸速度相對較快，這對于互聯(lián)網(wǎng)上傳輸速度慢的用戶來說更為重要。較小的圖像可以更小，或者可以通過減少圖像顏色來減少圖像文件；上一頁，下一