圖片設定

§ 圖片的設定

§ 插入圖片

網頁文件除了文字外，圖片更是不可或缺的一部分。做出一個圖文並茂的文件，方可贏得網友們的芳心。
網頁中的圖片最好用副檔名為 .gif 或 .jpg 的圖檔。
在網頁中插入圖片，只要用下列的語法即可：

<img src="圖檔位址" boder="0" width="88" height="31">

<img> 標籤和<font>標籤一樣，單獨存在是沒有意義的。它需要其他屬性的配合才有作用。
src 屬性是指定圖片的來源位址。
位址的指定可以有下列兩種方式：

1.相對位址。(本例，圖片來源位址是在：上一層目錄下的 images 資料夾的 logo999.gif 圖檔)
../ 是指回上一層。所謂「相對」，乃以目前網頁相對而言。
2.絕對位址。(直接指定圖片在網站中的位址，如：https://members.tripod.com/tngina/images/logo999.gif
當然也可以指定別人網站中的圖片位址(常用在連結他站的logo圖時)

bodor 屬性是設定圖片的邊框大小。
width 屬性是設定圖片的寬度。
height屬性是設定圖片的高度。
width 、height 的設定方式有兩種：

1.絕對長度：單位像素(pixels) 例如：<img height="180">
2.相對長度：單位百分比(%) 例如：<img width="100%">
(過於放大圖片，會產生失真的現象)

如果在這裏將圖片縮小，並不會讓原圖的檔案縮小(只是檢視倍率的改變而已)，因此，網頁中文件的檔案大小仍然不變。不會對下載速度有所改進！若真想縮小圖檔，以求傳輸速度的改進，需利用影像處理軟體，將圖檔裁切成較小的尺寸，再加到網頁文件中。
設定了圖檔的寬及高，瀏覽器在解譯網頁文件時，可以預先知道圖檔的大小，因而可以較快的將網頁內容顯示出來。
不設定圖片的寬、高，瀏覽器顯示時會依原圖檔的寬、高來顯示。
如果，您設定了圖檔的寬、高，換了圖檔時，記得將這裏的設定值改成圖檔的大小。

＊範例 (插入一張圖片：<img border="0" src="../images/logo999.gif" width="88" height="31">)

＊ Tips：

圖檔格式有很多種，但目前網頁中最常用的圖檔格式是 GIF 和 JPG 兩種，因這兩種都是壓縮過的圖檔格式，檔案較小，適合網路傳輸。(另外有一種 PNG 檔號稱未來之星，但目前支援的不多)
GIF 檔：最多只有256色，適用於線條分明、顏色較少的圖片、背景透明圖。如：卡通動畫、小圖示。
JPG 檔：支援到全彩，適用於顏色豐富、色調連續的圖片。如：相片、風景照、掃瞄圖片。

＊ Tips：

如果圖片設定了邊框，而該圖片有設定連結時，會出現一個連結顏色的邊框，表示這個圖檔有設定超連結(在 <body link="rrggbb">的設定，若沒設定預設即是"藍色")。此時，欲消除這個邊框，只要在圖片中指定 bodor="0" 即可。

＊ Tips：

沒有輸入任何文字時，您是無法任意移動圖片到想要的位置的，(即使您加了很多沒有任何字元的段落也是如此，雖然，在ForntPage中您會看到好像已經將它擺到網頁中間了，可是一經瀏覽器預覽，立刻見真章了！它還是在最上端，不是嗎？)所以，除了空白段萿外，您還得加入空白字元才行！(您也可以用隱形表格來做簡單的定位)

＊範例

§ 圖片的對齊方式 -- align

align 屬性可以指定圖片與文字(元件)的對齊方式。
這裏的對齊設定其實站長我也是有點"霧煞煞"，還是就我所知，用一個範例和網友一起研究這裏的對齊方式吧！(本人所有電腦方面的知識完全是無師自通哩！因此，若網友發現本站有錯誤的地方，還請不吝指正。謝謝！)

＊範例 <img border="0" src="../images/logo999.gif" width="88" height="31" align="left">

§ 圖片的替代顯示文字-- alt

alt 屬性可以設定文字的替代文字(alternate)。
所謂「替代文字」就是當滑鼠移到圖片時會出現的說明文字，而當網路傳輸較慢時，許多網友等不及讓圖片下載完成，也可以經由此替代顯示的文字，直接點選連結的圖片連到其他網頁。
有時圖檔傳輸失敗，會出現一個內定的圖示，此時，替代文字會顯示在該圖檔上。網友也可以經由說明文字大概知道此圖片的作用。
事實上，並不是每一位都會以「顯示圖片」的方式來瀏覽網頁。
建議網友所有連結的圖片最好都作此項設定。

＊範例

<a href="https://members.tripod.com/tngina/" target="_blank">
<img border="0" src="../images/logo999.gif" alt="連到網奕工坊" width="88" height="31"></a>

§ 圖片的水平間距及垂直間距 -- hspace 、 vspace

hspace 屬性可以指定圖片與文字(元件)的水平間距。
語法：

<img src="../images/logo999.gif" width="88" height="31" hspace="8">

vspace 屬性可以指定圖片與文字(元件)的垂直間距。
語法：

<img src="../images/logo999.gif" width="88" height="31" vspace="10">

＊範例

<img src="../images/logo999.gif" width="88" height="31" hspace="8">
<img src="../images/logo999.gif" width="88" height="31" vspace="10">