网页样式制作（拓展）第13章综合运用HTML5+CSS3技巧制作门户网站页面制作多媒体点播网页.docxVIP

制作多媒体点播网页 任务描述: 制作多媒体点播网页，使用子窗口用来播放视频、文字，通过本任务使学生了解并掌握多媒体标签在网页中的用法。 制作思路: 在网页中使用子窗口用来播放视频，主页面用超级链接实现在子窗口中点播，效果如图10-3所示。 图10-3 任务十效果 制作步骤: (1) 创建主页面rw10.html，采用固定宽度800px并且居中的版式；在section处插入iframe子窗口，命名为abc；在aside处插入4个超级链接，在子窗口中播放制定的音视频，并且提供mp3文件的下载。代码如下： body embed src=forest.mid hidden=true autostart=true/ div id=container header id=banner div id=apDiv4苏东坡个人网站/div /header aside id=apDiv1 br / a href=code/djdq.html target=abc赤壁怀古/abr / a href=code/video.html target=abc时钟视频/abr / a href=code/video2.html target=abc时钟视频2/abr / a href=music/01.mp3世界名曲/abr / /aside section id=apDiv2 iframe name=abc width=600 height=300 frameborder=0 scrolling=no src=code/djdq.html /iframe /section footer id=apDiv3/footer /div /body 在网页的banner处采用图像背景，其它部分采用不同颜色加以区分。样式表代码如下： #container { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #banner { height: 200px; background-image: url(images/banner.jpg); background-repeat: no-repeat; background-color: #D39C63; } #apDiv1 { position:absolute; width:200px; height:300px; z-index:1; background-color: #69F; left: 0; top: 200; } #apDiv2 { position:absolute; width:600px; height:300px; z-index:2; left: 200px; top: 200px; background-color: #CCC; } #apDiv3 { position:absolute; width:800px; height:60px; z-index:3; left: 0px; top: 500px; background-color: #F90; } #apDiv4 { position:absolute; width:303px; height:55px; z-index:1; left: 458px; top: 15px; font-size: 40px; color: #369; } Banner处插入插入flash并使之透明。设置object标签 param name=wmode value=Transparent / (2) 创建网页video.html，在网页文件中使用img标签插入avi视频，鼠标经过时开始播放； img dynsrc=clock.avi start=mouseover/ (3) 创建网页video2.html，在网页文件中使用embed标签插入avi视频,带控制条； embed src=clock.avi autostart=true hidden=false loop=2/ (4) 创建网页djdq.html，在网页文件中使用marquee标签使诗歌从下往上滚动，页面包含背景音乐。 embed src=forest.mid autostart=true hidden=true/ marquee direction=up scrollamount=3 p《念奴娇·赤壁怀古》 /p p大江东去，浪淘尽，千古风流人物。br / 故垒西边，人道是，三国周郎赤壁。br / 乱石穿空