Dreamweaver创建编辑表格和单元格剖析.docx

Dreamweaver创建编辑表格和单元格剖析.docx

《Dreamweaver创建编辑表格和单元格剖析.docx》由会员分享，可在线阅读，更多相关《Dreamweaver创建编辑表格和单元格剖析.docx（12页珍藏版）》请在冰豆网上搜索。

Dreamweaver创建编辑表格和单元格剖析

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

实验要求

表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。

通过本试验的学习，需要熟悉掌握表格的使用方法，编辑表格和单元格的基本操作。

说明表格是页面布局中极为有用的设计工具。

在使用DreamweaverMX2004设计网页的过程中，大多数的情况也是使用表格来定位页面中的基本元素，以使页面中的各元素能够达到有序排列的目的。

对应知识点

插入表格和牵套表格

表格和单元格的属性

添加单元格内容

实验素材

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

实验步骤

1．启动DreamweaverMX2004程序，按Cral+N键创建HTML网页，并保存网页为page05.htm。

2．在“文档”面板“标题”栏输入网页名称“时尚生活”。

如图5-1所示。

图5-1输入网页标题

　　　　说明　在文档面板中的标题设置与在“页面属性”对话框“标题/编码”区域的标题设置，是两种设置网页标题的方法。

可以达到同样的效果。

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

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

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

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

输入“１”；在“表格宽度”编辑框内输入100，选择“百分比”选项；在“边框粗细”编辑框中输入“０”，其他为默认设置。

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

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

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

四种形式，分别为：

无页眉、左页眉、顶部页眉和左侧、顶部都有页眉；在“标题”编辑框内输入所插入表格的标题；在“对齐标题”下拉列表中选择标题对其的方式，分别为：

默认、顶部、底部、左和右；在“摘要”编辑框内输入所建表格的说明，会自动以代码形式加入中，在编辑界面、浏览界面都不显示。

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

显示在DreamweaverMX2004文档窗口

中，如图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设置栏目标题样式

图5-12在第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表格在网页中的运用