网页设计-在网页中使用表格

1、第3章 在网页中使用表格 3-1 插入表格 3-2 操作单元格的小技巧 3-3 利用布局视图设计表格样式 3-4 小知识 返回3-1插入表格 3-1-1 在网页中插入表格3-1-2 调整表格大小3-1-3 将表格居中对齐3-1-4 设置表格背景色3-1-5 修改表格边框颜色与粗细 返回3-1-1在网页中插入表格 表格中的基本概念： 表格中一个一个格子称为单元格（cell），一整条横向单元格称为行（row），一整条纵向单元格则称为列（column）。 建立表格前，先确定表格的行与列数目，然后就可以插入表格，并在单元格内开始输入文字或图片。 3-1-1在网页中插入表格（1）将光标移到要插入表格的位

2、置，然后到常用菜单模式上单击表格按钮。（2）出现“表格”对话框后，分别在行和列的空格中输入表格的行数和列数，然后单击“确定”按钮。 根据所设置的内容，网页上就会出现一个指定行数、列数与边框粗细的空白表格。 返回3-1-2调整表格大小调整表格大小有两种方式：表格随输入的汉字自动扩大。 直接指定表格的宽度大小。直接调整表格大小的步骤如下。（1）移动鼠标到表格边线，当鼠标出现图标后，单击鼠标左键选取表格。 3-1-2调整表格大小选取表格（2）打开属性面板后，分别在“宽”和“高”栏输入表格的宽度和高度。输入表格的宽度和高度3-1-2调整表格大小 在表格属性面板的“宽”和“高”栏后面有单位列表：像素表示

3、固定表格大小%使表格随着浏览窗口的大小，以指定的百分比改变表格的相对大小。 也可以在选取表格后，移动鼠标到周围的黑色标记上，当鼠标出现图标后，拖动鼠标改变表格大小。返回3-1-3将表格居中对齐 移动鼠标选取表格，在打开的属性面板中选择“对齐”列表中的 “居中对齐”。选取表格选择“居中对齐”3-1-4设置表格背景色 建立表格后，系统默认表格是没有背景色的，可以替表格加上背景色。选取表格后，在“属性”面板中单击“背景颜色”旁的按钮，从弹出的色板中选择表格背景色。 选择此按钮选取表格3-1-4设置表格背景色 除了背景色外，表格也可以设置背景图案，只要单击“背景图像”栏的浏览文件按钮，再选取图片文件就

4、可以了。 返回3-1-5修改表格边框颜色与粗细 为了让表格看起来更醒目，可以调整边框的粗细或是修改边框的颜色 选取表格选择此按钮3-1-5修改表格边框颜色与粗细 接着在“边框”栏输入表格的边框粗细。输入边框粗细 表格属性面板的“边框”栏为表格的边框粗细设置，输入数字越大，则边框越粗；若输入0，则不会有边框显示。返回3-2操作单元格的小技巧3-2-1 调整单元格高度3-2-2 合并单元格3-2-3 设置标题单元格3-2-4 设置单元格背景色3-2-5 套用默认的表格样式3-2-6 导入外部文件变成表格 返回3-2-1调整单元格高度（1）将光标移到单元格中。 将光标移到单元格中（2）接着在属性面板

5、的“高”栏输入单元格高度。 输入单元格高度返回3-2-2合并单元格 （1）拖动鼠标选取要合并的单元格。 （2）打开属性面板后，移动鼠标单击合并所选单元格按钮。选择此按钮3-2-2合并单元格 若要拆分单元格，按下属性面板的拆分单元格为行或列按钮，则会出现“拆分单元格”对话框，接着输入要分割出来的行或列数目后，就会将原本的单一单元格分割成好几个单元格。 返回3-2-3设置标题单元格 为了让表格的标题更醒目，Dreamweaver有一个设置标题单元格的选项，它的格式是固定不变的，被设为标题的文字会自动变为粗体，并且居中对齐。设置标题单元格的操作步骤如下 。 将光标移到要设成标题的单元格，接着在属性面

