1 / 34

專業 HTML 網頁設計

P303. 專業 HTML 網頁設計. HTML/DHTML/CSS/JavaScript. 陳錦輝. 第八章　網頁的圖片. 8.1 圖檔格式 8.2 插入圖片< img> 8.3 GIF 圖檔的分段顯示 (lowsrc 屬性 ) 8.4 圖片與超鏈結的整合 8.5 圖片的整合應用 8.6 網頁 DIY. 8.1 　圖檔格式. 圖片的格式有許多種，例如： GIF、JPEG、BMP、PCX、TIF、、 等等。

xerxes-rogers
Download Presentation

專業 HTML 網頁設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

  2. 第八章　網頁的圖片 • 8.1 圖檔格式 • 8.2 插入圖片<img> • 8.3 GIF圖檔的分段顯示(lowsrc屬性) • 8.4 圖片與超鏈結的整合 • 8.5 圖片的整合應用 • 8.6 網頁DIY

  3. 8.1　圖檔格式 • 圖片的格式有許多種，例如：GIF、JPEG、BMP、PCX、TIF、、等等。 • 瀏覽器所內定支援的只有GIF與JPEG兩種格式，如果要觀看其他格式的圖片，則需要外掛程式的輔助。 • 因此，建議將所有想要放到網頁上的圖片先轉換成GIF與JPEG格式。

  4. 8.1.1GIF格式圖片 • GIF(Graphics Interchange Format)格式的圖檔將每一個像素點，使用8個位元來儲存像素點的顏色，因此最多可以顯示28=256種顏色。 • 由於GIF是透過儲存像素點的顏色來完成一張圖片的格式，因此，屬於點陣圖的一種(BMP也是點陣圖的一種)。

  5. 8.1.1GIF格式圖片 • 目前GIF的版本可以分成兩種：舊版的GIF87a與新版的GIF89a，其中新版GIF89a又可以分為交織與非交織兩種格式。 • GIF圖檔的顯示速度比JPEG來得快許多，但在畫質上就顯得差了一些。因此常被用來製作圖檔特效，例如：製作動畫或製作透明圖形(背景可以設定)等等。GIF圖檔的副檔名一般為『.gif』。

  6. 8.1.2　JPEG格式圖片 • JPEG格式的圖檔則是一種向量圖檔，因此JPEG格式所需要的儲存空間較大，圖檔在存檔前必須先經過一番壓縮處理，以減少檔案大小，也因此會造成些許失真，尤其是圖形面積較大時特別明顯。 • JPEG格式所支援的色彩為16百萬色，因此畫質比GIF好了很多，其副檔名為『.jpg』。

  7. 8.2　插入圖片<img> • 在網頁中插入圖片主要是透過<img>獨立標籤來完成，<img>最主要的屬性是src屬性，src屬性是用來指定圖片的所在位置，其他尚有width、height、hspace、vspace、border、align、alt、lowsrc、usemap等屬性。

  8. 8.2　插入圖片<img> <img>屬性列表

  9. 8.2.1 <img>－src屬性 • src屬性是用來設定圖檔的所在位置，圖檔則不限定於使用同一部電腦或伺服器中的圖檔。 • 如果所想要插入的圖片檔案位於其他伺服器時，只要指定該檔案的URL位置，就可以正確地將圖片插入我們的網頁中。 • 範例8-1： • 內容執行結果

  10. 8.2.2　<img> - alt屬性 • alt屬性是用來設定該圖片的說明，在一般正常狀況下，並不會看到這些說明文字，但是當圖片遺失、損壞或因為其他原因導致瀏覽器無法開啟該圖檔時，就會將alt屬性所指定的說明文字放入原本應該顯示圖片的地方。 • 因此，許多網頁設計會省略alt屬性的設定。 • 範例8-2： • 內容執行結果

  11. 8.2.3　<img> - width、height屬性 • width與height屬性分別是用來設定圖片的寬與高，當圖片原始大小比設定值還大時，圖片就會被縮小塞入指定位置。 • 如果圖片原始大小比設定值還小時，圖片就會被放大。

  12. 8.2.3　<img> - width、height屬性 • 在使用此兩個屬性時，應該避免圖片因為放大或縮小導致失真的效果。動態鏈結網頁(更新網頁) • 範例8-3： • 內容執行結果

  13. 8.2.4　<img> - border屬性 • 使用的是border屬性,可以在網頁中加上圖片外框。 • 範例8-4： • 內容執行結果 • 範例8-5： • 內容執行結果

  14. 8.2.5 <img> - align屬性 • 圖片與文字的對齊方式預設為圖片之後的文字與圖片最下方一列對齊，不過可以透過align屬性改變圖片與文字的對齊方式。 • 屬性值： • top：文字靠圖形上方對齊。 • middle：文字靠圖形水平中間對齊。 • bottom：文字靠圖形下方對齊。(預設值) • left：圖形靠左。 • right：圖形靠右。

  15. 8.2.5 <img> - align屬性 • 範例8-6： • 內容執行結果 • 範例8-7： • 內容執行結果

  16. 8.2.6　<img> - hspace、vspace屬性 • 從前面的範例中可以發現，圖片與旁邊或下方的文字之間是完全沒有間隙的，這會使得整個網頁看起來有些擁擠。 • 只要透過hspace與vspace屬性就可改變這種現象，自由地指定圖片與周圍文字的間隔空隙大小。

  17. 8.2.6　<img> - hspace、vspace屬性 • Hspce可以設定圖片與邊文字的水平間隙，vspace則可以設定圖片與邊文字的重直間隙。 • 範例8-8： • 內容執行結果

  18. 8.3　GIF圖檔的分段顯示 • 在前面的範例中，網頁中的圖片都是到圖檔下載完畢後才一次將圖片全部顯示出來。但是當網路速度較慢時，還可以設定其他顯示圖片的方式，例如：先顯示解析度較差的圖片，再慢慢顯示完整圖片。 • 如此一來，可以讓瀏覽者預先得知該圖片的大概內容，不會因為網路速度較慢而苦苦等待圖片的顯示。但是這種特殊的顯示方式，僅限用於GIF圖檔。 • 範例8-9： • 內容執行結果

  19. 8.4　圖片與超鏈結的整合 • 圖片是一般人比較能夠接受的一種人機介面，因此，將圖片與超鏈結相結合，通常能夠吸引瀏覽者試著按下圖片進而達到鏈結的目的。 • 圖片與超鏈結的結合可以分為兩種：單一超鏈結與多方超鏈結。單一超鏈結代表一張圖只包含一個超鏈結網址，而多方超鏈結則是一張圖包含許多超鏈結位置，並依據瀏覽者在按下圖片時，滑鼠游標所處的位置決定超鏈結的目標。

  20. 8.4.1　圖片與單一超鏈結整合 • 圖片與單一超鏈結的整合非常簡單，只要把<img>標籤放在<a>標籤之內就可以完成圖片的單一超鏈結了。 • 範例8-10： • Ch8-10-1內容執行結果 • Ch8-10-2內容

  21. 8.4.2　圖片與多方超鏈結整合 • 有時候一張圖片需要和多個超鏈結相結合，例如：中央政府網頁中的台灣地圖，按下台北市就會連到台北市政府的首頁，按下台中市就會連到台中市政府的首頁。 • 另外，比較常見的應用是，有一些公司的廣告圖片中包含了該公司的各項業務，此時，也可以將圖片中每項業務指定不同的超鏈結，直接連至管理該業務的網頁。

  22. 8.4.2　圖片與多方超鏈結整合 • 首先，必須把圖片當作是一張地圖(Map)，根據地圖中不同的區域(Area)給定一個特定的超鏈結目標，當然只需要規劃包含超鏈結的區域就可以了，至於地圖中不需要包含超鏈結的那些區塊就可以不用管它了。 圖8-1 多方超鏈結規劃

  23. 8.4.2　圖片與多方超鏈結整合 • 格式說明： • (1) 首先必須使用<map>標籤定義一張地圖的名稱(name屬性)，然後在<img>中透過屬性usemap指定該圖片所採用的地圖。 • (2) 在地圖內，應該使用<area>標籤定義各個區域，內容包含有該區域的形狀、座標、以及所欲鏈結的目標URL。 • (3) 區域形狀可以分為3種：rect(矩形)、circle(圓形)、poly(多邊形)。

  24. 8.4.2　圖片與多方超鏈結整合 • 各種形狀對應的座標表示法皆不同，整理如下： • 矩形： • HTML格式： • XHTML格式： • 圓形： • HTML格式： • XHTML格式： <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"/>

  25. 8.4.2　圖片與多方超鏈結整合 • X1,Y1是代表圓形的圓心座標。R是代表圓形的半徑。例如：coords= "10,10,20"代表的就是下圖的圓形(半徑長為20pixels)。 • 多邊形： • HTML格式： • XHTML格式： <area shape="poly" coords="X1,Y1,X2,Y2,．．．．Xn,Yn" href="鏈結目標URL"> <area shape="poly" coords="X1,Y1,X2,Y2,．．．．,Xn,Yn" href="鏈結目標URL"/>

  26. 8.4.2　圖片與多方超鏈結整合 • n為多邊形的邊數(頂點數目)，例如5邊形就是“X1,Y1,X2,Y2,X3,Y3,X4,Y4,X5,Y5”。而X,Y是代表多邊形各端點的座標。例如：coords= “10,10,60,40,25,75”代表的就是右圖的三角形。 • 範例8-11： • 內容執行結果

  27. 8.5　圖片的整合應用 • 圖片可以使網頁美觀又大方，表格與清單可以使網頁資料整齊劃一，超鏈結則可以讓網頁達到網網相連的效果。 • 各種HTML的標籤都各自具有特殊目的，但若這些標籤僅僅單一存在，則網頁就顯得平淡無奇，無法引起瀏覽者的興趣。

  28. 8.5　圖片的整合應用 • 因此，真正要完成一個漂亮的網頁，必須將各種標籤整合在一起才能達到目的。整合各類標籤時，只要注意『巢狀性』原則就不致造成編寫HTML時的混亂。 • 換句話說，針對成對標籤而言，標籤的作用範圍是從開始標籤直到結束標籤為止。

  29. 8.5.1　圖片、超鏈結、清單的整合應用 • 以下製作一個包含圖片、超鏈結以及清單的範例，使用圖片做為清單符號，而清單內容則是一個超鏈結。 • 可以說XHTML 1.0是過去與現在的XHTML版本，而XHTML 1.1則是現在及未來的XHTML版本，並且XHTML 1.1為一個完整版的XHTML。 • 範例8-12： • 內容執行結果

  30. 8.5.2　圖片、超鏈結、表格的整合應用 • 以下製作一個包含圖片、超鏈結以及表格的範例，這種整合範例是一般網頁中最常見的應用。 • 範例8-13： • 內容執行結果

  31. 8.5.3　表格與圖片切割的整合應用 • 有的時候由於網路傳輸較慢，因此下載一個較大的圖片必須花費很多時間，此時瀏覽者會以為網路停頓了。 • 為了避免這種錯覺，可以將圖片分割為許多的小圖片，然後再將每一個小圖片放入表格中(框線為0)，瀏覽器只要下載某一個小圖片就會先顯示一個小圖片，所以圖片會分區域慢慢顯示，如此一來，瀏覽者就不至於感到網路停頓的錯覺了。 • 範例8-14： • 內容執行結果

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

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

  34. 本章習題

More Related