專業專業 HTMLHTML 網頁設網頁設計計

陳錦輝陳錦輝

HTML/DHTML/CSS/JavaScript

P303

22

第八章　網頁的圖片第八章　網頁的圖片 8.1 8.1 圖檔格式圖檔格式 8.28.2 插入圖片插入圖片 <<img>img> 8.38.3 GIFGIF 圖檔的分段顯示圖檔的分段顯示 (lowsrc(lowsrc 屬性屬性 )) 8.4 8.4 圖片與超鏈結的整合圖片與超鏈結的整合 8.5 8.5 圖片的整合應用圖片的整合應用 8.6 8.6 網頁網頁 DIYDIY

33

圖 片 的 格 式 有 許 多 種 ， 例 如 ：圖 片 的 格 式 有 許 多 種 ， 例 如 ：GIFGIF 、、 JPEGJPEG 、、 BMPBMP 、、 PCXPCX 、、 TIFTIF 、、、、等等。等等。

瀏覽器所內定支援的只有瀏覽器所內定支援的只有 GIFGIF 與與 JPEGJPEG 兩種格式，兩種格式，如果要觀看其他格式的圖片，則需要外掛程式的如果要觀看其他格式的圖片，則需要外掛程式的輔助。輔助。

因此，建議將所有想要放到網頁上的圖片先轉換因此，建議將所有想要放到網頁上的圖片先轉換成成 GIFGIF 與與 JPEGJPEG 格式。格式。

8.18.1 　圖檔格式　圖檔格式

44

GIF(Graphics Interchange Format)GIF(Graphics Interchange Format) 格式的圖檔將格式的圖檔將每一個像素點，使用每一個像素點，使用 88 個位元來儲存像素點的顏個位元來儲存像素點的顏色，因此最多可以顯示色，因此最多可以顯示 28=25628=256 種顏色。種顏色。

由於由於 GIFGIF 是透過儲存像素點的顏色來完成一張圖是透過儲存像素點的顏色來完成一張圖片的格式，因此，屬於點陣圖的一種片的格式，因此，屬於點陣圖的一種 (BMP(BMP 也是也是點陣圖的一種點陣圖的一種 )) 。。

8.1.18.1.1 　　 GIFGIF 格式圖片格式圖片

55

8.1.18.1.1 　　 GIFGIF 格式圖片格式圖片 目前目前 GIFGIF 的版本可以分成兩種：舊版的的版本可以分成兩種：舊版的 GIF87aGIF87a

與新版的與新版的 GIF89aGIF89a ，，其中新版其中新版 GIF89aGIF89a 又可以分為又可以分為交織與非交織兩種格式。交織與非交織兩種格式。

GIFGIF 圖檔的顯示速度比圖檔的顯示速度比 JPEGJPEG 來得快許多，但在來得快許多，但在畫質上就顯得差了一些。因此常被用來製作圖檔畫質上就顯得差了一些。因此常被用來製作圖檔特效，例如：製作動畫或製作透明圖形特效，例如：製作動畫或製作透明圖形 (( 背景可背景可以 設 定以 設 定 )) 等 等 。等 等 。 GIFGIF 圖 檔 的 副 檔 名 一 般 為圖 檔 的 副 檔 名 一 般 為『『 ..gifgif 』。』。

66

8.1.28.1.2 　　 JPEGJPEG 格式圖片格式圖片 JPEGJPEG 格式的圖檔則是一種向量圖檔，因此格式的圖檔則是一種向量圖檔，因此 JPEGJPEG

格式所需要的儲存空間較大，圖檔在存檔前必須格式所需要的儲存空間較大，圖檔在存檔前必須先經過一番壓縮處理，以減少檔案大小，也因此先經過一番壓縮處理，以減少檔案大小，也因此會造成些許失真，尤其是圖形面積較大時特別明會造成些許失真，尤其是圖形面積較大時特別明顯。顯。

JPEGJPEG 格式所支援的色彩為格式所支援的色彩為 1616 百萬色，因此畫質百萬色，因此畫質比比 GIFGIF 好了很多，其副檔名為『好了很多，其副檔名為『 ..jpgjpg 』。』。

