网页背景与图片

第5章網頁背景與圖片 5 1網頁圖片的檔案格式5 2網頁背景5 3插入圖片5 4圖片的編輯5 5圖片的影像處理 5 1網頁圖片的檔案格式 1 GIF圖檔格式 GIF 是GraphicsInterchangeFormat的簡稱 副檔名為 gif 這是CompuServe公司制定的圖檔格式 這是一種圖片檔案的交換標準 支援256色使用LZW方式壓縮的圖檔格式 GIF格式的圖檔分為兩種模式Interlaced交錯模式和NonInterlaced非交錯模式 交錯模式在顯示圖片時是逐漸顯示 換句話說 當載入這種格式的圖片時 剛開始只會顯示較模糊的影像 然後逐漸清楚直到圖檔全部下載完畢 非交錯模式就不支援這種效果 5 1網頁圖片的檔案格式 2 JPEG圖檔格式 JPEG 即是其制定組織JointPhotographicExpertsGroup的簡稱 副檔名為 jpg 這是一種能夠壓縮全彩圖片圖檔格式 使用的壓縮方法可以依照所需的壓縮比率調整圖片品質 可以得到最小的圖檔尺寸 支援24bits的全彩圖片 5 1網頁圖片的檔案格式 3 PNG圖檔格式 PNG 是PortableGraphicsNetwork的簡稱 在1996年才由W3C所制定的Web標準圖檔格式 副檔名為 png 這是一種完全開放的網頁圖檔格式 其尺寸比上述兩種格式稍大 目前並沒有普遍應用在網頁設計 PNG格式圖檔也分為Interlaced交錯模式和NonInterlaced非交錯模式 5 2網頁背景 5 2 1網頁的背景色彩5 2 2網頁的背景圖片5 2 3背景圖片的浮水印效果 5 2 1網頁的背景色彩 背景色彩是美化網頁的最簡單方式 第四章的範例網頁 十二星座大觀 就設定有背景色彩 現在筆者準備使用這頁網頁為例 說明如何在FrontPage設定網頁的背景色彩 5 2 2網頁的背景圖片 如果擁有背景的圖片檔案 我們可以如同貼磁磚般使用圖片作為網頁背景 在第二章的 青春YA總會 網頁就是使用背景圖片的網頁範例 5 2 3背景圖片的浮水印效果 網頁的背景圖片在正常的情況是隨著文字內容捲動 如果文字內容捲動時 背景圖片不跟著捲動 好像是一個固定的背景 我們稱為浮水印效果 5 3插入圖片 5 3 1插入美工圖案5 3 2從檔案插入圖片5 3 3水平線圖片 5 3 1插入美工圖案 OfficeXP家族的軟體提供現成的美工圖案 不用費心尋找 就可以在網頁插入漂亮的圖片 5 3 2從檔案插入圖片 只需擁有網頁支援的圖檔格式 我們就可以在FrontPage將圖片檔案插入網頁 5 3 3水平線圖片 在第四章插入的水平線是HTML標籤的水平線 如果擁有水平線的圖片檔案 就可以插入圖片作為網頁內容分隔的水平線 5 4圖片的編輯 5 4 1圖片的換行樣式5 4 2水平與垂直間距5 4 3設定圖片的框線5 4 4調整圖片的尺寸5 4 5圖片的替代顯示 5 4 1圖片的換行樣式 圖片的換行樣式是圖片與文字內容的編排 預設為 不對齊 此時圖片屬於文字段落的一部分 如果圖片很大 還可以設定換行樣式讓圖片編排在文字內容的左邊或右邊 5 4 2水平與垂直間距 在插入圖片選擇靠左或靠右的換行樣式後 可以設定文字內容和圖片間的水平或垂直間距 建立最佳的視覺效果 5 4 3設定圖片的框線 在FrontPage插入的圖片 預設的框線粗細為 0 所以不會顯示圖片外的框線 只需設定框線的粗細 就可以顯示圖片的框線 5 4 4調整圖片的尺寸 在FrontPage插入的圖片使用的是圖片的原尺寸 如果圖片尺寸不符合需求 可以直接在FrontPage調整圖片的尺寸 5 4 5圖片的替代顯示 雖然多媒體網頁少不了圖片的裝飾 但是瀏覽程式可能關閉圖片顯示或解析度不足 我們可以替插入的圖片設定低解析度圖片或文字內容以便替代顯示 5 5圖片的影像處理 5 5 1圖片上的文字方塊5 5 2圖片的旋轉5 5 3調整圖片的對比5 5 4調整圖片的亮度5 5 5設定透明色系5 5 6灰階與刷淡處理5 5 7立體按鈕圖片5 5 8圖片的剪裁5 5 9圖片的重新取樣與還原 5 5 1圖片上的文字方塊 在FrontPage插入的GIF格式 FrontPage會自動替圖片轉換格式 圖片 可以在圖片上插入文字方塊 輸入圖片的註解文字或所需文案 5 5 2圖片的旋轉 FrontPage的圖片工具列按鈕可以將插入的圖片向左 向右旋轉 或是水平或垂直翻轉 5 5 3調整圖片的對比 FrontPage的圖片工具列按鈕可以提高和降低圖片的對比 也就是調整圖片明暗間的對比 5 5 4調整圖片的亮度 FrontPage的圖片工具列按鈕可以提高和降低圖片的亮度 也就是調整圖片的明暗 5 5 5設定透明色系 圖片的透明色系是指將圖片的色彩設為透明 如果網頁擁有背景圖片或色彩 就可以看到圖片完全溶入背景之中 5 5 6灰階與刷淡處理 FrontPage的圖片工具列按鈕可以將彩色圖片轉換成灰階圖片 或是刷淡圖片的色彩 這種處理特別適用在網頁的背景圖片 5 5 7立體按鈕圖片 FrontPage圖片工具列的 按鈕形 鈕 可以將圖片立體化處理 如同一個按鈕圖片 5 5 8圖片的剪裁 如果在網頁插入的圖片只需使用其中的一部分 其它不用的部分就可以使用圖片工具列的 裁剪 鈕 只剪下圖片中需要的部分 5 5 9圖片的重新取樣與還原 FrontPage圖片工具列擁有兩個按鈕針對圖片檔案的處理 分別可以最佳化圖檔尺寸和還原成圖片插入的狀態 如下所示 重新取樣鈕 當在FrontPa