网页设计基础教程与上机指导第版使用表格.ppt

http:/网页设计基础教程与上机指导第版使用表格 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：对于网页的排版布局来说，表格是不可缺少的教学提示：对于网页的排版布局来说，表格是不可缺少的工具，作为一名网页设计人员，表格运用的熟练与否直接工具，作为一名网页设计人员，表格运用的熟练与否直接影响到网页的美观程度。本章着重介绍表格的基本功能及影响到网页的美观程度。本章着重介绍表格的基本功能及其操作，从创建表格、编辑表格、修改表格、创建表格特其操作，从创建表格、编辑表格、修改表格、创建表格特效等各个方面作了详细的阐述，最后通过实例介绍表格在效等各个方面作了详细的阐述，最后通过实例介绍表格在版面布局方面的应用。版面布局方面的应用。n教学目标：教学目标：掌握表格的插入掌握表格的插入掌握表格的属性掌握表格的属性掌握表格的基本操作掌握表格的基本操作掌握表格排列数据掌握表格排列数据创建网页细线表格创建网页细线表格创建网页圆角表格创建网页圆角表格利用表格布局网页利用表格布局网页http:/5.1 插插 入入 表表 格格n表格在网页中占有重要的地位，它不但能够记载表表格在网页中占有重要的地位，它不但能够记载表单式的资料、规范各种数据、输入列表式的文字，单式的资料、规范各种数据、输入列表式的文字，而且利用它还可以排列文字和图像。只需通过设置而且利用它还可以排列文字和图像。只需通过设置表格的宽度和高度，以及彼此之间的比例大小等，表格的宽度和高度，以及彼此之间的比例大小等，就可以把不同的网页元素分别放置在不同的单元格就可以把不同的网页元素分别放置在不同的单元格中。中。n5.1.1 表格的基本概念表格的基本概念n5.1.2 插入表格插入表格http:/5.1.1 表格的基本概念表格的基本概念n在开始制作表格之前，我们先对表格的各部分名称在开始制作表格之前，我们先对表格的各部分名称(如图如图5.1所所示示)做简单介绍。做简单介绍。一张表格横排叫行，纵排叫列，行列交叉部分就叫做单元格。单元一张表格横排叫行，纵排叫列，行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫做边距。单元格和单元格之间的距格中的内容和边框之间的距离叫做边距。单元格和单元格之间的距离叫做间距。整张表格的边缘叫做边框。离叫做间距。整张表格的边缘叫做边框。选中整个表格，就出现表格的【属性】面板，可以在【属性】面板选中整个表格，就出现表格的【属性】面板，可以在【属性】面板中输入参数。中输入参数。选中单元格后【属性】面板就发生相应变化，选择行或者列都属于选中单元格后【属性】面板就发生相应变化，选择行或者列都属于选中单元格。选中单元格。http:/5.1.2 插入表格插入表格n在在Dreamweaver 8中插入表格的方中插入表格的方法很简单，具体操作步骤如下。法很简单，具体操作步骤如下。(1)打开网页文档，将鼠标指针置于打开网页文档，将鼠标指针置于页面中要插入表格的位置，选择【插页面中要插入表格的位置，选择【插入】入】|【表格】命令，弹出【表格】对【表格】命令，弹出【表格】对话框。话框。(2)在对话框中输入【行数】、【列在对话框中输入【行数】、【列数】、【表格宽度】、【边框粗细】、数】、【表格宽度】、【边框粗细】、【单元格边距】和【单元格间距】等，【单元格边距】和【单元格间距】等，单击【确定】按钮，即可插入相应的单击【确定】按钮，即可插入相应的表格，如图表格，如图5.5所示。所示。n在创建表格时应注意以下几个问题。在创建表格时应注意以下几个问题。整个表格不要都套在一个表格里，尽整个表格不要都套在一个表格里，尽量拆分成多个表格。量拆分成多个表格。表格的嵌套层次尽量要少，最好嵌套表格的嵌套层次尽量要少，最好嵌套表格不超过表格不超过3层。层。表格的结构尽量整齐。表格的结构尽量整齐。http:/5.2 设置表格属性设置表格属性n在在Dreamweaver 8中为了使创建的表格更加美观、中为了使创建的表格更加美观、醒目，需要对表格的属性醒目，需要对表格的属性(如表格的颜色、单元格的如表格的颜色、单元格的背景图像、背景颜色等背景图像、背景颜色等)进行设置。进行设置。n5.2.1 设置表格属性设置表格属性n5.2.2 设置单元格属性设置单元格属性http:/5.2.1 设置表格属性设置表格属性n可以在表格【属性】面板中对表格的属性进行详细的设置。设置表格属性之可以在表格【属性】面板中对表格的属性进行详细的设置。设置表格属性之前，首先要选中表格，出现如图前，首先要选中表格，出现如图5.6所示的表格【属性】面板。所示的表格【属性】面板。n在表格【属性】面板中可以进行如下设置。在表格【属性】面板中可以进行如下设置。【对齐】：设置表格的对齐方式，其下拉列表中包含四个选项，分别是【默认】、【左【对齐】：设置表格的对齐方式，其下拉列表中包含四个选项，分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。对齐】、【居中对齐】和【右对齐】。【背景颜色】：设置表格的背景颜色。【背景颜色】：设置表格的背景颜色。【背景图像】：设置表格的背景图像。【背景图像】：设置表格的背景图像。【边框颜色】：设置表格的边框颜色。【边框颜色】：设置表格的边框颜色。【填充】：设置单元格内容和单元格边界之间的像素数。【填充】：设置单元格内容和单元格边界之间的像素数。【间距】：设置相邻的单元格之间的像素数。【间距】：设置相邻的单元格之间的像素数。【边框】：设置表格边框的宽度。【边框】：设置表格边框的宽度。http:/5.2.2 设置单元格属性设置单元格属性n将鼠标指针定位于单元格中，该单元格就处于选中状态，此时将鼠标指针定位于单元格中，该单元格就处于选中状态，此时【属性属性】面板中显示出所有允许设置的单元格属性选项，如图面板中显示出所有允许设置的单元格属性选项，如图5.7所示。所示。n在单元格在单元格【属性】面板中可以进行如下设置。【属性】面板中可以进行如下设置。【水平】：设置单元格中对象水平方向的对齐方式，其下拉列表框中包含四个选水平】：设置单元格中对象水平方向的对齐方式，其下拉列表框中包含四个选项，分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。项，分别是【默认】、【左对齐】、【居中对齐】和【右对齐】。【垂直】：设置单元格中对象垂直方向的对齐方式，其下拉列表框中包含五个选【垂直】：设置单元格中对象垂直方向的对齐方式，其下拉列表框中包含五个选项，分别是【默认】、【顶端】、【居中】、【底部】和【基线】。项，分别是【默认】、【顶端】、【居中】、【底部】和【基线】。【宽与高】：设置单元格的宽与高。【宽与高】：设置单元格的宽与高。【不换行】：表示单元格的宽度将随文字长度的不断增加而加长。【不换行】：表示单元格的宽度将随文字长度的不断增加而加长。【标题】：将当前单元格设置为标题行。【标题】：将当前单元格设置为标题行。【背景】：设置表格的背景图像。【背景】：设置表格的背景图像。【边框】：设置表格边框的颜色。【边框】：设置表格边框的颜色。http:/5.3 表格的基本操作表格的基本操作n在网页中，表格可用于网页的版面设计，如文字放在网页中，表格可用于网页的版面设计，如文字放在页面的某个位置，就可以使用表格，将文字放在在页面的某个位置，就可以使用表格，将文字放在表格的某个单元格中并设置表格的属性即可。使用表格的某个单元格中并设置表格的属性即可。使用表格可以清晰地显示网页元素的列表信息，从而使表格可以清晰地显示网页元素的列表信息，从而使网页的可读性更好。网页的可读性更好。n5.3.1 选择表格选择表格n5.3.2 添加行或列添加行或列n5.3.3 删除行或列删除行或列n5.3.4 合并单元格合并单元格n5.3.5 拆分单元格拆分单元格http:/5.3.1 选择表格选择表格n可以通过以下几种方法选取整个表格。可以通过以下几种方法选取整个表格。单击表格上的任意一个边框线。单击表格上的任意一个边框线。将鼠标指针置于表格内的任意位置，选择【修改】将鼠标指针置于表格内的任意位置，选择【修改】|【表格】【表格】|【选择表【选择表格】命令。格】命令。将鼠标指针置于表格的左上角，按住鼠标左键不放拖动到表格的右下角，将鼠标指针置于表格的左上角，按住鼠标左键不放拖动到表格的右下角，将所有的单元格选中，然后选择【编辑】将所有的单元格选中，然后选择【编辑】|【全选】命令，如图【全选】命令，如图5.10所示。所示。将鼠标指针置于表格内任意位置，单击文档窗口左下角的将鼠标指针置于表格内任意位置，单击文档窗口左下角的标签，标签，如图如图5.11所示。所示。http:/5.3.2 添加行或列添加行或列n在制作网页文档时，在特殊情况下需要对表格添加行或列。添加行、列在制作网页文档时，在特殊情况下需要对表格添加行或列。添加行、列的具体操作步骤如下。的具体操作步骤如下。(1)在已创建的表格中插入行，要先将鼠标指针置于要插入行的单元格中，在已创建的表格中插入行，要先将鼠标指针置于要插入行的单元格中，选择【修改】选择【修改】|【表格】【表格】|【插入行】命令，则在鼠标指针所在单元格的上面【插入行】命令，则在鼠标指针所在单元格的上面增加了一行。增加了一行。(2)插入列，要先将鼠标指针置于要插入列的单元格中，选择【修改】插入列，要先将鼠标指针置于要插入列的单元格中，选择【修改】|【表【表格】格】|【插入列】命令，则在鼠标指针所在单元格的左侧增加了一列。【插入列】命令，则在鼠标指针所在单元格的左侧增加了一列。n另外，选择【修改】另外，选择【修改】|【表格】【表格】|【插入行或列】命令，在弹出【插入行【插入行或列】命令，在弹出【插入行或列】对话框中进行相应的设置也可以插入行或列。或列】对话框中进行相应的设置也可以插入行或列。n在【插入行或列】对话框中可以进行如下设置。在【插入行或列】对话框中可以进行如下设置。【插入】：包含【行】和【列】两个单选按钮，一次只能选择其中一个来插【插入】：包含【行】和【列】两个单选按钮，一次只能选择其中一个来插入行或者列。该选项组的初始状态选择的是【行】选项，所以下面的选项就入行或者列。该选项组的初始状态选择的是【行】选项，所以下面的选项就是【行数】。如果选择的是【列】选项，那么下面的选项就变成了【列数】，是【行数】。如果选择的是【列】选项，那么下面的选项就变成了【列数】，在【列数】文本框内可以直接输入要插入的列数。在【列数】文本框内可以直接输入要插入的列数。【位置】：包含【所选之上】和【所选之下】两个单选按钮。如果【插入】【位置】：包含【所选之上】和【所选之下】两个单选按钮。如果【插入】选项选择的是【列】选项，那么【位置】选项后面的两个单选按钮就会变成选项选择的是【列】选项，那么【位置】选项后面的两个单选按钮就会变成【在当前列之前】和【在当前列之后】。【在当前列之前】和【在当前列之后】。http:/5.3.3 删除行或列删除行或列n将鼠标指针置于要删除的行将鼠标指针置于要删除的行中，选择中，选择【修改修改】|【表格表格】|【删除行删除行】命令，即可命令，即可删除行，如图删除行，如图5.15所示。所示。将鼠标指针置于要删除的列将鼠标指针置于要删除的列中，选择中，选择【修改修改】|【表格表格】|【删除列删除列】命令，即可命令，即可删除列。删除列。n将鼠标指针置于要删除的表将鼠标指针置于要删除的表格中，单击鼠标右键，在弹格中，单击鼠标右键，在弹出的快捷菜单中选择【删除出的快捷菜单中选择【删除行或列】命令，也可以删除行或列】命令，也可以删除相应的行或列。相应的行或列。http:/5.3.4 合并单元格合并单元格n合并单元格就是将选中的多个连续合并单元格就是将选中的多个连续单元格合并成一个单元格。要合并单元格合并成一个单元格。要合并单元格，首先将要合并的单元格选单元格，首先将要合并的单元格选中，然后选择中，然后选择【修改修改】|【表格表格】|【合并单元格合并单元格】命令，即可将多命令，即可将多个单元格合并成一个单元格，如图个单元格合并成一个单元格，如图5.16所示。所示。n合并单元格还有以下两种方法。合并单元格还有以下两种方法。选中要合并的单元格，在【属选中要合并的单元格，在【属性】面板中单击【合并所选单性】面板中单击【合并所选单元格，使用跨度】按钮，即可元格，使用跨度】按钮，即可合并单元格。合并单元格。选中要合并的单元格，单击鼠选中要合并的单元格，单击鼠标右键，在弹出的快捷菜单中标右键，在弹出的快捷菜单中选择【表格】选择【表格】|【合并单元格【合并单元格】命令，即可合并单元格。】命令，即可合并单元格。http:/5.3.5 拆分单元格拆分单元格n在网页中设计中有时需要对表格进行拆分，拆分单元格的具体操作步骤在网页中设计中有时需要对表格进行拆分，拆分单元格的具体操作步骤如下。如下。(1)将鼠标指针置于要拆分的单元格中，选择【修改】将鼠标指针置于要拆分的单元格中，选择【修改】|【表格】【表格】|【拆分单【拆分单元格】命令，弹出【拆分单元格】对话框。元格】命令，弹出【拆分单元格】对话框。(2)在对话框中将【把单元格拆分】设置为【列】，【列数】设置为在对话框中将【把单元格拆分】设置为【列】，【列数】设置为3，单，单击【确定】按钮，即可拆分单元格。击【确定】按钮，即可拆分单元格。http:/5.4 用表格排列数据用表格排列数据n在实际设计中，有时需要把其他应用程序在实际设计中，有时需要把其他应用程序(如如Excel、Access)建立的表格数据导入到网页中，在建立的表格数据导入到网页中，在Dreamweaver中，利用【导入表格式数据】命令中，利用【导入表格式数据】命令可以很容易的实现这一导入功能，表格排序功能主可以很容易的实现这一导入功能，表格排序功能主要针对具有格式数据的表格而言，它根据表格列表要针对具有格式数据的表格而言，它根据表格列表中的数据来排序。中的数据来排序。n5.4.1 导入表格式数据导入表格式数据n5.4.2 表格排序表格排序http:/5.4.1 导入表格式数据导入表格式数据n在导入表格式数据前，首先要将表格数据文件转换成在导入表格式数据前，首先要将表格数据文件转换成.txt(文本文件文本文件)格式，并且该文件中格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等。导入到的数据要带有分隔符，如逗号、分号、冒号等。导入到Dreamweaver中的数据不会出现中的数据不会出现分隔符，且会自动生成表格。分隔符，且会自动生成表格。n在【导入表格式数据】指定对话框中可以进行如下设置。在【导入表格式数据】指定对话框中可以进行如下设置。【数据文件】：要导入的数据文件的保存路径和文件名。【数据文件】：要导入的数据文件的保存路径和文件名。【定界符】：选择定界符，使之与导入的数据文件格式匹配。有【定界符】：选择定界符，使之与导入的数据文件格式匹配。有Tab、【逗点】、【、【逗点】、【分号】、【引号】和【其他】分号】、【引号】和【其他】5个选项。个选项。【表格宽度】：设置导入表格的宽度。【表格宽度】：设置导入表格的宽度。【匹配内容】：勾选此单选按钮，创建一个根据最长文件进行调整的表格。【匹配内容】：勾选此单选按钮，创建一个根据最长文件进行调整的表格。【设置为】：勾选此单选按钮，在后面的文本框中输入表格的宽度并设置其单位。【设置为】：勾选此单选按钮，在后面的文本框中输入表格的宽度并设置其单位。【单元格边距】：设置单元格内容和单元格边界之间的像素数。【单元格边距】：设置单元格内容和单元格边界之间的像素数。【单元格间距】：设置相邻的表格单元格间的像素数。【单元格间距】：设置相邻的表格单元格间的像素数。【格式化首行】：设置首行标题的格式。【格式化首行】：设置首行标题的格式。【边框】：以像素为单位设置表格边框的宽度。【边框】：以像素为单位设置表格边框的宽度。http:/5.4.2 表格排序表格排序nDreamweaver 8提供了表格的排序功能，将表提供了表格的排序功能，将表格中的内容按一定的顺序进行排列。格中的内容按一定的顺序进行排列。n在【排序表格】对话框中可以进行如下设置。在【排序表格】对话框中可以进行如下设置。【排序按】：确定按哪个列的值对表格进行排序。【排序按】：确定按哪个列的值对表格进行排序。【顺序】：确定是按字母还是按数字顺序以及升【顺序】：确定是按字母还是按数字顺序以及升序还是降序对列进行排序。序还是降序对列进行排序。【再按】：确定在其他列上按第二种排列方法对【再按】：确定在其他列上按第二种排列方法对表格进行排序。在其后面的下拉列表框中指定应表格进行排序。在其后面的下拉列表框中指定应用第二种排列方法的列，然后在下拉列表框中指用第二种排列方法的列，然后在下拉列表框中指定第二种排序方法的排序顺序。定第二种排序方法的排序顺序。【排序包含第一行】：指定表格的第一行应该包【排序包含第一行】：指定表格的第一行应该包括在排序中。括在排序中。【排序标题行】：指定使用与【排序标题行】：指定使用与body行相同的条件行相同的条件对表格对表格thead部分中的所有行进行排序。部分中的所有行进行排序。【排序脚注行】：指定使用与【排序脚注行】：指定使用与body行相同的条件行相同的条件对表格对表格tfoot部分中的所有行进行排序。部分中的所有行进行排序。【完成排序后所有行颜色保持不变】：指定排序【完成排序后所有行颜色保持不变】：指定排序之后表格行属性应该与同一内容保持关联。之后表格行属性应该与同一内容保持关联。