用嵌套表格制作一个简单的网页

第3章实践与练习：

用嵌套表格制作一个简单的网页

本例着重练习在Dreamweaver中创建表格，并通过嵌套表格来实现对网页的布局，制作一个有导航栏的简单的网页，并使代码高度和可视高度一致。本例最终效果如下图所示。

⑴首先运行程序Dreameaver8，选择菜单栏“文件→新建”命令，创建新文档。

⑵选择菜单栏“插入→表格”命令，创建一个1行1列宽度为100%的表格，选中表格，在属性面板中设该表格的“高”为“100%”，“间距”为“0”、“边距”为“0”。

⑶在表格的单元格内单击鼠标左键，在属性面板中，设单元格的“水平”为“居中对齐”、“垂直”为“居中”，此时光标就在单元格的正中闪烁。

⑷选择菜单栏“插入→表格”命令，插入一个3行3列的表格。选中表格，在属性面板中设该表格的“宽”为“600”，“高”为“300”，“填充”为“0”，“间距”为“0”，“边框”为“0”。插入表格后，就在第一个表格中嵌套了一个表格，嵌套进来的表格居于第一个表格的中心。如图所示。

⑸第一个表格就是帮助网页定位的，嵌套进来的表格是网页部分，接下来就在嵌套表格里进行操作。分别选中第一行的各个单元格，然后单击属性面板上“背景”右边的“单元格背景URL”按钮，准备为各个单元格添加背景。

⑹单击“单元格背景URL”按钮后，会弹出“选择图像源文件”对话框，在对话框的“查找范围”列表里找到背景图片（/images/bg1.jpg），单击“确定”按钮，这就为第一行各个单元格添加了背景图。

添加背景图后的效果

⑺为第一行添加背景图后可以看到背景图片超出了第一行的单元格，所以需要设置单元格的相关属性。单击第一行第一列单元格，在属性面板中设置单元格的属性，“宽”为“240”，“高”为“59”。

⑻在第一行第一列单元格内单击鼠标左键，在属性面板中设置“水平”为“居中对齐”，“垂直”为“底部”。输入文本“名香艺馆”，设置字体为“黑体”、大小为“36”并加粗，字体颜色为“#999900”。这样网页的顶部就制作完成了。

⑼选取第三行的所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并这一行。在这一行的单元格内单击鼠标左键，在属性面板上设“高”为“40”、“背景色”为黑色。在单元格中输入文本“梦之坊工作室电话：0555─2315040”，然后在属性面板中设置文本在单元格中“居中对齐”。设置字体大小为“12”，颜色为白色。这样网页的底部就制作完成了。

网页底部

⑽选取第二行的所有单元格并合并。单击合并后的单元格，选择菜单栏“插入→表格“命令，在第二行的单元格中插入一个1行2列的表格。选中该表格，在属性面板中设“宽”、“高”都为“100%”，“间距”为“0”。这是网页的中间主体部分。

在第二行的单元格中嵌套表格

⑾单击在第10步中插入的表格左列的单元格，在属性面板中输入“宽”为“20%”、“背景色”为浅灰色（#CCCCCC），设置“垂直”为“顶端”。然后选择菜单栏“插入→表格”命令插入一个8行1列，宽度为100%的表格作为导航栏。

⑿选中导航栏表格，“间距”设为“0”，各行的“高”分别交替地设为“6”、“20”。行高为“20”的单元格的背景色设为橘黄色。

⒀此时发现行高为“6”的单元格的高度与可视高度不一致。此时单击行高为“6”的单元格，然后单击“代码”按钮，进入代码视图。

代码的高度与可视高度不一致输入导航栏文本⒁在光标闪烁处有“ ；”代码，删除此代码。同样的方法把其他行高为“6”的单元格在代码视图中“ ；”也删除。这样，行高的代码高度就和可视高度就一致了。

⒂在行高为“20”的单元格中输入文本，设置并应用样式，导航栏就制作完成了。

⒃单击第10步操作中嵌入的表格的右列单元格，选择菜单栏“插入→图像”命令，插入一张图片（/images/ 8.2.10.jpg），按住鼠标左键调整图片的大小到304×261。

⒄在图片右侧的单元格内单击，然后选择菜单栏“插入→表格”命令插入一个5行2列，宽度为100%的表格。合并第二列并设置其宽度为47，均分第一列各行都高度，在第四行里输入文本：“熏香有着悠久的历史，最早的书香世家之说中的香，即为熏香。”

⒅在第一行第二列单元格中单击，设置其“宽度”为“260”，“水平”为“居中对齐”、“垂直”为“底部”。输入文本：“名香香艺”，并进行大小与颜色的设置。

⒆按菜单栏“文件→保存”命令，保存文档，预览网页效果。