引入新课

认识CSS

导入：这节课我们学习CSS样式表。那么什么是CSS呢？

CSS中文翻译成“层叠样式表”，是一种制作网页的新技术。成为网页设计必不可少的工具之一，在当今的网页制作中，几乎所有漂亮的网页都用了CSS。借助于CSS的强大功能，网页将在你丰富的想像力下千变万化。这节课我们就来初步领略CSS打造精彩的页面效果。

学生激发了学习的兴趣，产生学习的欲望

明确目标

自主探索

一、            用CSS轻松美化文字

我们知道，在网页中字体的好看与否是直接关系到页面的整体效果，因此对文字的控制就显得很重要。下面我们可以用CSS轻松美化文字

打开网页文件tuijian1.htm

1、 教师演示操作：创建CSS样式

方法1：“文本——CSS样式——新建”，打开“新建CSS规则”对话框

方法2：“窗口——CSS样式”，打开CSS面板，单击“全部”标签，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框

2、教师讲解对话框的选项含义

l  【类】是一种新的样式表示符，可以任意命名。它是将CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需选择【标签】和【高级】方式。

l  【标签】是将页面源文件中的html标记重定义。用标签定义的CSS样式设置完毕后，该CSS样式马上生效。

l  【高级】一般用于超链接的美化。

l  在该对话框的下方选区里，可以选择CSS样式表的引用方式。那么这两个选项有什么区别呢？选择【新建样式表文件】表示对CSS样式表的引用是外部文件方式，我们选择【仅对该文档】。

在该对话框上有8种分类，其中，

【类型】分类是对文字属性的设置。

【背景】分类是对背景属性的设置。

此处，我们选择类，仅对该文档，起名为textcss

3、应用CSS

选中文本，在属性面板的样式框中选择刚定义的样式。

4、学生自学并探索CSS的规则定义

完成任务一。任务二选做

5、编辑CSS样式

方法：双击CSS面板的新建的样式textcss,打开[CSS规则定义]

6、CSS实现图文混排效果

我们之前在网页中插入图片的时候，是利用了表格来实现定位的。其实，我们完全也可以利用CSS来轻松实现图文混排效果。那么怎么实现的呢？实际上是用了[方框]属性。[浮动]右对齐；[边界-左]2字体高。这个设置的含义是：定义图片的左边距为2em，图片浮动在文字的右边。单击[应用]

7、用CSS标签美化标题

下面，我们学习用CSS标签美化标题

教师讲解：标签的含义：

Tuijian1.htm中光标定位在标题，在标签位置可以看到有一个标签（h2），选中(h2),则整个标题都选中。也就是标签h2代表了整个标题。当我们对标签h2做CSS设置的时候，标题就会应用此样式。此时，我们选择新建样式表文件，就会将此CSS保存成一个文件，以便在其它网页中应用。

二、            完善内容页面

展示要完成的任务

1、 插入一条水平线

（1）定位光标

（2）“插入——HTML——水平线”

（3）利用属性面板设置，美化水平线

2、插入文章更新的日期

（1）定位光标

（2）“插入——日期”，选中“储存时自动更新”复选框，每次保存时页面时间会自动更新

学生观察，并学习操作方法

学生学习理解各种选项的功能

学生自学并自主探究，动手操作体会并掌握操作方法，能对文本段落排版

学生尝试操作

学生尝试插入图片，并利用CSS的[方框]，实现图文混排

学生继续探究并完成标题文字的美化

学生自学并操作

实践探究

反馈巩固

提出问题：在美文推荐的文章页面中，都有一条水平线，那么我们能不能利用CSS样式的选择器类型中[标签]中的[hr]来统一美化各页面的水平线呢？

学生自学并操作

小结

小组长，评定小组成员作业完成情况