《网页的“服装设计师”——“CSS样式表”教学设计》由会员分享，可在线阅读，更多相关《网页的“服装设计师”——“CSS样式表”教学设计（4页珍藏版）》请在金锄头文库上搜索。
1、网页的“服装设计师” CSS样式表教学设计 【教材分析】CSS样式表是普通高中信息技术选修网络技术应用第五章的内容，学生如能很好的掌握这部分内容，切实感受到CSS样式表的魅力和魔力，体会CSS的神奇之处，将会进一步激发学生学习的兴趣，培养他们运用信息技术的能力，发挥学生的潜能和创造能力。【学情分析】对于高中学生来说，网页制作是学生非常感兴趣的内容，学生已经学会了建立自已的网站，初步认识HTML基本标签及动态网页的相关概念，为CSS的学习做了铺垫。【教学模式】采用“网络课程教学”模式，教师提出问题后，学生共同讨论、探索、实践，教师适当地加以引导，针对不同的学生提出不同的要求，利用网络课件实施“分
2、层次教学”，充分开发每个学生的主观能动性和潜能。【教学手段】多媒体交互式教学平台结合多媒体网络教学课件。【教学目标】知识与技能：体会CSS样式的功能，初步认识css样式表基本语法结构，掌握CSS应用于HTML文件的三种方法。过程与方法：能根据学习任务，探究学习css样式应用于HTML文件的3种方法，通过自主学习，交流探讨、探究实践的过程来实践、加深知识的理解掌握。情感态度和价值观：通过在专题学习网站的学习过程中，提高学生的探究和实践精神，产生学习用CSS样式设计网页的兴趣和愿望，提高善于思考总结，综合应用技能的能力。【教学重点与难点】重点： CSS应用于HTML文件的3种方法难点：能够根据实际
3、的需要选择适当的样式表应用方式，并正确使用。【教学过程】教学过程教师活动学生活动新课引入大家是否为自己的QQ或博客“换过皮肤”？是如何实现“换肤”的呢？在网络世界中，要为网页换一幅新面孔无非也只是需要一个新的样式表而已。点击教学课件中的“感受魅力”，激发学生的学习兴趣。教师总结引出课题。这一节课我们就通过网站添加样式，美化网站页面。来学习CSS样式表的使用学生观看教学网站中的“感受魅力”，通过观察网页页面使用CSS样式表产生的效果,产生学习兴趣和动手操作尝试的愿望。通过简单实例介绍CSS基本语法教师演示，讲解知识要点。所有H1元素颜色是红色，背景是亮灰色规则包含两个关键的要素选择符，定义要给个
4、元素添加样式；声明块，定义要为选择的元素添加什么样式。认真听课，积极思考，猜出本条语句预期结果，掌握CSS的基本语法。代码提示：font-style:italic;font-weight:bold;观看演示，了解样式表建立的过程，积极探索，根据教师引导，接受任务挑战。任务一(1)设置H2元素颜色是白色，背景是绿色(2)给网页背景替换成一种亮绿色(3)设置网页中文本为粗体或斜体文本想一想：仔细观察任务完成后，网页有什么变化？网页中的文本有变化吗？如没有？应如何稍加改动？点击“学习任务”完成任务一积极思考尝试，找出答案H1font-style:italic;Pfont-weight:bold;小结
5、一条完整的样式规则，必须同时包含选择符和声明块。师生共同回顾“基本语法”小结理解CSS样式类型中的嵌入和内联样式表任务二1、嵌入式样式表在每个要应用样式的HTML的标记后写上CSS属性就可以了。这种方式主要用于对具体的标记作具体的调整，其作用的范围只限于本标记。格式为：网页内容任务二、改变网页中某段文本的颜色和大小HTML文件CSS文件2、内联样式表把样式表放在的中间，从而使样式表对当前整个HTML页面产生作用，这就是一个内联样式表。其引用方式如下：相互讨论，合作交流， 积极回答老师的问题。请学生讲解，教师补充。认真操作，掌握规律。学生积极去探索，尝试，开展小组合作，同学之间互助。任务三理解C
6、SS样式类型中的外部式样式表3、外部样式表我们可以只编写一个CSS文件，借助于引入外部样式表来实现不同页面的风格，并且当外部样式表被更改时，各引用该样式表的网页风格也随之发生变化，不需要手工逐个修改。定义方法为：在需要引用的HTML文件的和之间通过下面语句对base.css文件中的样式定义进行引用。 Stylesheet：指定使用一个外部样式表任务三：导入一个外部样式表CSSHTMLHTMLHTML打开ex02，通过完成相应的任务了解CSS样式类型。学习拓展打开网页 ex03,ex04,ex05根据代码提示，理解含意，对网页自行设计修改。通过查看css代码，请学生分析这些样式属于哪种样式？学生
7、操作，加样式，改参数提高实践能力，对代码稍做修改，领会含义。总结评价采用CSS技术，能有效地针对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做简单的修改，就可以改变网页的外观和格式。利用CSS网页“设计师”的魔力管理美化你的网站。切换屏幕到同学，点评同学实践。切换屏幕到同学，点评同学实践。加深对CSS样式的理解，掌握常规步骤及要点。学生上传作业lxhtml文件夹，学生交流操作结果，自评并互评。【教学反思】CSS样式表涉及到语言代码，部分学生在学习过程会产生畏惧心理，不愿花时间理解思考，所以网站中“感受魅力”中用了大量的精美的网页和实例给学生以视觉的冲击力，使学生产生极大的学习热情和积极性，通过学习任务和三种样式相对应使学生进步步深入了解CSS样式表，克服畏难情绪，能对样式表有新的理解，产生学习关于样式表的更多的知识愿望。考虑到学生的学习差异，学生可以通过使用学习网站自主探究学习，因材施教，使每位同学都能很好的完成学习任务，提高了课堂教学效率，取得良好的教学效果。4
