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

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

章節大綱 11-1 加入Flash影片 11-5 應用範例-「Flash首頁」頁面設計 11-2 加入FlashPaper 11-3 Flash視訊 11-4 背景音樂備註：可依進度點選小節

11-1 加入Flash影片 加入Flash影片 1.設定Flash動畫插入的位置 2.「插入」面板切換到「常用」類別 3.下拉選擇「SWF」 <範例檔：11_01.html>

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

1.輸入標題 2.按此鈕確定加入完成的Flash元件

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

設定影片屬性 由於部份Flash的設定屬性是和圖片相同，所以這裡做個簡要的說明。檔案：顯示所加入的Flash影片檔檔名。原始檔案：顯示Flash影片的原始檔名稱及位置。背景顏色：設定Flash影片的背景顏色。「編輯」鈕：用於編輯Flash影片，不過這裡所編輯的是*.fla原始檔而非*.swf影片檔。

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

1.點選影片物件 2.由此調整背景顏色值 <範例檔：11_02.html>

顯示藍色背景的Flash影片 <範例檔：11_02ok.html>

設定透明背景的影片 1.點選影片 2.下拉選擇「透明」 <範例檔：11_03.html>

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

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

1.點選此項目，免費試用31天 2.按下此鈕進行轉換

文件進行轉換

加入FlashPaper到網頁面中 1.先點取要加入元件的位置 2.點取此箭頭清單 3.執行此指令 <範例檔：11_04.html>

點取選擇剛才轉換後的Flash檔案 按下「確定」鈕

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

在瀏覽器中的預覽效果 <範例檔：11_04ok.html>

11-3 Flash視訊 1.先點取要加入Flash視訊的位置 2.下拉選單，點選Flash視訊 <範例檔：11_05.html>

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

顯示建立好的Flash視訊元件 若是想變更匯入時的設定值，可到屬性面板中進行調整

瀏覽器預覽的畫面效果

11-4 背景音樂 加入背景音樂 1.先點取要加入元件的位置 2.下拉選單點選「外掛程式」

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

加入完成的外掛元件 由屬性面板可以重新調整元件尺寸正常顯示的元件內容，並可播放Midi音樂

設定音樂屬性 1.先點取要設定的元件 2.再點取此按鈕設定如畫面上所示

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

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

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

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

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

顯示加入的影片元件 預覽Flash影片的效果

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

加入按鈕連結 2.下拉選單，點選「影像」 1.先在影片下方新增一個段落

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

1.輸入替代文字 2.按此鈕確定 1.由此設定連結的網頁 2.將按鈕邊框設為0

按「F12」鍵所顯示的效果

Q&A討論時間 本章結束

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