网页设计4

第4章4.1表格基本操作本章内容目录4.2表格高级应用4.3布局应用第4章4.1表格基本操作4.1.3单元格属性设置4.1.4表格的选取4.1.1插入表格4.1.2表格属性设置4.1.5添加删除行和列4.1.6合并拆分单元格4.1.7在表格中插入网页元素第4章4.1.1插入表格将鼠标光标定位至要插入表格的位置，选择主菜单“插入”→“表格”命令（快捷键为Ctrl＋Alt＋T），或者单击“常用”插入栏中的“表格”按钮，弹出“表格”对话框，在对话框中设置表格属性，如图4-1所示。插入的表格如图4-2所示。图4-1“表格”对话框图4-2插入的表格第4章4.1.2表格属性设置可以在表格的“属性”面板中设置已插入的表格的更多属性，表格的“属性”面板如图4-3所示。图4-3表格的“属性”面板“属性”面板中的主要属性功能如下：1、表格ID：为表格设置一个唯一的名字。2、行：设置表格的行数。3、列：设置表格的列数。4、宽：设置表格的宽度，可以以像素或者百分比为单位。5、高：设置表格的高度，可以以像素或者百分比为单位。6、填充：设置单元格内的内容与单元格边框的距离，即单元格边距。第4章7、间距：设置单元格之间的距离，即单元格间距。8、对齐：设置表格在页面上的对齐方式，有“左对齐”、“居中对齐”和“右对齐”三种对齐方式。9、边框：设置表格的边框的宽度，单位为像素。10、背景颜色：设置表格的背景颜色。可以单击按钮，在弹出的拾色器中选择需要的颜色，也可以直接在右侧的文本框中输入颜色的值。11、背景图像：设置表格的背景图像。单击右侧的按钮，在弹出的“选择图像源文件”对话框中选择需要的图片。12、边框颜色：设置表格的边框的颜色。在“对齐方式”下拉列表框中选择对齐方式为“居中对齐”，在“背景颜色”右侧的对话框中设置背景颜色为#669933，在“边框颜色”右侧的文本框中设置边框颜色为#FFCC00，效果如图4-4所示。图4-4设置属性后的表格第4章4.1.3单元格属性设置表格是由单元格组成的，如创建一个3行4列的表格，就有3×4共12个单元格。在设置好整个表格的属性后，多数的工作是在对一个个单独的单元格进行处理。将鼠标光标置于单元格中，下方将出现单元格的“属性”面板，如图4-5所示。图4-5单元格的“属性”面板单元格“属性”面板中的主要属性功能如下：1、按钮：用来合并选中的单元格或者将一个单元格拆分成几行或者几列。2、水平：设置单元格中内容在水平方向上的对齐方式。共有“左对齐”、“居中对齐”和“右对齐”3种对齐方式。第4章3、垂直：设置单元格中内容在垂直方向上的对齐方式。共有“顶端”、“居中”、“底部”和“基线”4种对齐方式。4、宽：设置单元格的宽度，单位为像素。5、高：设置单元格的高度，单位为像素。6、不换行：选中此复选框，单元格中的内容将不换行，单元格会被内容撑开。7、标题：选中此复选框，将此单元格中的内容设置为表格的表头。8、背景：为单元格设置背景图像。9、背景颜色：设置单元格的背景颜色。10、边框：设置单元格的边框颜色。4.1.4表格的选取选择表格或者表格中的某些单元格，有以下方法：1．选择整个表格要选择整个表格有以下几种方法：第4章1、将鼠标光标移到表格的任意一个边框上，当鼠标光标变为形状时，单击鼠标左键，即可选中整个表格。2、将鼠标光标移动到表格的最外面的边框上，当鼠标光标变为形状时，单击鼠标左键，即可选中整个表格。3、将鼠标光标置于任意一个单元格内，选择“修改”→“表格”→“选择表格”命令，或者按下Ctrl＋A键两次，即可选中整个表格。4、将鼠标光标置于任意单元格内，单击文件编辑窗口左下角的table标签，即可选择整个表格。2．选择一行表格选择整行表格有以下方法：1、将鼠标光标置于要选择的行的第1个单元格中，按住鼠标左键拖动至此行的最后一个单元格，释放鼠标，即可选择整行表格，如图4-6所示。2、将鼠标移动至要选择的行的左边框上，将出现选定箭头，单击鼠标左键，即可选择此行表格，如图4-7所示。图4-6拖动选择图4-7单击选择第4章3、将鼠标光标置于要选择的行的任意一个单元格中，单击文件编辑窗口左下角的tr标签，即可选择整行表格，如图4-8所示。图4-8通过标签选择3．选择一列表格要选择一列表格有以下方法：1、将鼠标光标置于要选择的列的最上方的单元格中，按住鼠标左键向下拖动，一直拖动到最底部的单元格，释放鼠标左键，即可选择整列表格，如图4-9所示。2、将鼠标光标移至要选择的列的上边框上，将出现选择箭头，单击鼠标左键，即可选择整列表格，如图4-10所示。图4-10单击选择图4-9拖动选择第4章4．选择多个连续的单元格选择多个位置连续的单元格可以有以下方法：1、先将鼠标光标移动至一个单元格中，按住鼠标左键横向或者纵向拖动鼠标，移动至要选择的最后一个单元格释放鼠标，即可选择这些连续的单元格，如图4-11所示。2、选定第一个单元格，按住Shift键，单击另一个单元格，即可选中这个区域中的所有单元格。图4-11选择多个连续单元格5．选择多个不连续的单元格要选择多个在位置上不相邻的单元格，可以有以下方法：1、按住Ctrl键，依次单击要选择的单元格，即可选中这些单元格。第4章2、先选中所有的单元格，然后按住Ctrl键依次单击不需要选中的单元格，取消选中状态，即可选中所有要选择的单元格，如图4-12所示。图4-12选择多个不连续的单元格4.1.5添加删除行和列在Dreamweaver8中，可以随时在任意位置添加或者删除任意数目的行或者列。1．添加一行为表格添加行的方法如下：1、将鼠标光标置于任意单元格中，选择“修改”→“表格”→“插入行”命令，或者按Ctrl＋M组合键，即可在该行上方插入一行，如图4-13所示。2、将鼠标光标置于任意单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入行”命令，即可插入一行。第4章3、将鼠标光标置于任意单元格中，选择“插入”→“表格对象”命令，弹出的下拉菜单如图4-14所示，通过选择菜单中的命令可以在所选择的行的上方或者下方插入行，在所选择的单元格的左侧或者右侧插入列。图4-13插入一行图4-14下拉菜单2．添加一列插入列的方法如下：1、将鼠标光标定位至任意单元格内，选择“修改”→“表格”→“插入列”命令，或者按下Shift＋Ctrl＋A组合键，即可在该列左侧插入新列。2、将鼠标光标定位至任意单元格内，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入列”命令，即可在该列左侧插入新列，如图4-15所示。图4-15添加一列第4章3．添加多行和多列可以使用以下方法一次添加多行和多列。1、将鼠标光标移至单元格中，选择“修改”→“表格”→“插入行或列”命令，弹出“插入行或列”对话框，如图4-16所示，设置好后，单击“确定”按钮，即可插入指定数目的行或者列。2、将鼠标光标移至单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行设置即可。图4-16插入行或列第4章4．删除行或列要删除多余的行或者列，有以下方法：1、将鼠标光标置于要删除的行或者列的单元格中，选择“修改”→“表格”→“删除行”命令即可删除一行；选择“修改”→“表格”→“删除列”命令即可删除一列。2、将鼠标光标置于要删除的行或者列的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“删除行”命令即可删除行，选择“表格”→“删除列”命令即可删除列。4.1.6合并拆分单元格在Dreamweaver8中，可以将多个连续的单元格合并为一个单元格，也可以把一个单元格拆分为多个单元格，使表格的编辑更加快捷。第4章1．合并单元格合并单元格有以下方法：1、选中要合并的所有单元格，选择“修改”→“表格”→“合并单元格”命令，或者按下Ctrl＋Alt＋M组合键，即可将选中的单元格合并为1个单元格，如图4-17所示。2、选中要合并的所有单元格，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“合并单元格”命令，即可完成合并。3、选中要合并的所有单元格，单击“属性”面板上的“合并单元格”按钮，即可完成单元格的合并。图4-17合并单元格第4章2．拆分单元格拆分单元格有以下方法：1、将鼠标光标置于要进行拆分的单元格中，选择“修改”→“表格”→“拆分单元格”命令，或者按下Ctrl＋Alt＋S组合键，弹出“拆分单元格”对话框，选中“列”单选按钮，将把单元格拆分为几列；选中“行”单选按钮，将把单元格拆分为几行，如图4-18所示。2、在单元格上单击鼠标右键，在弹出的快捷菜单中选择“表格”→“拆分单元格”命令，在弹出的“拆分单元格”对话框中进行设置即可。3、选中要拆分的单元格，单击“属性”面板上的“拆分单元格”按钮，在弹出的“拆分单元格”对话框中进行设置即可。拆分后的单元格如图4-19所示。图4-18“拆分单元格”对话框图4-19拆分后的单元格第4章4.1.7在表格中插入网页元素在表格中插入网页元素的方法与直接在页面上的其他位置插入并无太大区别，下面分别介绍。1．在表格中插入文本要在表格中插入文本只需将光标定位至要插入文本的单元格中，然后输入文本或者粘贴文本即可，如图4-20所示。图4-20在表格中插入文本第4章2．在表格中插入图片要在表格中插入图像，首先将鼠标光标定位至要插入图像的单元格中，选择“插入”→“图像”命令，或按Ctrl＋Alt＋I组合键，在弹出的“选择图像源文件”对话框中选择要插入的图像文件即可，如图4-21所示。图4-21在表格中插入图片第4章4.2表格高级应用4.2.3对表格排序4.2.1嵌套表格4.2.2对表格格式化第4章4.2.1嵌套表格可以在表格的单元格中插入新的表格，新插入的表格就称为嵌套表格。将鼠标光标定位至要插入嵌套表格的单元格中，选择“插入”→“表格”命令，弹出“表格”对话框，设置要插入表格的属性，然后插入嵌套表格即可，如图4-22所示。嵌套表格的数量不宜过多，因为过多的嵌套表格会降低网页的打开速度，一般最多使用3-4层的嵌套。图4-22在单元格中插入嵌套表格第4章4.2.2对表格格式化在创建表格并在表格中输入数据后，往往需要对表格的外观进行一些设置以取得美观的效果，Dreamweaver8中带有多种已经定义好的表格样式，使用这些样式可以大大的简化表格的格式化工作，只需挑选出需要的样式套用到表格上就可以了。套用表格样式的方法如下：将鼠标光标置于要套用样式的表格的任意一个单元格中，选择“命令”→“格式化表格”命令，弹出如图4-23所示的“格式化表格”对话框，在对话框中选择所需的样式或者自定义样式即可。图4-23“格式化表格”对话框第4章“格式化表格”对话框中的各项属性的功能如下：1、左上角的列表框中是Dreamweaver8自带的表格样式。2、行颜色：设置整行的颜色。3、第一种：设置表格中的行使用的第一种颜色。4、第二种：设置表格中的行使用的第二种颜色。5、交错：设置两种颜色在表格中的显示方式。包括“不要交错”、“每一行”、“每两行”、“每三行”和“每四行”5种方式。6、第一行：设置第一行的属性。7、对齐：设置第一行中内容的对齐方式。8、文字样式：设置第一行中的文本的显示样式。包括“常规”、“粗体”、“斜体”和“加粗斜体”4种显示方式。9、背景色：设置第一行的背景色。10、文本颜色：设置第一行的文本颜色。11、最左列：设置最左列的属性。12、文字样式：设置最左列单元格中文本的显示样式。13、边框：设置表格的边框宽度。第4章如为表格套用AltRows：Green&Yellow样式，效果如图4-24所示。图4-24套用样式的效果4.2.3对表格排序表格的一个主要用途就是将数据有序的组织起来并显示。在Dreamweaver8中，可以方便的按列对表格进行简单的排序，下面来看一个例子。（1）打开要排序的表格，如图4-25所示。（2）将鼠标光标定位至任意单元格中，选择“命令”→“排序表格”命令，弹出“排序表格”对话框，如图4-26所示。图4-25打开表格图4-26“排序表格”对话框第4章（3）对话框中