第3章-表格和布局表格-实战Dreamweaver8网页制作教程电子教案课件.ppt

《第3章-表格和布局表格-实战Dreamweaver8网页制作教程电子教案课件.ppt》由会员分享，可在线阅读，更多相关《第3章-表格和布局表格-实战Dreamweaver8网页制作教程电子教案课件.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.1第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格学习目标学习目标学习目标学习目标vv 能够插入表格，会使用属性面板和菜单对表格进行设定和编辑能够插入表格，会使用属性面板和菜单对表格进行设定和编辑能够插入表格，会使用属性面板和菜单对表格进行设定和编辑能够插入表格，会使用属性面板和菜单对表格进行设定和编辑3.2第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑表格的建立和编辑表格的建立和编辑3.23.2表格在页面布局中的应用表格在页面布局中的应用表格在页面布局中的应用表格在页面布局中的应

2、用3.33.3布局表格的设置与应用布局表格的设置与应用布局表格的设置与应用布局表格的设置与应用本章内容本章内容本章内容本章内容3.3第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑3.1.1 3.1.1 案例制作：案例制作：案例制作：案例制作：20062006世界杯世界杯世界杯世界杯E E组对阵表组对阵表组对阵表组对阵表 通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、通过本案例的操作，你将学会：如何建立表格和插入表格内

3、容、如何选中表格、行、通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制作细线表格。作细线表格。作细线表格。作细线表格。3.4第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑3 3.1.2.1.2

4、 新知解析新知解析新知解析新知解析1.1.创建表格创建表格创建表格创建表格 创建表格可以通过创建表格可以通过创建表格可以通过创建表格可以通过“插入插入插入插入”面板或菜单两种方面板或菜单两种方面板或菜单两种方面板或菜单两种方法实现。步骤如下：法实现。步骤如下：法实现。步骤如下：法实现。步骤如下：vv 将光标移到要插入表格的位置将光标移到要插入表格的位置将光标移到要插入表格的位置将光标移到要插入表格的位置。vv 打开打开打开打开“插入插入插入插入”面板，切换到面板，切换到面板，切换到面板，切换到“常用常用常用常用”选项下，选项下，选项下，选项下，单击单击单击单击 表格按钮，或单击菜单表格按钮，或

5、单击菜单表格按钮，或单击菜单表格按钮，或单击菜单“插入插入插入插入”“”“表格表格表格表格”命令，命令，命令，命令，弹出弹出弹出弹出“表格表格表格表格”对话框，如右图所示，可根据需要对话框，如右图所示，可根据需要对话框，如右图所示，可根据需要对话框，如右图所示，可根据需要 进行相应的参数设置。进行相应的参数设置。进行相应的参数设置。进行相应的参数设置。vv 单击单击单击单击“确定确定确定确定”按钮。按钮。按钮。按钮。3.5第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.6第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格2.2.

6、选取表格元素选取表格元素选取表格元素选取表格元素 （1 1）选取整个表格）选取整个表格）选取整个表格）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表格。或光标放在表格中时，点击菜单格。或光标放在表格中时，点击菜单格。或光标放在表格中时，点击菜单格。或光标放在表格中时，点击菜单“修改修改修改修改”“”“表格表格表格表格”“”“选择表格选择表格选择表格选择表格”命令。也可命令。也可命令。也可命令。也可以将光标放在单元格中，在

7、文档窗口的左下角的标签选择器中选择以将光标放在单元格中，在文档窗口的左下角的标签选择器中选择以将光标放在单元格中，在文档窗口的左下角的标签选择器中选择以将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”“Table”标签，标签，标签，标签，选取整个表格。选取整个表格。选取整个表格。选取整个表格。（2 2）选取单元格）选取单元格）选取单元格）选取单元格 将鼠标指针移动到某个单元格上，按住将鼠标指针移动到某个单元格上，按住将鼠标指针移动到某个单元格上，按住将鼠标指针移动到某个单元格上，按住CtrlCtrl键不放，再单击，就键不放，再单击，就键不放，再单击，就键不放，再单击，就可

