第十一章 插入多媒體物件-「 Flash 首頁」頁面設計

第十一章 第十一章 插入多媒體物件插入多媒體物件 --「「 FlashFlash 首頁」頁面設計 首頁」頁面設計

課前指引以目前的網頁技術而言，能夠放置在網頁中的多媒體物件相當多樣化，從最簡單的背景音樂到具有互動功能的 Flash 物件，都是在 Dreamweaver 支援之列。因此本章要告訴各位如何在Dreamweaver 中加入這些多媒體物件。

章節大綱

備註：可依進度點選小節

11-1 加入 Flash 影片 11-2 加入 FlashPaper

11-3 Flash 視訊 11-4 背景音樂

11-5 應用範例 - 「 Flash 首頁」 頁面設計

3

11-1 加入 Flash 影片 加入 Flash 影片

2. 「插入」面板切換到「常用」類別3. 下拉選擇「 SWF 」

< 範例檔：11_01.html>

1. 設定 Flash 動畫插入的位置

4

1. 點選檔案   2. 按此鈕確定

5

加入完成的 Flash 元件

1. 輸入標題 2. 按此鈕確定

6

目前所看到的灰色部份就是 Flash 元件，我們可以自由的縮放元件大小，或是按下「 F12 」鍵來預覽 Flash 影片效果。

< 範例檔：11_01ok.html>

7

設定影片屬性 由於部份 Flash 的設定屬性是和圖片相同，所以這裡做個簡要的說明。

檔案：顯示所加入的 Flash 影片檔檔名。 原始檔案：顯示 Flash 影片的原始檔名稱及位置。背景顏色：設定 Flash影片的背景顏色。 「編輯」鈕：用於編輯 Flash影片，不過這裡所編輯的是 *.fla原始檔而非 *.swf影片檔。

8

重複：設定 Flash 影片在瀏覽器畫面上是否重覆播放影片內容。 自動播放：設定 Flash 影片在瀏覽器畫面上是否自動播放影片內容。 品質：可用於調整 Flash 影片在頁面上的播放品質。縮放：可用於調整 Flash 影片在頁面上的內容顯示方式。 對齊：設定對齊的位置。 播放：可在編輯頁面中直接預覽 Flash 影片的內容。參數：可用於輸入參數，以調整 Flash 影片的播放效果。

9

1. 點選影片物件  

 2. 由此調整背景顏色值

< 範例檔： 11_02.html>

10

顯示藍色背景的 Flash 影片

< 範例檔：11_02ok.html>

11

設定透明背景的影片

1. 點選影片  

 2. 下拉選擇「透明」

< 範例檔： 11_03.html>

12

再預覽時就會發現到背景顏色變成透明了（會呈現正確的圓角效果） < 範例檔：11_03ok.html>

13

11-2 加入 FlashPaper

轉換成 FlashPaper 檔案 2. 在「增益集」中點選此鈕，再開啟的視窗中設定 Flash 檔案的存檔位置及名稱  1. 開啟要轉換的 Word文件

14

1. 點選此項目，免費試用 31 天  

 2. 按下此鈕進行轉換

15

文件進行轉換

16

加入 FlashPaper 到網頁面中

1. 先點取要加入元件的位置 

2. 點取此箭頭清單 3. 執行此指令

< 範例檔：11_04.html>

17

點取選擇剛才轉換後的 Flash 檔案

按下「確定」鈕

18

顯示加入完成的FlashPaper 元件，拖曳邊框節點，可調整元件的大小

19

在瀏覽器中的預覽效果

< 範例檔： 11_04ok.html>

20

11-3 Flash 視訊 1. 先點取要加入Flash 視訊的位置  

2. 下拉選單，點選 Flash 視訊

< 範例檔：11_05.html>

21

5. 按此鈕確定 1. 先選擇要放置到頁面上的 FLV 檔案 2. 再從清單選擇此視訊檔案的播放面板外觀 3. 按此鈕可自動設定此視訊檔的寬高尺寸 4. 勾選此二項可讓視訊檔案自動播放及倒帶

22

顯示建立好的 Flash 視訊元件  

若是想變更匯入時的設定值，可到屬性面板中進行調整

23

瀏覽器預覽的畫面效果

24

11-4 背景音樂 加入背景音樂

1. 先點取要加入元件的位置  

2. 下拉選單點選「外掛程式」

25

1. 點取範例檔案中的「 midimusic.mid 」音樂2. 按此鈕確定

26

加入完成的外掛元件  

由屬性面板可以重新調整元件尺寸

正常顯示的元件內容，並可播放 Midi 音樂

27

設定音樂屬性 1. 先點取要設定的元件  

 2. 再點取此按鈕

設定如畫面上所示

28

視窗中的「 Loop 」參數是設定聲音是否要做循環播放，而「 hidden 」參數則是設定是否隱藏播放面板，各位可以根據個人的需求來做設定。除了「 Loop 」及「 Hidden 」二個參數以外，還有下列參數可以設定。

29

11-5 應用範例 - 「 Flash 首頁」頁面設計 請開啟「班級網站」中的「 index.html 」，我們要本範例中設計具有動態效果的 Flash 首頁。

30

調整首頁的畫面效果 請先刪除頁面上的所有文字，然後將圖片「 index_back.jpg 」做為首頁的背景影像，如圖示。

31

加入 Flash 影片

1. 點選要插入元件的位置   2. 下拉選單點選此項目

32

1. 指定 welcome.swf 檔案 2. 按下「確定」鈕

33

顯示加入的影片元件

預覽 Flash 影片的效果

34

因為影片本身是圓邊矩形的外形，所以需對影片作參數設定，讓邊緣的白色背景變成透明。請先點取畫面上的 Flash 影片，再由屬性面板將「 Wmode 」下拉設為「透明」即可。

35

加入按鈕連結

  2. 下拉選單，點選「影像」 1. 先在影片下方新增一個段落

36

1. 點選圖片 2. 按此鈕確定

37

1. 輸入替代文字 2. 按此鈕確定

1. 由此設定連結的網頁  2. 將按鈕邊框設為0

38

按「 F12 」鍵所顯示的效果

39

Q&A討論時間

本章結束