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

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