77

屬性屬性 屬性值屬性值 功能說明功能說明 語法語法 負面負面srcsrc URLURL 設定圖檔來源設定圖檔來源 8.2.18.2.1

altalt 文字文字 設定圖片文字說明設定圖片文字說明 8.2.28.2.2

heightheight NN 個個pixelspixels 設定圖片的高度設定圖片的高度

8.2.38.2.3

widthwidth NN 個個pixelspixels 設定圖片的寬度設定圖片的寬度

8.28.2 　插入圖片　插入圖片 <<img>img>

在網頁中插入圖片主要是透過在網頁中插入圖片主要是透過 <<img>img> 獨立標籤來獨立標籤來完成，完成， <<img>img> 最主要的屬性是最主要的屬性是 srcsrc 屬性，屬性， srcsrc 屬屬性 是 用 來 指 定 圖 片 的 所 在 位 置 ， 其 他 尚 有性 是 用 來 指 定 圖 片 的 所 在 位 置 ， 其 他 尚 有widthwidth 、、 heightheight 、、 hspacehspace 、、 vspacevspace 、、 borderborder 、、alignalign 、、 altalt 、、 lowsrclowsrc 、、 usemapusemap 等屬性。等屬性。

88

8.28.2 　插入圖片　插入圖片 <<img>img>

屬性屬性 屬性值屬性值 功能說明功能說明 語法語法 負面負面

borderborder 數字數字 設定圖片外框的厚度設定圖片外框的厚度 8.2.48.2.4非非XHTML1.0SXHTML1.0S標準標準

alignalign toptop 、、 middlemiddle 、、 bobottomttom 、、 leftleft 或或 rightright 設定圖片與文字的相對位置設定圖片與文字的相對位置 8.2.58.2.5

非非XHTML1.0SXHTML1.0S標準標準

hspacehspace NN 個個 pixelspixels 設定圖片與文字的水平間隔設定圖片與文字的水平間隔8.2.68.2.6

非非XHTML1.0SXHTML1.0S標準標準vspacevspace NN 個個 pixelspixels 設定圖片與文字的垂直間隔設定圖片與文字的垂直間隔

lowsrclowsrc URLURL 設定先顯示的圖檔來源設定先顯示的圖檔來源 8.38.3 非標準非標準

usemapusemap ## 地圖名稱地圖名稱 設定多方超鏈結所參考的地圖設定多方超鏈結所參考的地圖 8.4.28.4.2<img>屬性列表

99

8.2.18.2.1 <<img>img> －－ srcsrc 屬性屬性 srcsrc 屬性是用來設定圖檔的所在位置，圖檔則不限屬性是用來設定圖檔的所在位置，圖檔則不限

定於使用同一部電腦或伺服器中的圖檔。定於使用同一部電腦或伺服器中的圖檔。

如果所想要插入的圖片檔案位於其他伺服器時，如果所想要插入的圖片檔案位於其他伺服器時，只要指定該檔案的只要指定該檔案的 URLURL 位置，就可以正確地將圖位置，就可以正確地將圖片插入我們的網頁中。片插入我們的網頁中。

範例範例 8-18-1 ：： 內容內容 執行結果執行結果

1010

8.2.28.2.2 　　 <<img> - altimg> - alt 屬性屬性 altalt 屬性是用來設定該圖片的說明，在一般正常狀屬性是用來設定該圖片的說明，在一般正常狀

況下，並不會看到這些說明文字，但是當圖片遺況下，並不會看到這些說明文字，但是當圖片遺失、損壞或因為其他原因導致瀏覽器無法開啟該失、損壞或因為其他原因導致瀏覽器無法開啟該圖檔時，就會將圖檔時，就會將 altalt 屬性所指定的說明文字放入原屬性所指定的說明文字放入原本應該顯示圖片的地方。本應該顯示圖片的地方。

因此，許多網頁設計會省略因此，許多網頁設計會省略 altalt 屬性的設定。屬性的設定。

