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