桂科版2024 七下信息科技 主题一任务三 美化网页方法多 课件

(共13张PPT)
Cloud
七年级下册 主题一 文化遗产线上展
任务三 美化网页方法多
情境导入
壮壮把设计好的“三月三”宣传网站的主页分享给小伙伴们，征集网页美化意见。大家对网页的效果各抒己见，壮壮应接不暇。
我们上节课制作的网页也需要美化，有没有什么美化网页又快又好的方法呢？
导入
上网浏览一些设计比较成熟的网站，感受不同主题的网页是如何通过色彩搭配和版面设计来增强视觉效果和用户体验的。结合你自己设计的网页作品，想一想，网站的美化可以从哪些方面入手？
思考
思考
XXXX
某一网站主页美化前后的代码变化如书本P20-22的表1-3-1所示，请仔细观察并对比内容，并回答以下问题：
1. 该网页美化前后的代码有何不同？请将不同之处标出来，把你发现的新标签写下来。
2. 打开美化后的网页文件“首页 _ 五色糯米饭简介 .html”，试着把你发现的新标签和网页呈现效果进行匹配，写下你对新标签作用的猜想。查找相关资料或修改代码调试效果，验证你的猜想。
探究
XXXX
在网页设计中，字体设置和色彩搭配占据着举足轻重的地位。根据你自己的作品情况，制订网站美化方案。
马上行动
修改文字字体、颜色、大小
找到代码中的标签 ……，根据实际需求修改对应参数。

任意文字

字体
颜色
大小
使用HTML代码美化网页
XXXX
修改网页背景颜色
找到 …… 标签，增加 bgcolor 参数，修改对应值，如

HTML 颜色代码通常用以 "#" 开头的 6 个十六进制数字来表示。
部分参考颜色代码：浅黄#FFFFCC、浅蓝#CCFFFF、浅红#FF9999
使用HTML代码美化网页
XXXX
CSS语句组成部分

网页内的CSS可以放在之间
选择器
（需要改变样式的HTML元素）
声明
（属性和值被：分开，以；结束）
声明开始大括号
声明结束大括号
属性名
属性值
使用CSS美化网页
XXXX
修改 CSS 代码需要先指定网页中的元素，再对该元素进行描述。
先完成 中的声明

设置整个网页字体
设置整个网页的背景颜色
设置应用text样式的文字的字体
设置应用text样式的元素的文字的颜色
设置应用text样式的元素的文字的大小
使用CSS美化网页
如果需要对大段的文字进行统一的字体样式、颜色设置，那么选用哪种美化方式更高效？两种美化网页的方式各有什么特点？分别适用于哪些场景？试着总结一下。
思考
思考
把自己美化过的网页作品分享给老师、同学，收集他们对你的作品的看法并记录下来，选择你喜欢的方式进一步优化你的作品。
讨论
讨论
利用在线人工智能网站美化网页，要求人工智能助手用 HTML 代码和 CSS 两种方式分别实现，对比最后得到的美化效果和代码。
拓展任务
拓展
谢 谢
汇报人：WPS