2.5 綜合案例——制作普通網頁

學習目的

本實例在制作過程中，講述了網頁元素的編輯方法，制作圖文并茂的網頁。

重點難點

輸入文本。

插入圖像。

網頁元素的編輯。

本實例效果如圖2-61所示。

操作步驟詳解

Step 01 運行Dreamweaver應用程序，新建一個網頁文檔，并保存為index.html，單擊【屬性】面板中的【頁面屬性】按鈕，打開【頁面屬性】對話框，在左側【分類】中選擇【外觀（CSS）】選項，在右側設置各參數，如圖2-62所示，然后單擊【確定】按鈕。

Step 02 打開【插入】面板，單擊【常用】選項中的【表格】按鈕，在打開的【表格】對話框中，設置【行數】為2,【列數】為1,【表格寬度】為900像素，【邊框粗細】、【單元格邊距】、【單元格間距】均為0，如圖2-63所示，然后單擊【確定】按鈕。

Step 03 在網頁文檔中插入了一個2行1列的表格，在【屬性】面板中設置該表格居中對齊，并設置第一行的行高為40，打開【快速標簽編輯器】，添加設置單元格背景的代碼，如圖2-64所示。

Step 04 在第一個單元格中插入一個1行9列的表格，表格寬度為100%，行高為40，然后在各單元格中輸入相應的文本內容，并應用CSS樣式（微軟雅黑，加粗，13px,#FFF），如圖2-65所示。

Step 05 將光標定位在第二個單元格，執行【插入】>【圖像】命令，在打開的對話框中選擇要插入的圖片，如圖2-66所示，單擊【確定】按鈕。

Step 06 在圖像下方插入一個1行1列的表格，表格寬度為900像素，居中對齊，并設置其背景顏色為白色，如圖2-67所示。

Step 07 在該表格中嵌套一個1行2列的表格，表格寬度設為100%；在左側的單元格中再插入一個7行2列的表格，表格寬度設為100%，單元格間距為2；合并第一行兩個單元格，打開【快速標簽編輯器】添加設置單元格背景的代碼，如圖2-68所示。

Step 08 在第一行中插入一個1行3列的表格，調整單元格寬度，并輸入文本內容，如圖2-69所示。

Step 09 在其他單元格中輸入文本內容，如圖2-70所示。

Step 10 在右側單元格中插入2行1列的表格，并設置第一個單元格的背景，然后在該單元格中插入1行3列的表格，并輸入相應文本內容，如圖2-71所示。

Step 11 在“產品展示”下方的單元格中插入一個2行2列的表格，表格寬度設為99%，單元格間距為2，并在各單元格中插入圖像，輸入文本內容，如圖2-72所示。

Step 12 在網頁文檔底部插入一個1行1列的表格，表格寬度為900像素，居中對齊，并設置單元格的背景顏色為#347967，如圖2-73所示。

Step 13 在該表格中輸入版權信息文本內容，如圖2-74所示。

Step 14 保存文件，按【F12】快捷鍵預覽網頁，如圖2-75所示。