《网页格式刷》教学案例.docVIP

《网页格式刷》 ——CSS样式表教学案例 【教材分析】 “CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。本节内容的重点应该是“运用CSS进行样式设置的方法和格式”及“在HTML中加入CSS的三种方法”。因此我认为将“CSS实现”与“在HTML中加入CSS”两部分结合在一起讲比较好。此外，我认为“体会CSS样式表的优点”也应该是一个教学重点。学生以往用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会CSS样式表的优点让学生明白为何我们要学习这部分内容。 【教学目标分析】 1、知识与技能 (1)什么是CSS样式表。 (2)CSS样式表的优点。 (3)嵌入式、内联式、外联式三种样式表的使用方法。 (4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。 2、过程与方法 (1)通过WORD排版中的“格式刷”引入网页中的“CSS样式表”，通过类比，使学生初步了解CSS样式表的作用，激发学习兴趣。 (2)对于CSS样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。 (3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。 (4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。 3、情感态度与价值观 (1)通过CSS样式表的学习，提高学生美化网页的技能。 (2)培养学生的探索、实践能力。 (3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。 【学情分析】 通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性也有了了解。考虑到我所在学校的学生学习能力、领悟能力比较强。因此虽然CSS样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。 【教学重点、难点分析】 1、教学重点 (1)CSS样式表的概念。 (2)体会CSS样式表的优点。 (3)嵌入式、内联式、外联式三种样式表的使用方法。 (4)CSS代码的书写格式，输入的准确性。 2、教学难点 (1)三种样式表在使用上区别。 (2)CSS代码的书写格式。 【教学过程】 [新课导入：] 教师活动：教师展示两篇WORD文档A和文档B，文档A已经进行了文字字号、字体、颜色、行距、首行缩进等排版，文档B未进行任何排版。 教师提问：同学们，在WORD编辑中，有什么方法能让文档B以最快捷的速度排版成文档A的字号、字体、颜色、行距呢？ 学生活动：部分学生思考后回答“格式刷”。 教师活动：教师迅速的利用格式刷将文档B设置成文档A的排版外观。 教师活动：教师展示两张网页，网页A已经进行了文字字号、字体、颜色、文字链接动态效果、彩色滚动条等外观设置，网页B未进行任何设置。 教师提问：现在老师想把网页B也设置成网页A的外观，有什么方法能够快捷而方便地帮我们做到呢？ 学生活动：部分学生回答说“格式刷”。 教师提问：如果我们在做网页的过程中，也有一把“格式刷”，是不是就能很方便的将网页B设置成网页A的外观呢？网页制作中，到底有没有这样的“格式刷”呢？ 教师操作：打开网页A的源代码，将CSS样式代码复制到网页B，立刻使网页B具有了与网页A相同的外观。 教师提问：老师刚才复制粘贴的那段代码是不是具有与“格式刷”相同的作用？今天我们就来学习“网页中的格式刷”——CSS样式表。 [新课讲授：] 一：什么是CSS样式表？ 教师活动：讲授CSS样式表的概念。 用一个指定的名字来标识和保存的一组相关字符和段落格式的选项集合。 　　　　　让学生了解CSS样式表的优点。(结合实例) 1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。 2、只需要修改一个CSS代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。 3、可以“随心所欲”地控制页面布局和外观。 4、在所有浏览器和平台之间具有较好的兼容性。 二：如何在HTML中加入样式？ 1、嵌入式样式表 教师活动：教师讲授嵌入式样式表的使用方法。 　　　　　方法：只需在每个要应用样式的HTML的标记后写上CSS属性就可以了。 　　　　　CSS属性书写格式：style=“color:red;font-family:黑体;font-size:24pt” 　　　　　注意：color的属性值还可以用颜色代