網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動式教程單元6使用模板和庫制作網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作單元6使用模板和庫制作網(wǎng)頁教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航

】

1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)訓(xùn)練考核評價(jià)】3【同步訓(xùn)練/同步訓(xùn)練考核評價(jià)】

4【拓展訓(xùn)練/拓展訓(xùn)練考核評價(jià)】5教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航】1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板（2）能正確編輯模板，掌握設(shè)置可編輯區(qū)域和可選區(qū)域的方法（3）熟悉用模板生成新網(wǎng)頁的操作方法，并能對新網(wǎng)頁進(jìn)行編輯加工（4）能熟練地修改網(wǎng)頁模板，并同步更新該模板生成的網(wǎng)頁（5）學(xué)會創(chuàng)建庫項(xiàng)目，并且能修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁（6）掌握插入圖像占位符的方法（7）理解模板和庫的作用（8）了解CSS樣式的簡單應(yīng)用本單元重點(diǎn)（1）將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板（2）用模板生成新網(wǎng)頁，并對新網(wǎng)頁進(jìn)行編輯加工（3）修改網(wǎng)頁模板并同步更新該模板生成的網(wǎng)頁（4）創(chuàng)建庫項(xiàng)目，并且修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁本單元難點(diǎn)（1）用模板生成新網(wǎng)頁，并對新網(wǎng)頁進(jìn)行編輯加工（2）修改網(wǎng)頁模板并同步更新該模板生成的網(wǎng)頁教學(xué)方法任務(wù)驅(qū)動法、分組討論法、四步訓(xùn)練法（操作準(zhǔn)備－引導(dǎo)訓(xùn)練－同步訓(xùn)練－拓展訓(xùn)練）

課時(shí)建議2課時(shí)（含考核評價(jià)）【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板本單元【操作準(zhǔn)備】1．新建1個(gè)本地站點(diǎn)（1）創(chuàng)建所需的文件夾，拷貝所需的資源（2）啟動DreamweaverCS6（3）創(chuàng)建本地站點(diǎn)2．制作用來生成網(wǎng)頁模板的網(wǎng)頁（1）新建1個(gè)網(wǎng)頁（2）在網(wǎng)頁中插入表格1（3）在網(wǎng)頁中插入表格2（4）在網(wǎng)頁中插入表格3保存網(wǎng)頁，預(yù)覽其效果?！静僮鳒?zhǔn)備】1．新建1個(gè)本地站點(diǎn)【引導(dǎo)訓(xùn)練】【任務(wù)6-1】使用模板和庫制作上海游的網(wǎng)頁

本單元“引導(dǎo)訓(xùn)練”的任務(wù)卡如表6-4所示?！疽龑?dǎo)訓(xùn)練】【任務(wù)6-1】使用模板和庫制作上海游的網(wǎng)頁本單【引導(dǎo)訓(xùn)練】（1）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目。（2）將現(xiàn)有網(wǎng)頁nav_left0601.html中的景點(diǎn)導(dǎo)航表格轉(zhuǎn)換為庫項(xiàng)目?！救蝿?wù)描述】【任務(wù)6-1-1】創(chuàng)建庫項(xiàng)目【引導(dǎo)訓(xùn)練】（1）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目。【任務(wù)【任務(wù)實(shí)施】1．使用【新建文檔】對話框創(chuàng)建庫（1）在DreamweaverCS6主界面中，選擇命令【文件】→【新建】，在彈出的【新建文檔】對話框中選擇“空白頁”→“庫項(xiàng)目”。然后單擊【創(chuàng)建】按鈕，創(chuàng)建1個(gè)空白網(wǎng)頁，（2）保存庫項(xiàng)目文件單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕，在彈出的【另存為】對話框中的“保存在”列表框中選擇“webpage”，“保存類型”下拉列表框中選擇“庫文件(*.lbi)”，“文件名”文本框中輸入“nav_bottom0601.lbi”，然后單擊【保存】按鈕，保存庫項(xiàng)目文件。（3）設(shè)置頁面的邊距（4）在網(wǎng)頁中插入表格（5）在表格中輸入文字在表格的第2行單元格中輸入以下文字“返回首頁|旅游服務(wù)|聯(lián)系方式|旅游調(diào)（6）保存庫文件，瀏覽其效果【任務(wù)實(shí)施】1．使用【新建文檔】對話框創(chuàng)建庫【任務(wù)實(shí)施】2．利用現(xiàn)有網(wǎng)頁內(nèi)容轉(zhuǎn)換為庫項(xiàng)目（1）打開文件夾“webpage”中網(wǎng)頁文檔“nav_left0601.html”。（2）選中該網(wǎng)頁文檔中的24行1列的景點(diǎn)導(dǎo)航表格。（3）在DreamweaverCS6主界面中，選擇命令【修改】→【庫】→【增加對象到庫】，將選中的表格轉(zhuǎn)化為庫文件。此時(shí)會出現(xiàn)“提示信息”對話框，在該對話框中單擊【確定】按鈕，庫項(xiàng)目的內(nèi)容隨即會出現(xiàn)在【資源】面板中，等待輸入新的庫文件名稱。在名稱框中輸入新的庫文件名稱“nav_left0601.lbi”，“.lbi”為庫文件的擴(kuò)展名。然后按【Enter】鍵即可。（4）DreamweaverCS6會把庫項(xiàng)目文件保存在本地站點(diǎn)根文件夾下的“Library”子文件夾中，如果本地站點(diǎn)沒有該文件夾，Dreamweaver會自動創(chuàng)建該文件夾?！救蝿?wù)實(shí)施】2．利用現(xiàn)有網(wǎng)頁內(nèi)容轉(zhuǎn)換為庫項(xiàng)目【引導(dǎo)訓(xùn)練】（1）在網(wǎng)頁0601.html的表格3-2中插入庫項(xiàng)目nav_left0601.lbi。（2）在網(wǎng)頁0601.html的底部插入庫項(xiàng)目nav_bottom0601.lbi。【任務(wù)描述】【任務(wù)6-1-2】在網(wǎng)頁中插入庫項(xiàng)目

