“CSS层叠样式表”教学设计.doc

《CSS层叠样式表》教学设计 ——认识CSS 高淳县湖滨高级中学 芮菊芳 一、教学分析 (一)教材分析 CSS层叠样式表内容属于网络选修模块中的难点。学生没有实际应用过，甚至从来没有接触过相关知识点。由于这部分内容较难，我们主要以引入介绍为主，应用操作为辅，拓宽学生对程序代码的认识，激发学生的开发意识和开发兴趣。 (二)教学对象分析 学习者的认知特点：在教师引导下有一定的创新探究能力。 学生已有知识经验及能力水平：学生熟悉所见及所得的网页制作软件（Frontpage2000），了解HTML的概念。绝大多数同学能熟练操作鼠标和键盘。 对教学内容的了解程度：几乎是没有接触过样式表相关知识，对于学生来说是新鲜有吸引力的。 (三)教学重点、难点 教学重点：内联式CSS样式表的含义 教学难点：内联式CSS样式的应用 本课以文字应用为例，重点讲解内联式CSS样式表的应用，以内联式显示CSS样式表在网页布局中的作用，对于理解外联式样式表以及样式表在网页排版布局上的更广泛应用具有基础意义。 二、教学目标 1、教学目标 知识与技能：（1）了解CSS层叠样式表的基本概念及分类。 （2）掌握CSS在文字格式方面的简单应用。 过程与方法：（1）尝试使用网页代码优化自己的网页，能够合作或独立完成特效应用。 （2）在探究问题的过程中发散思维，拓展想象空间，培养创新意识。 情感态度与价值观：（1）学会科学分析信息材料，并利用合理的信息表达方式来表达、传递信息。 （2）学会客观地评价自己与他人的作品，养成辩证的信息评价与认识观。 三、教学策略设计 （1）教学方法设计 本课是一节理论与实践相结合的课程，理论方面对于学生比较陌生，教师的讲解必不可少。整节课采取教师引导，学生合作探究的教学模式，在解决任务过程中理解知识。由于学生在CSS的实际应用方面接触过少，且理论相对枯燥，所以教师要进行有效引导，由浅入深，从文字格式入手，与以前学过的HTML代码作比较，先培养感性认识，再层层深入，介绍css的其它应用。 教学方法：演示讲解法、任务驱动法、小组合作法，分层指导法 （2）学生上机操作安排和教师应用信息技术的情况 本课在多媒体教学机房中进行，教师机配有广播监控软件。 学生安排三个活动，完成教师布置的相关任务。 活动一：分析两组网页，形成对网页风格的认识； 活动二：模仿教师讲解，按要求修改代码； 活动三：根据所学知识，小组合作，自主探究，完成对poem.htm的代码设置。 说明：教师巡视指导的时候要注意学生层次，有的学生理解了教师的讲解，但是输入过程中出现了失误；有的学生片面模仿教师的操作，没有真正理解，在拓展任务中遇到了困难。教师的指导和小组成员的协作相结合，帮助后进生完成任务，反过来促进知识点的融会贯通。 5、教学评价： 本节课评价采用教师点评和学生互评，以能完成教师布置任务为主，突出代码设置的准确性。 三、教与学的实际过程描述 教学阶段及所用时间 教师活动 学生活动 对学生学习过程的观察和考查 创设情境 问题引入 5分钟 1、两组网页演示，以访问者的姿态作出比较 第一组风格统一和谐 第二组色彩布局混乱 2、引入到样式的概念范畴 1、学生观察 作出比较 2、在教师引导下认识到网站风格和谐的重要性 学生很快就能进入状态，分析两组网页在感观上的不同 新授课 15分钟 简述CSS在网页制作中的作用 类比WORD中“格式”菜单中的“样式项”。 初步了解CSS的概念和作用 对CSS的认识仍不清晰，停留在对字面意思的理解。 详解CSS的分类应用（以定义文字为主） 嵌入式样式表 举例说明： 如：规定一个table标签中的文字为红色，字体大小为10pt； 代码的书写形式： table style=color:red;font-size:10pt 与HTML代码中定义文字字体相比较 2、说明：作用范围只限于本标签，没有充分体现CSS样式表的优越性，应用较少 学生比较嵌入式CSS代码与普通HTML代码的区别 得出结论： CSS嵌入式的优势不明显，并没有显著的简化作用 知道嵌入式代码的应用方法，还不能认识到CSS的优势 内联式样式表： 把样式表规则放在head和/head的中间，从而使样式表对整个当前HTML页面产生作用。 style type=”text/css” !- - 样式表CSS的内容 - - /style 举例解释说明 在CSS代码中，定义一个名称为“S3”的样式。 操作步骤： （1）、启动Frontpage，切换到HTML视图， 在head和/head中插入下面的代码： style type=“text/css” !- - S3{ font-family：”宋体”； font-size：9pt； color：gr