8、以选中这个单元格。按住可以选中这个单元格。按住可以选中这个单元格。按住可以选中这个单元格。按住CtrlCtrl键，再逐个单击要选取的单元格，就可以选中不连续键，再逐个单击要选取的单元格，就可以选中不连续键，再逐个单击要选取的单元格，就可以选中不连续键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。光标移到某个单元格中，按住的多个单元格。光标移到某个单元格中，按住的多个单元格。光标移到某个单元格中，按住的多个单元格。光标移到某个单元格中，按住ShiftShift键鼠标点击另外一个单元格，则这键鼠标点击另外一个单元格，则这键鼠标点击另外一个单元格，则这键鼠标点击另外一个单元格，则这两个单

9、元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖拽的方法可以选取连续的一片单元格。拽的方法可以选取连续的一片单元格。拽的方法可以选取连续的一片单元格。拽的方法可以选取连续的一片单元格。（3 3）选取行或列）选取行或列）选取行或列）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元从一个单

10、元格开始，拖动鼠标选中整行和整列的单元格，单元从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行或列的图标出现时，单击鼠标即可选择行或列。或列的图标出现时，单击鼠标即可选择行或列。或列的图标出现时，单击鼠标即可选择行或列。或列的图标出现时，单击鼠标即可选择行或列。3.1表格的建立和编辑表格的建立和编

11、辑3.7第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑3.3.设定表格和单元格属性设定表格和单元格属性设定表格和单元格属性设定表格和单元格属性（1 1）表格属性）表格属性）表格属性）表格属性 当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修改表格的行数、列数、大小等属性。表格的属性面板如下

12、图所示。其中行、列、宽、改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、宽、改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、宽、改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。3.8第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑

13、表格的建立和编辑（2 2）行列和单元格属性的设定）行列和单元格属性的设定）行列和单元格属性的设定）行列和单元格属性的设定 这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目完全一样，差别只是应用属性的范围不同而已。选择行、列或单元格后属性面板如下完全一样，差别只是应用属性的范围不同而已。选择行、列或单元格后属性面板如下完全一样，差别只是应用属性的范围不同而已。选择行、

14、列或单元格后属性面板如下完全一样，差别只是应用属性的范围不同而已。选择行、列或单元格后属性面板如下图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、列或单元格属性的设定。列或单元格属性的设定。列或单元格属性的设定。列或单元格属性的设定。3.9第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.10第第第第3 3章

15、章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑（4 4）删除行和列）删除行和列）删除行和列）删除行和列 将光标置于要删除的行或列中的任意一个单元格，单击菜单将光标置于要删除的行或列中的任意一个单元格，单击菜单将光标置于要删除的行或列中的任意一个单元格，单击菜单将光标置于要删除的行或列中的任意一个单元格，单击菜单“修改修改修改修改”“”“表格表格表格表格”“”“删除行删除行删除行删除行”或或或或“删除列删除列删除列删除列”命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择命

16、令，则删除当前行或列。或者右键单击，在弹出的菜单中选择命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择“表格表格表格表格”“”“删除行删除行删除行删除行”或或或或“删除列删除列删除列删除列”命令，则删除当前行或列。命令，则删除当前行或列。命令，则删除当前行或列。命令，则删除当前行或列。（5 5）拆分与合并单元格）拆分与合并单元格）拆分与合并单元格）拆分与合并单元格 拆分只能在一个单元格中进行，合并单元格应在多于一个单元格中进行。拆分只能在一个单元格中进行，合并单元格应在多于一个单元格中进行。拆分只能在一个单元格中进行，合并单元格应在多于一个单元格中进行。拆分只能在一个单元格中进行，合并

17、单元格应在多于一个单元格中进行。合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮 进行合并，进行合并，进行合并，进行合并，或单击菜单或单击菜单或单击菜单或单击菜单“修改修改修改修改”“”“表格表格表格表格”“”“合并单元格合并单元格合并单元格合并单元格”命令进行相应操作。命令进行相应操作。命令进行相应操作。命令进行相应操作。拆分单元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮拆分单

