web前端开发 知识点1：添加字幕 电子教案.doc

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第 二 学期 课程名称 《Web前端开发》 任课教师 单元标题 添加字幕 上课地点 8208微机室 学时 4 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1. 能利用标签marquee、track构建多媒体页面，在页面中添加字幕效果。 1. 理解并掌握标签marquee、track元的使用方法； 教学任务 1. 理解并掌握标签marquee、track的使用方法； 2. 能利用标签marquee、track构建多媒体页面，在页面中添加字幕效果。 教学重、难点 重点：标签marquee、track的使用方法 难点：利用标签marquee、track在页面中添加字幕效果 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 任务完善 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【课题导入】 HTML页面不仅可以编辑文本和图片，同时还可以编辑音频和视频文件，下面利用标签marquee在页面中添加字幕效果下。 【讲授新课】 滚动文字标签—marquee 语法格式 marquee滚动文字/marquee 滚动方向属性—direction 语法格式 marquee direction=滚动方向滚动文字/marquee 该语法中的滚动方向可以包含4个值，分别为up、down、left和right。 滚动方式属性—behavior 语法格式 marquee behavior=滚动方式滚动文字/marquee 滚动速度属性—scrollamount 语法格式 marquee scrollamount=滚动速度滚动文字/marquee 在该语法中，滚动文字的速度实际上是设置滚动文字每次移动的长度，以像素为单位。 滚动延迟属性—scrolldelay 语法格式 marquee scrolldelay=时间间隔滚动文字/marquee 滚动循环属性—loop 语法格式如下： marquee loop=循环次数滚动文字/marquee 滚动循环属性—loop 语法格式如下： marquee width= height=滚动文字/marquee 此处设置宽度和高度的单位均为像素。 滚动空间属性—hspace、vspace 语法格式如下： marquee hspace=水平范围 vspace=垂直范围滚动文字/marquee 2.使用track标记插入字幕文件 track元素是video元素的子元素， track标记必须被书写在 video元素的开始标记与结束标记之间。 属性 说明 src属性 src属性指定字幕文件的存放路径，该属性是必选项。属性值可以是一个绝对URL路径，也可以是一个相对URL路径。 srclang属性 srclang属性用于指定字幕文件的语言。例如，srclang=en 和srclang=zh-cn分别表示字幕文件为英语和汉语。 default属性 default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前 track文件 kind属性 kind属性用于指定字幕文件(即用于存放字幕、章节标题、说明文字或元数据的文件) 的种类。属性值为subtitles、captions、descriptions、chapters与metadata 3.建立WebVTT文件 track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。在 HTML5中通过track标记引用WebVTT文件，这表示可以为音频或视频等媒体资源提供诸如字幕、标题或描述等信息，并将这些信息同步显示在媒体资源中。 （1）WebVTT文件格式 WebVTT (Web Video Text Tracks)是一种文件格式，本质上是是一种文本文件，使用UTF-8编码，文件扩展名为.vtt。 【任务总结】 1、学生完成的课堂任务总结。 2、本节课知识点提问。 【布置作业】 使用标签marquee，实现购商城