Dreamweaver创建、编辑表格和单元格

实验5创建、编辑表格和单元格

表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。通过本试验的学习，需要熟悉掌握表格的使用方法，编辑表格和单元格的基本操作。

说明表格是页面布局中极为有用的设计工具。在使用Dreamweaver MX 2004 设计网页的过程中，大多数的情况也是使用表格来定位页面中的基本元素，以使页面中的各元素能够达到有序排列的目的。

对应知识点

插入表格和牵套表格

表格和单元格的属性

添加单元格内容

普通说明文档和表格形式文档各一份。

1．启动Dreamweaver MX 2004 程序，按Cral+N 键创建HTML

为page05.htm。

2．在“文档”面板“标题”栏输入网页名称“时尚生活”。如图5-1所示。

图5-1 输入网页标题

说明在文档面板中的标题设置与在

“页面属性”对话框“标题/编码”区域的标题

设置，是两种设置网页标题的方法。可以达到同

样的效果。

3．在插入面板中选“常用”项，切换到“常用

“面板。单击“表格”按钮按钮，或选择菜单“插入”“表格”命令，弹出如图5-2所示的“表格”对话框。

说明如果“表格”按钮不可用，则说明当前网页编辑窗口处于模式状态，用户可单击“查看”“表格模式”“标准模式”，这样“表格”按钮即可用。

在“行数”和“列数”编辑框内分别输

输入“１”；在“表格宽度”编辑框内输入100，选择“百分比”选项；在“边框粗细”编

说明在“单元格边距”编辑框中设置单元格

图5-2 “表格”对话框图

内容与单元格边界之间的像素数，默认值为２像素；在“单元格间距”编辑框中设置为每个单元格之间的像素数，默认值为２像素；在“页眉”选项框下有四种样式，表格设置表格内标题的

四种形式，分别为：无页眉、左页眉、顶部页眉和左侧、顶部都有页眉；在“标题”编辑框内输入所插入表格的标题；在“对齐标题”下拉列表中选择标题对其的方式，分别为：默认、顶部、底部、左和右；在“摘要”编辑框内输入所建表格的说明，会自动以代码形式加入中，在编辑界面、浏览界面都不显示。

4．单击“确定”按钮，创建表格

显示在Dreamweaver MX 2004文档窗

口

中，如图5-3所示。

5．鼠标移动到表格外边框处，出现

了

|| 标记，单击鼠标即可选中表格。选

中菜单“窗口”“属性”命令，然后

在属性面板中设置表格样式。

6．在属性面板中显示了在创建表格

时设置的行、列、宽等项。我们在“高”

编辑框内输入“60”，在后面的单位列表图5-3 在文档窗口中显示的表格

中选择“像素”；在“对齐”下拉列表中选择“居中对齐”；单击“背景颜色”按钮，在调色板中选择背景颜色为绿色（色标值为#A3D900），此时表格中的属性面板显示如图5-4所示。完成的表格样式如图5-5所示。

图5-4 表格属性面板

图5-5 在属性面板中设置后表格样式

7．在表格内单击鼠标，光标定位在表格内。输入文字“时尚生活”，拖动鼠标选项中文字，在属性面板中设置大小为“36像素”，颜色为蓝色（色标值为＃0033FF），单击“居中对齐”按钮按钮和“粗体”按钮B，设置字体为“隶属”（关于“字体”的设置请参考试验4中的介绍），完成后网页文字和属性面板如图5-6所示。

图5-6 编辑文字样式

说明以上是对单元格属性面板的设置，它包括了单元格内元素的设置。单元格属性面板的上半部分和文本属性面板相似，在此不再赘述。下面介绍该面板上主要按钮的功能。按钮用于合并两个或多个单元格；按钮用于拆分一个单元格；在“水平”列表中有四种对其方式：默认、、做对齐、居中对齐、右对齐、一般的单元格内容居左，标题型内容居中；在“垂直”列表中有5种对其方式：默认、顶端、居中、底部、基线、默认单元格内的文字在垂直居中显示；在“宽”和“高”编辑框内设置单元格的尺寸；勾选“不换行”选项，在输入单元格内容的时候，单元格会自动扩展使得输入的文本在一条直线上显示；在“背景”区域，单击后面的文件夹图标，查找需要插入的背景背景图片，文本框中会显示图片的

路径；在“背景颜色“区域可以从颜色选择器中选择单元格的背景色；在“边框”中设置单元格边框颜色，当边框设置不为０时，用户即可看到显示效果。

８．在表格外侧空白处单击鼠标，选择菜单“插入”“表格”命令，在表“表格”对话框中，输入行数为“１”，列数“5‘，表格宽度为”100%“，边框粗细为“1像素”，单击“确定”按钮，在“标题”表格下方插入一表格。

9．选中此表格，在属性面板中设置“边框颜色”为绿色（色标值为＃009900），如图5-7所示。

10．拖动鼠标选中５个单元格，在下方的单元格属性面板中“宽”编辑框内输入“20%”，在“背景颜色”调色板上选择草绿色（色标值为#CCFF66），完成后单元格效果如图5-8所示。

图5-7 插入1行5列表格，设置边框颜色为绿色

图5-8 设置单元格宽度和背景颜色

说明图5-8 为单元格被选中状态，在每个单元格上方显示了单元格的宽度。在表格外任意谓之单击，即刻取消选择。

11．分别在单元格内输入网页栏目标题。再次拖动鼠标或按住Ctrl键单击每个单元格，

使单元格处于被选中状态。在属性面板中设置大小为14像素，颜色为蓝色（色标值为#0033FF），并单击“居中对齐”按钮，取消选择，网页效果如图5-9所示。

12．在“栏目标题”下方插入２行２列，宽度为100%，边框粗细、单元格边距、单元格间距均为０的表格。选中表格，在属性面板中设置表格居中对齐，高为200像素。

13．拖动鼠标选项中左侧两个单元格，单击属性面板“合并所选单元格”按钮按钮。合并左侧单元格，设置其背景夜色为桔黄色（色标值为#FFCC00）。

14．设置右侧两个单元格告诉分别为20、180，设置第1行单元格背景颜色为桔黄色（色标值为#FFCC00），完成效果如图5-10所示。

图5-9 设置网页栏目标题

图5-10 设置表格布局和背景颜色

15．在左侧单元格内单击，选择菜单“插入”“表格”命令，插入３行１列，宽度为90%，单元格边距为１，边框粗细和单元格间距为０的嵌套表格。选中表格，在属性面板中“对齐”下拉列表中选择“居中对齐”命令。

说明所谓嵌套表格就是在表格中插入表格。当用户需要在一个单元格内完成比较复杂的布局时，可以设置嵌套表格。嵌套表格的宽度会受到它外层的单元格限制。

16．选中等２行单元格，在属性面板中设置高为“20”，背景颜色为“黄色”（色标