1.1编辑网页信息　课件　 2025-2026学年电子工业版 （2022）初中信息科技第二册

该初中信息科技课件聚焦H5网页的认识与制作，以科技节“科技创新 自主可控”为情景导入，引导学生从浏览筛选优秀网页总结设计要点，到探究H5网页特点与优势，再到动手制作主题网页，构建递进式学习支架。 其亮点在于融合信息意识（通过网页浏览培养信息筛选与价值判断）、数字化学习与创新（使用H5在线平台完成网页制作实践）、信息社会责任（渗透自主可控技术对国家安全的意义），采用项目式学习让学生在实践中提升能力。学生能增强数字素养，教师可高效开展实操教学。

编辑网页信息 1 学习目标 1. 会利用H5在线网页编辑平台制作简单的网页。 2. 了解H5网页。 3．能够利用网络资源搜集信息。 4. 能够利用网络资源筛选信息。 5. 能够利用网络编辑平台的模板美化网页作品。 2 情景引入 科技节视频 3 情景引入 科技节视频 4 情景引入 学校即将迎来一年一度的科技节，本届科技界的主题是“科技创新 自主可控”，七年级1班的同学们打算制作一个与主题相关的网页，让更多同学了解我国科技发展的现状，感受科技的魅力。 5 浏览网页 活动1：请同学们在互联网中搜索并浏览与科技创新内容相关的网页，把你认为优秀的网页收藏下来，总结优秀网页在设计与制作方面有哪些可借鉴之处，填写到表格中。 6 浏览网页 7 浏览网页 8 浏览网页 9 浏览网页 网页内容 可借鉴之处 中国科技网 主题明确、界面美观 科技世界网 界面美观、交互性强 人工智能科技网 风格统一、交互性强 仪器信息网 风格统一 果壳网 主题明确、网站兼容性好 10 认识H5网页 随着互联网的不断发展，越来越多的商家和企业利用H5网页来做营销和推广。我们平时在移动设备上看到的邀请函、贺卡、小游戏、测试题等都是H5网页。 11 认识H5网页 邀请函 贺卡 测试题 12 认识H5网页 活动2：你在生活中见过或者使用过哪些H5网页呢？查找资料，小组合作学习说说H5网页都有什么特点？ 13 认识H5网页 HTML语言(超文本标记语言)就是一种标准通用的网页信息表示语言。 HTML语言现在已经发展到第五代，简称为HTML5。 H5网页是以HTML5语言为主要技术制作的网页。 14 认识H5网页 交互性强 简单易上手（多媒体性） 页面丰富（可视化） 适宜于移动设备中传播（跨平台） H5 网 页 优 势 15 制作网页 菜单栏 对象树 工具栏 属性面板 舞台 16 制作网页 1.登录H5在线网页编辑平台（网址：https://www.ih5.cn/） 17 制作网页 2.新建”欢迎页” 18 制作网页 3.设置背景颜色 19 制作网页 4.编辑文本 20 制作网页 5.设置文本属性 21 制作网页 6.添加图片 22 制作网页 7.为文本添加动态效果 23 制作网页 8.保存并预览网页 24 项目实施 项目实施： 完善“科技创新 自主可控”主题网页“欢迎页”（第一页）的内容，制作完成 1.在网页中添加“中国空间站”按钮 2.为网页生成二维码 25 知识拓展 H5网页除了上述功能，很多在线网页编辑平台都提供了各种各样的模板。我们可以挑选自己喜欢的模板，把收集到的文字、图片、音乐和视频等素材添加到模板中并设置动画、效果等。 26 知识拓展 27 巩固练习 活动3：请同学们阅读课本第十页的内容，并且参照老师分发的导学案，自主探究学习目标对象“跳转”的效果，完成页面间的“跳转”。 28 巩固练习 学生操作演示 29 巩固练习 1.制作“科技创新 自主可控”主题网页第二页的内容。 （设置页面背景颜色、添加文本、图片和返回按钮） 2.在”欢迎页”为”中国空间站”按钮添加跳转到第二页。 3.查找关于“自研芯片”和“中国天眼”的资料，制作以“自研芯片”和“中国天眼”为主题的第三四页网页，并实现页面跳转与返回的效果。 30 巩固练习 31 巩固练习 32 巩固练习 人人通空间 33 课堂总结 34 同学们 再见！ 35 $