初中信息技术冀教版八年级全册第八课 定义CSS样式教案

这是一份初中信息技术冀教版八年级全册第八课 定义CSS样式教案，共5页。教案主要包含了概述，教学目标分析，学习者特征分析，教学策略选择与设计，教学资源与工具设计，教学过程，教学评价设计，帮助和总结等内容，欢迎下载使用。

一、概述
《定义CSS样式》是河北教育出版社出版的信息技术第八课的内容。CSS样式表涉及到语言代码，让学生能够理解并会运用CSS标签来美化网页，然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。
二、教学目标分析
1．知识和技能目标
（1）理解什么是CSS样式表；
（2）掌握运用CSS进行样式设置的方法
2．过程和方法目标
通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。
3．情感态度和价值目标
培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣。
教学重点：CSS 样式设置的方法。
教学难点：运用CSS标签美化网页
三、学习者特征分析
CSS样式表涉及到语言代码，作为初中七年级学生来讲，HTML语言实在很难以理解，我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用CSS标签来美化网页呢？我设计了一个任务：用CSS标签来美化标题。通过讲解让学生理解标签h2可以代表标题。然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用CSS标签美化标题的过程。通过这样的处理，将学生难以理解接受的HTML语言简化。
四、教学策略选择与设计
遵循“用任务驱动”的思路，努力将理论与实践相结合,让学生自主探究，提高学习技能的兴趣。根据学生的实际情况，创造性、实用性和新颖性的原则安排教学实例。
五、教学资源与工具设计
1、一台教师演示用计算机
2、学生多媒体计算机网络
3、教学软件
以“教师主导、学生主体”为指导思想，采用学生自主学习、合作学习的方式。以“任务驱动”与“问题解决”为主线，采取讲解法，演示法，练习法完成教学任务，从解决问题出发，是一个师生交流、学生亲历亲为、相互合作、感受创作成功成就感的过程。
六、教学过程
引入新课，认识CSS。
教师活动：导入：这节课我们学习课本的第八课定义CSS样式。那么什么是CSS呢？
CSS中文翻译成“层叠样式表”，是一种制作网页的新技术。成为网页设计必不可少的工具之一，在当今的网页制作中，几乎所有漂亮的网页都用了CSS。借助于CSS的强大功能，网页将在你丰富的想像力下千变万化。这节课我们就来初步领略CSS打造精彩的页面效果。
学生活动：学生激发了学习的兴趣，产生学习的欲望。
明确目标，自主探索。
教师活动：
一、用CSS轻松美化文字
我们知道，在网页中字体的好看与否是直接关系到页面的整体效果，因此对文字的控制就显得很重要。下面我们可以用CSS轻松美化文字打开网页文件tuijian1.htm。
学生活动：学生观察，并学习操作方法。
教师活动：
1.教师演示操作：创建CSS样式
方法1：“文本——CSS样式——新建”，打开“新建CSS规则”对话框
方法2：“窗口——CSS样式”，打开CSS面板，单击“全部”标签，单击“新建CSS规则”按钮，打开“新建CSS规则”对话框
2、教师讲解对话框的选项含义
【类】是一种新的样式表示符，可以任意命名。它是将CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需选择【标签】和【高级】方式。
【标签】是将页面源文件中的html标记重定义。用标签定义的CSS样式设置完毕后，该CSS样式马上生效。
【高级】一般用于超链接的美化。
在该对话框的下方选区里，可以选择CSS样式表的引用方式。那么这两个选项有什么区别呢？选择【新建样式表文件】表示对CSS样式表的引用是外部文件方式，我们选择【仅对该文档】。在该对话框上有8种分类，其中，【类型】分类是对文字属性的设置。
【背景】分类是对背景属性的设置。此处，我们选择类，仅对该文档，起名为textcss。
3、应用CSS
选中文本，在属性面板的样式框中选择刚定义的样式。
4、学生自学并探索CSS的规则定义
完成任务一。任务二选做
学生活动：学生学习理解各种选项的功能，学生自学并自主探究，动手操作体会并掌握操作方法，能对文本段落排版。学生尝试操作。
5、编辑CSS样式
方法：双击CSS面板的新建的样式textcss,打开[CSS规则定义]
6、CSS实现图文混排效果
我们之前在网页中插入图片的时候，是利用了表格来实现定位的。其实，我们完全也可以利用CSS来轻松实现图文混排效果。那么怎么实现的呢？实际上是用了[方框]属性。[浮动]右对齐；[边界-左]2字体高。这个设置的含义是：定义图片的左边距为2em，图片浮动在文字的右边。单击[应用]。
7、用CSS标签美化标题
下面，我们学习用CSS标签美化标题
教师讲解：标签的含义：
Tuijian1.htm中光标定位在标题，在标签位置可以看到有一个标签（h2），选中(h2),则整个标题都选中。也就是标签h2代表了整个标题。当我们对标签h2做CSS设置的时候，标题就会应用此样式。此时，我们选择新建样式表文件，就会将此CSS保存成一个文件，以便在其它网页中应用。
一、完善内容页面，展示要完成的任务。
1.插入一条水平线
（1）定位光标
（2）“插入——HTML——水平线”
（3）利用属性面板设置，美化水平线
2、插入文章更新的日期
（1）定位光标
（2）“插入——日期”，选中“储存时自动更新”复选框，每次保存时页面时间会自动更新。
学生活动：学生尝试操作，生尝试插入图片，并利用CSS的[方框]，实现图文混排，继续探究并完成标题文字的美化，生自学并操作。
实践探究，反馈巩固：提出问题：在美文推荐的文章页面中，都有一条水平线，那么我们能不能利用CSS样式的选择器类型中[标签]中的[hr]来统一美化各页面的水平线呢？
学生活动：学生自学并操作。小组长，评定小组成员作业完成情况。
七、教学评价设计
创建量规，向学生展示他们将被如何评价（来自教师和小组其他成员的评价）。另外，可以创建一个自我评价表，这样学生可以用它对自己的学习进行评价。
八、帮助和总结
CSS样式表涉及到语言代码，作为初中七年级学生来讲，HTML语言实在很难以理解，我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用CSS标签来美化网页呢？我设计了一个任务：用CSS标签来美化标题。通过讲解让学生理解标签h2可以代表标题。然后通过演示操作过程，让学生体验如何用CSS标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用CSS标签美化标题的过程。通过这样的处理，将学生难以理解接受的HTML语言简化。
考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。