CSS教学设计

第八课定义CSS样式
一、教学目标
1．知识和技能目标
（1）理解什么是CSS样式表；
（2）掌握运用CSS进行样式设置的方法
2．过程和方法目标
通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。

3．情感态度和价值目标
培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣。

二、教学重点
CSS样式设置的方法。

三、教学难点
运用CSS标签美化网页
四、教学内容处理思路
遵循“用任务驱动”的思路，努力将理论与实践相结合,让学生自主探究，提高学习技能的兴趣。

根据学生的实际情况，创造性、实用性和新颖性的原则安排教学实例。

七、教学过程
教学程序教师活动学生活动
引入新课认识CSS 导入：这节课我们学习课本的第八课定义CSS样式。

那么什么是CSS
呢？
CSS中文翻译成“层叠样式表”，是一种制作网页的新技术。

成为网
页设计必不可少的工具之一，在当今的网页制作中，几乎所有漂亮
的网页都用了CSS。

借助于CSS的强大功能，网页将在你丰富的想
像力下千变万化。

这节课我们就来初步领略CSS打造精彩的页面效
果。

学生激发了学习的兴趣，
产生学习的欲望
明确目标自主探索一、用CSS轻松美化文字
我们知道，在网页中字体的好看与否是直接关系到页面的整体效果，因此对文字的控制就显得很重要。

下面我们可以用CSS轻松美化文字
打开网页文件tuijian1.htm
1、教师演示操作：创建CSS 样式方法1：“文本——CSS 样式——新建”，打开“新建CSS 规则”
对话框
方法2：“窗口——CSS 样式”，打开CSS 面板，单击“全部”标
签，单击“新建CSS 规则”按钮，打开“新建CSS 规则”对话框
2、教师讲解对话框的选项含义
●
【类】是一种新的样式表示符，可以任意命名。

它是将CSS 样式应用于选定的区域，若要在整个页面的相关区域应用CSS 样式，则需选择【标签】和【高级】方式。

●【标签】是将页面源文件中的html 标记重定义。

用标签定
义的CSS 样式设置完毕后，该CSS 样式马上生效。

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

●在该对话框的下方选区里，可以选择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]来统一美化各页面的水平线呢？学生自学并操作小结小组长，评定小组成员作
业完成情况
教学反思：
CSS样式表涉及到语言代码，作为初中八年级学生来讲，HTML语言实在很难以理解，我们又没有太多的时间去学习这些语言。

很多学生在学习的过程中会产生畏难心理。

那么怎么让学生能够理解并会运用CSS标签来美化网页呢？我设计了一个任务：用CSS标签来美化标题。

通过讲解让学生理解标签h2可以代表标题。

然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。

其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用CSS 标签美化标题的过程。

通过这样的处理，将学生难以理解接受的HTML语言简化。

考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。