实例3 汽车咨询网页（分页）
实例说明
网页的布局是一件非常繁杂的工作，必须经过缜密的计划和合理的安排。在本实例中，将继续制作汽车咨询网页的分页。由于必须显示一些具体的数据，所以涉及到在单元格中继续添加单元格，设置更为复杂的布局。
技术要点
在本实例中，首先设置表格，然后在单元格中导入图片，接下来继续在单元格中设置表格，并在表格中设置文本，完成网页的制作。
在咨询类的网站中，经常会用到表格类的元素。为了不影响网页的基本布局，可以在单元格内再设置单元格，这样可以对网页进行更为细致的编辑。图3-1所示为本实例完成后的效果。
图3-1 汽车咨询网页分页
1 运行Dreamweaver CS3，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点的路径，并将其命名为“汽车分页01”。
2 在“常用”工具栏内单击
“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入3，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
3 退出“表格”对话框后，在文档窗口中会出现一个表格，该表格内有3个单元格。进入“属性”面板，设置3个单元格的背景色均为黑色，如图3-2所示。
图3-2 插入表格
4 单击
“文本颜色”显示窗，在弹出的颜色列表中选择白色，在“字体”下拉式选项栏内选择“默认字体”选项，在“大小”下拉式选项栏内键入15，然后激活
“居中对齐”按钮，使文本居中对齐。
5 在第1列单元格内键入“car01”字样，并使用同样的设置，在第2列单元格内键入“car02”字样，在第3列单元格内键入“car03”字样，如图3-3所示。
图3-3 键入文本
6 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
7 单击新插入的表格中的单元格，在“常用”工具栏内单击
“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页顶部.gif”文件，如图3-4所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图3-4 “选择图像源文件”对话框
8 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到单元格内。然后选择导入后的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框。
9 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框，在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
10 单击新插入的表格中的单元格，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页图像.gif”文件，如图3-5所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图3-5 选择图像
11 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框。然后选择新导入的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，如图3-6所示。
图3-6 导入“分页图像”图像
12 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入2，在“列数”参数栏内键入3，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框，在文档窗口中会出现如图3-7所示的表格。
图3-7 插入表格
13 按住Shift键依次单击新插入的表格第1列的2个单元格，选择这2个单元格。然后进入“属性”面板，单击该面板内的
“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图3-8所示。
图3-8 合并第1列的2个单元格
14 按住Shift键依次单击新插入的表格第3列的2个单元格，选择这2个单元格。然后进入“属性”面板，单击该面板内的“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图3-9所示。
图3-9 合并第3列的2个单元格
15 选择第1列合并后的单元格，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页左.gif”文件，单击“确定”按钮，退出“选择图像源文件”对话框。
16 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框。然后选择新导入的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，激活“左对齐”按钮，使其沿左侧对齐，如图3-10所示。
图3-10 导入“分页左”图像
17 在第3列合并后的单元格内单击，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页右.gif”文件，单击“确定”按钮，退出“选择图像源文件”对话框。
18 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框。选择新导入的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，激活
“右对齐”按钮，使其沿右侧对齐，如图3-11所示。
图3-11 导入“分页右”图像
19 单击新插入的表格内第2列第1行的单元格，进入“属性”面板，单击
“背景颜色”显示窗，在弹出的颜色列表中选择黑色，在“宽”参数栏内键入514，在“高”参数栏内键入246，如图3-12所示。
图3-12 “属性”面板
20 设置完成后的效果如图3-13所示。
图3-13 设置完成后的效果
21 在设置背景色和长宽后的单元格内单击，在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入5，在“列数”参数栏内键入2，在“表格宽度”参数栏内键入514，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入2，如图3-14所示。单击“确定”按钮，退出该对话框。
图3-14 “表格”对话框
22 插入的表格如图3-15所示。
图3-15 插入表格
23 选择刚刚插入的表格的第1行第1列的单元格，单击“文本颜色”显示窗，在弹出的颜色列表中选择白色，在“字体”下拉式选项栏内选择“默认字体”选项，在“大小”下拉式选项栏内键入15，激活“居中对齐”按钮，使文本居中对齐，然后在所选单元格内键入“名称”字样，如图3-16所示。
图3-16 键入文本
24 使用同样的设置，参照图3-17在其他单元格内分别键入文本。
图3-17 键入其他文本
25 单击表格内第2列底部的单元格，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页底侧.gif”文件，单击“确定”按钮，退出“选择图像源文件”对话框。
26 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框。选择新导入的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，如图3-18所示。
图3-18 导入“分页底侧”图像
27 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
28 单击新插入的表格中的单元格，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“分页底部.gif”文件，单击“确定”按钮，退出“选择图像源文件”对话框。
29 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框。选择新导入的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，如图3-19所示。
图3-19 导入“分页底部”图像
30 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
31 单击新插入的表格内的单元格，进入“属性”面板，单击“背景颜色”显示窗，在弹出的颜色列表中选择黑色，在“宽”参数栏内键入1024，在“高”参数栏内键入100。
32 单击“文本颜色”显示窗，在弹出的颜色列表中选择白色，在“字体”下拉式选项栏内选择“默认字体”选项，在“大小”下拉式选项栏内键入15；然后单击
“粗体”按钮，并激活“居中对齐”按钮，使文本居中对齐，然后在所选单元格内键入“www.car.com”字样，如图3-20所示。
图3-20 编辑文本
33 本实例完成了，完成后的效果如图3-21所示，在菜单栏执行“文件”/“保存”命令，将该网页保存在本地站点的路径。
图3-21 汽车分页
34 设置网页的超链接。从本地站点文件夹内打开上个练习中保存的网页主页“汽车主页01.html”文件，选择该网页顶部的car01文本。在“属性”面板中单击“链接”文本框右侧的
“浏览”按钮，打开“选择文件”对话框，从该对话框内选择本地站点文件夹内的“汽车分页.html”文件，如图3-22所示，单击“确定”按钮，退出该对话框。
图3-22 “选择文件”对话框
35 在设置了超链接之后，文本颜色变成了蓝色。在“属性”面板内单击“页面属性”按钮，打开“页面属性”对话框。在“分类”显示窗内选择“链接”选项，这时会显示链接控制参数；单击“链接颜色”显示窗，在弹出的颜色列表中选择白色，单击“活动链接颜色”显示窗，在弹出的颜色列表中选择白色；在“下划线样式”下拉式选项栏内选择“始终无下划线”选项，如图3-23所示。单击“确定”按钮，退出“页面属性”对话框，文本颜色显示为白色。
图3-23 “页面属性”对话框
36 使用同样的方法设置“car02”、“car03”和汽车图片的超链接为“汽车分页.html”文件，本实例就全部完成了。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“咨询类网页/实例2～3：汽车咨询网页/汽车主页.html”文件和“咨询类网页/实例2～3：汽车咨询网页/汽车分页.html”文件，该文件为本实例和上个实例设置完成后的文件。
提示
一个网站的设置是非常复杂的。由于本书制作的实例，只是为了指导读者学习网页制作知识，为了提高工作效率，对图片和文字使用了相同的超链接内容。