响应式Web开发项目教程（HTML5 CSS3 Bootstrap）（第3版）教案-教学设计 第1章 HTML页面结构构建.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE6

《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第1章HTML页面结构搭建

计划课时

4课时

教学引入

随着移动互联网的发展，人们可以通过手机、平板电脑等移动设备来浏览网页，在网页上阅读新闻、观看图像和视频等。网页是人们获取信息的重要媒介，它可以展示文本、图像和视频等可视化内容。构建网页的基础技术包括HTML、CSS和JavaScript。HTML用于定义网页的结构和内容，CSS用于控制网页的样式，JavaScript用于增强网页的交互性和动态性。它们共同创建出多样化且功能丰富的网页，以满足用户的需求。本章将详细讲解如何使用HTML来构建页面结构。

教学目标

使学生熟悉HTML的概念，能够说明HTML的作用和HTML5的优势

使学生熟悉浏览器的概念，能够说明浏览器的作用和Chrome浏览器的主要优势

使学生掌握VisualStudioCode编辑器的使用方法，能够使用VisualStudioCode编辑器进行代码开发

使学生了解标签的概念，能够说出标签的分类、标签的属性和标签之间的关系

使学生掌握页面格式化标签的使用方法，能够灵活运用页面格式化标签将文本呈现在网页中

使学生掌握文本格式化标签的使用方法，能够灵活运用文本格式化标签将文本以加粗、斜体、添加下划线、添加删除线等方式显示

使学生掌握图像标签的使用方法，能够灵活运用img标签定义图像

使学生熟悉HTML实体的概念，能够归纳常用的HTML实体

使学生掌握列表的使用方法，能够定义无序列表、有序列表和定义列表

使学生了解列表嵌套，能够说出列表嵌套的方法

使学生掌握超链接的使用方法，能够灵活运用a标签定义超链接

使学生掌握容器标签的使用方法，能够使用div标签划分网页的区域，使用span标签定义网页中某些需要显示为特殊样式的文本

使学生了解元素的概念，能够说出HTML中常见的元素分类

使学生掌握个人简介页面的制作方法，能够完成个人简介页面的开发

使学生掌握新闻页面的制作方法，能够完成新闻页面的开发

教学重点

页面格式化标签

文本格式化标签

图像标签

列表

超链接

容器标签

教学难点

图像标签

列表

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（HTML概述、浏览器、VisualStudioCode编辑器、标签概述、页面格式化标签）

一、通过直接引入的方式导入新课

HTML（HypertextMarkupLanguage，超文本标记语言）是一种用于创建网页的标记语言，它通过一系列的标签来标记文本、图像和音频等，从而定义网页的结构和内容。这些标签告诉浏览器如何显示和渲染网页的内容。同时，HTML还支持使用属性来进一步定义标签的特性和行为。本节课将对HTML概述、浏览器、VisualStudioCode编辑器、标签概述、页面格式化标签进行讲解。

二、新课讲解

知识点1-HTML概述

教师通过PPT的方式讲解HTML概述。

HTML的概念和作用。

HTML的版本。

HTML5的6个优势。

更好的兼容性

增加了语义化标签。

支持视频和音频。

支持Web存储。

支持Canvas绘图。

增强的表单控件。

知识点2-浏览器

教师通过PPT的方式讲解浏览器。

浏览器的用途和分类。

Chrome浏览器的主要优势。

不易崩溃。

浏览速度快。

安全性高。

跨设备同步。

知识点3-VisualStudioCode编辑器

教师通过PPT结合实际操作的方式讲解VisualStudioCode编辑器。

VisualStudioCode编辑器的概念。

VisualStudioCode编辑器的特点。

轻巧极速。

功能强大。

支持跨平台。

界面设计人性化。

扩展强大。

多语言支持。

下载和安装VisualStudioCode编辑器。

安装中文语言扩展。

安装LiveServer扩展。

VisualStudioCode编辑器的简单使用。

知识点4-标签概述

教师通过PPT的方式讲解标签概述。

标签的分类。

标签的属性。

标签之间的关系。

知识点5-页面格式化标签

教师通过PPT结合实际操作的方式讲解页面格式化标签。

标题标签。

段落标签。

水平线标签。

换行标签。

三、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。

四、布置作业

教师通过高校教