7.2-任务一-制作商品列表索引导航

项目七在页面中使用多媒体任务描述——商品列表导航页面结构1技术引进——在页面中嵌入音频或视频2新手试炼——在网页中嵌入视频34任务实施——制作视频播放页面1任务描述——商品列表导航页面结构视频播放页中依次插入6个“DIV”，并使用id样式和类样式分别控制页面中的文字和图片，使用video标签为页面添加视频，设置完的页面布局如图所示。2技术引进——在页面中嵌入音频或视频网络上有许多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML5针对这种情况，新增了audio标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。目前，HTML5新增的audio标签所支持的音频格式主要是MP3、Wav和Ogg，在各种主要浏览器中的支持情况如表所示。视频标签的出现无疑是HTML5的一大亮点，但是旧的浏览器不支持HTML5Video，并且，涉及到视频文件的格式问题，Firefox、Safari和Chrome的支持方式并不相同，所以，在现阶段要想使用HTML5的视频功能，浏览器兼容性是一个不得不考虑的问题。目前，HTML5新增的video标签所支持的视频格式主要是MPEG4、WebM和Ogg，在各种主要浏览器中的支持情况如表所示。1.在页面中嵌入音频在网页中使用HTML5中的audio标签嵌入音频时，只需要指定audio标签中的src属性值为一个音频源文件的路径就可以了，代码如下所示。audiosrc=images/music.mp3你的浏览器不支持audio元素/audio通过这种方法可以将音频文件嵌入到网页中，如果浏览器不支持HTML5的audio标签，将会在网页中显示替代文字“你的浏览器不支持audio元素”。这种不兼容的提示与canvas标签是一样的，也是HTML5处理不兼容的统一方法。01.执行“文件打开”命令，打开页面“光盘\源文件\项目七\7.1.html”，可以看到页面效果，如图所示。在源代码视图中观察页面的HTML代码，如图所示。练一练——在网页中嵌入音频播放02.光标移至名为music的Div中，将多余文字删除并加入audio标签，并为其设置相应的属性，如图所示。保存页面，在浏览器中预览该页面的效果，可以看到播放器控件并播放音乐，如图所示。练一练——在网页中嵌入音频播放2.在页面中嵌入视频在网页中可以使用HTML5新增的video标签嵌入视频，其方法与audio标签相似，还可以在video标签中添加width和height属性设置，从而控制视频的宽度和高度，代码如下所示。videosrc=images/movie.mp4width=562height=423你的浏览器不支持video元素/video通过这种方法即可把视频添加到网页中，浏览器不兼容时，显示替代文字“你的浏览器不支持video元素”。对于兼容性的处理方法，也可以增加丰富的标签内容，或者增加Flash的替代方案。01.执行“文件打开”命令，打开页面“光盘\源文件\项目七\7.2.html”，可以看到页面效果，如图所示。在源代码视图中观察该页面的HTML代码，如图所示。练一练——在网页中嵌入视频播放02.光标移至名为box的Div中，将多余文字删除，在该Div标签中加入video标签，并设置相关属性，如图所示。在video标签之间加入source标签，并设置相关属性，如图所示。练一练——在网页中嵌入视频播放03.页面中可以看到video标签在网页中的显示效果，如图所示。保存页面，在浏览器中预览页面，可以看到使用HTML5所实现的嵌入视频播放的效果，如图所示。练一练——在网页中嵌入视频播放3.使用source标签由于各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中都能正常显示音频和视频效果，可以提供多种不同格式的音频和视频文件。这就需要使用source标签为audio元素或video元素提供多个备用多媒体文件，代码如下所示。audiosrc=images/music.mp3sourcesrc=images/music.oggtype=audio/oggsourcesrc=images/music.wavtype=audio/wav你的浏览器不支持audio元素/audio或videosrc=images/movie.mp4width=562height=423controlssourcesrc=images/movie.oggtype=video/oggcodes=theora,vorbissourcesrc=images/movie.mp4type=video/mp4你的浏览器不支持video元素/video由上面可以看出，使用source元素代替了audio或video标签中的src属性，这样，浏览器可以根据自身的播放能力，按照顺序自动选择最佳的源文件进行播放。source标签中的属性说明如下所示。src：用于指定媒体文件的URL地址，可以是相对路径地址，也可以是绝对路径地址。type：用于指定媒体文件的类型，属性值为媒体文件的MIME类型，该属性值还可以通过codes参数指定编码格式。为了提高执行效率，定义详细的type属性是非常必要的。3任务实施——制作视频播放页面01新建一个Html文件，使用项目四的制作方法制作页面导航，完成效果如图所示。在crumbs后插入一个id为main-bg的div，并在video-show.css中创建如图所示样式。02在main-bg中插入一个div，并在video-show.css中创建如图所示样式。并将该样式指定给新插入的div，如图所示。03继续插入一个div，并创建对应的样式，应用效果如图所示。04在页面中输入文字内容，并分别指定样式，源代码如图所示样式。05在video-title-left后面插入一个div，并创建应用样式，源代码如图所示。样式如图所示。06完成页面效果如图所示样式。效果图07继续在video-title-right后插入div，并创建应用样式，源代码如图所示。08在源代码中，添加video标签，嵌入视频，源代码如图所示。页面效果如图所示。09在v-show-left后插入一个div，并创建应用v-show-right类样式，源代码如图所示。10在源代码中输入项目列文字，如图所示。分别创建dl、dt和dd样式，如图所示。11应用样式后的页面效果如图所示。4新手试炼——在网页中嵌入视频通过使用embed标签在网页中嵌入视频，读者理解embed标签的使用方法和技巧。同时熟悉参数的设置。读者需要注意，该视频效果只能在IE中浏览，其他浏览器不支持该标签了。PPT模板下载：行业PPT模板：节日PPT模板：素材下载：背景图片：图表下载：优秀PPT下载：教程：教程：教程：资料下载：课件下载：范文下载：试卷下载：教案下载：字体下载：