第6章表格在网页中的应用-中文版Dreamweaver-CS6网页制作课件

·清华大学出版社·第6章表格在网页中的应用中文版DreamweaverCS6从入门到精通·清华大学出版社·第6章中文版DreamweaverC本章导读从入门到精通清华大学出版社2表格的创建12对表格进行编辑3表格属性设置4表格的高级操作本章导读从入门到精通清华大学出版社2表格的创建12对表格进行6.1表格的创建在表格中添加内容创建表格嵌套表格6.1.16.1.26.1.36.1表格的创建在表格中添加内容创建表格嵌套表格6.1.表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。DreamweaverCS6的表格功能强大，用户可以方便创建出各种规格的表格。6.1.1创建表格从入门到精通清华大学出版社4

表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像6.1.2嵌套表格从入门到精通清华大学出版社5嵌套表格是指在表格的某个单元格中再插入一个表格。创建嵌套表格与创建表格相似，首先将鼠标光标定位到需创建嵌套表格的单元格中，其他与创建表格步骤一样。

6.1.2嵌套表格从入门到精通清华大学出版社5嵌套表格是在表格中可添加包括文本、图像、动画等类型的各种网页元素。添加表格内容的方法很简单，只需将鼠标光标定位到要添加内容的单元格中，然后按照添加网页元素的方法操作即可。6.1.3在表格中添加内容从入门到精通清华大学出版社6在表格中可添加包括文本、图像、动画等类型的各种网页元素。添加从入门到精通清华大学出版社6.2对表格进行编辑Contents6.2.1选择整个表格6.2.2行或列的选中6.2.3单元格的选中6.2.4单元格的合并与拆分6.2.5行或列的添加与删除从入门到精通清华大学出版社6.2对表格进行编辑Conte在对表格进行操作之前需先选中表格。6.2.1选择整个表格从入门到精通清华大学出版社8

单击表格边框线单击单元格边框线选择“选择表格”命令单击“<table>”标签在对表格进行操作之前需先选中表格。6.2.1选择整个表格6.2.2行或列的选中从入门到精通清华大学出版社9

在DreamweaverCS6中，除了选中整个表格，有时根据需要要求选中表格一行或一列。

6.2.2行或列的选中从入门到精通清华大学出版社9在表格中可选中单个单元格，也可以选中连续多个单元格，还可以选中不连续的多个单元格。6.2.3单元格的选中从入门到精通清华大学出版社10

选中连续单元格选中不连续单元格在表格中可选中单个单元格，也可以选中连续多个单元格，还可以选6.2.4单元格的合并与拆分从入门到精通清华大学出版社11

单元格的合并1单元格的拆分26.2.4单元格的合并与拆分从入门到精通清华大学出版社1合并单元格是指将连续的多个单元格合并为一个单元格的操作。合并单元格的方法有如下几种：选中要合并的单元格区域，选择【修改】/【表格】/【合并单元格】命令。选中要合并的单元格区域，单击【属性】面板左下角的

按钮。选中要合并的单元格区域并单击鼠标右键，在弹出的快捷菜单选择【表格】/【合并单元格】命令。1．单元格的合并从入门到精通清华大学出版社12合并单元格是指将连续的多个单元格合并为一个单元格的操作。合并单元格的拆分是将一个单元格拆分为多个单元格的操作。拆分单元格的方法同合并单元格相似，只是在选择拆分命令后，会打开“拆分单元格”对话框，用户需要在其中进行拆分设置。2．单元格的拆分从入门到精通清华大学出版社13

单元格的拆分是将一个单元格拆分为多个单元格的操作。拆分单元格6.2.5行或列的添加与删除从入门到精通清华大学出版社14

