多媒體網頁 授課教師：葉生正教授

多媒體的基本概念 『多媒體』相信讀者對這名詞應不陌生！ 我們舉些例子來說說『多媒體』。在以前資訊 不發達的時候，文字書信便是人們傳遞訊息最 基本的媒介，而這媒介可稱為『媒體』。後來 收音機（電話）、電視、照相機等科技產物相 繼的發明，使得傳遞訊息的方式更具多元化， 相對的『媒體』也各別具有了聲音、影像（動 畫）、圖像等功能。在現代人們對整體多樣化 的訴求下，將這些各具特色的媒體，有系統地 整合在一起，即成了人人口中所談到的『多媒 體』。

多媒體的九大元素 1. 文字(Text) 2. 圖形(Graphic) 3. 靜態影像(Still Image) 4. 照片(Picture) 5. 動畫(Animation) 6. 視訊(Video) 7. 聲音(Sound) 8. 音樂(Music) 9. 互動(Interaction)

§數位影像(圖檔) 『數位影像』，即是以數位的方式來記錄或 儲存影像。數位影像的畫質，雖無法比相片或徒 手彩繪的畫質高，若將其呈現在高畫質的螢幕畫 面上，仍可以達到相當水準的影像品質。 此外，數位影像在電腦編輯處理中，除了可 以輕易的剪貼、縮放、修補、合成等處理，還具 有不退色、可複製、易儲存、不佔空間、方便攜 帶等優點，所以目前數位影像的應用，已相當的 普遍了。

§數位影像的類型 1.點陣式： 2.向量式： 點陣式的影像是由許多的細點所構成的，而這些小細 點就是所謂的像素或是圖素，在單位面積的影像中，其所 包含的像素越多，解析度也就越高，相對的影像則越細膩 。點陣式影像色階彩度變化豐富，可呈現出自然且逼真的 影像，但在處理影像縮放時，卻容易造成影像的失真，其 檔案的資料量也較大。 2.向量式： 向量式影像的一筆一畫，是由數學的方程式所紀錄著 ，其精確度高，並不受解析度的影響，不管放大或縮小都 不會失真，所以常被用來繪製3D的立體圖形。但缺點是處 理影像時，需經複雜的計算，花費較多的時間。

數位影像的色彩模式 §黑白模式(Bitmap) 每一個像素只用1個位元(bit)來表示，因 此只能呈現出黑色與白色。 (1：表示白色 0：表示黑色)

數位影像的色彩模式 §灰階模式(Grayscale) 每一個像素用8個位元(bit)來表示，因此就 可呈現出 256種階調；如果將純黑和純白之間的 階調等分為 256種階調，就成了 256灰階的模式。 (255：表示白色 0：表示黑色)

數位影像的色彩模式 §RGB模式 所謂的RGB即是光的三原色紅(Red)、綠(Green)、 藍(Blue)三色；在RGB的模式下，每一像素是由24 個位元(Bit)來表示，其中RGB三原色各使用了8個 位元，因此每一種原色都可呈現256種階調，而三 原色相互搭配後，總共可產生16777216種階調。 也就是數位影像所謂的〝全彩〞。 255

數位影像的色彩模式 §CMYK模式 CMYK模式是針對印刷所設計的模式。在印刷 顏料著色時，青色(Cyan)、洋紅色(Megenta)、黃 色(Yellow)為構成各種色彩的三原色。；雖然CMY 三色可混合出製作所需的色彩，但實際上等量比 例的CMY混合後，無法產生完美的黑色(Black)， 所以在印刷時需加上一個黑色的色彩來補償缺失 。也因黑色是用來取代部分的CMY三色，故無法表 現RGB模式所能產生高彩度的色彩。

數位影像的色彩模式 §CMYK模式 在CMYK的模式下，有四個參數，每一個參數 各佔了 8個位元，所以它是屬於32位元的影像模 式。 CMYK模式與 RGB模式不同處，CMYK是由照射 在顏料上反射回來的光線所產生的色彩；因顏料 會吸收一部份的光線，所以反射回來所呈現的色 彩會比原色來得暗。

