第18课美化网页方法多 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-19
|
18页
|
110人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 4.53 MB |
| 发布时间 | 2026-05-19 |
| 更新时间 | 2026-05-19 |
| 作者 | 安延玲 |
| 品牌系列 | - |
| 审核时间 | 2026-05-19 |
| 下载链接 | https://m.zxxk.com/soft/57942532.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
摘要：
该初中信息科技课件聚焦网页美化方法，核心知识点涵盖HTML代码、CSS及在线工具美化网页。课堂通过“如何用HTML/CSS/在线工具美化网页”三个问题导入，以活动一HTML表格美化、活动二CSS样式设计、活动三在线工具（含AI）应用为学习支架，构建从基础到工具化的递进学习脉络。
其亮点在于任务驱动与实践结合，通过HTML标签表、CSS语法示例（如p{font-size:14px;color:blue;}）及AI生成渐变背景任务，培养计算思维和数字化学习与创新能力。学生在实践中掌握美化技能，教师可依托清晰任务和实例提升教学效果。
内容正文：
第四单元：校园活动线上展
第18课 美化网页方法多
活动一：
用HTML代码美化表格
知识探索：HTML常用的美化标签表
标 签 属 性 值 作 用
<font> color #RRGGBB 规定文本颜色，采用十六进制表示颜色值，
face font_family 规定文本的字体，如<font face="楷体">
size number 规定文本的大小，如<font size="6">
<body> bgcolor #RRGGBB 规定背景的颜色，采用十六进制表示颜色值，
<p> align left 左对齐文本，如<p align="left">
right 右对齐文本，如<p align="right">
center 居中对齐文本，如<p align="center">
基本公式：<标签 属性="值">......</标签>
如<font color="#FF0000">
如<body bgcolor="#0000FF">
活动二：
用CSS美化表格
CSS（cascading style sheets） 生活中也经常被称为级联样式表或层叠样式表。
HTML = 建筑师（决定网页结构）+ 初级装修工（简单的美化）
CSS = 专业装潢设计师（高级美化）
搭建网页的结构框架
搭建网页的装饰框架
什么位置该放什么内容？
内容该用什么样式呈现？
选择器（①谁的样式要改变？）+声明（②改成什么样子？）
知识探索：CSS语法结构（选择器+声明）
选择器
（告诉CSS你要改谁的样式？比如段落(p)）
声明开始大括号
声明结束大括号
声明
（告诉CSS你要改成什么样子？
比如color:blue;是让标题变蓝）
p {
}
font-size: 14px;
color
blue
:
;
（属性和值被: 分开，以; 结束）
基本公式：选择器 {声明 ;}
知识探索：CSS语法结构（选择器、声明）
<style>
body{background-color:#F0FFFF;}
h1{text-align:center;font-size:48px;color:#0760ED}
h2{text-align:center;font-size:36px;color:#E9B701}
p{color:#10100F;font-size:24px;}
</style>
网页的CSS样式表可以放在<style>和</style>之间。
把这段代码拷贝到html的<head>和</head>中间试试效果
任务2：做一做
请参考代码，尝试修改CSS对科技节网页文本、标题、背景等进行美化
活动三：
如何用在线创新工具美化网页
任务3：用人工智能辅助美化网页
请同学们选择一个在线人工智能模型，让它根据需要求美化科技节活动项目网页，生成渐变背景
HTML代码
特点：使用简单
适用：美化需求较少
CSS代码：
特点：应用方便，样式固定
适用：美化需求较多
借助在线人工智能生成CSS代码
特点：高效，形式多样
使用：美化效率高
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。