《让网页锦上添花》

CSS样式表是高中信息技术选修《网络技术应用》第五章中的内容，学生在学该内容之前已经学完Frontpage网页制作以及HTML代码的简单应用，而且制作出了一个完整的主题网站。

教学目标：（1）知识与技能：CSS样式表的概念及使用方法。（2）过程与方法：①通过浏览学生之前做的网页，评价网页中的优缺点，引入CSS样式表。②样式表概念由教师讲解；使用方法由学生先对照学案自主学习，然后教师讲解并指导学生实践操作。（3）情感态度与价值观：①通过CSS样式表美化网页。提高学生发现问题、解决问题的能力。②培养学生的审美意识及互助协作能力。

教学重点、难点：CSS样式表的三种用法：嵌入式、内联式、外联式。

一、情境引入

教师讲解：同学们，通过前面几节课的学习，我们已经学会了如何利用Frontpage来建立主题网站，并且建立了完整的个人站点。（同时展示几个同学的作品），请问，这些网页里面的超链接文字都有什么特点？学生回答：超链接文字有下划线。超链接文字是蓝色的……教师讲解：网页中的文字只要做了超链接后，都变成了同样的效果，如何让我们的网页效果更加的美观、富有个性呢？——引入CSS样式表。

二、讲授新课

1 CSS样式表概念。教师活动：（1）讲解CSS样式表概念及优点。（2）讲解CSS样式表基本语法。样式表名{标志属性：属性值；标志属性：属性值；……}。

2 CSS样式表的分类。

（1）嵌入式样式表：教师活动：讲解用法：在HTML标签（如r，p等）后写上CSS属性即可。如：。教师活动：布置作业1，用嵌入式样式表将文字“版权所有”设置成：#00bb00，15pt。师生活动：学生进行练习，老师巡回辅导并提醒学生代码输入的准确性。教师活动：嵌入式样式表效果只适用于当前标签。没有体现出CSS样式表的优越性。——引入内联式样式表。

（2）内联式样式表。教师活动：讲解用法：在和标记中写入样式表内容，然后把该组标记及其内容放到和之间，分两种情况：①如果样式表名为HTML保留关键字，在和var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =578; UrchinTrack();中就不需要调用；②若是自己定义的样式表名，则定义时样式表名前要加点号，如“.x2”，这时需要在和var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =578; UrchinTrack();中的相应位置调用，调用格式为：要修饰的对象。教师活动：布置作业2，用内联式样式表给文字“点击进入”添加动态效果。

师生活动：学生练习：老师巡回辅导并提醒学生代码输入的正确性，发现有学生代码输入错误，提醒相邻同学帮忙找错。

教师活动：希置作业3，将学案3中的代码加入到zgjs.htm网页中，并查看网页效果。

学生活动：依据老师提示进行练习。

教师活动：请大家仔细观察CSS代码，是否有一个特殊的样式表名？

学生活动：学生稍作思考后回答：a1前有“.”。a1是自定义样式表名。

教师提问：如果要把小标题“2010上海世博会”文字效果设置为a1的格式，该如何做呢？

学生回答：用span语句调用。

教师活动：很好，请同学们尝试做一下。看看网页又有何变化？

学生活动：按照老师提示进行操作。

教师提问：如果多个网页要用同样的文字效果。该如何做呢？

学生活动：每张网页都加入同样的CSS代码。

教师活动：嗯，这也是一种方法，不过操作起来辛苦了点。有没有方法简化这项操作呢？——引入CSS外联式样式表。

（3）外联式样式表。教师活动：将样式表内容输入记事本中，以“.css”格式保存文件。调用时在网页的head区插入代码：。教师活动：布置作业4，用外联式样式表美化其他网页。学生活动：依据教师讲解方法以及学案中的提示，进行练习。教师活动：巡回辅导。提醒学生CSS文件和网页文件要存放在同一文件夹中。教师提问：如果我们对网页中的某个效果不满意，需要进行修改的话，应该怎么办？学生回答：只要在CSS文件中更改就可以了。教师活动：体会外联式样式表优点：通过一个CSS文件管理网站中的多个网页。充分体现出CSS样式表的优越性。

三、知识小结

师生互动：通过两节课的学习，我们知道了CSS样式表概念及使用方法，在美化网页的同时，又提高了网页编辑的效率。

教学反思：教材中CSS样式表的内容安排不是很多，但是考虑到信息技术学业水平测试对CSS代码有一定的要求。所以我在课时安排上是2节课，整体感觉学生掌握得比较好。另外，学生代码输入容易出错，特别是一些标点符号的输入，在以后的教学中还需进一步改进。