桂科版2025 七下主题一任务三 美化网页方法多 课件.pptxVIP

Cloud七年级下册主题一文化遗产线上展任务三美化网页方法多

情境导入壮壮把设计好的“三月三”宣传网站的主页分享给小伙伴们，征集网页美化意见。大家对网页的效果各抒己见，壮壮应接不暇。我们上节课制作的网页也需要美化，有没有什么美化网页又快又好的方法呢？导入

上网浏览一些设计比较成熟的网站，感受不同主题的网页是如何通过色彩搭配和版面设计来增强视觉效果和用户体验的。结合你自己设计的网页作品，想一想，网站的美化可以从哪些方面入手？思考思考

XXXX某一网站主页美化前后的代码变化如书本P20-22的表1-3-1所示，请仔细观察并对比内容，并回答以下问题：1.该网页美化前后的代码有何不同？请将不同之处标出来，把你发现的新标签写下来。2.打开美化后的网页文件“首页_五色糯米饭简介.html”，试着把你发现的新标签和网页呈现效果进行匹配，写下你对新标签作用的猜想。查找相关资料或修改代码调试效果，验证你的猜想。探究

XXXX在网页设计中，字体设置和色彩搭配占据着举足轻重的地位。根据你自己的作品情况，制订网站美化方案。马上行动

修改文字字体、颜色、大小找到代码中的标签font……/font，根据实际需求修改对应参数。fontface=”楷体”color=“#blue”size=“2”任意文字/font字体颜色大小使用HTML代码美化网页

XXXX修改网页背景颜色找到body……/body标签，增加bgcolor参数，修改对应值，如bodybgcolor=#fdfdd3HTML颜色代码通常用以#开头的6个十六进制数字来表示。部分参考颜色代码：浅黄#FFFFCC、浅蓝#CCFFFF、浅红#FF9999使用HTML代码美化网页

XXXXCSS语句组成部分stylebody{?????font-family:楷体;??}……/style网页内的CSS可以放在style/style之间选择器（需要改变样式的HTML元素）声明（属性和值被：分开，以；结束）声明开始大括号声明结束大括号属性名属性值使用CSS美化网页

XXXX修改CSS代码需要先指定网页中的元素，再对该元素进行描述。先完成style?/style中的声明stylebody{????????font-family:楷体;? background-color:#fdfdd3; ???????}.text{ font-family:黑体;color:white; font-size:20px; }/style设置整个网页字体设置整个网页的背景颜色设置应用text样式的文字的字体设置应用text样式的元素的文字的颜色设置应用text样式的元素的文字的大小使用CSS美化网页

如果需要对大段的文字进行统一的字体样式、颜色设置，那么选用哪种美化方式更高效？两种美化网页的方式各有什么特点？分别适用于哪些场景？试着总结一下。思考思考

把自己美化过的网页作品分享给老师、同学，收集他们对你的作品的看法并记录下来，选择你喜欢的方式进一步优化你的作品。讨论讨论

利用在线人工智能网站美化网页，要求人工智能助手用HTML代码和CSS两种方式分别实现，对比最后得到的美化效果和代码。拓展任务拓展

谢谢汇报人：WPS