《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第5课 应用HTML5中的图像及多媒体

第课应用HTML5第课应用HTML5中的图像及多媒体的基基本本PAGE853153215321应用HTML5中的图像及多媒体第课PAGE75453212应用HTML55453212应用HTML5中的图像及多媒体第课PAGE1

课题应用HTML5中的图像及多媒体课时2课时（90min）教学目标知识技能目标：（1）学习在网页中应用图像的方法（2）了解HTML5中流的使用（3）掌握在网页中使用音频、视频的方法思政育人目标：提高学生在逻辑思维和辩证思维方面的认识，培养出学生细心谨慎的学习态度以及处理事情大局观的处理方法，分清主要矛盾和次要矛盾教学重难点教学重点：学习网页中应用图像、音频、视频的方法和操作流程教学难点：在网页中插入图像、音频、视频教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（20min）第2节课：问题导入（4min）知识讲解（24min）

课堂练习（10min）

课堂小结（5min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】提出问题，引出新知识点前面介绍的都是对文本进行操作，那如何在HTML5中插入图像、图标？如何使得HTML5网页内容更加的丰富、美观，图像和图标的布局又应该如何使用【学生】思考、发言【教师】总结发言这个时候就可以利用HTML5中提供的图像等标签来对对象进行处理，简化操作用问题导入，通过问答的方式，让学生主动思考如何在HTML5中插入图像、图标知识讲解

（20min）【教师】介绍添加图像与图标<imgsrc="url"alt="代替文本"/>【教师】演示【例3-1】操作流程，实现图3-1效果<imgsrc="images/p1.jpg"alt="清明上河图(局部)"/>【教师】演示【例3-2】操作流程，实现图3-2效果<title>名画赏析——清明上河图（局部）</title><linkrel="shortcuticon"href="images/favicon.ico"/><linkrel="shortcuticon"href="图标地址"/>【学生】聆听、记录、思考通过讲解知识点，让学生初步了解HTML5中对于图像与图标的操作课堂练习

（19min）【教师】布置课堂练习【学生】聆听、思考、提问【教师】回答学生提问，给出提示【学生】完成课堂练习【教师】给出参考答案，讲解课堂练习【学生】聆听老师讲解，修改练习内容利用练习法，加强学生对HTML5中图像、图标标签的理解第二节课问题导入

（4min）【教师】提出问题，让学生思考上一节课，我们所学习的都是对图像、图标等对象的处理，但是在通常的HTML5的网页中，可以经常看到多媒体等对象，比如视屏、音频等，这些对象的出现让HTML5网页中的内容充满了动态美学，那么，对于此类对象，在HTML5语言中应该如何处理呢【学生】聆听、思考、讨论通过循循善诱的指导方式，告诉学生，现有解决方案存在的的不足，引导学生对解决方案的思考知识讲解

（24min）【教师】讲述HTML5中的添加流在HTML5中，新增了流标签<figure>，它表示页面中一块独立的内容，如图像、图表、代码片段等。其中的内容应与网页主体内容相关但又独立于上下文，在页面中显示为具有左右缩进的内容块。<figure>标签中有一个表示流标题的<figcaption>标签，它位于<figure>标签的首行或尾行。一个<figure>标签中只允许有一个<figcaption>标签，不必要时可以省略【教师】演示【例3-3】操作流程，实现图3-4效果在例3-2的页面中应用流（部分代码），页面效果如图3-4所示。<figure> <figcaption>清明上河园——张择端雕像</figcaption> <imgsrc="images/p2.jpg"alt="张择端"height="250px"/> <p>张择端，字正道，汉族，北宋绘画大师。宣和年间任翰林待诏，擅画楼观、屋宇、林木、人物。所作风俗画中市肆、桥梁、街道、城郭刻画细致，界画精确，豆人寸马，形象如生。他自幼好学，早年游学汴京(今河南开封)，后习绘画。</p></figure>图3-4应用流的页面效果【学生】聆听、思考、理解【教师】讲解HTML5中的嵌入多媒体文件1．嵌入音频在HTML5中，使用<audio>标签嵌入音频文件，具体格式为：<audiosrc="音频地址"controls="controls">说明文字</audio>其中，src属性表示音频文件的地址；controls属性表示显示音频的播放控件，其值为controls；说明文字会在不支持<audio>标签的浏览器中显示。【教师】演示【例3-5】操作流程，实现图3-5效果在网页中嵌入音频（部分代码），页面效果如图3-5所示。<audiosrc="media/a1.mp3"controls="controls">打字音效</audio>图3-5在网页中嵌入音频的页面效果2．嵌入视频在HTML5中，使用<video>标签嵌入视频文件，具体格式为：<videosrc="视频地址"controls="controls">说明文字</video>其中各属性的含义与<audio>标签相同。【教师】演示【例3-6】操作流程，实现图3-6效果在网页中嵌入视频（部分代码），页面效果如图3-6所示。<videosrc="media/v1.mp4"controls="controls">风景视频</video>图3-6在网页中嵌入视频的页面效果【学生】聆听、思考、理解通过讲解知识点，让学生进一步了解HTML5中流和多媒体文件的使用课堂练习

（10min）【教师】设置课堂练习内容教师讲述游戏内容并且给出一部分代码，以小组为单位，看哪一组优先完成游戏为“图书简介”页面添加图像及视频本作业布置通过为项目2中创建的“图书简介”页面添加图像及视频内容，练习在网页中插入图像、视频的方法【学生】思考、完成课堂练习内容【教师】统计小组成绩，让优秀小组上台讲述学习心得【学生】讲述学习心得通过课堂练习，巩固所学知识，并将所学知识与实际相结合课堂小结

（5min）【教师】总结本节课的知识点本节课学习了在网页中应用图像的方法、HTML5中流的使用，以及在网页中使用音频、视频的方法。希望大家在课后多加练习，巩固所学知识。【学生】聆听、思考、记录通过复习总结，让学生清楚的梳理这节课学习的内容作业布置（2min）【教师】布置课后作业完成H