教學網頁設計 多媒體網頁介紹 PhotoImpact Dreamweaver Flash 架設網站 謝慧民

Presentation on theme: "教學網頁設計 多媒體網頁介紹 PhotoImpact Dreamweaver Flash 架設網站 謝慧民"— Presentation transcript:

1 教學網頁設計 多媒體網頁介紹 PhotoImpact Dreamweaver Flash 架設網站 謝慧民
致遠管理學院多媒體與動畫設計學系助理教授

2 多媒體網頁介紹 多媒體網頁內容： 文字 影像 聲音 視訊 其他多媒體格式

3 文字資料處理技術 打字 網路尋找(注意智慧財產權) 掃描OCR 加浮水印 轉檔(翻譯、檔案格式轉換)

4 顏色基本原理 記憶體最小單位稱為位元(Bit) 使用多少個位元的記憶體空間紀錄1個畫素的色彩資料,就決定此畫素有多少級的色彩變化 舉例說明
2個位元能記憶00,01,10,11,能顯示4個顏色 8個位元(bit)=1個位元組(Byte),能顯示256色

5 畫素Pixel與色彩深度Color Depth
畫像元素Picture Element 簡稱畫素Pixel 畫素是數位影像中之最小元素 一個畫素在顯示一個顏色所用到記憶體空間稱為色彩深度Color Depth 舉例說明 若1個畫素決定以8個位元(bit)來呈現黑灰白色彩,如( )代表純(全)白,( )代表純黑,共可有256種黑白明暗的色階變化,此條件(模式)的色彩深度是8bit(或稱1Byte)

6 色彩深度圖示

7 色彩模式Color Mode 色彩模式的定義是指圖像是由哪幾種顏色的組合 舉例說明
若1個畫素決定以8個位元(bit)來呈現黑灰白色彩,其色彩模式稱為灰色調(Grayscale) 若1個畫素決定以R,G,B,3種顏色顯示,每種顏色以8個位元(bit)來呈現色彩,其色彩模式稱為RGB,其色彩深度為8Bitx3=24bit,可顯示的顏色共256x256x256=16,777,216色(1677萬色)

8 色彩模式與色彩深度圖示

9 有哪些色彩模式 色彩模式 英文簡稱 色彩深度 註解
色彩模式 英文簡稱 色彩深度 註解 全彩 RGB TureColor(Millions Color) 24bits (3 Bytes) 常見電腦顯色模式 四色印刷 CMYK 32bits (4 Bytes) 印刷分色四色版 索引色 IndesdColor 8bits (1 Byte) 網路色彩壓縮模式之一 雙色調 Duotone 8bits (1 Byte) 黑色染色的表現 單色調(灰色調) Grayscale 8bits (1 Byte) 一般黑白的表現 雙階調(高反差) Bilevel 1bit 單純全黑或全白高反差的模式 視覺空間模式 LAB 24bits (3 Bytes) 數學座標式的視覺空間

10 解析度Resolution 解析度(Resolution)的定義是1個單位長度內排列多少個畫素,又稱空間解析度(geometrical resolution) •輸入設備的解析度是以畫素的總量來計算,如1英吋可讀取或擷取多少個畫素,於是產生pixel per inch(ppi)的概念

11 PPI與DPI有何不同? Dot意指影像質點,是指硬體設備所能呈現或擷取的最小單位 舉例說明
彩色螢幕1英吋排列72組RGB螢光體,所以我們稱螢幕的解析度是72dpi(Dot Per Inch) 1200dpi的掃描機是指1英吋內可控制1200個感光點 1440dpi的噴墨印表機指影像輸出時每英吋可有1440個噴點

12 資料守恆定律 掃描機輸入1張圖像的檔案大小A=(ppix Li)x(ppix Wi) x Color Depth
輸出機輸出1張圖像的檔案大小B=(ppix Lo)x(ppix Wo) x Color Depth A=B即為資料守恆定律 舉例說明 4x6英吋照片,希望能在300dpi的印表機上印成8x12英吋,掃描時要掃多少解析度?A:600dpi

13 加色法

14 減色法 青、洋紅、黃、黑是印刷上採用的基本顏色 其中青、洋紅、黃為減色三原色，可合成其他顏色

15 數位浮水印技術 數位浮水印為保護合法多媒體的一種隱藏技術；其方法為將一財產權訊號(Copyright Signal) 加入一具合法版權的多媒體中。就是因為使用了多種資訊隱藏( Information Hiding) 的技術，使用得在網路獲得各種媒體的使用者無法用肉眼分辨其浮水印的存在，只有在具信用的第三者端（TPP），才能使用一特殊解碼演算法來將數位浮水印的資訊粹取出來進行驗辦 •source:

16 影像的取得 網路(注意智慧財產權) 拍攝數位照片 合成及切割 繪圖軟體(向量、點矩陣) 螢幕擷取、視訊擷取 掃描 WebCAM

17 影像處理軟體 友立PhotoImpact 12 Adobe Photoshop CS2 Macromedia Fireworks 8
Corel Photo-Paint Painter(插畫) CorelDRAW(向量格式Vector) Adobe Illustrator (向量格式Vector)

18 網頁影像的格式 GIF影像格式 JPG/JPEG 影像格式 PNG 影像格式
為gif89a的格式，支援透明背景，動畫圖形與交錯格式的影像格式，且gif所使用的色彩可以為黑白、灰階，與最多256色的索引式色盤 JPG/JPEG 影像格式 全彩的影像壓縮格式 ，品質會失真 PNG 影像格式 結合GIF 與JPG /JPEG 的檔案型態而成的影像格式，它提供了「全彩」、「索引式」與「灰階」的色彩，支援了透明背景與GIF動畫的相同功能

