2.3.2-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. 如何调整表格的宽度、高度和对齐方式。 3. 如何合并和拆分单元格以实现复杂的表格布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生理解表格在网页设计中的应用。 2. 实践操作法：通过动手实践，让学生掌握在Dreamweaver CS5中插入表格的方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上一节课内容，强调表格在网页设计中的重要性。 2. 展示几个使用表格进行布局的优秀网页实例，激发学生的学习兴趣。 3. 提出问题，引导学生思考如何利用表格进行网页布局。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中插入表格的方法如下： 1. 打开Dreamweaver CS5软件，进入页面编辑模式。 2. 在页面中需要添加表格的地方单击，选择“插入—表格”或在常用面板中选择“表格”图标。 3. 在弹出的“表格”对话框中，设置表格的行数、列数、宽度、高度等属性。宽度和高度的单位可以是像素或百分比。 4. 设置完成后，点击“确定”按钮，表格将被插入到页面中。 5. 选中表格，在属性控制面板中可设置表格属性。点击具体单元格可对其单独设置属性和编辑内容。若需要合并/拆分单元格，则选中需要执行操作的单元格，点击属性窗口中相应命令即可。 6. 内容输入完毕后，选中表格，在属性中将其间距和边框均设置为0，即可保留布局效果，此时在浏览器中将不显示表格框线，仅保留布局效果。 以上就是在Dreamweaver CS5中插入表格的基本步骤，希望对您有所帮助。 表格的基本结构： 1. **行（Row）**：表格中的一行数据。 2. **列（Column）**：表格中的一列数据。 3. **单元格（Cell）**：表格中行与列的交叉区域，用于存放数据。 4. **表头（Header）**：表格的标题行，通常用于描述表格的内容。 表格的属性： 1. **宽度（Width）**：表格的宽度，可以设置为固定像素值或百分比。 2. **高度（Height）**：表格的高度，同样可以设置为固定像素值或百分比。 3. **边框（Border）**：表格的边框宽度和样式。 4. **背景颜色（Background Color）**：表格的背景颜色。 5. **对齐方式（Align）**：表格的对齐方式，如左对齐、居中或右对齐。 6. **单元格间距（Cell Spacing）**：表格中单元格之间的间距。 7. **单元格边距（Cell Padding）**：表格中单元格内容与边框之间的距离。 使用表格进行网页布局： 1. **规划布局**：在设计网页之前，先规划好布局，确定需要多少行和列。 2. **插入表格**：在Dreamweaver中使用“插入表格”功能创建表格。 3. **调整表格属性**：根据需要调整表格的宽度、高度、边框等属性。 4. **合并和拆分单元格**：通过合并和拆分单元格来创建复杂的布局结构。 5. **应用样式**：使用CSS样式表为表格和单元格添加样式，如字体、颜色、背景等。 6. **添加内容**：在表格的单元格中添加文本、图片等内容。 7. **测试布局**：在不同的浏览器和设备上测试布局，确保兼容性和响应性。 通过掌握表格的基本结构和属性，以及学会使用表格进行网页布局，你可以创建出结构清晰、布局合理的网页。 10分钟 7分钟 自主学习 8分钟 练习训练 · 在Dreamweaver CS5中插入一个简单的表格，包括行、列和单元格。 · 调整表格的宽度、高度和对齐方式。 ·