項目11庫和模板──制作花卉基地主頁

1、創(chuàng)建庫創(chuàng)建庫 任務(wù)一任務(wù)一 創(chuàng)建模板創(chuàng)建模板 任務(wù)二任務(wù)二應(yīng)用模板應(yīng)用模板 任務(wù)三任務(wù)三（一） 創(chuàng)建庫項目【操作步驟】1.首先在Dreamweaver 8中定義一個本地靜態(tài)站點，然后把“項目素材”文件夾中的內(nèi)容復(fù)制到站點根文件夾下。2.在菜單欄中選擇【窗口】【資源】命令，打開【資源】面板。在【資源】面板中單擊 （庫）按鈕，切換至【庫】分類，如圖所示 ”。3.單擊【資源】面板右下角的單擊【資源】面板右下角的 （新建）按鈕，新建一個庫，然后（新建）按鈕，新建一個庫，然后在列表框中輸入庫的名稱在列表框中輸入庫的名稱“top”，如圖所示，如圖所示 。4.使用同樣的方法創(chuàng)建名稱為使用同樣的方法創(chuàng)建名稱為

2、“foot”的庫項目。的庫項目。（二） 編排頁眉庫項目【操作步驟】【操作步驟】1.在【資源】面板中選中庫項目在【資源】面板中選中庫項目“top.lbi”，再單擊【資源】面板右，再單擊【資源】面板右下角的按鈕，或者雙擊庫文件下角的按鈕，或者雙擊庫文件“top.lbi”，打開頁眉庫項目。，打開頁眉庫項目。2.在菜單欄中選擇【窗口】【在菜單欄中選擇【窗口】【CSS樣式】命令，打開【樣式】命令，打開【CSS樣式】樣式】面板，單擊面板底部的按鈕，在彈出的【新建面板，單擊面板底部的按鈕，在彈出的【新建CSS規(guī)則】對話規(guī)則】對話框的【選擇器類型】選項組中，點選【標(biāo)簽（重新定義特定標(biāo)框的【選擇器類型】選項組中

3、，點選【標(biāo)簽（重新定義特定標(biāo)簽的外觀）】單選鈕，在【標(biāo)簽】下拉列表中選擇【簽的外觀）】單選鈕，在【標(biāo)簽】下拉列表中選擇【body】選】選項，在【定義在】選項組中點選【新建樣式表文件】單選鈕，項，在【定義在】選項組中點選【新建樣式表文件】單選鈕，如圖所示。如圖所示。3.單擊按鈕，打開【保存樣式表文件為】對話框，把樣式表文件保單擊按鈕，打開【保存樣式表文件為】對話框，把樣式表文件保存為存為“css.css”。然后在【。然后在【body的的CSS規(guī)則定義（在規(guī)則定義（在css.css中）】中）】對話框的【區(qū)塊】分類中設(shè)置文本對齊方式為對話框的【區(qū)塊】分類中設(shè)置文本對齊方式為“居中居中”，在，在【方框

4、】分類中設(shè)置邊界全部為【方框】分類中設(shè)置邊界全部為“0”。4.在在“css.css”中重新定義標(biāo)簽中重新定義標(biāo)簽“table”的樣式，設(shè)置文本大小為的樣式，設(shè)置文本大小為“12像素像素”。5.在在“css.css”中創(chuàng)建【高級】中創(chuàng)建【高級】CSS樣式樣式“a:link,a:visited”，設(shè)置文本，設(shè)置文本顏色為顏色為“#006633”，修飾效果為，修飾效果為“無無”。6.在在“css.css”中創(chuàng)建【高級】中創(chuàng)建【高級】CSS樣式樣式“a:hover”，設(shè)置文本顏色為，設(shè)置文本顏色為“#FF0000”，有下劃線。，有下劃線。下面開始向庫項目添加內(nèi)容。下面開始向庫項目添加內(nèi)容。7.插入一個

5、插入一個2行行2列的表格，其屬性參數(shù)設(shè)置如圖所示。列的表格，其屬性參數(shù)設(shè)置如圖所示。8.對第對第1列的兩個單元格進行合并，并在【屬性】面板中設(shè)置其水平列的兩個單元格進行合并，并在【屬性】面板中設(shè)置其水平對齊方式為對齊方式為“居中對齊居中對齊”，寬度為，寬度為“120”，如圖所示。然后在，如圖所示。然后在單元格中插入單元格中插入“images”文件夾下的花卉基地標(biāo)志文件文件夾下的花卉基地標(biāo)志文件“l(fā)ogo.gif”。9.設(shè)置第設(shè)置第2列第列第1個單元格的水平對齊方式為個單元格的水平對齊方式為“右對齊右對齊”，高度為，高度為“30”，然后在單元格中再插入一個，然后在單元格中再插入一個1行行3列的嵌

6、套表格，屬性列的嵌套表格，屬性參數(shù)設(shè)置如圖所示。參數(shù)設(shè)置如圖所示。10.設(shè)置嵌套表格設(shè)置嵌套表格3個單元格的水平對齊方式均為個單元格的水平對齊方式均為“右對齊右對齊”，寬度，寬度均為均為“80”，然后在單元格中依次輸入文本，然后在單元格中依次輸入文本“設(shè)為主頁設(shè)為主頁”、“加入收藏加入收藏”和和“聯(lián)系我們聯(lián)系我們”。11.設(shè)置第設(shè)置第2列第列第2個單元格的水平對齊方式為個單元格的水平對齊方式為“右對齊右對齊”，高度為，高度為“30”，然后在單元格中再插入一個，然后在單元格中再插入一個1行行6列的嵌套表格，屬性列的嵌套表格，屬性參數(shù)設(shè)置如圖所示。參數(shù)設(shè)置如圖所示。12.設(shè)置嵌套表格所有單元格的水

7、平對齊方式均為設(shè)置嵌套表格所有單元格的水平對齊方式均為“居中對齊居中對齊”，寬，寬度均為度均為“80”，然后輸入，然后輸入“基地主頁基地主頁”、“基地介紹基地介紹”、“市市場供求場供求”、“教學(xué)栽培教學(xué)栽培”、“網(wǎng)上訂貨網(wǎng)上訂貨”和和“名樹名花名樹名花”，并，并添加空鏈接添加空鏈接“#”。13.最后保存頁眉庫文件，如圖所示。最后保存頁眉庫文件，如圖所示。（三） 編排頁腳庫項目【操作步驟】1.在【資源】面板中打開庫項目“foot.lbi”，然后單擊【CSS樣式】面板底部的按鈕，在打開的【鏈接外部樣式表】對話框中鏈接外部樣式表文件“css.css”，如圖所示。2.在庫項目中插入一個在庫項目中插入一

8、個1行行6列的表格，其屬性參數(shù)設(shè)置如圖所示。列的表格，其屬性參數(shù)設(shè)置如圖所示。3.設(shè)置前設(shè)置前5個單元格的水平對齊方式為個單元格的水平對齊方式為“左對齊左對齊”，寬度為，寬度為“80”，然后在單元格中依次輸入文本然后在單元格中依次輸入文本“站點地圖站點地圖”、“實驗室實驗室”、“新聞發(fā)布新聞發(fā)布”、“人才招聘人才招聘”和和“網(wǎng)絡(luò)服務(wù)網(wǎng)絡(luò)服務(wù)”，并添加空鏈接，并添加空鏈接“#”。4.設(shè)置最后一個單元格的水平對齊方式為設(shè)置最后一個單元格的水平對齊方式為“右對齊右對齊”，然后在其中，然后在其中輸入文本輸入文本“版權(quán)所有版權(quán)所有 XXX省省XXX市花卉基地市花卉基地”，如圖所示。，如圖所示。（一） 創(chuàng)

9、建模板文件【操作步驟】1.打開【資源】面板，單擊 按鈕，切換至【模板】分類。2.單擊面板右下角的 按鈕，新建一個默認(rèn)名稱為“Untitled”的模板，在列表框中輸入模板的新名稱“index”以替換原來的名稱“Untitled”，并按Enter鍵進行確認(rèn)，如圖所示。3.雙擊模板文件雙擊模板文件“index.dwt”，或者先選中模板文件，或者先選中模板文件“index.dwt”，再單擊【資源】面板右下角的再單擊【資源】面板右下角的 按鈕，打開模板文件。按鈕，打開模板文件。4.在菜單欄中選擇【窗口】【在菜單欄中選擇【窗口】【CSS樣式】命令，打開【樣式】命令，打開【CSS樣式】樣式】面板，單擊右下角

10、的面板，單擊右下角的 按鈕，鏈接外部樣式表文件按鈕，鏈接外部樣式表文件“css.css”。5.在菜單欄中選擇【文件】【保存】命令，保存文件。在菜單欄中選擇【文件】【保存】命令，保存文件。（二） 插入庫項目【操作步驟【操作步驟】1.將鼠標(biāo)光標(biāo)置于模板文件將鼠標(biāo)光標(biāo)置于模板文件“index.dwt”中，然后在【資源】面板中中，然后在【資源】面板中切換至【庫】分類，并在列表框中選中庫文件切換至【庫】分類，并在列表框中選中庫文件“top.lbi”。2.單擊【資源】面板底部的單擊【資源】面板底部的 按鈕，或者單擊鼠標(biāo)右鍵，在彈出按鈕，或者單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【插入】命令，將庫項目插入到模

11、板頂部，的快捷菜單中選擇【插入】命令，將庫項目插入到模板頂部，如圖所示。如圖所示。3.利用相同的方法將頁腳庫項目也插入到模板中。利用相同的方法將頁腳庫項目也插入到模板中。（三） 插入模板對象【操作步驟【操作步驟】1.單擊頁眉庫項目，然后在菜單欄中選擇【插入】【表格】命令，單擊頁眉庫項目，然后在菜單欄中選擇【插入】【表格】命令，在頁眉庫項目的下面插入一個在頁眉庫項目的下面插入一個1行行1列的表格，表格列的表格，表格Id為為“midtab”，參數(shù)設(shè)置如圖所示。，參數(shù)設(shè)置如圖所示。2.在在“css.css”中創(chuàng)建基于表格中創(chuàng)建基于表格“midtab”的高級的高級CSS樣式樣式“#midtab”，設(shè)置

12、背景圖像為設(shè)置背景圖像為“images/bj.jpg”，不重復(fù)，水平位置為，不重復(fù)，水平位置為“左對左對齊齊”，垂直位置為，垂直位置為“底部底部”，如圖所示。，如圖所示。3.設(shè)置單元格的水平對齊方式為設(shè)置單元格的水平對齊方式為“右對齊右對齊”，垂直對齊方式為，垂直對齊方式為“頂頂端端”，然后在其中插入一個，然后在其中插入一個2行行3列的嵌套表格，表格列的嵌套表格，表格Id為為“maintab”，其他參數(shù)設(shè)置如圖所示。，其他參數(shù)設(shè)置如圖所示。4.選中表格的所有單元格，設(shè)置其水平對齊方式為選中表格的所有單元格，設(shè)置其水平對齊方式為“左對齊左對齊”，垂，垂直對齊方式為直對齊方式為“頂端頂端”，單元格

13、寬度為，單元格寬度為“150”，高度為，高度為“120”，效果如圖所示。效果如圖所示。5.在在“css.css”中創(chuàng)建基于表格中創(chuàng)建基于表格“maintab”的【高級】的【高級】CSS超級鏈接超級鏈接樣式樣式“#maintab a:link,#maintan a:visited”，設(shè)置文本顏色為，設(shè)置文本顏色為“#0066FF”，無修飾效果。，無修飾效果。6.在在“css.css”中創(chuàng)建基于表格中創(chuàng)建基于表格“maintab”的【高級】的【高級】CSS超級鏈接超級鏈接懸停效果樣式懸停效果樣式“#maintab a:hover”，設(shè)置文本顏色為，設(shè)置文本顏色為“#000000”，有下劃線。，有下

14、劃線。7.將鼠標(biāo)光標(biāo)定位在第將鼠標(biāo)光標(biāo)定位在第1行的第行的第1個單元格內(nèi)，然后在菜單欄中選擇個單元格內(nèi)，然后在菜單欄中選擇【插入】【模板對象】【可編輯區(qū)域】命令，打開【新建【插入】【模板對象】【可編輯區(qū)域】命令，打開【新建可編輯區(qū)域】對話框，在【名稱】文本框中輸入可編輯區(qū)域】對話框，在【名稱】文本框中輸入“最新動態(tài)最新動態(tài)”，然后單擊按鈕，在單元格內(nèi)插入可編輯區(qū)域，如圖所示。然后單擊按鈕，在單元格內(nèi)插入可編輯區(qū)域，如圖所示。8.運用同樣的方法在第運用同樣的方法在第2行的第行的第1個和第個和第2個單元格內(nèi)分別插入名稱為個單元格內(nèi)分別插入名稱為“科技能手科技能手”和和“花卉價格花卉價格”的可編輯區(qū)

