事前解說 |
插入圖片的指令為<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日 |