网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务3 运用HTML5的新标签.docVIP

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院 第 PAGE 5 页 共 NUMPAGES 5 页 《网页设计与制作》课程教学单元设计 单元3 运用HTML5的新标签 授课教师：网页设计与制作 授课班级: 学时：8 教学条件 实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络 教学素材 教材、课件、实训项目单、授课录像、案例库、教学网站等 教学目标设计 知识目标： （1）了解HTML5新标签； （2）掌握结构性标签； （3）掌握级块标签； （4）掌握页面交互标签； （5）掌握行内语义性标签； （6）掌握HTML5的全局属性。 能力目标： （1）能合理区分HTML5结构性标签的语义 ； （2）能根据网页页面效果，运用HTML5结构性标签构造页面效果； （3）能恰当的使用HTML5的全局属性。 任务描述 本任务就是使用HTML5新标签来优化门户网站主页的页面文档。 教学内容 （1）HTML5的结构性标签； （2）HTML5的级块标签； （3）HTML5的页面交互标签； （4）HTML5的行内语义性标签； （5）HTML5的全局属性。 重点： （1） HTML5的结构性标签； （2）页面交互标签、行内语义性标签、行内语义性标签。 难点： （1）结构性标签的使用场合； （2） HTML5的全局属性的使用。 任务分析与实现 （1）任务分析； （2）任务实现代码。  教学过程设计 3.1 HTML5的结构标签（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务描述 任务就是使用HTML5新标签来优化门户网站主页的页面文档。 讲授法 多媒体 教师：分析任务 学生：信息交流 知识讲授 初步认识结构性标签 讲解 section标签、 article标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行体验 section标签、 article标签 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解nav标签、aside标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行体验nav标签、aside标签。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解header标签、footer标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行体验header标签、footer标签。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 HTML5的新结构标签section标签、 article标签、nav标签、aside标签、header标签、footer标签 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 浏览清华大学网站页面，人认识HMTL5中的结构标签。 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 3.2 分组标签与页面交互标签（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 知识讲授 讲解figure和figcaption、hgroup标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行体验figure和figcaption、hgroup标签。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解details标签和summary标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行体验details标签和summary标签。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 menu标签与commond标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行体验 menu标签与commond标签 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 （1）figure和figcaption、hgroup标签 （2）details标签和summary标签、menu标签与commond标签 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 浏览北京大学网站页面，人认识HMTL5中的结构标签 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 3.3 行内语义与HTML5的全局属性（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 知识讲授 progress标签、 meter标签 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行体验 progress标签、 meter标签。 实验教学法 多媒体 教师：辅导