单行或单列的添加1多行或多列的添加2行或列的删除36.2.5行或列的添加与删除从入门到精通清华大学出版社1将鼠标光标定位到相应的单元格中，选择【修改】/【表格】/【插入行】命令可在当前选择单元格上面添加一行，选择【修改】/【表格】/【插入列】命令，可在当前列左侧插入一列。将鼠标光标定位到相应的单元格中单击鼠标右键，在弹出的快捷菜单选择【表格】/【插入行】命令或【表格】/【插入列】命令，可实现单行或单列的插入。将鼠标光标定位到相应的单元格中，选择【插入】/【表格对象】菜单下的“在上面插入行”、“在下面插入行”、“在左边插入列”和“在右边插入列”命令，可选中插入行或列的位置。1．单行或单列的添加从入门到精通清华大学出版社15将鼠标光标定位到相应的单元格中，选择【修改】/【表格】/【插添加多行或多列的操作方法与添加单行或多单基本相同，可以通过“插入行或列”对话框来进行多行或多列的添加。2．多行或多列的添加从入门到精通清华大学出版社16添加多行或多列的操作方法与添加单行或多单基本相同，可以通过“3．行或列的删除从入门到精通清华大学出版社17

表格中不能删除单独的单元格，但是可以进行整行或整列的删除。

3．行或列的删除从入门到精通清华大学出版社17表格中从入门到精通清华大学出版社6.3表格属性设置设置表格属性设置单元格属性6.3.16.3.2从入门到精通清华大学出版社6.3表格属性设置设置表格属性6.3.1设置表格属性从入门到精通清华大学出版社19

选中表格后，可在其“属性”面板中对表格的属性进行设置。6.3.1设置表格属性从入门到精通清华大学出版社19除了可以设置整个表格的属性外，还可以对表格的单元格、行或列的属性进行设置。6.3.2设置单元格属性从入门到精通

清华大学出版社20

除了可以设置整个表格的属性外，还可以对表格的单元格、行或列的从入门到精通清华大学出版社6.4表格的高级操作排序表格导入和导出表格内容6.4.16.4.2从入门到精通清华大学出版社6.4表格的高级操作排序表格导6.4.1排序表格从入门到精通清华大学出版社22

利用Dreamweaver提供的表格排序功能，可以对表格指定列的内容进行排序。

6.4.1排序表格从入门到精通清华大学出版社226.4.2导入和导出表格内容从入门到精通清华大学出版社23表格数据的导入1表格数据的导出26.4.2导入和导出表格内容从入门到精通清华大学出版社2在页面中需添加表格时，如果表格数据预先存储在其他应用程序如记事本、Excel、Word中，可以直接将数据导入。1．表格数据的导入从入门到精通清华大学出版社24

在页面中需添加表格时，如果表格数据预先存储在其他应用程序如记为了对页面中的数据进行保存，还可以将其中的表格导出为其他格式。在Dreamweaver中表格数据的导出一般有两种形式：一种是“作为XML数据模版”，另一种是“表格”。2．表格数据的导出从入门到精通清华大学出版社25为了对页面中的数据进行保存，还可以将其中的表格导出为其他格式从入门到精通清华大学出版社266.5提高实例——制作产品目录页面本章的提高实例中将在页面中插入表格，并对表格进行适当设置和处理，然后在其中的单元格中导入包含产品目录的Excel表格，并进行整体美化处理。从入门到精通清华大学出版社266.5提高实例——制作产品6.5.1行业分析从入门到精通清华大学出版社27本例制作的产品目录页面主要是对各种产品做介绍，并达到展示盒宣传的目的，所以部分产品还可做图片展示。但是由于产品种类很多，不可能都进行图片展示，所以可以在适当的位置添加一些产品图片，而具体的产品规格和报价等信息则可以通过表格的方式直观表现出来。为了达到美观的效果，可通过表格初步布局一下页面，然后在主要区域导入已经制作好的产品表格，对于布局表格，为了在页面中不显示表格，可设置其边框粗细为0，而产品表格为了直观，可设置为可见。6.5.1行业分析从入门到精通清华大学出版社27本例制作6.5.2操作思路从入门到精通清华大学出版社28插入布局表格进行合并和调整等操作导入表格数据操作思路1234作整体的设置6.5.2操作思路从入门到精通清华大学出版社28插入布局从入门到精通清华大学出版社296.6提高练习——制作日历网页

