毛慶禎
輔仁大學圖書資訊學系
圖檔的格式甚多: GIF、JPEG、PIC、JIF、PCX等均是, 在沒有外掛程式支援的情況下, IE與Netscape祗支援GIF與JPEG兩種格式。
GIF讀音是jiff, 它的全名是Graphics Interchange Format, 點陣圖檔, 通常用來製作動畫或透明圖片等特效, 目前有GIF 87a與GIF 89a兩個規格。
JPEG讀音是jay-peg, 它的全名是Joint Photographic Express Group, 向量圖檔, 通常經過壓縮, 較省空間, 稍為有點失真。
以掃瞄器製作圖檔時, 可以選擇它的儲存格式, 彼此之間可以互相轉換。
<BODY BACKGROUND="images/background.jpg"></BODY>
<IMG SRC="images/runner.gif" ALT="跑者" HEIGHT="200" WIDTH="200" BORDER="3">
網際網路的傳輸速度不快, 下載圖檔之前, 先顯示ALT的文字, 多半以文字說明該圖片的內容, 以免讀者擔心。
以HEIGHT與WIDTH指定圖片的大小時, 太大的圖片會被縮小, 太小的圖片會被放大。
| <IMG SRC="images/runner.gif" ALT="跑者"
HEIGHT="300" WIDTH="300" BORDER="1">
|
<IMG SRC="images/runner.gif" ALT="跑者"
HEIGHT="200" WIDTH="200" BORDER="2">
|
<IMG SRC="images/runner.gif" ALT="跑者"
HEIGHT="100" WIDTH="100" BORDER="1">
|
以表格框取代圖框, 其效果更像是畫框
<
table border="2"><tr><td><img src="images/runner.gif" alt="跑者" width="200" height="200"></td></tr></table> |
圖片與文字的關係是由ALIGN屬性控制的, 它有十個參數: bottom、absbottom、middle、absmiddle、top、texttop、left、right、baseline 。
ALIGN=left, right
HTML 3.2 規定的屬性
| <img src="../images/runner.gif" alt="跑者" align="left" width="100" height="100">
教學與研究的成果就是出版，除了圖書資訊學的文章之外, 偶而也寫若干電腦方面的入門書籍；曾經寫過幾篇長跑訓練的文章，最近迷上《一週網事》, 幾乎每週都為它寫評論及新聞報導。 比較有趣的是翻譯；找些英文資料, 請求授權後, 譯為中文, 短時間來看，這些文件沒什麼用, 長期就很難說。這個部份都以網路方式進行，沒有時間依煦傳統的管道，以信件或電話來往。 還有一些作品，祗是心血來潮，不知什麼原因，就是寫出來了，而且也出版了。 |
<img src="../images/runner.gif" alt="跑者" align="right" width="100" height="100">
教學與研究的成果就是出版，除了圖書資訊學的文章之外, 偶而也寫若干電腦方面的入門書籍；曾經寫過幾篇長跑訓練的文章，最近迷上《一週網事》, 幾乎每週都為它寫評論及新聞報導。 比較有趣的是翻譯；找些英文資料, 請求授權後, 譯為中文, 短時間來看，這些文件沒什麼用, 長期就很難說。這個部份都以網路方式進行，沒有時間依煦傳統的管道，以信件或電話來往。 還有一些作品，祗是心血來潮，不知什麼原因，就是寫出來了，而且也出版了。 |
ALIGN=top, middle, bottom
HTML 2.0 規定的屬性
| <img src="../images/runner.gif" alt="跑者" align="top" width="100" height="100">
|
<img src="../images/runner.gif" alt="跑者" align="middle" width="100" height="100">
|
<img src="../images/runner.gif" alt="跑者" align="bottom" width="100" height="100">
|
ALIGN=texttop, baseline
HTML 4.0 規定的屬性
| <img src="../images/runner.gif" alt="跑者" align="texttop" width="100" height="100">
|
<img src="../images/runner.gif" alt="跑者" align="baseline" width="100" height="100">
|
ALIGN=absmiddle, absbottom
HTML 4.0 規定的屬性
| <img src="../images/runner.gif" alt="跑者" align="absmiddle" width="100" height="100">
|
<img src="../images/runner.gif" alt="跑者" align="absbottom" width="100" height="100">
|
<img src="../images/runner.gif" alt="跑者" align="top" width="100" height="100" hspace="3" vspace="3">
教學與研究的成果就是出版
以圖片取代文字, 成為超鏈結的提示。
<A HREF="http://www.fju.edu.tw/chinese.htm" target="_top">
<IMG SRC="myicons/logo-fju.gif" BORDER=0 alt="FJU_logo"
width=80></A>
輔大WWW ~ 大學博覽會 ~ 輔大簡介 http://www.fju.edu.tw/htm/welcome2.htm
以一張圖片超鏈結至多個位置。先列出圖片, 再指定圖片的名稱。
<img border="0" src="/img/jpg/fujen/topic_04.jpg" usemap="#topic_04">
指出圖片的名稱:
<map name="topic_04">
每個超鏈結由一個 AREA 標籤指定。
SHAPE(形狀)屬性的參數有三: 長方形(rect)、圓形(circle)、多邊形(poly)。
COORDS(座標)屬性, 其參數值為圖素。
<area shape="rect" coords="24,51,219,76"
href="joy2.htm">
<area shape="rect" coords="0,83,175,109"
href="http://www.edu.tw">
<area shape="rect" coords="52,112,224,138"
href="http://www.ceec.edu.tw">
<area shape="rect" coords="5,184,135,214"
href="dep_tree.htm">
<area shape="rect" coords="55,215,187,244"
href="union.htm">
<area shape="rect" coords="258,41,432,66"
href="schgoal.htm">
<area shape="rect" coords="449,42,495,65"
href="schhis.htm">
<area shape="rect" coords="241,71,283,97"
href="schnow.htm">
<area shape="rect" coords="290,72,394,97"
href="schcount.htm">
<area shape="rect" coords="409,72,478,98"
href="schflag.htm">
<area shape="rect" coords="270,109,396,134" href="plan/中長程計畫.htm">
<area shape="rect" coords="409,109,535,134"
href="schtraff.htm">
<area shape="rect" coords="262,140,338,169"
href="/homepage2/schscene/htm/schscene.htm">
<area shape="rect" coords="360,141,479,169"
href="/homepage2/gfc/0st.htm">
<area shape="rect" coords="212,173,515,201"
href="schequ.htm">
<area shape="rect" coords="208,204,278,232" href="招生資訊.htm">
<area shape="rect" coords="295,205,416,232" href="學雜費收費.htm">
<area shape="rect" coords="429,205,552,233"
href="/homepage2/scholarship/default.htm">
<area shape="default" nohref>
</map>
以掃瞄器與數位照像機, 分別把自己的照片放入首頁裡。
從網路上找一份臺灣全圖, 再以 Ulead Photoimpact 等繪圖軟體讀入, 從該圖點選進入各縣市文化中心的首頁。
| 輔仁大學圖書資訊學系 毛慶禎 mao@blue.lins.fju.edu.tw |
http://www.lins.fju.edu.tw/~mao/wpd/images.htm
2000/04/14 |