第8章 多媒体技术_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 10 PAGE 2 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第8章 多媒体技术 计划课时 6课时 内容分析 在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。本章将对HTML5多媒体的特性以及创建音频和视频的方法进行详细讲解。 教学目标 熟悉HTML5多媒体特性。 了解HTML5支持的音频和视频格式。 掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。 掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。 了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。 重点及措施 教学重点：在HTML5中嵌入视频、在HTML5中嵌入音频。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：在HTML5中嵌入视频、在HTML5中嵌入音频。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解HTML5多媒体的特性、视频和音频编解码器、多媒体的格式、支持视频和音频的浏览器） 说明： 将8.1~8.2小节作为一个课时进行讲解。 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第7章“表单的应用”的基础知识。 1、在上一章中，我们学习了表单的相关元素及其属性和CSS控制表单样式。那么，表单的属性都有那些呢？ 答案： 1、 action属性? 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。例如： form action=form_action.asp 表示当提交表单时，表单数据会传送到名为?form_action.asp 的页面去处理。 action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。例如： form action=mailto:htmlcss@163.com 表示当提交表单时，表单数据会以电子邮件的形式传递出去。 2、method属性? method属性用于设置表单数据的提交方式，其取值为get或post。在HTML5中，可以通过 form标记的method属性指明表单处理服务器处理数据的方法，示例代码如下： form action=form_action.asp method=get 在上面的代码中，get为method属性的默认值，采用get方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据。 如果采用post方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，然后，浏览器按分段传输的方法将数据发送给服务器。 另外，采用get方法提交的数据将显示在浏览器的地址栏中，必威体育官网网址性差，且有数据量的限制。而post方式的必威体育官网网址性好，并且无数据量的限制，所以使用method=post可以大量的提交数据。 3、name属性? name属性用于指定表单的名称，以区分同一个页面中的多个表单。 4、autocomplete属性? autocomplete属性用于指定表单是否有自动完成功能，所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。 autocomplete属性有2个值，对它们的解释如下： on：表单有自动完成功能 off：表单无自动完成功能 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 支持视频和音频的浏览器有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 浏览器对video和audio的支持情况 浏览器 支持版本 IE 9.0及以上版本 Frefox 3.5及以上版本 Opear 10.5及以上版本 Chrome 3.0及以上版本 Safari 3.2及以上版本 知识点讲解 讲解“HTML5多媒体的特性” （1）、教师展示PPT对“HTML5多媒体的特性”进行简单介绍。 （2）、学