边做边学——dreamweaver cs5网页设计案例教程05.docVIP

使用表格 5.1.5　【实战演练】——租车网页 使用“表格”按钮，插入表格；使用“页面属性”命令，设置页面的边距、页面标题；使用“图像”按钮，插入图像布局网页。（最终效果参看光盘中的“Ch05 效果 租车网页 index.html”，如图5-1所示。） 图5-1 1．设置页面属性并插入表格 启动Dreamweaver CS5，新建一个空白文档。新建页面的初始名称是“Untitled-1.html”。选择“文件 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择站点目录保存路径，在“文件名”选项的文本框中输入“index”，单击“保存”按钮，返回到编辑窗口。 选择“修改 页面属性”命令，在弹出的“页面属性”对话框左侧“分类”选项列表中选择“外观”选项，将“左边距”、“右边距”、“上边距”和“下边距”选项均设为0，如图5-2所示，单击“确定”按钮。 单击“插入”面板“常用”选项卡中的“表格”按钮，在弹出的“表格”对话框中进行设置，如图5-3所示，单击“确定”按钮，效果如图5-4所示。保持表格的选取状态，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐”选项。 图5-2 图5-3 图5-4 2．设置单元格背景颜色并插入图像 将光标置入到第1行单元格中，在“属性”面板“水平”选项的下拉列表中选择“居中对齐”选项，将“高”选项设为254，“背景颜色”设为青蓝色（#4488CF），如图5-5所示。表格效果如图5-6所示。 图5-5 图5-6 单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 素材 租车网页 images”文件夹中的“img_03.jpg”，单击“确定”按钮完成图片的插入，效果如图5-7所示。 图5-7 将光标置入到第2行单元格中，单击“插入”面板“常用”选项卡中的“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘“Ch05 素材 租车网页 images”文件夹中的“img_06.jpg”，单击“确定”按钮完成图片的插入，效果如图5-8所示。 图5-8 用相同的方法分别将img_07.jpg、img_08.jpg文件插入到第3行和第4行的单元格中，如图5-9所示。 图5-9 保存文档，按F12键预览效果，如图5-10所示。 图5-10 5.2.5　【实战演练】——设计家园网页 使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高度和对齐方式；使用“CSS样式”命令，调整单元格的背景颜色。（最终效果参看光盘中的“Ch05 效果 设计家园网页 index.html”，如图5-1所示。） 图5-1 选择“文件 打开”命令，在弹出的“打开”对话框中选择“Ch05 素材 设计家园网页 index.html”文件，单击“打开”按钮，打开文件，如图5-2所示。将光标放置在要导入表格数据的位置，如图5-3所示。选择“插入 表格对象 导入表格式数据”命令，弹出“导入表格式数据”对话框。 图5-2 图5-3 在对话框中将定界符设置为逗点，单击“数据文件”选项右侧的“浏览”按钮，弹出“打开”对话框，在光盘目录下的“Ch05 素材 设计家园网 info.txt”文件，单击“打开”按钮，返回到对话框中，如图5-4所示，单击“确定”按钮，导入表格式数据，效果如图5-5所示。 图5-4 图5-5 保持表格的选取状态，在“属性”面板中进行设置，如图5-6所示，表格效果如图5-7所示。 图5-6 图5-7 将鼠标置入到第1列中，按住Shift键的同时，单击表格的第1列，在“属性”面板“水平”选项下拉列表中选择“居中对齐”选项，将“高”选项设为35，表格效果如图5-8所示。用同样的方法将其他列的“水平”选项设为“居中对齐”，效果如图5-9示。 图5-8 图5-9 选择“窗口 CSS样式”命令，弹出“CSS样式”面板，单击面板中的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中进行设置，如图5-10所示，单击“确定”按钮，弹出“.text的CSS规则定义”对话框，在左侧的“分类”选项列表中选择“类型”选项，将“Color”选项设为白色，如图5-11所示。 在左侧的“分类”选项列表中选择“背景”选项，将“Background-color”