HTML 教材：圖片

這裡要談到數位圖像，讀者應該對照 BCC16 第 8 講來學。 最好是學到第 8 講之後再讀這一節。

在 HTML 文件中安插圖片的指令是 IMG (image)。 它是一個孤立標籤。 例如 [Going Out] 是用以下指令呈現的： 

<IMG SRC=out.gif ALIGN=absmiddle ALT="[Going Out]" HEIGHT=32 WIDTH=32>
這種安插在一列字之間的圖片稱為文內圖片 (in-line images)； 它通常是小型圖片。上面出現了五個參數，分別描述於下：
SRC
指定圖形檔的來源。一般而言，此參數的值是一個 URL， 但是我們暫且不詳談這方面的事。瀏覽器所能接受的圖形檔案格式，通常是 GIF、JPG (或 JPEG)、PNG。在這個例子中，圖形檔的檔案名是 out.gif， 它與這篇 HTML 文件的原始碼放在同一個檔案夾內。
ALIGN
表示圖片要如何與同一列的文字對齊。 absmiddle 表示要將圖片的中間與同列文字的中間對齊。 其他可以接受的參數值還有：bottom absbottom middle top。
ALT
接受任何字串作為值，但是若字串中包含空白，必須在前後以雙引號 " 括起來。 而雙引號本身不屬於 ALT 的值。所以，雙引號 (double quote) 成為 HTML 的第四個保留字元， 如果要在 HTML 文件中呈現雙引號，要寫 &quot; 。 某些瀏覽器會在當滑鼠指到圖片的時候， 以浮動方盒的方式將 ALT 的值印出來。 習慣上 ALT 的值都以 [ 和 ] 括起來， 而且內容應該盡量以簡短文字來描述該圖片的內容或意義。
HEIGHT WIDTH
分別記錄圖片的高和寬，以像素 (pixel) 為單位。 這兩個參數並不會影響圖片本身的呈現， 它們的目的是讓瀏覽器能夠運作得更快一點。 但是，這兩個參數值必須照實填寫，如果寫得不對， 可能造成圖像變形或破碎。 例如 out.gif 明明是 32x32 的圖像，如果寫 
<IMG SRC=out.gif ALIGN=absmiddle ALT="[Going Out]" HEIGHT=32 WIDTH=64>
就變成 [Going Out] 這樣。

要怎樣知道圖片的寬和高呢？許多看圖或繪圖工具軟體都有這個功能，您需要另外學習。 要怎樣獲得圖片呢？如果是自己製造，那就必需要學習測繪、繪圖、影像處理的各種工具軟體。 有時候您不必自己製造，可以從網路上下載。 其中一種下載的方法是，當您在瀏覽器上看別人的網頁，發現一張喜歡的圖片， 可以將滑鼠指在上面，然後按滑鼠右鍵，就會在選單中看到一個存檔的選項， 這就可以將那張圖片存下來了。 當然，這樣做是否涉及侵佔，就是另外一個問題了。

小圖片通常用文內圖片來處理， 比較大的圖片則通常是以展示圖片 (displayed figure) 或浮動圖片 (floating figure) 的方式來呈現。

所謂展示，就是將它獨立置於版面的中央。例如

[Godel]
是將 IMG 放在 DIV 環境內完成的： 
<DIV ALIGN=center>
<IMG SRC=Godel.jpg HEIGHT=109 WIDTH=90 ALT=[Godel]>
</DIV>
留意 IMG 標籤內不再使用 ALIGN 參數，而且 ALT 的字串因為不含空格， 所以也不必寫在一對 " 裡面。 請將滑鼠移到那個人像圖片上，看看瀏覽器是否顯示一個浮動方盒， 顯示 [Godel]。

DIV 環境還有其他用處，在此先略去不談，以後有機會再說。

所謂浮動就是將圖片置於版面的最左邊或最右邊，而令文字排版於圖右或圖左， [Godel] 產生所謂文繞圖的效果。這仍然是用 ALIGN 參數造成， 此時令其值為 left 或 right 表示將圖片浮動於左或浮動於右。 例如左邊這張圖是數學家 Godel 的肖像，其檔案是 Godel.jpg， 它是如此排版的：

<IMG SRC=Godel.jpg ALIGN=left HEIGHT=109 WIDTH=90 ALT=[Godel]>

如果想要提早結束浮動圖片旁邊的文字，讓文字直接跳到圖片的下一列， 可以用 BR 指令加上參數 CLEAR。 如果圖片在左邊，就說 <BR CLEAR=left>， 如果圖片在右邊，就說 <BR CLEAR=right>。

在前面已經看到，如果利用 WIDTH 和 HEIGHT 參數將圖像變大， 則會出現破碎或鋸齒的現象。 但是如果利用 WIDTH 和 HEIGHT 參數將圖像變小， 則通常效果還可以。譬如前面那幅 Godel 的大頭照， 原本的尺寸是 109 乘 90 像素，取其大約 1/3，得到 [Godel] 這樣的效果，使用的指令是

<IMG SRC=Godel.jpg HEIGHT=36 WIDTH=30 ALT=[Godel]>
不過，這種作法並不值得提倡。因為在網路上傳輸的仍然是 Godel.jpg 這個檔案，是瀏覽器做了後續的動作將此圖片縮小的。 如果要展現大量的小圖，最好還是先用製圖軟體 (例如 PSP, PhotoImpact, ACDsee 等) 將圖縮小了，以節省網路資源。

大型圖片固然可以為文件抬色，但也造成網路的負擔：也就是讀者的負擔。 所以，讀者的平均網路頻寬必須被考慮在內。 一般來說，一張 HTML 文件內所使用的圖片總量，應該盡量維持在 100KB 以內。 而且，盡量在 IMG 指令中標明圖片的寬和高，以增進排版效率。 重複使用的圖標比較可以放心，因為瀏覽器會庫存 (cache) 這些圖標， 所以它們基本上只會被讀一次。

習題

  1. 下載本教材內的 out.gif 圖檔， 實驗 IMG 之參數 ALIGN=bottom 和 ALIGN=top 有何效果。
  2. 寫出 HTML 的四個保留字元，以及用跳脫字元印出那四個字元的指令。
  3. 下載本教材內的 Godel.jpg 圖檔， 實驗浮動於右側的文繞圖效果，並實驗 <BR CLEAR=right> 的效果。
[BCC16-7]
單維彰 (1999/12/20) --- 01/03/11, 03/11/20 (單)
[Prev] [Next] [Up]