《CSS层叠样式表》教学设计——认识CSS

本论文在其他论文栏目，由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看

《CSS层叠样式表》教学设计
——认识CSS

高淳县湖滨高级中学芮菊芳
一、教学分析
(一)教材分析
CSS层叠样式表内容属于网络选修模块中的难点。学生没有实际应用过，甚至从来没有接触过相关知识点。由于这部分内容较难，我们主要以引入介绍为主，应用操作为辅，拓宽学生对程序代码的认识，激发学生的开发意识和开发兴趣。

(二)教学对象分析
学习者的认知特点：在教师引导下有一定的创新探究能力。
学生已有知识经验及能力水平：学生熟悉所见及所得的网页制作软件（Frontpage2000），了解HTML的概念。绝大多数同学能熟练操作鼠标和键盘。
对教学内容的了解程度：几乎是没有接触过样式表相关知识，对于学生来说是新鲜有吸引力的。

(三)教学重点、难点
教学重点：内联式CSS样式表的含义
教学难点：内联式CSS样式的应用
本课以文字应用为例，重点讲解内联式CSS样式表的应用，以内联式显示CSS样式表在网页布局中的作用，对于理解外联式样式表以及样式表在网页排版布局上的更广泛应用具有基础意义。本论文由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看

二、教学目标
1、教学目标
知识与技能：（1）了解CSS层叠样式表的基本概念及分类。
（2）掌握CSS在文字格式方面的简单应用。
过程与方法：（1）尝试使用网页代码优化自己的网页，能够合作或独立完成特效应用。
（2）在探究问题的过程中发散思维，拓展想象空间，培养创新意识。
情感态度与价值观：（1）学会科学分析信息材料，并利用合理的信息表达方式来表达、传递信息。
（2）学会客观地评价自己与他人的作品，养成辩证的信息评价与认识观。

三、教学策略设计
（1）教学方法设计
本课是一节理论与实践相结合的课程，理论方面对于学生比较陌生，教师的讲解必不可少。整节课采取教师引导，学生合作探究的教学模式，在解决任务过程中理解知识。由于学生在CSS的实际应用方面接触过少，且理论相对枯燥，所以教师要进行有效引导，由浅入深，从文字格式入手，与以前学过的HTML代码作比较，先培养感性认识，再层层深入，介绍css的其它应用。
教学方法：演示讲解法、任务驱动法、小组合作法，分层指导法

（2）学生上机操作安排和教师应用信息技术的情况
本课在多媒体教学机房中进行，教师机配有广播监控软件。
学生安排三个活动，完成教师布置的相关任务。
活动一：分析两组网页，形成对网页风格的认识；
活动二：模仿教师讲解，按要求修改代码；
活动三：根据所学知识，小组合作，自主探究，完成对poem.htm的代码设置。
说明：教师巡视指导的时候要注意学生层次，有的学生理解了教师的讲解，但是输入过程中出现了失误；有的学生片面模仿教师的操作，没有真正理解，在拓展任务中遇到了困难。教师的指导和小组成员的协作相结合，帮助后进生完成任务，反过来促进知识点的融会贯通。

5、教学评价：
本节课评价采用教师点评和学生互评，以能完成教师布置任务为主，突出代码设置的准确性。

三、教与学的实际过程描述
教学阶段及所用时间教师活动学生活动对学生学习过程的观察和考查
创设情境
问题引入
5分钟 1、两组网页演示，以访问者的姿态作出比较
第一组风格统一和谐
第二组色彩布局混乱
2、引入到样式的概念范畴 1、学生观察
作出比较
2、在教师引导下认识到网站风格和谐的重要性学生很快就能进入状态，分析两组网页在感观上的不同

新授课

15分钟
简述CSS在网页制作中的作用
类比WORD中“格式”菜单中的“样式项”。初步了解CSS的概念和作用对CSS的认识仍不清晰，停留在对字面意思的理解。
详解CSS的分类应用（以定义文字为主）
嵌入式样式表
举例说明：
如：规定一个<table>标签中的文字为红色，字体大小为10pt；
代码的书写形式：
<table style="color:red;font-size:10pt">
与HTML代码中定义文字字体相比较

