2009年11月1日 星期日

HTML新手入門(五)：圖像

歡迎進入第五單元，相信你現在已經能夠撰寫一美觀大方的文字型態網頁了。網際網路盛行的原因之一是它支援許多格式的圖像，你也一定希望能夠運用圖像讓你的網頁更生動、更能吸引網友們的視線。今天介紹的就是如何在網頁中置入圖像，以及設定圖像為連結。

在網頁中置入圖像

首先要導入一個觀念：網頁中的所有文字是儲存在同一個 HTML 文件內，但是網頁中的所有圖像既不是儲存於同一個 HTML 文件內，也不是文字格式(TEXT)文件，它們是獨自儲存於不同檔案中。當瀏覽程式遇到圖像旗標 <IMG> 時，會傳呼該圖像而顯示於網頁中的相關位置。

註：此刻，艾爾弗烈德希望你將所有的 HTML 文件及圖像儲存於同一個文件夾內 (Folder, 目錄, Directory, 次目錄, Sub-Directory)。

現在就介紹圖像旗標：<IMG SRC="image.gif">

"image.gif" 可為任何圖像的檔名；艾爾弗烈得就以 <IMG SRC="internet.gif"> 為例，請看其效果：

image example - internet

解析：

  • IMG 的意義為 IMaGe，中文翻譯為"圖像、圖形、圖畫"。它告訴瀏覽程式在此旗標處置入圖像。
  • SRC 的意義為 SouRCe，中文翻譯為 "來源"。SRC 是一個屬性控制，它告訴瀏覽程式至何處傳呼該圖像檔案。
  • image.gif 是圖像檔名。注意：此例的延伸檔名是 .gif。
    註：你可以將圖像檔案儲存於不同的檔案夾內，不過必須在此輸入完整的路徑及檔名。例如 C:\MyFolder\MySubFolder\MyFile.gif。為了避免混淆，艾爾弗烈德建議你在更熟悉 HTML 文件之後才使用不同的檔案夾來儲存你的檔案及管理你的網站。
  • <IMG> 是單身旗標，不需要回復旗標。

圖像格式

不同的圖像格式有不同的延伸檔名，網際網路最常使用的三種圖像格式為：

  • .gif，它是 Graphics Interchange Format 的縮寫。.gif 由 Compuserve 公司所制定，幾乎是網際網路上最流行的圖像格式。它可以支援動畫格式(Animated GIF)；也可以支援透明格式，(將圖像的部份區域設定為透明，使文字和圖像有更好的融和效果，不致有突兀的白邊)。
  • .jpg 或 .jpeg，如果你的PC使用舊版的作業系統而只能接受三個字母的延伸檔名，你只能使用 .jpg；如果你的PC使用新版作業系統或你使用蘋果電腦，你可以使用 .jpg 或 .jpeg。它們是 Joint Photographic Equipment Group 的縮寫，原文的中文翻譯為 "聯合圖像設備集團"，這個組織制定 .jpg 格式。
    這個格式使用獨特的壓縮方式，舉例而言，一個圖像在顯示時需要10,000個位元組，但是儲存時可能只需要2,000個位元組。它節省硬碟的空間，也節省圖像檔案上傳或下載的時間，所以它也是網際網路上極受歡迎的圖像格式。
  • .bmp，它是 bitmap 的縮寫。它將圖像的每一個點的顏色都記錄下來，因此它佔用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式，但是艾爾弗烈德不建議你使用。

切記一點：雖然圖像使你的網頁更生動，但是太多或太大的圖像檔案往往大量增加網頁的下載時間，你不會期望網友們枯坐在電腦前面只是等待下載一些無關緊要的美工插圖吧！所以慎選你的圖像檔案，再使用中等速度的電話撥接數據機測試網頁所需要的下載時間，將 "文字 — 圖像 — 速度" 三者取得最適當的平衡效果。

那裡可取得圖像？

網際網路上有許多網站提供免費圖像供你使用。此外，當你邀遊於網際網路的同時，你已經看到過數以百計的各式圖像了。如果你在任何一張網頁上看到你喜歡的圖案，別直接下載使用。艾爾弗烈德建議你寫封 E-mail 去詢問作者，取得授權之後再使用。

設定圖像為連結

在第四單元介紹了連結的設定方式，敘述如何將某些文字設定為按鈕而連結至其它網頁。現在則介紹如何將圖像設定為按鈕而連至其它網頁，以連結至 "艾爾弗烈德的蝙蝠洞" 為例：

<A HREF="http://alfredcave.blogspot.com">
<IMG SRC="internet.gif"></A>

很簡單吧！只是將圖像旗標 <IMG> 置入連結旗標 <A HREF> 和 </A> 之間就完成了。我們再來看看效果：

image example - internet

先不要按下連結，將你的滑鼠遊標移至圖像的位置，再檢視你的瀏覽視窗底部，它會出現 "http://alfredcave.blogspot.com" 或類似字樣。同時，你也應發現圖像周圍出現一個邊框(通常瀏覽程式設定為藍色，厚度約2~3點距)，有點討厭吧？消除邊框非常容易，現在艾爾弗烈德就要介紹一個新的屬性，邊框屬性 BORDER：

<IMG BORDER="0" SRC="internet.gif">

解析：

  • BORDER 為旗標屬性，它宣告邊框的寬度。

如果你喜歡，你可以設定任何厚度的邊框，例如：BORDER="7"、BORDER="55"、BORDER="103"等等。現在我們來看 BORDER="0" (無邊框) 的效果：

image example - internet

今天的課程到此為止，艾爾弗烈德仍然建議你多作些練習。

明天見！

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

文章分類：

0 留言:

張貼留言