网页VS多媒体.ppt

專業HTML網頁設計 陳錦輝 HTML/DHTML/CSS/JavaScript P303 第十章　網頁 V.S.多媒體 10.1 跑馬燈製作 10.2 撥放背景音樂 10.3 多媒體撥放 10.4 網頁DIY 製作跑馬燈(又稱為電子看板)必須藉由marquee標籤來完成，並且只會在IE瀏覽器中產生效果(Netscape7支援不完整)。 以下是marquee標籤的語法。 HTML格式： marquee align=垂直對齊方式 behavior=文字移動方式 bgcolor=顏色表示法 direction=文字移動方向 loop=重複次數 scrolldelay=M(M sec) scrollamount=N(pixels) height=N(pixels) width= N(pixels) vspace=N(pixels) hspace=N(pixels)……跑馬燈內容文字…… /marquee 10.1　跑馬燈製作 10.1　跑馬燈製作 屬性說明： align：設定跑馬燈文字的垂直對齊方式，分別有朝上、中、底部對齊等3種對齊方式，屬性值如下。 top：向上對齊。(預設值) middle：置中對齊。 bottom：向底部對齊。 behavior：設定跑馬燈文字的移動方式，分別有朝單一方向移動、左右移動、滑動等3種，屬性值如下。 scroll：文字向同一方向移動。(預設值) alternate：文字先向某一方向移動直到碰上邊界後，再改以相反方向移動。 slide：文字的移動具有滑動效果，遇到邊界會停下來。 10.1　跑馬燈製作 bgcolor：設定跑馬燈的底色，使用16進制或關鍵字顏色表示法。 direction：設定跑馬燈文字的移動方向，分別有向左移動及向右移動兩種，屬性值如下。 left：文字由右往左移動。(預設值) right：文字由左往右移動。 loop：設定跑馬燈文字的重複次數，設定值為一般數值，屬性值如下。 一般數值N：重複N次。 -1或infinite：重複無限次。(預設值) 10.1　跑馬燈製作 scrolldelay：設定跑馬燈文字的延遲時間，也就是字幕每隔多久移動一次，所以數字越小字幕移動越快，單位是千分之一秒，屬性值如下。(預設瀏覽器會自動調整) 一般數值M：每隔千分之M秒，字幕移動一次。 scrollamount：設定跑馬燈文字移動的水平距離，當設定值越大時，感覺越像是跳動的文字。屬性值為數字，單位是Pixel。(預設瀏覽器會自動調整) height：設定跑馬燈看板的顯示高度，單位是Pixel。(預設以字幕高度自動調整) 10.1　跑馬燈製作 width：設定跑馬燈看板的顯示長度，單位是Pixel。(預設以字幕長度自動調整) vspace：設定跑馬燈看板與其他文字上下預留的空白高度，單位是Pixel。((預設瀏覽器會自動調整) hspace：設定跑馬燈看板與其他文字左右預留的空白長度，單位是Pixel。(預設瀏覽器會自動調整) 範例10-1： 內容 執行結果 10.2　撥放背景音樂 撥放背景音樂是IE瀏覽器特有的功能，主要是透過bgsound標籤來完成，不過如果要在Netscape中撥放音樂，也有變通的方法，那就是使用embed多媒體撥放標籤來完成。 10.2.1　bgsound bgsound是IE專用的撥放背景音樂標籤。 src屬性：設定音樂檔(*.mid、*.wav、*.au等等)所在位置，可以使用絕對路徑表示法或相對路徑表示法。 loop屬性：設定背景音樂重複撥放次數。若希望不斷地重複撥放背景音樂，可以將loop屬性值設為『infinite』。 範例10-2： 內容 執行結果 10.2.2　embed特殊用法 embed不是專門用來撥放背景音樂的標籤，它也可以用來撥放其他多媒體檔案(在10.3節中將示範使用embed撥放影像檔)，使用embed撥放背景音樂必須將embed標籤的各屬性設定為特殊值才能夠造成背景音樂的效果。 loop屬性：若設為true，則無限次撥放音樂。若設為no，則撥放一次後停止撥放音樂。 範例10-3： 內容 執行結果 10.3　多媒體播放 多媒體包含影像及音樂等類型。傳統上，瀏覽器會將這些多媒體檔案下載到本地端的電腦中，然後再使用適當的撥放軟體來撥放多媒體檔案。 欲將多媒體檔案散播給瀏覽網頁者，基本上採用3種方法： (1) 使用超鏈結a可以讓使用者下載多媒體檔案，瀏覽者可以選擇將多媒體檔案儲存或直接撥放。 (2) 使用多媒體撥放標籤em