2.3.1-DreamweaverCS5表格的排版原则（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 DreamweaverCS5表格的排版原则 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握Dreamweaver CS5中表格的基本操作。 · 了解表格排版的原则和技巧。 · 学会使用表格进行网页布局。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 表格的基本操作。 · 表格排版的原则和技巧。 · 使用表格进行网页布局的方法 教学难点 1. 如何合理地使用表格进行网页布局。 2. 如何调整表格的宽度、高度和对齐方式。 3. 如何合并和拆分单元格以实现复杂的表格布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生理解表格排版的原则和技巧。 2. 实践操作法：通过动手实践，让学生掌握表格的基本操作和网页布局方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上一节课内容，强调表格在网页设计中的重要性。 2. 展示几个使用表格进行布局的优秀网页实例，激发学生的学习兴趣。 3. 提出问题，引导学生思考如何利用表格进行网页布局。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中，表格是网页设计中的一个重要工具，用于展示和组织数据。掌握表格的基本操作对于创建和管理网页布局至关重要。以下是Dreamweaver CS5中表格的一些基本操作： 1. **插入表格**： - 打开Dreamweaver CS5，并打开你的网页文件或在工作区中新建一个网页。 - 将光标放置到你希望插入表格的位置。 - 点击菜单栏中的“插入”选项。 - 从下拉菜单中选择“表格”，这将打开一个对话框。 - 在弹出的对话框中，你可以设置表格的行数、列数、表格宽度、边框厚度、单元格边距和单元格间距等参数。 - 设置完成后，点击“确定”按钮，表格将被插入到网页中。 2. **编辑表格**： - **选择表格**：点击表格的任何部分，表格的边框会显示出来，表示表格已被选中。 - **调整表格大小**：将鼠标指针放在表格边框上，直到它变成一个双向箭头，然后拖动以调整表格的大小。 - **增加/减少行或列**：右键点击表格，选择“插入行”或“插入列”来增加新的行或列；选择“删除行”或“删除列”来移除不需要的行或列。 - **合并单元格**：选中两个或多个相邻的单元格，右键点击，选择“合并单元格”。 - **拆分单元格**：选中一个单元格，右键点击，选择“拆分单元格”。 3. **设置表格属性**： - 选中表格后，可以在属性检查器中设置表格的属性，如表格ID、类、源文件、边框、背景颜色等。 - 也可以通过右键点击表格，选择“表格属性”来进行设置。 4. **设置单元格属性**： - 选中单元格后，可以在属性检查器中设置单元格的属性，如垂直对齐、水平对齐、背景颜色、边框等。 - 也可以通过右键点击单元格，选择“单元格属性”来进行设置。 5. **使用表格进行布局**： - 利用表格的嵌套功能，可以创建复杂的布局。嵌套表格是指在另一个表格的单元格中插入另一个表格。 - 通过合并和拆分单元格，可以创建不规则的布局，以满足特定的设计需求。 6. **预览和调整**： - 在Dreamweaver中工作时，可以使用“实时视图”预览表格的实际显示效果。 - 根据预览结果调整表格的布局和样式，直到达到满意的效果。 掌握这些基本操作后，你就可以开始使用Dreamweaver CS5的表格功能来设计和布局你的网页了。记得在实际工作中多加练习，以便更熟练地使用表格。 在Dreamweaver CS5中，表格排版是网页设计中不可或缺的一部分。通过合理地使用表格，可以有效地组织和展示文本、图片等元素，使页面看起来美观且条理清晰。以下是一些关于Dreamweaver CS5中表格排版的原则和技巧： 1. **整体布局概念**：在开始设计页面之前，应先在脑海中形成一个整体的布局概念。这将帮助您在Dreamweaver中更准确地安排元素的位置。 2. **表格嵌套与合并拆分**：通过