《css教学设计》由会员分享，可在线阅读，更多相关《css教学设计（2页珍藏版）》请在金锄头文库上搜索。
1、1教教学学设设计计表表学校 南京市临江高级中学 姓名 高娟 班级 高二（11）班 开课日期 2013.10.22 课题“玩”转 css课时1教材分析“CSS 样式表”是高中信息技术选修网络技术应用的第五章“动态网页制作”中的内容。 教材中将这块内容分为“什么是 CSS”、 “CSS 实现”、 “在 HTML 中加入 CSS”三部分。学业考试 纲要中对这部分的要求是“CSS 样式表的简单使用”，对应于理解水平与独立操作水平，B 类 要求。在近年的学业考试中出题的机率很高，同样学生的出错率也高，根据多年的教学经验 这部分内容如果在新课时没能让学生很好地掌握，学生很容易形成畏惧心理。而在实际生活 中
2、，css 的应用也越来越广泛，它在制作网页时起着举足轻重的作用，当前 div+css 制作网页 的理念被越多的人接受。因此这部分内容的教学就显得更为重要。为了让学生能学得既轻松 又扎实，激发学生的积极性，让他们切实地体验到样式表的超凡的“魔力”就显得尤为重要。 本节学习中课本上以 frontpage 的 html 方式来展示代码的，但在教学为了让操作更直接， 选用记事本打开也是不错的选择。这样做的好处是：一、在本次课的学习中会显得更为方便 与简洁。二、可以让学生体会到 frontpage 只是网页常用编辑工具之一，html 代码可以由任 何一种文件编辑软件编辑，然后存成 html 格式，在浏览
3、器中浏览。学生分析通过前一阶段的学习，学生已经对 html 基本标签有了一定的认识。但仅仅局限于记忆 标签，对如何实际操作不了解，不清楚，为了让学生对本节内容有更深的印象，设计上采取 了几种措施：一、提供半成品站点；二、利用学案中操作步骤提示，为学生提供帮助。三、 相关代码提前做好，减轻学生录入负担，当他们操作时大屏幕也同时展示操作帮助；四、知 识分步，层层深入；五、频繁开展讨论，让他们积极主动地进行思考。教学目标知识与技能目标知识与技能目标：（1）能充分体会到 css 样式表在网页制作中的强大作用。（2）通过对“运动、健康、快乐”站点的操作，了解样式表具体应用方式。（3）初步认识样式表的书写
4、格式，及基本含义。过程与方法目标过程与方法目标：以问答和讲解的方法梳理学生原有知识，结合任务驱动的方式，让学生把理论知识应用 到实际情况中，加深对知识的理解。情感态度与价值观目标情感态度与价值观目标：通过对“运动、健康、快乐”站点的操作，提高学生的积极思考和动手能力，以及培养学生审美能力。教学重点 、难点教学重点教学重点：体会到 CSS 样式表的优点。教学难点教学难点：样式表的正确应用和 CSS 代码的书写格式。教学策略与教 法分析以“运动、健康、快乐”半成品站点为操作对象，在教学中以师生共同发现问题、提出 问题、解决问题为学习主线，让学生处在“做中学、学中思、思中做”的状态中，积极主动地 完
5、成知识的建构，达成学习目标。 激发学生求知欲，让他们带着浓厚的兴趣，积极主动经 历学生过程，达成学习目标，主要教法有：问答法、讲练结合法；任务驱动法。教学环境分析网络机房、电子教室、投影仪教 学 过 程教学内容教师活动学生活动设计意图2情境引入展示 1.htm 网页，演示加入 css 后效果。观看激发学生学习兴趣复习回顾1、css 也叫层叠样式表，它可 以分成哪三种样式？ 2、内联式样式表的格式是什么 样的？ 3、外联式样式表的格式是什么 样的？ 4、嵌入式样式表的格式是什么 样的（举例）？思考并回答问题复习前段时间的学习内 容，为本节课的学习打 下基础。概念讲解什么是 css？它有什么作用？
6、 学生思考，聆听并记 忆通过概念的讲解，使学 生对 css 作用具备初步的 印象。例题讲解结论：这是一个内联样式表， 它放置在区，可以通过 修改“background-color:blue;”来 修改颜色。 打开“学案一”，完成 任务一：我的第一张 CSS 自制网页教师演示和学生模仿， 结合师生共同分析，得 出结论小组合作结论：这是一个外联样式表， 它放置在区，样式表为：1、打开“学案二”， 完成任务二：“我的 第二张 CSS 自制网 页”。 2、打开“学案三”， 完成任务三：网页美 化学生自主学习，教师巡 视指导，结合师生共同 分析，得出结论实战演练结论：这是一个外联式样式表， 可以通过记事
7、本修改“2.CSS”中 的代码，一次性修改三张网页 中的文字大小及颜色。如何修改 CSS 自制 网页中的文字大小及 颜色等？提高学生实际运用能力习题巩固教师投影五道精典题例，并分 析题例。学生分析并结合本节 课知识得出结论巩固本节所学知识会考题库例题一：在网页区插 入如下内联样式：h3 font-family:”宋体”; color:green; font-style:italic;学生聆听，记忆讲解操作步骤要点，为 学生接下来的操作练习 打下基础。下节预习1、08 考试练习系统， “网络技 术应用”中“23-练习（11） ”，完 成 frontpage：css 代码。 2、08 考试练习系统， “网络技 术应用”中“24-练习（12） ”，完 成 frontpage 题：css 代码。学生提前预习布置下节课预习作业。本课小结教师总结本节课知识点学生梳理知识点，形小结3成知识体系