範例範例 8-28-2 ：： 內容內容 執行結果執行結果

1111

8.2.38.2.3 　　 <<img> - widthimg> - width 、、 heightheight 屬屬性性

widthwidth 與與 heightheight 屬性分別是用來設定圖片的寬與屬性分別是用來設定圖片的寬與高，當圖片原始大小比設定值還大時，圖片就會高，當圖片原始大小比設定值還大時，圖片就會被縮小塞入指定位置。被縮小塞入指定位置。

如果圖片原始大小比設定值還小時，圖片就會被如果圖片原始大小比設定值還小時，圖片就會被放大。放大。

1212

在使用此兩個屬性時，應該避免圖片因為放大或在使用此兩個屬性時，應該避免圖片因為放大或縮小導致失真的效果。動態鏈結網頁縮小導致失真的效果。動態鏈結網頁 ((更新網頁更新網頁 ))

範例範例 8-38-3 ：： 內容 執行結果內容 執行結果

8.2.38.2.3 　　 <<img> - widthimg> - width 、、 heightheight 屬屬性性

1313

8.2.48.2.4 　　 <<img> - borderimg> - border 屬性屬性 使用的是使用的是 borderborder 屬性屬性 ,, 可以在網頁中加上圖片外可以在網頁中加上圖片外

框。框。

範例範例 8-48-4 ：： 內容內容 執行結果執行結果

範例範例 8-58-5 ：： 內容內容 執行結果執行結果

1414

8.2.58.2.5 <<img> - alignimg> - align 屬性屬性 圖片與文字的對齊方式預設為圖片之後的文字與圖片與文字的對齊方式預設為圖片之後的文字與

圖片最下方一列對齊，不過可以透過圖片最下方一列對齊，不過可以透過 alignalign 屬性改屬性改變圖片與文字的對齊方式。變圖片與文字的對齊方式。 屬性值：屬性值：

toptop ：：文字靠圖形上方對齊。文字靠圖形上方對齊。 middlemiddle ：：文字靠圖形水平中間對齊。文字靠圖形水平中間對齊。 bottombottom ：：文字靠圖形下方對齊。文字靠圖形下方對齊。 (( 預設值預設值 )) leftleft ：：圖形靠左。圖形靠左。 rightright ：：圖形靠右。圖形靠右。

1515

8.2.58.2.5 <<img> - alignimg> - align 屬性屬性 範例範例 8-68-6 ：：

內容 執行結果內容 執行結果

範例範例 8-78-7 ：： 內容 執行結果內容 執行結果

1616

8.2.68.2.6 　　 <<img> - hspaceimg> - hspace 、、 vspacevspace屬性屬性

從前面的範例中可以發現，圖片與旁邊或下方的從前面的範例中可以發現，圖片與旁邊或下方的文字之間是完全沒有間隙的，這會使得整個網頁文字之間是完全沒有間隙的，這會使得整個網頁看起來有些擁擠。看起來有些擁擠。

只要透過只要透過 hspacehspace 與與 vspacevspace 屬性就可改變這種現屬性就可改變這種現象，自由地指定圖片與周圍文字的間隔空隙大小。象，自由地指定圖片與周圍文字的間隔空隙大小。

1717

HspceHspce 可 以 設 定 圖 片 與 邊 文 字 的 水 平 間可 以 設 定 圖 片 與 邊 文 字 的 水 平 間隙，隙， vspacevspace 則可以設定圖片與邊文字的重直間隙。則可以設定圖片與邊文字的重直間隙。

範例範例 8-88-8 ：： 內容 執行結果內容 執行結果

8.2.68.2.6 　　 <<img> - hspaceimg> - hspace 、、 vspacevspace屬性屬性

1818

8.38.3 　　 GIFGIF 圖檔的分段顯示圖檔的分段顯示 在前面的範例中，網頁中的圖片都是到圖檔下載在前面的範例中，網頁中的圖片都是到圖檔下載