18、元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮拆分单元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮拆分单元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮 ，或单击菜单，或单击菜单，或单击菜单，或单击菜单“修改修改修改修改”“”“表格表格表格表格”“”“合并单元格合并单元格合并单元格合并单元格”命令，会弹出命令，会弹出命令，会弹出命令，会弹出“拆分单元格拆分单元格拆分单元格拆分单元格”对话框，如图所示。设对话框，如图所示。设对话框，如图所示。设对话框，如图所示。设定拆分方式和数值，单击定拆分方式和数值，单击定拆分方式和数值，单击定拆分方式和数值，单击“确定确定确定确定”按钮

19、。按钮。按钮。按钮。3.11第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑（6 6）表格的复制与粘贴）表格的复制与粘贴）表格的复制与粘贴）表格的复制与粘贴 表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩形，点击菜单形，点击菜单形，点击菜单形，点击菜单“编辑编辑编辑编辑”“”“复制

20、复制复制复制”或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择“复制复制复制复制”。表格的粘贴方法表格的粘贴方法表格的粘贴方法表格的粘贴方法 选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单“编辑编辑编辑编辑”“”“粘贴粘贴粘贴粘贴”或者右击，或者右击，或者右击，或者右击，在弹出的菜单中选择在弹出的菜单中选择在弹出的菜单中选择在弹出的菜单中选择“粘贴粘贴粘贴粘贴”，会根据选择区域的不同粘贴单元格。，会根据选择区域的不同粘贴单元格。，会根据选择区域的不同粘贴单元

21、格。，会根据选择区域的不同粘贴单元格。3.12第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑3.1.3 3.1.3 技巧提示技巧提示技巧提示技巧提示1.1.填充和间距填充和间距填充和间距填充和间距2.2.细线表格和细线的制作细线表格和细线的制作细线表格和细线的制作细线表格和细线的制作3.14第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.15第第第第3 3章章章章 表格和布局表格表格和布局表格表

22、格和布局表格表格和布局表格3.23.2表格在页面布局中的应用表格在页面布局中的应用3.2.1 3.2.1 案例制作：网站案例制作：网站案例制作：网站案例制作：网站“球星风采球星风采球星风采球星风采”主页主页主页主页 通过本案例的操作，你将学会：如通过本案例的操作，你将学会：如通过本案例的操作，你将学会：如通过本案例的操作，你将学会：如何建立表格和设置表格的背景图像、如何建立表格和设置表格的背景图像、如何建立表格和设置表格的背景图像、如何建立表格和设置表格的背景图像、如何选中表格、行、单元格和设定其尺寸、何选中表格、行、单元格和设定其尺寸、何选中表格、行、单元格和设定其尺寸、何选中表格、行、单元

23、格和设定其尺寸、对齐方式、如何设定表格的嵌套和叠加、对齐方式、如何设定表格的嵌套和叠加、对齐方式、如何设定表格的嵌套和叠加、对齐方式、如何设定表格的嵌套和叠加、如何利用如何利用如何利用如何利用marqueemarquee语句制作跑马灯效果、语句制作跑马灯效果、语句制作跑马灯效果、语句制作跑马灯效果、如何利用表格单元格制作细线。如何利用表格单元格制作细线。如何利用表格单元格制作细线。如何利用表格单元格制作细线。3.16第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.23.2表格在页面布局中的应用表格在页面布局中的应用3 3.2.2.2.2 新知解析新知解析新知

24、解析新知解析1.1.表格的嵌套表格的嵌套表格的嵌套表格的嵌套 要设计一个版式精美的网站，需要应用表格的嵌套。原因要设计一个版式精美的网站，需要应用表格的嵌套。原因要设计一个版式精美的网站，需要应用表格的嵌套。原因要设计一个版式精美的网站，需要应用表格的嵌套。原因有以下两个方面：有以下两个方面：有以下两个方面：有以下两个方面：首先，网页的排版有时会很复杂，在外部需要有一个表格首先，网页的排版有时会很复杂，在外部需要有一个表格首先，网页的排版有时会很复杂，在外部需要有一个表格首先，网页的排版有时会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来控制总体布局。如果这

