初中浙教版第八课 丰富的动画补间动画教学设计

这是一份初中浙教版第八课 丰富的动画补间动画教学设计，共5页。教案主要包含了教学目标，教学重点，教学难点，教学内容处理思路，教学过程等内容，欢迎下载使用。

一、教学目标
知识和技能目标
理解什么是 CSS 样式表。
掌握运用 CSS 进行样式设置的方法。
过程和方法目标
通过学习运用 CSS 样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。
情感态度和价值目标
培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力； 激发学生学习信息技术的兴趣。
二、教学重点
CSS 样式设置的方法。三、教学难点
运用 CSS 标签美化网页。四、教学内容处理思路
遵循 “ 用任务驱动 ” 的思路，努力将理论与实践相结合 , 让学生自主探究，提高学习技能的兴趣。根据学生的实际情况，创造性、实用性和新颖性的原则安排教学实例。
五、教学过程
教
学
教师活动
学生活动
程序
引入新课
认识CSS
导入：这节课我们学习课本的第八课定义 CSS 样式。那么什么是 CSS 呢？
CSS 中文翻译成“层叠样式表”，是一种制作网页的新技术。成为网页设计必不可少的工具之一，在当今的网页制作中，几乎所有漂亮的网页都用了 CSS 。借助于 CSS 的强大功能，网页将在你丰富的想像力下千变万化。这节课我们就来初步领略 CSS 打造精彩的页面效果。
学生激发了学习的兴趣，产生学习的欲望
明确目标
自主探索
一、用 CSS 轻松美化文字
我们知道，在网页中字体的好看与否是直接关系到页面的整体效果，因此对文字的控制就显得很重要。下面我们可以用 CSS 轻松美化文字
打开网页文件 tuijian1.htm
1、教师演示操作：创建 CSS 样式
方法 1 ：“文本 ——CSS 样式 —— 新建”，打开“新建
CSS 规则”对话框
方法 2 ：“窗口 ——CSS 样式”，打开 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、插入文章更新的日期
教学反思：
CSS 样式表涉及到语言代码，作为初中八年级学生来讲， HTML 语言实在很难以理解，我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎么让学生能够理解并会运用 CSS 标签来美化网页呢？我设计了一个任务：用 CSS 标签来美化标题。通过讲解让学生理解标签 h2 可以代表标题。然后通过演示操作过程，让学生体验如何用 CSS 标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用 CSS 标签美化标题的过程。通过这样的处理，将学生难以理解接受的 HTML 语言简化。
考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习， 使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。（ 1 ）定位光标
（ 2 ）“插入 —— 日期”，选中“储存时自动更新”复选框，每次保存时页面时间会自动更新
实践探究
反馈巩固
提出问题：在美文推荐的文章页面中，都有一条水平线， 那么我们能不能利用 CSS 样式的选择器类型中 [ 标
签 ] 中的 [hr] 来统一美化各页面的水平线呢？
学生自学并操作
小结
小组长，评定小组成员作业完成情况