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 “表格”对话框图内容与单元格边界之间的像素数，默认值为２像素；在“单元格间距”编辑框中设置为每个单元格之间的像素数，默认值为２像素；在“页眉”选项框下有四种样式，表格设置表格内标题的四种形式，分别为：无页眉、左页眉、顶部页眉和左侧、顶部都有页眉；在“标题”编辑框内输入所插入表格的标题；在“对齐标题”下拉列表中选择标题对其的方式，分别为：默认、顶部、底部、左和右；在“摘要”编辑框内输入所建表格的说明，会自动以代码形式加入<tableL>中，在编辑界面、浏览界面都不显示。

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”，背景颜色为“黄色”（色标值为#FFFF99），大小为“12像素”，并单击“居中对齐”按钮，在单元格内输入栏目标题“时尚家具”，如图5-11所示。

17．选中第3行单元格，设置其背景颜色为黄色（色标值为#FFFF999）。

在单元格内插入1行1列，宽度为100%，单元格边距为8，边框粗细和单元格间距为9的嵌套表格。

选中表格，在属性面板中设置其背景颜色为桔黄色（色标值为#FFCC00），如图5-12所示。

图5-11 设置栏目标题样式图在第3个单元格内插入嵌套表格说明在这里使用嵌套单元格是为了使此单元格产生细线边框的效果。

而单元格边距的设置，会使单元格内容与边线产生一定的间距。

18．在单元格内输入若干条“时尚家具栏目小标题”，把光标定位在每个小标题前，右击中文输入图标右侧的键盘按钮，弹出选项菜单，选择“特殊符号”命令，如图5-13所示，在弹出的键盘上选择“菱形”图标。

如图5-14所示。

图5-13 选择“特殊符号”按钮图5-14 特殊符号键盘19．设置文字大小为12像素，“菱形”图标颜色为白色。

完成后如图5-15所示。

20．在“时尚家具”栏目列表右侧的第１行单元格内输入当前位置导航“当前位置：首页时尚家具阳台上的妙用”，便于浏览者清楚自己所在位置，随时返回上级菜单。

拖动鼠标，选中文字，在属性面板中设置大小为“12像素”，如图5-16所示。

图5-15 栏目小标题制作效果图5-16 输入当前位置导航21．在下面的单元格内单击，在属性面板中设置此单元格的背景颜色为浅黄色（色标值为#FFFFCC）。

然后插入２行１列，宽度为90%，边框粗细、单元格边距和单元格间距均为０的嵌套表格。

选中此表格，在属性面板中选择“对齐”下拉列表中的“居中对齐”选项。

在第２个单元格内输入文章内容，或直接将本书配套光盘\exp4-5sucai05中的电子文档粘贴到此单元格内。

22．拍板文字内容，并设置其小标题颜色为红色（色标值为#FF0000）、粗体，完成效果如图5-17所示。

23．在具体内容表格右侧单击鼠标，按Enter键换行。

选择菜单“文件”“导入”“表格式数据”命令，打开“导入表格数据”对话框。

24．单击“数据文件”编辑框右侧的“浏览”按钮，选择光盘素材“表格.txt”文件夹。

在“定界符”下拉列表中选择“逗点”选项。

在“表格宽度”区选择“指定宽度”单选钮，在显示的编辑框中输入“90”，单位为“白分比”。

在“单元格边距”和“单元格间距”编辑框内输入“０”。

在“边框”编辑框内输入“１”对话框如图5-18所示。

25．单击“确定”按钮，表格导入到网图5-17 制作具体内容页中，如图5-19所示。

图5-18 “导入表格式数据”对话框图5-19 导入表格式数据26．选中比表格，在属性面板中设置表格居中对齐，在“填充”编辑框内输入“２”，在“大小”下拉列表种选择“12”。

拖动鼠标选择第１行的４列单元格，在属性面板中设置背景颜色为居行色（色标值为#FFCC00），并单击“居中对齐”按钮。

完成后表格效果如图5-20所示。

27．选择菜单“文件”“保存”命令，保存网页。

按F12在浏览器中查看网页效果。

如图5-21所示。

图5-20 设置导入表格属性图5-21 网页完成效果模仿1．创建名为page05.htm的网页。

2．在网页中插入表格，在属性面板中设置网页背景颜色、对齐方式等属性。

3．在单元格内输入“时尚生活”标题，设置文字的字体、大小、颜色等属性。

4．制作栏目导航表格。

5．制作作侧“时尚家具”栏目标题列表。

6．制作网页具体内容，并设置相关属性。

7．导入表格数据，并设置相关属性。

创作1．使用表格设计一个网页的布局结构。

2．通过设置表格和单元格属性，设置网页背景颜色。

3．在单元格内添加文字内容，并在属性面板中设置大小、字体、颜色等。

4．导入Excel表格，并改变其风格于制作的网页统一。

5．参考光盘exp4，5\site05文件夹内的网页，练习表格布局设计方法，并使用表格制作出复杂的网页。

具体效果如图5-22~图5-25所示。

图5-22 表格在网页中的运用图5-23 表格在网页中的运用图5-24 表格在网页中的运用图5-25 表格在网页中的运用。