网页的“服装设计师”——“css样式表”教学设计

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