【引導(dǎo)訓(xùn)練】（1）在網(wǎng)頁0601.html的表格3-2中插入【任務(wù)實(shí)施】1．在表格3-2中插入庫項(xiàng)目nav_left0601（1）打開【操作準(zhǔn)備】環(huán)節(jié)創(chuàng)建的網(wǎng)頁文檔0601.html，將光標(biāo)置于表格3-2中。（2）在DreamweaverCS6主界面，選擇命令【窗口】→【資源】，切換到【資源】面板，也可以在【文件】面板中直接單擊“資源”選項(xiàng)卡切換到【資源】面板。（3）在【資源】面板中單擊左側(cè)的【庫】按鈕，顯示本站點(diǎn)所有的庫項(xiàng)目文件，選中要插入的庫項(xiàng)目“nav_left0601”，單擊該面板中左下角的【插入】按鈕，即可插入1個(gè)庫項(xiàng)目。插入到網(wǎng)頁中的庫項(xiàng)目背景會顯示為淡黃色，同樣是不可編輯的。2．在表格3的下方插入庫項(xiàng)目nav_bottom0601將光標(biāo)置于表格3的右側(cè)，在【資源】面板中選中要插入的庫項(xiàng)目“nav_bottom0601”，然后單擊該面板中左下角的【插入】按鈕，即可在表格3的下方插入另1個(gè)庫項(xiàng)目。保存網(wǎng)頁，預(yù)覽其效果?！救蝿?wù)實(shí)施】1．在表格3-2中插入庫項(xiàng)目nav_left06【引導(dǎo)訓(xùn)練】利用現(xiàn)有網(wǎng)頁文檔“0601.html”創(chuàng)建網(wǎng)頁模板“0601.dwt”?！救蝿?wù)描述】【任務(wù)6-1-3】創(chuàng)建網(wǎng)頁模板【引導(dǎo)訓(xùn)練】利用現(xiàn)有網(wǎng)頁文檔“0601.html”創(chuàng)建網(wǎng)頁?！救蝿?wù)實(shí)施】（1）在DreamweaverCS6主窗口中，選擇命令【文件】→【另存為模板】，彈出【另存模板】對話框。（2）在【另存模板】對話框中的“站點(diǎn)”下拉列表框選擇模板保存的站點(diǎn)，本項(xiàng)目選擇“單元6”。在“現(xiàn)存的模板”列表框中顯示了當(dāng)前站點(diǎn)中的所有模板，由于本站點(diǎn)暫時(shí)沒有創(chuàng)建模板，所以顯示“（沒有模板）”。在“另存為”文本框中輸入模板的名稱，這里輸入“0601”。（3）設(shè)置完畢后，在【另存模板】對話框中，單擊【保存】按鈕，彈出1個(gè)“要更新鏈接嗎”提示信息對話框。如果在該對話框中單擊【是】按鈕。則當(dāng)前網(wǎng)頁會被轉(zhuǎn)換成模板，同時(shí)系統(tǒng)將自動在所選擇站點(diǎn)的根目錄下創(chuàng)建“Templates”文件夾，并將創(chuàng)建的模板文件保存在該文件夾中?！救蝿?wù)實(shí)施】（1）在DreamweaverCS6主窗口中，【引導(dǎo)訓(xùn)練】（1）將文字“北京”定義為可編輯區(qū)域。（2）將表格3-3中的圖像“002.jpg”定義為可編輯區(qū)域。（3）將表格3-4和表格3-5定義為可編輯區(qū)域。（4）將標(biāo)簽“background”和“bgcolor”定義為可編輯的標(biāo)簽屬性。（5）將表格1定義為不可編輯的可選區(qū)域。（6）將表格3-1中的圖像“001.jpg”定義為可編輯的可選區(qū)域。（7）修改可編輯區(qū)域和可選區(qū)域?！救蝿?wù)描述】【任務(wù)6-1-4】定義與修改可編輯區(qū)域和可選區(qū)域

