第18课 美化网页方法多 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-04-20
|
22页
|
258人阅读
|
1人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2026-2027 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 6.77 MB |
| 发布时间 | 2026-04-20 |
| 更新时间 | 2026-04-20 |
| 作者 | 杨咩咩咩、 |
| 品牌系列 | - |
| 审核时间 | 2026-04-20 |
| 下载链接 | https://m.zxxk.com/soft/57437586.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第18课
美化网页方法多
1
01
02
知道用HTML代码简单美化网页的操作方法。
知道串联样式表的作用，初步学会用它美化网页。
学习目标
03
能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？
导 入
学习内容
01
02
用HTML代码美化网页
用CSS美化网页
网页效果对比
对比网页美化的部分都有什么变化？
字体
字号
背景
字体颜色
对齐方式
HTML美化
CSS美化
5
用HTML
美化网页
1
用CSS
美化网页
2
可以在一定程度上美化网页，比如通过字体标签、颜色属性等来调整文本的显示，但美化往往有限且繁琐。
开发者可以实现统一的样式更改，而不需要对每个元素单独设置样式。使得样式的调整更加灵活、高效且易于维护。
网页美化的两种方式
6
学习内容
01
用HTML代码美化网页
观察左侧HTML代码，哪条语句是设置背景颜色的？
标签 属性 值 作 用
<body> bgcolor #RRGGBB 设置背景颜色，采用十六进制表示颜色值
如<body bgcolor="#0000FF">
<body bgcolor="#87CEFA">
用HTML代码美化网页
是 HTML 中的一个特殊字符实体，表示“不间断空格”
8
✿HTML颜色用一个十六进制符号来定义，这个符号由红色(R)、绿色(G)和蓝色(B)的值组成(RGB)。
观察左侧HTML代码，哪条语句是可以设置字体、字号和字体颜色的？
<font size="7" face='黑体'color='#8A2BE2'>
标签 属性 值 作 用
<font> color #RRGGBB 十六进制规定文本颜色，如<font color="#FF0000">
face 字体系列名称 规定文本的字体，如<font face="楷体">
size 字体大小 规定文本的大小，如<font size="6">
是 HTML 中的一个特殊字符实体，表示“不间断空格”
10
观察左侧HTML代码，哪条语句是可以对齐方式的？
标 签 作 用
<center></center> 用于将内容居中对齐,已过时并不常用
是 HTML 中的一个特殊字符实体，表示“不间断空格”
11
HTML中的一个特殊字符实体，表示“不间断空格”。它在网页排版中非常有用，尤其是在需要控制空格显示和格式化文本时。
猜猜“ ”的作用是什么？
12
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">
任务要求：
1、①设置网页背景颜色为#87CEFA
2、②③实现内容居中显示。
3、二级标题字号设置为7号，字体为楷体，颜色为#8A2BE2
4、一级标题字号设置为6号，字体为黑体，颜色为#A52A2A
HTML注释的语法是<!--和-->，它们用于包裹注释内容
任 务 一
14
学习内容
02
用CSS美化网页
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
用CSS美化网页
16
观察CSS代码，分析并找出可以
进行网页美化的部分？
17
color : #606266 ;
选择器
（需要改变的HTML元素）
声明开始大括号
声明结束大括号
声明
（属性和值被: 分开，以; 结束）
属性
属性值
p {
}
font-size: 14px ;
CSS的基本语法结构（选择器、声明）
CSS语句由选择器和声明两部分构成，选择器指向需要改变样式的网页元素，一个选择器可以对应多条声明，每条声明由属性和值组成，属性和值之间用冒号分开，以分号结束，所有声明用一对大括号括起来。
18
<head>
<style>
body{
background-color: #191970;
}
h1{
font-family:楷体；
font-size:40px;
color:#f8645a;
}
……
</style>
</head>
style标签
CSS
CSS的内部样式
网页内的CSS可以放在<style></style>之间。
观察并猜测CSS代码部分具体的美化内容是什么？
19
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;}
20
任务要求（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>
21
用HTML代码可以美化网页。
CSS可以让网页呈现出效果一致的美化风格。
使用CSS美化网页，效果更好。
课堂总结
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。