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

Presentation on theme: "多媒體網頁 授課教師：葉生正教授."— Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17 §網頁圖檔格式之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的功能，及增加了背景透明與動態圖檔的效果外 ，儲存的資料量也變小了。

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

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

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

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

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

23 Step1：開啟Ulead PhotoImpact 4.0

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

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

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

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

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

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

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

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

32 ※ 圖檔轉換完成 。

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

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

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

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

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

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

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