【引導(dǎo)訓(xùn)練】（1）將文字“北京”定義為可編輯區(qū)域?！救蝿?wù)描述【任務(wù)實(shí)施】1．打開網(wǎng)頁模板文件打開當(dāng)前站點(diǎn)文件夾“Templates”中模板文件“0601.dwt”。2．定義可編輯區(qū)域（1）將文字定義為可編輯區(qū)域選中表格2中的文字“北京”，在DreamweaverCS6主界面，選擇命令【插入】→【模板對象】→【可編輯區(qū)域】，彈出【新建可編輯區(qū)域】對話框。在【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入可編輯區(qū)域的名稱“EditRegion1”。然后單擊【確定】按鈕，完成可編輯區(qū)域的創(chuàng)建。（2）將圖像定義為可編輯區(qū)域選中表格3-3中的圖像“002.jpg”，單擊【插入】工具面板“常用”工具中【模板】按鈕右側(cè)的箭頭按鈕，在彈出的下拉菜單中單擊【可編輯區(qū)域】按鈕，在彈出的【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入第二個(gè)可編輯區(qū)域的名稱“EditRegion2”?！救蝿?wù)實(shí)施】1．打開網(wǎng)頁模板文件【任務(wù)實(shí)施】（3）將表格定義為可編輯區(qū)域選中表格3-4，在【模板】下拉菜單中單擊【可編輯區(qū)域】按鈕，在彈出的【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入第三個(gè)可編輯區(qū)域的名稱“EditRegion3”。按類似的方法，將表格3-5定義為可編輯區(qū)域，且將該可編輯區(qū)域命名為“EditRegion4”。（4）定義可編輯的標(biāo)簽屬性①定義可編輯的標(biāo)簽屬性“background”②定義可編輯的標(biāo)簽屬性“bgcolor”【任務(wù)實(shí)施】（3）將表格定義為可編輯區(qū)域【任務(wù)實(shí)施】3．定義不可編輯的可選區(qū)域（1）選擇要設(shè)置為不可編輯的可選區(qū)域的表格1。（2）在DreamweaverCS6主界面中，選擇命令【插入】→【模板對象】→【可選區(qū)域】?；蛘咴凇静迦搿抗ぞ呙姘濉俺Ｓ谩惫ぞ咧校瑔螕簟灸０濉肯吕藛沃械摹究蛇x區(qū)域】按鈕。彈出【新建可選區(qū)域】對話框。（3）在【新建可選區(qū)域】對話框中“基本”選項(xiàng)卡的“名稱”文本框中輸入該可選區(qū)域的名稱。如果選中“默認(rèn)顯示”復(fù)選框，則該可選區(qū)域在默認(rèn)情況下將在網(wǎng)頁中顯示。（4）切換到“基本”選項(xiàng)卡，然后單擊【確定】按鈕，即可定義1個(gè)不可編輯的可選區(qū)域。設(shè)置完成后，頁面中可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可選區(qū)域的名稱“IfOptionalRegion1”?！救蝿?wù)實(shí)施】3．定義不可編輯的可選區(qū)域【任務(wù)實(shí)施】4．定義可編輯的可選區(qū)域（1）選擇要設(shè)置為可編輯的可選區(qū)域的表格3-1中的圖像“001.jpg”。（2）在DreamweaverCS6主界面中，選擇命令【插入】→【模板對象】→【可編輯的可選區(qū)域】。或者在【插入】工具面板“常用”選項(xiàng)卡中，單擊【模板】下拉菜單中的【可選區(qū)域】按鈕。彈出【新建可選區(qū)域】對話框。（3）在【新建可選區(qū)域】對話框“基本”選項(xiàng)卡的“名稱”文本框中輸入該可編輯的可選區(qū)域的名稱。如果選中“默認(rèn)顯示”復(fù)選框，則該可編輯的可選區(qū)域在默認(rèn)情況下將在基于模板的網(wǎng)頁中顯示。切換到“高級”選項(xiàng)卡，選擇現(xiàn)有參數(shù)或輸入1個(gè)表達(dá)式，確定該區(qū)域是否可見。（4）切換到“基本”選項(xiàng)卡，然后單擊【確定】按鈕，即可定義1個(gè)可編輯的可選區(qū)域。設(shè)置完成后，頁面中可編輯的可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可選區(qū)域的名稱“IfOptionalRegion2”，由于該區(qū)域的內(nèi)容允許用戶修改，也顯示1個(gè)可編輯區(qū)域的標(biāo)簽“EditRegion5”?！救蝿?wù)實(shí)施】4．定義可編輯的可選區(qū)域【任務(wù)實(shí)施】5．修改可編輯區(qū)域（1）單擊網(wǎng)頁模板中可編輯區(qū)域左上角的標(biāo)簽，如“EditRegion1”，選中該可編輯區(qū)域。（2）在“可編輯區(qū)域”【屬性】面板中輸入1個(gè)新的名稱，按回車鍵確認(rèn)。6、修改可選區(qū)域可選區(qū)域設(shè)置完成后，如果需要對可選區(qū)域的名稱及其他參數(shù)進(jìn)行修改，可以先選中可選區(qū)域，然后單擊可選區(qū)域【屬性】面板中的【編輯】按鈕，彈出對話框，重新修改其名稱或設(shè)置其參數(shù)即可。保存所創(chuàng)建的模板?！救蝿?wù)實(shí)施】5．修改可編輯區(qū)域【引導(dǎo)訓(xùn)練】（1）創(chuàng)建基于網(wǎng)頁模板0601.dwt的網(wǎng)頁0602.html。（2）修改和更新模板0601.dwt的屬性。（3）編輯與更新網(wǎng)頁0602.html的內(nèi)容?！救蝿?wù)描述】【任務(wù)6-1-5】創(chuàng)建基于網(wǎng)頁模板的網(wǎng)頁【引導(dǎo)訓(xùn)練】（1）創(chuàng)建基于網(wǎng)頁模板0601.dwt的網(wǎng)頁06【任務(wù)實(shí)施】1．應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔（1）在DreamweaverCS6主界面中，選擇命令【文件】→【新建】，彈出【新建文檔】對話框，在【新建文檔】對話框中依次單擊選擇【模板中的頁】→【單元6】→【0601】選項(xiàng)。（3）單擊【創(chuàng)建】按鈕，這樣將基于該模板創(chuàng)建1個(gè)新的網(wǎng)頁。（4）將新創(chuàng)建的基于此模板的網(wǎng)頁保存在站點(diǎn)內(nèi)文件夾“task06-1”中，命名為“0602.html”，然后預(yù)覽其效果。【任務(wù)實(shí)施】1．應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔【任務(wù)實(shí)施】2．修改和更新網(wǎng)頁模板屬性（1）顯示或隱藏可選區(qū)域打開或切換到基于模板創(chuàng)建的網(wǎng)頁，單擊【修改】→【模板屬性】，彈出【模板屬性】對話框，該對話框中列出了可選區(qū)域的名稱和可編輯標(biāo)簽屬性的標(biāo)簽名稱。在【模板屬性】對話框中，單擊選中1個(gè)可選區(qū)域的名稱“OptionalRegion1”，并選中“顯示OptionalRegion1”復(fù)選框，單擊【確定】按鈕即可。（2）設(shè)置可編輯標(biāo)簽屬性的屬性值打開【模板屬性】對話框，在該對話框中選中可編輯標(biāo)簽屬性的名稱“background”，這時(shí)【模板屬性】對話框有所變化示。在“background”文本框中修改背景圖像的路徑和文件名為“images/bg_image/bg01.jpg”，然后單擊【確定】按鈕即可?！救蝿?wù)實(shí)施】2．修改和更新網(wǎng)頁模板屬性【任務(wù)實(shí)施】3．編輯與更新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁（1）在【文檔】工具欄中將網(wǎng)頁標(biāo)題修改為“暢游上海城”。（2）將表格2中的文字“北京”修改為“上?！薄＃?）將表格3-3中的圖像源文件“0601北京游/image/002.jpg”修改為“0602上海游/image/002.gif”。（4）在表格3-4及其嵌套表格3-4-1．3-4-2．3-4-3和3-4-4中輸入文字和插入圖像，文字內(nèi)容也可以從文本文件0602.txt中拷貝。根據(jù)圖像的大小和文字內(nèi)容的多少，對嵌套表格進(jìn)行適當(dāng)?shù)恼{(diào)整。保存網(wǎng)頁0602.html。（5）將表格3-5中第1行的文字“旅游景點(diǎn)導(dǎo)航圖”修改為“上海旅游景點(diǎn)導(dǎo)航圖”，并且將這些文字的“大小”設(shè)置為“18像素”，文字顏色設(shè)置為“#896449”。將第2行中的圖像占位符修改為上海旅游景點(diǎn)導(dǎo)航地圖，其源文件為“0602上海游/image/mapshanghai.gif”，將第2行的“高”調(diào)整為“365像素”，將圖像的“高”也設(shè)置為“365像素”。保存網(wǎng)頁0602.html，預(yù)覽其效果?！救蝿?wù)實(shí)施】3．編輯與更新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁【引導(dǎo)訓(xùn)練】對網(wǎng)頁模板0601.dwt進(jìn)行必要的修改，然后更新由該模板生成的網(wǎng)頁文檔0602.html。【任務(wù)描述】【任務(wù)6-1-6】修改網(wǎng)頁模板并更新網(wǎng)頁

【引導(dǎo)訓(xùn)練】對網(wǎng)頁模板0601.dwt進(jìn)行必要的修改，然后更【任務(wù)實(shí)施】對網(wǎng)頁模板進(jìn)行修改后，可以將網(wǎng)頁模板的修改應(yīng)用于所有由該模板生成的網(wǎng)頁。（1）打開模板文檔，對網(wǎng)頁模板中的文字、圖像或表格進(jìn)行必要的修改，如將表格3-5第2行的“高”修改為“300像素”，將表格3-5第2行單元格的圖像占位符的“高”修改為“300像素”。（2）單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕，彈出【更新模板文件】對話框，在該對話框中單擊【更新】按鈕，系統(tǒng)開始更新模板文件，并且會彈出【更新頁面】對話框。（3）在【更新頁面】對話框中選中復(fù)選框“顯示記錄”，該對話框變成如圖6-48所示的形式，在其下方“狀態(tài)”列表框中顯示檢查文件數(shù)、更新文件數(shù)等詳細(xì)的更新信息。（4）在【更新頁面】對話框中設(shè)置相應(yīng)的參數(shù)，在“查看”下拉列表框中如果選擇“整個(gè)站點(diǎn)”，則要選擇需要更新的站點(diǎn)（如“單元6”），然后單擊【完成】按鈕，對基于模板創(chuàng)建的網(wǎng)頁全部進(jìn)行更新。（5）更新完成后，單擊該對話框中的【關(guān)閉】按鈕，更新頁面操作結(jié)束。保存更新的網(wǎng)頁0602.html，預(yù)覽其效果?！救蝿?wù)實(shí)施】對網(wǎng)頁模板進(jìn)行修改后，可以將網(wǎng)頁模板的修【引導(dǎo)訓(xùn)練】對庫項(xiàng)目的內(nèi)容進(jìn)行必要的修改，然后對插入了該庫項(xiàng)目的網(wǎng)頁進(jìn)行更新?！救蝿?wù)描述】【任務(wù)6-1-7】修改庫項(xiàng)目并更新網(wǎng)頁

【引導(dǎo)訓(xùn)練】對庫項(xiàng)目的內(nèi)容進(jìn)行必要的修改，然后對插入了該庫項(xiàng)【任務(wù)實(shí)施】（1）選中網(wǎng)頁模板“0601.dwt”中插入的庫文件“nav_left0601.lbi”，在如圖6-47所示的“庫項(xiàng)目”【屬性】面板中單擊【打開】按鈕，打開庫項(xiàng)目“nav_left0601.lbi”的頁面。打開庫項(xiàng)目的頁面后，可對該庫項(xiàng)目的內(nèi)容進(jìn)行必要的修改。（2）選擇命令【文件】→【保存】，這時(shí)會彈出如圖6-48所示的【更新庫項(xiàng)目】對話框在該對話框中單擊【更新】按鈕，將更新本地站點(diǎn)內(nèi)插入了該庫文件的網(wǎng)頁，并且會彈出【更新頁面】對話框。（3）更新完成后，單擊該對話框中的【關(guān)閉】按鈕，則更新操作結(jié)束。（4）保存更新的網(wǎng)頁，預(yù)覽其效果。最后，保存網(wǎng)頁0602.html，按F12預(yù)覽其效果?！救蝿?wù)實(shí)施】（1）選中網(wǎng)頁模板“0601.dwt”中插入的庫【引導(dǎo)訓(xùn)練考核實(shí)戰(zhàn)】本單元的“引導(dǎo)訓(xùn)練”考核評價(jià)內(nèi)容如表6-6所示。表6-6單元6“引導(dǎo)訓(xùn)練”考核評價(jià)表

【引導(dǎo)訓(xùn)練考核實(shí)戰(zhàn)】本單元的“引導(dǎo)訓(xùn)練”考核評價(jià)內(nèi)容如表6-【同步訓(xùn)練】【任務(wù)描述】【任務(wù)6-2】使用模板和庫制作?？谟蔚木W(wǎng)頁

