第四单元 第18课《美化网页方法多》（教学设计）-2025-2026学年七年级信息科技 人教版全一册

初中信息科技学科集体备课教学设计 七年级下 第四单元 校园活动线上展 《第18课 美化网页方法多》教学设计 1、 学习内容分析 本节课是2024人教版七年级第四单元18课《美化网页方法多》内容。承接第17课《制作网页展活动》中制作简单网页的内容，主要学习如何美化网页。包括用HTML代码美化网页和用CSS美化网页两部分内容，旨在让学生掌握不同的网页美化方法，理解HTML代码和CSS在网页设计中的作用，能够根据需求选择合适的美化方式，提高学生的网页制作技能和审美能力，为制作出更具吸引力和专业性的网站奠定基础。 2、 学习者分析 学生在之前的课程中已经学习了制作简单网页，对HTML语言有了一定的了解，具备了初步的网页制作基础。七年级学生对新鲜事物充满兴趣，具有较强的动手能力和探索欲望，但在面对较为复杂的代码和样式设置时，可能会出现理解困难和操作不熟练的情况。在教学过程中，应注重引导学生从实际操作中感受不同美化方法的特点，逐步提高学生的自主学习能力和实践操作能力。 3、 学习目标 1. 知道用HTML代码简单美化网页的操作方法。 2. 知道串联样式表的作用，初步学会用它美化网页。 3. 能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。 4、 教学策略 1.任务驱动教学策略：在网页美化环节，教师设置任务（如修改背景颜色、调整标题字体、优化段落样式），让学生通过实际操作掌握 HTML和CSS美化网页的方法。 2.启发式教学策略：在引入CSS概念时，教师通过类比“HTML 是建筑师，CSS是装潢设计师”，帮助学生理解HTML负责结构，而CSS负责美化的核心概念。 3.分层教学策略：通过分解网页美化任务，如修改背景色 → 修改标题字体 → 修改段落样式三步，降低认知负担，让学生逐步完成，提高可操作性。 4.情境式教学策略：以“校园科技节网页”为主题，学生在真实任务场景中学习HTML和CSS的应用，提升学习的趣味性和实践性，使课堂学习更具实际意义。让学生体验AI生成代码的便利性，并思考如何优化AI生成的代码，使其更符合实际需求。 5、 教学过程 （1） 情境导入 以“校园科技创新周”为主线，结合上节课已经做完的科技节宣传网页，由数字人“科小创”引出本节课——“同学们，大家好！我是科技创新周项目组的数字专员‘科小创’。首先，非常感谢大家搭建的网页框架，内容非常棒！不过……（表情变为思考状）我悄悄做了个调研，把咱们的页面和别的活动页面放在一起，发现了一个小问题。” （屏幕上出现一个虚拟的“数据条”：吸引力指数对比。原始网页条很短，精美网页条很长。） 科小创：看，在“第一眼吸引力”上，我们落后啦！我们的网页就像一位满腹才华但穿着朴素的同学，优点需要别人仔细看才能发现。而宣传，需要第一时间抓住眼球！所以，我的任务是——（特效音，“任务发布”字样弹出）邀请大家一起，为我们的网页穿上“靓丽的外衣”，实施“美化升级行动”！大家愿意接受这个挑战吗？ 小结： 设计意图： 本段情境导入采用“任务驱动+类比引导”的方式，通过“美化前的网页”与“美化后的网页” 这一类比，帮助学生直观理解HTML只能构建网页结构，但美化能力有限，自然引出网页美化的需求，为后续学习铺垫。 （2） 项目分析 活动1： 探究HTML代码美化网页 活动2： 用CSS美化网页 活动3： 使用AI美化HTML代码 （3） 项目实施 活动1： 探究HTML代码美化网页 1、教师提出任务问题 引导学生对比用HTML标签美化前后的代码和网页，思考以下问题，并在在学习单圈出： ①请找到控制网页背景颜色的代码，说说它在哪一行？②标题字体是什么颜色？大小变大了吗？你能找到哪个标签能让标题变红？让字体变大？ 2、教师展示查阅表：HTML常用的美化标签表，引导学生对照这个学习单中的这个表，找到对应的HTML代码。 3、总结bgcolor控制背景，fontcolor控制文字颜色，font size控制文字大小，font face控制文本字体，palign控制文本对齐。 4、学友互助，完成任务一：参考导学案中的“分步修改任务”和加油包“挖空代码”，模仿修改。 5、作品展示并讨论总结HTML美化的局限性。 活动2： 用CSS美化网页 1、CSS的作用 CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。 类比：HTML= 建筑师（决定网页结构）+ 初级装修工（简单的美化）CSS= 专业装潢设计师（高级美化） 2、CSS的基本语法结构 【第一步】展示范例代码，演示修改CSS代码：只修修改一处，所有段落文字由黑色变为蓝色。 对比HTML修改时，每个段落都要单独改。引导学生感受css的统一管理优势。 【第二步】结合范例代码，讲解CSS基本语法：刚才的CSS代码，大家看到有两部分：谁的样式要改变？（段落p）改成什么样子？（color: blue; font-size: 24px;） 【第三步】提问，检验学生理解 “如果我想让网页背景变成蓝色，该改哪一行代码？”（引导学生找到 background-color） 3.实践操作：完成导学案任务二：尝试用CSS设计美化网页 4.讨论总结：CSS的优势 活动3： 使用AI美化HTML代码 1、直接展示AI生成CSS代码的示例，让学生看到AI能做什么。 2、快速示范如何使用合适的提示词让AI完成代码美化。 3、根据导学案完成任务三：提交示例代码给AI生成CSS，根据自己的需求修改，观察网页变化 引导学生思考：AI 生成的CSS和你们自己写的CSS有什么不同？AI代码有哪些好处？哪些地方还需要人工调整？ （4） 回顾总结 让学生回顾本节课所学知识，完成HTML与CSS美化网页方式对比表以及课后习题。 学科网（北京）股份有限公司 $