2.3.3-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 CS5中打开或创建一个包含表格的HTML文档。 2. 将鼠标指针移至表格上，直到出现一个小的十字形图标（称为“表格选择器”）。 3. 单击该图标以选中整个表格。选中的表格将显示为虚线边框。 4. 若要选择表格的某个单元格，请将鼠标指针移至该单元格上，直到出现一个小的十字形图标。然后单击以选中该单元格。 5. 若要选择多个单元格，请在按住鼠标左键的同时，拖动鼠标以绘制一个矩形选择区域。松开鼠标左键后，所选区域内的所有单元格将被选中。 6. 若要选择多行或多列，请将鼠标指针移至表格的左上角，直到出现一个小的十字形图标。然后按住鼠标左键，拖动鼠标以选择所需的行或列。 7. 若要选择整个表格的行或列，请将鼠标指针移至表格的左上角，直到出现一个小的十字形图标。然后双击以选中整个表格的行或列。 8. 若要取消选择，请在表格上单击，或按键盘上的Esc键。 通过以上步骤，您可以在Dreamweaver CS5中轻松地选择、编辑和操作表格元素。 表格元素的选择技巧： 1. **使用表格选择器**：当鼠标指针悬停在表格上时，会出现一个小十字形图标，称为表格选择器。点击这个图标可以选择整个表格。 2. **选择单元格**：将鼠标指针悬停在单元格上，直到出现小十字形图标，然后点击可以选择单个单元格。 3. **多选单元格**：按住`Ctrl`键（Mac上为`Cmd`键）的同时点击不同的单元格，可以选择多个不连续的单元格。或者，拖动鼠标以选择一系列连续的单元格。 4. **选择整行或整列**：将鼠标指针悬停在表格的顶部或左侧边缘，直到出现双箭头图标，然后点击可以选择整行或整列。 5. **使用键盘**：使用键盘的方向键可以移动表格选择器的位置，从而选择不同的单元格。 6. **取消选择**：点击表格外的任何地方或使用键盘的`Esc`键可以取消选择。 使用表格元素进行网页布局： 1. **规划布局**：在开始设计之前，规划好网页的布局，确定需要多少行和列。 2. **插入表格**：使用Dreamweaver的“插入表格”功能创建表格。 3. **调整表格属性**：根据需要调整表格的宽度、高度、边框等属性。 4. **合并和拆分单元格**：通过合并和拆分单元格来创建复杂的布局结构。 5. **应用样式**：使用CSS样式表为表格和单元格添加样式，如字体、颜色、背景等。 6. **添加内容**：在表格的单元格中添加文本、图片等内容。 7. **测试布局**：在不同的浏览器和设备上测试布局，确保兼容性和响应性。 通过掌握表格元素的选择技巧，以及学会使用表格元素进行网页布局，你可以创建出结构清晰、布局合理的网页。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中选择一个完整的表格。 2. 选择表格中的某一行