资源简介

为网站穿上美丽的外衣
——《5.2.2 CSS样式表》教学设计
【摘要】新课程标准下，把“提升学生的信息素养，培养信息时代的合格公民”作为信息技术课程的根本目的。教师面对日新月异的信息发展，应当全面了解教学对象，认真分析教材、研究教材，精心设计让学生和教师身心享受的一堂课。
【设计思路】
本设计遵循新课程标准的指导思想，以学生为主体、教师为主导，借助于多媒体网络教室，充分利用网络资源，关注学生的学习兴趣和经验，不是仅仅将目标锁定于CSS相关知识学习，而是通过更多、更深地体验，建立了知识与技能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识，实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件，使学生在学习理解基本的CSS技术的同时，体验CSS样式表的优势和神奇，激发学生对CSS样式表学习的兴趣，真正做到了使学生在感受信息文化的同时，提升了审美意识和体验、享受成功的乐趣，真正达到在感受中发现，在领悟中升华的美好境界。
【教材分析】
教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。
【学情分析】
学生对主题网站的设计、静态网页的制作及 JavaScript 客户脚本语言有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。
【教学策略】
课堂中贯彻实例展示、引入新课 —— 明确目标、自主探究 —— 范例展示、精讲释疑 —— 实践探究、反馈巩固 —— 交流评议、总结提高这条主线。
【教学目标】
1．知识和技能目标
（1）理解什么是CSS样式表；
（2）掌握运用CSS进行样式设置的方法和格式；
（3）掌握在 HTML 中加入CSS的三种方法。
2、过程与方法：
能够通过学习网站进行自主学习，理解在网页中加入CSS样式表
过程与方法。
（2）通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
（3）能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网
页。
3、情感态度与价值观：
（1）通过CSS样式表的学习，提高学生美化网页的技能。
（2）培养利用网络进行自主学习、实践的能力，培养学生良好的科学研
究态度。
（3）通过实践过程中的合作学习，培养学生主动思考、积极参与、团结
协作的精神。
【教学重点】
1、什么是CSS样式表。
2、嵌入式、内联式、外联式三种样式表的使用方法。
3、体会CSS样式表的优点
【教学难点】
1、三种CSS样式表的格式
2、三种CSS样式表的使用场合和特点
【教学方法】
讲授法、任务驱动法、个别指导法、赏识教育法、问题教学法、小组协作法
【教学环境】
基于网络的多媒体计算机教室、网络版教学课件
【教学过程】
教
学
程
序
教师活动
学生活动
实例展示
引入新课
在浩如烟海的网站中，那些让游览者赏心悦目、过目不忘的网站被设计者施了什么魔法呢？只要也为我们的网站穿上美丽的外衣，它们也会像被施了魔法似的更加美观、更具特色。今天我们就来穿穿看，先来看看下面的实例吧。
实例展示1：（两种输入框的比较）
提示学生认真观察代码。
观察效果及代码。
普通输入框效果图：
横线式输入框效果图：

提示：左图效果是直接在“普通”视图下插入输入框产生的，右图是在源代码中加入新的代码产生的。
实例展示2：（“百度_招聘”网页外观改进）
设计意图：让学生观察需要改变网页外观的“百度_招聘”网页的不足，如：页面排列不整齐；字体大小、颜色不统一；超链接太多、下划线太乱等等。如果逐一修改，很麻烦，激发学生思考如何才能将其迅速改观。然后演示在其源代码中插入新代码，快速实现美观、新颖的效果，使学生惊讶于变化之快，从而激发学生浓厚的学习热情。
想一想：在两个实例中加入代码后效果竟如此神奇，那么这些代码究竟是什么呢？
答案揭晓：这就是CSS样式表。
思考形成两种输入框的原因
观察网页，分析网页外观上的不足，思考如何迅速弥补。
观察变化,惊讶不已,思考其中的原理，对这些既枯燥又难度大的代码主动产生兴趣，学习热情高涨。
初识ＣＳＳ样式表，感受其在改变网页外观上的巨大作用。
明确目
标

