第18课 美化网页方法多 课件 2025-2026学年人教版初中信息科技七年级全一册

第18课　美化网页方法多 第四单元　校园活动线上展 义务教育信息科技课程资源　七年级 义务教育信息科技课程资源 2 1 2 3 知道用HTML代码简单美化网页的操作方法。 学习目标 知道串联样式表的作用，初步学会用它美化网页。 能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。 第18课　学习目标 义务教育信息科技课程资源 3 前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？ 问题情境 第18课　课堂导入 义务教育信息科技课程资源 4 一 用HTML代码美化网页 二 用CSS美化网页 学习内容 第18课　学习内容 义务教育信息科技课程资源 5 请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置字体、设置背景等，然后交流讨论这种方式是否便捷，美化效果好不好。 第18课　学习内容 一、用HTML代码美化网页 义务教育信息科技课程资源 6 标　　签 属　　性 值 作　　用 <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代码美化网页 学生笔记 义务教育信息科技课程资源 7 学生作业一：用HTML标签美化网页文字大小、背景颜色 修改前 修改后 📌 目标：在不删除现有内容的前提下，仅使用HTML标签（如 <font>、<body bgcolor>、<center> 等）完成以下效果： 义务教育信息科技课程资源 义务教育信息科技课程资源 学生作业一：用HTML标签美化网页文字大小、背景颜色 📌 参考代码 义务教育信息科技课程资源 学生作业一：用HTML标签美化网页文字大小、背景颜色 其他修改效果：例如color=”red” color=”brown” 不要忘记下标签 义务教育信息科技课程资源 用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。 CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。 第18课　学习内容 二、用CSS美化网页 学生笔记 义务教育信息科技课程资源 12 如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。 第18课　学习内容 二、用CSS美化网页 义务教育信息科技课程资源 13 写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。 第18课　学习内容 二、用CSS美化网页 义务教育信息科技课程资源 14 CSS的基本语法结构（选择器、声明） 选择器 （需要改变样式的HTML元素） 声明开始大括号 声明结束大括号 声明 （属性和值被: 分开，以; 结束） 属性 属性值 p { } font-size: 14px; color : #606266; 第18课　学习内容 二、用CSS美化网页 义务教育信息科技课程资源 15 内部样式 <head> <style> body{ background-color: #191970; } h1{ text-align: center; } …… </style> </head> style标签 CSS 第18课　学习内容 二、用CSS美化网页 学生笔记 义务教育信息科技课程资源 16 美化维度 HTML 能实现的效果 CSS 能实现的效果 文字样式 仅修改颜色、简单字号（部分标签） 颜色、字号、字体、行距、间距、阴影、渐变等 图片 / 元素样式 宽、高、边框（基础） 精准宽高、圆角、阴影、透明度、旋转、悬浮效果等 页面布局 无布局能力，仅靠标签默认换行排列 灵活实现分栏、居中、侧边栏、网格布局等（适配网站主页 / 子页的不同布局需求） 背景样式 仅部分标签可设置单一背景色 背景色、背景图片、背景平铺 / 拉伸、渐变背景等 响应式适配 完全无法实现 可适配电脑、平板、手机等不同设备的显示效果 HTML 的美化仅能实现基础、单一的视觉调整，无法满足精致的网页设计需求；CSS 则能实现全方位、精细化、个性化的美化，二者的能力差距如下表： 义务教育信息科技课程资源 维护与拓展：繁琐低效 vs 简洁高效 HTML 美化：若要修改网站中多个相同元素的样式（如把所有子页的标题颜色从红色改成蓝色），需要逐个找到对应的 HTML 标签修改属性，页面越多，工作量越大，极易遗漏，完全不适合本课中 “厦门文旅（多网页）” 的场景。 CSS 美化：样式是集中定义的，只需修改 CSS 中的一行代码，网站中所有应用该样式的元素会自动更新；且 CSS 可制作外部样式表文件（.css），一个样式文件可作用于网站的所有网页，实现全站样式统一修改，适配网站制作的规模化需求。 义务教育信息科技课程资源 1．请参考右侧代码，尝试用CSS对厦门文旅网页文本、标题、背景等进行美化。 2．观察修改后网页显示效果的变化。 3．交流讨论使用 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美化网页 义务教育信息科技课程资源 19 属　　性 值 作　　用 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美化网页 义务教育信息科技课程资源 20 学生作业二：使用CSS样式 义务教育信息科技课程资源 学生作业二：使用CSS样式美化网页 1.在<head>……</head>里 2.添加<style>……</style> 3.添加1-3个CSS样式 在body标签中直接使用就可 义务教育信息科技课程资源 学生作业二：使用CSS样式效果 义务教育信息科技课程资源 将最终代码保存为一个HTML文件，命名为 厦门美食_你的姓名.html。 2.在浏览器中打开页面，截图（包含整个浏览器窗口）并提交。 📤 提交要求 义务教育信息科技课程资源 <head> <style> body{ background: linear-gradient(180deg, rgba(122,208,237,1) 0%, rgba(235,241,255,1) 53%); } h2{ font-family:黑体; font-size:50px; color:#DB7093; } </style> </head> <body> <center> <h2>科技节体验项目——</h2> <h1> 机器狗</h1> <p></p><p></p> <img src="images/jiqigou.jpg" width="348" > </center> <p>机器狗是一种模拟真实犬只形态和部分行为的机器设备，能够实现行走、坐下、翻滚等多种动作。机器狗的出现为人工智能和机器人研究提 供了新的想象空间，也让更多人得以近距离接触机器人技术。&nbsp;</p> <p></p> <center> <button class="button" > <<< 主页 >>> </button> </center> </body> 定义CSS 使用CSS 义务教育信息科技课程资源 尝试用在线人工智能模型，美化已有的HTML代码。 第18课　拓展与提升 只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。 义务教育信息科技课程资源 26 三、AI+美化网页 https://www.scnet.cn/ui/chatbot/ 义务教育信息科技课程资源 义务教育信息科技课程资源 三、AI+美化网页 *以下提示语中方括号里【】的内容请替换为个人要求 1.生成网页提示语： 请生成一个介绍【科技工具名称】的网页，该工具具备【功能简述】。 2.生成图片提示语： 请生成一张图片，风格是【......】，画面内容是【......】。 3.修改代码提示语： 【代码语句】，请修改这段代码，要求【......】。 4.美化代码提示语： 方法1（快速美化）：【复制全部代码至AI中】，请快速美化这个网页。 方法2（逐步美化）：【代码语句】，请美化这段代码，要求是【将网页背景色改为淡蓝色】。   义务教育信息科技课程资源 义务教育信息科技课程资源 $