2.3.4-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，使用快捷键Ctrl+N新建一个HTML文档。 2. 点击工具栏上的表格按钮，弹出对话框，设置表格的行数、列数、表格宽度、边框粗细、单元格边距、单元格间距、页眉位置、表格标题、标题对齐方式等属性。 3. 插入表格后，底部属性面板可以进一步修改背景色、背景图片等属性。 具体来说，表格的属性包括边框（表格线的宽度）、单元格间距（单元格之间的距离）和单元格填充（单元格的内部填充）。通过设置这些属性，您可以自定义表格的外观和布局。 请注意，这些步骤是基于Dreamweaver CS5的，其他版本的Dreamweaver可能会有所不同。如果您使用的是其他版本的Dreamweaver，建议查阅相应的官方文档或在线教程以获取准确的设置方法。 表格属性的设置技巧： 1. **宽度与高度**：设置表格的宽度和高度时，可以使用像素值或百分比。百分比值可以使表格根据浏览器窗口的大小自动调整。 2. **边框**：表格的边框属性决定了表格的可见度。可以将边框设置为0像素以实现无边框效果，这在网页布局中很常见。 3. **单元格间距与填充**：通过调整单元格间距和填充，可以控制表格内容的间距和外观。 4. **对齐方式**：表格的对齐方式可以设置为左对齐、居中或右对齐，以适应不同的设计需求。 5. **背景颜色与图片**：可以为表格设置背景颜色或背景图片，以增强视觉效果。 6. **合并与拆分单元格**：通过合并单元格，可以创建跨越多行或多列的大单元格。拆分单元格则可用于创建嵌套表格或实现复杂的布局。 使用表格属性进行网页布局： 1. **规划布局**：在设计网页之前，先规划好布局，确定需要多少行和列。 2. **插入表格**：使用Dreamweaver的“插入表格”功能创建表格。 3. **调整表格属性**：根据布局需求，调整表格的宽度、高度、边框等属性。 4. **合并和拆分单元格**：通过合并和拆分单元格来创建复杂的布局结构。 5. **应用样式**：使用CSS样式表为表格和单元格添加样式，如字体、颜色、背景等。 6. **添加内容**：在表格的单元格中添加文本、图片等内容。 7. **测试布局**：在不同的浏览器和设备上测试布局，确保兼容性和响应性。 通过掌握表格属性的设置技巧，以及学会使用表格属性进行网页布局，你可以创建出结构清晰、布局合理的网页。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中设置一个表格的宽度、高度和边框属性。 2. 设置表格的对齐方式和背景颜色。 3. 使用表格属性进行网页布局，创建一个简单的网页。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计并制作一个简单的网页，要求使用表格属性进行布局。 3. 收集相关资料，了解网页设计中的表格属性设置技