《网页格式刷》
——CSS样式表教学案例
【教材分析】
“CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。本节内容的重点应该是“运用CSS进行样式设置的方法和格式”及“在HTML中加入CSS的三种方法”。因此我认为将“CSS实现”与“在HTML中加入CSS”两部分结合在一起讲比较好。此外，我认为“体会CSS样式表的优点”也应该是一个教学重点。学生以往用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会CSS样式表的优点让学生明白为何我们要学习这部分内容。
【教学目标分析】
1、知识与技能
(1)什么是CSS样式表。
(2)CSS样式表的优点。
(3)嵌入式、内联式、外联式三种样式表的使用方法。
(4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
2、过程与方法
(1)通过WORD排版中的“格式刷”引入网页中的“CSS样式表”，通过类比，使学生初步了解CSS样式表的作用，激发学习兴趣。
(2)对于CSS样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。
(3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。
(4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。
3、情感态度与价值观
(1)通过CSS样式表的学习，提高学生美化网页的技能。
(2)培养学生的探索、实践能力。
(3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。
【学情分析】
通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性也有了了解。考虑到我所在学校的学生学习能力、领悟能力比较强。因此虽然CSS样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。
【教学重点、难点分析】
1、教学重点
(1)CSS样式表的概念。
(2)体会CSS样式表的优点。
(3)嵌入式、内联式、外联式三种样式表的使用方法。
(4)CSS代码的书写格式，输入的准确性。
2、教学难点
(1)三种样式表在使用上区别。
(2)CSS代码的书写格式。
【教学过程】
[新课导入：]
教师活动：教师展示两篇WORD文档A和文档B，文档A已经进行了文字字号、字体、颜色、行
距、首行缩进等排版，文档B未进行任何排版。
教师提问：同学们，在WORD编辑中，有什么方法能让文档B以最快捷的速度排版成文档A的字
号、字体、颜色、行距呢？
学生活动：部分学生思考后回答“格式刷”。
教师活动：教师迅速的利用格式刷将文档B设置成文档A的排版外观。
教师活动：教师展示两张网页，网页A已经进行了文字字号、字体、颜色、文字链接动态效果、彩
色滚动条等外观设置，网页B未进行任何设置。
教师提问：现在老师想把网页B也设置成网页A的外观，有什么方法能够快捷而方便地帮我们做到
呢？
学生活动：部分学生回答说“格式刷”。
教师提问：如果我们在做网页的过程中，也有一把“格式刷”，是不是就能很方便的将网页B设置成
网页A的外观呢？网页制作中，到底有没有这样的“格式刷”呢？
教师操作：打开网页A的源代码，将CSS样式代码复制到网页B，立刻使网页B具有了与网页A
相同的外观。
教师提问：老师刚才复制粘贴的那段代码是不是具有与“格式刷”相同的作用？今天我们就来学习
“网页中的格式刷”——CSS样式表。
[新课讲授：]
一：什么是CSS样式表？
教师活动：讲授CSS样式表的概念。
用一个指定的名字来标识和保存的一组相关字符和段落格式的选项集合。
让学生了解CSS样式表的优点。(结合实例)
1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。
2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效
率。
3、可以“随心所欲”地控制页面布局和外观。
4、在所有浏览器和平台之间具有较好的兼容性。
二：如何在HTML中加入样式？
1、嵌入式样式表
教师活动：教师讲授嵌入式样式表的使用方法。
方法：只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。
CSS属性书写格式：style=“color:red;font-family:黑体;font-size:24pt” 注意：color的属性值还可以用颜色代码，如：#ff0000。
教师活动：布置课堂练习题1。
打开example1文件夹下的qzwx.htm，将网页中文章标题文字“秋天的童话·如梦”用嵌
入式样式表设置成：#ff9900，30pt，黑体。（效果如下图）
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生输入字母、标点一定要准确。
教师提问：如果用嵌入式样式表来为网页中的文字设置外观，方不方便？
学生回答：不方便。
教师活动：总结嵌入式样式表的不足。
嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。这种
样式表并不能充分体现出CSS样式表的优越性。
引入内联式样式表。
2、内联式样式表
（1）作用于网页中的部分文字
教师活动：教师讲授第一种内联式样式表的使用方法。
方法：(1)在网页的 定义样式，如：
(2)在要设置此样式的文字头插入,文字尾插入,如：
1、提示一些不相干的话。
注意：a1为定义的样式名，不同的网页，样式名可以不同。
教师活动：布置课堂练习题2。
打开example2文件夹下的bingdu.htm，用内联式样式将网页中的9个小标题字体设置
为：绿色、14pt、黑体。（效果如下图）
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，样式名前的点不能丢，输入字母、标点也一定
要准确。
教师活动：发现很多学生的错误都来自输入错误，自己检查半天也查不出来，于是提议让同桌同学
帮忙找错。
学生活动：学生很认真的帮同学找错。
教师提问：如果要把“bingdu.htm”网页中的小标题的颜色由绿色改为蓝色，想一想该如何做？ 学生回答：只要在定义样式的代码中将“green”改为“blue”就行了。
教师提问：但是如果我们没有用内联式样式表，那又该如何做？
学生回答：那就得九个标题一个一个改颜色，改九次。
教师活动：引导学生体会样式表的使用提高了我们修改网页的效率！
（2）作用于整个网页
教师活动：教师讲授第一种内联式样式表的使用方法。
方法：在网页的 插入代码：
教师活动：布置课堂练习题3。
打开example3文件夹下的teacher.htm，用内联式样式表制作超链接文字的动态效果：当
鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。（效果如下图）
此题代码由教师提供代码图片，学生自己输入。
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。提示学生利用
复制粘贴相同代码后修改，提高自己的输入速度。继续鼓励同学互相帮忙找错误。
教师提问：如果网站内有几十网页都要用到此浮动链接效果，该如何做呢？
学生回答：每张网页都插入同样的CSS代码。
教师提问：有没有什么方法可以简化这项操作呢？既然几十张网页都要用同样的代码，能不能把这段代码制作成一个独立的文件，然后由每张网页调用呢？
3、外联式样式表
教师活动：教师讲授外联式样式表的使用方法。
方法：(1)将样式定义成一个“.css”的文件：
可在记事本中输入样式代码，然后保存为扩展名为“.css”的文件。
(2)在网页的head区插入引用代码：
注意：标签中的属性没有前后次序要求。
教师活动：布置课堂练习题4。
打开example4文件夹下的teacher.htm，用外联式样式表制作超链接文字的动态效果：
当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。样式文件和网
页文件要保存于同一个文件夹内。
[课堂小结：]
教师活动：通过两节课的学习，同学们知道了什么是CSS样式表，掌握了三种CSS样式表的使用。
同学们通过实践操作，也体会到了使用CSS样式表可以避免很多重复操作，从而提高网
页编辑和修改的效率。希望同学们以后在自己制作网站时，能灵活运用CSS样式表来美
化自己的网页。
【自我评析】
本节内容如果但看教学内容，感觉1课时就可以完成，但是考虑到高二会考对CSS代码的输入有一定的要求，所以我决定所有练习题的代码都由学生自己输入，由于学生的输入速度及准确性问题，比预计多用了一课时。虽然多用了一课时，但是由于知识点讲得比较清晰，给学生练习的时间比较充裕，自我感觉学生的学习效果比较好。
虽然课题引入用去的时间比较多，但是通过WORD文档中的“格式刷”类比引入，给了学生很直观的感受，很好的激发了学生们的学习兴趣。在讲授三种CSS样式表的使用方法时，采用通过实践前一种，感受总结不足，引出第二种，使学生对于三种使用方法的区别有了比较深刻的认识。
在学生实践过程中，虽然教师已经一再提醒代码中的字母、冒号、分号、引号不能输错，但学生还是会出现输入错误，而且自我检查不容易找到错误。于是我就让同桌同学互相帮忙找错，既让学生感受了同学互助，又收到了很好的学习效果。
《网页格式刷》
——CSS样式表教学案例
【教材分析】
“CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。本节内容的重点应该是“运用CSS进行样式设置的方法和格式”及“在HTML中加入CSS的三种方法”。因此我认为将“CSS实现”与“在HTML中加入CSS”两部分结合在一起讲比较好。此外，我认为“体会CSS样式表的优点”也应该是一个教学重点。学生以往用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会CSS样式表的优点让学生明白为何我们要学习这部分内容。
【教学目标分析】
1、知识与技能
(1)什么是CSS样式表。
(2)CSS样式表的优点。
(3)嵌入式、内联式、外联式三种样式表的使用方法。
(4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
2、过程与方法
(1)通过WORD排版中的“格式刷”引入网页中的“CSS样式表”，通过类比，使学生初步了解CSS样式表的作用，激发学习兴趣。
(2)对于CSS样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。
(3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。
(4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。
3、情感态度与价值观
(1)通过CSS样式表的学习，提高学生美化网页的技能。
(2)培养学生的探索、实践能力。
(3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。
【学情分析】
通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性也有了了解。考虑到我所在学校的学生学习能力、领悟能力比较强。因此虽然CSS样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。
【教学重点、难点分析】
1、教学重点
(1)CSS样式表的概念。
(2)体会CSS样式表的优点。
(3)嵌入式、内联式、外联式三种样式表的使用方法。
(4)CSS代码的书写格式，输入的准确性。
2、教学难点
(1)三种样式表在使用上区别。
(2)CSS代码的书写格式。
【教学过程】
[新课导入：]
教师活动：教师展示两篇WORD文档A和文档B，文档A已经进行了文字字号、字体、颜色、行
距、首行缩进等排版，文档B未进行任何排版。
教师提问：同学们，在WORD编辑中，有什么方法能让文档B以最快捷的速度排版成文档A的字
号、字体、颜色、行距呢？
学生活动：部分学生思考后回答“格式刷”。
教师活动：教师迅速的利用格式刷将文档B设置成文档A的排版外观。
教师活动：教师展示两张网页，网页A已经进行了文字字号、字体、颜色、文字链接动态效果、彩
色滚动条等外观设置，网页B未进行任何设置。
教师提问：现在老师想把网页B也设置成网页A的外观，有什么方法能够快捷而方便地帮我们做到
呢？
学生活动：部分学生回答说“格式刷”。
教师提问：如果我们在做网页的过程中，也有一把“格式刷”，是不是就能很方便的将网页B设置成
网页A的外观呢？网页制作中，到底有没有这样的“格式刷”呢？
教师操作：打开网页A的源代码，将CSS样式代码复制到网页B，立刻使网页B具有了与网页A
相同的外观。
教师提问：老师刚才复制粘贴的那段代码是不是具有与“格式刷”相同的作用？今天我们就来学习
“网页中的格式刷”——CSS样式表。
[新课讲授：]
一：什么是CSS样式表？
教师活动：讲授CSS样式表的概念。
用一个指定的名字来标识和保存的一组相关字符和段落格式的选项集合。
让学生了解CSS样式表的优点。(结合实例)
1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。
2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效
率。
3、可以“随心所欲”地控制页面布局和外观。
4、在所有浏览器和平台之间具有较好的兼容性。
二：如何在HTML中加入样式？
1、嵌入式样式表
教师活动：教师讲授嵌入式样式表的使用方法。
方法：只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。
CSS属性书写格式：style=“color:red;font-family:黑体;font-size:24pt” 注意：color的属性值还可以用颜色代码，如：#ff0000。
教师活动：布置课堂练习题1。
打开example1文件夹下的qzwx.htm，将网页中文章标题文字“秋天的童话·如梦”用嵌
入式样式表设置成：#ff9900，30pt，黑体。（效果如下图）
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生输入字母、标点一定要准确。
教师提问：如果用嵌入式样式表来为网页中的文字设置外观，方不方便？
学生回答：不方便。
教师活动：总结嵌入式样式表的不足。
嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。这种
样式表并不能充分体现出CSS样式表的优越性。
引入内联式样式表。
2、内联式样式表
（1）作用于网页中的部分文字
教师活动：教师讲授第一种内联式样式表的使用方法。
方法：(1)在网页的 定义样式，如：
(2)在要设置此样式的文字头插入,文字尾插入,如：
1、提示一些不相干的话。
注意：a1为定义的样式名，不同的网页，样式名可以不同。
教师活动：布置课堂练习题2。
打开example2文件夹下的bingdu.htm，用内联式样式将网页中的9个小标题字体设置
为：绿色、14pt、黑体。（效果如下图）
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，样式名前的点不能丢，输入字母、标点也一定
要准确。
教师活动：发现很多学生的错误都来自输入错误，自己检查半天也查不出来，于是提议让同桌同学
帮忙找错。
学生活动：学生很认真的帮同学找错。
教师提问：如果要把“bingdu.htm”网页中的小标题的颜色由绿色改为蓝色，想一想该如何做？ 学生回答：只要在定义样式的代码中将“green”改为“blue”就行了。
教师提问：但是如果我们没有用内联式样式表，那又该如何做？
学生回答：那就得九个标题一个一个改颜色，改九次。
教师活动：引导学生体会样式表的使用提高了我们修改网页的效率！
（2）作用于整个网页
教师活动：教师讲授第一种内联式样式表的使用方法。
方法：在网页的 插入代码：
教师活动：布置课堂练习题3。
打开example3文件夹下的teacher.htm，用内联式样式表制作超链接文字的动态效果：当
鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。（效果如下图）
此题代码由教师提供代码图片，学生自己输入。
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。提示学生利用
复制粘贴相同代码后修改，提高自己的输入速度。继续鼓励同学互相帮忙找错误。
教师提问：如果网站内有几十网页都要用到此浮动链接效果，该如何做呢？
学生回答：每张网页都插入同样的CSS代码。
教师提问：有没有什么方法可以简化这项操作呢？既然几十张网页都要用同样的代码，能不能把这段代码制作成一个独立的文件，然后由每张网页调用呢？
3、外联式样式表
教师活动：教师讲授外联式样式表的使用方法。
方法：(1)将样式定义成一个“.css”的文件：
可在记事本中输入样式代码，然后保存为扩展名为“.css”的文件。
(2)在网页的head区插入引用代码：
注意：标签中的属性没有前后次序要求。
教师活动：布置课堂练习题4。
打开example4文件夹下的teacher.htm，用外联式样式表制作超链接文字的动态效果：
当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。
学生活动：依据教师讲的方法，进行练习。
教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。样式文件和网
页文件要保存于同一个文件夹内。
[课堂小结：]
教师活动：通过两节课的学习，同学们知道了什么是CSS样式表，掌握了三种CSS样式表的使用。
同学们通过实践操作，也体会到了使用CSS样式表可以避免很多重复操作，从而提高网
页编辑和修改的效率。希望同学们以后在自己制作网站时，能灵活运用CSS样式表来美
化自己的网页。
【自我评析】
本节内容如果但看教学内容，感觉1课时就可以完成，但是考虑到高二会考对CSS代码的输入有一定的要求，所以我决定所有练习题的代码都由学生自己输入，由于学生的输入速度及准确性问题，比预计多用了一课时。虽然多用了一课时，但是由于知识点讲得比较清晰，给学生练习的时间比较充裕，自我感觉学生的学习效果比较好。
虽然课题引入用去的时间比较多，但是通过WORD文档中的“格式刷”类比引入，给了学生很直观的感受，很好的激发了学生们的学习兴趣。在讲授三种CSS样式表的使用方法时，采用通过实践前一种，感受总结不足，引出第二种，使学生对于三种使用方法的区别有了比较深刻的认识。
在学生实践过程中，虽然教师已经一再提醒代码中的字母、冒号、分号、引号不能输错，但学生还是会出现输入错误，而且自我检查不容易找到错误。于是我就让同桌同学互相帮忙找错，既让学生感受了同学互助，又收到了很好的学习效果。