第18课 美化网页方法多 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-09
|
17页
|
80人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.52 MB |
| 发布时间 | 2026-05-09 |
| 更新时间 | 2026-05-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2026-05-09 |
| 下载链接 | https://m.zxxk.com/soft/57767311.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第18课 美化网页方法多
第四单元 校园活动线上展
义务教育信息科技课程资源 七年级
义务教育信息科技课程资源
1
1
2
3
知道用HTML代码简单美化网页的操作方法。
学习目标
知道串联样式表的作用，初步学会用它美化网页。
能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
第18课 学习目标
义务教育信息科技课程资源
2
如果这是科技节的宣传页，你愿意多看几眼吗？为什么？
问题情境
第18课 课堂导入
义务教育信息科技课程资源
3
一 用HTML代码美化网页
二 用CSS美化网页
学习内容
第18课 学习内容
义务教育信息科技课程资源
4
请大家仔细观察这两段代码，它们有什么不同？美化后的代码多了哪些内容？
第18课 学习内容
一、用HTML代码美化网页
义务教育信息科技课程资源
5
标 签 属 性 值 作 用
<font> color #RRGGBB 规定文本颜色，采用十六进制表示颜色值，如<font color="#FF0000">
face font_family 规定文本的字体，如<font face="楷体">
size number 规定文本的大小，如<font size="6">
<body> bgcolor #RRGGBB 规定背景的颜色，采用十六进制表示颜色值，如<body bgcolor="#0000FF">
<p> align left 左对齐文本，如<p align="left">
right 右对齐文本，如<p align="right">
center 居中对齐文本，如<p align="center">
左表是常用的控制网页显示效果的代码。
第18课 学习内容
一、用HTML代码美化网页
义务教育信息科技课程资源
6
美化大挑战：以小组为单位，每组抽取一张“美化任务卡”按照要求在规定时间用HTML标签完成美化。
第18课 学习内容
一、用HTML代码美化网页
义务教育信息科技课程资源
7
第18课 学习内容
一、用HTML代码美化网页
思考讨论：刚才大家用HTML属性美化了网页，感觉怎么样？如果想把下方所有段落的字体颜色从红色改成蓝色，需要修改多少处代码？”
义务教育信息科技课程资源
8
用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。
CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。
第18课 学习内容
二、用CSS美化网页
<style>
p{
color:blue;
}
</style>
义务教育信息科技课程资源
9
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
第18课 学习内容
二、用CSS美化网页
义务教育信息科技课程资源
10
写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。
第18课 学习内容
二、用CSS美化网页
义务教育信息科技课程资源
11
CSS的基本语法结构（选择器、声明）
选择器
（需要改变样式的HTML元素）
声明开始大括号
声明结束大括号
声明
（属性和值被: 分开，以; 结束）
属性
属性值
p {
}
font-size: 14px;
color : #606266;
第18课 学习内容
二、用CSS美化网页
义务教育信息科技课程资源
12
内部样式
<head>
<style>
body{
background-color: #191970;
}
h1{
text-align: center;
}
……
</style>
</head>
style标签
CSS
第18课 学习内容
二、用CSS美化网页
义务教育信息科技课程资源
13
属 性 值 作 用
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;}
第18课 学习内容
二、用CSS美化网页
义务教育信息科技课程资源
14
1．CSS语法拼图：完成下发的网页文件。
2.请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。
3．观察修改后网页显示效果的变化。
4．交流讨论使用 CSS美化网页的心得。
第18课 学习内容
<head>
<title>校园科技节</title>
<style>
body{
background-color:#87CEFA;
}
h2{
font-family:黑体;
font-size:50px;
color:#DB7093;
}
h1{
font-family:黑体;
font-size:40px;
color:#DB7093;
}
p{
font-family:隶书;
font-size:24px;
text-indent:2em;
}
</style>
</head>
二、用CSS美化网页
义务教育信息科技课程资源
15
尝试用在线人工智能模型，美化已有的HTML代码。
豆包：https://www.doubao.com/chat/?from_logout=1
第18课 拓展与提升
只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。
义务教育信息科技课程资源
16
第18课 课堂总结
1．用HTML代码可以美化网页。
2． CSS可以让网页呈现出效果一致的美化风格。
3．使用CSS美化网页，效果更好。
义务教育信息科技课程资源
17
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。