本节继续使用表格来设计完整页面，整个页面在网站建设时通过多层嵌套表格设计3行3列的页面布局样式。

【操作步骤】

第1步，在设计页面之前，使用Photoshop制作并处理网页中使用的图像，然后建立一个images文件夹，将这些图像文件都放在该文件夹中，以备引用。整个首页的布局思路在制作之前应先在草稿纸上勾画一下，然后用Photoshop制作一个模板。

第2步，根据需要再用切片工具切割图像。

第3步，启动Dreamweaver，新建文档，保存为index.html。在主窗口中选择【修改】|【页面属性】命令，打开【页面属性】对话框，在该对话框中单击左侧【分类】列表中的【标题/编码】选项，在【标题】文本框中输入网页的标题“个人主页－桃花源”。当用户在浏览器中打开此网页时，网页标题会出现在浏览器的标题栏中。

第4步，单击【分类】列表中的【外观（CSS）】选项，在右侧的【背景图像】文本框中输入网页背景图像的完整名称。本例中，已将背景图像复制到站点中的images文件夹中，因此输入文件的相对路径即可，单击【浏览】按钮可以在打开的对话框中快速找到背景图像。

第5步，在【重复】下拉菜单中选择repeat-x，即定义横向重复，因为本页背景图像为渐变色图像，只能在横向上重复。

第6步，为使网页在浏览器中不留空白边距，可以在下面4个边距文本框中输入“0”，设置网页与浏览器之间没有边距。

提示：在网页设计时，如果使用的图像文件不在站点中，可以单击文本框右边的【浏览】按钮，在打开的对话框中查找图像。单击【确定】按钮后，系统会弹出提示对话框询问是否把该图像保存到站点内，并打开【复制文件为】对话框让用户保存该图像到站点内。

第7步，单击【分类】列表中的【链接】选项，在右侧的文本框中设置链接文本在不同状态下的样式。

本例中，为了使链接文本和网页整体颜色协调一致，设置【链接颜色】（正常状态下）为#663300，【交换图像链接】（鼠标指针经过链接时）为#857940，【已访问链接】（单击后的文本链接）为#663300，和正常状态颜色一致。

第8步，在【下划线样式】下拉列表框中选择“交换图像时隐藏图像”选项，即当鼠标指针经过链接时不再显示系统默认的显示下划线效果。

第9步，使用表格布局页面。上下共插入两个并列的表格，然后在第2个表格中嵌入多个不同层级的表格。

提示：插入的表格要隐藏边框，设置单元格边距和单元格间距为0，避免这些属性对页面的影响。关于表格的行数、列数可以根据需要自由设置，表格的长度一般设置原则为：最外围表格建议指定固定数值，单位为像素；嵌套表格可以设置为百分比，一般情况下为100%。表格之间可以嵌套，嵌套表格的目的是为了更详细地布局网页，但建议不要嵌套太深，一般不要超过5层，最好保持在3层内。此时可以放大视图，以方便观察。

第10步，在表格中插入图像。在插入前，先在表格的单元格中单击，选择【插入】|【图像】|【图像】命令，打开【选择图像源文件】对话框。在该对话框的文件列表中选择要插入的图像文件。单击【确定】按钮，选定的图像即被插入到单元格中。

第11步，在表格中插入背景图像。网页可以设置背景图像，表格、单元格、行都可以设置背景图像。背景图像在插入表格之后会根据表格大小进行重复显示。当表格比图像小时，则显示局部图像；当表格比图像大时，则重复显示图像；如果希望正好显示背景图像，可以设置单元格大小和图像大小一致。

第12步，在网页中输入和设置文本。将插入点定位到需要插入文本的位置，然后输入文本即可。

在设计网页时要设置文本属性，首先要选定文本。在【属性】面板中设置：文本的颜色为深色，字体大小为12像素。在该页面中运用了样式maincontent，使用样式的好处就是能够快速便捷地控制页面元素的属性，例如，定义一个样式maincontent，代码如下：

..maincontent {   

font-size: 12px;   

color: #663300;   

line-height: 20px;   

font-family: arial, helvetica, sans-serif;   

text-decoration: none}

上面代码就表示定义元素的字体大小为12像素，颜色为#663300，行高为20px，字体为arial、helvetica、sans-serif中的一种，不定义文本修饰。定义完毕样式，就可以把这些样式应用到网页中任何选中的文本。

第13步，设置超链接文本。选定要作为超链接载体的文本，在【属性】面板中【链接】文本框中直接输入目标网页文件的绝对URL，如files/documnets.html。

第14步，完成页面设计操作，按Ctrl+S快捷键保存文档，然后按F12键在浏览器中预览。