2、说明：作用范围只限于本标签，没有充分体现CSS样式表的优越性，应用较少学生比较嵌入式CSS代码与普通HTML代码的区别
得出结论：
CSS嵌入式的优势不明显，并没有显著的简化作用知道嵌入式代码的应用方法，还不能认识到CSS的优势
内联式样式表：
把样式表规则放在<head>和</head>的中间，从而使样式表对整个当前HTML页面产生作用。
<style type=”text/css”>
<!- -
样式表CSS的内容
- ->
</style>
举例解释说明
在CSS代码中，定义一个名称为“S3”的样式。
操作步骤：
（1）、启动Frontpage，切换到HTML视图，
在<head>和</head>中插入下面的代码：
<style type=“text/css”>
<!- -
S3{
   font-family：”宋体”；
   font-size：9pt；
   color：green；
   font-style：italic；
   }
- ->
</style>
（2）、在<body>和</body>中插入下面的代码：
<S3>欢迎进入信息技术世界!</S3>
（3）、预览查看
重点解释代码格式：<！--
                   -- >的意义
           样式表名称S3可任意指定 1、学生了解内联式的应用范围
2、学习代码格式，理解代码含义理解了代码段内部的含义，能模仿教师进行代码定义和应用
操作过程中代码及符号输入错误频频出现
布置任务20分钟 1、将教师讲解的上述例子作修改，字体大小改为14pt，颜色改为红色（red）,将字体改为“楷体”，看看效果。
拓展题，小组合作完成。
打开网页素材 poem.htm，按照要求把下面这首诗的字体格式作修改：
《明日歌》
明日复明日，(宋体、12pt、#0000ff)
明日何其多。(楷体、12pt、red)
我生待明日，(华文行楷、13pt、#800000)
万事成蹉跎。（同第一句）
世人苦被明日累，（同第二句）
春去秋来老将至。（同第三句）
朝看水东流，    （同第一句）
暮看日西坠。    （同第二句）
百年明日能几何？（同第三句）
请君听我明日歌! （同第一句） 1、学生修改CSS代码
2、学生在理解的基础上尝试运用理论解决实际问题第一项任务完成较容易，这是下面拓展任务的基础
第二项任务学生先讨论确定方法，然后才能尝试完成，需要教师指导
总结评价
5分钟 1、教师对学生活动中出现的典型问题作点评
2、从文字应用方面推而广之
举例说明：
查看网站首页的源代码，分析其CSS的应用
分析作课堂引入时用的第一组网页的CSS代码。
3、引入到外联式代码应用（下一课）学生认识CSS的其他应用，激发进一步探究学习的意愿
初步了解CSS的外联式代码了解了CSS的更广泛的应用，同时也增加了对这一知识点难度的认识。
期待更多的素材来帮助认识CSS。

关键环节
（1）内联式代码举例说明时，格式规范的解释
这一环节体现出对代码的初步理解，如果认识不清，在完成教师布置任务时出现诸多问题：有些中英文符号不分，有些定义样式表名称时延用“S3”名称，认为是固定不变的等。
（2）指导完成任务《明日歌》
能根据任务设定正确的方法的，首先掌握了文字格式样式的定义方法
通过反复调用定义的样式表，进一步理解样式在控制网页布局方面的作用

四、教学反思
作为现阶段农村高级中学的学生，由于小学初中的信息技术课程开设还不完善，日常生活中又缺少相关的实践活动，因此信息素养普遍不高。在教学内容上，教师必须从最浅近的讲起，引起学生的关注，耐心引导他们理解和应用，不能过于求精。
教师在流动辅导中，对于有些学生在输入方面的容易错误要提前提示，及时指导改正，否则会因为错字母而导致内容已理解，任务却不能在有效时间内完成。