6、板中勾选“标题”。 3-2-3设置标题单元格光标移到单元格中勾选“标题”3-2-3设置标题单元格 勾选“标题”后，则文本的格式会被修改，变成粗体并且居中对齐。 标题单元格的格式 若是在单元格属性面板中勾选“不换行”，则在单元格中的文本到边界不会自动换行，而会一直往右延伸，扩大单元格范围。返回3-2-4设置单元格背景色 表格中的每一个单元格都可以分别设置背景颜色。 （1） 将光标移入要填入背景色的单元格中。打开属性面板后，移动鼠标单击背景颜色按钮，再从弹出的色板中单击系统颜色拾取器按钮。3-2-4设置单元格背景色选择此按钮选择按钮3-2-4设置单元格背景色（3）在“颜色”对话框中，选择要填入的颜

7、色，然后选择“确定”按钮。3-2-4设置单元格背景色 单元格背景设置的优先级高于表格，表格背景则高于网页，所以若网页、表格和单元格都设置了背景色或背景图，则单元格的背景呈现的是单元格背景设置，而不是表格或网页的背景。返回3-2-5套用默认的表格样式 除了自行设计外，Dreamweaver提供了许多默认表格样式，只要选取其中一个样式，就能自动套入所制作的表格中。（1）移动鼠标到菜单栏执行“命令“格式化表格”命令。（2）在出现的“格式化表格”对话框中选择要套用的表格样式，然后单击“确定”按钮。 3-2-5套用默认的表格样式选择要套用的表格样式样式内容预览所选样式3-2-5套用默认的表格样式套用格式

8、后，表格就会变成所选定的样式，十分方便。 表格自动套上选择的样式返回3-2-6导入外部文件变成表格 Dreamweaver可以加入不同数据库所制作的表格，只要将数据存成纯文本文件（以Tab字符或逗号等符号分隔），就可以插入网页中。（1）用Excel制作一个表格后，单击“保存”按钮。 3-2-6导入外部文件变成表格（2）出现“另存为”对话框后，在“保存位置”栏中选择文件存储的磁盘与文件夹，接着将文件类型设为文本文件（制表符分隔），然后在“文件名”栏输入文件名，最后单击“保存”按钮。类型设为文本文件3-2-6导入外部文件变成表格（3）出现Microsoft Excel警告窗口后，移动鼠标单击“确定

9、”按钮。（4）出现Microsoft Excel询问窗口后，移动鼠标单击“是”按钮。3-2-6导入外部文件变成表格（5）回到Dreamweaver窗口后，将光标移到要插入表格的位置，然后到布局模式上选择表格数据按钮。3-2-6导入外部文件变成表格（6）出现“导入表格式数据”对话框后，移动鼠标单击“浏览”按钮。3-2-6导入外部文件变成表格（7）在打开的对话框的“查找范围”栏中选择磁盘与文件夹，接着在列表中选择文件名，然后单击“打开”按钮。（8）回到“导入表格式数据”对话框后，单击“确定”按钮。3-2-6导入外部文件变成表格完成后，文件中的数据就会变成表格加到编辑区中。 导入的文本文件自动变成表

10、格3-2-6导入外部文件变成表格 将外部的表格读入Dreamweaver后，也可以反过来，将Dreamweaver中所做的表格数据导出，供其他软件使用。将光标移到单元格内或是选取表格，接着到菜单栏依序选择“文件/导出/表格”，出现“导出表格”对话框后，分别设置定界符和换行符就可以了。 返回3-3利用布局视图设计表格样式3-3-1 利用布局模式绘制表格3-3-2 改变表格与单元格大小3-3-3 移动单元格3-3-4 在单元格中插入文本或图片 返回3-3-1利用布局模式绘制表格快速制作出符合需求表格的方法：布局模式 （1）移动鼠标到布局菜单模式上单击 按钮。3-3-1利用布局模式绘制表格（2）在打

