资源描述
《网页设计与制作（HTML+CSS）（第2版）》
全书教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
202 年 月
课题名称
第1章 HTML和CSS网页设计概述
计划课时
4课时
教学引入
在学习HTML和CSS之前，我们首先需要了解一些与网页制作相关的知识，为学习后面章节的内容夯实基础。本章将从网页概述、网页制作技术、网页展示平台以及网页代码编辑工具四个方面详细讲解网页制作的相关知识。
教学目标
l 使学生了解网页，能够举例说明网页的构成和相关名词的含义。
l 使学生熟悉网页制作的入门技术，能够归纳总结这些技术的特点。
l 使学生了解网页的展示平台——浏览器，能够说出各主流浏览器的特点。
l 使学生掌握Dreamweaver工具的使用，能够运用Dreamweaver工具搭建一个简单的网页。
教学重点
l 创建第一个网页
教学难点
l Web标准
教学方式
课堂教学以PPT讲授为主，并结合多媒体进行教学
教
学
过
程
第一课时
（网页的构成、网页相关名词、Web标准、HTML简介、CSS简介）
一、通过直接导入的方式导入新课
说到网页，其实大家并不陌生，我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。网页可以看作承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。然而网页是由什么构成的？我们经常提及的Web、网址又是什么？网页有哪些标准？本节将从网页的构成、网页相关名词、Web标准三个方面详细讲解网页的相关知识。
二、新课讲解
知识点1-网页的构成
教师展示PPT，讲解网页的构成。
（1） 分析淘宝网首页中包含的元素
l 文字
l 图像
l 超链接
l 音频
l 视频
l 动画
（2） 查看网页的源代码并分析
知识点2- 网页相关名词
教师展示PPT，讲解网页相关名词。
（1） Internet
（2） WWW
（3） URL
（4） DNS
（5） HTTP和HTTPS
（6） Web
（7） W3C组织
知识点3-Web标准
教师展示PPT，讲解Web标准。
（1） 结构
l HTML
l XML
l XHTML
（2） 表现
（3） 行为
l ECMAScript
l BOM
l DOM
知识点4-HTML简介
教师展示PPT，讲解HTML简介。
（1） HTML概念：HTML（Hyper Text Markup Language，超文本标签语言）是通过标签描述网页中的文本、图像、声音等内容。
（2） HTML发展史：
l 1989年HTML首次应用到网页设计。
l 1993年HTML首次以因特网草案的形式发布（第一版）。
l 1995年第2.0版。
l 1997年第3.2版。
l 1997年第4.0版。
l 1999年第4.01版。
l 2008年发布了HTML5的工作草案。
l 2014年10月底，W3C宣布HTML5正式定稿。
知识点5-CSS简介
教师展示PPT，讲解CSS简介。
（1） CSS概念：CSS也被称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外观（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
（2） CSS发展史：
l 1996年12月W3C发布了第一个有关样式的标准CSS1。
l 1998年5月发布了CSS2。
l 2001年5月23日W3C完成了CSS3的工作草案。
三、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
四、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第二课时
（网页展示平台）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
下列选项中，属于网页构成要素的有（ ）。
A、文字 B、超链接
C、音频 D、代码
答案：ABC
说明：网页主要由文字、图像和超链接（超链接为单击可以跳转的其他页面的元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。
二、通过直接导入的方式导入新课
浏览器是网页展示的平台，只有经过浏览器渲染，网页才能将美丽的效果呈现给用户。浏览器的种类有很多，例如IE浏览器、火狐浏览器、谷歌浏览器、Edge浏览器、Safari浏览器和Opera浏览器等。
三、新课讲解
知识点-网页展示平台
教师展示PPT，讲解网页展示平台。
（1） IE浏览器
（2） 火狐浏览器
（3） 谷歌浏览器
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第三、四课时
（Dreamweaver操作界面、Dreamweaver初始化设置、创建第一个网页）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
请列举常见的网页展示平台？
答案：火狐浏览器、谷歌浏览器、IE浏览器。
说明：无
二、通过直接导入的方式导入新课
为了方便网页制作，我们通常会选择一些较便捷的网页代码编辑工具。例如，Hbuilder、sSublime、VS Code、Dreamweaver等。其中前面列举的3种软件，更偏向于Web开发，而Dreamweaver工具则依靠其可视化的网页制作模式，极大地降低了网站建设的难度，使得不同技术水平的设计师，都能搭建出美观的页面。本节将简单介绍Dreamweaver工具的使用，并利用该工具创建本书第一个网页。
三、新课讲解
知识点1- Dreamweaver操作界面
教师展示PPT，讲解Dreamweaver操作界面。
（1） 菜单栏
l 文件（F）菜单
l 编辑（E）菜单
l 查看（V）菜单
l 插入（I）菜单
l 修改（M）菜单
l 格式（O）菜单
l 命令（C）菜单
l 站点（S）菜单
l 窗口（W）菜单
l 帮助（H）菜单
（2） 插入栏
（3） 文档工具栏
l “显示代码视图”
l “显示代码和设计视图”
l “显示设计视图”
l “在浏览器中预览/调试”
l “刷新”
（4） 文档编辑界面
（5） 属性面板
知识点2-Dreamweaver初始化设置
教师展示PPT，讲解Dreamweaver初始化设置。
（1） 设置工作区布局
（2） 添加必备面板
（3） 设置新建文档
（4） 设置代码提示
（5） 浏览器设置
知识点3-创建第一个网页
教师展示PPT，讲解创建第一个网页。
（1） 编写HTML代码
（2） 编写CSS代码
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
教学后记
《网页设计与制作（HTML+CSS）（第2版）》
教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
202 年 月
课题名称
第2章 HTML入门
计划课时
6课时
教学引入
HTML作为一门标签语言，主要用来描述网页中的文字和图像等元素。使用HTML标签描述网页中的内容是每一个网页制作人员的入门要求。然而什么是HTML标签？又该如何使用HTML标签描述网页中的文字和图像呢？本章将对HTML的入门知识进行详细讲解。
教学目标
l 使学生掌握HTML文档基本格式，能够书写符合格式规范的HTML结构代码。
l 使学生掌握文本控制标签的用法，能够合理地使用文本控制标签定义网页元素。
l 使学生掌握图像标签，学会运用图像标签制作图文混排页面。
教学重点
l 标签的属性
l 标题标签
l 段落标签
l 文本样式标签
l 文本格式化标签
l 图像标签<img />
l 绝对路径和相对路径
l 【阶段案例】制作图文混排页面
教学难点
l 绝对路径和相对路径
教学方式
课堂教学以PPT讲授为主，并结合多媒体进行教学
教
学
过
程
第一课时
（HTML文档格式、标签分类、标签的属性、标签关系、头部结构标签）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
在Dreamweaver中，能够选择文档视图方式的菜单是（ ）。
A、插入（I） B、查看（V）
C、站点（S） D、文件（F）
答案：A
说明：“查看（V）”菜单：用于选择文档的视图方式。例如，设计视图、代码视图等。此外“查看（V）”菜单还可以用于显示或隐藏不同类型的页面元素和工具。
二、通过直接导入的方式导入新课
HTML作为一门标签语言，主要用来描述网页中的文字和图像等信息，其最新版本HTML5已经逐渐成为移动互联网的主流。但什么是HTML，又该如何使用HTML标签控制网页中的文字和图像呢？本章对HTML的基础知识进行详细讲解。
三、新课讲解
知识点1-HTML文档格式
教师展示PPT，讲解HTML文档格式。
（3） <!DOCTYPE>：<!DOCTYPE>位于文档的最前面，也被称为文档类型声明，用于向浏览器说明当前文档使用哪种HTML标准规范。
（4） <html>：<html>位于<!DOCTYPE>之后，也被称为根标签。根标签标示了HTML文档的开始和结束，其中<html>标示HTML文档的开始，</html>标示HTML文档的结束，在它们之间是网页的头部内容和主体内容
（5） <head>：<head>用于定义HTML文档的头部内容，也被称为头部标签，该标签紧跟在<html>之后。头部标签主要用来容纳其他位于文档头部的标签，用来描述文档的标题、作者，以及该文档与其他文档的关系。
（6） <body>：<body>用于定义HTML文档所要显示的内容，也被称为主体标签。在网页中，所有文本、图像、音频和视频等内容代码都必须放在<body>内，才能最终呈现给用户。
知识点2-标签分类
教师展示PPT，讲解标签分类。
（8） 双标签
l 双标签的概念：双标签也被称为“体标签”，是指由开始和结束两个标签符号组成的标签。
l 双标签的基本语法格式：
<标签名>内容</标签名>
（9） 单标签
l 单标签的概念：单标签也被称为“空标签”，是指用一个标签符号即可完整的描述某个功能的标签。
l 单标签的基本语法格式：
<标签名 />
知识点3-标签的属性
教师展示PPT，讲解标签的属性。
<标签名 属性1="属性值1" 属性2="属性值2" …>内容</标签名>
知识点4-标签关系
教师展示PPT，讲解标签关系。
（3） 嵌套关系
嵌套关系也称为包含关系，可以简单理解为一个双标签里面有包含了其他的标签。
（4） 并列关系
并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。
知识点5-头部结构标签
教师展示PPT，讲解头部结构标签。
（3） <title>标签
l <title>标签的概念：用于设置HTML页面的标题，也就是给网页取一个名。
l <title>标签的示例代码：
<title>轻松学习HTML5</title>
（4） <meta />标签
l <meta name="名称" content="值"/>
l <meta http-equiv="名称" content="值" />
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第二课时
（标题标签、段落标签、水平线标签、换行标签、文本样式标签、文本格式化标签、特殊字符）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
下列选项中，属于双标签的有（ ）。
A、<html> B、<body>
C、< hr /> D、<meta />
答案：AB
说明：无。
二、通过直接导入的方式导入新课
在一个网页中文字往往占有较大的篇幅，为了让文字能够在网页中排版整齐、结构清晰，HTML提供了一系列的文本控制标签。例如，标题标签<h1>~<h6>、段落标签<p>、字体标签<font>等，本节将对这些HTML文本控制标签进行详细介绍。
三、新课讲解
知识点1-标题标签
教师展示PPT，讲解标题标签。
（4） 标题标签的概念：HTML提供了6个等级的标题，即h1、h2、h3、h4、h5和h6，从h1到h6重要性递减。
（5） 标题标签的基本语法格式：
<hn align="对齐方式">标题文本</hn>
（6） align属性的取值：
l left：设置标题文字左对齐（默认值）。
l center：设置标题文字居中对齐。
l right：设置标题文字右对齐。
知识点2-段落标签
教师展示PPT，讲解段落标签。
（1） 段落标签的概念：在网页中使用<p>标签来定义段落。默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
（2） 段落标签的基本语法格式：
<p align="对齐方式">段落文本</p>
知识点3-水平线标签
教师展示PPT，讲解水平线标签。
（1） 水平线标签的概念：在网页中，水平线可以将段落与段落之间隔开，使得文档层次分明。水平线可以通过<hr />标签来定义。
（2） 水平线标签的基本语法格式：
<hr 属性="属性值" />
（3） 水平线标签的常用属性：
l align：设置水平线的对齐方式。
l siza：设置水平线的粗细。
l color：设置水平线的颜色。
l width：设置水平线的宽度。
知识点4-换行标签
教师展示PPT，讲解换行标签。
使用换行标签<br />对文本内容强制换行显示。
知识点5-文本样式标签
教师展示PPT，讲解文本样式标签。
（1） 文本样式标签的概念：文本样式标签<font >，用来控制网页中文本的字体、字号和颜色。
（2） 文本样式标签的基本语法格式：
<font 属性="属性值">文本内容</font>
（3） <font>标签常用的属性：
l face：设置文字的字体，例如微软雅黑、黑体、宋体等。
l size：设置文字的大小，可以取1到7之间的整数值。
l color：设置文字的颜色。
知识点6-文本格式化标签
教师展示PPT，讲解文本格式化标签。
（1） 文本格式化标签的概念：在网页制作中，文本格式化标签可以使文字以特殊的方式突出显示，例如网页中常见的粗体、斜体或下画线效果。
（2） 常用的文本格式化标签：
l <b>和<strong>：文字以粗体方式显示（HTML推荐使用strong）。
l <i>和<em>：文字以斜体方式显示（HTML推荐使用em）。
l <s>和<del>：文字以加删除线方式显示（HTML推荐使用del）。
l <u>和<ins>：文字以加下画线方式显示（HTML不赞成使用u）。
知识点7-特殊字符
教师展示PPT，讲解特殊字符。
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第三课时
（常用图像格式、图像标签<img />、绝对路径和相对路径）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
下列选项中，能够设置文字大小的属性是（）
A、face B、size
C、color D、width
答案：B
说明：无
二、通过直接导入的方式导入新课
浏览网页时我们常常会被网页中的图像所吸引，巧妙的在网页中使用图像可以让网页更为丰富多彩。本节将通过对常用图像格式、图像标签、相对路径和绝对路径几个知识点，详细讲解HTML中图像的应用。
三、新课讲解
知识点1- 常用图像格式
教师展示PPT，讲解常用图像格式。
（6） GIF格式
（7） PNG格式
（8） JPEG格式
知识点2-图像标签<img />
教师展示PPT，讲解图像标签<img />
（1） 图像标签<img />基本语法格式：
<img src="图像URL" />
（2） <img />标签的其他属性
l 图像的替换文本属性alt
l 图像的宽度、高度属性width、height
l 图像的边框属性border
l 图像的边距属性vspace和hspace
l 图像的对齐属性align
知识点3-绝对路径和相对路径
教师展示PPT，讲解绝对路径和相对路径。
（3） 绝对路径
绝对路径的概念：绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径，例如“D:\案例源码\chapter02\images\banner1.jpg”就是一个盘符中的绝对路径。
（4） 相对路径
l 相对路径的概念：相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。
l 相对路径的设置.
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第四课时
（【阶段案例】制作图文混排页面）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
相对路径是网页上的文档在盘符中的真正路径（）
A、对 B、错
答案：B
说明：相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。
二、通过直接导入的方式导入新课
本章前几个小节重点讲解了什么是HTML、HTML文本控制标签以及HTML图像标签。为了使初学者能够更好地认识HTML，本小节将通过案例的形式分步骤实现网页中常见的图文混排效果。
三、新课讲解
案例实现1- 分析效果图
教师展示PPT，分析效果图。
案例实现2-制作页面结构
教师编写代码，制作页面结构。
案例实现3-控制图像
教师编写代码，控制图像。
案例实现4-控制文本
教师编写代码，控制文本。
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 复习本节课的内容。
第五、六课时（上机练习）
上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。
上机一：（考查知识点为HTML标签）
形式：单独完成
题目：
制作电影宣传效果。
要求如下：
1. 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的上半部分。
2. 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的下半部分。
3. 分别给两部分文本和图像添加样式。
4. 在firefox浏览器中预览。
上机二：（考查知识点为文本格式化标签）
形式：单独完成
题目：
城东早春。
要求如下：
1. 在Dreamweaver默认文档中写好6个段落。
2. 在每个段落中分别使用不同的文本格式化标签：
（1） 第一个段落即题目设置为粗体；
（2） 第二个段落即作者设置为斜体；
（3） 第四个段落添加下划线效果；
（4） 第六个段落添加删除线效果。
3. 其他段落使用普通的文本格式输出。
教学后记
《网页设计与制作（HTML+CSS）（第2版）》
教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
202 年 月
课题名称
第3章 CSS入门
计划课时
8课时
教学引入
随着网页制作技术的不断发展，单调的HTML属性样式已经无法满足网页设计的需求。网页设计人员需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS的出现在不改变原有HTML结构的情况下，增加了丰富的网页样式效果，极大地满足了开发者的需求。本章将详细讲解CSS入门的知识。
教学目标
l 使学生掌握CSS选择器的用法，能够运用CSS基础选择器和复合选择器定义标签样式。
l 使学生熟悉CSS文本样式属性的类型，能够运用相应的属性定义文本样式。
l 使学生掌握CSS优先级权重的规律，能够区分CSS选择器权重的大小。
l 使学生了解CSS层叠性和继承性，能够运用CSS层叠性和继承性优化代码结构。
教学重点
l CSS样式引入
l 标签选择器
l 类选择器
l id选择器
l 标签指定式选择器
l 后代选择器
l 并集选择器
l 【阶段案例】制作新闻页面
教学难点
l CSS层叠性和继承性
l CSS优先级
教学方式
课堂教学以PPT讲授为主，并结合多媒体进行教学
教
学
过
程
第一、二课时
（CSS样式规则、CSS样式引入、标签选择器、类选择器、id选择器、通配符选择器）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
若想让图像和文字之间有一定距离的排列效果，就需要使用水平边距属性（ ）。
答案：hspace
说明：无
二、通过直接导入的方式导入新课
在使用CSS之前，我们首先要掌握CSS的基础知识，为熟练使用CSS夯实基础。在学习CSS的过程中，CSS样式规则、CSS样式引入、CSS基础选择器是CSS最核心的内容，本节将详细讲解这些核心基础内容。
三、新课讲解
知识点1-CSS样式规则
教师展示PPT，讲解CSS样式规则。
（10） CSS的基本样式规则：
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ······}
（11） 书写CSS样式代码结构的特点：
l CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。
l 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。
l 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号（一般使用双引号）。
l 在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释。
l 在CSS代码中空格是不被解析的，中括号以及分号前后的空格可有可无。
知识点2-CSS样式引入
教师展示PPT，讲解CSS样式引入。
（4） 行内式
行内式的基本语法格式：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>
（5） 内嵌式
内嵌式的基本语法格式：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
（6） 外链式
l 外链式的基本语法格式：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
l <link />标签属性：href、type、rel
（7） 导入式
导入式的基本语法格式：
<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";
/* 在此还可以存放其他CSS样式*/
</style>
知识点3-标签选择器
教师展示PPT，讲解标签选择器。
标签选择器的基本语法格式：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
知识点4-类选择器
教师展示PPT，讲解类选择器。
l 类选择器的基本语法格式：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
l 类选择器的注意事项：第一个字符不能使用数字，并且严格区分大小写。
知识点5-id选择器
教师展示PPT，讲解id选择器。
l id选择器的基本语法格式：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
l id选择器的注意事项：同一个id也可以应用于多个标签，浏览器并不报错，但是这种做法是不被允许的。
知识点6-通配符选择器
教师展示PPT，讲解通配符选择器。
通配符选择器的基本语法格式：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第三课时
（CSS字体样式属性、CSS文本外观属性）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
下列选项中，属于CSS基础选择器的是（ ）。
A、标签选择器 B、类选择器
C、id选择器 D、通配符选择器
答案：ABCD
说明：无。
二、通过直接导入的方式导入新课
学习HTML时，我们可以使用文本样式标签和属性控制文本内容的显示样式，但是这种方式繁琐且不利于代码的维护。为此，CSS提供了文本样式属性。使用CSS文本样式属性可以轻松方便的控制内容的显示样式。CSS文本样式属性包括CSS字体样式属性和CSS文本外观属性，本节将对这两种属性做详细讲解。
三、新课讲解
知识点1-CSS字体样式属性
教师展示PPT，讲解CSS字体样式属性。
（1） font-size:字号
l 作用：用于设置字号。
l 常用的属性值单位em、px、%
（2） font-family:字体
l 作用：用于设置字体。
l 使用font-family设置字体时的注意事项。
（3） font-weight:字体粗细
l 作用：用于定义字体的粗细。
l 属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
（4） font-variant:变体
作用：用于设置英文字符的变体，用于定义小型大写字体。
可用属性值：normal、small-caps。
（5） font-style:字体风格
l 作用：用于定义字体风格。
l 可用属性值：normal、italic、oblique。
（6） font:综合设置字体样式
l 作用：用于对字体样式进行综合设置。
l 基本语法格式：
选择器{font:font-style font-variant font-weight font-size/line-height font-family;}
（7） @font-face规则
l 作用：用于定义服务器字体。
l 基本语法格式：
@font-face{
font-family:字体名称;
src:字体路径;
}
l 使用服务器字体的步骤。
l 服务器字体定义完成后的注意事项。
知识点2-CSS文本外观属性
教师展示PPT，讲解文本外观属性。
（1） color:文本颜色
l 作用：用于设置文本颜色。
l 属性取值：颜色英文单词、十六进制颜色值、RGB颜色值。
l 取值的注意事项。
（2） letter-spacing:字间距
l 作用：用于设置字间距。
l 属性取值：不同单位的数值，可以为负数，默认值为normal。
（3） word-spacing:单词间
l 作用：用于设置单词之间的间距。
l 属性取值：不同单位的数值，可以为负数，默认值为normal。
（4） line-height:行间距
l 作用：用于设置行与行之间的间距。
l 属性值单位：像素（px）、倍率（em）和百分比（%）。
（5） text-transform:文本转换
l 作用：用于设置文本大小写的转换。
l 属性取值：none、capitalize、uppercase、lowercase。
（6） text-decoration:文本装饰
l 作用：用于设置文本下画线。
l 属性取值：none、underline、overline、line-through。
（7） text-align:水平对齐方式
l 作用：用于设置文本水平对齐方式。
l 属性取值：left、right、center。
l 使用text-align属性的注意事项。
（8） text-indent:首行缩进
l 作用：用于设置段落文本首行字符缩进
l 属性取值：不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
l 使用text-indent属性的注意事项。
（9） white-space:空白符处理
l 作用：用于设置空格的处理方式。
l 属性取值：normal、pre、nowrap。
（10） text-shadow:阴影效果
l 作用：用于设置阴影效果。
l 基本语法格式：
选择器{text-shadow:h-shadow v-shadow blur color;}
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第四课时
（标签指定式选择器、后代选择器、并集选择器、CSS层叠性和继承性、CSS优先级）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
下列选项中，能够设置设置字体的属性是（）
A、font-family B、font-weight
C、font-style D、font-weight
答案：A
说明：无
二、通过直接导入的方式导入新课
我们想要使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，还需要学习CSS高级特性。CSS高级特性包括CSS复合选择器、CSS层叠性与继承性、CSS优先级，本节将对这些高级特性进行详细讲解。
三、新课讲解
知识点1- 标签指定式选择器
教师展示PPT，讲解指定式选择器。
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
知识点2-后代选择器
教师展示PPT，讲解后代选择器。
后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的“后代”。
知识点3-并集选择器
教师展示PPT，讲解并集选择器。
并集选择器的各个选择器通过逗号连接而成的，如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
知识点4-CSS层叠性和继承性
教师展示PPT，讲解CSS层叠性和继承性。
（1） 层叠性：是指多种CSS样式的叠加。
（2） 继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式。
知识点5-CSS优先级
教师展示PPT，讲解CSS优先级。
（1） CSS优先级定义：指的就是CSS样式规则的权重。
（2） 在考虑权重时，需要注意一些特殊的情况：
l 继承样式的权重为0。
l 行内样式优先。
l 权重相同时，CSS的优先级遵循就近原则。
l CSS定义“!important”命令，会被赋予最大的优先级。
四、归纳总结
Ø 教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
Ø 学生交流，针对自己遇到的难点向老师提问，老师进行解答。
五、布置作业
Ø 教师通过高校教辅平台（）发放测试题以巩固本节课的学习内容。
Ø 预习下节课的内容。
第五、六课时
（【阶段案例】—制作新闻页面）
一、复习巩固
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
请简述什么是CSS的继承性，并举例说明。
答案：继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。例如，定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面其他的标签都嵌套在<body>标签中，是<body>标签的子标签。这些子标签继承了父标签<
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