创建表格布局设置表格及单元格属性输入文本设置文本属性从入门到精通清华大学出版社296.6提高练习——制作日历从入门到精通清华大学出版社306.7知识问答问：为什么设置了表格的一些属性后，整个表格就“变形”了，本来已经很整齐的表格又需要重新调整？问：在Word中制作的表格可以直接复制到dreamweaver中吗？从入门到精通清华大学出版社306.7知识问答问：为什么设从入门到精通清华大学出版社知识关联：网页中表格的使用注意表格应尽量用绝对像素定义其大小，以免浏览器分辨率不同时产生变形。一个网页要尽量避免将所有的内容都嵌套在一个大表格之中，因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之中，那么当浏览者输入网址浏览网页时，可能会在空白窗口中停留很长时间以等待加载网页，加载完后所有的网页内容才同时出现。另外，在表格代码中添加“<tbody>”标记，可使表格分块显示，从而加快网页下载时间，其写法如“<table><tbody>……</tbody></table>”的形式。从入门到精通清华大学出版社知识关联：网页中表格的使用注意表格·清华大学出版社·第6章表格在网页中的应用中文版DreamweaverCS6从入门到精通·清华大学出版社·第6章中文版DreamweaverC本章导读从入门到精通清华大学出版社33表格的创建12对表格进行编辑3表格属性设置4表格的高级操作本章导读从入门到精通清华大学出版社2表格的创建12对表格进行6.1表格的创建在表格中添加内容创建表格嵌套表格6.1.16.1.26.1.36.1表格的创建在表格中添加内容创建表格嵌套表格6.1.表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。DreamweaverCS6的表格功能强大，用户可以方便创建出各种规格的表格。6.1.1创建表格从入门到精通清华大学出版社35

表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像6.1.2嵌套表格从入门到精通清华大学出版社36嵌套表格是指在表格的某个单元格中再插入一个表格。创建嵌套表格与创建表格相似，首先将鼠标光标定位到需创建嵌套表格的单元格中，其他与创建表格步骤一样。

6.1.2嵌套表格从入门到精通清华大学出版社5嵌套表格是在表格中可添加包括文本、图像、动画等类型的各种网页元素。添加表格内容的方法很简单，只需将鼠标光标定位到要添加内容的单元格中，然后按照添加网页元素的方法操作即可。6.1.3在表格中添加内容从入门到精通清华大学出版社37在表格中可添加包括文本、图像、动画等类型的各种网页元素。添加从入门到精通清华大学出版社6.2对表格进行编辑Contents6.2.1选择整个表格6.2.2行或列的选中6.2.3单元格的选中6.2.4单元格的合并与拆分6.2.5行或列的添加与删除从入门到精通清华大学出版社6.2对表格进行编辑Conte在对表格进行操作之前需先选中表格。6.2.1选择整个表格从入门到精通清华大学出版社39

单击表格边框线单击单元格边框线选择“选择表格”命令单击“<table>”标签在对表格进行操作之前需先选中表格。6.2.1选择整个表格6.2.2行或列的选中从入门到精通清华大学出版社40

在DreamweaverCS6中，除了选中整个表格，有时根据需要要求选中表格一行或一列。

6.2.2行或列的选中从入门到精通清华大学出版社9在表格中可选中单个单元格，也可以选中连续多个单元格，还可以选中不连续的多个单元格。6.2.3单元格的选中从入门到精通清华大学出版社41

选中连续单元格选中不连续单元格在表格中可选中单个单元格，也可以选中连续多个单元格，还可以选6.2.4单元格的合并与拆分从入门到精通清华大学出版社42

单元格的合并1单元格的拆分26.2.4单元格的合并与拆分从入门到精通清华大学出版社1合并单元格是指将连续的多个单元格合并为一个单元格的操作。合并单元格的方法有如下几种：选中要合并的单元格区域，选择【修改】/【表格】/【合并单元格】命令。选中要合并的单元格区域，单击【属性】面板左下角的