完畢後才一次將圖片全部顯示出來。但是當網路完畢後才一次將圖片全部顯示出來。但是當網路速度較慢時，還可以設定其他顯示圖片的方式，速度較慢時，還可以設定其他顯示圖片的方式，例如：先顯示解析度較差的圖片，再慢慢顯示完例如：先顯示解析度較差的圖片，再慢慢顯示完整圖片。整圖片。

如此一來，可以讓瀏覽者預先得知該圖片的大概如此一來，可以讓瀏覽者預先得知該圖片的大概內容，不會因為網路速度較慢而苦苦等待圖片的內容，不會因為網路速度較慢而苦苦等待圖片的顯示。但是這種特殊的顯示方式，僅限用於顯示。但是這種特殊的顯示方式，僅限用於 GIFGIF圖檔。圖檔。

範例範例 8-98-9 ：： 內容內容 執行結果執行結果

1919

8.48.4 　圖片與超鏈結的整合　圖片與超鏈結的整合 圖片是一般人比較能夠接受的一種人機介面，因圖片是一般人比較能夠接受的一種人機介面，因

此，將圖片與超鏈結相結合，通常能夠吸引瀏覽此，將圖片與超鏈結相結合，通常能夠吸引瀏覽者試著按下圖片進而達到鏈結的目的。者試著按下圖片進而達到鏈結的目的。

圖片與超鏈結的結合可以分為兩種：單一超鏈結圖片與超鏈結的結合可以分為兩種：單一超鏈結與多方超鏈結。單一超鏈結代表一張圖只包含一與多方超鏈結。單一超鏈結代表一張圖只包含一個超鏈結網址，而多方超鏈結則是一張圖包含許個超鏈結網址，而多方超鏈結則是一張圖包含許多超鏈結位置，並依據瀏覽者在按下圖片時，滑多超鏈結位置，並依據瀏覽者在按下圖片時，滑鼠游標所處的位置決定超鏈結的目標。鼠游標所處的位置決定超鏈結的目標。

2020

8.4.18.4.1 　圖片與單一超鏈結整合　圖片與單一超鏈結整合 圖 片 與單一 超 鏈 結 的 整 合 非 常簡單， 只 要把圖 片 與單一 超 鏈 結 的 整 合 非 常簡單， 只 要把

<<img>img> 標籤放在標籤放在 <<a>a> 標籤之內就可以完成圖片的標籤之內就可以完成圖片的單一超鏈結了。單一超鏈結了。

範例範例 8-108-10 ：： Ch8-10-1Ch8-10-1內容內容 執行結果執行結果 Ch8-10-2Ch8-10-2內容內容

2121

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合 有時候一張圖片需要和多個超鏈結相結合，例如：有時候一張圖片需要和多個超鏈結相結合，例如：

中央政府網頁中的台灣地圖，按下台北市就會連中央政府網頁中的台灣地圖，按下台北市就會連到台北市政府的首頁，按下台中市就會連到台中到台北市政府的首頁，按下台中市就會連到台中市政府的首頁。市政府的首頁。

另外，比較常見的應用是，有一些公司的廣告圖另外，比較常見的應用是，有一些公司的廣告圖片中包含了該公司的各項業務，此時，也可以將片中包含了該公司的各項業務，此時，也可以將圖片中每項業務指定不同的超鏈結，直接連至管圖片中每項業務指定不同的超鏈結，直接連至管理該業務的網頁。理該業務的網頁。

2222

圖 8-1 多方超鏈結規劃

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合首先，必須把圖片當作是一張地圖首先，必須把圖片當作是一張地圖 (Map)(Map) ，，根據根據

地圖中不同的區域地圖中不同的區域 (Area)(Area) 給定一個特定的超鏈結給定一個特定的超鏈結目標，當然只需要規劃包含超鏈結的區域就可以目標，當然只需要規劃包含超鏈結的區域就可以了，至於地圖中不需要包含超鏈結的那些區塊就了，至於地圖中不需要包含超鏈結的那些區塊就可以不用管它了。可以不用管它了。

2323

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合 格式說明：格式說明：

