网页加入图片与动画.ppt

第 5 章 加入圖片與動畫 本章提要 網頁圖片的基本概念 加入圖片 儲存網頁中的圖檔 調整圖片大小與搬移、複製圖片 設定圖片與文字的間距、框線及替代文字 本章提要 圖片效果的應用 製作透明圖 自動影像目錄標籤 圖文並列 插入 Flash 動畫檔 網頁圖片的基本概念 圖檔的格式有很多種, 我們必須選擇體積小, 且能在網頁中以最佳狀態顯示的格式, 這樣不但能讓網頁看起來更美觀, 還能縮減圖片下載的時間。 認識圖檔格式 縮短圖片的下載時間 認識圖檔格式 網頁中常用的圖檔格式包括 GIF、JPEG、PNG 3 種圖檔格式。 這 3 種格式有一些共同點, 例如：都屬於壓縮的圖檔格式, 檔案的資料量很小, 非常適合用於網路傳輸。 它們還適用於各種平台 (Windows、Mac、UNIX…), 因此大部份的瀏覽器都以它們為標準規格。 GIF 圖檔格式 適合儲存具有線條、大塊色彩, 或是含有文字的圖片。 舉例來說, 像是卡通圖案、商標等構圖簡單、顏色分明的圖片, 最適合儲存成 GIF 格式。 GIF 圖檔格式還具有以下幾個特點： GIF 圖檔格式 可設定透明背景：GIF 圖檔格式最大的特色是可設定透明色彩, 將背景設為透明時, 圖片便可以透出網頁的背景顏色。 GIF 圖檔格式 可儲存動畫格式：GIF 動畫的基本原理是在同一個 GIF 檔案中放入多張圖片, 當你用瀏覽器來觀看時, 圖片會一張張連續播放, 就會形成動畫效果。 GIF 圖檔格式 最多只能儲存 256 色：GIF 圖檔最多只能容納 256 種色彩, 所以顏色較多或是較複雜的圖片, 在儲存成 GIF 格式後, 顏色將被濃縮至 256 色, 有可能造成圖片失真的情形。但由於 GIF 格式具有遞色的能力, 可利用像素排列的緊密度, 造成眼睛觀看時的錯覺, 以模擬出原本不存在的顏色。 GIF 圖檔格式 以交錯圖的形式顯示：如果圖片是以交錯圖的形式顯示, 就可以先顯示圖片大概的樣子, 避免因等待的時間太長, 而失去瀏覽的興致。 JPEG 圖檔格式 JPEG (或稱為 JPG) 圖檔格式可儲存圖片中的所有色彩, 因此像是全彩的風景照、人物照...等, 都很適合存成 JPEG 格式。此外 JPEG 還具有下列兩項特點： JPEG 圖檔格式 強大的壓縮率：JPEG 格式可將圖檔壓縮得非常小, 例如原本 1 MB 大小的圖片, 儲存成 JPEG 格式後, 可能只剩下幾十K (視影像的複雜度及設定的壓縮率而定), 可見壓縮力有多驚人。 JPEG 圖檔格式 採用破壞性的壓縮方式：由於 JPEG 是採用破壞性的壓縮方式, 壓縮時會捨棄一些像素資料, 所以容易造成圖片。 若圖片中具有大塊的單一純色, 或是明顯的線條、文字, 建議你不要存成 JPEG 格式, 否則當圖片壓縮後, 可能顏色效果不好, 文字與線條也可能產生模糊或斷裂的現象。 JPEG 圖檔格式 PNG 圖檔格式 PNG 圖檔格式的開發, 主要是用來取代 GIF 格式。大部分 GIF 格式的優點 PNG 都有, 像是透明背景、交錯顯示、跨平台...等, 此外 PNG 是採非破壞性的壓縮方式, 可減少圖片的失真現象。 由於 PNG 無法儲存動畫檔, 且目前有些影像處理軟體、瀏覽器尚未支援 PNG 圖檔格式, 所以此圖檔格式尚未被普遍採用。 其他圖檔格式 BMP：BMP 是微軟公司所提出的點陣圖格式, 原本用在 Windows 作業系統上, 讓各軟體的圖形能彼此相容。BMP 格式雖然普遍, 但全彩圖片無法壓縮, 所以檔案的體積很大。 TIFF：TIFF 可應用於不同的平台及應用軟體, 而且提供非破壞性壓縮, 但檔案的體積也很大。 其他圖檔格式 TGA：TGA 是 Truevision 視訊卡系統專用的圖檔格式。許多影像處理軟體和視訊方面的應用程式都支援 TGA, 此外它還支援包含單獨 Alpha 色版的 32 bits RGB 色彩模式影像。 RAS：RAS 是一種可稍微壓縮的圖檔格式, 而且支援多達 36 bits 的影像。 EPS：EPS 是 Post Graphic 檔案格式的擴充, 可讓 PostScript 圖片併入到其它文件內。 其他圖檔格式 雖然你可以直接將上述格式的圖檔加入 FrontPage 網頁中, 但最後在存檔時, FrontPage 會自動將少於 256 色的圖形轉換為 GIF 圖檔格式；色彩多於 256 色的圖片則會轉換為 JPEG 圖檔格式, 以便於網路傳輸。 縮短圖片的下載時間 一般說來, 圖片下載的速度通常比文字來得慢, 以下提供幾點建議, 讓使用低速連線的瀏覽者, 也能在短時間內看到豐富圖片的網頁內容。 先在影像處理軟體中將圖片編輯好：在加入圖片之前, 可先利用影像處理軟體將圖片編修好, 再插入 FrontP