《網(wǎng)頁設(shè)計》課件-7.2 任務(wù)一 制作商品列表索引導航

SAMPLE項目七在頁面中使用多媒體任務(wù)描述——商品列表導航頁面結(jié)構(gòu)1技術(shù)引進——在頁面中嵌入音頻或視頻2新手試煉——在網(wǎng)頁中嵌入視頻347.2任務(wù)一制作商品列表索引導航任務(wù)實施——制作視頻播放頁面1任務(wù)描述——商品列表導航頁面結(jié)構(gòu)ABOUTME

視頻播放頁中依次插入6個“DIV”，并使用id樣式和類樣式分別控制頁面中的文字和圖片，使用<video>標簽為頁面添加視頻，設(shè)置完的頁面布局如圖所示。2技術(shù)引進——在頁面中嵌入音頻或視頻ABOUTME

網(wǎng)絡(luò)上有許多不同格式的音頻文件，但HTML標簽所支持的音樂格式并不是很多，并且不同的瀏覽器支持的格式也不相同。HTML5針對這種情況，新增了<audio>標簽來統(tǒng)一網(wǎng)頁音頻格式，可以直接使用該標簽在網(wǎng)頁中添加相應格式的音樂。目前，HTML5新增的<audio>標簽所支持的音頻格式主要是MP3、Wav和Ogg，在各種主要瀏覽器中的支持情況如表所示。視頻標簽的出現(xiàn)無疑是HTML5的一大亮點，但是舊的瀏覽器不支持HTML5Video，并且，涉及到視頻文件的格式問題，F(xiàn)irefox、Safari和Chrome的支持方式并不相同，所以，在現(xiàn)階段要想使用HTML5的視頻功能，瀏覽器兼容性是一個不得不考慮的問題。目前，HTML5新增的<video>標簽所支持的視頻格式主要是MPEG4、WebM和Ogg，在各種主要瀏覽器中的支持情況如表所示。ABOUTME1.在頁面中嵌入音頻在網(wǎng)頁中使用HTML5中的<audio>標簽嵌入音頻時，只需要指定<audio>標簽中的src屬性值為一個音頻源文件的路徑就可以了，代碼如下所示。<audiosrc="images/music.mp3">你的瀏覽器不支持audio元素</audio>通過這種方法可以將音頻文件嵌入到網(wǎng)頁中，如果瀏覽器不支持HTML5的<audio>標簽，將會在網(wǎng)頁中顯示替代文字“你的瀏覽器不支持audio元素”。這種不兼容的提示與<canvas>標簽是一樣的，也是HTML5處理不兼容的統(tǒng)一方法。ABOUTME01.執(zhí)行“文件>打開”命令，打開頁面“光盤\源文件\項目七\7.1.html”，可以看到頁面效果，如圖所示。在源代碼視圖中觀察頁面的HTML代碼，如圖所示。練一練——在網(wǎng)頁中嵌入音頻播放ABOUTME02.光標移至名為music的Div中，將多余文字刪除并加入<audio>標簽，并為其設(shè)置相應的屬性，如圖所示。保存頁面，在瀏覽器中預覽該頁面的效果，可以看到播放器控件并播放音樂，如圖所示。練一練——在網(wǎng)頁中嵌入音頻播放ABOUTME2.在頁面中嵌入視頻在網(wǎng)頁中可以使用HTML5新增的<video>標簽嵌入視頻，其方法與<audio>標簽相似，還可以在<video>標簽中添加width和height屬性設(shè)置，從而控制視頻的寬度和高度，代碼如下所示。<videosrc="images/movie.mp4"width="562"height="423">你的瀏覽器不支持video元素</video>通過這種方法即可把視頻添加到網(wǎng)頁中，瀏覽器不兼容時，顯示替代文字“你的瀏覽器不支持video元素”。對于兼容性的處理方法，也可以增加豐富的標簽內(nèi)容，或者增加Flash的替代方案。ABOUTME01.執(zhí)行“文件>打開”命令，打開頁面“光盤\源文件\項目七\7.2.html”，可以看到頁面效果，如圖所示。在源代碼視圖中觀察該頁面的HTML代碼，如圖所示。練一練——在網(wǎng)頁中嵌入視頻播放ABOUTME02.光標移至名為box的Div中，將多余文字刪除，在該Div標簽中加入<video>標簽，并設(shè)置相關(guān)屬性，如圖所示。在<video>標簽之間加入<source>標簽，并設(shè)置相關(guān)屬性，如圖所示。練一練——在網(wǎng)頁中嵌入視頻播放ABOUTME03.頁面中可以看到<video>標簽在網(wǎng)頁中的顯示效果，如圖所示。保存頁面，在瀏覽器中預覽頁面，可以看到使用HTML5所實現(xiàn)的嵌入視頻播放的效果，如圖所示。練一練——在網(wǎng)頁中嵌入視頻播放ABOUTME3.使用<source>標簽由于各種瀏覽器對音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中都能正常顯示音頻和視頻效果，可以提供多種不同格式的音頻和視頻文件。這就需要使用<source>標簽為audio元素或video元素提供多個備用多媒體文件，代碼如下所示。<audiosrc="images/music.mp3"><sourcesrc="images/music.ogg"type="audio/ogg"><sourcesrc="images/music.wav"type="audio/wav">你的瀏覽器不支持audio元素</audio>或<videosrc="images/movie.mp4"width="562"height="423"controls><sourcesrc="images/movie.ogg"type="video/ogg"codes="theora,vorbis"><sourcesrc="images/movie.mp4"type="video/mp4">你的瀏覽器不支持video元素</video>由上面可以看出，使用source元素代替了<audio>或<video>標簽中的src屬性，這樣，瀏覽器可以根據(jù)自身的播放能力，按照順序自動選擇最佳的源文件進行播放。<source>標簽中的屬性說明如下所示。src：用于指定媒體文件的URL地址，可以是相對路徑地址，也可以是絕對路徑地址。type：用于指定媒體文件的類型，屬性值為媒體文件的MIME類型，該屬性值還可以通過codes參數(shù)指定編碼格式。為了提高執(zhí)行效率，定義詳細的type屬性是非常必要的。3任務(wù)實施——制作視頻播放頁面ABOUTME01新建一個Html文件，使用項目四的制作方法制作頁面導航，完成效果如圖所示。在crumbs后插入一個id為main-bg的div，并在video-show.css中創(chuàng)建如圖所示樣式。ABOUTME02在main-bg中插入一個div，并在video-show.css中創(chuàng)建如圖所示樣式。并將該樣式指定給新插入的div，如圖所示。ABOUTME03繼續(xù)插入一個div，并創(chuàng)建對應的樣式，應用效果如圖所示。ABOUTME04在頁面中輸入文字內(nèi)容，并分別指定樣式，源代碼如圖所示樣式。ABOUTME05在video-title-left后面插入一個div，并創(chuàng)建應用樣式，源代碼如圖所示。樣式如圖所示。ABOUTME06完成頁面效果如圖所示樣式。效果圖ABOUTME07繼續(xù)在video-title-right后插入div，并創(chuàng)建應用樣式，源代碼如圖所示。ABOUTME08在源代碼中，添加<video>標簽，嵌入視頻，源代碼如圖所示。頁面效果如圖所示。ABOUTME09在v-show-left后插入一個div，并創(chuàng)建應用v-show-right類樣式，源代碼如圖所示。ABOUTME10在源代碼中輸入項目列文字，如圖所示。分別創(chuàng)建dl、dt和dd樣式，如圖所示。ABOUTME11應用樣式后的頁面效果如圖所示。4新手試煉——在網(wǎng)頁中嵌入視頻ABOUTME

通過使用<embed>標簽在網(wǎng)頁中嵌入視頻，讀者理解<embed>標簽的使用方法和技巧。同時熟悉參數(shù)的設(shè)置。讀者需要注意，該視頻效果只能在IE中瀏覽，其他瀏覽器不支持該標簽了。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/wor