加入网页背景.ppt

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