學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)入門教程(1)網(wǎng)頁(yè)編寫學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)入門教程(2)排版標(biāo)簽學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)入門教程(3)字體標(biāo)簽圖象標(biāo)簽
1. 使用方法：<IMG SRC="test.gif" ALT="本站特約模特兒" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32>
2. 標(biāo)簽解釋：目前常見(jiàn)的網(wǎng)頁(yè)圖形式有兩種就是 GIF 及 JPG 兩種格式。GIF 格式只有256色，不過(guò)色彩比較鮮艷干凈漂亮，適合電腦美工圖案。而 JPG 格式的圖象是全彩色失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用JPG格式來(lái)表現(xiàn)。
3. 使用范例：
基本用法 用法：<IMG SRC="圖象名稱、路徑">
顯示圖片最基本的方法（就是不加任何屬性啦?。┢渲?test.gif 就是圖片的文件名。
原始代碼 <IMG SRC="test.gif">我是網(wǎng)頁(yè)教學(xué)網(wǎng)模特兒！
顯示結(jié)果
我是網(wǎng)頁(yè)教學(xué)網(wǎng)模特兒！
長(zhǎng)寬設(shè)定 用法：<IMG SRC="圖象名稱、路徑" HEIGHT="高度" WIDTH="寬度">設(shè)圖片的大小，其實(shí)不用設(shè)也可以，但是設(shè)置了更好，可以加快瀏覽速度，因?yàn)闉g覽器就不用在那邊花時(shí)間算你的圖片有多大啦！此外你也可以自己隨意設(shè)定圖片大小。
原始代碼 <IMG SRC="test.gif" HEIGHT=30 WIDTH=30>
顯示結(jié)果
加上說(shuō)明 用法：<IMG SRC="圖片" ALT="說(shuō)明文字">
鼠標(biāo)移到圖片上時(shí)，說(shuō)明文字就會(huì)自動(dòng)出現(xiàn)。此外，在圖片未顯示出來(lái)或顯示不出來(lái)時(shí)，也會(huì)以這一段文字代替，讓使用者知道這個(gè)未顯示出來(lái)的圖片究竟是干什么用的，web標(biāo)準(zhǔn)強(qiáng)烈建議大家加上這個(gè)說(shuō)明。
原始代碼 <IMG SRC="test.gif" ALT="網(wǎng)頁(yè)教學(xué)網(wǎng)">移到圖上看看。
顯示結(jié)果
移到圖上看看。
圖片位置 用法：<IMG SRC="圖片" ALIGN="位置">
圖片位置設(shè)定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文繞圖”的效果。
原始代碼 <IMG SRC="test.gif" ALIGN=RIGHT>我往右邊靠！
顯示結(jié)果
我往右邊靠！
原始代碼 <IMG SRC="test.gif" ALIGN=LEFT>我往右邊靠！
顯示結(jié)果
我往左邊靠！
原始代碼 <IMG SRC="test.gif" ALIGN=TOP>文字對(duì)齊我頭頂！
顯示結(jié)果
文字對(duì)齊我頭頂！
原始代碼 <IMG SRC="test.gif" ALIGN=BOTTOM>文字對(duì)齊我腳底！
顯示結(jié)果
文字對(duì)齊我腳底！
原始代碼 <IMG SRC="test.gif" ALIGN=MIDDLE>文字對(duì)齊我中間！
顯示結(jié)果
文字對(duì)齊我中間！
邊框設(shè)定 用法：<IMG SRC="圖片" BORDER="邊框粗細(xì)">
設(shè)定邊框大小，通常都設(shè)成 0 感覺(jué)比較美觀！因?yàn)閮?nèi)定的框框?qū)嵲谑遣辉趺雌?...。尤其在加連接時(shí)，設(shè)邊框簡(jiǎn)直就是...。
原始代碼 <IMG SRC="test.gif" BORDER="4">
顯示結(jié)果
左右間距 用法：<IMG SRC="圖片" HSPACE="離左右元素的距離">
離文字的水平距離，通常多少也設(shè)一點(diǎn)，以免靠文字太近，看起來(lái)才不會(huì)有太擠的感覺(jué)。
原始代碼 左邊的字<IMG SRC="test.gif" HSPACE="15">右邊的字
顯示結(jié)果 左邊的字
右邊的字
上下間距 用法：<IMG SRC="圖片" VSPACE="離上下元素的距離">
離文字的垂直距離，通常多少也設(shè)一點(diǎn)，以免靠文字太近，看起來(lái)才不會(huì)有太擠的感覺(jué)。
原始代碼 上面的字<BR><IMG SRC="test.gif" VSPACE="15"><BR>下面的字
顯示結(jié)果 上面的字
下面的字
網(wǎng)頁(yè)圖象的重要概念
1. 關(guān)于路徑：現(xiàn)在我們來(lái)談?wù)剤D片路徑的事，路徑不對(duì)，不管您的網(wǎng)頁(yè)名稱寫的多正確也沒(méi)用，因?yàn)闉g覽器無(wú)法尋找到你的路徑去到該有的圖片，所以，我們來(lái)看看該如何正確使用路徑。有些人并不喜歡將網(wǎng)頁(yè)及圖片通通放在同一個(gè)目錄下，比如說(shuō)有人將圖片放在 c:\image 里，而網(wǎng)頁(yè)文件放在 c:\demo 里，這樣的話，我們?cè)撊绾握_的寫圖片的路徑呢？幾種常見(jiàn)的情況整理成下表：
HTML文件位置 圖片的位置 寫法 情形說(shuō)明
c:\demo c:\demo <img src="test.gif"> 圖文均在同一目錄
c:\demo c:\demo\image <img SRC="../../images/test.gif"> 圖在網(wǎng)頁(yè)下一層目錄
c:\demo c:\ <img src=" ../test.gif"> 圖在網(wǎng)頁(yè)上一層
c:\demo c:\image <img src=" ../../images/test.gif"> 圖文在同一層但不同目錄
或許有人看到不明白，先說(shuō)明一下，「../」是回到上一層目錄的意思?！竔mage/」則是進(jìn)入下一層目錄image之意，而「../../image/」的意思就是，回到上一層目錄，然后再進(jìn)入目錄image中。以上我們使用的均為“相對(duì)路徑”的概念。
2. 圖象單位：或許你常?？吹絧x這個(gè)單位，沒(méi)錯(cuò)，這是我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)最常用的一個(gè)單位了。這個(gè)單位完整的寫法是“Pixels”，我們稱之為“像素”。像素，是屏幕上的一個(gè)小光點(diǎn)，然而這一小光點(diǎn)的大小，并非是固定的，舉個(gè)例子而言，屏幕本身十五寸，不會(huì)因?yàn)槟愕娜魏卧O(shè)定而變成十七寸。但是，其解析度是可以改變的，我們常見(jiàn)的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」等。舉其中之一的 640 ×480 來(lái)說(shuō)，其代表的就是在屏幕上有寬 640 個(gè)光點(diǎn)，高有 480 光點(diǎn)，若是我們將解析度調(diào)整為 800 ×600 其寬勢(shì)必要從 640 變成 800 個(gè)光點(diǎn)。
3. 圖象格式：網(wǎng)頁(yè)用的圖片目前只有 GIF 格式（即擴(kuò)展名為gif的圖片，如：bg.gif）以及JPG格式（即擴(kuò)展名為jpg的圖片，如：bg.jpg）為一般的瀏覽器所接受。其他如 bmp 格式或是 pcx 格式都是無(wú)法在網(wǎng)頁(yè)上使用的，若非得要用，那就利用圖象處理軟件來(lái)制作格式的轉(zhuǎn)換吧！
