第17课制作网页展活动课件 2025-2026学年人教版初中信息科技七年级全一册

第17课 制作网页展活动 七年级信息科技 学习目标 了解流程 编写代码 体验AI 了解制作网站的基本流程 能通过写HTML代码制作 体验用人工智能技术制作网 简单网页 页,认识科技创新的意义 000 制作网页,展示科技节! 项目任务 第一 第二 第三 分小组制作 设计子页 协作主页 分小组制作展示学 每位同学设计制 小组协作完成主 页的制作 校"科技节"的网站 作介绍一个科技 项目的子页 团队协作,共建科技节网站! 学习活动1:知识回顾 活动1 网页主要由HTML语言编写而成 网站一般由多个网页组成,这些网页 通常围绕同一主题,拥有同类设计风格 网站中的网页一般通过网址来访问 访问网站时,默认显示的第一个网页叫作主页 回顾知识,为学习做准备! 17.1制作网站的基本流程 确定主题 搜集素材 确定结构 确定主页、导航、 简要说明主题是什么 围绕主题搜集资源, 挑选、去伪 布局和主题风格 制作网页 美化网页 发布网站 用工具软件制作网页 用适当方法调整网页显示效果 选择恰当方式展示网站 六步流程,循序渐进! 学习活动2:小组讨论 讨论要点一"网站主题" 讨论要点二"网站结构" 讨论要点三"页面结构" 讨论要点四"任务分配" 讨论科技节网 确定网站 设计各个 记录分配给 站的主题定位 的整体结构 页面的结构 自己的任务 集思广益,明确分工! 17.2制作一个简单的网页 文本编辑工具 人工智能模型 用文本编辑工具编写HTML代码 选择在线人工智能模型 操作简单,适合学习基础 自动生成网页 , 体验AI 应用 HTML代码本质上就是一段文本 两种方法,灵活选择! ⽅法⼀ : 编写 HTML 代 HTML 标题 标 题 代码 → 效 内容 内容参 方法二:AI自动生成 步骤一选择AI工具 选择⼀个在线⼈⼯智能模型 输⼊需求 步骤⼆ 输⼊制作⽹⻚的需求 步骤三 ⾃动⽣成 AI根据需求自动生成网页 步骤4 调整优化 根据需求调整优化⽹⻚ AI辅助,高效便捷! AI应用一:解答疑问 如何使⽹⻚中的图像 保持大小一致? 第解⼀ 第解⼆、 第西.3 提交问题 获取⽅案 选择尝试 向AI模型提出网页制作疑问 AI提供多种解决方案 选择其中⼀种⽅法尝试 AI解答,学习新技术! AI应用二:解读代码 AI分析码 第⼆ 第⼀ 第三 第四 AI解读 提交代码 学习标签 开阔眼界 把感兴趣的 AI解读代码的 学习更多标 开阔眼界, ⽹⻚代码提 功能和作⽤ 签和⽹⻚代 体验AI 辅 交给AI模型 助学 码知识 习新模式 AI解读,深入学习! 学习活动3:制作网页 查看素材 查看老师提供的素材,如有必要,继续补充完善 选择⽅法 选择⼀个⽅法制作介绍科技项⽬的⽹⻚ 方法一:编写HTML代码 方法二:使用AI模型 完善内容 根据需求调整和优化⽹⻚ 动手实践,制作自己的网页! 制作要点提⽰ 素材是基础 素材是制作的基础,需提前收集整理 教师提供素材,学生也可通过网络获取 流程⾮线性 制作流程不是严格的线性 后续步骤可能需要回到前⾯的步骤 AI复杂度 AI生成的网页可能较复杂 可要求AI只使用学生知道的标签 注意细节,顺利制作! 方法对比:代码vs AI 编写代码⽅法 AI辅助方法 理解代码和⽹⻚的关联 体验AI 技术新应⽤ 掌握基础HTML知识 快速⽣成⽹⻚ 培养编程思维 感受科技创新 需要理解和调整代码 需要⼀定时间学习 各有所长,结合使用! HTML 基础标签回 标签 作 示例 HTML ⽂ 档 根 元 .. ⽹⻚制作技巧 降低难度 收集素材 教师可提供半成品,或引导学 收集素材很难⼀蹴⽽就 学⽣⽤字处理软件另存为⽹⻚ 每课都应留出时间收集 参考实例 任务分配 保证每个成员⾄少完整制作、 提供⽹站实例供学⽣参考 美化⼀个⽹⻚ 掌握技巧,轻松制作 AI创新意义 价值⼀ 价值⼆ 价值三 价值决 开阔眼界 技术创新 解决问题 学习新模式 体验未来在⼈⼯ 解读代码帮助学 感受⼈⼯智能 AI提供多种解 智能辅助下的学习 习更多标签和⽹⻚ 带来的科技创新 决方案, 新模式 代码知识 解决实际问题 AI技术,引领创新 课堂⼩结 确定主题→搜集素材 方法一:编写HTML代码 确定结构→制作网页 制作⽅法 制作⽹⻚ AI应用 解读代码 ⽅法⼆ AI应用 AI自动生成 理解HTML原理 学习收获 体验Al创新 掌握制作技能 掌握流程,学会制作! 谢 谢 第17课 制作⽹⻚展活动 $