表6-7單元6“同步訓(xùn)練”任務(wù)卡本單元“同步訓(xùn)練”的任務(wù)卡如表6-7所示?！就接?xùn)練】【任務(wù)描述】【任務(wù)6-2】使用模板和庫制作?？谟巍就接?xùn)練】【任務(wù)描述】【任務(wù)6-2】使用模板和庫制作?？谟蔚木W(wǎng)頁

本單元“同步訓(xùn)練”所創(chuàng)建網(wǎng)頁的瀏覽效果如圖6-50所示。圖6-50同步訓(xùn)練網(wǎng)頁的瀏覽效果

【同步訓(xùn)練】【任務(wù)描述】【任務(wù)6-2】使用模板和庫制作?？谟巍就接?xùn)練考核實(shí)戰(zhàn)】本單元的“同步訓(xùn)練”考核評價(jià)內(nèi)容如表6-9所示。表6-9單元6“同步訓(xùn)練”考核評價(jià)表

【同步訓(xùn)練考核實(shí)戰(zhàn)】本單元的“同步訓(xùn)練”考核評價(jià)內(nèi)容如表6【拓展訓(xùn)練】【任務(wù)描述】【任務(wù)6-3】使用模板和庫制作南京游的網(wǎng)頁表6-10單元6“拓展訓(xùn)練”任務(wù)卡本單元“拓展訓(xùn)練”的任務(wù)卡如表6-10所示?！就卣褂?xùn)練】【任務(wù)描述】【任務(wù)6-3】使用模板和庫制作南京游【拓展訓(xùn)練考核實(shí)戰(zhàn)】本單元的“拓展訓(xùn)練”考核評價(jià)內(nèi)容如表6-12所示。表6-12單元6“拓展訓(xùn)練”考核評價(jià)表

【拓展訓(xùn)練考核實(shí)戰(zhàn)】本單元的“拓展訓(xùn)練”考核評價(jià)內(nèi)容如表【單元小結(jié)】本單元主要使用模板和庫制作網(wǎng)頁，使用模板和庫的組合可以使網(wǎng)站維護(hù)變得很輕松，尤其是在對1個(gè)規(guī)模較大的網(wǎng)站進(jìn)行維護(hù)時(shí)，就更能體會使用模板的優(yōu)點(diǎn)。另外，通過修改庫項(xiàng)目，可以方便地對遠(yuǎn)程網(wǎng)站進(jìn)行更新，而不用將每1個(gè)網(wǎng)頁文件上傳到遠(yuǎn)程網(wǎng)站中?！締卧〗Y(jié)】本單元主要使用模板和庫制作網(wǎng)頁，使用?？鞓穼W(xué)習(xí)、高效學(xué)習(xí)快樂學(xué)習(xí)、高效學(xué)習(xí)謝謝你的閱讀知識就是財(cái)富豐富你的人生謝謝你的閱讀知識就是財(cái)富35網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動式教程單元6使用模板和庫制作網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作單元6使用模板和庫制作網(wǎng)頁教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航

】

1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)訓(xùn)練考核評價(jià)】3【同步訓(xùn)練/同步訓(xùn)練考核評價(jià)】

4【拓展訓(xùn)練/拓展訓(xùn)練考核評價(jià)】5教學(xué)環(huán)節(jié)【教學(xué)導(dǎo)航】1【操作準(zhǔn)備】2【引導(dǎo)訓(xùn)練/引導(dǎo)【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板（2）能正確編輯模板，掌握設(shè)置可編輯區(qū)域和可選區(qū)域的方法（3）熟悉用模板生成新網(wǎng)頁的操作方法，并能對新網(wǎng)頁進(jìn)行編輯加工（4）能熟練地修改網(wǎng)頁模板，并同步更新該模板生成的網(wǎng)頁（5）學(xué)會創(chuàng)建庫項(xiàng)目，并且能修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁（6）掌握插入圖像占位符的方法（7）理解模板和庫的作用（8）了解CSS樣式的簡單應(yīng)用本單元重點(diǎn)（1）將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板（2）用模板生成新網(wǎng)頁，并對新網(wǎng)頁進(jìn)行編輯加工（3）修改網(wǎng)頁模板并同步更新該模板生成的網(wǎng)頁（4）創(chuàng)建庫項(xiàng)目，并且修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁本單元難點(diǎn)（1）用模板生成新網(wǎng)頁，并對新網(wǎng)頁進(jìn)行編輯加工（2）修改網(wǎng)頁模板并同步更新該模板生成的網(wǎng)頁教學(xué)方法任務(wù)驅(qū)動法、分組討論法、四步訓(xùn)練法（操作準(zhǔn)備－引導(dǎo)訓(xùn)練－同步訓(xùn)練－拓展訓(xùn)練）

課時(shí)建議2課時(shí)（含考核評價(jià)）【教學(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會將現(xiàn)有的網(wǎng)頁生成網(wǎng)頁模板本單元【操作準(zhǔn)備】1．新建1個(gè)本地站點(diǎn)（1）創(chuàng)建所需的文件夾，拷貝所需的資源（2）啟動DreamweaverCS6（3）創(chuàng)建本地站點(diǎn)2．制作用來生成網(wǎng)頁模板的網(wǎng)頁（1）新建1個(gè)網(wǎng)頁（2）在網(wǎng)頁中插入表格1（3）在網(wǎng)頁中插入表格2（4）在網(wǎng)頁中插入表格3保存網(wǎng)頁，預(yù)覽其效果?！静僮鳒?zhǔn)備】1．新建1個(gè)本地站點(diǎn)【引導(dǎo)訓(xùn)練】【任務(wù)6-1】使用模板和庫制作上海游的網(wǎng)頁

