[Dreaweaver] 在網頁中插入背景音樂,加入影片播放

沉靜無聲的網站已經無法吸引人的注意,充滿聲光效果、影片動畫才是目前設計的主流!想在網頁中插入背景音樂,加入影片播放嗎?全部將在下面的文章中為您說明:

 

在網頁中加入音效

無論是音效檔或是影片檔,如果要在瀏覽器上播放都必須依靠瀏覽器的外掛程式,而目前瀏覽器能夠支援的多媒體檔案可說是越來越多了。

除了一般常使用的 wav、midi… 等音效檔外,目前市場上的主流:mp3、wma,都可以放置到網頁中播放。在這裡特別建議使用 mp3 或 wma… 等音樂檔案,不僅檔案小,表現的音質也更好。

加入音效檔的方法

進入網頁檔案中,為這頁加入背景音樂。

STEP01

請將插入點移至編輯區「充滿驚豔的魅力小島」文字後方,於 插入 \ 常用 面板選按 媒體 鈕 \ 外掛程式 開啟對話方塊。

STEP02

請選取 <media \ beach.wav> 後按 確定 鈕。

STEP03

如下圖已將音效檔案加到頁面當中,請選按功能表列 檔案 \ 儲存檔案,再按 F12鍵預覽看看,會發現頁面上多了一個控制器 (雖然沒有完整顯示),而且網頁上也開始播放音樂了!

  

設定播放區域的大小

在插入媒體檔時,其預設播放區域寬高皆為 「32」,如此也會造成播放區域顯示不完全的狀況,您可以修改 屬性 面板中的 來改變顯示區域的大小。根據測試,如果想要完整顯示預設播放控制列,可以把  及 高 設定為 「280」、「45」,以及 對齊:絕對中間

設定其他播放選項

如果想要在頁面中插入背景音樂,可以自動播放 10 次,並隱藏播放控制列。

STEP01

選取媒體檔後按 屬性 面板上 參數 鈕,依照圖示設定參數與值 (可以使用 + 與 – 鈕來新增或刪除參數項目),按 確定 鈕後完成設定。

STEP02

完成後請選按功能表列 檔案 \ 儲存檔案,再按 F12 鍵預覽看看,果然在畫面上已經看不到播放控制區,而頁面會自動播放所插入的音樂 10 次。

在網頁中加入影片

以下將說明影片檔格式的加入與設定方法:這裡所要使用的是 FLV 格式的影片檔。FLV 是指 Flash Video 格式,是目前網路上流行的影片檔格式。

STEP01

進入檔案,接著要插入一 FLV 格式影片,將插入點移至 「影音欣賞」 文字後方按一下 Enter 鍵,於 插入 \ 常用 面板選按 媒體 右側 鈕 \ FLV 開啟對話方塊。

STEP02

請於 URL 項目中設定插入 <C:\ lanyutravel \ media \ lanyumovie.flv>,再依圖示設定相關屬性,按 確定 鈕。

STEP02

完成 FLV 影片插入,請選按功能表列 檔案 \ 儲存檔案,再按 F12 鍵預覽看看。(為了避免無法播放的狀況發生,在此我們使用 IE 瀏覽器來進行預覽)

 

延伸閱讀

Dreamweaver CS6網頁製作比你想的簡單

Dreamweaver CS6能做的比你想得更多!絕不能錯過的精彩內容:

.直上 HTML5 網頁開發不用學習程式碼
.CSS3 動人特效立刻套用不必等
.流變格線版面、媒體查詢應用解決不同螢幕尺寸的開發問題
.jQuery Mobile 無痛上手行動裝置網頁開發
.Facebook社群工具、GoogleMap網路地圖、Youtube 影音平台一次搞定

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *