Dreamweaver CS3网页设计培训教程电子教案05

在单元格的【属性】面板中， 在单元格的【属性】面板中，可以对单元格 中的文本进行属性设置， 中的文本进行属性设置，其设置方法与普通 文本相同。另外， 文本相同。另外，还可以对单元格的对齐方 宽和高及是否换行等进行设置。 式、宽和高及是否换行等进行设置。
Dreamweaver CS3网页设计培训教程
5.2.2 典型案例 典型案例——美化“我的课 美化“ 美化 程表” 程表”表格
案例小结
本案例练习美化表格，包括对表格属性（ 本案例练习美化表格，包括对表格属性（ 如表格边框粗细、边框颜色、间距、 如表格边框粗细、边框颜色、间距、填充 对齐方式和高度等）及单元格属性（ 、对齐方式和高度等）及单元格属性（如 单元格的对齐方式和单元格高度等） 单元格的对齐方式和单元格高度等）进行 设置。通过这些设置， 设置。通过这些设置，可以使创建的表格 及其内容的显示效果更好。 及其内容的显示效果更好。
操作思路
列的表格。 （1）创建一个 行6列的表格。 ）创建一个5行 列的表格 列的前两个单元格合并， （2）将第 列的前两个单元格合并，将第 ）将第1列的前两个单元格合并 将第1 行的后5个单元格合并 个单元格合并。 行的后 个单元格合并。 行的后5个单元格中各插入一个 （3）在第 行的后 个单元格中各插入一个 ）在第3行的后 4行1列的嵌套表格，在第 行的后 个单元 列的嵌套表格， 行的后5个单元 行 列的嵌套表格 在第4行的后 格中各插入一个2行1列的嵌套表格。 格中各插入一个 行 列的嵌套表格。 列的嵌套表格 （4）在相应单元格中添加文本或图像。 ）在相应单元格中添加文本或图像。
Dreamweaver CS3网页设计培训教程
5.2.1 知识讲解
表格的属性很多，包括表格的宽度、 表格的属性很多，包括表格的宽度、高度 表格包含的行数、列数， ，表格包含的行数、列数，表格中各单元 格间的距离，单元格中内容与单元格边框 格间的距离， 线间的距离以及是否有边框、 线间的距离以及是否有边框、边框线粗细 和表格背景颜色等，下面分别进行讲解。 和表格背景颜色等，下面分别进行讲解。
Dreamweaver CS3网页设计培训教程
5.1.1 知识讲解
表格是进行页面布局时非常有用的工具。 表格是进行页面布局时非常有用的工具。 利用表格进行页面布局， 利用表格进行页面布局，可以将图像或文 本放置在表格的各个单元格中， 本放置在表格的各个单元格中，从而精确 控制其位置。 控制其位置。
Dreamweaver CS3网页设计培训教程
5.2.1 知识讲解
1.设置表格属性 2.设置单元格属性
Dreamweaver CS3网页设计培训教程
1.设置表格属性 设置表格属性
要进行表格属性设置，需先选中表格。 要进行表格属性设置，需先选中表格。选 中表格后， 属性】 中表格后，在【属性】面板可进行表格的 属性设置。 属性设置。
Dreamweaver CS3网页设计培训教程
5.1.2 典型案例 典型案例——制作“我的课 制作“ 制作 程表” 程表”表格
操作步骤
具体操作步骤请教师参照软件和书中内 容进行讲解。 容进行讲解。
Dreamweaver CS3网页设计培训教程
5.1.2 典型案例 典型案例——制作“我的课 制作“ 制作 程表” 程表”表格 案例小结
Dreamweaver CS3网页设计培训教程
5.3.2 “个人简历”网页的美 个人简历” 化
继续设置所有第2层嵌套表格的填充、 继续设置所有第 层嵌套表格的填充、间距和 层嵌套表格的填充 边框值分别为“ 、 边框值分别为“0”、“3”和“1”，边框颜色 和 ， 为“#FFFFFF”。 。 设置所有第2层嵌套表格中各单元格的水平对 设置所有第 层嵌套表格中各单元格的水平对 齐方式以及背景颜色。 齐方式以及背景颜色。 设置所有第3层嵌套表格中各单元格的水平对 设置所有第 层嵌套表格中各单元格的水平对 齐方式以及背景颜色。 齐方式以及背景颜色。
案例目标
本案例主要练习表格属性及单元格属性的 设置。 设置。
Dreamweaver CS3网页设计培训教程
5.2.2 典型案例 典型案例——美化“我的课 美化“ 美化 程表” 程表”表格
操作思路
（1）设置第 层（外层）表格的属性。 ）设置第1层 外层）表格的属性。 层表格的单元格属性。 （2）设置第 层表格的单元格属性。 ）设置第1层表格的单元格属性 （3）设置第 层（嵌套）表格的属性。 ）设置第2层 嵌套）表格的属性。 层表格的单元格属性。 （4）设置第 层表格的单元格属性。 ）设置第2层表格的单元格属性
Dreamweaver CS3网页设计培训教程
5.3 上机练习
5.3.1 “个人简历”网页的制作 个人简历” 5.3.2 “个人简历”网页的美化 个人简历”
Dreamweaver CS3网页设计培训教程
5.3.1 “个人简历”网页的制 个人简历” 作
本练习将利用表格进行页面布局。 本练习将利用表格进行页面布局。
Dreamweaver CS3网页设计培训教程
5.3.1 “个人简历”网页的制 个人简历” 作
操作思路
中创建一个9行 列 在Dreamweaver CS3中创建一个 行1列、宽度 中创建一个 像素、 像素、 为605像素、边框为 像素、其余值保持默认设 像素 边框为1像素 置的表格。 置的表格。 将素材图像“ 将素材图像“1px.gif”复制到保存网页文档的位 复制到保存网页文档的位 置。 在第3行中插入图像 行中插入图像“ 在第 行中插入图像“1px.gif”。 。 在第4～ 行中分别插入宽度为 行中分别插入宽度为90%的嵌套表格。 的嵌套表格。 在第 ～8行中分别插入宽度为 的嵌套表格 将各嵌套表格的第2行中的单元格合并 行中的单元格合并， 将各嵌套表格的第 行中的单元格合并，在合并 后的单元格中分别插入宽度为80%的嵌套表格。 的嵌套表格。 后的单元格中分别插入宽度为 的嵌套表格 输入文本，然后对文本的属性进行设置。 输入文本，然后对文本的属性进行设置。
本案例利用表格创建了一个“我的课程表” 本案例利用表格创建了一个“我的课程表”网 运用了创建表格、合并单元格、 页，运用了创建表格、合并单元格、输入文本 以及插入图像等知识。 以及插入图像等知识。在Dreamweaver CS3中 中 表格内容的对齐方式默认为“左对齐” ，表格内容的对齐方式默认为“左对齐”，而 浏览器中则为“ 在IE浏览器中则为“居中对齐”，所以在 浏览器中则为 居中对齐” Dreamweaver和IE浏览器中的效果有一定差别 和 浏览器中的效果有一定差别 ，为了避免因表格内容的默认对齐方式不同而 引起浏览效果与预期效果的不同， 引起浏览效果与预期效果的不同，需要在设计 网页时为表格设置属性， 网页时为表格设置属性，下面我们就来学习怎 样设置表格属性。 样设置表格属性。
Dreamweaver CS3网页设计培训教程
2.设置单元格属性 设置单元格属性
除了可以设置整个表格的属性外， 除了可以设置整个表格的属性外，还可对表 格的单元格、行或列的属性进行设置。 格的单元格、行或列的属性进行设置。选择 要设置属性的单元格、行或列后，其【属性】 要设置属性的单元格、行或列后， 属性】 面板如图所示。 面板如图所示。
Dreamweaver CS3网页设计培训教程
本课导读
表格在日常办公中很常见， 表格在日常办公中很常见，它能使数据的 显示更清晰明了， 显示更清晰明了，网页中的表格还有更重 要的作用——进行页面布局。表格可以将 进行页面布局。 要的作用 进行页面布局 网页分割为很多组合在一起的小块， 网页分割为很多组合在一起的小块，既加 快了网页的加载速度，又使网页整齐而美 快了网页的加载速度， 观。
第5课 用表格规范网页 课
本课要点 具体要求 本课导读 上机练习
Dreamweaver CS3网页设计培训教程
本课要点
表格的创建及基本编辑 表格属性设置
Dreamweaver CS3网页设计培训教程
具体要求
掌握普通表格及嵌套表格的创建方法 熟悉表格和单元格的选择方法 熟悉单元格的合并、 熟悉单元格的合并、拆分及删除方法 熟悉表格及单元格属性的设置方法 熟悉表格内容的添加方法
Dreamweaver CS3网页设计培训教程
5.2 表格属性设置
要使表格美观， 要使表格美观，需要对表格及单元格的属 性进行设置， 性进行设置，如设置边框线颜色和单元格 的对齐方式等。 的对齐方式等。
Dreamweaver CS3网页设计培训教程
5.2 表格属性设置
5.2.1 知识讲解 5.2.2 典型案例 典型案例——美化“我的课程 美化“ 美化 表”表格
Dreamweaver CS3网页设计培训教程
5.1.1 知识讲解
1.创建表格 创建表格 2.编辑表格 编辑表格
Dreamweaver CS3网页设计培训教程
1.创建表格 创建表格
在Dreamweaver CS3中，表格分为普通 中 表格和嵌套表格。 表格和嵌套表格。普通表格即是传统意义 上的表格，嵌套表格是在表格的某个单元 上的表格，嵌套表格是在表格的某个单元 格内插入的表格， 格内插入的表格，即表格之中再嵌套表格 。 1）创建普通表格 ） 2）创建嵌套表格 ）
Dreamweaver CS3网页设计培训教程
5.2.2 典型案例 典型案例——美化“我的课 美化“ 美化 程表” 程表”表格
操作步骤
具体操作步骤请教师参r CS3网页设计培训教程
5.2.2 典型案例 典型案例——美化“我的课 美化“ 美化 程表” 程表”表格
Dreamweaver CS3网页设计培训教程
2.编辑表格 编辑表格
表格创建好后，可以对表格进行合并或拆分单元格、 表格创建好后，可以对表格进行合并或拆分单元格、删 除或添加行（或列）等编辑操作。 除或添加行（或列）等编辑操作。在表格中添加图像和 文本等内容后，根据实际需要， 文本等内容后，根据实际需要，也可对表格的大小等进 行调整。 行调整。 1）选择整个表格 ） 2）选择行或列 ） 3）选择单元格 ） 4）拆分单元格 ） 5）合并单元格 ） 6）添加行或列 ） 7）删除行或列 ）
Dreamweaver CS3网页设计培训教程
5.1 创建及编辑表格
页面布局是网页制作的宏观设置， 页面布局是网页制作的宏观设置，使用表 格进行页面布局是其中最常用的手段。 格进行页面布局是其中最常用的手段。
Dreamweaver CS3网页设计培训教程
5.1 创建及编辑表格
5.1.1 知识讲解 5.1.2 典型案例 典型案例——制作“我的课程 制作“ 制作 表”表格
Dreamweaver CS3网页设计培训教程
5.1.2 典型案例 典型案例——制作“我的课 制作“ 制作 程表” 程表”表格
案例目标
本案例主要练习创建表格和添加简单的内 容。
Dreamweaver CS3网页设计培训教程
5.1.2 典型案例 典型案例——制作“我的课 制作“ 制作 程表” 程表”表格
Dreamweaver CS3网页设计培训教程
5.3.2 “个人简历”网页的美 个人简历” 化
本练习将对5.3.1节中制作的“个人简历” 节中制作的“个人简历” 本练习将对 节中制作的 网页进行美化。 网页进行美化。
Dreamweaver CS3网页设计培训教程
5.3.2 “个人简历”网页的美 个人简历” 化
操作思路
网页另存为“ 将“个人简历.html”网页另存为“个人简历 个人简历 网页另存为 2.html”。 。 选中最外层表格，设置填充、 选中最外层表格，设置填充、间距和边框值 分别为“ 、 分别为“0”、“2”和“0”，背景颜色和边框 和 ， 颜色均为“ 颜色均为“#FFFFFF”。 。 设置最外层表格9行单元格的水平对齐方式均 设置最外层表格 行单元格的水平对齐方式均 居中对齐” 行的垂直对齐方式为“ 为“居中对齐”、第1行的垂直对齐方式为“ 行的垂直对齐方式为 顶端对齐” 行的垂直对齐方式为“ 顶端对齐”、第2～6行的垂直对齐方式为“ ～ 行的垂直对齐方式为 居中对齐”。 居中对齐” 设置第1， ， ， 行单元格的背景颜色 行单元格的背景颜色。 设置第 ，2，3，9行单元格的背景颜色。