自主探究
怎样才能为网站穿上美丽的外衣呢？在网页中加入CSS样式表是制作动态网页的另一核心技术，有了这门技术，我们就会很容易地设计出风格统一、个性独特的网站。
那么，什么是 CSS 样式表呢？使用CSS的优点有哪些？
请同学们学习教材第112 ～113页内容。
然后请同学回答
教师总结：ＣＳＳ是网页制作的一种新技术，能将网页的内容和样式分开，能用最简单的代码控制网站的整体风格，最大限度地提高网页制作效率，更加容易地维护和更新网站。
联系刚才的实例，自学“什么是CSS样式表”
回答内容（理解CSS样式表的含义和优点）
1.什么是CSS样式表？
2.使用CSS的优点是什么？
范例展示
?

精讲释疑
实践探究
?
?
?
?
?
反馈巩固
2、CSS样式表的实现
展示以下例子：
如果我们想做出上面这样一个文字样式，那么可以用如下的 HTML 样式来实现。

欢迎进入机器人做学玩网站 !

讲解CSS的实现。
分析CSS与 HTML 代码的不同。(表5-4)
讲解使用CSS的注意事项：
有的比较老的浏览器不支持样式表语法，不会将 之间的文本显示出来，若要避免这种情况的发生，就要加入 < ! - - 和 --> 代码。
观察文字样式
观察并理解HTML和CSS两种实现方法。
在教师指导下，用CSS样式表来对 HTML 文档进行编辑，
请同学上台改变样式：将字符改成如下样式：字体为“黑体”；颜色为“红色”；字号为“14pt”。
又识CSS代码，打消畏惧心理。
3.在HTML中加入CSS
1）内联式样式表
提问：上两个范例主要是使用哪种方法加入CSS样式表的呢？让学生阅读教材115页至116页的内容。
内联式样式表的格式（教师强调）
（1）标记
（2）加入位置：
（3）type 属性
(4)
动手试试
（1）基本任务：设置超链接的4种状态
（2）提高任务：设置超链接的鼠标指针
给出帮助信息，让学生自主探究
点评学生的作品，让学生介绍完成的方法，及时纠正学生的错误。
教师总结：内联式样式表直接加在网页代码内部，并有一定的格式，可以对这张网页设置效果，CSS样式表的优越性初步体现。
2）外联样式表
一个网站的网页何止只有一张，一些大型网站有几千张网页，那么如何使整个网站的效果统一呢？每张网页都贴上这段代码吗？这样好吗？
我们还有第二种方法：先把样式表写成一个独立的文件，保存扩展名为.css,然后将所有的网页和这个文件链接，这种共享链接样式表文件的方法叫“外联式”样式表，也是样式表优点的最高体现。
外联样式表格式（教师强调）

