dreamweaver cs3网页设计培训教本电子教本05.pptVIP

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