1、第5章 圖片的加入與應用,5-1網頁背景的處理5-2網頁插圖的處理5-3滑鼠變換影像（Rollover 圖片）5-4製作影像地圖,5-1網頁背景的處理,常用的網頁影像格式(1)GIFGIF 圖檔格式是網際網路上最常使用的格式，副檔名為.gif，檔案本身是透過一個256 色的索引色色盤來決定影像本身的顏色內容，較適合卡通類型的圖片或線條圖案的表現。雖然最多可以使用到256 色，只要圖案中的色彩量不多，就可以考慮降低色彩數目，這樣就能有效降低檔案量。,常用的網頁影像格式(2),JPEGJPEG 圖檔格式適合用來表現色彩豐富的影像或照片，支援 24-bit 色彩，副檔名格式為.jpg 或jpeg，儲
2、存後的影像會造成失真現象，但壓縮比率相當高，屬於破壞性壓縮的全彩影像格式。一般的繪圖軟體在儲存成此種格式時，都會出現一個可以選擇壓縮比例的視窗或選項，以供使用者自行決定影像品質及壓縮比例的一個平衡點。,常用的網頁影像格式(3),PNGPNG 是一種支援高色彩的非破壞性圖檔壓縮格式，具有不失真的特性，它結合了GIF 和JPEG 兩種格式的優點，既可儲存為交錯圖，也可以製作透明背景，不過這種格式被開發出來的時間比較晚，並非所有的影像繪圖程式都可支援，使用率還不夠普遍，但已漸漸受到網頁設計師的青睞。以上這三種圖檔格式，各位可針對它們的特點來選用適合的影像格式。,加入網頁背景(1),HTML 外觀,加
3、入網頁背景(2),CSS 外觀,網頁背景使用技巧(1),1. 背景影像可以使用如上示範的小圖，再透過Dreamweaver 來幫您拼接成大張的底圖，這樣網頁下載的速度會比較快速。2. 在色彩的選用上，背景影像的色彩對比最好越小越好，如此才不會影響到網頁文字的閱讀。如圖所示，右圖的底色對比小於左圖，會讓文字的易讀性增加。,網頁背景使用技巧(2),3. 不管網頁背景是選用淺色調或深色調，網頁底圖與網頁文字的明暗對比或反差要越大越好，這樣文字的明視度才會高。,網頁背景使用技巧(3),4. 選用大張影像作為網頁背景時，雖然能讓網頁主題更為強眼，但是圖檔太大會影響下載的時間，因此最好能在不影響品質的狀態
4、下，利用前面介紹的壓縮方式來有效壓縮圖檔。5. 若網頁內容超過背景底圖時，可能會出現圖片拼接不良或斷掉的情形。要避免產生明顯的接縫情形，建議圖形的水平寬度最好設在1024 像素比較保險。,網頁背景使用技巧(4),6. 當網頁上的文字內容過多時，若文字內容大過於圖形的高度，也會出現圖形重複拼接的狀況，如果各位不希望底圖捲動，只希望文字捲動，可以巧妙利用CSS 屬性的設定。其設定方式簡要說明如下，而它的完成結果可參閱範例檔：0505_ 背景不動文字捲動ok.html。,5-2網頁插圖的處理,從檔案加入圖片,文繞圖效果設定,剪裁圖片,調整圖片尺寸,設定圖片周邊間距,設定圖片邊框及套用CSS 邊框樣式
5、,加入影像預留位置,修改圖片來源,5-3滑鼠變換影像（Rollover 圖片）,要製作這種效果，利用插入/ 影像物件/ 滑鼠變換影像指令就能辦到。設定方式如下：,5-4製作影像地圖,影像地圖的設定項目(1),影像地圖的設定項目(2),連結區域工具連結區域的工具鈕共有四個， 鈕用來設定矩形的超連結區域， 鈕可設定圓形的超連結區域，而 鈕則是設定不規則形狀的超連結區域。在設定區域範圍後，如果想要調整連結區域的位置或大小，使它與區域範圍密合，則可以使用 鈕來處理。,影像地圖的設定項目(3),連結目標開啟方式_blank：點選連結後，會開啟另一個新視窗，為最常使用的設定方式。_parent：被超連結的文件會出現在母視窗中。_self：點選連結後，文件會出現在同一個視窗。_top：點選連結後會去除目前的框架，而以全視窗的方式呈現。,影像地圖設定,本章結束,Q&A討論時間,