动手试一试
基本任务
提供给学生一个现成 bjcss.css文件，要求学生能控制整个网站的风格。并尝试根据个人喜好修改bjcss.css文件，使网站更具个性。
提高任务
给学生提供帮助信息，要求学生修改bjcss.css文件，实现鼠标在页面上变样的效果。
教师巡回指导，记下最先完成的组和作品有欠缺的组，并让组内推选一名同学的作品，以供演示。
演示学生作品，作出评价，突出优点，指出不足，以供参考。
阅读教材，思考问题
回答：内联式样式表
理解掌握内联式的格式要求
参考教师提供的“帮助”，自己动手或进行组内探究。
演示内联式样式表的使用方法，在同学的示范中互相学习。
由新的需要引发新的问题，主动探究有效的解决方法
理解外联样式表的含义和使用方法
通过练习掌握外联样式表的使用方法，自主探究或进行组内协作，并在提高任务中达到简单修改外部样式表文件的能力，使网站更具个性。
观看演示，并进行组内评价，学习优点，补充不足。
3）嵌入式样式表
有时我们需要对某个标签作具体的调整，效果也只限本标签，就可以直接在本标签后写上CSS属性，这种方法叫“嵌入式样式表”，使用方法比上两种简单、灵活，只是不能体现出CSS样式表的优越性，所以应用场合并不多见。
嵌入式样式表格式:
< 标签名 style=”CSS属性”>
动手试试
基本任务（设置行样式）
提供给学生有关表格标签名的信息，并将”bdzpw”文件夹中的”bdzpwnl.htm”网页中的＂中华英才网＂所在行的文字修改成华文行楷、16pt及背景色为红色的CSS样式．
巡回指导，提供帮助。
提高任务（设置单元格样式）
将“bdzpw”文件夹中的“bdzpwnl.htm”网页中的“中华英才网”所在单元格的文字修改成华文行楷、16pt及背景色为绿色的CSS样式．并思考在基本任务中对行所设定的代码样式没有效果的原因．
教师巡回指导，提供帮助。
演示学生作品并作评价
指出设定样式过程中的代码冲突问题：当样式存在冲突时，直接运用的样式会被采用；优先级别高的被采用．
理解嵌入式样式表的含义和使用场合。
掌握嵌入式样式表的格式
对照教材，自主或组内协作完成
自主或组内协作完成
观看演示，并作小组内评价
交流评议
总结提高
教师引入：本节课主要学习了三种样式表的使用方法和使用的场合，外联样式表是使用CSS样式表优越性的最高体现；要牢记在使用过程中的注意事项，克服同学们易犯的错误；希望同学们在课后继续自主探索，才能灵活使用并更好地把握CSS样式表。
请同学们完成自我评价表，看看今天这节课任务完成的如何。
学生自己谈谈学习CSS样式表的体会，并完成自我评价表。
教学反思
本节课不仅通过两种输入框样式的引入，让学生见识了横线式输入框的设计，还让学生惊叹于“百度_招聘”网页外观瞬间的改变，引起学生强烈的探究激情，这比单纯地讲原理要好很多。本节课除了对文字字体、颜色作简单设置外，还对超链接、鼠标和表格样式的设置，内容丰富，能有效地调动学生的积极性，以任务驱动，自主探究，让学生有成就感，从而更加热爱学生信息技术。
本节课所用课件内容很有吸引力，防止学生的注意力只在这些动态效果上，要把学生的注意力引向任务的探究上；样式表格式又很复杂，容易遗忘，故要提醒学生加强记忆，特别是对外联样式表的掌握与灵活使用，可以保证整个网站风格的统一，并可高效率地更新和维护网站；更要鼓励学生能举一反三，利用CSS样式表的原理做出更多的网页效果。
【参考文献】
[1]《新课程理念下的信息技术课堂教学设计》中国论文下载中心 http://www.studa.net
[2] 曹鹏CSS视频教程http://www.caopeng.org/html/css.htm
为网站穿上美丽的外衣
——《5.2.2 CSS样式表》教学设计
【摘要】新课程标准下，把“提升学生的信息素养，培养信息时代的合格公民”作为信息技术课程的根本目的。教师面对日新月异的信息发展，应当全面了解教学对象，认真分析教材、研究教材，精心设计让学生和教师身心享受的一堂课。
【设计思路】
本设计遵循新课程标准的指导思想，以学生为主体、教师为主导，借助于多媒体网络教室，充分利用网络资源，关注学生的学习兴趣和经验，不是仅仅将目标锁定于CSS相关知识学习，而是通过更多、更深地体验，建立了知识与技能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识，实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件，使学生在学习理解基本的CSS技术的同时，体验CSS样式表的优势和神奇，激发学生对CSS样式表学习的兴趣，真正做到了使学生在感受信息文化的同时，提升了审美意识和体验、享受成功的乐趣，真正达到在感受中发现，在领悟中升华的美好境界。
【教材分析】
教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。
【学情分析】
学生对主题网站的设计、静态网页的制作及 JavaScript 客户脚本语言有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。
【教学策略】
课堂中贯彻实例展示、引入新课 —— 明确目标、自主探究 —— 范例展示、精讲释疑 —— 实践探究、反馈巩固 —— 交流评议、总结提高这条主线。
【教学目标】
1．知识和技能目标
（1）理解什么是CSS样式表；
（2）掌握运用CSS进行样式设置的方法和格式；
（3）掌握在 HTML 中加入CSS的三种方法。
2、过程与方法：
能够通过学习网站进行自主学习，理解在网页中加入CSS样式表
过程与方法。
（2）通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
（3）能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网
页。
3、情感态度与价值观：
（1）通过CSS样式表的学习，提高学生美化网页的技能。
（2）培养利用网络进行自主学习、实践的能力，培养学生良好的科学研
究态度。
（3）通过实践过程中的合作学习，培养学生主动思考、积极参与、团结
协作的精神。
【教学重点】
1、什么是CSS样式表。
2、嵌入式、内联式、外联式三种样式表的使用方法。
3、体会CSS样式表的优点
【教学难点】
1、三种CSS样式表的格式
2、三种CSS样式表的使用场合和特点
【教学方法】
讲授法、任务驱动法、个别指导法、赏识教育法、问题教学法、小组协作法
【教学环境】
基于网络的多媒体计算机教室、网络版教学课件
【教学过程】
教
学
程
序
教师活动
学生活动
实例展示
引入新课
在浩如烟海的网站中，那些让游览者赏心悦目、过目不忘的网站被设计者施了什么魔法呢？只要也为我们的网站穿上美丽的外衣，它们也会像被施了魔法似的更加美观、更具特色。今天我们就来穿穿看，先来看看下面的实例吧。
实例展示1：（两种输入框的比较）
提示学生认真观察代码。
观察效果及代码。
普通输入框效果图：
横线式输入框效果图：

