《专业HTML网页设计说明》由会员分享，可在线阅读，更多相关《专业HTML网页设计说明（35页珍藏版）》请在金锄头文库上搜索。
1、專業專業HTMLHTML網頁設計網頁設計 陳錦輝陳錦輝 HTML/DHTML/CSS/JavaScript P303 2 2 第八章 網頁的圖片第八章 網頁的圖片 l l 8.1 8.1 圖檔格式圖檔格式 l l 8.28.2 插入圖片插入圖片 l l 8.38.3 GIFGIF圖檔的分段顯示圖檔的分段顯示(lowsrc(lowsrc屬性屬性) ) l l 8.4 8.4 圖片與超鏈結的整合圖片與超鏈結的整合 l l 8.5 8.5 圖片的整合應用圖片的整合應用 l l 8.6 8.6 網頁網頁DIYDIY 3 3 l l 圖片的格式有許多種，例如：圖片的格式有許多種，例如：GIFGIF、JP
2、EGJPEG、BMPBMP 、PCXPCX、TIFTIF、等等。等等。 l l 瀏覽器所內定支援的只有瀏覽器所內定支援的只有GIFGIF與與JPEGJPEG兩種格式，兩種格式， 如果要觀看其他格式的圖片，則需要外掛程式的如果要觀看其他格式的圖片，則需要外掛程式的 輔助。輔助。 l l 因此，建議將所有想要放到網頁上的圖片先轉換因此，建議將所有想要放到網頁上的圖片先轉換 成成GIFGIF與與JPEGJPEG格式。格式。 8.18.1 圖檔格式 圖檔格式 4 4 l l GIF(Graphics GIF(Graphics Interchange Interchange Format)Format)
3、格式的圖檔將格式的圖檔將 每一個像素點，使用每一個像素點，使用8 8個位元來儲存像素點的顏色個位元來儲存像素點的顏色 ，因此最多可以顯示，因此最多可以顯示28=25628=256種顏色。種顏色。 l l 由於由於GIFGIF是透過儲存像素點的顏色來完成一張圖是透過儲存像素點的顏色來完成一張圖 片的格式，因此，屬於點陣圖的一種片的格式，因此，屬於點陣圖的一種(BMP(BMP也是點也是點 陣圖的一種陣圖的一種) )。 8.1.18.1.1 GIFGIF格式圖片格式圖片 5 5 8.1.18.1.1 GIFGIF格式圖片格式圖片 l l 目前目前GIFGIF的版本可以分成兩種：舊版的的版本可以分成兩
4、種：舊版的GIF87aGIF87a與與 新版的新版的GIF89aGIF89a，其中新版其中新版GIF89aGIF89a又可以分為交又可以分為交 織與非交織兩種格式。織與非交織兩種格式。 l l GIFGIF圖檔的顯示速度比圖檔的顯示速度比JPEGJPEG來得快許多，但在畫來得快許多，但在畫 質上就顯得差了一些。因此常被用來製作圖檔特質上就顯得差了一些。因此常被用來製作圖檔特 效，例如：製作動畫或製作透明圖形效，例如：製作動畫或製作透明圖形( (背景可以設背景可以設 定定) )等等。等等。GIFGIF圖檔的副檔名一般為圖檔的副檔名一般為. .gifgif。 6 6 8.1.28.1.2 JPEG
5、JPEG格式圖片格式圖片 l l JPEGJPEG格式的圖檔則是一種向量圖檔，因此格式的圖檔則是一種向量圖檔，因此JPEGJPEG 格式所需要的儲存空間較大，圖檔在存檔前必須格式所需要的儲存空間較大，圖檔在存檔前必須 先經過一番壓縮處理，以減少檔案大小，也因此先經過一番壓縮處理，以減少檔案大小，也因此 會造成些許失真，尤其是圖形面積較大時特別明會造成些許失真，尤其是圖形面積較大時特別明 顯。顯。 l l JPEGJPEG格式所支援的色彩為格式所支援的色彩為1616百萬色，因此畫質百萬色，因此畫質 比比GIFGIF好了很多，其副檔名為好了很多，其副檔名為. .jpgjpg。 7 7 屬性屬性屬性
6、值屬性值功能說明功能說明語法語法負面負面 srcsrcURLURL設定圖檔來源設定圖檔來源8.2.18.2.1 altalt文字文字設定圖片文字說明設定圖片文字說明8.2.28.2.2 heightheightN N個個pixelspixels設定圖片的高度設定圖片的高度 8.2.38.2.3 widthwidthN N個個pixelspixels設定圖片的寬度設定圖片的寬度 8.28.2 插入圖片 插入圖片 l l 在網頁中插入圖片主要是透過在網頁中插入圖片主要是透過獨立標籤來獨立標籤來 完成，完成，最主要的屬性是最主要的屬性是srcsrc屬性，屬性，srcsrc屬性是屬性是 用來指定圖片的
7、所在位置，其他尚有用來指定圖片的所在位置，其他尚有widthwidth、 heightheight、hspacehspace、vspacevspace、borderborder、alignalign、altalt、 lowsrclowsrc、usemapusemap等屬性。等屬性。 8 8 8.28.2 插入圖片 插入圖片 屬性屬性屬性值屬性值功能說明功能說明語法語法負面負面 borderborder數字數字設定圖片外框的厚度設定圖片外框的厚度8.2.48.2.4 非非XHTML1.0SXHTML1.0S 標準標準 alignalign toptop、middlemiddle、 bottomb
8、ottom、leftleft或或rightright 設定圖片與文字的相對位置設定圖片與文字的相對位置8.2.58.2.5 非非XHTML1.0SXHTML1.0S 標準標準 hspacehspaceN N個個pixelspixels設定圖片與文字的水平間隔設定圖片與文字的水平間隔8.2.68.2.6 非非XHTML1.0SXHTML1.0S 標準標準 vspacevspaceN N個個pixelspixels設定圖片與文字的垂直間隔設定圖片與文字的垂直間隔 lowsrclowsrcURLURL設定先顯示的圖檔來源設定先顯示的圖檔來源8.38.3非標準 非標準 usemapusemap# #地
9、圖名稱地圖名稱設定多方超鏈結所參考的地圖設定多方超鏈結所參考的地圖8.4.28.4.2 屬性列表 9 9 8.2.18.2.1srcsrc屬性屬性 l l srcsrc屬性是用來設定圖檔的所在位置，圖檔則不限屬性是用來設定圖檔的所在位置，圖檔則不限 定於使用同一部電腦或伺服器中的圖檔。定於使用同一部電腦或伺服器中的圖檔。 l l 如果所想要插入的圖片檔案位於其他伺服器時，如果所想要插入的圖片檔案位於其他伺服器時， 只要指定該檔案的只要指定該檔案的URLURL位置，就可以正確地將圖位置，就可以正確地將圖 片插入我們的網頁中。片插入我們的網頁中。 l l 範例範例8-18-1： l l 內容內容
10、執行結果執行結果 1010 8.2.28.2.2 - alt屬性屬性 l l altalt屬性是用來設定該圖片的說明，在一般正常狀屬性是用來設定該圖片的說明，在一般正常狀 況下，並不會看到這些說明文字，但是當圖片遺況下，並不會看到這些說明文字，但是當圖片遺 失、損壞或因為其他原因導致瀏覽器無法開啟該失、損壞或因為其他原因導致瀏覽器無法開啟該 圖檔時，就會將圖檔時，就會將altalt屬性所指定的說明文字放入原屬性所指定的說明文字放入原 本應該顯示圖片的地方。本應該顯示圖片的地方。 l l 因此，許多網頁設計會省略因此，許多網頁設計會省略altalt屬性的設定。屬性的設定。 l l 範例範例8-2
11、8-2： l l 內容內容 執行結果執行結果 1111 8.2.38.2.3 - width、heightheight屬性屬性 l l widthwidth與與heightheight屬性分別是用來設定圖片的寬與高屬性分別是用來設定圖片的寬與高 ，當圖片原始大小比設定值還大時，圖片就會被，當圖片原始大小比設定值還大時，圖片就會被 縮小塞入指定位置。縮小塞入指定位置。 l l 如果圖片原始大小比設定值還小時，圖片就會被如果圖片原始大小比設定值還小時，圖片就會被 放大。放大。 1212 l l 在使用此兩個屬性時，應該避免圖片因為放大或在使用此兩個屬性時，應該避免圖片因為放大或 縮小導致失真的效果
12、。動態鏈結網頁縮小導致失真的效果。動態鏈結網頁( (更新網頁更新網頁) ) l l 範例範例8-38-3： l l 內容內容 執行結果執行結果 8.2.38.2.3 - width、heightheight屬性屬性 1313 8.2.48.2.4 - border屬性屬性 l l 使用的是使用的是borderborder屬性屬性, ,可以在網頁中加上圖片外框可以在網頁中加上圖片外框 。 l l 範例範例8-48-4： l l 內容內容 執行結果執行結果 l l 範例範例8-58-5： l l 內容內容 執行結果執行結果 1414 8.2.58.2.5 - align屬性屬性 l l 圖片與文字
13、的對齊方式預設為圖片之後的文字與圖片與文字的對齊方式預設為圖片之後的文字與 圖片最下方一列對齊，不過可以透過圖片最下方一列對齊，不過可以透過alignalign屬性改屬性改 變圖片與文字的對齊方式。變圖片與文字的對齊方式。 l l 屬性值：屬性值： l l toptop：文字靠圖形上方對齊。文字靠圖形上方對齊。 l l middlemiddle：文字靠圖形水平中間對齊。文字靠圖形水平中間對齊。 l l bottombottom：文字靠圖形下方對齊。文字靠圖形下方對齊。( (預設值預設值) ) l l leftleft：圖形靠左。圖形靠左。 l l rightright：圖形靠右。圖形靠右。 1
14、515 8.2.58.2.5 - align屬性屬性 l l 範例範例8-68-6： l l 內容內容 執行結果執行結果 l l 範例範例8-78-7： l l 內容內容 執行結果執行結果 1616 8.2.68.2.6 - hspace、vspacevspace屬性屬性 l l 從前面的範例中可以發現，圖片與旁邊或下方的從前面的範例中可以發現，圖片與旁邊或下方的 文字之間是完全沒有間隙的，這會使得整個網頁文字之間是完全沒有間隙的，這會使得整個網頁 看起來有些擁擠。看起來有些擁擠。 l l 只要透過只要透過hspacehspace與與vspacevspace屬性就可改變這種現象屬性就可改變這種
15、現象 ，自由地指定圖片與周圍文字的間隔空隙大小。，自由地指定圖片與周圍文字的間隔空隙大小。 1717 l l HspceHspce可以設定圖片與邊文字的水平間隙，可以設定圖片與邊文字的水平間隙， vspacevspace則可以設定圖片與邊文字的重直間隙。則可以設定圖片與邊文字的重直間隙。 l l 範例範例8-88-8： l l 內容內容 執行結果執行結果 8.2.68.2.6 - hspace、vspacevspace屬性屬性 1818 8.38.3 GIFGIF圖檔的分段顯示圖檔的分段顯示 l l 在前面的範例中，網頁中的圖片都是到圖檔下載在前面的範例中，網頁中的圖片都是到圖檔下載 完畢後才
16、一次將圖片全部顯示出來。但是當網路完畢後才一次將圖片全部顯示出來。但是當網路 速度較慢時，還可以設定其他顯示圖片的方式，速度較慢時，還可以設定其他顯示圖片的方式， 例如：先顯示解析度較差的圖片，再慢慢顯示完例如：先顯示解析度較差的圖片，再慢慢顯示完 整圖片。整圖片。 l l 如此一來，可以讓瀏覽者預先得知該圖片的大概如此一來，可以讓瀏覽者預先得知該圖片的大概 內容，不會因為網路速度較慢而苦苦等待圖片的內容，不會因為網路速度較慢而苦苦等待圖片的 顯示。但是這種特殊的顯示方式，僅限用於顯示。但是這種特殊的顯示方式，僅限用於GIFGIF 圖檔。圖檔。 l l 範例範例8-98-9： l l 內容內容 執行結果執行結果
