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

《为网站穿上美丽的外衣——“css样式表”教学设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、为网站穿上美丽的外衣——《5.2.2CSS样式表》教学设计【摘要】新课程标准下，把“提升学生的信息素养，培养信息时代的合格公民”作为信息技术课程的根本目的。教师面对日新月异的信息发展，应当全面了解教学对象，认真分析教材、研究教材，精心设计让学生和教师身心享受的一堂课。【关键词】CSS样式表内联式样式表外联式样式表嵌入式样式表【设计意图】本设计遵循新课程标准的指导思想，以学生为主体、教师为主导，借助于多媒体网络教室，充分利用网络资源，关注学生的学习兴趣和经验，不是仅仅将目标锁定于CSS相关知识学习，而是通过更多、更深地体验，建立了知识与技

2、能、过程与方法、情感态度与价值观的三维教学目标。表面上是要使学生掌握网页制作中CSS相关知识，实际上是要使信息文化内化为学生的自然意识和自然需求。整个教学过程为学生创造了在获取知识的过程中亲历、体验、感悟、提升的条件，使学生在学习理解基本的CSS技术的同时，体验CSS样式表的优势和神奇，激发学生对CSS样式表学习的兴趣，真正做到了使学生在感受信息文化的同时，提升了审美意识和体验、享受成功的乐趣，真正达到在感受中发现，在领悟中升华的美好境界。【教材分析】“5.2.2CSS样式表”是高中信息技术选修三《网络技术应用》（教育科学出版社）第五章

3、第二节第二部分的内容。用一节课时间完成。这一节在学生了解了客户端脚本语言的基础上的学习，要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。【学情分析】学生对主题网站的设计、静态网页的制作及JavaScript客户脚本语言有了基本掌握，对动态网页有了一定了解。CSS对学生来说又是一项全新内容，理解和接受上有一定难度，需要通过大量实例帮助学生理解和掌握CSS，进而能够灵活运用CSS。【教学策略】课堂中贯彻实例展示、引入新课——明确目标、自主探究——范例展示、精讲释疑——实践探究、反馈巩固——交流评议

4、、总结提高这条主线。【教学目标】1．知识和技能目标（1）理解什么是CSS样式表；（2）掌握运用CSS进行样式设置的方法和格式；（3）掌握在HTML中加入CSS的三种方法。2、过程与方法：（1）能够通过学习网站进行自主学习，理解在网页中加入CSS样式表过程与方法。（2）通过对三种样式表的亲身实践，感受这三种样式表的优缺点。（3）能够根据实际需要，选择合适的添加CSS样式表方法美化自己的网页。3、情感态度与价值观：（1）通过CSS样式表的学习，提高学生美化网页的技能。（2）培养利用网络进行自主学习、实践的能力，培养学生良好的科学研究态度。（

5、3）通过实践过程中的合作学习，培养学生主动思考、积极参与、团结协作的精神。【教学重点】1、什么是CSS样式表。2、嵌入式、内联式、外联式三种样式表的使用方法。3、体会CSS样式表的优点【教学难点】1、三种CSS样式表的格式2、三种CSS样式表的使用场合及特点【教学方法】讲授法、任务驱动法、个别指导法、赏识教育法、问题教学法、小组协作法【教学环境】基于网络的多媒体计算机教室、网络版教学课件【教学过程】教学程序教师活动学生活动     实例展示       在浩如烟海的网站中，那些让游览者赏心悦目、过目不忘的网站被设计者施了什么魔法呢？只要

6、也为我们的网站穿上美丽的外衣，它们也会像被施了魔法似的更加美观、更具特色。今天我们就来穿穿看，先来看看下面的实例吧。实例展示1：（两种输入框的比较）提示学生认真观察代码。      观察效果及代码。         引入新课 普通输入框效果图：横线式输入框效果图：提示：左图效果是直接在“普通”视图下插入输入框产生的，右图是在源代码中加入新的代码产生的。实例展示2：（“百度_招聘”网页外观改进）设计意图：让学生观察需要改变网页外观的“百度_招聘”网页的不足，如：页面排列不整齐；字体大小、颜色不统一；超链接太多、下划线太乱等等。如果逐一修改

7、，很麻烦，激发学生思考如何才能将其迅速改观。然后演示在其源代码中插入新代码，快速实现美观、新颖的效果，使学生惊讶于变化之快，从而激发学生浓厚的学习热情。想一想：在两个实例中加入代码后效果竟如此神奇，那么这些代码究竟是什么呢？答案揭晓：这就是CSS样式表。思考形成两种输入框的原因  观察网页，分析网页外观上的不足，思考如何迅速弥补。  观察变化,惊讶不已,思考其中的原理，对这些既枯燥又难度大的代码主动产生兴趣，学习热情高涨。   初识CSS样式表，感受其在改变网页外观上的巨大作用。明确目标     自主探究怎样才能为网站穿上美丽的外衣呢？

8、在网页中加入CSS样式表是制作动态网页的另一核心技术，有了这门技术，我们就会很容易地设计出风格统一、个性独特的网站。那么，什么是CSS样式表呢？使用CSS的优点有哪些？请同学们学习教材第112～113页内容