栏目列表
您现在的位置是:首页>>信息>>每周一课>>文章内容
《CSS样式表》——石红老师每周一课
发布时间:2019-06-03   点击:   来源:原创   作者:配置员


5.2.2 CSS样式表

一、教学目标

1.知识和技能目标

1)理解什么是CSS样式表;

2)掌握运用CSS进行样式设置的方法

2.过程和方法目标

通过学习运用CSS样式表优化网页制作,让学生学习正确、合理运用技术,了解技术服务于内容的原则。

3.情感态度和价值目标

培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力;激发学生学习信息技术的兴趣。

二、教学重点

CSS 样式设置的方法。

三、教学难点

运用CSS标签美化网页

四、教学内容处理思路 

遵循用任务驱动的思路,努力将理论与实践相结合,让学生自主探究,提高学习技能的兴趣。根据学生的实际情况,创造性、实用性和新颖性的原则安排教学实例。 

七、教学过程

教学程序

教师活动

学生活动

引入新课

认识CSS

导入:这节课我们学习CSS样式表。那么什么是CSS呢?

CSS中文翻译成“层叠样式表”,是一种制作网页的新技术。成为网页设计必不可少的工具之一,在当今的网页制作中,几乎所有漂亮的网页都用了CSS。借助于CSS的强大功能,网页将在你丰富的想像力下千变万化。这节课我们就来初步领略CSS打造精彩的页面效果。

学生激发了学习的兴趣,产生学习的欲望

明确目标

自主探索

一、            CSS轻松美化文字

我们知道,在网页中字体的好看与否是直接关系到页面的整体效果,因此对文字的控制就显得很重要。下面我们可以用CSS轻松美化文字

打开网页文件tuijian1.htm

1、 教师演示操作:创建CSS样式

方法1:“文本——CSS样式——新建”,打开“新建CSS规则”对话框

方法2:“窗口——CSS样式”,打开CSS面板,单击“全部”标签,单击“新建CSS规则”按钮,打开“新建CSS规则”对话框

2、教师讲解对话框的选项含义

l  【类】是一种新的样式表示符,可以任意命名。它是将CSS样式应用于选定的区域,若要在整个页面的相关区域应用CSS样式,则需选择【标签】和【高级】方式。

l  【标签】是将页面源文件中的html标记重定义。用标签定义的CSS样式设置完毕后,该CSS样式马上生效。

l  【高级】一般用于超链接的美化。

l  在该对话框的下方选区里,可以选择CSS样式表的引用方式。那么这两个选项有什么区别呢?选择【新建样式表文件】表示对CSS样式表的引用是外部文件方式,我们选择【仅对该文档】。

在该对话框上有8种分类,其中,

【类型】分类是对文字属性的设置。

【背景】分类是对背景属性的设置。

此处,我们选择类,仅对该文档,起名为textcss

3、应用CSS

选中文本,在属性面板的样式框中选择刚定义的样式。

4、学生自学并探索CSS的规则定义

完成任务一。任务二选做

5、编辑CSS样式

方法:双击CSS面板的新建的样式textcss,打开[CSS规则定义]

6CSS实现图文混排效果

我们之前在网页中插入图片的时候,是利用了表格来实现定位的。其实,我们完全也可以利用CSS来轻松实现图文混排效果。那么怎么实现的呢?实际上是用了[方框]属性。[浮动]右对齐;[边界-]2字体高。这个设置的含义是:定义图片的左边距为2em,图片浮动在文字的右边。单击[应用]

7、用CSS标签美化标题

下面,我们学习用CSS标签美化标题

教师讲解:标签的含义:

Tuijian1.htm中光标定位在标题,在标签位置可以看到有一个标签(h2),选中(h2),则整个标题都选中。也就是标签h2代表了整个标题。当我们对标签h2CSS设置的时候,标题就会应用此样式。此时,我们选择新建样式表文件,就会将此CSS保存成一个文件,以便在其它网页中应用。

二、            完善内容页面

展示要完成的任务

1、 插入一条水平线

1)定位光标

2)“插入——HTML——水平线”

3)利用属性面板设置,美化水平线

2、插入文章更新的日期

1)定位光标

2)“插入——日期”,选中“储存时自动更新”复选框,每次保存时页面时间会自动更新

 

 

 

 

学生观察,并学习操作方法

 

 

 

 

 

 

 

 

学生学习理解各种选项的功能

 

 

 

 

 

 

 

 

 

学生自学并自主探究,动手操作体会并掌握操作方法,能对文本段落排版

 

学生尝试操作

 

学生尝试插入图片,并利用CSS[方框],实现图文混排

 

 

学生继续探究并完成标题文字的美化

 

 

 

 

 

 

 

学生自学并操作

 

实践探究

反馈巩固

提出问题:在美文推荐的文章页面中,都有一条水平线,那么我们能不能利用CSS样式的选择器类型中[标签]中的[hr]来统一美化各页面的水平线呢?

学生自学并操作

 

小结


小组长,评定小组成员作业完成情况

 

 

 

 

 

 

 

 

【评课记录】

万江:执教者整体水平较好,在教师的教育观念与教学思想的更新上,对教学内容的驾驭与处理上,教学方法与教学手段的优化组合上,教学模式的研究探索上,均有一定程度的创新和突破,采用“任务驱动”式教学模式 

 教师在整个教学过程,以完成一个个具体的任务为线索,把教学内容巧妙地隐含在每个任务之中。学生在教师的引导下,通过完成一个个任务逐步掌握所学的知识与技能。真正为学生营造一个建构知识、寓学于实践的环境,让他们在这个环境里,充满兴趣愉快地进行学习,突出了在“做”中“学”的思想。 

通过教师“展示任务”、“讲解演示”,激发和保持了学生的学习积极性。学生通过任务的完成,并展示作品给大家看,使他们有成就感,更激发他们向更高目标前进。 

姚雪娟:创设情境,让学生体会信息技术的趣味性和实用性,所举的例子都贴近学生的学习和生活,是学生所熟悉和感兴趣的。调动了学生学习积极性。

夏国生:该教师在学生练习阶段突出了自主性学习和协作性学习。 

 首先,选择的主题与学生的学习生活、社会生活密切相关。 

其次,给予学生个体选择的机会。可以在多个主题中选择自己喜欢的主题。  

第三,采用分组协作式学习。使学生之间保持融洽的关系、相互合作的态度,共同完成作品。有利于提高学生自我协调的能力,培养与人共事的协作精神、利于学生健康情感的形成。   

万江总结:值得探讨的问题: 

 1、教师的应变能力和语言的感染力方面还有待提高。  

2、对学生掌握知识情况的反馈不到位。

 

 

【教学反思】

CSS样式表涉及到语言代码,作为高一生来讲,HTML语言实在很难以理解,我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用CSS标签来美化网页呢?我设计了一个任务:用CSS标签来美化标题。通过讲解让学生理解标签h2可以代表标题。然后通过演示操作过程,让学生体验如何用CSS标签来美化标题。其后,学生可以通过参看操作步骤提示的方法,来亲自尝试用CSS标签美化标题的过程。通过这样的处理,将学生难以理解接受的HTML语言简化。

考虑到学生的学习差异,学生可以通过使用教师提供的操作步骤向导学习,使每位学生都能很好的完成学习任务,提高了课堂教学效率,取得较好的教学效果。


关闭窗口
打印文档
附件: