實例2 汽車咨詢網頁（主頁）

實例說明

在本實例中，將指導讀者制作一個汽車咨詢網頁的主頁。由于該網頁中使用的圖像長寬比有所差別，所以需要對布局使用的表格進行編輯。通過本實例，可以使讀者了解通過編輯表格來設置網頁的方法。

技術要點

在本實例中，首先需要將網頁使用的素材導入到本地站點，然后設置表格并在單元格中導入圖像；接下來設置網頁中部的表格，并對單元格進行編輯；最后在單元格中導入圖像，完成該網頁的制作。

默認的表格行和列的形狀和數目是固定的，在制作網頁時，有時需要使用不規則的布局，這時就需要對表格進行編輯，將單元格進行合并或者拆分，使其符合網頁布局的要求。在本實例中，將為讀者講解相關知識，圖2-1所示為本實例完成后的效果。

1 將本書附帶光盤的“咨詢類網頁/實例2～3：汽車咨詢網頁”文件夾拷貝到本地站點的路徑。

2 運行Dreamweaver CS3，單擊起始頁面的HTML選項，創建一個新的HTML格式文件，將該文件保存在本地站點的路徑，并將其命名為“汽車主頁01”。

3 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入3，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，如圖2-2 所示。單擊“確定”按鈕，退出該對話框。

4 退出“表格”對話框后，在文檔窗口中會出現一個表格，該表格內有3個單元格，如圖2-3所示。

5 選擇第1列單元格，進入“屬性”面板，單擊“背景顏色”顯示窗，在彈出的顏色列表中選擇黑色，如圖2-4所示。

6 單擊“文本顏色”顯示窗，在彈出的顏色列表中選擇白色，在“字體”下拉式選項欄內選擇“默認字體”選項，在“大小”下拉式選項欄內鍵入15，然后激活“居中對齊”按鈕，使文本居中對齊，如圖2-5所示。

7 在第1列單元格內鍵入“car01”字樣，如圖2-6所示。

8 使用同樣的設置，在第2列單元格內鍵入“car02”字樣，在第3列單元格內鍵入“car03”字樣，如圖2-7所示。

9 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入1，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，單擊“確定”按鈕，退出該對話框。

10 在剛剛插入的表格中的單元格內單擊，然后在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例2～3：汽車咨詢網頁”文件夾內的“主頁頂部.gif”文件，如圖2-8所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

11 退出“選擇圖像源文件”對話框后，會彈出“圖像標簽輔助功能屬性”對話框，使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到單元格。選擇導入后的圖像，進入“屬性”面板，在該面板內的“邊框”參數欄內鍵入0，使其不顯示邊框，效果如圖2-9所示。

12 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入3，在“列數”參數欄內鍵入5，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，單擊“確定”按鈕，退出該對話框，在文檔窗口中會出現如圖2-10所示的表格。

13 按住Shift鍵依次單擊新插入的表格的第1列的3個單元格，選擇這3個單元格。然后進入“屬性”面板，單擊該面板內的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-11所示。

14 按住Shift鍵依次單擊新插入的表格的第5列的3個單元格，選擇這3個單元格。然后進入“屬性”面板，單擊該面板內的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-12所示。

15 按住Shift鍵單擊第2行第2列和第2行第3列的單元格，選擇這3個單元格。然后進入“屬性”面板，單擊該面板內的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-13所示。

16 按住Shift鍵單擊第3行第2列和第3行第3列單元格，選擇這2個單元格。然后進入“屬性”面板，單擊該面板內的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-14所示。

17 按住Shift鍵單擊第2行第4列和第3行第4列的單元格，選中這2個單元格。然后進入“屬性”面板，單擊該面板內的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-15所示。

18 在第1列單元格內單擊，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例2～3：汽車咨詢網頁”文件夾內的“主頁左.gif”文件，如圖2-16所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

19 退出“選擇圖像源文件”對話框后，會彈出“圖像標簽輔助功能屬性”對話框，使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到單元格。選擇導入后的圖像，進入“屬性”面板，在該面板內的“邊框”參數欄內鍵入0，使其不顯示邊框，效果如圖2-17所示。

20 使用同樣的方法在其他單元格內導入圖像，完成效果如圖2-18所示。

21 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入1，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，單擊“確定”按鈕，退出該對話框。

22 單擊新插入的表格中的單元格，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例2～3：汽車咨詢網頁”文件夾內的“主頁底部.gif”文件，如圖2-19 所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

23 退出“選擇圖像源文件”對話框后，會彈出“圖像標簽輔助功能屬性”對話框，使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到單元格內。選擇導入后的圖像，進入“屬性”面板，在該面板內的“邊框”參數欄內鍵入0，使其不顯示邊框，效果如圖2-20所示。

24 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框，在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入1，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，單擊“確定”按鈕，退出該對話框。

25 單擊新插入的表格內的單元格，進入“屬性”面板，單擊“背景顏色”顯示窗，在彈出的顏色列表中選擇黑色，在“寬”參數欄內鍵入1024，在“高”參數欄內鍵入100，如圖2-21所示。

提示

26 單擊“文本顏色”顯示窗，在彈出的顏色列表中選擇白色，在“字體”下拉式選項欄內選擇“默認字體”選項，在“大小”下拉式選項欄內鍵入15，然后單擊“粗體”按鈕，并激活“居中對齊”按鈕，使文本居中對齊。

27 在單元格內鍵入“www.car.com”字樣，如圖2-22所示。

28 在菜單欄執行“文件”/“保存”命令，將該網頁保存在本地站點的路徑，以便在下個實例中使用，圖2-23所示為網頁設置完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“咨詢類網頁/實例2～3：汽車咨詢網頁/汽車咨詢網頁主頁.html”文件，該文件為本實例設置完成后的文件。