8.定义CSS样式 教案-2023新冀教版八年级全册《信息技术》.doc

1、第二单元第8课 定义CSS样式第二单元第8课定义CSS样式 一、概述定义CSS样式是河北教育出版社出版的信息技术第八课的内容。CSS样式表涉及到语言代码，让学生能够理解并会运用CSS标签来美化网页，然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。二、教学目标分析1知识和技能目标 （1）理解什么是CSS样式表； （2）掌握运用CSS进行样式设置的方法2过程和方法目标 通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。 3情感态度和价值目标 培养学生

2、独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣。 教学重点：CSS 样式设置的方法。教学难点：运用CSS标签美化网页三、学习者特征分析CSS样式表涉及到语言代码，作为初中七年级学生来讲，HTML语言实在很难以理解，我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用CSS标签来美化网页呢？我设计了一个任务：用CSS标签来美化标题。通过讲解让学生理解标签h2可以代表标题。然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用CSS标签美化标题的

3、过程。通过这样的处理，将学生难以理解接受的HTML语言简化。四、教学策略选择与设计遵循“用任务驱动”的思路，努力将理论与实践相结合,让学生自主探究，提高学习技能的兴趣。根据学生的实际情况，创造性、实用性和新颖性的原则安排教学实例。五、教学资源与工具设计1、一台教师演示用计算机2、学生多媒体计算机网络3、教学软件以“教师主导、学生主体”为指导思想，采用学生自主学习、合作学习的方式。以“任务驱动”与“问题解决”为主线，采取讲解法，演示法，练习法完成教学任务，从解决问题出发，是一个师生交流、学生亲历亲为、相互合作、感受创作成功成就感的过程。六、教学过程引入新课，认识CSS。教师活动：导入：这节课我们

4、学习课本的第八课定义CSS样式。那么什么是CSS呢？CSS中文翻译成“层叠样式表”，是一种制作网页的新技术。成为网页设计必不可少的工具之一，在当今的网页制作中，几乎所有漂亮的网页都用了CSS。借助于CSS的强大功能，网页将在你丰富的想像力下千变万化。这节课我们就来初步领略CSS打造精彩的页面效果。学生活动：学生激发了学习的兴趣，产生学习的欲望。明确目标，自主探索。教师活动：一、用CSS轻松美化文字我们知道，在网页中字体的好看与否是直接关系到页面的整体效果，因此对文字的控制就显得很重要。下面我们可以用CSS轻松美化文字打开网页文件tuijian1.htm。 学生活动：学生观察，并学习操作方法。教

5、师活动：1.教师演示操作：创建CSS样式方法1：“文本CSS样式新建”，打开“新建CSS规则”对话框方法2：“窗口CSS样式”，打开CSS面板，单击“全部”标签，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框2、教师讲解对话框的选项含义【类】是一种新的样式表示符，可以任意命名。它是将CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需选择【标签】和【高级】方式。【标签】是将页面源文件中的html标记重定义。用标签定义的CSS样式设置完毕后，该CSS样式马上生效。【高级】一般用于超链接的美化。在该对话框的下方选区里，可以选择CSS样式表的引用方式。那么这两个选项有什

6、么区别呢？选择【新建样式表文件】表示对CSS样式表的引用是外部文件方式，我们选择【仅对该文档】。在该对话框上有8种分类，其中，【类型】分类是对文字属性的设置。【背景】分类是对背景属性的设置。此处，我们选择类，仅对该文档，起名为textcss。3、应用CSS选中文本，在属性面板的样式框中选择刚定义的样式。4、学生自学并探索CSS的规则定义完成任务一。任务二选做学生活动：学生学习理解各种选项的功能，学生自学并自主探究，动手操作体会并掌握操作方法，能对文本段落排版。学生尝试操作。5、编辑CSS样式方法：双击CSS面板的新建的样式textcss,打开CSS规则定义6、CSS实现图文混排效果我们之前在网

7、页中插入图片的时候，是利用了表格来实现定位的。其实，我们完全也可以利用CSS来轻松实现图文混排效果。那么怎么实现的呢？实际上是用了方框属性。浮动右对齐；边界-左2字体高。这个设置的含义是：定义图片的左边距为2em，图片浮动在文字的右边。单击应用。7、用CSS标签美化标题下面，我们学习用CSS标签美化标题教师讲解：标签的含义：Tuijian1.htm中光标定位在标题，在标签位置可以看到有一个标签（h2），选中(h2),则整个标题都选中。也就是标签h2代表了整个标题。当我们对标签h2做CSS设置的时候，标题就会应用此样式。此时，我们选择新建样式表文件，就会将此CSS保存成一个文件，以便在其它网页中

8、应用。一、完善内容页面，展示要完成的任务。1.插入一条水平线（1）定位光标（2）“插入HTML水平线”（3）利用属性面板设置，美化水平线2、插入文章更新的日期（1）定位光标（2）“插入日期”，选中“储存时自动更新”复选框，每次保存时页面时间会自动更新。学生活动：学生尝试操作，生尝试插入图片，并利用CSS的方框，实现图文混排，继续探究并完成标题文字的美化，生自学并操作。实践探究，反馈巩固：提出问题：在美文推荐的文章页面中，都有一条水平线，那么我们能不能利用CSS样式的选择器类型中标签中的hr来统一美化各页面的水平线呢？学生活动：学生自学并操作。小组长，评定小组成员作业完成情况。七、教学评价设计创

9、建量规，向学生展示他们将被如何评价（来自教师和小组其他成员的评价）。另外，可以创建一个自我评价表，这样学生可以用它对自己的学习进行评价。八、帮助和总结CSS样式表涉及到语言代码，作为初中七年级学生来讲，HTML语言实在很难以理解，我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用CSS标签来美化网页呢？我设计了一个任务：用CSS标签来美化标题。通过讲解让学生理解标签h2可以代表标题。然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用CSS标签美化标题的过程。通过这样的处理，将学生难以理解接受的HTML语言简化。考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。5