數位影像的色彩模式 §CMYK模式的色盤 255 C M Y K

數位影像的色彩模式 §Lab模式 Lab模式是一般人較為陌生的色彩模式， 這模式是由國際照明委員會所制定的，也是所 有模式中色彩涵蓋最廣模式，它的特色是對色 彩的描述，完全採用數學的方式，與系統和設 備無關。 一般在Photo Shop內部處理模式上，均是 使用此模式在做處理的。

數位影像的色彩模式 §Lab模式的色盤 L：亮度(Lightness) a：是由綠到紅的光譜變化 b：是由藍到黃的光譜變化 L ａ ｂ

數位影像的色彩模式 色域： 色域是指在某一色彩模式下涵蓋的色彩範圍。 在色彩模式中，以Lab模式色域最大，RGB模式 次之，CMYK模式最小；因此由Lab或RGB模式 轉換為CMYK模式時，會有部分色彩無法表現出 來，稱為溢色。

數位影像的解析度 解析度： 解析度就是單位長度內所含有的點數，長度的 單位多半使用英吋，因此它的單位一般常用DPI (Dots per Inch)來表示；而在數位影像中，點就等 於像數，因此也可以用PPI(Pixels pre Inch)作為解 析度的單位。

§網頁圖檔的格式 一般圖檔因應用於不同的平台或套裝軟體上 ，所以圖檔的格式不盡相同，較為常見的格式有 BMP(*.bmp)、GIF(*.gif)、JPEG(*.jpg)、TIFF(*. tif)、WMF(*.wmf)、EPS(*.eps)、PSD(*.psd)、 PCT(*.pct)……等；由於網路傳輸受限於頻寬的 問題，所以在眾多的格式中，只採用GIF及JPE G兩種圖檔格式，應用於網頁的製作上。

§網頁圖檔格式之GIF(*.gif) GIF圖檔的色彩模式為Table Color 256色、Index Color (索引色)或Grayscale Color(灰色調)等模式， 所以只要將圖檔先轉換成上述的色彩模式，均可儲存 為GIF的圖檔格式。GIF的圖檔格式又分為CompuSer- ve GIF及GIF89a Export兩種。CompuServe GIF為C- ompuServe公司較早訂定的GIF標準格式，可支援圖形 交錯的效果，但缺點是儲存的資料量較大；而GIF89a Export是比較新的GIF標準格式，除了具有CompuSer- ve GIF的功能，及增加了背景透明與動態圖檔的效果外 ，儲存的資料量也變小了。

§網頁圖檔格式之JPEG(*.jpg) JPEG的色彩模式為RGB Color、CMYK Color(印刷色) 、Grayscale Color (灰色調)等模式；欲將圖檔儲存成 JPEG格式時，同樣須將圖檔轉換為上述的色彩模式後才 能儲存，不過在圖檔被儲存JPEG格式之前，通常會出現 一些類似〝檔案將被破壞〞的訊息，這時若不熟悉的讀 者會以為辛苦編輯的圖檔，將會遭受破壞，便不敢按下 『確認』執行的動作，而無法儲存為JPEG的檔案；其實 當圖檔被儲存JPEG檔案時，將會進行檔案壓縮(破壞)的 動作，有些軟體可讓讀者選擇檔案的「壓縮比」，選擇 較高的「壓縮比」，壓縮後的圖檔效果較差，但檔案容 量較小，選擇較低的「壓縮比」，則圖檔效果較好，而 檔案的容量自然會比較大！瞭解了JPEG格式的特性後就 不會手足無措，不知是否要執行檔案被破壞的動作啦！

