《Dreamweaver 8案例教程》课件第7章

本章学习目标创建表格7.1格式化表格7.2编辑表格的单元格7.3框架的应用7.5网页布局7.47.1创建表格表格广泛地应用于网页设计中，无论在数据显示方面还是在定位排版方面都起着不可替代的作用，下面就详细介绍如何在网页中创建表格。7.1.1插入表格

在文档中创建表格的步骤如下：（1）在Dreamweaver8.0中单击“插入”—“表格”菜单命令，弹出属性设置窗口，对所要插入的表格进行初步定义，如图7-1所示。（2）在参数设置窗口中根据需要设置参数。（3）单击窗口中的“确定”按钮之后，即可在文档中光标所做位置插入一个表格。7.1.1插入表格图7-1表格参数设置7.1.2在表格中添加内容

创建好表格以后，现在可以直接在表格中填充信息，如下图所示。图7-2在表格中添加内容7.1.3导入/导出数据1.导入文本：(1)在设计视图中，将光标放在需要插入文本的地方；(2)导入文本文件：将鼠标指针置入所要导入数据的单元格内，选择“文件”|“导入”|“Word文档”菜单项，此时弹出“打开”对话框，在其中找到要导入的文本文件，然后单击“确定”按钮即可。2.导入Excel文档：(1)在设计视图中，将光标放在需要插入Excel文档的地方；(2)导入Excel文档：选择“文件”|“导入”|“Excel文档”菜单项，在弹出的“打开”对话框中选择要导入的Excel文档，然后单击“打开”按钮，选择的Excel文档即可被导入表格中。

7.1.3导入/导出数据3.导入表格：(1)在设计视图中，将光标放在需要插入表格式数据的地方；(2)执行“文件”|“导入”|“表格式数据”命令

。(3)这时会弹出如图7-3所示的对话框，通过这个对话框可以对数据源以及参数进行选择。图7-3设置导入数据参数

7.1.3导入/导出数据4.导出表格：(1)打开需要导出表格的HTML文档，并将光标放到表的的单元格中。

(2)在菜单中选择执行“文件”|“导出”|“表格”命令，这时会弹出一个对话框。(3)在“定界符”下拉列表中选择将要生成的表格数据文件的分隔符类型。(4)在“换行符”下拉列表中选择断行类型。(5)按下“导出”按钮就会弹出保存文件对话框，输入文件名和路径后按下“保存”按钮，即可将表格输出为数据文件。7.1.4选择表格元素（1）选取整个表格，可以执行下列操作步骤之一：方法一：点击表格左上角，或点击右边或底边任意位置方法二：单击表格并选择“修改”|“表格”|“选择表格”。方法三：单击表格并选择“编辑”|“全选”。方法四：将光标放到表格内任意位置，选取文档窗口左下角标签选择器中的<table>标签。7.1.4选择表格元素（2）选取行或列，可以执行下列操作步骤之一：方法一：将光标置于行的左边空白处或者列的顶部。当选取箭头出现时点击，如图7-11和7-12所示。方法二：点击一个单元格，横向或纵向拖拽可以选取多个行或列。方法三：将插入点放到表格内，选取文档窗左下角标签选择器中的<tr>标签。7.1.4选择表格元素（3）要选取不相邻的单元格，可以执行下列操作步骤之一：方法一：按住【Ctrl】键点击表格内部来增加单元格、行或列到选集中。方法二：选取表格内多个单元格，然后按住【Ctrl】键并点击单元格，行或列取消对某些单元格的选取。7.2格式化表格制作好了，内容也有了，但是表格看起来还不太美观，这时需要对表格进行修饰——格式化表格。表格的格式化主要包括表格的对齐方式，间距与边距的调整，边框的设置以及背景的设置等。本节我们将学习如何设置表格。返回7.2.1设置表格属性

对于表格总体属性的设置，主要是通过属性面板来完成。选中整个表格，这时的属性面板如图7-4所示。图7-4表格的属性面板

7.2.2设置单元格，行和列的属性按照前面介绍的方法，选中某一个单元格，或者是某一行、某一列，这时的属性面板如图7-5，7-6，7-7所示。图7-5单元格的属性面板

图7-6行的属性面板

图7-7列的属性面板

7.2.3设置预置表格类型单击已经创建好的表格的边框，以选中该表格，然后选择“命令”|“格式化表格”菜单项，弹出“格式化表格”对话框，如图7-8所示。图7-8格式化表格7.3编辑表格的单元格

在Dreamweaver8.0中，表格创建完成后，不仅可以设置其格式，而且还可以对单元格进行编辑，如拆分/合并单元格，复制单元格，增加/删除行列，对表格中的数据进行排序等，这些内容将在本节中详细介绍。返回7.3.1调整表格列宽与行高

