实例2 旅游宣传网页
实例说明 在本实例中将指导读者制作一个旅游宣传网页的首页，该网页由多张图片元素组成，其中在编辑图像时为其添加了边框。通过本实例的学习，使读者了解页面属性中背景颜色等外观设置。
技术要点 在本实例中，首先需要将网页中使用的素材导入到本地站点，然后设置表格，在单元格中导入图像，接下来为表格添加边框，完成该网页的制作。图2-1所示为本实例完成后的效果。
图2-1 旅游宣传网页
1 将本书附带光盘中的“网页基础设置/实例2：旅游宣传网页”文件夹复制到本地站点路径中。
2 运行Dreamweaver CS4，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点路径中，然后将其命名为“旅游宣传网页”。
3 执行菜单栏中的“插入”/“表格”命令，打开“表格”对话框，在“行数”参数栏中键入2，在“列”参数栏中键入8，在“表格宽度”参数栏中键入720，在“边框粗细”、“单元格边距”、“单元格间距”参数栏中均键入0，如图2-2所示，单击“确定”按钮，退出该对话框。
图2-2 “表格”对话框
4 退出“表格”对话框后，在页面中会出现一个表格，该表格中有16个单元格，如图2-3所示。
图2-3 插入表格
5 按住Shift键依次单击新插入表格第一行的8个单元格，进入“属性”面板，单击该面板中的
“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-4所示。
图2-4 合并第一行的单元格
6 在第一行单元格中单击，执行菜单栏中的“插入”/“图像”命令，打开“选择图像源文件”对话框，从该对话框中选择复制的“实例2：旅游宣传网页的首页”文件夹中的Rivage.jpg文件，如图2-5所示，单击“确定”按钮，退出该对话框。
图2-5 “选择图像源文件”对话框
7 退出“选择图像源文件”对话框后，会打开“图像标签辅助功能属性”对话框，如图2-6所示，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到页面中。
图2-6 “图像标签辅助功能属性”对话框
8 图像导入后的效果如图2-7所示。
图2-7 导入图像
9 使用同样的方法，在第二行的单元格内由左至右依次导入复制的“实例2：旅游宣传网页的首页”文件夹中的01.jpg、02.jpg、03.jpg、04.jpg、05.jpg、06.jpg、07.jpg、08.jpg文件，完成效果如图2-8所示。
图2-8 导入相应图像
10 接下来需要编辑页面属性。单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，在“分类”显示窗中选择“外观（CSS）”选项，在“页面属性”对话框中会显示“外观（CSS）”编辑窗，在该编辑窗中的“左边距”、“右边距”、“上边距”和“下边距”参数栏中均键入0，确定页面边距，如图2-9所示，单击“确定”按钮，退出该对话框。
图2-9 “页面属性”对话框
11 在“分类”显示窗中选择“外观（HTML）”选项，在“页面属性”对话框中会显示“外观（HTML）”编辑窗，单击
“背景颜色”显示窗，在弹出的颜色列表中选择黑色，设置背景颜色，如图2-10所示，单击“确定”按钮，退出该对话框。
图2-10 设置背景颜色
12 设置背景颜色后的效果如图2-11所示。
图2-11 设置背景后的网页效果
13 选择所有的单元格，选择“属性”面板中“对齐”下拉选项栏中的“居中对齐”选项，设置单元格的对齐方式，如图2-12所示。
图2-12 设置单元格的对齐方式
14 设置单元格的边框。选择第一行的单元格，在“属性”面板中的“边框”参数栏中键入2，如图2-13所示。
图2-13 设置“边框”参数
15 使用同样的方法，将第二行所有单元格边框设置为1，完成后的效果如图2-14所示。
图2-14 设置边框后的效果
16 选择第一行单元格内的图像，在“属性”面板中的“宽”参数栏中键入732，如图2-15所示，设置图像的宽度。
图2-15 设置图像的宽度
17 现在本实例的制作就全部完成了，图2-16所示为本实例完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“网页基础设置/实例2：旅游宣传网页首页/旅游宣传网页．html”文件，该文件为本实例完成后的文件。
图2-16 旅游宣传网页的首页