4.2　項目實訓

4.2.1　項目實訓一：立體效果表格

1．實訓目的

立體效果表格的制作，主要通過“標簽編輯器”對話框完成。通過該網頁的制作，可以學習和掌握在Adobe Dreamweaver CS6中，通過設置“標簽編輯器”對話框，改變表格外觀的基本方法。

2．實訓案例效果

實訓案例效果如圖4-48所示。

3．實訓設計過程

（1）選擇“文件”打開Dw04/images/start.html文件，選中文檔中的數據表格，執行“窗口”→“屬性”命令，打開“屬性”面板，在面板中設置表格的“填充”為“3”，“間距”為“0”，“邊框”為“1”。效果如圖4-49所示。

（2）選中表格中的所有單元格，在“屬性”面板中設置單元格的背景顏色為“#7EC3BF”，效果圖4-50所示。

（3）選中整個數據表格，然后執行“修改”→“編輯標簽”命令，打開“標簽編輯器table”對話框，如圖4-51所示。

（4）在該對話框左邊的列表中選擇“瀏覽器特定的”選項，進入其設置界面。在對話框的“邊框顏色亮”文本框中，輸入十六進制顏色值“#000000”，在“邊框顏色暗”文本框中輸入“#FFFFFF”，單擊“確定”。

（5）保存文檔，按“F12”鍵預覽效果，如圖4-48所示。

4.2.2　項目實訓二：“圓角表格美化”網頁

1．實訓目的

通過該網頁的制作，可以學習和掌握在Adobe Dreamweaver CS6中，通過“表格”按鈕和圖片制作圓角表格，以及合并單元格的基本方法。

2．實訓案例效果

實訓案例效果如圖4-52所示。

3．實訓設計過程

（1）選擇“文件”打開Dw/4.2.2 images/index1.html文件，將光標置入到單元格中，如圖4-53所示，在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置。單擊“確定”按鈕，在“屬性”面板中，將“背景顏色”選項設為淺褐色（#C6BAB5），效果如圖4-54所示。

（2）將光標置入到第1行第1列中，在“插入/常用”面板中單擊“圖像”按鈕，在“選擇圖像源文件”對話框中選擇Dw04/4.2.2 images/a_06.jpg，單擊“確定”按鈕，效果如圖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所示。

（5）將第2行的單元格全部選中，單擊“屬性”面板中的“合并單元”按鈕，將選中的單元格合并。

（6）在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，如圖4-57所示。單擊“確定”按鈕，在“屬性”面板中，將“對齊”選項設為“居中對齊”，效果如圖4-58所示。

（7）將表格的單元格全部選中，在“屬性”面板中將“水平”選項設為“居中”，“垂直”選項設為“居中”。將Dw04/4.2.2images/img_01.jpg插入到第1列中。

（8）用相同的方法，分別將“img_02.jpg”“img_03.jpg”“img_04jpg”插入到表格余下的列中，效果如圖4-59所示。

（9）保存文檔，按“F12”鍵預覽效果，如圖4-52所示。