按钮。选中要合并的单元格区域并单击鼠标右键，在弹出的快捷菜单选择【表格】/【合并单元格】命令。1．单元格的合并从入门到精通清华大学出版社43合并单元格是指将连续的多个单元格合并为一个单元格的操作。合并单元格的拆分是将一个单元格拆分为多个单元格的操作。拆分单元格的方法同合并单元格相似，只是在选择拆分命令后，会打开“拆分单元格”对话框，用户需要在其中进行拆分设置。2．单元格的拆分从入门到精通清华大学出版社44

单元格的拆分是将一个单元格拆分为多个单元格的操作。拆分单元格6.2.5行或列的添加与删除从入门到精通清华大学出版社45

单行或单列的添加1多行或多列的添加2行或列的删除36.2.5行或列的添加与删除从入门到精通清华大学出版社1将鼠标光标定位到相应的单元格中，选择【修改】/【表格】/【插入行】命令可在当前选择单元格上面添加一行，选择【修改】/【表格】/【插入列】命令，可在当前列左侧插入一列。将鼠标光标定位到相应的单元格中单击鼠标右键，在弹出的快捷菜单选择【表格】/【插入行】命令或【表格】/【插入列】命令，可实现单行或单列的插入。将鼠标光标定位到相应的单元格中，选择【插入】/【表格对象】菜单下的“在上面插入行”、“在下面插入行”、“在左边插入列”和“在右边插入列”命令，可选中插入行或列的位置。1．单行或单列的添加从入门到精通清华大学出版社46将鼠标光标定位到相应的单元格中，选择【修改】/【表格】/【插添加多行或多列的操作方法与添加单行或多单基本相同，可以通过“插入行或列”对话框来进行多行或多列的添加。2．多行或多列的添加从入门到精通清华大学出版社47添加多行或多列的操作方法与添加单行或多单基本相同，可以通过“3．行或列的删除从入门到精通清华大学出版社48

表格中不能删除单独的单元格，但是可以进行整行或整列的删除。

3．行或列的删除从入门到精通清华大学出版社17表格中从入门到精通清华大学出版社6.3表格属性设置设置表格属性设置单元格属性6.3.16.3.2从入门到精通清华大学出版社6.3表格属性设置设置表格属性6.3.1设置表格属性从入门到精通清华大学出版社50

选中表格后，可在其“属性”面板中对表格的属性进行设置。6.3.1设置表格属性从入门到精通清华大学出版社19除了可以设置整个表格的属性外，还可以对表格的单元格、行或列的属性进行设置。6.3.2设置单元格属性从入门到精通

清华大学出版社51

除了可以设置整个表格的属性外，还可以对表格的单元格、行或列的从入门到精通清华大学出版社6.4表格的高级操作排序表格导入和导出表格内容6.4.16.4.2从入门到精通清华大学出版社6.4表格的高级操作排序表格导6.4.1排序表格从入门到精通清华大学出版社53

利用Dreamweaver提供的表格排序功能，可以对表格指定列的内容进行排序。

6.4.1排序表格从入门到精通清华大学出版社226.4.2导入和导出表格内容从入门到精通清华大学出版社54表格数据的导入1表格数据的导出26.4.2导入和导出表格内容从入门到精通清华大学出版社2在页面中需添加表格时，如果表格数据预先存储在其他应用程序如记事本、Excel、Word中，可以直接将数据导入。1．表格数据的导入从入门到精通清华大学出版社55

在页面中需添加表格时，如果表格数据预先存储在其他应用程序如记为了对页面中的数据进行保存，还可以将其中的表格导出为其他格式。在Dreamweaver中表格数据的导出一般有两种形式：一种是“作为XML数据模版”，另一种是“表格”。2．表格数据的导出从入门到精通清华大学出版社56为了对页面中的数据进行保存，还可以将其中的表格导出为其他格式从入门到精通清华大学出版社576.5提高实例——制作产品目录页面本章的提高实例中将在页面中插入表格，并对表格进行适当设置和处理，然后在其中的单元格中导入包含产品目录的Excel表格，并进行整体美化处理。从入门到精通清华大学出版社266.5提高实例——制作产品6.5.1行业分析从入门到精通清华大学出版社58本例制作的产品目录页面主要是对各种产品做介绍，并达到展示盒宣传的