第8课网页的数据呈现教学设计
课题
网页的数据呈现
教学目标
1.通过体验CSS设置的效果，认识样式表，了解样式表的作用。
2.通过网页中添加样式，掌握样式表的基本结构。
3.能理解使用CSS降低网页代码耦合度所带来的便利性。
重难点
教学重点：通过网页中添加样式，掌握样式表的基本结构。
教学难点：理解使用CSS降低网页代码耦合度所带来的便利性。
课前准备
1.网络教室。
2.在线应用相关软件或平台。
课时安排
1课时
教师活动
学生活动
设计意图
引
入
话题引入：你知道网页中的文字效果是如何实现的?你知道网页中的文字效果是如何实现的？
参与讨论
通过话题引导，激发学生学习兴趣，引出本课课题。
二、新授
一、网页数据呈现方式
(一)你知道网页数据呈现方式有哪些？
文本、图像、链接、表格、列表、图表和图形、视频和音频、动画和交互效果、表单以及其他媒体和插件等。
二、CSS样式
(一)你知道什么是CSS?
CSS全称为层叠样式表(CascadingSty1eSheets),也是一种标识语言，CSS样式可以方便地设置网页效果。
(-)CSS的样式
字号、字体、颜、位置以及图片的大小……
(≡)CSS的优点
1、样式与内容分离
2、网页加载速度快
3、一致的样式设计
4、容易维护和更新
5、响应式设计
6、可扩展性
说说网页数据的呈现方式
了解CSS
了解网页数据的呈
现方式
了解CSS
（四）教师演示
教师演示添加样式表的网页效果。
活动一：修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。
三、样式表的基本结构
（一）什么是〈sty1e＞标签？
VSty1e＞标签是HTM1中用于定义内部样式表的标签。它位于Vhead＞标签内部，用于在网页中直接指定元素的样式.
（二）VSty1e＞标签的基本语法：
学习
完成活动
学习
＜sty1e＞标签及语法
实例学习
学以致用
了解＜sty1e＞标签及语法
进一步了解VStyIe＞
标签
学以致用
<head>
<sty1e>
∕*CSS样式规则*/
<∕sty1e>
<∕head>
（三）VStyIe＞实例展示
<!DOCTYPEhtm1>
<htm1>
<head>
<sty1e>
h1{
cocss简单网页代码1or:b1ue;
font-size:24px;
}
P(
co1or:red;
font-size:16px;
}
<∕sty1e>
<∕head>
<body>
<h1>He11o,wor1d!<∕h1>
<p>Thisisaparagraph.<∕p>
<∕body>
<∕htm1>
活动二：用CSS样式表美化网页。
完成活动
三课堂练习
随堂练习
1.用CSS样式表美化网页。
2.尝试使用图像标签，在网页里加入一张平铺模式的背景图。
完成随堂
练习
以练习巩固本节课的内容。
即课堂小结
一、网页数据呈现的方式
二、CSS
三、样式表的基本结构

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