《CSS样式表》教学设计 江苏省栟茶高级中学 仇雪梅 226406 一、 教材分析 “CSS样式表”是教科版高中信息技术(选修)《网络技术应用》的第五章“动态网页制作”中第二节内容。教材中将这块内容分为“什么是CSS样式表”、“CSS样式表的实现”、“在HTML中加入CSS”三部分。学业考试纲要中对这部分的要求是“CSS样式表的简单使用”,对应于理解与独立操作水平,B类要求。 在近年的学业考试中,这部分知识点出题的机率很高,同样学生的出错率也高。此外,学生用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置,很少使用代码来进行编辑。鉴于以上这两点现状,我认为,锻炼学生分析代码的能力,灵活掌握网页制作的知识,让他们切实地体验到样式表在制作网页时的“神奇”就显得尤为重要。本论文由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看 二、 学生分析 通过前一阶段的学习,学生已经对HTML基本标签、动态网页的概念、DHTML的核心技术之一(java script语言)有了一定的认识和了解,这些内容为CSS的学习作了很好的铺垫。因此,对于学生来说,虽然CSS样式表是全新的内容,但如果教师结合相关案例,联系之前的学习内容,将会有效激发学生自主探索学习的兴趣和热情,使学生的学习更具挑战性。 三、 教学目标 (一) 知识与技能 (1)理解CSS样式表的概念。 (2)掌握嵌入式、内联式、外联式三种样式表的使用方法。 (3)通过对三种样式表的亲身实践,感受这三种样式表的优缺点。 (4)通过CSS样式表的学习,提高学生美化网页的技能。 (二)过程与方法 (1)借助WORD排版中的“样式和格式”引入网页中的“CSS样式表”,通过类比,使学生初步了解CSS样式表的作用,激发其学习兴趣。 (2)对于嵌入式、内联式、外联式三种样式表的使用,由教师讲授和演示代码,引导学生自我实践操作,并进行合作学习。 (三)情感价值 (1)培养学生分析代码的能力,锻炼其探索与实践能力。 (2)通过实践过程中合作学习,让学生感受彼此之间的团结协作。 四、教学重难点 本节课的重点是让学生理解CSS样式表的概念,并熟练掌握嵌入式、内联式、外联式三种样式表的使用方法。难点在于培养学生分析代码的能力,使学生举一反三,创造出个性的网页。 五、教学环境:网络机房 六、教学过程 (1)新课导入 教师演示:教师通过终端控制系统,向学生集体展示Word文档1。其中,文档1的内容已经设置了具体的样式(效果如下图): 教师提问:如果现在要求大家快速给三级标题也定义一个样式,该怎么操作? 教师活动:教师分发Word文档1给所有同学,要求大家进行操作。教师巡回辅导,及时了解学生的学习情况。 学生活动:学生进行自我练习,或者相互讨论。 教师演示:教师总结学生的操作情况,并借助“样式和格式”工具,演示如何具体修改文本内容的格式。 教师总结:我们通过刚才的操作,可以概括出:“‘样式’是指用有意义的名称保存的字符格式和段落格式的集合,这样在编排重复格式时,先创建一个该格式的样式,然后在需要的地方套用这种样式,就无须一次次地对它们进行重复的格式化操作了。” 教师提问:那么,我们网页制作中如何定义样式,以减少代码的书写量?今天,我们就来学习网页制作中“CSS样式表的应用”。 【设计思路】:借助WORD排版中的“样式和格式”引入网页中的“CSS样式表”,通过类比,使学生初步了解样式的作用,激发学习兴趣。 (2)新课讲授 什么是CSS样式表? 教师讲授:讲解CSS样式表的概念。 CSS(Cascading Style Sheet),层叠样式表,简称样式表,是近几年才发展起来的新技术,诞生于1996年底。它是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 ②我们为什么应用CSS样式表? 教师讲授:概述CSS样式表的优点。 只需要修改一个CSS代码文件就可以改变页数不定的网页外观和格式。 可以“随心所欲”地控制页面布局和外观。 在所有浏览器和平台之间具有较好的兼容性。 能精简网页,提高下载速度。 教师演示:利用Frontpage制作的一个简单的学校网站导航条和其下拉菜单(要求:当点击最上行四个导航条之一时,会自动出现其下拉菜单,并且当点击每一个下拉菜单时,光标会变成手型并凸显颜色),体现CSS样式表在工作量较大的网页制作中的优越性。 教师活动:逐步分析和讲解该典型案例,进而让学生初步明白,CSS样式表在繁复的网页制作中具有很大的便捷性,进而激发学生的好奇心。 学生活动:体会CSS样式表的优点。 ③如何在HTML中加入样式? 教师讲授:方法一:嵌入式样式表(具体操作:只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。) 教师演示:举例——简单的文字字体的浏览效果。 学生活动:自己上机操作练习。 教师活动:巡回辅导,提醒学生注意字母、标点的输入。 教师总结:由此可见,嵌入式样式表主要用于对具体的标签作调整,其作用的范围只限于本标签,这样未能充分体现出CSS样式表的优越性。 教师讲授:方法二:内联式样式表(具体操作:在网页的<head> </head>定义样式) 如:<style type=“text/css”> CSS内容 </style> 教师演示:打开Frontpage制作的学校网站导航条实例,进一步让学生体会内联式样式表的结构。 教师提问:同学们可以用内联式样式表完成我们刚才的例子(文字字体浏览效果)吗? 学生活动:学生打开Frontpage,自己操作实践。如学习有困难,可以和邻座同学相互合作完成。 教师活动:巡回辅导,检查学生课堂听课效率。 教师演示:打开Frontpage,利用内联式样式表实现文字字体浏览效果。 学生活动:学生基本可以利用内联式样式表实现字体浏览效果的变化。 教师提问:如果我们的另一个网页需要应用类似学校网站导航条的样式,怎么操作? 学生回答:可以将样式表内容复制到需要的网页中。 教师提问:如果我们有几十个网页都需要采用该样式,复制方便吗?很显然,复制显得麻烦,我们有更好的方法——可以采用外联式样式表提高制作网页的效率。 教师讲授:方法三:外联式样式表(具体操作:首先,将样式定义成一个“.css”的文件(可在记事本中输入样式代码),然后保存为扩展名为“.css”的文件。然后,在网页的head区插入引用代码:<link rel=stylesheet type=“text/css” href=“样式表文件名.css” > 教师演示:打开Frontpage,利用外联式样式表实现字体浏览的效果。 学生活动:依据教师讲的方法,进行自主练习。 教师活动:巡回辅导,提醒学生定位插入点要准确,输入字母、标点也一定要准确。样式文件和网页文件必须要保存于同一个文件夹内。 【设计思路】:围绕“是什么,为什么,怎么做”的教学思路,讲解CSS样式表的概念、优缺点,以及在网页制作中的具体应用,从而启发学生举一反三,创造出个性的网页。 (3)课堂小结 教师活动:通过课程的学习,同学们知道了CSS样式表的概念、优缺点,掌握了三种CSS样式表的使用。通过实践操作,同学们也体会到了使用CSS样式表可以避免很多重复操作,从而提高网页编辑和修改的效率。希望大家能够举一反三,创造出更多的个性化网页。 七、教学反思 在新课导入过程中,借助WORD排版中的“样式和格式”引入网页中的“CSS样式表”,通过类比,使学生初步了解样式的作用,激发其学习兴趣;在新课讲授过程中,围绕“是什么,为什么,怎么做”的教学思路,讲解了CSS样式表的概念、优缺点,以及在网页制作中的具体应用,从而启发学生举一反三,创造出个性的网页。总体而言,自我感觉学生的学习效果比较好。此外,在学生实践过程中,他们可以互相帮忙纠错或者讨论,这样既让学生感受了同学互助,又获得了很好的学习效果。