在体验中学习CSS样式表.docVIP

课题 在体验中学习CSS样式表 教材分析 教材采用教育科学出版社的《网络技术应用》 (选修)。本节内容是第五章动态网页制作中的5.2.2《CSS样式表》，前面第四章我们学习了《建立主题网站》,本节内容的学习是为了优化自己的主题网站，使得自己的主题网站具有统一的风格。 教学对象分析 CSS样式表是网页制作中一项很有用的技术，现在专业的网站开发团队一般都是使用样式表来控制网页的外观风格的，如果掌握了样式表的使用方法可以使学生的网站外观立刻上一个台阶。但这部分内容是在高二选修模块中，属于网站设计提高部分的内容，对学生来说难度比较大的，它主要是靠HTML代码来实现效果的，而且属性代码又多，学生掌握起来很困难。不过依照新课改的宗旨我们并不是要把学生培养成计算机专家，而是要让他们感受信息时代的特点，体验信息社会的生活方式，从而提升自身的信息素养，因此我觉得这节课重在“体验”，让学生了解最新的网站开发技术，感受这个技术的使用方法，体验开发过程。对学生的实际操作能力的要求较高，是动态网页制作的实践性活动。 教学目 标 知识与技能 了解样式的概念；CSS样式表的优点；CSS样式表的的分类；掌握将CSS样式应用到各种网页元素上的方法。掌握将CSS样式应用到各种网页元素上的方法链接到网站的多个网页上，以便直接应用已创建好的CSS样式，统一多个网页的外观1、学生思考教师的提问； 2、大多数同学异口同生地说是“格式刷” 3、学生观察、对比发现系统自动产生第一段格式的代码，五段代码相同。 创设情景、对比引入； 激发学生的学习兴趣，引出css样式表的课题。 演示讲解 1.什么叫做样式？通过给学生看一个样式名如下： h1{font-family:隶书; font-size:24pt; color:blue;}，到时候要用到这种格式就只要写成h1就可以了，只不过写的时侯有格式而已。并用例子展示 2.向学生介绍样式表的优点 3.样式表分三种 学生观察，并积极思考。 为下面定义内、外联样式作铺垫 介绍优点让学生更加信任样式表，从而想学习样式表 案例分析学生练习 １．内联样式案例分析 　A．用ppt向学生展示内联样式的格式，引用方法，及运用范围并结合案例 　B．任务驱动，让学生体验内联样式的效果 　C.教师巡视学生在练习中出现的问题，并个别辅导 　D．发现好多学生定义内联时没有写style type=text/css/style，在head区中直接插入定义的样式，导致在body区引用后无效果。教师统一讲解，并指出没有写这两句，电脑不知道你应用的是什么样式，得让电脑知道你应用的是什么样式就必须得写入。 E.发现好多同学输入代码，没有成对出现，代码录入没有处于英文半角状态下，给予提示。 F.向学生说明带点的样式名可以任意取,不带点的只能用html中所存在的的标签，提醒学生在以后在实践的过程中应注意这一点。style type=text/css?????????? s3{font-family:隶书;???? font-size:24pt;???? color:blue;}/style，可以将s3改成h1,h2,P等,s3标签 在html中不存在。 理解掌握内联样式表的格式要求 参考老师提供的“帮助”，自己动手完成练习。 演示内联样式表的使用方法 学生认真观察,并体验 给学生发了“帮助”文件，是为了解决初次运用样式表，对格式还不是很熟悉。 上台演示给学生一个展示自我的机会。 案例分析学生练习 ２．外联样式案例分析 　A．用ppt向学生展示外联样式的格式，引用方法，及运用范围并结合案例 　B．任务驱动，让学生体验外联样式的效果 　C.教师巡视学生在练习中出现的问题，并个别辅导 D.调用文件的时候同一级能调用，将调用文件置于另一个文件夹就有难度，所以设置了一个提高提，不要求所有学生都掌握。 　E.请同学们思考内联、外联的共同点和异同点。 理解掌握外联样式表的格式要求 参考老师提供的“帮助”，自己动手完成练习。 生：共同点：都必须先定义（head），用引用(body)，并且引用方法相同，异同点：作用范围不同。外联可以作用于多个页面，而内联只作用于本网页。 调用文件的时候同一级能调用，将调用文件置于另一个文件夹就有难度，所以设置了一个提高提，不要求所有学生都掌握。 案例分析学生练习 嵌入式样式案例分析 　A．用ppt向学生展示嵌入式样式的格式，引用方法，及运用范围并结合案例 　B．任务驱动，让学生体验嵌入式样式的效果及作用范围。 　C.让学生了解其作用范围 练习“内嵌入式样式表”文件夹中的半成品网页，让学生添加嵌入式样式表 由于这部分内容比较好理解，我设计的半成品是一个“登陆”界面，让学生将某一个标签内的文本设置一下字格式