八年级信息技术教案
                                     
    2018 年 12 月 20  日  星期 四
课  题
使用CSS样式美化网页
章节
第三章第13节
教材分析
本节课是教育科学出版社《初中信息技术》八年级上册第三单元第十三课《使用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规则定义]
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语言简化。
考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。