第18课 美化网页方法多 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-19
|
21页
|
115人阅读
|
1人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2026-2027 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 2.70 MB |
| 发布时间 | 2026-05-19 |
| 更新时间 | 2026-05-19 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2026-05-19 |
| 下载链接 | https://m.zxxk.com/soft/57936848.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
摘要：
该初中信息科技课件聚焦网页美化方法，涵盖HTML代码美化与CSS美化。以“毛坯房装修”比喻导入，衔接前期HTML结构知识，通过网页效果对比搭建学习支架，逐步讲解HTML标签属性及CSS语法与应用。
其亮点在于采用生活化比喻构建知识联系，结合任务驱动实践，如任务二让学生修改CSS代码体验高效美化，培养计算思维与数字化学习能力。对比HTML与CSS局限与优势，增强信息意识，助力学生提升动手能力，教师可高效组织教学。
内容正文：
第18课
美化网页方法多
1
前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“毛坯房”的结构，接下来该怎样将“毛坯房”“装修”得漂亮时尚？
导入
2
学习内容
01
02
用HTML代码美化网页
用CSS美化网页
在开始探秘之前，我想请大家先做一个大胆的猜想：有同学说"文字和图片"，有同学说"代码决定样式"……大家的直觉都很敏锐！
那我们今天就通过实验来验证一下，看看网页背后到底藏着什么秘密。
3
网页效果对比
对比网页美化的部分都有什么变化？
字体
字号
背景
字体颜色
对齐方式
HTML美化
CSS美化
4
01
用HTML代码美化网页
学习内容
观察左侧HTML代码，哪条语句是设置背景颜色的？
<body bgcolor="#87CEFA">
用HTML代码美化网页
标签 属性 值 作 用
<body> bgcolor #RRGGBB 设置背景颜色，采用十六进制表示颜色值
如<body bgcolor="#0000FF">
6
观察左侧HTML代码，哪条语句是可以设置字体、字号和字体颜色的？
<font size="7" face='黑体'color='#8A2BE2'>
标签 属性 值 作 用
<font> color #RRGGBB 十六进制规定文本颜色，如<font color="#FF0000">
face 字体系列名称 规定文本的字体，如<font face="楷体">
size 字体大小 规定文本的大小，如<font size="6">
请问body的结束标签是？head的结束标签呢？
7
观察左侧HTML代码，哪条语句是可以对齐方式的？
标 签 作 用
<center></center> 用于将内容居中对齐,已过时并不常用
请问body的结束标签是？head的结束标签呢？
8
HTML美化的常用标签及属性
标签 属性 值 作 用
<font>
</font> color #RRGGBB 设置文本颜色，采用十六进制表示颜色值，
如<font color="#FF0000">
face font_family 规定文本的字体，如<font face="楷体">
size number 规定文本的大小，如<font size="6">
<body>
</body> bgcolor #RRGGBB 设置背景颜色，采用十六进制表示颜色值，
如<body bgcolor="#0000FF">
<p>
</p> align left 左对齐文本，如<p align="left">
right 右对齐文本，如<p align="right">
center 居中对齐文本，如<p align="center">
请问body的结束标签是？head的结束标签呢？
9
任务要求：
1、①设置网页背景颜色为#87CEFA
2、②③实现内容居中显示。
3、二级标题字号设置为7号，字体为楷体，颜色为#8A2BE2
4、一级标题字号设置为6号，字体为黑体，颜色为#A52A2A
任 务 一
请问body的结束标签是？head的结束标签呢？
10
1.邀请同学分享美化后的网页成果
2.思考：
“修改文字颜色需要几个步骤？”
“如果要统一全网页文字颜色，需要修改多少次？”
分享
11
01
用HTML代码美化网页
学习内容
网页=一栋房子
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
用CSS美化网页
刚刚我们说的一切一切，都要归功于我们今天学习的新内容：HTML！
那么什么是HTML呢？其实它是一种代码，我们接下来就看一看他长什么样子？
13
观察CSS代码，分析并找出可以
进行网页美化的部分？
14
color : #606266 ;
选择器
（需要改变的HTML元素）
声明开始大括号
声明结束大括号
声明
（属性和值被: 分开，以; 结束）
属性
属性值
p {
}
font-size: 14px ;
CSS的基本语法结构（选择器、声明）
CSS语句由选择器和声明两部分构成，选择器指向需要改变样式的网页元素，一个选择器可以对应多条声明，每条声明由属性和值组成，属性和值之间用冒号分开，以分号结束，所有声明用一对大括号括起来。
15
style标签
CSS
CSS的内部样式
网页内的CSS可以放在<style></style>之间。
观察并猜测CSS代码部分具体的美化内容是什么？
<head>
<style>
body{
background-color: #191970;
}
h1{
font-family:楷体；
font-size:40px;
color:#f8645a;
}
……
</style>
</head>
16
CSS属性 值 作 用
color #RRGGBB 设置文本颜色，采用十六进制表示颜色值，
如{color:#FF0000;}
font-family 字体系列名称 设置文本的字体，如{font-family:楷体;}
font-size 长度值px/em 设置文本的大小，如{font-size:6px;}
background-color #RRGGBB 设置背景颜色，采用十六进制表示颜色值，
如{background-color:#0000FF;}
text-align left 左对齐文本，如{text-align:left;}
right 右对齐文本，如{text-align:right;}
center 居中对齐文本，如{text-align:center;}
text-indent 长度值px/em 设置段落中首行文本的缩进，如{text-indent:2em;}
17
任务要求（CSS美化）：
用《记事本》软件打开3D打印网页，输入修改代码，查看效果。
任务中待修改代码部分：
❓删除后填写代码，只需要更改?部分，一个？代表一行代码
任 务 二
<head>
<title>校园科技节</title>
<style>
body{
background-color:#87CEFA;
}
h2{
font-family:黑体;
font-size:50px;
color:#DB7093;
}
h1{
font-family:黑体;
font-size:40px;
color:#A52A2A;
}
p{
font-family:隶书;
font-size:24px;
}
</style>
</head>
18
用HTML
美化网页
1
用CSS
美化网页
2
可以在一定程度上美化网页，比如通过字体标签、颜色属性等来调整文本的显示，但美化往往有限且繁琐。
开发者可以实现统一的样式更改，而不需要对每个元素单独设置样式。使得样式的调整更加灵活、高效且易于维护。
网页美化的两种方式
19
课堂总结
课后总结
1．用HTML代码可以美化网页。
2．CSS可以让网页呈现出效果一致的美化风格。
3．使用CSS美化网页，效果更好。
$
资源预览图
1
2
3
4
5
6
相关资源
示范课
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。