2.3.5-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文档或者打开一个已有的HTML文档。 2. 在文档中，选择一个表格（如果需要，可以手动插入一个表格）。 3. 选中表格后，点击Dreamweaver顶部菜单栏中的“表格”（Table）选项。 4. 在下拉菜单中，选择“表格属性”（Table Properties）以打开表格属性对话框。 5. 在表格属性对话框中，点击“单元格”（Cell）选项卡。 6. 在“单元格”选项卡中，你可以设置各种单元格属性，例如： - 单元格边距（Cell Padding）：设置单元格内容与单元格边框之间的距离。 - 单元格间距（Cell Spacing）：设置相邻单元格之间的距离。 - 单元格宽度（Cell Width）和高度（Cell Height）：设置单元格的宽度和高度。 - 水平对齐（Horizontal Align）和垂直对齐（Vertical Align）：设置单元格内容在单元格内的水平和对齐方式。 - 单元格背景颜色（Background Color）：设置单元格的背景颜色。 - 单元格文本颜色（Text Color）：设置单元格中文本的颜色。 - 单元格边框颜色（Border Color）：设置单元格边框的颜色。 - 单元格边框样式（Border Style）：设置单元格边框的样式，例如实线、虚线等。 - 单元格边框宽度（Border Width）：设置单元格边框的宽度。 7. 根据需要设置好单元格属性后，点击“确定”按钮应用更改。 通过以上步骤，你可以在Dreamweaver CS5中设置单元格的属性，从而自定义表格的样式和布局。 单元格属性的设置技巧： 1. **宽度与高度**：设置单元格的宽度和高度时，可以使用像素值或百分比。百分比值可以使单元格根据表格的大小自动调整。 2. **对齐方式**：单元格的对齐方式可以设置为左对齐、居中或右对齐，以及顶部对齐、居中对齐或底部对齐。这有助于控制内容在单元格内的显示位置。 3. **背景颜色与图片**：为单元格设置背景颜色或背景图片，可以增强视觉效果。背景图片可以用来创建渐变效果或作为设计元素。 4. **边框**：单元格的边框属性决定了单元格的可见度。可以将边框设置为0像素以实现无边框效果，这在网页布局中很常见。 5. **单元格间距与填充**：通过调整单元格间距和填充，可以控制单元格内容的间距和外观。 使用单元格属性进行网页布局： 1. **规划布局**：在设计网页之前，先规划好布局，确定需要多少行和列。 2. **插入表格**：使用Dreamweaver的“插入表格”功能创建表格。 3. **调整单元格属性**：根据布局需求，调整单元格的宽度、高度、对齐方式等属性。