25、时一些内部排版的细节也通过总表格来控制总体布局。如果这时一些内部排版的细节也通过总表格来控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。实现，容易引起行高列宽等的冲突，给表格制作带来困难。实现，容易引起行高列宽等的冲突，给表格制作带来困难。实现，容易引起行高列宽等的冲突，给表格制作带来困难。其次，浏览器在解析网页的时候，是将整个表格的结构下其次，浏览器在解析网页的时候，是将整个表格的结构下其次，浏览器在解析网页的时候，是将整个表格的结构下其次，浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂

26、，浏载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。览者要等待很长时间才能看到网页内容。览者要等待很长时间才能看到网页内容。览者要等待很长时间才能看到网页内容。因此在版面设计中引入表格嵌套，由总表格负责整体的排因此在版面设计中引入表格嵌套，由总表格负责整体的排因此在版面设计中引入表格嵌套，由总表格负责整体的排因此在版面设计中引入表格嵌套，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的版，由嵌套的表格负责各个子栏目的排版

27、，并插入到总表格的版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置。左图所示为表格嵌套的一个例子。相应位置。左图所示为表格嵌套的一个例子。相应位置。左图所示为表格嵌套的一个例子。相应位置。左图所示为表格嵌套的一个例子。创建嵌套表格的操作方法是：将光标置于要插入嵌套表格创建嵌套表格的操作方法是：将光标置于要插入嵌套表格创建嵌套表格的操作方法是：将光标置于要插入嵌套表格创建嵌套表格的操作方法是：将光标置于要插入嵌套表格的单元格中，选择菜单的单元格中，选择菜单的单元格中，选择菜单的单元格中，选择菜单“插入插入插入插入”“”“表格表格

28、表格表格”命令。命令。命令。命令。3.17第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.18第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.3.利用利用利用利用标记符设置跑马灯效果标记符设置跑马灯效果标记符设置跑马灯效果标记符设置跑马灯效果 基本语法：基本语法：基本语法：基本语法：文字或图片文字或图片文字或图片文字或图片 该语法只适用于该语法只适用于该语法只适用于该语法只适用于IEIE浏览器中显示，只能在浏览器中显示，只能在浏览器中显示，只能在浏览器中显示，只能在标记中使用。作用是标记中使用。作用是标记中使用。作用是标记

29、中使用。作用是实现标记中的内容在页面中移动的效果。实现标记中的内容在页面中移动的效果。实现标记中的内容在页面中移动的效果。实现标记中的内容在页面中移动的效果。3.2表格在页面布局中的应用表格在页面布局中的应用3.19第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.23.2表格在页面布局中的应用表格在页面布局中的应用3.2.3 3.2.3 技巧提示技巧提示技巧提示技巧提示1.1.嵌套注意事项嵌套注意事项嵌套注意事项嵌套注意事项2 2.鼠标对跑马灯特效的影响鼠标对跑马灯特效的影响鼠标对跑马灯特效的影响鼠标对跑马灯特效的影响3.20第第第第3 3章章章章 表格和布

30、局表格表格和布局表格表格和布局表格表格和布局表格3.23.2表格在页面布局中的应用表格在页面布局中的应用3.2.4 3.2.4 实战演练：网站实战演练：网站实战演练：网站实战演练：网站“球星风采球星风采球星风采球星风采”子页的制作子页的制作子页的制作子页的制作 通过本案例的操作，你将学会：如何建通过本案例的操作，你将学会：如何建通过本案例的操作，你将学会：如何建通过本案例的操作，你将学会：如何建立表格和设置表格的背景图像、如何选中表立表格和设置表格的背景图像、如何选中表立表格和设置表格的背景图像、如何选中表立表格和设置表格的背景图像、如何选中表格、行、单元格和设定其尺寸、对齐方式、格、行、单元

31、格和设定其尺寸、对齐方式、格、行、单元格和设定其尺寸、对齐方式、格、行、单元格和设定其尺寸、对齐方式、如何设定表格的嵌套和叠加、如何利用如何设定表格的嵌套和叠加、如何利用如何设定表格的嵌套和叠加、如何利用如何设定表格的嵌套和叠加、如何利用marqueemarquee语句制作跑马灯效果、如何利用表语句制作跑马灯效果、如何利用表语句制作跑马灯效果、如何利用表语句制作跑马灯效果、如何利用表格单元格制作细线。格单元格制作细线。格单元格制作细线。格单元格制作细线。3.21第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.33.3布局表格的设置与应用布局表格的设置与应用3