19 視訊 DV拍攝 螢幕錄影軟體(Anicam Pro)：wmv 軟體：
入門：威力導演5、Windows Movie Maker 、會聲會影10 專業剪輯軟體：After Effect、Adobe Premiere Pro、Final cut Pro(Mac) 3D 軟體(3D max 9、Maya 8)：AVI 虛擬實境軟體(Virtools、Quest 3D)：自動安裝Plugins 程式

20

21

22 網路串流視訊格式(邊下載邊播放) 產生軟體：Windows Media Encoder轉檔軟體 、Win AVI Video Converter 特定播放軟體：Windows Media Player, Real Player, 或 QuickTime Player 數位化視訊在網路化的過程中，通常是以wmv、asf、rm、及mov四種串流格式為主

23 串流格式之優缺點比較 優點 缺點 即時播放 不易被複製 不佔硬碟空間 收看者即時隨點隨看 傳輸品質可能不佳
尤其是如音訊的部份如未處理好，聲音斷續

24 網路串流格式比較

25 聲音定義 用電腦週邊設備及影音處理軟體，將人、錄音﹝影﹞帶、CD、VCD、DVD及V8的聲音，儲存在電腦或電腦可讀之載體
–平常我們所聽到的聲音都是經由空氣或一些介質所傳播的，以物理學的觀點而言，聲音可以波型來表示出音高(Pitch)、音量(Volumn)、音色(Tone)三種組成要素，這些聲音都是連續的訊號，也就是所謂的類比訊號。而電腦只能辨識0或1的數位訊號，因此將聲音的類比訊號轉為數位訊號的過程，稱為聲音數位化。

26 類比與數位 類比波 數位資料 類比和數位的差異之處 多媒體處理，就是在類比與數位之間的來回轉換。
類比的定義：用一個連續值(continue value)測量一個振動的大小或距離。 數位資料 數位的定義：用離散的階段(discrete steps)表示一個振動的大小或距離。 類比和數位的差異之處 一條鋼索是類比光波，有粗細和長短，是連續值，不能夠數。 一串珠子是數位音波，有長短和直徑大小，是離散值，可以數。 多媒體處理，就是在類比與數位之間的來回轉換。

27

28 聲音資料數位化 一般電腦處理聲音的方式有二種： 既然電腦只有二種處理聲音的方式，為什麼又會出現紅透半邊天的『MP3』呢？
儲存成類比訊號，也就是所謂的『WAV』 利用電腦內建的音效配合音樂﹝聲音﹞的輸入，儲存成數位訊號，也就是大家俗稱的『MIDI』 既然電腦只有二種處理聲音的方式，為什麼又會出現紅透半邊天的『MP3』呢？ Wave通常需要非常大的儲存空間，加上MPEG壓縮技術不斷地進步，因此便出現了容量小、音質佳的MP3﹝儲存容量約為1/10﹞

29 聲音或音效取得 音效壓縮轉檔軟體： 其他硬體輸入： MusicMath Jukebox ~多功能(good)
RealProducer ~製作rm檔 GoldWave ~音效編輯(有許多人用來錄製講話聲並加入音效) 其他硬體輸入： 音效卡、音源線、Tape Recorder、Micphone、Audio CD

30 音軌來源 (1)由光碟機讀入- Audio CD (2)由音效卡接入- *麥克風 *音源輸入
(以音源線加以連接,如錄音機.電子樂器等)其他輸入：

31

32

33 網路常見的虛擬實境多媒體 影像式虛擬實境環場： (Pixmaker、Digi360) 影像式虛擬實境環物： 虛擬實境網站整理：

34 Web2.0網站 內容由網友產生並自由分類，經由網友互動之後讓內容更好以吸引更多人來看(取自Yahoo知識內容)。驗證網站： -台灣大百科全書(知識)、you tube(影音)、無名小站(相片、部落格) - PChome的Portal 2.0頻道 開講 news20.com.tw 要做的事 friends20.com.tw 皮客公園 photo20.com.tw 個人新聞台 mypaper.pchome.com.tw 搜雲 search20.portal20.com.tw 我的樣子 page20.portal20.com.tw

35 Web2.0網站 維諾百科： UrMap urmap.com.tw - MyShare myshare.url.com.tw - 雅虎奇摩知識+ tw.knowledge.yahoo.com - MODA moda.com.tw (已關站) - 休息一夏 qk.gokimo.com - I'm VLOG im.tv/VLOG/ -Ipeen愛評網 ipeen.com.tw/

36 軟體實作 PhotoImpact 12(影像處理軟體) Dreamweaver 8(網頁編輯及網站資料傳輸軟體)
Flash 8(動畫、遊戲或互動多媒體內容製作軟體) IE 6.0瀏覽器 個人網頁空間申請(學校要提供) 架設網站(XP內建的 IIS、Apache+MySQL、Appserv V2.5+Xoops、RaidenHTTPD WEB SERVER等) 傳輸網頁的FTP架站(雷電HTPD、 XP內建的 IIS功能、CeasrFTP 0.99g 等) 部落格架站：LifeType、WordPress等 數位學習架站軟體：Moodle等

37 Flash 8 Swift 3D、Vecta 3D軟體輸出.swf (使用3ds max物件)
Flash 3D Library / Engine 有 Papervision 3D (PV3D) 與 Sandy 3D Director內建3D控制程式模組，使用外掛Shockwave瀏覽成果 ActionScript 3控制3D物件 (網路有許多開發程式) FLV影片動畫(Flash 8 Video Encoder) flash communication server 即時線上伺服器