CSS教学设计_其它课程_高中教育_教育专区。第八课 定义 CSS 样式 一、教学目标 1．知识和技能目标 （1）理解什么是 CSS 样式表； （2）掌握运用 CSS 进行样式设置的方法 2．过程和方法目标 通过学习运用 CSS 样式表优化网页制
第八课 定义 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 规则” 对线：“窗口——CSS 样式”，打开 CSS 面板，单击“全部”标 签，单击“新建 CSS 规则”按钮，打开“新建 CSS 规则”对线、教师讲解对话框的选项含义 【类】 是一种新的样式表示符， 可以任意命名。 它是将 CSS 学生学习理解各种选项 样式应用于选定的区域，若要在整个页面的相关区域应用 的功能 CSS 样式，则需选择【标签】和【高级】方式。 ? 【标签】是将页面源文件中的 html 标记重定义。用标签定 义的 CSS 样式设置完毕后，该 CSS 样式马上生效。 ? 【高级】一般用于超链接的美化。 ? 在该对话框的下方选区里，可以选择 CSS 样式表的引用方 式。那么这两个选项有什么区别呢？选择【新建样式表文 件】表示对 CSS 样式表的引用是外部文件方式，我们选择 【仅对该文档】 。 在该对线 种分类，其中， 【类型】分类是对文字属性的设置。 【背景】分类是对背景属性的设置。 此处，我们选择类，仅对该文档，起名为 textcss 3、应用 CSS 选中文本，在属性面板的样式框中选择刚定义的样式。 4、学生自学并探索 CSS 的规则定义 完成任务一。任务二选做 5、编辑 CSS 样式 学生自学并自主探究， 动 手操作体会并掌握操作 方法， 能对文本段落排版 ? 方法：双击 CSS 面板的新建的样式 textcss,打开[CSS 规则定义] 6、CSS 实现图文混排效果 学生尝试操作 我们之前在网页中插入图片的时候，是利用了表格来实现定位的。 其实，我们完全也可以利用 CSS 来轻松实现图文混排效果。那么怎 并利 么实现的呢？实际上是用了[方框]属性。 [浮动]右对齐； [边界-左]2 学生尝试插入图片， 字体高。这个设置的含义是：定义图片的左边距为 2em，图片浮动 用 CSS 的[方框]，实现 图文混排 在文字的右边。单击[应用] 7、用 CSS 标签美化标题 下面，我们学习用 CSS 标签美化标题 教师讲解：标签的含义： 学生继续探究并完成标 题文字的美化 Tuijian1.htm 中光标定位在标题， 在标签位置可以看到有一个标签 （h2），选中(h2),则整个标题都选中。也就是标签 h2 代表了整个 标题。 当我们对标签 h2 做 CSS 设置的时候， 标题就会应用此样式。 此时，我们选择新建样式表文件，就会将此 CSS 保存成一个文件， 以便在其它网页中应用。 二、 完善内容页面 展示要完成的任务 1、 插入一条水平线）“插入——HTML——水平线” 学生自学并操作 （3）利用属性面板设置，美化水平线、插入文章更新的日期 （1）定位光标 （2）“插入——日期”，选中“储存时自动更新”复选框，每次保 存时页面时间会自动更新 实践探究 反馈巩固 小结 提出问题：在美文推荐的文章页面中，都有一条水平线，那么我们 学生自学并操作 能不能利用 CSS 样式的选择器类型中[标签]中的[hr]来统一美化各 页面的水平线呢？ 小组长， 评定小组成员作 业完成情况 教学反思： CSS 样式表涉及到语言代码，作为初中八年级学生来讲，HTML 语言实在很难以理解， 我们又没有太多的时间去学习这些语言。很多学生在学习的过程中会产生畏难心理。那么怎 么让学生能够理解并会运用 CSS 标签来美化网页呢？我设计了一个任务： CSS 标签来美化 用 标题。通过讲解让学生理解标签 h2 可以代表标题。然后通过演示操作过程，让学生体验如何 用 CSS 标签来美化标题。其后，学生可以通过参看操作步骤提示的方法，来亲自尝试用 CSS 标签美化标题的过程。通过这样的处理，将学生难以理解接受的 HTML 语言简化。 考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生 都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。
