学习情境5-使用表格布局完整的网页.pptVIP

* * 主 讲 ：小 胡 网页设计与制作　　　　——学习情境5：使用表格布局完整的网页 布置习题 学习目标 知识讲解 课堂实践 教学总结 使用表格布局完整的网页 学习情境5 课程引导 网页制作是免不了与表格打交道的。表格是早期网页制作重要的布局对象，在网页布局中起着举足轻重的作用，但随着CSS的强大功能被人们所熟知和熟练应用后，表格布局一统天下的局面得以改变，人们越来越觉得表格应回归其本位----即数据表。今天，我们更多地是采用div+css的布局方法来制作网页。但对于初学者来讲，熟悉表格的用法和表格布局仍然是制作网页制作的”敲门砖”。 概述 布置习题 知识讲解 课堂实践 教学总结 课程引导 使用表格布局完整的网页 学习情境5 学习目标 学会添加表格、设置表格属性 掌握设置表格中行和列属性的方法 掌握拆分单元格，合并单元格的方法 掌握在表格中输入文字并定位的方法 掌握在表格中插入图像并定位的方法 学习目标 专业能力目标 专业知识目标 专业素质目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 使用表格布局完整的网页 学习情境5 学习目标 页面布局的概念与要求 创建表格、设置表格属性、选择表格的方法 增删表格的行列、合并和拆分单元格、添加表格的背景颜色 导入、导出表格式数据、排序表格的数据 专 业 能 力 目 标 布置习题 知识讲解 课堂实践 教学总结 课程引导 使用表格布局完整的网页 学习情境5 学习目标 熟练使用Dreamweaver CS3表格基本操作的能力 利用表格进行页面布局的能力 专 业 知 识 目 标 布置习题 知识讲解 课堂实践 教学总结 课程引导 使用表格布局完整的网页 学习情境5 学习目标 自主学习能力 创新能力 色彩感悟能力 知识应用能力 效率观念 结构布局能力 专 业 素 质 目 标 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 教学案例 案例01 – 制作产品销售表 案例02 – 制作圆角表格 案例03 – 处理表格中的数据 综合案例实训 - 制作“某科技有限公司”公司业绩页面 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 案例操作过程(P81-82) 相关知识点(P83-84) 案例01 – 制作产品销售表 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 数据表格（如产品销售表） 定位网页元素 表格的作用 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 用表格最大的优点就是能在不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表格，可以放置网页上的任何元素，什么功能都能实现。 而它的缺点就是不能自由的移动它的位置。 表格布局网页的优缺点 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 菜单命令创建 利用“常用”插入栏创建 HTML代码创建 DW中创建表格 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 创建表格的时候可以指定表格的基本属性，而在表格创建完后，也可以根据需要在“属性”面板中重新调整其基本属性。要设置表格的属性首先应该选中表格，如果在设计视图中用鼠标直接选不好选的话，可以借助标签选择器来选择 设置表格属性 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 案例02 – 制作圆角表格 案例操作过程(P85-87) 相关知识点(P88-89) 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 “修改表格插入行” (Ctrl+M) “修改表格插入列” (Ctrl+Shift+A) “修改表格删除行” (Ctrl+Shift+M) “修改表格删除列” (Ctrl+Shift+-) 利用菜单、快捷菜单或快捷键都可以完成 增加、删除行或列 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 合并单元格 “修改表格合并单元格” 拆分单元格 “修改表格拆分单元格” 也可利用属性面板中的“合并与拆分单元格”按钮 合并、拆分单元格 这里也可以合并和拆分单元格 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 为表格设置背景颜色 课堂实践 布置习题 学习目标 教学总结 课程引导 使用表格布局完整的网页 学习情境5 知识讲解 相关知识点 关键两点：