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

第18课《美化网页方法多》教学设计 2026-2027学年人教版初中信息科技七年级全一册 课　　题 第18课 美化网页方法多 教材版本 人教版（2024） 所在单元 第四单元 校园活动线上展 课　　型 新授课 课　　时 1课时（40分钟） 授课对象 初中七年级学生 一、教学目标 1. 通过对比美化前后网页的显示效果，知道网页美化能提升视觉体验、突出重点内容，了解字体、字号、背景、颜色、对齐方式等常用的美化维度，形成主动运用技术美化网页的信息意识。 2. 通过用HTML代码为网页设置背景、字体、颜色等，掌握<body>标签的bgcolor属性、<font>标签的color、face、size属性等常用的HTML美化标签及属性，并能分析其“效果有限、操作烦琐”的特点，发展分析与评价的计算思维。 3. 通过用CSS美化网页，初步掌握CSS的基本语法结构（选择器与声明），学会把CSS代码写在<style>标签中来设置文本颜色、字体、大小、背景及对齐方式等，体会“一次设置、统一生效”的高效，提升数字化学习与创新能力。 4. 通过在小组交流中评价网页的美化效果、规范使用素材，形成合理的审美意识与尊重知识产权的意识，增强信息社会责任。 二、教学重点与难点 教学重点：用HTML代码美化网页常用的标签及属性；CSS的基本语法结构（选择器与声明）及其基本应用。 教学难点：理解CSS中“选择器＋声明”的语法结构及属性和值的书写规则；理解用CSS美化网页比用HTML代码美化更高效、效果更好。 三、教学方法与教学准备 教学方法：情境教学法、对比教学法、任务驱动法、实验探究法、演示讲解法、小组合作法。 教学准备：连通信息科技实验室的机房，教师机与学生机均安装文本编辑工具与浏览器，并预装可用的在线人工智能模型；提供上一课完成的“科技节”网页文件及相关素材；“网页美化任务单”“CSS语法记录表”任务单。 四、教学过程 教学环节 教师活动 学生活动 设计意图 情境导入 （5分钟） 1. 展示两个内容相同、美化程度不同的网页，提问：你更愿意浏览哪一份？为什么？ 2. 引导学生观察美观的网页在字体、字号、背景、颜色、对齐方式等方面的变化，引出本课课题：美化网页方法多。 1. 对比两个网页，说出自己的感受和理由。 2. 观察并找出网页美化的常见方面，明确本课任务。 从直观的效果对比切入，让学生感受网页美化的价值，激发学习兴趣，自然引出本课主题。 探究一 用HTML代码美化网页 （12分钟） 1. 回顾常用的HTML美化标签及属性：<body>的bgcolor、<font>的color／face／size、<p>的align、<center>以及&nbsp;，逐一说明其作用。 2. 布置任务：打开上一课的“科技节”网页，用HTML代码为背景、标题、段落设置颜色、字体和大小，观察显示效果的变化。 3. 组织讨论：这种美化方式是否便捷？美化效果好不好？ 1. 回忆并说出常见HTML美化标签及属性的作用。 2. 动手修改代码，为网页设置背景、字体、颜色，观察并记录显示效果的变化。 3. 参与讨论，归纳出HTML美化“效果有限、操作烦琐”的特点。 让学生在动手实践中掌握HTML美化的常用标签及属性，并通过亲身体验其局限，为学习CSS做好铺垫，落实教学重点、突破难点。 探究二 用CSS美化网页 （12分钟） 1. 介绍CSS：CSS是Cascading Style Sheets的缩写，中文常称为层叠样式表，可以描述网页的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。 2. 讲解CSS的基本语法结构：选择器＋声明，属性和值之间用冒号分开、以分号结束，CSS代码写在<style>标签之间。 3. 出示参考代码，布置任务：用CSS为“科技节”网页设置背景颜色、标题字体和大小、段落文字样式，观察效果变化。 1. 听讲，理解CSS的含义、作用及与HTML的分工。 2. 观察示例代码，归纳CSS“选择器＋声明”的语法结构，填写“CSS语法记录表”。 3. 动手用CSS美化网页，体会一次设置、统一生效的效果。 通过讲解与动手实践相结合，帮助学生掌握CSS的基本语法与应用方法，体会CSS美化高效、效果更好的优势，发展数字化学习与创新能力。 探究三 对比两种方法，体验智能美化 （6分钟） 1. 引导学生对比用HTML代码美化和用CSS美化网页的效果与效率，交流各自的心得。 2. 组织学生尝试把已有的HTML代码提交给在线的网页生成模型，请它用CSS对网页进行美化。 1. 比较两种美化方法的特点，说出自己的体会。 2. 体验用在线人工智能模型美化网页，观察生成结果并加以评价。 通过对比加深对两种美化方法特点的理解；通过体验人工智能美化，感受新技术带来的变化，培养合理选择、批判使用的意识。 课堂小结 （3分钟） 1. 引导学生回顾：HTML美化常用的标签及属性有哪些？CSS的基本语法结构是什么？两种美化方法各有什么特点？ 2. 用板书梳理知识脉络。 1. 跟随教师回顾本课核心知识，用自己的话回答问题。 2. 完善任务单与语法记录表。 及时梳理，帮助学生把实践经验结构化，巩固核心概念与方法。 布置作业 （2分钟） 出示作业（详见“六、作业设计”），说明要求。 记录作业，明确任务。 分层作业兼顾基础巩固与拓展提升，为下一课多人协同制作网页作铺垫。 五、板书设计 第18课　美化网页方法多 一、网页美化：提升视觉体验、突出重点（字体、字号、背景、颜色、对齐方式） 二、用HTML代码美化：<body bgcolor>、<font color/face/size>、<p align>、<center>、&nbsp; 　　特点：美化效果有限，操作烦琐 三、用CSS美化：CSS＝Cascading Style Sheets（串联样式表），写在<style>标签之间 四、CSS基本语法：选择器 { 属性: 值; }（属性与值用“：”分开，以“；”结束） 五、常用CSS属性：color、font-family、font-size、background-color、text-align、text-indent 六、核心认识：一次设置、统一生效；效果更好，维护更方便 六、作业设计 1. 基础题：请写出用HTML代码美化网页时常用的三组标签及属性，并说明它们的作用。 2. 实践题：用CSS为上一课制作的“科技节”网页设置背景颜色、标题的字体与颜色、段落文字的大小，保存后用浏览器打开，观察并记录网页显示效果的变化。 3. 拓展题（选做）：把自己编写的HTML代码提交给在线的网页生成模型，请它用CSS对网页进行美化，对比美化前后的效果，并说说自己的体会。 4. 复习题：预习第19课《多人协同效率高》，思考“如果几位同学同时修改同一个网页，怎样才能既高效又不冲突？” 第 页　共 页 学科网（北京）股份有限公司 $