圖 片 標 籤 教 學
事前解說
插入圖片的指令為<IMG>
而在<IMG>有SRC,WIDTH,HEIGHT,BORDER,ALIGN,ALT的屬性而其中有些應該不陌生吧
 圖片格式說明
在網路上常用的格式有,JPG ( JPEG ) , GIF,兩種格式,而兩種格式其各有優缺點
在JPG方面,是一種破壞性的縮格式,不過做出來的檔案也較小,( 我說知道數位照機都用這種格式較多 ) ,這通常都是用在照片上面較多
在GIF方面,有兩個優點,就是可以做出透明圖,及動畫的效果,不過存成的檔案較大,我們在網路上所 看到會動的圖片大都是用GIF的
透明圖:若有一張圖片為白底,而其中有個影像,而在網頁上若背景為黑色,則 插入這張圖片是會不好看,所以我們通常把白色剖份變成透明,則看起來會比較好看
 SRC屬性
SRC就是要插入那張圖的意思,其用法很簡單,
<IMG SRC="image/ex71.gif">
本文以此圖為範例
這裡也可以直接打網址如:http://www.hinet.net/abc.gif 哦
<IMG SRC="http://www.hinet.net/abc.gif">
 WIDTH,HEIGHT屬性
WIDTH,HEIGHT這兩個屬性應該很熟了吧
<IMG SRC="image/ex71.gif" WIDTH=100 HEIGHT=100>

左邊的圖為原圖,而有邊的為設定WIDTH,HEIGHT屬性各為100不過這可是同一張圖哦
其實WIDTH,HEIGHT兩個屬性可以不用同時用,在圖片標籤中若你只 打其中一個,則會按比例放大或縮小哦
 BORDER屬性
BORDER也就是邊框
<IMG SRC="image/ex71.gif" BORDER=7>

有沒有看到圖片邊邊出現了黑色的框框丫
BORDER這個屬性在<IMG>也滿常用,只不過,都是設BORDER為0 ,而多用在圖片鏈結的部份
 ALIGN屬性
ALIGN這也很熟了吧 在這我們只介紹放左放右,而置中可以用 對齊標籤中的CENTER就可以了
<IMG SRC="image/ex71.gif" ALIGN=LEFT>
<IMG SRC="image/ex71.gif" ALIGN=RIGHT>


有沒有看到圖片在左邊一張在右邊一張丫
為什麼我要在多加一個<TR>,是因為我因我這些字放在上一格 則,我這些文字會在圖片中哦,若設定圖片在左邊則字會在右邊,同理若圖片在右邊則文字在左邊哦
 ALT屬性
ALT在網路上可能有些圖是連結自別人的站台的,但不知道那 天那站台突然進不去,你的圖片也會出不來了,那就會出現一張怪怪的圖片,我想大家應該都看過吧, 而用ALT則可以當圖片未完全載入,或沒法載入時,有文字解釋,這張圖片為什麼
<IMG SRC="image/ex76.gif">
<IMG SRC="image/ex76.gif" ALT="可愛小綿羊">

可愛小綿羊
有沒有看到,我故意打個ex76.gif的圖片,因為這張圖不存在,所以在上面會出現個怪怪的圖片, 而在下面加了個ALT則後面會多個文字註解哦
本章範例
<HTML>
<HEAD>
<TITLE>圖片標籤教學 </TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=550 BORDER=3>
<TR>
<TD><IMG SRC="../image/ex71.gif" ALIGN=RIGHT></TD>
<TD><IMG SRC="../image/ex71.gif" WIDTH=30 HEIGHT=30></TD>
<TD><IMG SRC="../image/ex76.gif" ALT="可愛小綿羊"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
範例效果

作者:  醒吾技術學院  國貿系  陳義元  E-mail
完成日期:1999年2月7日

[ 上一頁 | 回主頁 | 下一頁 ]