32、.3.1 3.3.1 案例制作：网站案例制作：网站案例制作：网站案例制作：网站“闪闪作坊闪闪作坊闪闪作坊闪闪作坊”页眉部分页眉部分页眉部分页眉部分 通过本案例的操作，你将学会：如何绘制布局表格、嵌套布局表格、布局单元格和通过本案例的操作，你将学会：如何绘制布局表格、嵌套布局表格、布局单元格和通过本案例的操作，你将学会：如何绘制布局表格、嵌套布局表格、布局单元格和通过本案例的操作，你将学会：如何绘制布局表格、嵌套布局表格、布局单元格和移动布局表格、布局单元格、如何选中布局表格、布局单元格和设定其尺寸、对齐方移动布局表格、布局单元格、如何选中布局表格、布局单元格和设定其尺寸、对齐方移动布局表格、布

33、局单元格、如何选中布局表格、布局单元格和设定其尺寸、对齐方移动布局表格、布局单元格、如何选中布局表格、布局单元格和设定其尺寸、对齐方式、如何插入鼠标经过图像。式、如何插入鼠标经过图像。式、如何插入鼠标经过图像。式、如何插入鼠标经过图像。3.22第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.33.3布局表格的设置与应用布局表格的设置与应用3 3.3.2.3.2 新知解析新知解析新知解析新知解析1.1.表格视图模式表格视图模式表格视图模式表格视图模式 Dreamweaver 8 Dreamweaver 8为表格提供了标准视图、扩展视图、布局视图三种视图模式。默

34、为表格提供了标准视图、扩展视图、布局视图三种视图模式。默为表格提供了标准视图、扩展视图、布局视图三种视图模式。默为表格提供了标准视图、扩展视图、布局视图三种视图模式。默认情况下是标准视图，即传统的表格使用方式。认情况下是标准视图，即传统的表格使用方式。认情况下是标准视图，即传统的表格使用方式。认情况下是标准视图，即传统的表格使用方式。2.2.切换布局视图切换布局视图切换布局视图切换布局视图 在在在在“插入插入插入插入”面板的面板的面板的面板的“布局布局布局布局”选项卡中单击选项卡中单击选项卡中单击选项卡中单击“布局布局布局布局”按钮，进入布局视图模式。按钮，进入布局视图模式。按钮，进入布局视图

35、模式。按钮，进入布局视图模式。3.23第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.24第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格4.4.绘制嵌套表格绘制嵌套表格绘制嵌套表格绘制嵌套表格 创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创建嵌套表格的步骤是：建嵌套表格的步骤是：建嵌套表格的步骤是：建嵌套表格的

36、步骤是：在布局视图中，单击在布局视图中，单击在布局视图中，单击在布局视图中，单击“布局表格布局表格布局表格布局表格”按钮，在页面中绘制出布局表格。再单击按钮，在页面中绘制出布局表格。再单击按钮，在页面中绘制出布局表格。再单击按钮，在页面中绘制出布局表格。再单击“布局表格布局表格布局表格布局表格”按钮，在已有的表格中绘制表格，形成嵌套表格。按钮，在已有的表格中绘制表格，形成嵌套表格。按钮，在已有的表格中绘制表格，形成嵌套表格。按钮，在已有的表格中绘制表格，形成嵌套表格。5.5.在单元格中添加内容在单元格中添加内容在单元格中添加内容在单元格中添加内容 在布局单元格中可以插入任何类型的数据。在插入时

37、，把光标移到要插入内在布局单元格中可以插入任何类型的数据。在插入时，把光标移到要插入内在布局单元格中可以插入任何类型的数据。在插入时，把光标移到要插入内在布局单元格中可以插入任何类型的数据。在插入时，把光标移到要插入内容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数据的长度而变化。在输入数据时，只能向布局单元格中输入数据，而不能向布局据的长度而变化。在输入数据时，只

