实例7 瑞美家居设计网页（一）

实例说明 在接下来几个实例中将为读者讲解一个瑞美家居设计网页，该网页是一个包含其他链接网页的网页，在本实例中将制作该网页的首页。通过本实例的学习，使读者综合掌握以上实例的知识点。

技术要点 在本实例中，首先设置页面属性中的背景颜色，然后插入表格，并设置其属性，最后插入图像素材，完成瑞美家居设计网页首页的制作。图7-1所示为本实例完成后的效果。

图7-1 瑞美家居设计网页首页的动态效果

1 将本书附带光盘中的“网页基础设置/实例7~10：瑞美家居设计网页”文件夹复制到本地站点路径内。

2 运行Dreamweaver CS4，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点路径内，然后将其命名为“首页”。

3 首先设置页面的背景颜色，单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，在“分类”显示窗中选择“外观（CSS）”选项，在“页面属性”对话框中会显示“外观（CSS）”编辑窗，在该编辑窗中的“左边距”、“右边距”、“上边距”和“下边距”参数栏中均键入0，确定页面边距，如图7-2所示。

图7-2 “页面属性”对话框

4 将“页面属性”对话框中“背景颜色”显示窗中的颜色设置为棕红色（#752832），如图7-3所示，单击“确定”按钮，退出该对话框。

图7-3 “页面属性”对话框

5 按下键盘上的Enter键，然后参照图7-4所示来定位鼠标。

图7-4 定位鼠标

6 执行菜单栏内的“插入”/“表格”命令，打开“表格”对话框，在“行数”参数栏中键入2，在“列”参数栏中键入5，在“表格宽度”参数栏中键入1004，在“边框粗细”、“单元格边距”、“单元格间距”参数栏中均键入0，如图7-5所示。单击“确定”按钮，退出该对话框。

图7-5 “表格”对话框

7 选择第一行所有的单元格，单击“属性”面板中的“合并所选单元格，使用跨度”按钮，将所选单元格合并。

8 在第一行单元格内单击，执行菜单栏内的“插入”/“图像”命令，打开“选择图像源文件”对话框，从该对话框中选择复制的“实例7~10：瑞美家居设计网页”文件夹中的dynamic.gif文件，如图7-6所示，单击“确定”按钮，退出该对话框。

图7-6 “选择图像源文件”对话框

9 执行菜单栏内的“文件”/“保存”命令，将该网页保存，按下键盘上的F12键浏览网页，如图7-7所示。

图7-7 浏览网页

10 现在本实例就制作完成了，图7-8所示为本实例完成后的效果。保存本实例，以便在实例8中使用。

图7-8 瑞美家居设计网页主页的动态效果