11、开的“从布局模式开始”窗口中单击“确定”按钮。3-3-1利用布局模式绘制表格（3）切换到布局模式后，移动鼠标到布局模式上单击布局表格按钮，接着拖动鼠标在编辑区绘制一个表格。3-3-1利用布局模式绘制表格（4）绘制完表格后，移动鼠标到布局菜单模式上单击绘制布局单元格按钮，然后在表格内绘制单元格。 绘制单元格表格宽度值3-3-1利用布局模式绘制表格除此之外，若是单击按钮，还可以切换成表格模式来使用。 选择按钮切换成表格模式返回3-3-2改变表格与单元格大小 在布局模式下，利用拖动的方式，可以任意地修改表格与单元格的大小。（1）选择布局表格后，表格周围会出现绿色小方块，接着移动鼠标到表格右下角，当鼠

12、标变成 图标时，拖动鼠标修改表格大小。3-3-2改变表格与单元格大小拖动鼠标修改表格大小选择布局表格标记3-3-2改变表格与单元格大小（2）将鼠标移到单元格边框时，边框会变成红色，此时就可以选取该单元格。选择单元格3-3-2改变表格与单元格大小（3）选取单元格后，边框会变成蓝色，接着移动鼠标拖动蓝色小方块，改变单元格大小。拖动鼠标改变单元格大小3-3-2改变表格与单元格大小修改后的表格就会依照所修改的样式来显示。 利用布局模式来制作表格，虽然表格可以随意改变大小，但却不能像层一样任意移动位置。 返回3-3-3移动单元格 虽然表格在网页中不能任意移动，但是表格中的单元格在布局模式下，却可以自由的

13、移动。 移动单元格的操作方法：移动鼠标选取单元格后，按住鼠标不放，将它拖动到适当位置。 选取单元格拖动到此3-3-3移动单元格将单元格移到适当位置后，Dreamweaver会改变其他单元格的大小或是自动产生其他单元格来配合。 自动产生适当的单元格来配合返回3-3-4在单元格中插入文本或图片 在布局模式下插入文本、图片等网页组件的操作步骤和在标准视图模式下相同，但是在布局模式下只能在自己绘制的单元格内加入组件，若是由Dreamweaver自动产生的单元格则不行。（1）将光标移到单元格内，接着在属性面板中设置文本字体、大小、颜色和对齐方式后，输入要显示的文本内容。 3-3-4在单元格中插入文本或图

14、片输入文本设置文本格式3-3-4在单元格中插入文本或图片（2）将光标移到单元格内，然后到常用模式上单击图像按钮。插入光标位置3-3-4在单元格中插入文本或图片（3）在打开的“选择图像源文件”窗口的 “查找范围”栏中选择文件所在磁盘与文件夹，接着在列表中选择文件名，然后单击“确定”按钮。回到编辑画面后，Dreamweaver就会依照图片的大小来改变单元格的宽度和高度。 在单元格中插入图片返回3-4小知识表格数据排序 Dreamweaver内建了表格排序的功能，可以直接在网页上对表格数据内容进行递增或递减的排序操作。（1）执行“命令”“排序表格”命令。 3-4小知识（2）打开“排序表格”对话框后，

15、在“排序按”列表中选择要排序的字段，接着在“顺序”列表中选择“按数字顺序”，并选择以降序的方式，然后单击“确定”按钮。选择要排序的字段选择排序方式3-4小知识完成排序后，表格内的数据会依照第2列字段的数字大小，由多到少递减排列。 数量从多到少递减排序3-4小知识 若是表格内的单元格合并或拆分过，且各行各列的单元格数不一致时，就无法进行排序的操作。 在设置排序的顺序时，若提示所设置的字段内数值重复，则可以在“再按”下拉列表中设置第二排序字段。 返回小 结 1.在表格属性面板的宽和高栏旁边有下拉列表，分别是像素和%。像素表示固定表格大小；%则会使表格随着浏览窗口的大小，相对调整显示的大小。 2.除了背景色外，表格也可以设置背景图案，只要选择背景图像栏的按钮，再选取图像文件就可以了。 3.表格属性面板的边框栏可以设置表格边框粗细，输入数字越大，则边框越粗；若输入0，则不会有边框显示。 4.选取表格中多个连续单元格，可以将它们合并起来。表格合并之后还可以拆小 结分，只要选择单