在体验中学习css样式表

《在体验中学习css样式表》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、课题在体验中学习CSS样式表教材分析教材采用教育科学出版社的《网络技术应用》(选修)。本节内容是第五章动态网页制作中的5.2.2《CSS样式表》，前面第四章我们学习了《建立主题网站》,本节内容的学习是为了优化自己的主题网站，使得自己的主题网站具有统一的风格。教学对象分析CSS样式表是网页制作中一项很有用的技术，现在专业的网站开发团队一般都是使用样式表来控制网页的外观风格的，如果掌握了样式表的使用方法可以使学生的网站外观立刻上一个台阶。但这部分内容是在高二选修模块中，属于网站设计提高部分的内容，对学生来说难度比较大的

2、，它主要是靠HTML代码来实现效果的，而且属性代码又多，学生掌握起来很困难。不过依照新课改的宗旨我们并不是要把学生培养成计算机专家，而是要让他们感受信息时代的特点，体验信息社会的生活方式，从而提升自身的信息素养，因此我觉得这节课重在“体验”，让学生了解最新的网站开发技术，感受这个技术的使用方法，体验开发过程。对学生的实际操作能力的要求较高，是动态网页制作的实践性活动。教学目标知识与技能了解样式的概念；CSS样式表的优点；CSS样式表的的分类；掌握将CSS样式应用到各种网页元素上的方法。过程与方法通过多媒体教室向学生

3、演示、任务驱动、分层教学的方法来让学生掌握CSS样式表的三种应用方法，提高学生动手实践的能力。情感态度价值观通过在网页中运用CSS样式表来培养学生的审美情趣，也提高了学生网站制作能力和动手实践的能力。教学重点掌握将CSS样式应用到各种网页元素上的方法教学难点内联、外联样式的定义和使用；外部样式表链接到网站的多个网页上，以便直接应用已创建好的CSS样式，统一多个网页的外观教学方法贯彻新课标和素质教育的精神，通过案例学习、主动式任务驱动法、分层教学，采用学生容易接受的基本html代码入手讲解三种CSS样式表，让不同层次

4、的学生都得到发展。学习方法模仿法、练习法、协作法教学课时2课时教具多媒体平台、网络教室教学结构情境感知揭示主题→教师讲演→接受任务→自主协作学习→提交、分享作品→归纳总结教学过程5教学环节教师活动学生活动设计意图情境感知揭示主题1．给学生观看用frontpage打开的一个网页，（网页中的内容是５段文本，第一段用工具栏上的按钮将其设置成隶书，24pt,blue）,请同学们思考有什么办法可以快速的将下面的４段文本设置成一样的格式？并给学生看了一个代码，系统自动生成。2．教师按学生说的，使用“格式刷”3．教师将界面立即调

5、到html，让学生观察，下面的代码有何变化4．教师总结代码重复使用，这会使网页容量变大。那有什么方法解决代码只写一次，并且可以多次使用呢？今天我们要学习的css样式表就可以解决这个问题。1、学生思考教师的提问；2、大多数同学异口同生地说是“格式刷”3、学生观察、对比发现系统自动产生第一段格式的代码，五段代码相同。创设情景、对比引入；激发学生的学习兴趣，引出css样式表的课题。演示讲解1.什么叫做样式？通过给学生看一个样式名如下：h1{font-family:隶书;font-size:24pt;color:blue;

6、}，到时候要用到这种格式就只要写成h1就可以了，只不过写的时侯有格式而已。并用例子展示2.向学生介绍样式表的优点3.样式表分三种学生观察，并积极思考。为下面定义内、外联样式作铺垫介绍优点让学生更加信任样式表，从而想学习样式表１．内联样式案例分析理解掌握内联样式表的格式要求给学生发了“帮助”5案例分析学生练习　A．用ppt向学生展示内联样式的格式，引用方法，及运用范围并结合案例　B．任务驱动，让学生体验内联样式的效果　C.教师巡视学生在练习中出现的问题，并个别辅导　D．发现好多学生定义内联时没有写

7、="text/css">，在head区中直接插入定义的样式，导致在body区引用后无效果。教师统一讲解，并指出没有写这两句，电脑不知道你应用的是什么样式，得让电脑知道你应用的是什么样式就必须得写入。E.发现好多同学输入代码，没有成对出现，代码录入没有处于英文半角状态下，给予提示。F.向学生说明带点的样式名可以任意取,不带点的只能用html中所存在的的标签，提醒学生在以后在实践的过程中应注意这一点。          s3{font-family:隶书;  

8、  font-size:24pt;    color:blue;}，可以将s3改成h1,h2,P等,s3标签在html中不存在。参考老师提供的“帮助”，自己动手完成练习。演示内联样式表的使用方法学生认真观察,并体验文件，是为了解决初次运用样式表，对格式还不是很熟悉。上台演示给学生一个展示自我的机会。案例分析学生练习２．外联样式案例分析　A．用