(1) (1) 首先必須使用首先必須使用 <<map>map> 標籤定義一張地圖的名稱標籤定義一張地圖的名稱(name(name 屬性屬性 )) ，然後在，然後在 <<img>img> 中透過屬性中透過屬性 usemapusemap 指指定該圖片所採用的地圖。定該圖片所採用的地圖。

(2) (2) 在地圖內，應該使用在地圖內，應該使用 <<area>area> 標籤定義各個區域，標籤定義各個區域，內容包含有該區域的形狀、座標、以及所欲鏈結的目內容包含有該區域的形狀、座標、以及所欲鏈結的目標標 URLURL 。。

(3) (3) 區域形狀可以分為區域形狀可以分為 33 種：種： rect(rect( 矩形矩形 )) 、、 circle(circle( 圓圓形形 )) 、、 poly(poly( 多邊形多邊形 )) 。。

2424

<area shape="rect" coords="X1,Y1,X2,Y2" href="鏈結目標 URL">

<area shape="rect" coords="X1,Y1,X2,Y2" href="鏈結目標 URL"/>

<area shape="circle" coords="X1,Y1,R" href="鏈結目標 URL">

<area shape="circle" coords="X1,Y1,R" href="鏈結目標 URL"/>

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合各種形狀對應的座標表示法皆不同，整理如下：各種形狀對應的座標表示法皆不同，整理如下：矩形：矩形：

HTMLHTML 格式：格式：

XHTMLXHTML 格式：格式：

圓形：圓形： HTMLHTML 格式：格式：

XHTMLXHTML 格式：格式：

2525

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合 X1,Y1X1,Y1 是代表圓形的圓心座標。是代表圓形的圓心座標。 RR 是代表圓形的半徑。是代表圓形的半徑。

例如：例如： coords= "10,10,20"coords= "10,10,20" 代表的就是下圖的圓形代表的就是下圖的圓形 (( 半半徑長為徑長為 2020pixels)pixels) 。。

多邊形：多邊形： HTMLHTML 格式：格式：

XHTMLXHTML 格式：格式：<area shape="poly" coords="X1,Y1,X2,Y2, ．．．． Xn,Yn" href="鏈結目標 URL">

<area shape="poly" coords="X1,Y1,X2,Y2, ．．．． ,Xn,Yn" href="鏈結目標 URL"/>

2626

8.4.28.4.2 　圖片與多方超鏈結整合　圖片與多方超鏈結整合 nn 為 多邊形 的邊數為 多邊形 的邊數 (( 頂點 數 目頂點 數 目 )) ， 例 如， 例 如 55 邊形 就邊形 就

是 “是 “ X1,Y1,X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5”X2,Y2,X3,Y3,X4,Y4,X5,Y5” 。。而而 X,YX,Y 是代表多邊形各端是代表多邊形各端點的座標。例如：點的座標。例如： coords= “10,10,60,40,25,75”coords= “10,10,60,40,25,75” 代表的代表的就是右圖的三角形。就是右圖的三角形。

範例範例 8-118-11 ：： 內容內容 執行結果執行結果

2727

8.58.5 　圖片的整合應用　圖片的整合應用 圖片可以使網頁美觀又大方，表格與清單可以使圖片可以使網頁美觀又大方，表格與清單可以使

網頁資料整齊劃一，超鏈結則可以讓網頁達到網網頁資料整齊劃一，超鏈結則可以讓網頁達到網網相連的效果。網相連的效果。

各種各種 HTMLHTML 的標籤都各自具有特殊目的，但若這的標籤都各自具有特殊目的，但若這些標籤僅僅單一存在，則網頁就顯得平淡無奇，些標籤僅僅單一存在，則網頁就顯得平淡無奇，無法引起瀏覽者的興趣。無法引起瀏覽者的興趣。

2828

8.58.5 　圖片的整合應用　圖片的整合應用 因此，真正要完成一個漂亮的網頁，必須將各種因此，真正要完成一個漂亮的網頁，必須將各種

