网页神奇魔术师——CSS层叠样式表

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

网页神奇魔术师——CSS层叠样式表
茅海莉射阳县陈洋中学
设计思想：　　本设计遵循新课程标准的指导思想，以建构主义理论为理论依据，以学生为主体、教师为主导，借助于多媒体网络教室，充分利用网络资源，关注学生的学习兴趣和经验，不是仅仅将目标锁定于CSS相关知识学习，而是通过更多、更深地体验，建立了知识与技能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识，实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件，使学生在学习理解基本的CSS技术的同时，体验CSS样式表的优势和神奇，激发学生对CSS层叠样式表学习的兴趣，真正做到了使学生在感受信息文化的同时，提升了审美意识和体验、享受成功的乐趣，真正达到在感受中发现，在领悟中升华的美好境界。

教材分析：
《C S S样式表》是高中信息技术教育科学出版社选修《网络技术应用》第五章的内容。根据多年教学经验,学生如果没能很好地掌握这部分内容,就容易形成畏惧心理,影响后面的学习。为了让学生学得既轻松又扎实,切实地体验样式表的超凡“魔力”就显得尤为重要。

学生分析：
高一年级的学生在必修课本中已经掌握了网站制作的基本要领。但对于动态网页这部分内容比较生疏。CSS样式表对于学生来说枯燥、无趣，学生仅有一点html知识，因此要在html的基础上，让学生理解和掌握几类样式表的功能、特点，需要有针对性地授课设计。

教学目标：
知识与技能：
了解什么是CSS及CSS的功能。
了解CSS样式表的样式规则。
(3)理解将CSS加入网页的主要方式，能读懂简单的CSS样式表代码，并能根据需要选择适当的方式(内联样式表，外部样式表)和适当的层叠样式表，插入到当前网页的HTML代码中。
过程与方法：
(1)通过学习理解将CSS加入网页的主要方式，能根据需要，选择适当的方式(内联样式表，外部样式表)和适当的层叠样式表，插入到当前网页的HTML代码中。
(2)通过“魔术表演”，体验CSS样式表的优势和神奇，并通过实例学习理解基本的CSS技术(如：改变文字样式、改变链接样式等)
情感态度与价值观：本论文由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看
(1)用切合实际的展示、亲历等方式，激发学生对CSS层叠样式表学习的兴趣，为新的学习打下基础。
(2)通过CSS层叠样式表学习与简单使用操作，提高学生的信息技术能力和信息素养，提升学生审美意识和体验、享受成功的乐趣。

教学重点、难点
(1)理解将CSS加入网页的主要方式。
(2)根据需要，选择适当的方式(内联样式表，外部样式表)和适当的层叠样式表，插入到当前网页的HTML代码中。

教学方法：作品展示法、演示法、分层教学法、自主学习探究法等多种教学法。

教学环境、教学手段：多媒体网络教学、导学课件、极域广播系统。

教学过程设计：
设计思路：创设情景，导入新课、尝试学习，实践与探究、学习过程评价(作品展示)，教学拓展，合作交流(协作学习)，总结性评价(巩固练习)，总结反思。

教学过程：
教师活动学生活动教学意图
一、【魔术表演】
师：“同学们，春晚中刘谦的魔术给大家带来了一丝震撼，眼下魔术非常流行，我们中的不少同学对此也特别着迷，今天我们的课程就从魔术开始，我也给大家变一个魔术，露一手”。
教师屏幕广播，展示网站——加工前主页.htm
|
教师关闭屏幕广播，快速css文件链接语句插入
|
请一个学生上讲台，单击浏览器中的“刷新”按钮
|
网站“大变身” ，学生惊呼
|
魔术结束，学生小声讨论



观看魔术变化前后网站的变化。








利用魔术展开情境教学，吸引学生兴趣，激发学习热情。

魔术前页面效果魔术后页面效果
请同学比较讨论

二、【揭示魔术真相】
师：“刚才我们表演了一个‘网站大变身’的魔术，同学们一定很想知道这个魔术的秘密，今天就要教会大家这个魔术。魔术之前，我们先来热身”。
魔术前热身：给学生提供变魔术的两个“道具”，两个网页，先请学生对这两个网页进行简单评价，找出需要修改的地方。