本單元“引導(dǎo)訓(xùn)練”的任務(wù)卡如表6-4所示。【引導(dǎo)訓(xùn)練】【任務(wù)6-1】使用模板和庫制作上海游的網(wǎng)頁本單【引導(dǎo)訓(xùn)練】（1）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目。（2）將現(xiàn)有網(wǎng)頁nav_left0601.html中的景點(diǎn)導(dǎo)航表格轉(zhuǎn)換為庫項(xiàng)目?！救蝿?wù)描述】【任務(wù)6-1-1】創(chuàng)建庫項(xiàng)目【引導(dǎo)訓(xùn)練】（1）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目。【任務(wù)【任務(wù)實(shí)施】1．使用【新建文檔】對話框創(chuàng)建庫（1）在DreamweaverCS6主界面中，選擇命令【文件】→【新建】，在彈出的【新建文檔】對話框中選擇“空白頁”→“庫項(xiàng)目”。然后單擊【創(chuàng)建】按鈕，創(chuàng)建1個(gè)空白網(wǎng)頁，（2）保存庫項(xiàng)目文件單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕，在彈出的【另存為】對話框中的“保存在”列表框中選擇“webpage”，“保存類型”下拉列表框中選擇“庫文件(*.lbi)”，“文件名”文本框中輸入“nav_bottom0601.lbi”，然后單擊【保存】按鈕，保存庫項(xiàng)目文件。（3）設(shè)置頁面的邊距（4）在網(wǎng)頁中插入表格（5）在表格中輸入文字在表格的第2行單元格中輸入以下文字“返回首頁|旅游服務(wù)|聯(lián)系方式|旅游調(diào)（6）保存庫文件，瀏覽其效果【任務(wù)實(shí)施】1．使用【新建文檔】對話框創(chuàng)建庫【任務(wù)實(shí)施】2．利用現(xiàn)有網(wǎng)頁內(nèi)容轉(zhuǎn)換為庫項(xiàng)目（1）打開文件夾“webpage”中網(wǎng)頁文檔“nav_left0601.html”。（2）選中該網(wǎng)頁文檔中的24行1列的景點(diǎn)導(dǎo)航表格。（3）在DreamweaverCS6主界面中，選擇命令【修改】→【庫】→【增加對象到庫】，將選中的表格轉(zhuǎn)化為庫文件。此時(shí)會出現(xiàn)“提示信息”對話框，在該對話框中單擊【確定】按鈕，庫項(xiàng)目的內(nèi)容隨即會出現(xiàn)在【資源】面板中，等待輸入新的庫文件名稱。在名稱框中輸入新的庫文件名稱“nav_left0601.lbi”，“.lbi”為庫文件的擴(kuò)展名。然后按【Enter】鍵即可。（4）DreamweaverCS6會把庫項(xiàng)目文件保存在本地站點(diǎn)根文件夾下的“Library”子文件夾中，如果本地站點(diǎn)沒有該文件夾，Dreamweaver會自動創(chuàng)建該文件夾。【任務(wù)實(shí)施】2．利用現(xiàn)有網(wǎng)頁內(nèi)容轉(zhuǎn)換為庫項(xiàng)目【引導(dǎo)訓(xùn)練】（1）在網(wǎng)頁0601.html的表格3-2中插入庫項(xiàng)目nav_left0601.lbi。（2）在網(wǎng)頁0601.html的底部插入庫項(xiàng)目nav_bottom0601.lbi?！救蝿?wù)描述】【任務(wù)6-1-2】在網(wǎng)頁中插入庫項(xiàng)目

【引導(dǎo)訓(xùn)練】（1）在網(wǎng)頁0601.html的表格3-2中插入【任務(wù)實(shí)施】1．在表格3-2中插入庫項(xiàng)目nav_left0601（1）打開【操作準(zhǔn)備】環(huán)節(jié)創(chuàng)建的網(wǎng)頁文檔0601.html，將光標(biāo)置于表格3-2中。（2）在DreamweaverCS6主界面，選擇命令【窗口】→【資源】，切換到【資源】面板，也可以在【文件】面板中直接單擊“資源”選項(xiàng)卡切換到【資源】面板。（3）在【資源】面板中單擊左側(cè)的【庫】按鈕，顯示本站點(diǎn)所有的庫項(xiàng)目文件，選中要插入的庫項(xiàng)目“nav_left0601”，單擊該面板中左下角的【插入】按鈕，即可插入1個(gè)庫項(xiàng)目。插入到網(wǎng)頁中的庫項(xiàng)目背景會顯示為淡黃色，同樣是不可編輯的。2．在表格3的下方插入庫項(xiàng)目nav_bottom0601將光標(biāo)置于表格3的右側(cè)，在【資源】面板中選中要插入的庫項(xiàng)目“nav_bottom0601”，然后單擊該面板中左下角的【插入】按鈕，即可在表格3的下方插入另1個(gè)庫項(xiàng)目。保存網(wǎng)頁，預(yù)覽其效果?！救蝿?wù)實(shí)施】1．在表格3-2中插入庫項(xiàng)目nav_left06【引導(dǎo)訓(xùn)練】利用現(xiàn)有網(wǎng)頁文檔“0601.html”創(chuàng)建網(wǎng)頁模板“0601.dwt”?！救蝿?wù)描述】【任務(wù)6-1-3】創(chuàng)建網(wǎng)頁模板【引導(dǎo)訓(xùn)練】利用現(xiàn)有網(wǎng)頁文檔“0601.html”創(chuàng)建網(wǎng)頁?！救蝿?wù)實(shí)施】（1）在DreamweaverCS6主窗口中，選擇命令【文件】→【另存為模板】，彈出【另存模板】對話框。（2）在【另存模板】對話框中的“站點(diǎn)”下拉列表框選擇模板保存的站點(diǎn)，本項(xiàng)目選擇“單元6”。在“現(xiàn)存的模板”列表框中顯示了當(dāng)前站點(diǎn)中的所有模板，由于本站點(diǎn)暫時(shí)沒有創(chuàng)建模板，所以顯示“（沒有模板）”。在“另存為”文本框中輸入模板的名稱，這里輸入“0601”。（3）設(shè)置完畢后，在【另存模板】對話框中，單擊【保存】按鈕，彈出1個(gè)“要更新鏈接嗎”提示信息對話框。如果在該對話框中單擊【是】按鈕。則當(dāng)前網(wǎng)頁會被轉(zhuǎn)換成模板，同時(shí)系統(tǒng)將自動在所選擇站點(diǎn)的根目錄下創(chuàng)建“Templates”文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。【任務(wù)實(shí)施】（1）在DreamweaverCS6主窗口中，【引導(dǎo)訓(xùn)練】（1）將文字“北京”定義為可編輯區(qū)域。（2）將表格3-3中的圖像“002.jpg”定義為可編輯區(qū)域。（3）將表格3-4和表格3-5定義為可編輯區(qū)域。（4）將標(biāo)簽“background”和“bgcolor”定義為可編輯的標(biāo)簽屬性。（5）將表格1定義為不可編輯的可選區(qū)域。（6）將表格3-1中的圖像“001.jpg”定義為可編輯的可選區(qū)域。（7）修改可編輯區(qū)域和可選區(qū)域?！救蝿?wù)描述】【任務(wù)6-1-4】定義與修改可編輯區(qū)域和可選區(qū)域

