（中职）Web前端设计基础 项目四-2电子教案

1、（中职）Web前端设计基础 项目四-2电子教案（中职）Web前端设计基础 项目四-2电子教案（中职）Web前端设计基础 项目四-2电子教案教学课题项目4 网页中的多媒体4.3项目实施、4.4项目拓展授课班级授课时间教学目标知识目标1.掌握在网页中插入超链接的方法；2.掌握在网页中制作音频和视频播放器的方法；3.掌握CSS属性的设置。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，掌握了创建超链接、锚点链接和热点链接，才及制作音频、视

2、频播放器的方法。本节课通过制作HTML 5音乐播放器和视频播放器来应用超链接、音视频等标签元素。教学重点1.创建超链接；2.插入音视频文件的方法；3.制作音乐和视频播放器；4.CSS属性设置。教学难点1.制作音乐和视频播放器；2.CSS属性设置。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示网页页面，通过页面中的HTML 5音乐播放器和视频播放器，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、项目实施单元格列行单元格列行单元格列行通过前面知识的学习，掌握了HTML 5网页中超链接、音频、视

3、频等标签元素，下面通过制作HTML 5音乐播放器来应用这些网页元素，效果如图所示。Step01 启动Sublime程序，新建并保存文件名称为4-9.html。Step02 输入代码如下：1 2 3 4 5 HTML5音乐播放器6 7 a:hovertext-decoration: none;font-size: 14px;color: red;8 9 10 11 歌曲欣赏12 13 14 15 祖国万岁16 我爱你中国17 感恩祖国18 共和国的日子19 20 21 var audio = document.getElementById(audio);22 function one()23 a

4、udio.src = media/01.mp3;24 audio.play(); 25 26 function two()27 audio.src=media/02.mp3;28 audio.play(); 29 30 function three()31 audio.src=media/03.mp3;32 audio.play(); 33 34 function four()35 audio.src=media/04.mp3;36 audio.play(); 37 38 39 40 二、项目拓展此项目拓展创建视频播放器，效果所示。Step01 用Sublime编辑器新建并保存文件4-10.h

5、tml。Step02 输入代码如下：1 2 3 4 HTML5视频播放器5 6 7 pwidth:680px;8 9 10 11 HTML5视频播放器 12 13 亲，您的浏览器不支持html5的video标签！14 15 16 播放17 暂停18 快进10秒19 快退10秒20 无声21 加速播放22 减速播放23 正常播放24 调高嗓门25 调低嗓门26 27 28 var video = document.getElementById(video);29 /播放30 function bofang()31 video.play();32 33 /暂停34 function zanting

6、()35 video.pause();36 37 /快进10秒38 function kuaijin()39 video.currentTime += 10;40 41 /快退10秒42 function kuaitui()43 video.currentTime -= 10;44 45 /有声和无声 即静音和不静音46 function shutup(obj)47 if(video.muted)48 obj.innerHTML = 无声;49 video.muted = false;50 else51 obj.innerHTML = 有声;52 video.muted = true;53 5

7、4 55 function speedup()56 video.playbackRate = 3;57 58 function speeddown()59 video.playbackRate = 1/3;60 61 function normal()62 video.playbackRate = 1;63 64 function upper()65 video.volume +=0.1;/声音值得范围是0-166 67 function lower()68 video.volume -=0.1;69 70 71 72 Step03 再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览

8、器中打开”命令，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳通过项目实施和项目拓展制作了HTML 5音频和视频播放器两个案例，学习了在网页中添加超链接、音频、视频和控制音视频对象的属性和方法，掌握了、等标签的使用方法。标签或属性格式或用法说明标签超链接文字超链接标签href属性表示链接地址，

9、链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等标签属性target属性控制浏览器窗口的打开方式，target属性值有四个：_self、_blank、_top、_parent标签和标签创建热点区域标签name属性为区域命名，设置值必须与标签的usemap属性值相同创建热点区域属性usemap属性建立图片热点区域时，必须插入图片且为图片增加usemap属性，属性值必须以“#”开头，加上名称shape属性rect（矩形）circle（圆形）poly（多边形）coords属性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,

10、y3标签添加音频标签src属性定义要播放的音频地址标签的常见属性controls属性提供添加播放、暂停和音量控件的属性autoplay属性出现该属性，音频在就绪后马上播放loop属性出现该属性，每当音频结束时重新开始播放preload属性出现该属性，音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload属性值有三种：auto、meta、none标签添加视频标签src属性定义要播放的视频地址标签的常见属性controls属性提供添加播放、暂停和音量控件的属性autoplay属性出现该属性，视频在就绪后马上播放height属性设置视频播放器的高度width属性设置视频播放器的宽度loop属性出现该属性，媒介文件完成播放后再次开始播放preload属性出现该属性，视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload属性值有三种：auto、meta、nonemuted属性设置视频的音频输出应该被静音poster属性设置视频下载时显示的图像，或在用户点击播放按钮前显示的图像教师讲授，学生归纳总结，并作适