为网站穿上美丽的外衣——“CSS样式表”教学设计.docVIP

为网站穿上美丽的外衣 ——《5.2.2 CSS样式表》教学设计 【摘要】新课程标准下，把“提升学生的信息素养，培养信息时代的合格公民”作为信息技术课程的根本目的。教师面对日新月异的信息发展，应当全面了解教学对象，认真分析教材、研究教材，精心设计让学生和教师身心享受的一堂课。 【关键词】CSS样式表 内联式样式表 外联式样式表 嵌入式样式表 【设计意图】 本设计遵循新课程标准的指导思想，以学生为主体、教师为主导，借助于多媒体网络教室，充分利用网络资源，关注学生的学习兴趣和经验，不是仅仅将目标锁定于CSS相关知识学习，而是通过更多、更深地体验，建立了知识与技能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识，实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件，使学生在学习理解基本的CSS技术的同时，体验CSS样式表的优势和神奇，激发学生对CSS样式表学习的兴趣，真正做到了使学生在感受信息文化的同时，提升了审美意识和体验、享受成功的乐趣，真正达到在感受中发现，在领悟中升华的美好境界。 【教材分析】 “5.2.2 CSS样式表”是高中信息技术选修三《网络技术应用》（教育科学出版社）第五章第二节第二部分的内容。用一节课时间完成。这一节在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 【学情分析】 学生对主题网站的设计、静态网页的制作及 JavaScript 客户脚本语言有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。 【教学策略】 课堂中贯彻实例展示、引入新课 —— 明确目标、自主探究 —— 范例展示、精讲释疑 —— 实践探究、反馈巩固 —— 交流评议、总结提高这条主线。 【教学目标】 1．知识和技能目标 （1）理解什么是CSS样式表； （2）掌握运用CSS进行样式设置的方法和格式； （3）掌握在 HTML 中加入CSS的三种方法。 2、过程与方法： （1）能够通过学习网站进行自主学习，理解在网页中加入CSS样式表过程与方法。 （2）通过对三种样式表的亲身实践，感受这三种样式表的优缺点。 （3）能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网页。 3、情感态度与价值观： （1）通过CSS样式表的学习，提高学生美化网页的技能。 （2）培养利用网络进行自主学习、实践的能力，培养学生良好的科学研究态度。 （3）通过实践过程中的合作学习，培养学生主动思考、积极参与、团结协作的精神。 【教学重点】 1、什么是CSS样式表。 2、嵌入式、内联式、外联式三种样式表的使用方法。 3、体会CSS样式表的优点 【教学难点】 1、三种CSS样式表的格式 2、三种CSS样式表的使用场合及特点 【教学方法】 讲授法、任务驱动法、个别指导法、赏识教育法、问题教学法、小组协作法 【教学环境】 基于网络的多媒体计算机教室、网络版教学课件 【教学过程】 教 学 程 序 教师活动 学生活动 ? ? ? ? ? 实例展示 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 引入新课 ? 在浩如烟海的网站中，那些让游览者赏心悦目、过目不忘的网站被设计者施了什么魔法呢？只要也为我们的网站穿上美丽的外衣，它们也会像被施了魔法似的更加美观、更具特色。今天我们就来穿穿看，先来看看下面的实例吧。 提示学生认真观察代码。 ? ? ? ? ? ? 观察效果及代码。 普通输入框效果图： 横线式输入框效果图： 提示：左图效果是直接在“普通”视图下插入输入框产生的，右图是在源代码中加入新的代码产生的。 实例展示2：（“百度_招聘”网页外观改进） 设计意图：让学生观察需要改变网页外观的“百度_招聘”网页的不足，如：页面排列不整齐；字体大小、颜色不统一；超链接太多、下划线太乱等等。如果逐一修改，很麻烦，激发学生思考如何才能将其迅速改观。然后演示在其源代码中插入新代码，快速实现美观、新颖的效果，使学生惊讶于变化之快，从而激发学生浓厚的学习热情。 想一想：在两个实例中加入代码后效果竟如此神奇，那么这些代码究竟是什么呢？ 答案揭晓：这就是CSS样式表。 思考形成两种输入框的原因 ? ? 观察网页，分析网页外观上的不足，思考如何迅速弥补。 ? ? 观察变化,惊讶不已,思考其中的原理，对这些既枯燥又难度大的代码主动产生兴趣，学习热情高涨。 ? ? ? 初识CSS样式表，感受其在改变网页外观上的巨大作用。 明确目 标 ?