资源简介

使用
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
语言简化。
考虑到学生的学习差异，学生可以通过使用教师提供的操作步骤向导学习，使每位学生都能很好的完成学习任务，提高了课堂教学效率，取得较好的教学效果。八年级信息技术教案
018年12月_20日星期四
课题
使用CSS样式美化网页
章节第三章第13节
本节课是教育科学出版社《
息技术》八年级上册第三单元第
课《使用CSS样式美化网页》的内容。在制作网页的过程中,往往要求
教材分析|整个网站的文本格式、表格样式协调统一,而使用CSS样式不但可以简
重复性操作,提髙网页制作效率,还可以美化网页、统一风格。本课讲
习利用css样式美化网
成主页的规划、布局、建立,丰富网页后,学生已经对网站的设讠
学情分析|与制作方法基本掌握,接着学习美化网页,向学生展示所见即所得的操作
效果,能大大增强学生的操作兴趣,教学效果预见良好
知识与
技能目
(1)理解
S样式表
(2)掌握
S进行样式
方法
标
教学
过程与
通过学习运用CSs样式表优化
作,让学生学习正确
方法目|合理运用技术,了解技术服务于内容的原
标
标
情感态
度与价|培养学生独立思考、动手实践的能力;培养学生自主探究性
值观协作性学习能力;激发学生学习信息技术的兴趣
目标
教学重点CSS样式设置的方法
教学难点运
标签美化网页
遵循“用任务驱动”的思路,努力将理论与实践相结合,让学生自主探究
教学方法|提高学习技能的兴趣。根据学生的实际情况,创造性、实用性和新颖性的
原则安排教学实例
第
共4
情境导
这节课我们学习课本的第八课定义CSS样式。那么什么是CSS呢
生:看课本回答问
师εCSS中文翻译成“层叠样式表”,是一种制作网页的新技术。成为
页设计必不
在
乎所有漂亮的网
都用了CSS。借助于CSS的强大功能,网页将在你丰富的想像力下千变
万化。这节课我们就来初步领略CSS打造精彩的页面效果
设计意图:激发了学习的兴趣,产生学习的欲望
教
)新课讲授:(20分
S轻松美化文字
学
师:我们知道,在网页中字体的好看与否是直接关系到页面的整体效
过
果,因此对文字的控制就显得很重要。下面我们可以用CSS轻松美化文字
打开网页文件
tunLan1.htn
程
教师演示操作:创建CSS样式
方法1:“文本——CSS样式一一新建”,打开“新建CSS规则”对话框
方法2:“窗口—-CSS样式”,打开CSS面板,单击“全部”标签,单
击“新建CSS规则”按钮,打开“新建CSS规则”对话框
C样式\层
全部正在
所有则
曰样式>
居性
4z+“x+
学生观察,并学习操作方法
教师讲解对话框的选项含义
类】是一种新的样式表示符,可以任意命名。它是将CSS样式应
用于选定的区域,若要在整个页面的相关区域应用CSS样式,则需选择
签】和【高级】方式
标签】是将页面源文件中的html标记重定义。用标签定义的CSS
样式设置完毕后,该CSS样式马上生效
高级】一般用于超链接的美
该对话框的下方选区里,可以选择CSS样式表的引用方式。那
这两个选项有什么区别呢?选择【新建样式表文件】表示对CSS样式表的
用是外部文件方式,我们选择【仅对该文档】。
对话框上有8种分类,其
第
共4

展开更多......

收起↑