提示：左图效果是直接在“普通”视图下插入输入框产生的，右图是在源代码中加入新的代码产生的。
实例展示2：（“百度_招聘”网页外观改进）
设计意图：让学生观察需要改变网页外观的“百度_招聘”网页的不足，如：页面排列不整齐；字体大小、颜色不统一；超链接太多、下划线太乱等等。如果逐一修改，很麻烦，激发学生思考如何才能将其迅速改观。然后演示在其源代码中插入新代码，快速实现美观、新颖的效果，使学生惊讶于变化之快，从而激发学生浓厚的学习热情。
想一想：在两个实例中加入代码后效果竟如此神奇，那么这些代码究竟是什么呢？
答案揭晓：这就是CSS样式表。
思考形成两种输入框的原因
观察网页，分析网页外观上的不足，思考如何迅速弥补。
观察变化,惊讶不已,思考其中的原理，对这些既枯燥又难度大的代码主动产生兴趣，学习热情高涨。
初识ＣＳＳ样式表，感受其在改变网页外观上的巨大作用。
明确目
标

自主探究
怎样才能为网站穿上美丽的外衣呢？在网页中加入CSS样式表是制作动态网页的另一核心技术，有了这门技术，我们就会很容易地设计出风格统一、个性独特的网站。
那么，什么是 CSS 样式表呢？使用CSS的优点有哪些？
请同学们学习教材第112 ～113页内容。
然后请同学回答
教师总结：ＣＳＳ是网页制作的一种新技术，能将网页的内容和样式分开，能用最简单的代码控制网站的整体风格，最大限度地提高网页制作效率，更加容易地维护和更新网站。
联系刚才的实例，自学“什么是CSS样式表”
回答内容（理解CSS样式表的含义和优点）
1.什么是CSS样式表？
2.使用CSS的优点是什么？
范例展示
?

精讲释疑
实践探究
?
?
?
?
?
反馈巩固
2、CSS样式表的实现
展示以下例子：
如果我们想做出上面这样一个文字样式，那么可以用如下的 HTML 样式来实现。

欢迎进入机器人做学玩网站 !

讲解CSS的实现。
分析CSS与 HTML 代码的不同。(表5-4)
讲解使用CSS的注意事项：
有的比较老的浏览器不支持样式表语法，不会将 之间的文本显示出来，若要避免这种情况的发生，就要加入 < ! - - 和 --> 代码。
观察文字样式
观察并理解HTML和CSS两种实现方法。
在教师指导下，用CSS样式表来对 HTML 文档进行编辑，
请同学上台改变样式：将字符改成如下样式：字体为“黑体”；颜色为“红色”；字号为“14pt”。
又识CSS代码，打消畏惧心理。
3.在HTML中加入CSS
1）内联式样式表
提问：上两个范例主要是使用哪种方法加入CSS样式表的呢？让学生阅读教材115页至116页的内容。
内联式样式表的格式（教师强调）
（1）标记
（2）加入位置：
（3）type 属性
(4)
动手试试
（1）基本任务：设置超链接的4种状态
（2）提高任务：设置超链接的鼠标指针
给出帮助信息，让学生自主探究
点评学生的作品，让学生介绍完成的方法，及时纠正学生的错误。
教师总结：内联式样式表直接加在网页代码内部，并有一定的格式，可以对这张网页设置效果，CSS样式表的优越性初步体现。
2）外联样式表
一个网站的网页何止只有一张，一些大型网站有几千张网页，那么如何使整个网站的效果统一呢？每张网页都贴上这段代码吗？这样好吗？
我们还有第二种方法：先把样式表写成一个独立的文件，保存扩展名为.css,然后将所有的网页和这个文件链接，这种共享链接样式表文件的方法叫“外联式”样式表，也是样式表优点的最高体现。
外联样式表格式（教师强调）

