第1章 初识HTML5_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 14 PAGE 2 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第1章 初识HTML5 计划课时 10课时 内容分析 HTML5是超文本标记语言（Hypertext markup language）的第5代版本，目前还处于推广阶段。经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。HTML5正在引领时代的潮流，必将开创互联网的新时代。本章将对HTML5的基本结构和语法、文本控制标记、图像标记以及超链接标记进行详细讲解。 教学目标 了解HTML5发展历程，熟悉HTML5浏览器支持情况。 理解HTML5基本语法，掌握HTML5语法新特性。 掌握文本控制标记、图像标记、超链接标记，能够制作简单的网页。 重点及措施 教学重点： HTML5语法、HTML5标记及其属性、文本控制标记、图像标记、超链接标记。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：HTML5标记及属性、图像标记、超链接标记。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解HTML5发展历程、HTML5优势、HTML5浏览器支持情况、创建第一个HTML5页面） 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是HTML5？为什么要学习HTML5语言呢？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： HTML5是超文本标记语言（Hypertext markup language）的第5代版本，目前还处于推广阶段。从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标记语言的一种更加规范的过程。 随着时代的发展，统一的互联网通用标准显得尤为重要。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的目标就是将Web带入一个成熟的应用平台。在HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。 2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5将会逐渐取代HTML 4.01、XHTML 1.0标准，引领时代的潮流，开创互联网的新时代。 知识点讲解 讲解“HTML5发展历程” （1）、教师展示PPT对“HTML语言”的概念及发展历史进行简单介绍。 （2）、教师展示PPT对HTML从2.0版到3.2版、4.0版，再到1999年的4.01版的各个版本的区别与联系。 （3）、教师展示PPT对HTML5出现的原因及背景进行介绍。 （4）教师展示PPT对HTML5的出现与发展进行讲解，并分析其优缺点。 （5）、学生自主提问，教师对疑难问题进行解答。 讲解“HTML5优势” （1）、教师展示PPT指出HTML5增加了很多新功能和新特性。 （2）、教师展示PPT，针对HTML5的“解决了跨浏览器问题、新增了多个新特性、用户优先的原则、化繁为简的优势”优势分别进行讲解，并联系实际举例说明。 （3）、学生自主提问，教师对疑难问题进行解答。 讲解“HTML5浏览器支持情况” （1）、教师通过PPT展示一些常见浏览器，并进行汇总。 （2）、教师展示PPT分别讲解IE浏览器、火狐浏览器、Google浏览器、Safari浏览器、Opera浏览器对HTML5语言新功能和新特性的浏览器支持情况。 （3）、教师分别对Web标准的“结构标准”、“表现标准”及“行为标准”进行详细讲解，并分别举例说明。 （4）、教师分析这些浏览器纷纷朝着HTML5的方向迈进，指出HTML5的时代即将来临。 （5）、学生自主提问，教师对疑难问题进行解答。 讲解“创建第一个HTML5页面” （1）、教师和学生互动：我们知道，创建文档可以使用word，创建数据表可以使用excel，那么创建HTML网页可以使用哪些工具呢？网页制作过程中，创建HMTL5网页源代码的工具很多，如Editplus、notepad++、sublime等。 （2）、教师指出实际工作中，最常用的网页制作工具是Dreamweaver CS6。 （3）、教师打开Adobe Dreamweaver CS6工具，对Dreamweaver工具的常见操作进行演示说明。 （4）、教师打开Dreamwea