网页1：加工前主页.htm 网页2：加工前烟雨红尘心情日记1.htm

让学生利用已有的网站制作的知识，分别对这两个网站进行加工修改。（修改所有的文字格式）
分两组分别对两个网页进行修改
（教师巡视指导）

屏幕转播某学生操作过程：逐一修改文字，从而产生重复劳动，效率低。有没有简单的方法呢？教师由此引入CSS内联样式表的功能及使用方法
（教师演示，插入内联样式表）
<head>
<style type=”text/css”>……
</style>
</head>




学生找出网站中需要修改的地方。


学生利用已有知识对网站进行修改。





观看教师的操作过程






为CSS样式表内容做铺垫。




这是一个让学生 “碰壁”的过程，从中产生需求——寻找解决问题的新方法。


学生此时仅是“依葫芦画瓢”的学习过程，是一种对样式表的体验过程。


          师：比较一下刚才两个网页？
          生：样式基本上差不多，在每一个网页中插入代码。
          （学生插入内联样式表）
          师：这样效率高吗？
          生：……

师：每一个网页都插入内联样式表，会造成工作繁琐，语句重复，导致运行速度减慢。怎么办？
举例：给大家出一道数学题
师：ab+ac+ad=？
生：a(b+c+d)
师：什么方法？
生：提取公因式

（板书）由数学中的“提取公因式”引出：
一样的道理，此时可以编写一个CSS文件，借助外部样式表来实现不同页面的风格。这样可以减少代码，提高网站运行速度，这就是外联样式表。

操作方法：
教师演示，插入外联式
大家想一下：如果只有在一个地方使用这种样式，还需要我们刚才讲的两种方法吗？
学生思考得出结论：不需要，直接写代码就行了，这就是第3种方法嵌入式。
举例：教师演示


学生利用所体验到的样式表的知识，重新对两个网站进行整改。

引出第三种方式嵌入式
使学生产生认知冲突


找到了数学中“提取公因式”这一知识点，成为讲解外联样式表的突破口。让学生自然的接受了外联样式表。
三、【你来试试】
教师发送网站“mysite”。
  学生自我操作，实现刚才所讲的内容。(style.css是改变文字样式)

如果想修改网页背景，将如何操作？（随便使用今天讲的哪种方式.背景.css是改变网页背景代码）
根据所学知识，灵活选择样式表，将网站成功美化。

学生演示

让学生不仅仅“依葫芦画瓢”，还要活学活用。


通过学生的讲解带领全班同学对样式表进行巩固。

四、【魔术课总结】
（板书总结）
（板书讨论）CSS定义
（学生）说出三类样式表的名称、作用范围和使用方法。
（教师）加上线条，顺利完成板书表格：

学生总结
对样式表的概念、功能、分类等知识再梳理。


五、【魔术师考级】
分层次：没有完成网站美化任务的同学继续完成，完成好的同学进行魔术师考核，检验自己的学习效果。
填写表格
嵌入式内联式外联式
什么时候用比较好
如何操作


分层次
完成任务

通过自我考核，让学生对自己的学习效果进行检验。
  教学反思：
CSS层叠样式表这部分内容本来比较枯燥乏味，教师讲解起来有一定的难度，如何把这三种样式表的概念、特点和功能说清楚是至关重要的。因此需要创设一定的情境教学，让学生更容易接受。全文共分五个部分：【魔术表演】【揭示魔术真相】【你来试试】【魔术课总结】【魔术师考级】。
课堂导入利用时下比较流行的刘谦魔术作为开场，激发学生兴趣，这样能很好地把学生吸引过来。让学生利用已有知识修改网页，让学生在这样的“重复劳动”中产生认知冲突，这样的做法对不对？适不适合？从而产生需求——寻找找到解决问题的新方法。这样引人方法让学生更能接受。
本节课，整体效果不错，学生们基本上都能够顺利完成教学目标。课堂气氛也比较活跃。

参考文献：教育科学出版社《网络技术应用》
          网络资源