4.2 项目实训
4.2.1 项目实训一：立体效果表格
1．实训目的
立体效果表格的制作，主要通过“标签编辑器”对话框完成。通过该网页的制作，可以学习和掌握在Adobe Dreamweaver CS6中，通过设置“标签编辑器”对话框，改变表格外观的基本方法。
2．实训案例效果
实训案例效果如图4-48所示。
图 4-48
3．实训设计过程
（1）选择“文件”打开Dw04/images/start.html文件，选中文档中的数据表格，执行“窗口”→“属性”命令，打开“属性”面板，在面板中设置表格的“填充”为“3”，“间距”为“0”，“边框”为“1”。效果如图4-49所示。
图 4-49
（2）选中表格中的所有单元格，在“属性”面板中设置单元格的背景颜色为“#7EC3BF”，效果图4-50所示。
图 4-50
（3）选中整个数据表格，然后执行“修改”→“编辑标签”命令，打开“标签编辑器table”对话框，如图4-51所示。
图 4-51
（4）在该对话框左边的列表中选择“浏览器特定的”选项，进入其设置界面。在对话框的“边框颜色亮”文本框中，输入十六进制颜色值“#000000”，在“边框颜色暗”文本框中输入“#FFFFFF”，单击“确定”。
（5）保存文档，按“F12”键预览效果，如图4-48所示。
4.2.2 项目实训二：“圆角表格美化”网页
1．实训目的
通过该网页的制作，可以学习和掌握在Adobe Dreamweaver CS6中，通过“表格”按钮和图片制作圆角表格，以及合并单元格的基本方法。
2．实训案例效果
实训案例效果如图4-52所示。
图 4-52
3．实训设计过程
（1）选择“文件”打开Dw/4.2.2 images/index1.html文件，将光标置入到单元格中，如图4-53所示，在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置。单击“确定”按钮，在“属性”面板中，将“背景颜色”选项设为浅褐色（#C6BAB5），效果如图4-54所示。
图 4-53
图 4-54
（2）将光标置入到第1行第1列中，在“插入/常用”面板中单击“图像”按钮，在“选择图像源文件”对话框中选择Dw04/4.2.2 images/a_06.jpg，单击“确定”按钮，效果如图4-55所示。
图 4-55
（3）将光标置入到第1行第1列中，在“属性”面板中将“水平”选项设为“左对齐”，“垂直”选项设为“顶端”，用相同的方法，将第1行第3列“水平”选项设为“右对齐”，“垂直”选项设为“顶端”，第3行第1列“水平”选项设为“左对齐”，“垂直”选项设为“底部”，第3行第3列“水平”选项设为“右对齐”，“垂直”选项设为“底部”。
（4）分别将“a_08.jpg”插入到第1行第3列中，“a_12.jpg”插入到第3行第1列中，“a_14.jpg”插入到第3行第3列中，效果如图4-56所示。
图 4-56
（5）将第2行的单元格全部选中，单击“属性”面板中的“合并单元”按钮，将选中的单元格合并。
（6）在“插入/常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置，如图4-57所示。单击“确定”按钮，在“属性”面板中，将“对齐”选项设为“居中对齐”，效果如图4-58所示。
图 4-57
图 4-58
（7）将表格的单元格全部选中，在“属性”面板中将“水平”选项设为“居中”，“垂直”选项设为“居中”。将Dw04/4.2.2images/img_01.jpg插入到第1列中。
（8）用相同的方法，分别将“img_02.jpg”“img_03.jpg”“img_04jpg”插入到表格余下的列中，效果如图4-59所示。
图 4-59
（9）保存文档，按“F12”键预览效果，如图4-52所示。