- 1、本文档共51页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
加入网页背景
第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:點選連結後會去除目前的框架,而以全視窗的方式呈現。 影像地圖設定 本章結束 * * * * * * *
文档评论(0)