《HTML5+CSS3网页设计与制作（第2版）》
教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
年月日
课题名称
第1章HTML5+CSS3网页设计概述
计划课时
2课时
教学引入
近年来，HTML5和CSS3一直是互联网技术中备受瞩目的话题。在开始学习HTML5和CSS3之前，了解一些与网页相关的基础知识是非常必要的，这有助于初学者厘清思路，快速进入后续章节的学习。本章将详细介绍网页的相关内容，包括网页概述、网页制作入门以及VisualStudioCode网页代码编辑工具。通过学习这些内容，初学者将能够建立坚实的基础，为后续的HTML5和CSS3学习做好充分准备。
教学目标
使学生了解网页，能够阐述网页的作用，并使用浏览器查看网页代码
使学生了解网页名词，能够阐述网页相关名词的含义
使学生熟悉Web标准，能够归纳Web标准的构成
使学生了解HTML，能够阐述HTML的作用
使学生了解CSS，能够阐述CSS的作用
使学生了解JavaScript，能够阐述JavaScript的作用
使学生了解浏览器，能够列举当前常见的浏览器，并介绍它们各自所使用的内核
使学生掌握VisualStudioCode的用法，能够使用该工具编写网页代码
教学重点
VisualStudioCode的使用
教学难点
无
教学方式
教学采用教师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一课时
（认识网页、网页名词解释、Web标准、HTML、CSS、JavaScript、网页的展示平台——浏览器）
一、通过直接导入的方式讲解新课
上网时浏览新闻、查询信息、观看视频等都是在浏览网页。网页可以被看作是承载各种内容的容器，所有可视化的内容都可以通过网页展示给用户。那么HTML5和网页有什么关系？网页是由什么构成的？网页有哪些标准？本节课将详细介绍网页的基础内容。
二、新课讲解
知识点1-认识网页
教师通过展示PPT的方式讲解认识网页。
通过展示网页并查看源代码，了解网页的组成
介绍网页的分类
知识点2-网页名词解释
教师通过展示PPT的方式讲解网页名词。
Internet
WWW
URL
DNS
HTTPHTTPS
Web
W3C组织
知识点3-Web标准
教师通过展示PPT的方式讲解Web标准。
Web标准的出现
Web标准中的结构、表现和行为标准
知识点4-HTML
教师通过展示PPT的方式讲解什么是HTML。
HTML的概念
HTML的主要优势
知识点5-CSS
教师通过展示PPT的方式讲解什么是CSS。
CSS的概念
展示CSS的效果
CSS的发展历史
知识点6-JavaScript
教师通过展示PPT的方式讲解什么是JavaScript。
JavaScript的概念
JavaScript的实际应用
知识点7-网页的展示平台——浏览器
教师通过展示PPT的方式讲解网页的展示平台——浏览器。
浏览器的概念
常用的浏览器
三、归纳总结
教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
四、布置作业
教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。
第二课时
（VisualStudioCode的安装和设置、VisualStudioCode的使用、阶段案例——创建第一个网页）
复习巩固
教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。
通过直接导入的方式导入新课
为了便于编辑网页代码，网页制作人员通常会使用一些便捷的代码编辑工具。例如EditPlus、HBuilder、Sublime、Dreamweaver、VisualStudioCode等。其中，VisualStudioCode（简称VSCode）是一款轻量且开源的代码编辑器，深受网页制作人员的喜爱。本节课将详细介绍VisualStudioCode的安装、设置和使用技巧。
新课讲解
知识点1-VisualStudioCode的安装和设置
教师通过实操的方式演示VisualStudioCode的安装和配置。
下载安装VisualStudioCode
VisualStudioCode的初始化配置
知识点2-VisualStudioCode的使用
教师通过实操的方式演示VisualStudioCode的使用。
创建文件夹和文件
保存和操作文件
编写代码
知识点3-阶段案例——创建第一个网页
教师通过实操的方式创建第一个网页，并安排学生独立完成。
四、归纳总结
教师回顾本节课所讲的内容，并通过提问的方式