2.3.6-Dreamweaver CS5表格嵌套（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5表格嵌套 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握在Dreamweaver CS5中进行表格嵌套的方法。 · 了解表格嵌套的应用场景。 · 学会使用表格嵌套进行网页布局。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 在Dreamweaver CS5中进行表格嵌套的方法。 2. 表格嵌套的应用场景。 3. 使用表格嵌套进行网页布局的方法。 教学难点 1. 如何在Dreamweaver CS5中正确地实现表格嵌套。 2. 如何灵活运用表格嵌套进行网页布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生理解表格嵌套在网页设计中的应用。 2. 实践操作法：通过动手实践，让学生掌握在Dreamweaver CS5中进行表格嵌套的方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 五、课前导入 1. 回顾上一节课内容，强调表格嵌套在网页设计中的重要性。 2. 展示几个使用表格嵌套进行布局的优秀网页实例，激发学生的学习兴趣。 3. 提出问题，引导学生思考如何利用表格嵌套进行网页布局。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中进行表格嵌套的方法如下： 1. 首先，在Dreamweaver中打开或创建一个新的HTML文档。 2. 在文档中插入一个表格。你可以通过点击菜单栏的“插入”选项，然后选择“表格”来插入一个表格。你也可以使用快捷键Ctrl+Alt+T。 3. 插入表格后，你可以在表格中添加行和列。你可以通过点击表格的右下角，然后拖动鼠标来添加行和列。 4. 然后，在表格的某个单元格中，再次点击菜单栏的“插入”选项，然后选择“表格”。 5. 这将在当前单元格中插入一个新的表格。你可以通过拖动新表格的边框来调整其大小。 6. 你可以通过这种方式在表格中嵌套多个级别的表格。 7. 最后，你可以通过点击表格单元格来编辑其内容。 通过以上步骤，你可以在Dreamweaver CS5中进行表格嵌套。表格嵌套是一种常见的网页布局技术，它允许你在一个表格中嵌套多个表格，以实现复杂的网页布局。 表格嵌套的应用场景： 1. **复杂布局**：当需要创建复杂的网页布局时，如多层导航菜单、带有侧边栏的内容区域或网格布局，表格嵌套可以提供一种有效的方法来实现这些设计。 2. **局部布局调整**：在某些情况下，可能需要在一个大的表格中嵌套一个或多个小表格，以便对特定区域进行微调，而不影响整个布局。 3. **内容分组**：表格嵌套可以用来对内容进行分组，例如，在一个表格中嵌套另一个表格来创建一个子菜单或相关信息的分组。 4. **数据表格**：在数据表格中，嵌套表格可以用来显示相关联的数据，如订单明细、产品分类等。 使用表格嵌套进行网页布局： 1. **规划布局**：在设计网页之前，先规划好布局，确定需要嵌套的表格数量和层次。 2. **插入主表格**：首先插入一个主表格，作为整个布局的基础框架。 3. **嵌套子表格**：在主表格的某个单元格中插入子表格。子表格可以是另一个完整的表格，也可以是只包含几行或几列的表格。 4. **调整属性**：根据需要调整主表格和子表格的宽度、高度、对齐方式等属性，以确保布局的整洁和一致性。 5. **应用样式**：使用CSS样式表为主表格和子表格添加样式，如字体、颜色、背景等，以增强视觉效果。 6. **添加内容**：在表格的单元格中添加文本、图片等内容。 7. **测试布局**：在不同的浏览器和设备上测试布局，确保兼容性和响应性。 通过掌握表格嵌套的应用场景，以及学会使用表格嵌套进行网页布局，你可以创建出结构清晰、布局合理的网页。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中创建一个包含嵌套表格的网页。 2. 调整嵌套表格的宽度、高度和对齐方式。 3. 使用表格嵌套进行网页布局，创建一个简单的网页。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计并制作一个简单的网页，要求使用表格嵌套进行布局。 3.