加入多媒體內容

download report

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