38、能向布局单元格中输入数据，而不能向布局据的长度而变化。在输入数据时，只能向布局单元格中输入数据，而不能向布局据的长度而变化。在输入数据时，只能向布局单元格中输入数据，而不能向布局表格中输入数据。表格中输入数据。表格中输入数据。表格中输入数据。3.3布局表格的设置与应用布局表格的设置与应用3.25第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.13.1表格的建立和编辑表格的建立和编辑（1 1）表格的复制与粘贴）表格的复制与粘贴）表格的复制与粘贴）表格的复制与粘贴 表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制

39、的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩表格的复制方法：选择要复制的若干单元格，单元格必须是连续的，形状必须为矩形，点击菜单形，点击菜单形，点击菜单形，点击菜单“编辑编辑编辑编辑”“”“复制复制复制复制”或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择或者右击，在弹出的菜单中选择“复制复制复制复制”。表格的粘贴方法表格的粘贴方法表格的粘贴方法表格的粘贴方法 选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单选择粘贴单元格的位置，点击菜单“编辑

40、编辑编辑编辑”“”“粘贴粘贴粘贴粘贴”或者右击，或者右击，或者右击，或者右击，在弹出的菜单中选择在弹出的菜单中选择在弹出的菜单中选择在弹出的菜单中选择“粘贴粘贴粘贴粘贴”，会根据选择区域的不同粘贴单元格。，会根据选择区域的不同粘贴单元格。，会根据选择区域的不同粘贴单元格。，会根据选择区域的不同粘贴单元格。（2 2）表格的配色方案）表格的配色方案）表格的配色方案）表格的配色方案 通过表格和单元格的属性设置，我们可以对表格进行美化。在通过表格和单元格的属性设置，我们可以对表格进行美化。在通过表格和单元格的属性设置，我们可以对表格进行美化。在通过表格和单元格的属性设置，我们可以对表格进行美化。在Dr

41、eamweaverDreamweaver中，系中，系中，系中，系统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作统已经内置了一些表格的配色样式，通过格式化表格命令我们可直接套用样式就能制作出漂亮的数据表格。出漂亮的数据表格。出漂亮的数据表格。出漂亮的数据表格。格式化表格的操作步骤：首先插入表格，在对应的单元格中输入数据，点击菜单格式化表格的操作步骤：首先插入表格，在对应的单元格中输入数据，点击菜单格式化表格的操作步骤

42、：首先插入表格，在对应的单元格中输入数据，点击菜单格式化表格的操作步骤：首先插入表格，在对应的单元格中输入数据，点击菜单“命令命令命令命令”“”“格式化表格格式化表格格式化表格格式化表格”，弹出，弹出，弹出，弹出“格式化表格格式化表格格式化表格格式化表格”对话框，在左侧的列表中选择一个样式，对话框，在左侧的列表中选择一个样式，对话框，在左侧的列表中选择一个样式，对话框，在左侧的列表中选择一个样式，右侧会显示预览效果。对话框的下部允许对表格的配色方案和文字、对齐等进行设置。右侧会显示预览效果。对话框的下部允许对表格的配色方案和文字、对齐等进行设置。右侧会显示预览效果。对话框的下部允许对表格的配色

43、方案和文字、对齐等进行设置。右侧会显示预览效果。对话框的下部允许对表格的配色方案和文字、对齐等进行设置。然后点击然后点击然后点击然后点击“确定确定确定确定”按钮。按钮。按钮。按钮。3.26第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格6.6.选择布局表格、布局单元格选择布局表格、布局单元格选择布局表格、布局单元格选择布局表格、布局单元格 选择布局单元格的方法：用鼠标单击单元格外框，当单元格外框出现选择布局单元格的方法：用鼠标单击单元格外框，当单元格外框出现选择布局单元格的方法：用鼠标单击单元格外框，当单元格外框出现选择布局单元格的方法：用鼠标单击单元格外框，当

44、单元格外框出现8 8个控制点时即个控制点时即个控制点时即个控制点时即被选中。或按住被选中。或按住被选中。或按住被选中。或按住CtrlCtrl键后在单元格的任意位置单击鼠标，也可选中单元格键后在单元格的任意位置单击鼠标，也可选中单元格键后在单元格的任意位置单击鼠标，也可选中单元格键后在单元格的任意位置单击鼠标，也可选中单元格。选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制点时即被选中。选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制点时即被选中。选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制点时即被选中。选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制

