網頁設計與製作

1. 網頁設計與製作 第九單元：加入多媒體內容 授課教師：王漢銘 NordriDesign專業商務簡報設計

2. 插入Flash影片 • FLA檔 • 這是Flash的檔案，只能在Flash中開啟，不能在Dreamweaver或瀏覽器中開啟，但.FLV則可以，二者不要弄錯了。 • SWF檔 • 這是Flash的發佈影片檔，可在瀏覽器中播放，也可以在Dreamweaver軟體中預覽，不能在Flash中編輯。

3. 插入Flash影片 • 利用下列任一方式即可插入Flash影片 • 「功能表\插入\媒體\SWF」。 • 「插入面板\常用\媒體:SWF」，選擇.swf的檔案。 • 直接由檔案面板裡拖曳至網頁文件內。 • 「資源面板\SWF\插入」。

4. 插入Flash影片 • 物件標籤輔助功能屬性的對話框設定 • 標題：為Flash影片加上標題。 • 存取鍵：指定單一字母按鍵，讓瀏覽者可以按下Ctrl+該字母鍵來選取此Flash影片。 • 定位停駐點索引：可以讓瀏覽者指定數字，按下Tab鍵時切換選取網頁中的元素順序。 • 確定。

5. 插入Flash影片 • 按下確定後，會發現一個灰色區域在網頁文件中，此灰色區域就是Flash影片。 • 將網頁文件儲存後，這時後會出現複製相關檔案的對話框，按確定鈕。 • 在瀏覽器中預覽。

6. Flash影片屬性設定 • 點選Flash影片，可於屬性檢視窗中更改屬性。

7. Flash影片的屬性設定 • ID • 寬和高 • 檔案 • 原始檔 • 背景 • 編輯 • 類別 • 重複 • 自動播放

8. Flash影片的屬性設定 • 垂直間距和水平間距 • 品質 • 縮放 • 對齊 • Wmode • 播放 • 參數

9. 請同學看完示範操作後，再進行綀習

10. 插入Flv視訊 • FLV檔案較小，且是以Flash格式呈現，瀏覽者己有Flash Player就不需再安裝額外的播放器。 • 須已有FLV檔。 • 插入FLV視訊後，在瀏覽器中檢視時，將顯示選取的FLV檔，以及播放控制項。

11. 插入Flv視訊 • 插入Flv視訊的方式 • 「功能表\插入\媒體\FLV」 • 「插入面板\常用\媒體:FLV」 • 直接由檔案面板裡拖曳至網頁文件內

12. Flv視訊設定 • 漸進式下載視訊 • 串流視訊 • URL • 外觀 • 寬度及高度 • 限制 • 自動播放 • 自動倒帶

13. 插入Flv視訊 • 儲存網頁文件後即可預覽此頁面。

14. 請同學看完示範操作後，再進行綀習

15. 外掛程式 • 音效檔格式 • 音效檔和格式有數種不同的類型，包括.wav、.midi 和.mp3。

16. 外掛程式 • 加入音效 • 加入音效會直接將聲音放在網頁中，但網頁瀏覽者必須有所選取音效檔的正確連結程式，才能播放。 • 要使用音效做為背景音樂，或是想要控制音量、頁面上播放器的外觀，或是音效檔的開始和結束點，請嵌入檔案。

17. 外掛程式 • 加入音效的方式 • 「插入\媒體\外掛程式」，瀏覽音訊檔案，然後按一下確定。 • 「插入面板\常用\媒體:外掛程式」，瀏覽音訊檔案，然後按一下確定。

18. 外掛程式 • 可以將外掛程式的寬度調大一點，在瀏覽器中預覽就可以看到完整的播放面板。

19. 外掛程式的屬性設定 • 回到Dreamweaver中，點選所插入的外掛元件，就可以在屬性檢視窗中來做觀察。

20. 外掛程式的屬性設定 • 名稱 • 寬和高 • 原始檔 • 外掛URL • 對齊 • 垂直和水平距離 • 邊框 • 參數

21. 外掛程式的屬性設定 • 常見的一些參數用法 • autostart：自動撥放 • Loop：循環播放 • Hiedden：隱藏面板 • Playcount：限制播放次數

22. 請同學看完示範操作後，再進行綀習

23. 參考資料 • 文淵閣工作室（2012）。Dreamweaver CS6網頁製作比你想的簡單。台北市：碁峯資訊。 • 施威銘研究室（2012）。正確學會Dreamweaver CS6的十六堂課。台北市：旗標。

24. 感謝您的聆聽 Thank you