4.3 编辑网页内容 教学设计-2025-2026学年七年级上《信息科技》（教科版）

第3课 编辑网页内容 教学设计 教学内容分析 本课位于单元链条的第三环“创意呈现”。学生已掌握HTML骨架+CSS初级美化，现在需要把静态“名片”升级为“微导游”———一个包含多栏目、可交互、移动端友好的小型网站。核心内容聚焦“内容策划、工具多元选择、多媒体整合、版权自律”，既深化数字化学习与创新素养，又强化信息社会责任。已学的标签与样式成为本课“地基”，新增的锚点导航、音频嵌入、图片压缩、响应式布局将让学生体验从“技术实现”到“用户体验”的跃迁。 学习者分析 学生能写简单标签，却对“如何让人愿意看我的网页”缺乏系统方法；他们乐于拍照、录语音，却容易忽视版权与加载速度。七年级孩子喜欢“做导游”这种角色扮演，也渴望把作品展示给家长、同学。发展需求是从“技术模仿”走向“用户思维”。困难集中在素材版权判断、音频/图片压缩和移动端适配比例。 学习目标确定 通过“校园一角”选题策划，掌握“主题—栏目—多媒体”三层内容金字塔设计方法，提升信息架构能力。 通过工具试驾，能根据任务需求选择合适编辑器并陈述理由。 通过嵌入音频、压缩图片、设置媒体查询，体验多媒体整合与性能平衡，树立版权与绿色上网意识。 通过扫码测试，收集访客留言，能用一句话提出基于用户数据的改进点，培养持续优化思维。 教学重点和难点 教学重点：内容策划框架与多媒体合法整合。 教学难点：移动端适配与加载性能权衡。 教学活动设计 教师活动 学生活动 支撑的资源 环节一 聚焦 课前把一段30秒校园航拍+学生解说音频在教室大屏播放，随后定格在一张静态的图上，向学生提问：“如果这张图能说话，你想让它告诉游客什么？” 聚焦本课主题，探讨如何有效编辑网页，让网页作品重点突出，且更具吸引力和美感。 发放“微导游任务卡”，明确本节课的成果：编辑更具吸引力和美感的网页作品。 观看视频，发表第一印象，回答教师问题。 明确课程任务。 校园航拍视频、便利贴。 活动意图说明：用真实作品反差激活审美需求，聚焦“标记语言”主题。 环节二 探索 提供三种体验环境，比如分别运行VS Code+Live Server、Dreamweaver实时视图、可视化在线编辑器，各演示2分钟，发放“对比体验表”，让学生体验后选择本课“主力工具”。 轮流上机体验，填写速度、易用性、扩展性星级评价，组内投票选定本课“主力工具”。 对比体验表、计时器、体验资源包。 活动意图说明：让学生在“摸—�———选”中建立工具匹配意识。 环节三 设计 引导学生用A3“金字塔”模板做网页整体规划，包括：顶层主题句、中层3个栏目按钮、底层多媒体专区。 教师示范用颜色便签区分文字、音频、图片占位符。如：用湖蓝色便签写“欢迎来到图书馆”，贴在塔尖；用橙色便签写下“书香走廊”“数字阅读”“静享空间”三栏目中层；再用草绿色便签标注“音频导览”“高清书墙”“VR漫游”等素材占位符。 组内头脑风暴、贴便签，完成后拍照上传班级群。 金字塔模板、便签、班级群。 活动意图说明：把创意转化为可执行蓝图。 环节四 实现 提供压缩、音频转码等技术支持的学习资源，引导学生将创意进行实现。 学生将创意转为现实。 技术支持学习资源包。 活动意图说明：让学生亲手完成“从蓝图到成品”的闭环，体验创作的成就感。 环节五 拓展 把共享盘作品生成二维码，开放30分钟扫码评价，现场大屏滚动留言。 颁发“最佳故事奖”“最轻量网页奖”。 扫码体验同伴作品，收集同学反馈截图，根据反馈写v1.1改进计划。 二维码、大屏、留言板、纸质奖状。 活动意图说明：接受真实用户检验，形成持续迭代动力。 ... ...