第三单元互联网中数据共享 项目开展 第1课时 教案-　2025-2026学年苏科版（2023）初中信息科技七年级上册

该教案聚焦“使用div控件完成个性化网页布局”核心知识点，通过导入环节回顾上节课统一布局的div基础，明确本节课个性化布局目标，构建“基础回顾-个性化拓展”的学习支架，帮助学生衔接新旧知识，为后续实践奠定基础。 特色在于新课讲授结合常规与不规则网页布局案例（含L型等特殊布局），引导学生分析div控件数量，培养信息意识（感知布局信息，判断控件需求）；分层实践活动（规划div数量、创建控件、填充内容）让学生在DW软件中从抽象草图到具体参数设置，落实计算思维（分解布局问题，建模控件结构）；强调文件夹规范命名（座位号+名字）渗透数字化学习规范性。教学中案例演示与动手操作结合，既清晰示范步骤，又让学生自主探究参数设置，有效解决布局错位问题，提升学生信息素养，也为教师提供分层指导路径，便于课堂高效实施。

第三单元 互联网中数据共享 项目开展 第1课时 教学目标 从核心素养视角出发，制定如下教学目标： 1. 能根据网页布局确定使用div控件的数量及各控件的基础参数（宽度、高度等信息）。 2. 能在DW软件中使用div控件完成网页布局。 教学重难点 教学重点： 确定网页布局中div控件数量； 各div控件参数的设置； 教学难点： 正确创建div控件并设置合理参数； 教学方法与手段 讲授法、演示法 教学准备 项目开展记录表 教学 环节 教师活动 学生活动 设计意图 导入 上节课，通过创建div控件的方式，我们补全了统一布局的网页并添加了作品内容，完成了网页作品。 这节课，我们将接着使用div控件完成个性化的网页布局。 回想已学内容，明确本节课目标； 回顾div控件基础，明确个性化布局目标。 新课讲授 实现网页布局的规划，第一步需要确定使用div控件的数量。 首先，我们明确一下什么是div。从外观上来看，最常规的div是一个可变尺寸的长方形区域。 下面，我们看几个具有代表性的个性化网页布局。（其中包含常规布局，不规则布局） 提问1-3：这位同学的网页布局需要使用几个div控件？ 其中，类似L型布局需要额外说明。L型布局可以使用一个div实现，但较复杂，根据实际情况建议使用两个div实现。 为了避免不明原因的发生，使用div进行页面布局时，我们会先创建一个最大的div区域，其他的div都在它里面，以方便管理。 因此，这三个网页布局实际会使用的div控件是*个，*个，*个，即网页布局div数量是1+X。 1的回答：4个； 通过案例解析div数量计算，演示DW控件创建步骤，实践布局设计。 在上节课，我们已经尝试创建过div区域了。 利用软件界面右侧“插入”的“div”就可以开始div区域的创建。 首先，点击“div”按键；接着，在弹出的对话框中点击“新建CSS规则”；然后，在新弹出的对话框的“选择器名称”中输入一个名称，名称用于表示这个div区域的参数设置，名称输入后点击“确定”；最后，在新对话框的“方框”中设置div区域的宽度等数值，依次确定完成创建。 需要注意的是，最外围区域宽度设置为1000px，因此，其他区域的宽度之和不能超过1000px。 实践活动1：个性化网页布局 请使用div控件实现个性化网页布局。 div控件的使用请参考探索3学习单； 个性化网页布局请参考探索2草图； 教师巡视，找到具有代表性的作品或问题并向全体学生进行展示。 具有代表性的问题： 尝试完成个性化网页布局； 10分钟呈现网页布局； 页面布局完成后，我们就可以将内容有序地放入网页中。 实践活动2：添加作品内容 请根据在探索1确定的网页作品内容采用的数据表现形式将内容有序放入对应区域。 通过复制粘贴将内容放入网页对应区域。 通过分层实践强化布局逻辑，完成内容填充。 在网页中加入内容之前，我们还需要做一件事——新建一个文件夹并将网页文件另存为到这个新建文件夹中。 活动3：准备工作 第一步：在桌面新建一个文件夹，文件夹名字使用“座位号+名字”。 第二步：将网页文件另存为到这个文件夹中。 总结 这节课，我们使用div控件完成了网页作品的页面布局并将前面课程已准备好的内容添加到了作品的对应位置完成了作品的制作。 作业 网页作品布局 总结反思 学生容易因参数计算偏差导致布局错位，部分基础薄弱者无法准确匹配草图与控件数量，需加强分组指导。 ( 1 ) 学科网（北京）股份有限公司 $