第六單元：控制圖像變化

新手上路      序   曲      旗   標      控制文字變化      連結網頁      圖   像      圖像變化      結   業

在第三單元中我們介紹了如何控制文字變化，在此則介紹如何控制圖像變化。控制文字或圖像變化的方法很類似，都是運用 旗標 或 旗標的屬性 而達成。

置入圖像

圖像旗標 <IMG> 的預設方式是將圖像向左對齊，如果希望圖像為向中對齊，可利用置中旗標 <CENTER> 和 </CENTER> 而達成。

但如何將圖像向右對齊呢？記得在段落旗標 <P> 中使用的對齊屬性 <ALIGN="--"> 嗎？圖像旗標 <IMG> 也可以使用相同的屬性控制。其方式如下：

<IMG ALIGN="right" SRC="image.gif">

文字與圖像對齊

很少網頁完全由圖像組成。你通常希望文字出現在圖像兩旁，這時你需要使用對齊屬性 <ALIGN="--">，其控制碼為 "top"，"middle"，"bottom"，(依序為 "上"，"中"，"下")。其方式如下：

文字向圖像上方對齊 <IMG ALIGN="top" SRC="BatCave.gif"> 文字向圖像上方對齊

文字向圖像中間對齊 <IMG ALIGN="middle" SRC="BatCave.gif"> 文字向圖像中間對齊

文字向圖像下方對齊 <IMG ALIGN="bottom" SRC="BatCave.gif"> 文字向圖像下方對齊

其效果如下：

文字向圖像上方對齊 文字向圖像上方對齊

文字向圖像中間對齊 文字向圖像中間對齊

文字向圖像下方對齊 文字向圖像下方對齊

註：你可能會發現， "top"，"middle"，"bottom" 屬性只允許一行文字出現在圖像左右，如果超過一行則會跳至圖像下方。

文字繞圖

如果希望不止一行文字出現在圖像兩旁時，則不能使用 "top"，"middle"，"bottom" 屬性控制碼，而需要使用 "left"，"right" 屬性控制碼，(依序為 "左"，"右")。雖然圖像預設為向左對齊，但 ALIGN="left" 的作用為設定文字繞圖。試試看，很簡單哦！

二合一效果設定！？

也許你希望文字向圖像中間對齊，同時又為文字繞圖，那麼是否可以使用兩個 ALIGN="--" 而達成呢？答案是否定的。

不過你可以同時使用段落旗標 <P> 及圖像旗標 <IMG> 而達成類似效果。例如：

<P ALIGN="right"><IMG ALIGN="middle" SRC="image.gif"></P>

此時，你應該瞭解一個重要的 HTML 文法格式：一個旗標可以含有許多不同屬性，但一個屬性只能有一個控制碼。

改變圖像大小

首先，艾爾弗烈德必須簡單介紹電腦處理圖像的方式。電腦將圖像視為一大堆彩色小點的集合，每一個小點稱為 "像素(pixel)"。當說明圖像大小時，我們不使用英吋或公分為單位，而使用像素的多寡來形容。

每一張圖像都由像素組成，如果每一英吋容納愈多的像素，圖像的解析度就愈高、愈細緻；當然圖像的檔案也就愈大、佔用愈多的硬碟空間。網頁通常使用每一英吋 72 點或 100 點的圖像，(稱為 72 dpi 或 100 dpi，dpi 為 dots per inch 的縮寫，翻譯為 "每一英吋的點數")，因為它不失圖像的細緻，也不會佔用太多的硬碟空間。

就以 BatCave.gif 為例，它的大小為：152 點寬、184 點高。你也許會問我怎麼知道的，因為艾爾弗烈德使用的MS Photo Editor (MS OFFICE 所附) 告訴我的。你不需要購買MS Photo Editor 或其它的繪圖軟體，，你可以在網際網路(WWW)上找到許多實用的免費或共享繪圖軟體。有一個很受歡迎的共享軟體是 PaintShop Pro，你可以免費試用30天，之後再選擇是否購買。

不過，若你手頭上沒有任何一個繪圖軟體，你仍可以檢查圖像大小。以使用網景領航員瀏覽程式為例，選擇命令列的 檔案(FILE) 功能，再從其功能表中選擇 開啟檔案(OPEN FILE) 功能，當圖像出現時，檢查視窗最上方的橫列，圖像的寬度及長度顯示於該處。

當你知道圖像大小以後，改變它就很容易了，你只要宣告新的寬度和長度即可。例如 BatCave.gif 是 152x184，如果你希望將它縮小為原來寬度的三分之一、原來高度的二分之一，則可宣告新的大小為 34x74；如果你希望將它放大，則可宣告新的大小為 153x296。

改變圖像大小的方式如下：

<IMG HEIGHT="--" WIDTH="--" SRC="image.gif">

解析：
　

• HEIGHT 為旗標屬性，它宣告圖像的高度。
• WIDTH 為旗標屬性，它宣告圖像的寬度。

以下為數個改變大小的效果：

原尺寸

放大為 152x276

縮小為 102x92

縮小為 51x184

水平分隔旗標 <HR>

寬度 WIDTH 屬性也適用於水平分隔旗標 <HR>，請參考以下的例子。

<HR WIDTH="50%"> 的效果為：

<HR WIDTH="70%"> 的效果為：

此時，你又可以發現一個 HTML 文法格式：屬性旗標接受絕對值(像素的點數)或相對值(百分比)。