网页设计与制作项目式教程（HTML+CSS）电子教案 05.为“中国民俗”网站页面设置外观.docxVIP

网页设计与制作教案

授课教师

授课班级

授课日期

课题

为“中国民俗”网站页面设置外观

计划学时

8

教学目标

知识目标

了解CSS的概念，能说出其功能特点。

知道CSS的三种引入方式。

理解CSS多种样式的用途。

能力目标

掌握CSS的三种引入方式。

掌握CSS多种样式的使用方法。

素质目标

通过“中国民俗”网页内容的制作，增强学生的文化自信和民族认同感，加深学生对国家发展和文化进步的认识，培养学生爱国情怀。

通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。

教学重点

CSS多种样式的编码规则及设置方法

教学难点

根据实际需求，合理应用CSS不同样式效果

教学模式

及教学方法

理实一体化、线上+线下混合教学模式

项目教学法、任务驱动法、讲授法。

教学活动及主要环节

素质培养

课前导学

1.观看学习平台相关微课视频。

2.让学生搜集不同网站的图片，至少3个。

3.完成课前测试题。

课中践学

【情景导入】

通过微课视频进行情景导入，引出“中国民俗”网站添加CSS样式后的效果，让学生明确学习任务。

【项目实施】

任务2.4：为“中国民俗”网站页面设置外观

一、任务分析

小丁使用HTML制作了“中国民俗”网站页面的内容后，发现最终效果跟网站设计需求的效果不一样，老师告诉小丁，他只完成了网站页面的html内容的设置，还需要为网站页面设置CSS外观样式。

二、知识储备

根据任务分析，在之前掌握知识的基础上，完成本任务还需要学习的主要知识点有CSS基本概念、功能特点、引入方式、文本样式、字体样式、宽高样式和背景样式。

新知学习1：CSS基本概念、功能特点和引入方式

提出问题：CSS在网页中的作用？（学生分组讨论回答，然后教师进行讲解。）

1.CSS基本概念、功能特点和引入方式

（1）讲解CSS的基本概念；

（2）讲解CSS的功能特点；

（2）讲解CSS引入方式：内联样式表，内部样式表，外部样式表。

新知学习2:CSS文本样式

在css中，可以对文本的显示效果进行设置，常用设置文本样式的属性如下表所示。

属性

描述

color

定义文本颜色

text-align

定义文本的水平对齐方式

vertical-align

定义元素的垂直对齐方式

text-decoration

定义文本装饰

text-transform

定义文本转换

text-indent

定义文本缩进

letter-spacing

定义文本中字符之间的间距

line-height

定义行之间的间距

1.文本颜色

颜色属性Color用于设置文本颜色，颜色取值有以下三种方法：

（1）颜色名。如”red”(红色)、”blue”(蓝色)、”yellow”(黄色)。

（2）十六进制值。如”#FF0000”(红色)、

”#000FFF”(蓝色)、”#FFFF00”(黄色)。

（3）RGB值。如”RGB(255,0,0)”(红色)、

”RGB(0,0,255)”(蓝色)、”RGB(255,255,0)”(黄色)。

2.文本水平对齐方式

文本水平对齐text-align属性取值如下表所示。

text-align属性值

功能

left

文本左对齐

center

文本居中

right

文本右对齐

3.文本垂直对齐方式

文本垂直对齐方式vertical-align属性取值如下表所示。

vertical-align属性值

功能

top

把元素顶端与行中最高元素顶端对齐

middle

把此元素放置在父元素的中部

bottom

底端对齐

4.文本装饰

文本装饰text-decoration属性取值如下表所示。

text-decoration属性值

功能

none

用于超链接去掉下划线

overline

上划线

line-through

删除线

underline

下划线

5.文本转换

文本转换text-transform属性取值如下表所示。

text-transform属性值

功能

uppercase

将所有内容转换为大写

lowercase

将所有内容转换为小写

capitalize

将每个单词的首字母大写

6.文本缩进

text-indent属性用于指定文本第一行的缩进。

text-transform属性值

功能

uppercase

将所有内容转换为大写

lowercase

将所有内容转换为小写

capitalize

将每个单词的首字母大写

7.字符间距

letter-spacing?属性用于指定文本中字符之间的间距。

8.行高

line-height?属性用于指定行之间的间距。

新知学习3:CSS字体样式

在CSS样式中，使用font属性可以设置丰富多彩的字体样式。该属性是一个复合属性，常用于设置字体样式的属性如下表所示。

属性

描述

font-style

定义字体斜体样式

f