实例2 汽车咨询网页（主页）
实例说明
在本实例中，将指导读者制作一个汽车咨询网页的主页。由于该网页中使用的图像长宽比有所差别，所以需要对布局使用的表格进行编辑。通过本实例，可以使读者了解通过编辑表格来设置网页的方法。
技术要点
在本实例中，首先需要将网页使用的素材导入到本地站点，然后设置表格并在单元格中导入图像；接下来设置网页中部的表格，并对单元格进行编辑；最后在单元格中导入图像，完成该网页的制作。
默认的表格行和列的形状和数目是固定的，在制作网页时，有时需要使用不规则的布局，这时就需要对表格进行编辑，将单元格进行合并或者拆分，使其符合网页布局的要求。在本实例中，将为读者讲解相关知识，图2-1所示为本实例完成后的效果。
图2-1 汽车咨询网页主页
1 将本书附带光盘的“咨询类网页/实例2～3：汽车咨询网页”文件夹拷贝到本地站点的路径。
2 运行Dreamweaver CS3，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点的路径，并将其命名为“汽车主页01”。
3 在“常用”工具栏内单击
“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入3，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图2-2 所示。单击“确定”按钮，退出该对话框。
图2-2 “表格”对话框
4 退出“表格”对话框后，在文档窗口中会出现一个表格，该表格内有3个单元格，如图2-3所示。
图2-3 插入表格
5 选择第1列单元格，进入“属性”面板，单击
“背景颜色”显示窗，在弹出的颜色列表中选择黑色，如图2-4所示。
图2-4 设置背景颜色
6 单击
“文本颜色”显示窗，在弹出的颜色列表中选择白色，在“字体”下拉式选项栏内选择“默认字体”选项，在“大小”下拉式选项栏内键入15，然后激活
“居中对齐”按钮，使文本居中对齐，如图2-5所示。
图2-5 设置字体属性
7 在第1列单元格内键入“car01”字样，如图2-6所示。
图2-6 键入文本
8 使用同样的设置，在第2列单元格内键入“car02”字样，在第3列单元格内键入“car03”字样，如图2-7所示。
图2-7 键入其他文本
9 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
10 在刚刚插入的表格中的单元格内单击，然后在“常用”工具栏内单击
“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“主页顶部.gif”文件，如图2-8所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图2-8 “选择图像源文件”对话框
11 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到单元格。选择导入后的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，效果如图2-9所示。
图2-9 导入“主页顶部”图像
12 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入3，在“列数”参数栏内键入5，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框，在文档窗口中会出现如图2-10所示的表格。
图2-10 插入表格
13 按住Shift键依次单击新插入的表格的第1列的3个单元格，选择这3个单元格。然后进入“属性”面板，单击该面板内的
“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-11所示。
图2-11 合并第1列的3个单元格
14 按住Shift键依次单击新插入的表格的第5列的3个单元格，选择这3个单元格。然后进入“属性”面板，单击该面板内的“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-12所示。
图2-12 合并第5列的3个单元格
15 按住Shift键单击第2行第2列和第2行第3列的单元格，选择这3个单元格。然后进入“属性”面板，单击该面板内的“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-13所示。
图2-13 合并第2行的2、3列的单元格
16 按住Shift键单击第3行第2列和第3行第3列单元格，选择这2个单元格。然后进入“属性”面板，单击该面板内的“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-14所示。
图2-14 合并第3行的2、3列的单元格
17 按住Shift键单击第2行第4列和第3行第4列的单元格，选中这2个单元格。然后进入“属性”面板，单击该面板内的“合并所选单元格，使用跨度”按钮，将所选单元格合并，如图2-15所示。
图2-15 合并2、3行的第4列的单元格
18 在第1列单元格内单击，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“主页左.gif”文件，如图2-16所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图2-16 “选择图像源文件”对话框
19 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到单元格。选择导入后的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，效果如图2-17所示。
图2-17 导入“主页左”图像
20 使用同样的方法在其他单元格内导入图像，完成效果如图2-18所示。
图2-18 在其他单元格内导入图像
21 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
22 单击新插入的表格中的单元格，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例2～3：汽车咨询网页”文件夹内的“主页底部.gif”文件，如图2-19 所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图2-19 “选择图像源文件”对话框
23 退出“选择图像源文件”对话框后，会弹出“图像标签辅助功能属性”对话框，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到单元格内。选择导入后的图像，进入“属性”面板，在该面板内的“边框”参数栏内键入0，使其不显示边框，效果如图2-20所示。
图2-20 导入“主页底部”图像
24 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框，在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框。
25 单击新插入的表格内的单元格，进入“属性”面板，单击“背景颜色”显示窗，在弹出的颜色列表中选择黑色，在“宽”参数栏内键入1024，在“高”参数栏内键入100，如图2-21所示。
图2-21 “属性”面板
提示
“宽”和“高”参数栏内的参数可以控制单元格的宽度和高度，使单元格的尺寸更为精确。
26 单击“文本颜色”显示窗，在弹出的颜色列表中选择白色，在“字体”下拉式选项栏内选择“默认字体”选项，在“大小”下拉式选项栏内键入15，然后单击
“粗体”按钮，并激活“居中对齐”按钮，使文本居中对齐。
27 在单元格内键入“www.car.com”字样，如图2-22所示。
图2-22 键入文本
28 在菜单栏执行“文件”/“保存”命令，将该网页保存在本地站点的路径，以便在下个实例中使用，图2-23所示为网页设置完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“咨询类网页/实例2～3：汽车咨询网页/汽车咨询网页主页.html”文件，该文件为本实例设置完成后的文件。
图2-23 汽车咨询网页主页