標籤整合在一起才能達到目的。整合各類標籤時，標籤整合在一起才能達到目的。整合各類標籤時，只要注意『巢狀性』原則就不致造成編寫只要注意『巢狀性』原則就不致造成編寫 HTMLHTML時的混亂。時的混亂。

換句話說，針對成對標籤而言，標籤的作用範圍換句話說，針對成對標籤而言，標籤的作用範圍是從開始標籤直到結束標籤為止。是從開始標籤直到結束標籤為止。

2929

8.5.18.5.1 　圖片、超鏈結、清單的整合應用　圖片、超鏈結、清單的整合應用 以下製作一個包含圖片、超鏈結以及清單的範例，以下製作一個包含圖片、超鏈結以及清單的範例，

使用圖片做為清單符號，而清單內容則是一個超使用圖片做為清單符號，而清單內容則是一個超鏈結。鏈結。

可以說可以說 XHTML 1.0XHTML 1.0 是過去與現在的是過去與現在的 XHTMLXHTML 版本，版本，而而 XHTML 1.1XHTML 1.1 則是現在及未來的則是現在及未來的 XHTMLXHTML 版本，版本，並且並且 XHTML 1.1XHTML 1.1 為一個完整版的為一個完整版的 XHTMLXHTML 。。

範例範例 8-128-12 ：： 內容內容 執行結果執行結果

3030

8.5.28.5.2 　圖片、超鏈結、表格的整合應用　圖片、超鏈結、表格的整合應用 以下製作一個包含圖片、超鏈結以及表格的範例，以下製作一個包含圖片、超鏈結以及表格的範例，

這種整合範例是一般網頁中最常見的應用。這種整合範例是一般網頁中最常見的應用。

範例範例 8-138-13 ：： 內容 執行結果內容 執行結果

3131

8.5.38.5.3 　表格與圖片切割的整合應用　表格與圖片切割的整合應用 有的時候由於網路傳輸較慢，因此下載一個較大有的時候由於網路傳輸較慢，因此下載一個較大

的圖片必須花費很多時間，此時瀏覽者會以為網的圖片必須花費很多時間，此時瀏覽者會以為網路停頓了。路停頓了。

為了避免這種錯覺，可以將圖片分割為許多的小為了避免這種錯覺，可以將圖片分割為許多的小圖片，然後再將每一個小圖片放入表格中圖片，然後再將每一個小圖片放入表格中 (( 框線框線為為 00)) ，瀏覽器只要下載某一個小圖片就會先顯示，瀏覽器只要下載某一個小圖片就會先顯示一個小圖片，所以圖片會分區域慢慢顯示，如此一個小圖片，所以圖片會分區域慢慢顯示，如此一來，瀏覽者就不至於感到網路停頓的錯覺了。一來，瀏覽者就不至於感到網路停頓的錯覺了。

範例範例 8-148-14 ：： 內容 執行結果內容 執行結果

3232

8.5.38.5.3 　表格與圖片切割的整合應用　表格與圖片切割的整合應用 在上一個範例中，明顯看到圖片無法緊密靠在一在上一個範例中，明顯看到圖片無法緊密靠在一起，其實是儲存格距離起，其實是儲存格距離 (cellspacing)(cellspacing) 與儲存格文與儲存格文字間距字間距 (cellpadding)(cellpadding) 兩個屬性的原因，重新設定兩個屬性的原因，重新設定這兩個屬性就可以緊緊地靠在一起了。這兩個屬性就可以緊緊地靠在一起了。

範例範例 8-158-15 ：： 內容 執行結果內容 執行結果

3333

8.68.6 　網頁　網頁 DIYDIY

請翻閱至請翻閱至 18.818.8 節，把預先準備好的漂亮圖片加入節，把預先準備好的漂亮圖片加入網頁中，並且將這些圖片與超鏈結做適當的結合，網頁中，並且將這些圖片與超鏈結做適當的結合，如此一來，網頁除了美麗之外，也能吸引瀏覽者如此一來，網頁除了美麗之外，也能吸引瀏覽者按下超鏈結，取得更多的資訊。按下超鏈結，取得更多的資訊。

3434

本章習題本章習題