1、调整列宽：（1）选中要调整列宽的那一列表格；（2）在属性面板中设置该列表格的宽度值，单位是像素，例如此时将列宽设置为20像素，属性面板如图7-9所示。图7-9列的属性面板7.3.1调整表格列宽与行高

2、调整行高：（1）选中要调整行高的那一行表格；（2）在属性面板中设置该行表格的高度值，单位是像素，例如此时将行高设置为15像素，属性面板如图7-10所示。图7-10行的属性面板7.3.2增加/删除行或列（1）增加行：方法一：把光标定位在要在其上面或下面插入行的一个单元格内，单击“插入”|“表格对象”命令，在子菜单中根据实际需要选择“在上面插入行”或“在下面插入行”。方法二：选中要在其下面插入行的整行单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“插入行”，这时就在该行的下面插入了新的一行。方法三：选中要在其上面或下面插入行的整行单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“插入行或列”，这时弹出一个对话框。7.3.2增加/删除行或列（2）增加列：方法一：把光标定位在要在其左边或右边插入列的一个单元格内，单击“插入”|“表格对象”命令，在子菜单中根据实际需要选择“在左边插入列”或“在右边插入列”。方法二：选中要在其右边插入列的整列单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“插入列”，这时就在该列的右边插入了新的一列。方法三：选中要在其左边或右边插入列的整列单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“插入行或列”，这时弹出一个对话框。7.3.2增加/删除行或列（3）删除行：方法一：选中要删除的整行单元格，单击“修改”|“表格”|“删除行”命令，这时该行就被自动删除。方法二：选中要删除的整行单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“删除行”，同样，该行也会被删除。（4）删除列：方法一：选中要删除的整列单元格，单击“修改”|“表格”|“删除列”命令，这时该列就被自动删除。方法二：选中要删除的整列单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“删除列”，同样，该列也会被删除。7.3.3剪切/复制/粘贴单元格1.剪切或复制单元格：(1)选择要复制或剪切的单元格。既可以选择一个单元格，也可以选择多个单元格，但要保证选中的单元格区域呈矩形。(2)单击“编辑”|“剪切”命令，即可将选中的单元格剪切到剪贴板上；单击“编辑”|“拷贝”命令，即可将选中的单元格复制到剪贴板上。2.粘贴单元格：(1)选择要粘贴数据的目标对象。如果希望将数据粘贴入单元格内，可以单击该单元格，将光标放置到该单元格内；如果希望将剪贴板中的数据粘贴入一个新的表格，可以在文档中将插入点放置到该位置上。(2)单击“编辑”|“粘贴”命令，即可进行粘贴。同样，如果单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令，也能完成粘贴操作。7.3.4拆分/合并单元格(1)拆分单元格：方法一：选中要拆分的单元格，单击鼠标右键，从弹出的快捷菜单中选择“表格”|“拆分单元格”命令，或者在单元格的属性面板上单击拆分单元格的图标也可以。方法二：单击“修改”|“表格”|“拆分单元格”命令，也能完成拆分单元格的操作。方法三：将光标放置到要拆分的单元格中，单击“修改”|“表格”|“减少行宽”命令，可以将当前单元格拆分为两行；单击“修改”|“表格”|“减少列宽”命令，可以将当前单元格拆分为两列。7.3.4拆分/合并单元格（2）合并单元格：方法一：选中要合并的多个连续单元格，选择时要保证选中的单元格区域呈矩形，然后单击鼠标右键，从弹出的快捷菜单中选择“表格”|“合并单元格”命令，或者在单元格的属性面板上单击合并单元格的图标也可以。这时选中的多个单元格会合并为一个大的单元格。方法二：单击“修改”|“表格”|“合并单元格”命令，也能完成合并单元格的操作。方法三：将光标放置到要合并的一个单元格中，单击“修改”|“表格”|“增加行宽”命令，可以将当前单元格和它下面的一个单元格合并成一个大的单元格；单击“修改”|“表格”|“增加列宽”命令，可以将当前单元格和它右边的一个单元格合并成一个大的单元格。7.3.5数据排序(1)选中表格，单击“命令”|“排序表格”菜单项，这时会弹出一个“排序表格”的对话框，如图7-11所示。图7-11排序表格对话框7.3.5数据排序（2）在“排序按”下拉列表中选择以哪列作为排序依据。（3）在“顺序”下拉列表中可以设置排序的方式，包括“按字母顺序”和“按数字顺序”两种。同时可以设置按照“升序”或“降序”来排列。（4）在“再按”下拉列表中，可以选择以哪列作为第二排序依据，其设置方法同上。（5）在“选项”复选框中，有四种选择。如果选中“排序包含第一行”，则在对表格数据排序时，同时也对首行进行排序，有时表格的首行是标题行，则可以清除该复选框。如果选中“排序标题行”或“排序脚注行”，则是对标题行或脚注行进行排序。如果选中“完成排序后所有行颜色保持不变”，则在对表格排序后保留排序行中标记的原有属性。（5）设置完毕，单击“确定”按钮，表格即被重新排序。7.4网页布局Dreamweaver8.0中有一个非常重要的功能，就是利用布局来给网页排版。在“布局”下，我们可以在网页中直接画出表格与单元格，还可以自由拖动。利用“布局”来对网页定位非常方便，但生成的表格比较复杂，不适合大型网站使用。返回7.4.1布局视图“布局视图”的具体用法如下所示：（1）将对象面板切换到“布局”面板组，单击“布局”按钮进入“布局模式”。（2）在“布局”面板上许多以前不可用的按钮变为可用状态。其中有两个按钮，一个是“布局表格”按钮，允许用户像绘图一样在页面里绘制表格，进行表格布局；另一个是“绘制布局单元格”按钮，可以用于在表格中直接绘制单元格。7.4.2布局表格和单元格1.绘制表格：打开“布局模式”，在对象面板中单击“布局表格”按钮，然后在文档窗口中绘制表格。如图7-12所示，我们可以拖动表格的边框来调整它的大小。图7-12绘制的表格布局7.4.2布局表格和单元格2.绘制单元格：在对象面板中单击“绘制布局单元格”按钮，在鼠标变成“+”时在面板中拖动绘制单元格。如图7-13所示。图7-13拖动绘制的单元格7.4.2布局表格和单元格绘制完成后，在“布局”对象面板中按下“标准模式”按钮，则刚刚绘制的布局会全部转换成表格，如图7-14所示。我们可以任意调整表格，也可以回到“布局模式”中继续绘制。图7-14标准模式下的表格7.5框架的应用前面我们介绍了很多网站的页面都是用表格制作的，其实还有一种更方便的工具，这就是框架。使用框架不仅能够让站点具有统一的风格，而且利用框架制作的页面链接也具有较强的优势，方便浏览页面。返回7.5.1框架简介框架包含两部分，一部分是框架，另一部分就是框架集。框架集定义了一个在窗口中显示的框架数以及框架内的网页等，框架则是指框架集中包含的网页，也就是显示区域。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。

