《网页设计与制作（活页式）》 教案 项目3 CSS样式.docx

《网页设计与制作》

教学设计

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

授课年级：20年级

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

教师姓名：老师

20年月日

课题名称

项目三CSS样式

计划课时

课时

内容分析

设计出美观、大方、简洁和高访问量的网站仅通过HTML5实现是非常困难的，HTML5仅定义了网页结构，对于文本样式没有过多涉及。这就需要一种能有效控制网页布局、字体、颜色、背景和其他图文效果的技术。采用CSS技术制作网页，能对网页的页面布局、字体、颜色、背景等实现精准的控制。本项目将通过实例介绍使用CSS样式美化网页的方法。

教学目标

掌握CSS样式的使用方法。

掌握CSS语法。

掌握CSS选择器的使用。

重点及措施

教学重点：使用CSS美化文本；使用CSS美化页面

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

难点及措施

教学难点：CSS样式的优点，CSS常用选择器

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

教学方式

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

教

学

过

程

任务3.1CSS基础知识

3.1.1初识CSS样式

内容学习

分组讨论

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

为什么要用CSS样式修饰网页？

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

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

答案：

CSS的语法简单，编写较容易。应用CSS技术，可以减少程序代码数量、提高网页加载速度。熟练掌握CSS技术，可统一网站风格，让网页更容易维护。

CSS文件是文本文件，它包含了一些CSS标签，CSS文件必须使用CSS为文件名后缀。通过简单地更改CSS文件，可以改变网页的整体表现形式，降低网页设计的难度。

知识点讲解

讲解使用CSS修饰段落

（1）教师展示PPT，对使用CSS修饰段落进行具体讲解。

CSS可以给网页文字设置不同的字体样式，即建立一个CSS规则。如果想改变整个网页上所有出现的颜色、尺寸、字体，只需要修改一些CSS规则即可。CSS文件是纯文本格式文件。

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

3.1.2HTML和CSS的对比

内容学习

分组讨论

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

同样是排版网页，对比HTML和CSS有何不同？

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

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

答案：

CSS样式具有很多优点，如可以大大缩减页面代码，提高页面浏览速度。CSS结构清晰，容易被搜索引擎抓取到内容。

知识点讲解

讲解动态网页

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

1.HTML的缺点

在网页设计与制作中，只依赖HTML标签样式已经不能满足网页设计者的需求，HTML的缺点表现在以下4个方面。

（1）维护困难：修改某个特殊标签格式耗时较长，尤其对整个网站而言，后期修改和维护成本较高。

（2）标签不足：HTML本身标签非常少，很多标签都是为网页内容服务的，而关于内容样式标签，如文字间距、段落缩进，很难在HTML中找到。

（3）网页体积大：由于没有对各种风格样式进行控制，HTML页面往往体积过大，占用宽度。

（4）定位困难：在整体布局页面时，HTML对各个模块的位置调整缺乏灵活，过多的table标签将会导致页面的复杂和后期维护的困难。

2.CSS样式的优点

CSS样式具有很多优点，如可以大大缩减页面代码，提高页面浏览速度。CSS结构清晰，容易被搜索引擎抓取到内容。其优点表现在以下5个方面。

（1）丰富的样式定义：CSS提供了丰富的文档样式外观，可以设置文本和背景属性；允许为任何元素创建边框，设置元素边框与其他元素间的距离；允许随意改变文本的大写和小写方式、修饰方式等效果。

（2）易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以定义在header部分，还可以写在一个专门的CSS文件中(即CSS样式表)，将所有的样式声明统一存放，进行统一管理。如果要修改样式，只需在样式列表中修改。

（3）多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样可以在多个页面中使用同一个CSS样式表。CSS样式表不属于任何页面文件，在任何页面文件中都可以引用，这样可以实现多个页面风格的统一。

（4）层叠：对一个元素多次设置同一个样式，最后一次设置的属性值有效。在浏览器中看到的将是最后一次设置的样式效果。

（5）页面压缩：在使用HTML定义页面时需要大量或重复的表格和各种规格的文字样式，这样会产生大量的HTML标签，从而使页面文件的大小增加，而使用CSS可以减少页面文件体积，加载页面时可提升速度。

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

3.1.4CSS语