實例2 旅游宣傳網頁

實例說明 在本實例中將指導讀者制作一個旅游宣傳網頁的首頁，該網頁由多張圖片元素組成，其中在編輯圖像時為其添加了邊框。通過本實例的學習，使讀者了解頁面屬性中背景顏色等外觀設置。

技術要點 在本實例中，首先需要將網頁中使用的素材導入到本地站點，然后設置表格，在單元格中導入圖像，接下來為表格添加邊框，完成該網頁的制作。圖2-1所示為本實例完成后的效果。

1 將本書附帶光盤中的“網頁基礎設置/實例2：旅游宣傳網頁”文件夾復制到本地站點路徑中。

2 運行Dreamweaver CS4，單擊起始頁面的HTML選項，創建一個新的HTML格式文件，將該文件保存在本地站點路徑中，然后將其命名為“旅游宣傳網頁”。

3 執行菜單欄中的“插入”/“表格”命令，打開“表格”對話框，在“行數”參數欄中鍵入2，在“列”參數欄中鍵入8，在“表格寬度”參數欄中鍵入720，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄中均鍵入0，如圖2-2所示，單擊“確定”按鈕，退出該對話框。

4 退出“表格”對話框后，在頁面中會出現一個表格，該表格中有16個單元格，如圖2-3所示。

5 按住Shift鍵依次單擊新插入表格第一行的8個單元格，進入“屬性”面板，單擊該面板中的“合并所選單元格，使用跨度”按鈕，將所選單元格合并，如圖2-4所示。

6 在第一行單元格中單擊，執行菜單欄中的“插入”/“圖像”命令，打開“選擇圖像源文件”對話框，從該對話框中選擇復制的“實例2：旅游宣傳網頁的首頁”文件夾中的Rivage.jpg文件，如圖2-5所示，單擊“確定”按鈕，退出該對話框。

7 退出“選擇圖像源文件”對話框后，會打開“圖像標簽輔助功能屬性”對話框，如圖2-6所示，使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到頁面中。

8 圖像導入后的效果如圖2-7所示。

9 使用同樣的方法，在第二行的單元格內由左至右依次導入復制的“實例2：旅游宣傳網頁的首頁”文件夾中的01.jpg、02.jpg、03.jpg、04.jpg、05.jpg、06.jpg、07.jpg、08.jpg文件，完成效果如圖2-8所示。

10 接下來需要編輯頁面屬性。單擊“屬性”面板中的“頁面屬性”按鈕，打開“頁面屬性”對話框，在“分類”顯示窗中選擇“外觀（CSS）”選項，在“頁面屬性”對話框中會顯示“外觀（CSS）”編輯窗，在該編輯窗中的“左邊距”、“右邊距”、“上邊距”和“下邊距”參數欄中均鍵入0，確定頁面邊距，如圖2-9所示，單擊“確定”按鈕，退出該對話框。

11 在“分類”顯示窗中選擇“外觀（HTML）”選項，在“頁面屬性”對話框中會顯示“外觀（HTML）”編輯窗，單擊“背景顏色”顯示窗，在彈出的顏色列表中選擇黑色，設置背景顏色，如圖2-10所示，單擊“確定”按鈕，退出該對話框。

12 設置背景顏色后的效果如圖2-11所示。

13 選擇所有的單元格，選擇“屬性”面板中“對齊”下拉選項欄中的“居中對齊”選項，設置單元格的對齊方式，如圖2-12所示。

14 設置單元格的邊框。選擇第一行的單元格，在“屬性”面板中的“邊框”參數欄中鍵入2，如圖2-13所示。

15 使用同樣的方法，將第二行所有單元格邊框設置為1，完成后的效果如圖2-14所示。

16 選擇第一行單元格內的圖像，在“屬性”面板中的“寬”參數欄中鍵入732，如圖2-15所示，設置圖像的寬度。

17 現在本實例的制作就全部完成了，圖2-16所示為本實例完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“網頁基礎設置/實例2：旅游宣傳網頁首頁/旅游宣傳網頁．html”文件，該文件為本實例完成后的文件。