初中信息技术教科版八年级上册第十三课 使用CSS样式美化网页教案

使用 CSS 样式美化网页

教材分析

本节课是教育科学出版社《初中信息技术》八年级上册第三单元第十三课《使用 CSS 样式美化网页》的内容。在制作网页的过程中，往往要求整个网站的文本格式、表格样式协调统一，而使用 CSS 样式不但可以简化重复性操作，提高网页制作效率，还可以美化网页、统一风格。本课讲学习利用 css 样式美化网站。

学情分析

完成主页的规划、布局、建立，丰富网页后，学生已经对网站的设计与制作方法基本掌握，接着学习美化网页，向学生展示所见即所得的操作效果，能大大增强学生的操作兴趣，教学效果预见良好。

教学目标

知识与技能目标

（1）理解什么是 CSS 样式表；

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

过程与方法目标

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

情感态度与价值观目标

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

教学重点

CSS 样式设置的方法。

教学难点

运用 CSS 标签美化网页

教学方法

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

教学过程

（一）情境导入：（5 分钟）

师：这节课我们学习课本的第八课定义 CSS 样式。那么什么是 CSS 呢？

生：看课本回答问题。

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

设计意图：激发了学习的兴趣，产生学习的欲望

（二）新课讲授：（20 分钟）

一、用 CSS 轻松美化文字

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

打开网页文件 tuijian1.html

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，图片浮动在文字的右边。单击[应用]

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

7、用 CSS 标签美化标题

师：下面，我们学习用 CSS 标签美化标题

教师讲解：标签的含义：

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

板书设计

第十三课 使用 CSS 样式美化网页

1、创建 CSS 样式

2、应用 CSS 样式

本课小结

总结本节课的知识点，帮助学生梳理本节课的内容。

课堂练习

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

教学反思

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

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