2009年11月1日 星期日

HTML新手入門(六)：控制圖像變化

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

置入圖像

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

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

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

文字與圖像對齊

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

文字向圖像上方對齊 <IMG ALIGN="TOP" SRC="batcave.gif"> 若文字超過一行則會跳至圖像下方

文字向圖像上方對齊 image example - Bat Cave 若文字超過一行則會跳至圖像下方

文字向圖像中間對齊 <IMG ALIGN="MIDDLE" SRC="batcave.gif"> 若文字超過一行則會跳至圖像下方

文字向圖像中間對齊 image example - Bat Cave 若文字超過一行則會跳至圖像下方

文字向圖像下方對齊 <IMG ALIGN="BOTTOM" SRC="batcave.gif"> 若文字超過一行則會跳至圖像下方

文字向圖像下方對齊 image example - Bat Cave 若文字超過一行則會跳至圖像下方

註： "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 或其它的繪圖軟體，，你可以在網際網路上找到許多實用的免費或共享繪圖軟體。有一個功能十分強大的軟體是 gImp，有Linux、Windows及MacOS的版本，可在http://www.gimp.org下載。

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

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

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

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

解析：

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

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

原尺寸 image example - Bat Cave

放大為 152x276 image example - Bat Cave

縮小為 102x92 image example - Bat Cave

縮小為 51x184 image example - Bat Cave

水平分隔旗標 <HR>

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

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

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

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

最後再提醒一次：太大或太多的圖像檔案會佔用大量的硬碟空間及增加下載的時間，設計網頁時務須仔細考量圖像格式、大小及下載速度。

明天見！

本文配合HTML 4.0撰寫，新版HTML均可向前相容。

文章分類：

0 留言:

張貼留言