动手试一试
基本任务
提供给学生一个现成 bjcss.css文件，要求学生能控制整个网站的风格。并尝试根据个人喜好修改bjcss.css文件，使网站更具个性。
提高任务
给学生提供帮助信息，要求学生修改bjcss.css文件，实现鼠标在页面上变样的效果。
教师巡回指导，记下最先完成的组和作品有欠缺的组，并让组内推选一名同学的作品，以供演示。
演示学生作品，作出评价，突出优点，指出不足，以供参考。
阅读教材，思考问题
回答：内联式样式表
理解掌握内联式的格式要求
参考教师提供的“帮助”，自己动手或进行组内探究。
演示内联式样式表的使用方法，在同学的示范中互相学习。
由新的需要引发新的问题，主动探究有效的解决方法
理解外联样式表的含义和使用方法
通过练习掌握外联样式表的使用方法，自主探究或进行组内协作，并在提高任务中达到简单修改外部样式表文件的能力，使网站更具个性。
观看演示，并进行组内评价，学习优点，补充不足。
3）嵌入式样式表
有时我们需要对某个标签作具体的调整，效果也只限本标签，就可以直接在本标签后写上CSS属性，这种方法叫“嵌入式样式表”，使用方法比上两种简单、灵活，只是不能体现出CSS样式表的优越性，所以应用场合并不多见。
嵌入式样式表格式:
< 标签名 style=”CSS属性”>
动手试试
基本任务（设置行样式）
提供给学生有关表格标签名的信息，并将”bdzpw”文件夹中的”bdzpwnl.htm”网页中的＂中华英才网＂所在行的文字修改成华文行楷、16pt及背景色为红色的CSS样式．
巡回指导，提供帮助。
提高任务（设置单元格样式）
将“bdzpw”文件夹中的“bdzpwnl.htm”网页中的“中华英才网”所在单元格的文字修改成华文行楷、16pt及背景色为绿色的CSS样式．并思考在基本任务中对行所设定的代码样式没有效果的原因．
教师巡回指导，提供帮助。
演示学生作品并作评价
指出设定样式过程中的代码冲突问题：当样式存在冲突时，直接运用的样式会被采用；优先级别高的被采用．
理解嵌入式样式表的含义和使用场合。
掌握嵌入式样式表的格式
对照教材，自主或组内协作完成
自主或组内协作完成
观看演示，并作小组内评价
交流评议
总结提高
教师引入：本节课主要学习了三种样式表的使用方法和使用的场合，外联样式表是使用CSS样式表优越性的最高体现；要牢记在使用过程中的注意事项，克服同学们易犯的错误；希望同学们在课后继续自主探索，才能灵活使用并更好地把握CSS样式表。
请同学们完成自我评价表，看看今天这节课任务完成的如何。
学生自己谈谈学习CSS样式表的体会，并完成自我评价表。
教学反思
本节课不仅通过两种输入框样式的引入，让学生见识了横线式输入框的设计，还让学生惊叹于“百度_招聘”网页外观瞬间的改变，引起学生强烈的探究激情，这比单纯地讲原理要好很多。本节课除了对文字字体、颜色作简单设置外，还对超链接、鼠标和表格样式的设置，内容丰富，能有效地调动学生的积极性，以任务驱动，自主探究，让学生有成就感，从而更加热爱学生信息技术。
本节课所用课件内容很有吸引力，防止学生的注意力只在这些动态效果上，要把学生的注意力引向任务的探究上；样式表格式又很复杂，容易遗忘，故要提醒学生加强记忆，特别是对外联样式表的掌握与灵活使用，可以保证整个网站风格的统一，并可高效率地更新和维护网站；更要鼓励学生能举一反三，利用CSS样式表的原理做出更多的网页效果。
【参考文献】
[1]《新课程理念下的信息技术课堂教学设计》中国论文下载中心 http://www.studa.net
[2] 曹鹏CSS视频教程http://www.caopeng.org/html/css.htm

展开更多......

收起↑