刘万辉css任务10,网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务7 运用影音多媒体.doc...

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院

第 PAGE 1 页 共 NUMPAGES 3 页

《网页设计与制作》课程教学单元设计

单元7 运用影音多媒体

授课教师：网页设计与制作

授课班级:

学时：8

教学条件

实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络

教学素材

教材、课件、实训项目单、授课录像、案例库、教学网站等

教学目标设计

知识目标：

(1)了解视频、音频相关格式；

(2)掌握滚动字幕标签的使用；

(3)掌握标签的使用方法；

(4)掌握标签的使用方法；

(5)掌握标签的使用方法。

能力目标：

(1)能结合浏览器的支持情况，恰当的选择视频格式；

(2)能根据网页页面效果，编写CSS编写视频播放样式效果。

任务描述

本任务就是在门户页面恰当的添加多媒体元素。

教学内容

(1)滚动字幕标签的使用；

(2)标签的使用方法；

(3)标签的使用方法；

(4)标签的使用方法。

重点：

(1)滚动字幕标签的使用；

(2)标签的使用方法；

(3)标签的使用方法；

(4)标签的使用方法。

难点：

(1)中视频格式的兼容问题的处理；

(2)中视频格式的兼容问题的处理；。

任务分析与实现

(1)任务分析；

(2)任务实现代码。

教学过程设计

7.1 多媒体元素代码的使用(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

任务描述

本任务就是在门户页面恰当的添加多媒体元素。

讲授法

多媒体

教师：分析任务

学生：信息交流

知识讲授

讲解：多媒体对象基本知识，视频与音频格式。滚动字幕标签的使用

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践标签的使用。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解：插入多媒体文件标签的方法。

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践标签的使用方法。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解： HTML5插入视频video标签、音频audio标签的方法

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践视频video标签、音频audio标签的使用方法。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

项目案例

综合实例：花卉视频介绍

项目教学法

网络环境

学生自己练习

课堂

总结

(1)滚动字幕标签的使用；

(2)标签的使用方法；

(3)标签的使用方法；

(4)标签的使用方法。

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

综合实例：花卉视频介绍

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

7.2 任务实施：门户网站banner中的视频展示(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

任务描述

在任务6实现banner区域的基础上，运用插入多媒体元素的方法在banner区域中，奖中间的图片元素更换为视频元素。

任务驱动教学法

多媒体

教师：分析任务

学生：信息交流

任务分析

运用HTML5中的video标签结合CSS3的页面布局方法实现页面效果

任务驱动教学法

多媒体

教师：辅助分析

学生：交流讨论

任务计划

小组讨论，将任务分解

任务驱动教学法

多媒体

课件演示

教师：辅助分析

学生：交流讨论

任务实施

由于在任务6中，已经完成了基本页面布局，所以，只需要对页面局部进行修改即可。

第一步：修改区域的HTML结构代码，插入新的video元素。

第二步：编写插入video元素后的CSS样式表。

任务驱动教学法

多媒体

教师：辅导交流

学生：实践练习

任务汇报

完成任务后，简短的交流

任务驱动教学法

多媒体

课件演示

教师：点评优化

学生：汇报交流

课堂

总结

综合使用HTML5结合CSS3进行页面布局，实现页面效果。

任务驱动教学法

多媒体

课件演示

整理笔记

引导创新

任务拓展

通过网络URL地址网络多媒体文件

调用网页多媒体文件

任务驱动教学法

多媒体

拓展提高

课外实训

企业招聘页面结构实现

项目教学法

网络环境

布置作业

提出要求