15、域，如圖所示。的可編輯區(qū)域，如圖所示。9.將鼠標(biāo)光標(biāo)定位在第將鼠標(biāo)光標(biāo)定位在第1行的第行的第2個單元格內(nèi)，然后在菜單欄中選擇個單元格內(nèi)，然后在菜單欄中選擇【插入】【模板對象】【重復(fù)表格】命令，插入一個重復(fù)【插入】【模板對象】【重復(fù)表格】命令，插入一個重復(fù)表格，如圖所示。表格，如圖所示。10.單擊可編輯區(qū)域名稱單擊可編輯區(qū)域名稱“EditRegion4”將其選擇，在【屬性】面板將其選擇，在【屬性】面板中將其名稱修改為中將其名稱修改為“內(nèi)容內(nèi)容1”，按照同樣的方法修改可編輯區(qū)域，按照同樣的方法修改可編輯區(qū)域名稱名稱“EditRegion5”為為“內(nèi)容內(nèi)容2”，如圖所示，如圖所示 。11.將第將第3

16、列的兩個單元格進行合并，然后在菜單欄中選擇【插入】列的兩個單元格進行合并，然后在菜單欄中選擇【插入】【模板對象】【重復(fù)區(qū)域】命令，打開【新建重復(fù)區(qū)域】對【模板對象】【重復(fù)區(qū)域】命令，打開【新建重復(fù)區(qū)域】對話框，在【名稱】文本框中輸入話框，在【名稱】文本框中輸入“內(nèi)容導(dǎo)讀內(nèi)容導(dǎo)讀”，單擊按鈕，在，單擊按鈕，在單元格內(nèi)插入名稱為單元格內(nèi)插入名稱為“內(nèi)容導(dǎo)讀內(nèi)容導(dǎo)讀”的重復(fù)區(qū)域，如圖所示。的重復(fù)區(qū)域，如圖所示。12.將重復(fù)區(qū)域內(nèi)的文本將重復(fù)區(qū)域內(nèi)的文本“內(nèi)容導(dǎo)讀內(nèi)容導(dǎo)讀”刪除，在其中插入符號刪除，在其中插入符號“”和兩個換行符，然后在和兩個換行符，然后在“”和換行符之間再插入一個可編輯和換行符之間再

17、插入一個可編輯區(qū)域，如圖所示。區(qū)域，如圖所示。13.將鼠標(biāo)光標(biāo)置于將鼠標(biāo)光標(biāo)置于“校園公告校園公告”所在單元格，然后右鍵單擊文檔左所在單元格，然后右鍵單擊文檔左下角的下角的“”標(biāo)簽，在彈出的快捷菜單中選擇【快速標(biāo)簽編標(biāo)簽，在彈出的快捷菜單中選擇【快速標(biāo)簽編輯器】命令，打開快速標(biāo)簽編輯器，在其中添加輯器】命令，打開快速標(biāo)簽編輯器，在其中添加“id=”tdline”，如圖如圖11-25所示。所示。14.在在“css.css”中創(chuàng)建【高級】中創(chuàng)建【高級】CSS樣式樣式“#tdline”，在【邊框】分類，在【邊框】分類中設(shè)置樣式為中設(shè)置樣式為“點劃線點劃線”，寬度為，寬度為“1像素像素”，顏色為，顏色

18、為“#99CC99”，如圖所示。，如圖所示。15.把鼠標(biāo)光標(biāo)分別置于其他單元格內(nèi)，并右鍵單擊文檔左下角的把鼠標(biāo)光標(biāo)分別置于其他單元格內(nèi)，并右鍵單擊文檔左下角的“”標(biāo)簽，在彈出的快捷菜單中選擇【設(shè)置標(biāo)簽，在彈出的快捷菜單中選擇【設(shè)置ID】【tdline】命令，把樣式應(yīng)用到這些單元格上，效果如圖所示。至此，模命令，把樣式應(yīng)用到這些單元格上，效果如圖所示。至此，模板就制作完成了。板就制作完成了。 【操作步驟【操作步驟】1.在菜單欄中選擇【文件】【新建】命令，打開【從模板新建】在菜單欄中選擇【文件】【新建】命令，打開【從模板新建】對話框，切換至【模板】選項卡，選擇已經(jīng)創(chuàng)建的主頁模板對話框，切換至【模板】選項卡，選擇已經(jīng)創(chuàng)建的主頁模板“index.dwt”，然后勾選【從模板新建】對話框右側(cè)下面的，然后勾選【從模板新建】對話框右側(cè)下面的【當(dāng)模板改變時更新頁面】復(fù)選框，以保證模板改變時更新基【當(dāng)模板改變時更新頁面】復(fù)選框，以保證模板改變時更新基于模板的頁面，如圖所示。于模板的頁面，如圖所示。2.單擊單擊 按鈕，打開文檔，并將文檔保存為按鈕，打開文檔，并將