第17课 制作网页展活动 教学设计 2025-2026学年人教版初中信息科技七年级全一册
2025-12-15
|
4页
|
699人阅读
|
250人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第17课 制作网页展活动 |
| 类型 | 教案-教学设计 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | DOCX |
| 文件大小 | 29 KB |
| 发布时间 | 2025-12-15 |
| 更新时间 | 2025-12-15 |
| 作者 | Shine |
| 品牌系列 | - |
| 审核时间 | 2025-12-15 |
| 下载链接 | https://m.zxxk.com/soft/55443457.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第17课 制作网页展活动 教案
一、基本信息
1. 课程名称：制作网页展活动
2. 教材版本：人教版（2024）初中信息科技七年级全一册
3. 授课对象：初中七年级学生
4. 课时安排：1课时（45分钟）
5. 授课类型：新授课、实践课
二、教学目标
- 信息意识：通过制作科技节网页，感知网页、网站在信息传播中的作用，形成主动运用信息技术展示信息的意识。
- 计算思维：理解网站制作的逻辑流程，能根据需求选择合适的网页制作方法，初步具备优化网页呈现效果的思维能力。
- 数字创新：体验AI辅助网页制作的便捷性，尝试结合技术创新信息展示形式，培养创新实践能力。
- 信息社会责任：在小组合作中遵守分工规则，规范使用网络素材和AI工具，树立尊重信息知识产权的意识。
三、教学重难点
1. 重点：网站制作的基本流程；两种网页制作方法的实践操作；核心HTML标签的规范使用。
2. 难点：精准描述AI生成网页的需求；HTML标签的正确闭合与路径设置；运用CSS优化网页图像呈现效果。
四、教学准备
1. 教学资源：多媒体课件（PPT）、机器狗等科技项目素材（文字、图片）、HTML代码示例文档、AI平台（DeepSeek）链接。
2. 工具准备：学生端安装文本编辑工具（记事本、VS Code），确保网络通畅以访问AI平台。
3. 任务单：小组分工表、网站制作流程表、网页制作评价表。
五、教学过程
（一）激趣导入，唤醒旧知（5分钟）
1. 情境创设：播放校园科技节预热视频（或展示科技节活动海报），提问：“想让更多人了解我们的科技节活动吗？今天我们将用信息技术打造专属科技节网站！”引出本节课主题——制作网页展活动。
2. 课前预热：呈现4道判断题，引导学生回顾旧知，采用“举手抢答+同桌互查”的方式巩固概念：
- 网页主要由HTML语言编写而成。（√）
- 网站一般由多个网页组成，这些网页通常围绕同一主题，拥有同类设计风格。（√）
- 网站中的网页一般通过网址来访问。（√）
- 访问网站时，默认显示的第一个网页叫作主页。（√）
3. 任务发布：明确本节课核心任务：掌握网站制作流程，选择一种方法制作科技节项目子页，为后续小组整合网站主页做准备。
（二）探究新知，规划流程（10分钟）
1. 学习网站制作基本流程
- 课件展示完整的“网站制作流程表”，结合科技节网站案例，逐点讲解6个步骤的核心要求：
|序号|名称|说明|
|---|---|---|
|1|确定主题|聚焦“校园科技节展示”，明确网站核心功能是介绍活动、展示科技项目|
|2|规划结构|设计网站包含的网页类型，如主页（汇总导航）、项目子页（单个活动介绍）、联系我们页（咨询方式）|
|3|收集素材|准备文字（项目介绍、活动时间地点）、图片（活动海报、科技作品）等资料|
|4|制作网页|运用文本编辑工具编写代码或AI辅助生成单个网页|
|5|链接整合|通过超链接将各网页关联，实现页面跳转|
|6|测试优化|检查网页显示效果、链接有效性，调整内容和格式|
2. 小组合作规划
- 发放小组分工表，以4人小组为单位，围绕3个问题展开讨论：① 本小组科技节网站的主题细化（如“科技探索·趣味体验”）；② 网站包含哪些子页，每人负责制作哪个科技项目子页；③ 需要收集哪些素材（可结合教师提供的机器狗素材或自主确定项目）。
- 每组推选1名记录员填写分工表，教师巡视指导，强调分工明确、主题统一。
（三）实践操作，制作网页（20分钟）
1. 方法讲解与示范
- 方法一：文本编辑工具编写HTML代码
- 教师通过屏幕共享演示操作步骤：
1. 打开记事本，输入HTML基本结构：`<!DOCTYPE html>` `<html>` `<head>` `<title>机器狗项目介绍</title>` `</head>` `<body>` `</body>` `</html>`。
2. 在`<body>`标签内添加内容：用`<h1>`设置一级标题（如“科技节亮点项目——智能机器狗”），`<h2>`设置二级标题（如“项目介绍”），`<p>`标签粘贴机器狗素材文字，`<img src="dog.jpg" alt="智能机器狗">`插入图片。
3. 保存文件：选择“保存类型→所有文件”，文件名改为“dog.html”，保存到桌面，用浏览器打开预览。
- 强调注意事项：标签必须成对闭合（如`<h1>`对应`</h1>`）；图片文件需与HTML文件放在同一文件夹，路径填写正确。
- 方法二：AI辅助生成网页
- 教师演示AI平台使用流程：
1. 打开DeepSeek平台，输入精准指令：“制作校园科技节机器狗项目网页，使用<img><p><h>简单标签，代码≤30行，包含项目介绍、活动时间、图片展示，标题为‘智能机器狗——科技节必看项目’”。
2. 复制AI生成的代码，粘贴到记事本中，修改图片路径（如将`src="tech-festival.jpg"`改为`src="dog.jpg"`）、补充机器狗具体介绍文字。
3. 保存为HTML文件，用浏览器预览并调整细节。
- 指导技巧：需求描述需包含“主题+标签限制+内容要素+格式要求”，确保AI生成结果贴合需求。
2. 学生自主实践
- 学生根据自身基础选择制作方法，自主完成网页制作，教师巡视指导：
- 对选择方法一的学生：重点指导标签规范使用、图片路径设置，帮助解决“网页无法显示图片”“标签遗漏闭合”等问题。
- 对选择方法二的学生：指导优化AI指令描述，协助修改生成代码中的错误信息，确保内容与素材匹配。
- 提供机器狗素材参考：“机器狗是一种模拟真实犬只形态和部分行为的机器设备，能够实现行走、坐下、翻滚等多种动作。机器狗的出现为人工智能和机器人研究提供了新的想象空间，也让更多人得以近距离接触机器人技术。”
（四）拓展探究，优化提升（10分钟）
1. 问题驱动优化：展示学生网页初稿中可能出现的“图像大小不一致”问题，提问：“如何让网页中的图片显示更整齐？”引出CSS优化方法。
2. 方法讲解与实践：课件呈现3种图像大小统一的方法，教师简要讲解核心逻辑，学生选择一种应用到自己的网页中：
- 方法1：内联样式——在`<img>`标签中直接设置宽高：`<img src="dog.jpg" alt="智能机器狗" width="300" height="200">`。
- 方法2：CSS统一控制——在`<head>`标签内添加`<style>`标签：
```html
<style>
.tech-image {width: 300px; height: 200px; object-fit: cover;}
</style>
```
再将图片标签改为：`<img class="tech-image" src="dog.jpg" alt="智能机器狗">`。
- 方法3：比例调整——仅设置宽度，高度自动适配：`<img src="dog.jpg" alt="智能机器狗" width="300">`。
3. 拓展思考：组织学生讨论“AI辅助下，未来学习可能出现哪些变化”，鼓励自由发言，如“快速生成学习素材”“个性化解决学习难题”“高效完成实践任务”等，培养技术创新思维。
（五）课堂小结，布置作业（5分钟）
1. 小结回顾：师生共同梳理本节课重点：
- 核心知识：网站制作6步流程、HTML核心标签、AI辅助网页制作方法。
- 实践技能：网页制作与优化、小组分工协作。
- 情感收获：技术服务生活、创新展示信息的理念。
2. 分层作业（符合新课程分层教学要求）
- 基础层：完善本节课制作的科技项目子页，确保内容完整、图片显示正常，用浏览器预览并截图保存。
- 提高层：将网页代码提交给AI模型，让其解读每段代码的功能，记录不理解的部分，形成“代码解读笔记”。
- 拓展层：小组内交流各自制作的子页，初步规划主页的导航结构（如子页链接名称、排列方式），为下节课整合网站做准备。
六、板书设计
第17课 制作网页展活动
一、核心概念
网页→HTML语言 网站→多个同类网页 主页→默认首显网页
二、网站制作流程（6步）
确定主题→规划结构→收集素材→制作网页→链接整合→测试优化
三、网页制作方法
1. 文本编辑工具：<h> <p> <img> 标签（规范闭合、路径正确）
2. AI辅助生成：精准指令→修改优化
四、优化技巧
图像大小统一：内联样式/CSS控制/比例调整
五、核心素养
信息意识→计算思维→数字创新→信息社会责任
七、教学反思
本节课以校园科技节为真实情境，紧扣新课程标准的核心素养要求，通过“任务驱动+实践探究”的方式，让学生在做中学。两种网页制作方法的设计兼顾了不同基础学生的需求，AI辅助制作降低了技术门槛，激发了学生的学习兴趣；小组合作规划则培养了学生的协作能力。
教学中需关注：部分学生对HTML标签的规范使用仍存在困难，需加强个别指导；AI指令的精准描述需要反复示范，帮助学生掌握技巧。后续教学可增加网页链接制作、主页整合的实践内容，进一步提升学生的网站制作完整能力，同时持续渗透信息社会责任教育，引导学生规范使用网络资源和技术工具。
学科网（北京）股份有限公司
$
资源预览图
1
2
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。