1、項(xiàng)目九 Div布局搜索網(wǎng)頁,任務(wù)一 布局頁眉,【操作步驟】 1.首先在Dreamweaver 8中定義一個(gè)本地靜態(tài)站點(diǎn)，然后把“項(xiàng)目素材”文件夾中的內(nèi)容復(fù)制到站點(diǎn)根文件夾下。 2.在網(wǎng)站根文件夾下面新建一個(gè)網(wǎng)頁文檔并保存為“index.htm”。 3.將鼠標(biāo)光標(biāo)置于文檔窗口頂部，然后在菜單欄中選擇【插入】【布局對(duì)象】【層】命令來創(chuàng)建一個(gè)層，如圖所示。,4.在菜單欄中選擇【窗口】【層】命令或者直接按F2鍵打開【層】面板，如圖所示。 5.在【層】面板中單擊層的名稱“Layer1”來選定該層。 6.接著在【屬性】面板中設(shè)置層的大小和位置等參數(shù)，如圖所示。,7.將鼠標(biāo)光標(biāo)置于層“Layer1”中，然后

2、插入圖像文件“images/logo.gif”，并單擊【屬性】面板上的按鈕，使其居中顯示，如圖所示。 8.在【層】面板中雙擊“Layer1”，重新輸入層的名稱“TopLayer”，或者在【屬性】面板的【層編號(hào)】文本框中重新輸入層的名稱“TopLayer” 。至此，頁眉部分就制作完了。,【操作步驟】 1.單擊【插入】【布局】面板上的按鈕，在層“TopLayer”下繪制層“Layer1”，其參數(shù)設(shè)置如圖所示。 2.將鼠標(biāo)光標(biāo)置于層“Layer1”內(nèi)，然后在菜單欄中選擇【插入】【表單】【表單】命令，插入一個(gè)表單，如圖所示。,任務(wù)二 布局主體,3.將鼠標(biāo)光標(biāo)置于表單內(nèi)，然后在菜單欄中選擇【插入】【布局

3、對(duì)象】【Div標(biāo)簽】命令，或在【插入】【布局】面板中單擊（插入Div標(biāo)簽）按鈕，打開【插入Div標(biāo)簽】對(duì)話框，在【插入】下拉列表中選擇【在插入點(diǎn)】選項(xiàng)，在【ID】下拉列表中輸入“NavDiv”，如圖所示。,4.單擊 按鈕，打開【新建CSS規(guī)則】對(duì)話框，參數(shù)設(shè)置如圖所示。,5.單擊 按鈕，打開【#NavDiv的CSS規(guī)則定義】對(duì)話框，在【方框】分類中設(shè)置寬為“400像素”，在【區(qū)塊】分類中設(shè)置文本對(duì)齊方式為“居中”，【類型】分類參數(shù)設(shè)置如圖所示。,6.單擊 按鈕，在表單中插入Div標(biāo)簽“NavDiv”，如圖所示 。 7.刪除其中的原有文本，然后重新輸入文本并添加空鏈接，如圖所示。,8.在【插入】

4、【布局】面板中單擊 （插入Div標(biāo)簽）按鈕，打開【插入Div標(biāo)簽】對(duì)話框，在【插入】下拉列表中選擇【在標(biāo)簽之后】選項(xiàng)、“”，在【ID】下拉列表中輸入“InputDiv”，如圖所示。,9.單擊按鈕，創(chuàng)建【高級(jí)】CSS樣式“#InputDiv”，在【#InputDiv的CSS規(guī)則定義】對(duì)話框的【類型】分類中設(shè)置文本大小為“16像素”，行高為“20像素”，在【區(qū)塊】分類中設(shè)置文本對(duì)齊方式為“居中”，在【方框】分類中設(shè)置寬度為“400像素”，高度為“20像素”，左右邊界為“自動(dòng)”。 10.刪除Div標(biāo)簽“InputDiv”中的原有文本，然后在菜單欄中選擇【插入】【表單】【文本域】命令，插入一個(gè)文本框，

5、然后在文本域【屬性】面板的【文本域】文本框中設(shè)置ID名稱為“InputContent”，如圖所示。,11.創(chuàng)建【高級(jí)】CSS樣式“#InputContent”，在【#InputContent的CSS規(guī)則定義】對(duì)話框的【類型】分類中設(shè)置文本大小為“14像素”，行高為“20像素”，在【方框】分類中設(shè)置寬度為“250像素”，高度為“20像素”。 12.在菜單欄中選擇【插入】【表單】【按鈕】命令，在文本框后面插入一個(gè)按鈕，其屬性設(shè)置如圖所示 。 至此，網(wǎng)頁主體部分就制作完了，如圖所示 。,任務(wù)三 布局頁腳,【操作步驟】 1.單擊【插入】【布局】面板上的 按鈕，在層“MainLayer”的下面繪制層“FootLayer”，其屬性參數(shù)設(shè)置如圖所示。 2.在【CSS樣式】面板中雙擊“#FootLayer”，打開【#FootLayer的CSS規(guī)則定義】對(duì)話框，在【類型】分類中將文本大小設(shè)置為“14像素”，行高設(shè)置為“35