§GIF V.S JPEG─色彩比較 GIF格式的圖檔與JPEG格式的圖檔，兩者均擁有R GB Color及Grayscale Color的色彩模式，又同時可在應 用於網頁製作上，這兩者優劣如何呢？以儲存色彩的能 力而言，若在16777216色的RGB Color(光的三原色)24 bit全彩模式下，可表現出相當豐富而完整的色彩；而GI F格式的RGB Color及Grayscale Color色彩模式，只是在 16777216 個色彩中，挑選出較接近圖像所需要的256 種色彩而已，所以GIF格式的圖檔最多只能儲存256色； 而JPEG圖檔雖為壓縮的檔案格式，但在擁有24bit的全 彩模式下，能儲存的色彩自然就比GIF圖檔多，所以JP EG的層會比GIF的圖檔高，當然在此方面GIF格式的圖 檔就略遜一籌。

§GIF V.S JPEG─檔案大小比較 若以檔案容量的大小而言，GIF格式的圖檔應會比 了五套的影像處理軟體)，結論為〝不一定〞，因為使 用者所使用的軟體及使用者對圖檔壓縮轉換的設定，均 佔有相當大的關係。如有特別要求圖檔品質來說的話， JPEG的圖檔也就相對的比GIF圖檔大許多，所以在網路 傳輸的速度上，檔案較小的GIF圖檔，自然會 比JPEG圖檔快。除此之外，GIF格式的圖檔可製作背景 透明化、交錯呈現、動態等效果，這可是讓JPEG的圖 檔甘拜下風的地方哦！

§製作網頁該選用何種圖檔？ 1. GIF圖檔格式 2. JPEG圖檔格式 若想在網頁上，放置動畫圖檔以添增網頁的變化性 如果所編製的網頁，比較重視圖檔色彩的效果，那 JPEG格式的圖檔當然是最佳的選擇。

實 作 練 習 圖檔格式的轉換 BMP → GIF

Step1：開啟Ulead PhotoImpact 4.0

Step2：關閉工具視窗 『檢視』→『工具列與工具箱』→ 取消勾選〝百寶箱〞 的選項→『關閉』。

Step3：開啟圖檔 『檔案』→『開啟舊檔』。

Step4：開啟C:\image\ex9-1.bmp範例圖檔

Step5：改變影像類型 『格式』→『影像類型』→『最佳化256色』。

※ 轉換後會新建立一個新的影像圖檔 。

Step6：儲存檔案  『檔案』→『儲存檔案』。

Step7：選擇儲存的圖檔格式  點選〝存檔類型〞中的〝GIF (圖形交換格式)〞。

Step8：設定圖檔的名稱 ( ex9-1a.gif ) 及存放的路徑 ( c:\image\ )  設定圖檔存放的路徑( c:\image\ ) → 設定檔案名稱( ex9-1a ) →『存檔』→ 完成 。

※ 圖檔轉換完成 。

實 作 練 習 圖檔格式的轉換 BMP → JPG (沿用上一個範例圖檔)

Step1：將範例9-1所轉換好的ex-9a.gif圖檔最小化或關閉 ； 此步驟是為避免太多的圖檔在PhotoImpact 4.0的視 窗中，影響工作。(此步驟可不做！)

Step2：將ex9-1.bmp另存新檔  用滑鼠點選圖檔ex9-1.bmp →『檔案』→『另存新檔』。

Step3：選擇儲存的圖檔格式  點選〝存檔類型〞中的〝JPG (JPEG檔案交換格式)〞。

Step4：設定圖檔的名稱 ( ex9-1b.jpg ) 及存放的路徑 ( c:\image\ )  設定圖檔存放的路徑( c:\image\ ) → 設定檔案名稱( ex9-1b ) →『存檔』→ 完成。

※ 按下『存檔(S)』鈕後，則會出現警告訊息，由於JPEG的圖 檔為破壞壓縮後的圖檔，所以當BMP的圖檔被轉換成JPEG 圖檔時，需進行檔案壓縮（破壞）的動作，此觀念之前已提 過，讀者在此步驟便可得到驗證了；讀者這時只要按下『確 定』鈕即可完成轉換圖檔的工作。

※ 檢視〝ex9-1b.gif〞圖檔資訊  點選〝ex9-1b.gif〞圖檔 →『檢視』→『相片內容』