第 7 章 多媒體網頁初步 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 7 章 多媒體網頁初步 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 7 章 多媒體網頁初步 著作權所有 © 旗標出版股份有限公司

2 本章提要 瀏覽器與附加功能 為網頁增添音效 插入背景音樂 加入視訊與動畫 會動的 GIF

3 瀏覽器與附加功能 瀏覽器的限制 輔助程式的運作 設定輔助程式 幾種常用的輔助程式

4 瀏覽器的限制 瀏覽器的功能都相當強大, 而且新版本也不斷地擴充功能, 但受限於網路傳輸速率、檔案大小等因素, 其功能仍有一定的限制, 尤其是在多媒體檔案的瀏覽方面。

5 輔助程式的運作 在某個網頁中按下某個連結, 若該連結指向的是一個未知的檔案類型, 則瀏覽器就會詢問要如何處置該檔案。
以 IE 為例, 當我們按下一個 ZIP 檔的連結時, 會出現檔案下載交談窗：

6 輔助程式的運作

7 設定輔助程式 請在檔案總管中執行工具 / 資料夾選項命令, 然後切換到檔案類型頁次下就可看到各種檔案類型和對應的輔助程式：

8 設定輔助程式

9 幾種常用輔助程式 Windows Media Player QuickTime RealPlayer Acrobat Reader
Flash

10 Windows Media Player

11 QuickTime

12 RealPlayer

13 Acrobat Reader

14 Flash

15 為網頁增添音效 以超連結的方式加入音效檔 在文件中嵌入音效

16 以超連結的方式加入音效檔 使用 <A HREF> 指定音效檔的 URL, 讓參觀者能由網頁中下載該檔案, 例如：

17 在文件中嵌入音效 使用 EMBED 標籤, 其語法：

18 在文件中嵌入音效 可用 <NOEMBED> 標籤加上說明文字, 讓不支援此標籤的瀏覽器, 也能顯示相關訊號給使用者看：

19 在文件中嵌入音效

20 在文件中嵌入音效 如果要讓音樂斷地重覆播放, 則可為 <EMBED> 標籤加上 LOOP 屬性：

21 在文件中嵌入音效 使用 <OBJECT> 標籤, 其語法：

22 在文件中嵌入音效 其中 <PARAM> 標籤是用來設定 Windows Media Player 的參數, 上列第一個參數是設定要播放的音樂檔 URL；第二個參數則是設定是否在顯示頁時就自動播放, 設為 "False" 表示不自動播放, 設為 "True" 則會自動播放 (此為預設值)。

23 在文件中嵌入音效的實例

24 在文件中嵌入音效的實例

25 在文件中嵌入音效的實例

26 插入背景音樂 隱藏播放面板 使用 <BGSOUND> 標籤

27 隱藏播放面板 只要將 <EMBED> 或 <OBJECT> 的寬與高都設成 1, 播放面板就看不見了：

28 隱藏播放面板 另外 <EMBED> 還提供一個 HIDDEN 屬性, 可完全隱藏面板, 再配合 LOOP 屬性設定, 就可以做出永不停止的背景音樂：

29 重播 5 次的背景音樂範例

30 使用 <BGSOUND> 標籤 此標籤可加到文件中任何位置, 而且還能設定音量、左右聲道平衡：

31 使用 <BGSOUND> 標籤 用 BGSOUND 設定無限重播背景音樂的例子：

32 加入視訊與動畫 以超連結的方式加入視訊物件 在文件中嵌入影片 Internet Explorer 的特殊語法

33 以超連結的方式加入視訊物件 要讓使用者能以輔助程式瀏覽視訊與動畫檔, 也是只要建立指向該視訊或動畫檔的 <A HREF> 連結即可：

34 以超連結的方式加入視訊物件範例

35 以超連結的方式加入視訊物件範例

36 以超連結的方式加入視訊物件範例

37 在文件中嵌入影片

38 在文件中嵌入影片

39 Internet Explorer 的特殊語法
IE 支援的 <IMG> 標籤中多一個特殊的屬性可在文件中嵌入影片, 其用法如下： 但是只有 IE 認得此屬性, 所以若要使用此方法的話, 建議再加上 SRC 屬性：

40 Internet Explorer 的特殊語法
若想控制影片循環播放的次數, 可加上 LOOP 屬性來控制, 例如：

41 會動的 GIF 製作 GIF 動畫所需的工具 GIF 動畫的製作步驟 範例實做

42 製作 GIF 動畫所需的工具 除了一般的繪圖或動畫製作軟體外, 還需要一個 GIF 動畫的編輯程式, 例如：PhotoImpact GIF Animator、Microsoft GIF Animator、GIF Construction Set Professional 等。

43 GIF 動畫的製作步驟 先以繪圖軟體做出整個動畫中的每個畫面, 並將每張畫面存成不同的檔案。
用製作 GIF 動畫的軟體建立一個 GIF89a 的檔案, 將前一步所建立的圖片依序加到此檔案中。 在文件中以 <IMG> 標籤加入此 GIF 檔 用瀏覽器來觀看效果。

44 範例實做 1. 準備製作動畫所需要的圖片：

45 範例實做 2. 建立 GIF 動畫的檔案 (此處是使用 GIF Construction Set Pro 版來製作)：

46 範例實做 執行 File/Animation Wizard 命令：

47 範例實做

48 範例實做

49 範例實做

50 範例實做

51 範例實做

52 範例實做

53 範例實做

54 範例實做 3. 將製作好的 GIF 動畫加入網頁中：