【引導(dǎo)訓(xùn)練】（1）將文字“北京”定義為可編輯區(qū)域?！救蝿?wù)描述【任務(wù)實(shí)施】1．打開網(wǎng)頁模板文件打開當(dāng)前站點(diǎn)文件夾“Templates”中模板文件“0601.dwt”。2．定義可編輯區(qū)域（1）將文字定義為可編輯區(qū)域選中表格2中的文字“北京”，在DreamweaverCS6主界面，選擇命令【插入】→【模板對象】→【可編輯區(qū)域】，彈出【新建可編輯區(qū)域】對話框。在【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入可編輯區(qū)域的名稱“EditRegion1”。然后單擊【確定】按鈕，完成可編輯區(qū)域的創(chuàng)建。（2）將圖像定義為可編輯區(qū)域選中表格3-3中的圖像“002.jpg”，單擊【插入】工具面板“常用”工具中【模板】按鈕右側(cè)的箭頭按鈕，在彈出的下拉菜單中單擊【可編輯區(qū)域】按鈕，在彈出的【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入第二個(gè)可編輯區(qū)域的名稱“EditRegion2”。【任務(wù)實(shí)施】1．打開網(wǎng)頁模板文件【任務(wù)實(shí)施】（3）將表格定義為可編輯區(qū)域選中表格3-4，在【模板】下拉菜單中單擊【可編輯區(qū)域】按鈕，在彈出的【新建可編輯區(qū)域】對話框中的“名稱”文本框中輸入第三個(gè)可編輯區(qū)域的名稱“EditRegion3”。按類似的方法，將表格3-5定義為可編輯區(qū)域，且將該可編輯區(qū)域命名為“EditRegion4”。（4）定義可編輯的標(biāo)簽屬性①定義可編輯的標(biāo)簽屬性“background”②定義可編輯的標(biāo)簽屬性“bgcolor”【任務(wù)實(shí)施】（3）將表格定義為可編輯區(qū)域【任務(wù)實(shí)施】3．定義不可編輯的可選區(qū)域（1）選擇要設(shè)置為不可編輯的可選區(qū)域的表格1。（2）在DreamweaverCS6主界面中，選擇命令【插入】→【模板對象】→【可選區(qū)域】?；蛘咴凇静迦搿抗ぞ呙姘濉俺Ｓ谩惫ぞ咧校瑔螕簟灸０濉肯吕藛沃械摹究蛇x區(qū)域】按鈕。彈出【新建可選區(qū)域】對話框。（3）在【新建可選區(qū)域】對話框中“基本”選項(xiàng)卡的“名稱”文本框中輸入該可選區(qū)域的名稱。如果選中“默認(rèn)顯示”復(fù)選框，則該可選區(qū)域在默認(rèn)情況下將在網(wǎng)頁中顯示。（4）切換到“基本”選項(xiàng)卡，然后單擊【確定】按鈕，即可定義1個(gè)不可編輯的可選區(qū)域。設(shè)置完成后，頁面中可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可選區(qū)域的名稱“IfOptionalRegion1”?！救蝿?wù)實(shí)施】3．定義不可編輯的可選區(qū)域【任務(wù)實(shí)施】4．定義可編輯的可選區(qū)域（1）選擇要設(shè)置為可編輯的可選區(qū)域的表格3-1中的圖像“001.jpg”。（2）在DreamweaverCS6主界面中，選擇命令【插入】→【模板對象】→【可編輯的可選區(qū)域】?；蛘咴凇静迦搿抗ぞ呙姘濉俺Ｓ谩边x項(xiàng)卡中，單擊【模板】下拉菜單中的【可選區(qū)域】按鈕。彈出【新建可選區(qū)域】對話框。（3）在【新建可選區(qū)域】對話框“基本”選項(xiàng)卡的“名稱”文本框中輸入該可編輯的可選區(qū)域的名稱。如果選中“默認(rèn)顯示”復(fù)選框，則該可編輯的可選區(qū)域在默認(rèn)情況下將在基于模板的網(wǎng)頁中顯示。切換到“高級”選項(xiàng)卡，選擇現(xiàn)有參數(shù)或輸入1個(gè)表達(dá)式，確定該區(qū)域是否可見。（4）切換到“基本”選項(xiàng)卡，然后單擊【確定】按鈕，即可定義1個(gè)可編輯的可選區(qū)域。設(shè)置完成后，頁面中可編輯的可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可選區(qū)域的名稱“IfOptionalRegion2”，由于該區(qū)域的內(nèi)容允許用戶修改，也顯示1個(gè)可編輯區(qū)域的標(biāo)簽“EditRegion5”?！救蝿?wù)實(shí)施】4．定義可編輯的可選區(qū)域【任務(wù)實(shí)施】5．修改可編輯區(qū)域（1）單擊網(wǎng)頁模板中可編輯區(qū)域左上角的標(biāo)簽，如“EditRegion1”，選中該可編輯區(qū)域。（2）在“可編輯區(qū)域”【屬性】面板中輸入1個(gè)新的名稱，按回車鍵確認(rèn)。6、修改可選區(qū)域可選區(qū)域設(shè)置完成后，如果需要對可選區(qū)域的名稱及其他參數(shù)進(jìn)行修改，可以先選中可選區(qū)域，然后單擊可選區(qū)域【屬性】面板中的【編輯】按鈕，彈出對話框，重新修改其名稱或設(shè)置其參數(shù)即可。保存所創(chuàng)建的模板。【任務(wù)實(shí)施】5．修改可編輯區(qū)域【引導(dǎo)訓(xùn)練】（1）創(chuàng)建基于網(wǎng)頁模板0601.dwt的網(wǎng)頁0602.html。（2）修改和更新模板0601.dwt的屬性。（3）編輯與更新網(wǎng)頁0602.html的內(nèi)容。【任務(wù)描述】【任務(wù)6-1-5】創(chuàng)建基于網(wǎng)頁模板的網(wǎng)頁【引導(dǎo)訓(xùn)練】（1）創(chuàng)建基于網(wǎng)頁模板0601.dwt的網(wǎng)頁06【任務(wù)實(shí)施】1．應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔（1）在DreamweaverCS6主界面中，選擇命令【文件】→【新建】，彈出【新建文檔】對話框，在【新建文檔】對話框中依次單擊選擇【模板中的頁】→【單元6】→【0601】選項(xiàng)。（3）單擊【創(chuàng)建】按鈕，這樣將基于該模板創(chuàng)建1個(gè)新的網(wǎng)頁。（4）將新創(chuàng)建的基于此模板的網(wǎng)頁保存在站點(diǎn)內(nèi)文件夾“task06-1”中，命名為“0602.html”，然后預(yù)覽其效果?！救蝿?wù)實(shí)施】1．應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔【任務(wù)實(shí)施】2．修改和更新網(wǎng)頁模板屬性（1）顯示或隱藏可選區(qū)域打開或切換到基于模板創(chuàng)建的網(wǎng)頁，單擊【修改】→【模板屬性】，彈出【模板屬性】對話框，該對話框中列出了可選區(qū)域的名稱和可編輯標(biāo)簽屬性的標(biāo)簽名稱。在【模板屬性】對話框中，單擊選中1個(gè)可選區(qū)域的名稱“OptionalRegion1”，并選中“顯示OptionalRegion1”復(fù)選框，單擊【確定】按鈕即可。（2）設(shè)置可編輯標(biāo)簽屬性的屬性值打開【模板屬性】對話框，在該對話框中選中可編輯標(biāo)簽屬性的名稱“background”，這時(shí)【模板屬性】對話框有所變化示。在“background”文本框中修改背景圖像的路徑和文件名為“images/bg_image/bg01.jpg”，然后單擊【確定】按鈕即可?！救蝿?wù)實(shí)施】2．修改和更新網(wǎng)頁模板屬性【任務(wù)實(shí)施】3．編輯與更新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁（1）在【文檔】工具欄中將網(wǎng)頁標(biāo)題修改為“暢游上海城”。（2）將表格2中的文字“北京”修改為“上?！薄＃?）將表格3-3中的圖像源文件“0601北京游/image/002.jpg”修改為“0602上海游/image/002.gif”。（4）在表格3-4及其嵌套表格3-4-1．3-4-2．3-4-3和3-4-4中輸入文字和插入圖像，文字內(nèi)容也可以從文本文件0602.txt中拷貝。根據(jù)圖像的大小和文字內(nèi)容的多少，對嵌套表格進(jìn)行適當(dāng)?shù)恼{(diào)整。保存網(wǎng)頁0602.html。（5）將表格3-5中第1行的文字“旅游景點(diǎn)導(dǎo)航圖”修改為“上海旅游景點(diǎn)導(dǎo)航圖”，并且將這些文字的“大小”設(shè)置為“18像素”，文字顏色設(shè)置為“#896449”。將第2行中的圖像占位符修改為上海旅游景點(diǎn)導(dǎo)航地圖，其源文件為“0602上海游/image/mapshanghai.gif”，將第2行的“高”調(diào)整為“365像素”，將圖像的“高”也設(shè)置為“365像素”。保存網(wǎng)頁0602.html，預(yù)覽其效果?！救蝿?wù)實(shí)施】3．編輯與更新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁【引導(dǎo)訓(xùn)練】對網(wǎng)頁模板0601.dwt進(jìn)行必要的修改，然后更新由該模板生成的網(wǎng)頁文檔0602.html?！救蝿?wù)描述】【任務(wù)6-1-6】修改網(wǎng)頁模板并更新網(wǎng)頁

【引導(dǎo)訓(xùn)練】對網(wǎng)頁模板0601.dwt進(jìn)行必要的修改，然后更【任務(wù)實(shí)施】對網(wǎng)頁模板進(jìn)行修改后，可以將網(wǎng)頁模板的修改應(yīng)用于所有由該模板生成的網(wǎng)頁。（1）打開模板文檔，對網(wǎng)頁模板中的文字、圖像或表格進(jìn)行必要的修改，如將表格3-5第2行的“高”修改為“300像素”，將表格3-5第2行單元格的圖像占位符的“高”修改為“300像素”。（2）單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕，彈出【