《CSS样式表》教学设计

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

《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样式表的概念、优缺点，以及在网页制作中的具体应用，从而启发学生举一反三，创造出个性的网页。总体而言，自我感觉学生的学习效果比较好。此外，在学生实践过程中，他们可以互相帮忙纠错或者讨论，这样既让学生感受了同学互助，又获得了很好的学习效果。

相关论文

人教版小学三年级语文《我们的民族小学..

数学新课程标准与主题式教学设计

《图形的复制与粘贴》教学设计

运筹帷幄,才能铸就一堂好课——《文件大..


上一篇：体验CSS样式表――在HTML中应用CS..	下一篇：《中国传统节日节徽的设计》的教..

濡炲閰ｅ▍鎾剁不閿涘嫭鍊� 闂佺偓鍎奸、锟� 缂佹梻鍋樼花銈夊礉閿燂拷濞戞搩鍘奸惃顒佸娴ｉ鐟� 闁告劕鎳橀崕鎾箳瑜嶉崺锟� 闁绘ǹ娉涢崰锟� 閻犲鍟悡锟犲箮閵夈儲鍟� 闁捐绉风粊锟� 缂佺媴绱曢幃锟� 濞戞搩鍙冨Λ鎸庣▔濮橆剙顫� 閻庡湱鍋樼弧鍕箮閵夈儲鍟� 闂佸弶鍨奸悗锟� 闁烩晜鍨归锟� 闁告帟娉涚€癸拷闁告劖绮嶅ḿ锟� 闁稿繑妲掗埀顑挎缁绘岸姊介敓锟� 闁告艾鐗呯紞鏃堝礌閼姐倖鐏� 濠㈣埖鐗為柨锟� 闁荤偛妫滈崒锟� 閻熸瑥瀚崹锟� 缂傚啯鍨崇粭鍌炴煣閹偊鏀� 闁告瑦鍨甸惈宥夋偝閹殿喖笑濞戞搩浜欏Ч澶愭偠閸℃艾鍋� 濞存粎鍎ら惃顖滄暜閿燂拷闁告娲ら埀顒婃嫹 PLC 闁告瑦锕㈤。鍓佹嫬閸愵喒鍋撻敓锟� 濞撴碍绋掗幐锟� 缂侇垵宕电划锟� 閹煎瓨姊婚弫锟� 闁硅矇鍐ㄧ厬濞存嚎鍊栫粊锟� 闁告瑦锕㈤。锟� 闁汇垹鐏氶～锟� 閻犱焦宕橀锟� 闁诲浚鍋嗘导锟� 闁煎浜滄慨锟� 闁硅翰鍎撮鐔哄寲閼姐倗鍩� 闁告娲滄晶鏍嫉閿燂拷闁绘垹鍠栧ù锟� 婵☆偀鍋撴繛杈炬嫹缂佲槅鍠氶幃锟� 婵絾妫佺粋锟� 閻犱讲鍓濆鍌炲闯閿燂拷闁煎浜滄慨鈺呭船椤旀寧褰涢柡鍫嫹闁硅矇鍐ㄧ厬缂侇垵宕电划锟� 闁汇垻鏁搁崕鐟邦潩閺夋垶鐝� 婵炴挴鏅涚€癸拷鐎殿喖鍊归鐐烘偨闂堟稑袟闁哄牞鎷� MATLAB 10kV 闂佹澘绉堕弫锟� 缂佹崘鍎婚惌锟� 闁硅矇鍐ㄧ厬闁革綇鎷� 闁哄懘缂氶崗妯荤閵堝鍋撻敓锟� 闁哄牆鎼花锟� 闁哄牏鍎ら～顐﹀箥閿燂拷闁告瑦岣块弫鍝ョ博閿燂拷闁告瑦锚鐢洭宕抽敓锟� 闁煎浜滄慨鈺呭礌閿燂拷闁哥儐鍠涢幓锝夊嫉閿燂拷闁奸缚椴搁悧閬嶅窗闁垮藟缂佹柨顑勭紞瀣姜閿曗偓缁拷婵炲弶顨夐妴鍌炲嫉閿燂拷閻熸娼″Λ顒傗偓娑欌偓鐠岰缂備礁瀚埀顑跨劍鐢爼宕氶敓锟� 闁硅翰鍨婚悺鐔煎闯閿燂拷闁轰胶澧楃敮鑸垫姜閿曗偓缁拷闁煎浜ｉ、鎴炴姜閿燂拷闂佹彃鐬奸埢锟� 閺夌儑绠撻埀顒婃嫹閻℃帒鎳庨敍鎰枖閿燂拷婵炴垼寮撶紞锟� 濞磋偐濮甸崝鍛村闯閿燂拷閻庨潧妫涢悥婊堟煥閿燂拷闁哄牏鍎ら悗锟� 闁轰胶澧楃敮璺衡攽閳ь剟宕楅敓锟� 闁告帒娲ゆ竟濠囧嫉妤︽鍟庨悹渚婃嫹闁告艾瀛╂晶顓㈠几閿燂拷闁告梻濮存导鎰啅閵夈劌顥� 濠㈠墎鎳撻崣璺ㄦ媼閹规劦鍚€ CA6140 濞磋偐濮存慨鈺傛姜閿燂拷婵炲鍔岄、锟� 婵☆垪鈧啿寰旈悹浣瑰礃椤擄拷婵炴垶褰冪敮锟�

Tags：CSS 样式教学设计

【收藏】【返回顶部】