Transcript 加入多媒體內容

網頁設計與製作
第九單元：加入多媒體內容
授課教師：王漢銘
NordriDesign專業商務簡報設計
插入Flash影片
• FLA檔
• 這是Flash的檔案，只能在Flash中開啟，不能在
Dreamweaver或瀏覽器中開啟，但.FLV則可以，二者
不要弄錯了。
• SWF檔
• 這是Flash的發佈影片檔，可在瀏覽器中播放，也可
以在Dreamweaver軟體中預覽，不能在Flash中編輯。
插入Flash影片
• 利用下列任一方式即可插入Flash影片
•
•
•
•
「功能表\插入\媒體\SWF」。
「插入面板\常用\媒體:SWF」，選擇.swf的檔案。
直接由檔案面板裡拖曳至網頁文件內。
「資源面板\SWF\插入」。
插入Flash影片
• 物件標籤輔助功能屬性的對話框設定
• 標題：為Flash影片加上標題。
• 存取鍵：指定單一字母按鍵，讓瀏覽者可以按下
Ctrl+該字母鍵來選取此Flash影片。
• 定位停駐點索引：可以讓瀏覽者指定數字，按下Tab
鍵時切換選取網頁中的元素順序。
• 確定。
插入Flash影片
• 按下確定後，會發現一個灰色區域在網頁文件中
，此灰色區域就是Flash影片。
• 將網頁文件儲存後，這時後會出現複製相關檔案
的對話框，按確定鈕。
• 在瀏覽器中預覽。
Flash影片屬性設定
• 點選Flash影片，可於屬性檢視窗中更改屬性。
Flash影片的屬性設定
•
•
•
•
•
•
•
•
•
ID
寬和高
檔案
原始檔
背景
編輯
類別
重複
自動播放
Flash影片的屬性設定
•
•
•
•
•
•
•
垂直間距和水平間距
品質
縮放
對齊
Wmode
播放
參數
請同學看完示範操作後，再進行綀習
插入Flv視訊
• FLV檔案較小，且是以Flash格式呈現，瀏覽者己
有Flash Player就不需再安裝額外的播放器。
• 須已有FLV檔。
• 插入FLV視訊後，在瀏覽器中檢視時，將顯示選
取的FLV檔，以及播放控制項。
插入Flv視訊
• 插入Flv視訊的方式
• 「功能表\插入\媒體\FLV」
• 「插入面板\常用\媒體:FLV」
• 直接由檔案面板裡拖曳至網頁文件內
Flv視訊設定
•
•
•
•
•
•
•
•
漸進式下載視訊
串流視訊
URL
外觀
寬度及高度
限制
自動播放
自動倒帶
插入Flv視訊
• 儲存網頁文件後即可預覽此頁面。
請同學看完示範操作後，再進行綀習
外掛程式
• 音效檔格式
• 音效檔和格式有數種不同的類型，包括.wav、.midi
和.mp3。
外掛程式
• 加入音效
• 加入音效會直接將聲音放在網頁中，但網頁瀏覽者必
須有所選取音效檔的正確連結程式，才能播放。
• 要使用音效做為背景音樂，或是想要控制音量、頁面
上播放器的外觀，或是音效檔的開始和結束點，請嵌
入檔案。
外掛程式
• 加入音效的方式
• 「插入\媒體\外掛程式」，瀏覽音訊檔案，然後按一
下確定。
• 「插入面板\常用\媒體:外掛程式」，瀏覽音訊檔案
，然後按一下確定。
外掛程式
• 可以將外掛程式的寬度調大一點，在瀏覽器中預
覽就可以看到完整的播放面板。
外掛程式的屬性設定
• 回到Dreamweaver中，點選所插入的外掛元件，
就可以在屬性檢視窗中來做觀察。
外掛程式的屬性設定
•
•
•
•
•
•
•
•
名稱
寬和高
原始檔
外掛URL
對齊
垂直和水平距離
邊框
參數
外掛程式的屬性設定
• 常見的一些參數用法
•
•
•
•
autostart：自動撥放
Loop：循環播放
Hiedden：隱藏面板
Playcount：限制播放次數
請同學看完示範操作後，再進行綀習
參考資料
• 文淵閣工作室（2012）。Dreamweaver CS6網頁
製作比你想的簡單。台北市：碁峯資訊。
• 施威銘研究室（2012）。正確學會Dreamweaver
CS6的十六堂課。台北市：旗標。
23
感謝您的聆聽
Thank you
24