實(shí)例2 汽車咨詢網(wǎng)頁（主頁）

實(shí)例說明

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

技術(shù)要點(diǎn)

在本實(shí)例中，首先需要將網(wǎng)頁使用的素材導(dǎo)入到本地站點(diǎn)，然后設(shè)置表格并在單元格中導(dǎo)入圖像；接下來設(shè)置網(wǎng)頁中部的表格，并對單元格進(jìn)行編輯；最后在單元格中導(dǎo)入圖像，完成該網(wǎng)頁的制作。

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

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

2 運(yùn)行Dreamweaver CS3，單擊起始頁面的HTML選項(xiàng)，創(chuàng)建一個(gè)新的HTML格式文件，將該文件保存在本地站點(diǎn)的路徑，并將其命名為“汽車主頁01”。

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

4 退出“表格”對話框后，在文檔窗口中會(huì)出現(xiàn)一個(gè)表格，該表格內(nèi)有3個(gè)單元格，如圖2-3所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20 使用同樣的方法在其他單元格內(nèi)導(dǎo)入圖像，完成效果如圖2-18所示。

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

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

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

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

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

提示

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

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

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