7.5.1框架简介7.5.2创建框架及框架集（1）创建框架集：首先创建一个空白文档，在此文档的基础上构建框架。然后用鼠标拖动文档窗口四周显示的框架边框，当鼠标变成双箭头时，将它移动到所希望的位置上，释放鼠标，即可构建框架。（2）插入预置的框架集：单击“插入”|“HTML”|“框架”命令，有可供选择的多种框架集样式，选择其中一种就可以直接插入了。每插入一个新的框架集，都会生成一个框架集HTML文档以及若干个框架HTML文档。如果在一个框架集中插入另一个框架集，我们称之为嵌套框架集。

7.5.2创建框架及框架集（3）新建框架集：单击“文件”|“新建”菜单项，打开“新建文档”对话框，在“新建文档”对话框中单击“常规”选项卡，选择“框架集”，如图7-15所示。7.5.2创建框架及框架集图7-15新建“框架集”对话框7.5.3设置框架和框架集属性（1）设置框架属性：首先单击“窗口”|“框架”菜单项，打开“框架”面板。要设置某个框架的属性，必须先选中它，可以直接在“框架”面板上单击对应的框架区域，被选中的框架区域四周会出现黑色边框。选中框架后，就可以在属性面板设置其属性，框架的属性面板如图7-16所示。图7-16框架的属性面板7.5.3设置框架和框架集属性（2）设置框架集属性：单击“框架”面板四周的框架边框，选中框架集，这时整个“框架”面板区域四周显示粗黑边框。选中框架集后，就在属性面板中设置其属性，框架集的属性面板如图7-17所示。图7-17框架的属性面板7.5.4插入框架内容（1）创建框架和框架集。单击“文件”|“新建”菜单项，打开“新建文档”对话框，参数设置如图7-18所示。图7-18新建“框架集”对话框7.5.4插入框架内容（2）保存框架及框架集。单击“文件”|“保存全部”菜单项，保存时将上面的框架命名为“topFrame”，下部左侧的框架命名为“leftFrame”，下部右侧的框架命名为“mainFrame”。（3）设置topFrame框架的属性。在属性面板中设置topFrame框架的属性。（4）设置leftFrame框架的属性。在属性面板中设置leftFrame框架的属性。

（5）设置mainFrame框架的属性。在属性面板中设置mainFrame框架的属性。（6）设置topFrame框架内的页面属性。选中“topFrame”框架，单击“修改”|“页面属性”菜单项，弹出一个名为“页面属性”的对话框，在其中设置参数。（7）设置leftFrame框架内的页面属性。选中“leftFrame”框架，单击“修