45、点时即被选中。7.7.调整布局表格、布局单元格大小调整布局表格、布局单元格大小调整布局表格、布局单元格大小调整布局表格、布局单元格大小 首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小。8.8.移动布局表格、布局单元格移动布局表格、布局单元格移动布局表格、布局单元格移动布局表格、布局单元格 用户可以随意移动位于布局表格中的布局单元格和嵌入的布局表格。首先选中要移动用户可以随意移动位于布局表格中的布

46、局单元格和嵌入的布局表格。首先选中要移动用户可以随意移动位于布局表格中的布局单元格和嵌入的布局表格。首先选中要移动用户可以随意移动位于布局表格中的布局单元格和嵌入的布局表格。首先选中要移动的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也可以使用方向键移动，每按一次方向键，移动可以使用方向键移动，每按一次方向键，移动可以使用方向键移动，

47、每按一次方向键，移动可以使用方向键移动，每按一次方向键，移动1 1个像素的距离；如果按住个像素的距离；如果按住个像素的距离；如果按住个像素的距离；如果按住ShiftShift键，每按一键，每按一键，每按一键，每按一次方向键，移动次方向键，移动次方向键，移动次方向键，移动1010个像素的距离个像素的距离个像素的距离个像素的距离。3.3布局表格的设置与应用布局表格的设置与应用3.27第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格3.28第第第第3 3章章章章 表格和布局表格表格和布局表格表格和布局表格表格和布局表格10.10.设置布局表格和布局单元格属性设置布局表

48、格和布局单元格属性设置布局表格和布局单元格属性设置布局表格和布局单元格属性 (1 (1）设置布局表格属性）设置布局表格属性）设置布局表格属性）设置布局表格属性 vv “固定固定固定固定”：将表格设置为固定宽度：将表格设置为固定宽度：将表格设置为固定宽度：将表格设置为固定宽度vv “自动伸展自动伸展自动伸展自动伸展”：将表格设置为自动伸展：将表格设置为自动伸展：将表格设置为自动伸展：将表格设置为自动伸展vv “高高高高”：输入以像素为单位的数值，设置布局表格的高度：输入以像素为单位的数值，设置布局表格的高度：输入以像素为单位的数值，设置布局表格的高度：输入以像素为单位的数值，设置布局表格的高度v

49、v “填充填充填充填充”：设置表格中单元格内容与边界之间的距离：设置表格中单元格内容与边界之间的距离：设置表格中单元格内容与边界之间的距离：设置表格中单元格内容与边界之间的距离vv “间距间距间距间距”：设置表格中单元格之间的距离：设置表格中单元格之间的距离：设置表格中单元格之间的距离：设置表格中单元格之间的距离vv 清除行高按钮：清除布局表格中单元格的显示高度清除行高按钮：清除布局表格中单元格的显示高度清除行高按钮：清除布局表格中单元格的显示高度清除行高按钮：清除布局表格中单元格的显示高度vv 使单元格宽度一致按钮：使使单元格宽度一致按钮：使使单元格宽度一致按钮：使使单元格宽度一致按钮：使H

50、TMLHTML代码中的单元格的固定列宽和窗口中的宽度相匹代码中的单元格的固定列宽和窗口中的宽度相匹代码中的单元格的固定列宽和窗口中的宽度相匹代码中的单元格的固定列宽和窗口中的宽度相匹 配配配配vv 删除所有间隔图像按钮：删除所有的间隔图像删除所有间隔图像按钮：删除所有的间隔图像删除所有间隔图像按钮：删除所有的间隔图像删除所有间隔图像按钮：删除所有的间隔图像vv 删除嵌套按钮：删除嵌套表格，保留嵌套表格中的内容删除嵌套按钮：删除嵌套表格，保留嵌套表格中的内容删除嵌套按钮：删除嵌套表格，保留嵌套表格中的内容删除嵌套按钮：删除嵌套表格，保留嵌套表格中的内容3.3布局表格的设置与应用布局表格的设置与应