實例3 汽車咨詢網頁（分頁）

實例說明

網頁的布局是一件非常繁雜的工作，必須經過縝密的計劃和合理的安排。在本實例中，將繼續制作汽車咨詢網頁的分頁。由于必須顯示一些具體的數據，所以涉及到在單元格中繼續添加單元格，設置更為復雜的布局。

技術要點

在本實例中，首先設置表格，然后在單元格中導入圖片，接下來繼續在單元格中設置表格，并在表格中設置文本，完成網頁的制作。

在咨詢類的網站中，經常會用到表格類的元素。為了不影響網頁的基本布局，可以在單元格內再設置單元格，這樣可以對網頁進行更為細致的編輯。圖3-1所示為本實例完成后的效果。

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

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

3 退出“表格”對話框后，在文檔窗口中會出現一個表格，該表格內有3個單元格。進入“屬性”面板，設置3個單元格的背景色均為黑色，如圖3-2所示。

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

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

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

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

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

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

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

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

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

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

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

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

16 退出“選擇圖像源文件”對話框后，會彈出“圖像標簽輔助功能屬性”對話框，使用默認設置，單擊“確定”按鈕，退出該對話框。然后選擇新導入的圖像，進入“屬性”面板，在該面板內的“邊框”參數欄內鍵入0，使其不顯示邊框，激活“左對齊”按鈕，使其沿左側對齊，如圖3-10所示。

17 在第3列合并后的單元格內單擊，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例2～3：汽車咨詢網頁”文件夾內的“分頁右.gif”文件，單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

18 退出“選擇圖像源文件”對話框后，會彈出“圖像標簽輔助功能屬性”對話框，使用默認設置，單擊“確定”按鈕，退出該對話框。選擇新導入的圖像，進入“屬性”面板，在該面板內的“邊框”參數欄內鍵入0，使其不顯示邊框，激活“右對齊”按鈕，使其沿右側對齊，如圖3-11所示。

19 單擊新插入的表格內第2列第1行的單元格，進入“屬性”面板，單擊“背景顏色”顯示窗，在彈出的顏色列表中選擇黑色，在“寬”參數欄內鍵入514，在“高”參數欄內鍵入246，如圖3-12所示。

20 設置完成后的效果如圖3-13所示。

21 在設置背景色和長寬后的單元格內單擊，在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入5，在“列數”參數欄內鍵入2，在“表格寬度”參數欄內鍵入514，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入2，如圖3-14所示。單擊“確定”按鈕，退出該對話框。

22 插入的表格如圖3-15所示。

23 選擇剛剛插入的表格的第1行第1列的單元格，單擊“文本顏色”顯示窗，在彈出的顏色列表中選擇白色，在“字體”下拉式選項欄內選擇“默認字體”選項，在“大小”下拉式選項欄內鍵入15，激活“居中對齊”按鈕，使文本居中對齊，然后在所選單元格內鍵入“名稱”字樣，如圖3-16所示。

24 使用同樣的設置，參照圖3-17在其他單元格內分別鍵入文本。

25 單擊表格內第2列底部的單元格，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例2～3：汽車咨詢網頁”文件夾內的“分頁底側.gif”文件，單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

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

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

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

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

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

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

32 單擊“文本顏色”顯示窗，在彈出的顏色列表中選擇白色，在“字體”下拉式選項欄內選擇“默認字體”選項，在“大小”下拉式選項欄內鍵入15；然后單擊“粗體”按鈕，并激活“居中對齊”按鈕，使文本居中對齊，然后在所選單元格內鍵入“www.car.com”字樣，如圖3-20所示。

33 本實例完成了，完成后的效果如圖3-21所示，在菜單欄執行“文件”/“保存”命令，將該網頁保存在本地站點的路徑。

34 設置網頁的超鏈接。從本地站點文件夾內打開上個練習中保存的網頁主頁“汽車主頁01.html”文件，選擇該網頁頂部的car01文本。在“屬性”面板中單擊“鏈接”文本框右側的“瀏覽”按鈕，打開“選擇文件”對話框，從該對話框內選擇本地站點文件夾內的“汽車分頁.html”文件，如圖3-22所示，單擊“確定”按鈕，退出該對話框。

35 在設置了超鏈接之后，文本顏色變成了藍色。在“屬性”面板內單擊“頁面屬性”按鈕，打開“頁面屬性”對話框。在“分類”顯示窗內選擇“鏈接”選項，這時會顯示鏈接控制參數；單擊“鏈接顏色”顯示窗，在彈出的顏色列表中選擇白色，單擊“活動鏈接顏色”顯示窗，在彈出的顏色列表中選擇白色；在“下劃線樣式”下拉式選項欄內選擇“始終無下劃線”選項，如圖3-23所示。單擊“確定”按鈕，退出“頁面屬性”對話框，文本顏色顯示為白色。

36 使用同樣的方法設置“car02”、“car03”和汽車圖片的超鏈接為“汽車分頁.html”文件，本實例就全部完成了。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“咨詢類網頁/實例2～3：汽車咨詢網頁/汽車主頁.html”文件和“咨詢類網頁/實例2～3：汽車咨詢網頁/汽車分頁.html”文件，該文件為本實例和上個實例設置完成后的文件。

提示