资源简介 (共32张PPT)第一单元 第3课美化网页方法多（桂科版）七年级下1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业801核心素养目标。信息意识计算思维数字化学习与创新信息社会责任树立正确的信息传播观念，在网页制作和分享过程中，严格遵守法律法规，尊重他人知识产权。积极主动地探索利用数字化工具进行网页美化，如熟练运用网页编辑软件和人工智能网站等辅助工具，提高美化效率和效果。面对网页美化任务，学生学会运用计算思维将其拆解为色彩搭配、版面设计、图片与多媒体元素选择、交互设计等多个有序步骤。在网页美化学习与实践中，学生能够敏锐洞察网页信息的真实性、准确性和合法性，坚决抵制虚假和不良信息的传播。02新知导入活动背景壮壮把设计好的“三月三”宣传网站的主页分享给小伙伴们，征集网页美化意见。大家对网页的效果各抒已见，壮壮应接不暇。有没有什么美化网页又快又好的方法呢？02新知导入活动目标1、 掌握网站美化方法。2、 熟练使用 HTML 和 CSS 代码对网页美化。3、 探究网页美化前后代码变化。03新知讲解一、思考上网浏览一些设计比较成熟的网站，感受不同主题的网页是如何通过色彩搭配和版面设计来增强视觉效果和用户体验的。结合你自己设计的网页作品，想一想，网站的美化可以从哪些方面入手？色彩搭配确定主色调：根据网站主题和目标受众选择主色调。如科技类网站常用蓝色体现专业、可靠；电商类网站常用红色激发购买欲望。版面设计布局结构：常见布局有 “国” 字型、“T” 字型、“三” 字型等。需根据内容多少和重要程度合理规划区域，如导航栏置于顶部，重要内容展示在中间核心区域，侧边栏放置次要信息。图片与多媒体元素图片选择：选用高清、与网站主题相关的图片，能增强视觉吸引力和信息传达效果。同时注意图片风格统一，如电商产品展示图风格要一致。交互设计按钮设计：按钮颜色、形状要醒目，便于用户识别和点击；点击反馈效果（如变色、动效）能增强交互体验感。03新知讲解二、探究某一网站主页美化前后的代码变化如表所示，请你仔细观察并对比内容。03新知讲解二、探究请回答:1.该网页美化前后的代码有何不同 请将不同之处标出来，把你发现的新标签写下来。不同之处及新标签：新的之间。03新知讲解四、做中学2.修改 CSS 代码需要先指定网页中的元素，再对该元素进行描述。如先完成中的声明，然后新增标签，并使用 class 参数指定对应元素使用的 CSS 样式。03新知讲解如果需要对大段的文字进行统一的字体样式、颜色设置，那么选用哪种美化方式更高效？两种美化网页的方式各有什么特点？分别适用于哪些场景？试着总结一下。思考对大段文字进行统一字体样式、颜色设置，使用 CSS（层叠样式表）方式更高效 。通过 CSS 可以批量选择元素并设置样式。HTML 标签内联样式（如标签 ）特点及适用场景特点直接性：样式直接写在 HTML 元素标签内，与元素紧密结合，直观易懂。局部性：只对所在标签内的内容起作用，不会影响其他元素。低复用性：每个元素需单独设置样式，若要修改样式，需逐个元素调整，维护成本高。适用场景少量元素特殊样式：当网页中仅有个别元素需要独特样式，且不考虑样式复用情况时，如某个特定按钮的临时样式调整。特点分离性：将样式与 HTML 结构分离，可集中管理样式代码，使 HTML 代码更简洁，结构更清晰。复用性：定义的样式可被多个元素复用，一处修改，所有应用该样式的元素都会改变，维护效率高。丰富功能性：支持多种选择器、样式属性和高级特性，能实现复杂多样的页面效果。适用场景整体网页美化：用于设置整个网站的统一风格，包括字体、颜色、布局等，如设置全站的字体样式、背景颜色等。03新知讲解把自己美化过的网页作品分享给老师、同学，收集他们对你的作品的看法并记录下来，选择你喜欢的方式进一步优化你的作品。讨论整理反馈对收集到的看法进行分类整理，比如分为 “视觉效果类”（色彩、字体、图片等) 、“交互体验类” 、“功能实现类” 。分析哪些反馈是共性问题，哪些是个别建议。制定优化计划根据整理结果，确定优化的优先级和顺序。对于大家普遍反映的问题，优先处理；对于一些个性化建议，结合自己的设计理念和时间精力决定是否采纳。实施优化利用网页编辑器，按照 CSS 和 HTML 相关知识，对网页代码进行修改。修改后进行测试，检查是否达到预期优化效果，同时确保没有引入新的问题。再次验证与完善再次向部分老师和同学展示优化后的版本，收集他们对优化效果的看法，看是否解决了之前的问题，是否又产生新的问题，持续完善网页作品。03新知讲解利用在线人工智能网站美化网页，要求人工智能助手用 HTMI 代码和CSS 两种方式分别实现，对比最后得到的美化效果和代码。任务拓展HTML 方式代码特点：样式直接写在 HTML 标签内，与结构混合在一起，代码冗余度高。如果要修改多个元素的相同样式，需要逐个标签修改。美化效果：可以简单实现字体、颜色、大小的设置，但效果相对单一，难以实现复杂的布局和样式效果。CSS 方式代码特点：样式与 HTML 结构分离，在