《网页设计与制作（活页式）》 教案 项目2HTML5简介.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目二HTML5简介

计划课时

课时

内容分析

用户对网页的直观感受，决定了整个网页达到的效果。网页信息阅读的舒适感、颜色配色要在第一时间直接地传递给用户，因此网页设计的设计细节有三方面：用户的阅读效率、视觉舒适度和网页的品质感。熟练掌握网页设计技巧，培养动手操作能力，才能设计出优秀的网页。

教学目标

了解HTML5的优势。

掌握标签的使用。

掌握文本控制标签和图像标签的使用方法。

重点及措施

教学重点：正确使用头部相关标签；正确使用标题标签；正确使用图像标签

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：标签，文本控制标签，图像标签

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务2.1HTML5的优势

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

HTML5相较于以前的版本有什么优势？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

HTML5是HTML的传递和延续。从HTML4.0、XHTML再到HTML5，从某种意义上讲，这是HTML的更新与规范过程。HTML5并没有给用户带来多大的冲击，其他版本的大部分标签在HTML5版本中依然适用。相比于其他版本的HTML，HTML5的优势主要体现在兼容、合理、易用和新增标签。

知识点讲解

讲解HTML5的优势

（1）教师展示PPT，对静态网页进行具体讲解。

1.兼容

HTML5并不是对之前HTML语言的颠覆性革新，它的核心理念是保持与过去技术完美衔接，因此HTML5有很好的兼容性。例如，实例1的代码中缺少结束标签/p，在HTML5中并没有把这种情况作为错误来处理，而是在允许这种写法的同时，定义了一些可以省略结束标签/p的标签。

2.合理

HTML5中新增的很多标签、属性都是根据实际开发中已经存在的各类网页标签进行提炼和归纳，通过这样的方式让HTML5的标签结构更加合理。例如，W3C（WorldWideWebConsortium,万维网联盟）分析了上百万的页面，发现很多网页制作人员使用divid=header来定义网页的头部区域，于是在HTML5中添加了一个header标签。

3.易用

HTML5作为当下流行的标签语言，严格遵循“简单至上”的原则，主要体现在简化的字符集声明、简化的DOCTYPE、简单而强大的API和以浏览器原生能力替代复杂的JavaScript代码。为了易于使用，HTML5的规范比以前更加细致、精确。

4.新增标签

HTML5新增了许多特性，比如新的语义标签、新的表单控件、强大的图像支持等。新增内容丰富了HTML5实现的功能，比如在游戏开发中可以实现更多的互动。

实例1缺少/p标签

（2）学生自主提问，教师对疑难问题进行解答。

任务2.2HTML5的结构

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

XHTML文档和HTML5的结构有什么不同？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

在其他版本的HTML中，各浏览器对HTML的支持不统一，这就造成同一个页面在不同浏览器中可能显示不同的样式。HTML5通过详细分析各个浏览器所具有的功能，制定了一个通用的标准，并要求浏览器支持这个标准。

知识点讲解

讲解实例2新建XHTML文档和实例3新建HTML5文档格式

（1）教师展示PPT，对实例2新建XHTML文档和实例3新建HTML5文档格式进行具体讲解。

实例2新建XHTML文档

实例3新建HTML5文档

通过对比可以看出，HTML5的结构相较于XHTML的结构简洁明了。

除上述的文档结构标签外，HTML5还简化了meta标签，让定义字符编码的格式变得更加简单。

（2）学生自主提问，教师对疑难问题进行解答。

任务2.3标签概述

2.3.1标签的分类

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

什么是标签？是商场衣服上那个标签吗？是超市货架上的标签吗？HTML中的标签是怎样的？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

在HTML5页面中，带有“”符号的元素被称为HTML标签，如上面提到的htmlheadbody都是HTML标签。HTML标签是放在“”符号中表示某个功能的编码命令，也称为HTML元素。

知识点讲解

讲解标签的分类

（1）教师展示PPT，对标签的分类进行具体讲解。