网页设计与制作html+css+javascript)教学全套课件（第2版）刘万辉教学资源任务3 运用html5的新标签.doc

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院《网页设计与制作》课程教学单元设计单元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标签。

实验教学法多媒体教师：交流学生：实践练习知识讲授time标签、video标签和audio标签讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行体验 time标签、video标签和audio标签实验教学法多媒体教师：交流学生：实践练习知识讲授contenteditable属性、 contenteditable属性、 spellcheck属性、 spellcheck属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面分别进行体验contenteditable属性、 contenteditable属性、 spellcheck属性、 spellcheck属性实验教学法多媒体教师：交流学生：实践练习课堂总结（1）行内语义属性（2）全局属性教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：个人博客页面结构设计教师指导学生自学多媒体布置作业提出要求教学过程设计3.4 任务实施：使用HTML5新标签优化网页（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是使用HTML5新标签来优化门户网站主页的页面文档任务驱动教学法多媒体教师：分析任务学生：信息交流任务分析综合HTML5的基本语法、HTML5的结构性标签、级块标签、行内语义性标签，分析首页的页面结构，在任务2的基础之上，运用结构性标签完善门户网站的HTML代码。

任务驱动教学法多媒体教师：辅助分析学生：交流讨论任务计划小组讨论，将任务分解任务驱动教学法多媒体课件演示教师：辅助分析学生：交流讨论任务实施教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面、制作页面链接等步骤完成页面的制作，并指出其中需要注意的事项说明：在网页制作时可适时停下来，让学生自行尝试小组之间可以协作讨论，教师巡视，对疑难问题进行解答任务驱动教学法多媒体教师：交流学生：实践练习任务汇报完成任务后，简短的交流任务驱动教学法多媒体课件演示教师：点评优化学生：汇报交流课堂总结综合使用HTML5新结构标签、基本标签来编写门户网站的基本页面效果任务驱动教学法多媒体课件演示整理笔记引导创新任务拓展为了使HTML页面中的文本更加形象生动，突出一些文本的特效，再学习 div标签和span标签，深入区分 div标签和span标签任务驱动教学法多媒体拓展提高课外实训网站页面的分析与编写项目教学法网络环境布置作业提出要求第 6 页 共 6 页。