（中职）Web前端设计基础 项目四-2电子教案.docx
-
资源ID：48039488
资源大小：788.22KB
全文页数：8页
- 资源格式： DOCX
下载积分：10金币
快捷下载
会员登录下载
微信登录下载
三方登录下载：
微信扫一扫登录
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
（中职）Web前端设计基础 项目四-2电子教案.docx
（中职）Web前端设计基础 项目四-2电子教案教学课题项目4 网页中的多媒体4.3项目实施、4.4项目拓展授课班级授课时间教学目标知识目标1.掌握在网页中插入超链接的方法；2.掌握在网页中制作音频和视频播放器的方法；3.掌握CSS属性的设置。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，掌握了创建超链接、锚点链接和热点链接，才及制作音频、视频播放器的方法。本节课通过制作HTML 5音乐播放器和视频播放器来应用超链接、音视频等标签元素。教学重点1.创建超链接；2.插入音视频文件的方法；3.制作音乐和视频播放器；4.CSS属性设置。教学难点1.制作音乐和视频播放器；2.CSS属性设置。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示网页页面，通过页面中的HTML 5音乐播放器和视频播放器，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、项目实施通过前面知识的学习，掌握了HTML 5网页中超链接、音频、视频等标签元素，下面通过制作HTML 5音乐播放器来应用这些网页元素，效果如图所示。Step01 启动Sublime程序，新建并保存文件名称为4-9.html。Step02 输入代码如下：1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>HTML5音乐播放器</title>6 <style>7 a:hovertext-decoration: none;font-size: 14px;color: red;8 </style>9 </head>10 <body background="images/bfqbg.jpg">11 <h3>歌曲欣赏</h3>12 <br>13 <audio src="" controls="controls" id="audio"></audio>14 <ul style="margin-top:40px;">15 <li><a href="#" onclick="one()">祖国万岁</a></li>16 <li><a href="#" onclick="two()">我爱你中国</a></li>17 <li><a href="#" onclick="three()">感恩祖国</a></li>18 <li><a href="#" onclick="four()">共和国的日子</a></li>19 </ul>20 <script type="text/javascript">21 var audio = document.getElementById("audio");22 function one()23 audio.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 </script>39 </body>40 </html>二、项目拓展此项目拓展创建视频播放器，效果所示。Step01 用Sublime编辑器新建并保存文件4-10.html。Step02 输入代码如下：1 <!doctype html>2 <html>3 <head>4 <title>HTML5视频播放器</title>5 <meta charset="utf-8">6 <style>7 pwidth:680px;8 </style>9 </head>10 <body>11 <h3>HTML5视频播放器</h3> 12 <video src="media/movie.webm" controls="controls" id="video" poster="media/bg.jpg" width="680px">13 亲，您的浏览器不支持html5的video标签！14 </video>15 <p>16 <button onclick="bofang()">播放</button>17 <button onclick="zanting()">暂停</button>18 <button onclick="kuaijin()">快进10秒</button>19 <button onclick="kuaitui()">快退10秒</button>20 <button onclick="shutup(this)">无声</button>21 <button onclick="speedup()">加速播放</button>22 <button onclick="speeddown()">减速播放</button>23 <button onclick="normal()">正常播放</button>24 <button onclick="upper()">调高嗓门</button>25 <button onclick="lower()">调低嗓门</button>26 </p>27 <script type="text/javascript">28 var video = document.getElementById("video");29 /播放30 function bofang()31 video.play();32 33 /暂停34 function zanting()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 54 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 </script>71 </body>72 </html>Step03 再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳通过项目实施和项目拓展制作了HTML 5音频和视频播放器两个案例，学习了在网页中添加超链接、音频、视频和控制音视频对象的属性和方法，掌握了<a>、<audio>、<video>等标签的使用方法。标签或属性格式或用法说明<a>标签<a href="链接地址" target="目标窗口的打开方式">超链接文字</a>超链接标签href属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等<a>标签属性target属性控制浏览器窗口的打开方式，target属性值有四个：_self、_blank、_top、_parent<map>标签和<area>标签<img src="图片地址" usemap="#名称"><map name="#名称"><area shape="rect" coords="x1,y1,x2,y2" href="#"><area shape="circle" coords="x,y,r " href="#"><area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="#"></map>创建热点区域标签name属性为区域命名，设置值必须与<img>标签的usemap属性值相同创建热点区域属性usemap属性建立图片热点区域时，必须插入图片且为图片增加usemap属性，属性值必须以“#”开头，加上名称shape属性rect（矩形）circle（圆形）poly（多边形）coords属性coords="x1,y1,x2,y2"coords="x,y,r"coords="x1,y1,x2,y2,x3,y3"<audio>标签<audio src="音频文件" controls="controls"></audio>添加音频标签src属性定义要播放的音频地址<audio>标签的常见属性controls属性提供添加播放、暂停和音量控件的属性autoplay属性出现该属性，音频在就绪后马上播放loop属性出现该属性，每当音频结束时重新开始播放preload属性出现该属性，音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。preload属性值有三种：auto、meta、none<video>标签<video src="视频文件" controls="controls"></video>添加视频标签src属性定义要播放的视频地址<video>标签的常见属性controls属性提供添加播放、暂停和音量控件的属性autoplay属性出现该属性，视频在就绪后马上播放height属性设置视频播放器的高度width属性设置视频播放器的宽度loop属性出现该属性，媒介文件完成播放后再次开始播放preload属性出现该属性，视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。preload属性值有三种：auto、meta、nonemuted属性设置视频的音频输出应该被静音poster属性设置视频下载时显示的图像，或在用户点击播放按钮前显示的图像教师讲授，学生归纳总结，并作适当的笔记。课后作业一、上机实训1.上机完成项目实施中音乐播放器的实例操作。2.上机完成项目拓展中视频播放器的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。学生上机完成任务并提交，进行分组互评。教学反思感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用
