1、單元模板使用九、布置作業(yè)主要教學(xué)環(huán)節(jié)七、完成訓(xùn)練項目 一、明確教學(xué)內(nèi)容與目的 二、項目效果展示三、任務(wù)描述 四、預(yù)備知識講解八、演示、點(diǎn)評與總結(jié)五、技能操作示范六、學(xué)生實(shí)施任務(wù) 1學(xué)生小組代表演示上次課能力訓(xùn)練項目作品學(xué)生作品展示 2教學(xué)內(nèi)容：資源面板和模板概念 創(chuàng)建模板 、根據(jù)模板創(chuàng)建網(wǎng)頁更新模板文件知識能力目標(biāo)：了解資源面板的功能理解模板、可編輯區(qū)域和可選區(qū)域理解可編輯區(qū)域和可選區(qū)域的XHTML代碼會創(chuàng)建、修改模板會創(chuàng)建可編輯區(qū)域和可選區(qū)域會創(chuàng)建基于模板的網(wǎng)頁并更新模板文件會創(chuàng)建錨記和錨記鏈接一、教學(xué)內(nèi)容與目的 3二、項目效果與任務(wù)描述 本次任務(wù)最終效果任務(wù)描述1創(chuàng)建模板創(chuàng)建模板teach

2、.dwt，要求包含縱向排列的頁頭、頁中、頁腳，均水平居中對齊、寬880 px、無邊框。頁頭、頁中左列、頁腳的具體內(nèi)容與系部概況欄本系簡介網(wǎng)頁xiBuGaiKuang/bxjj.html中對應(yīng)的頁頭、頁中左列、頁腳類似，而頁中右列具體內(nèi)容顯示區(qū)留空。2根據(jù)模板制作教學(xué)管理欄各個網(wǎng)頁根據(jù)模板teach.dwt制作教學(xué)管理欄各個網(wǎng)頁（即特色專業(yè)tszy.html、教研活動jyhd.html、教學(xué)大綱jxdg.html、實(shí)踐教學(xué)sjjx.html、實(shí)訓(xùn)基地sxjd.html、頂崗實(shí)習(xí)dgsx.html等6個網(wǎng)頁）并保存到j(luò)iaoXueGuanLi子文件夾中，同時要根據(jù)各個網(wǎng)頁的具體情況設(shè)置網(wǎng)頁標(biāo)題、當(dāng)

3、前的位置指示，并對具體內(nèi)容顯示區(qū)進(jìn)行內(nèi)容編排。根據(jù)網(wǎng)頁具體內(nèi)容顯示區(qū)中內(nèi)容的多少決定頁腳是否顯示。模板teach.dwt的設(shè)計效果如下圖所示：4551 模板概述5.1.1 模板模板是一種特殊的網(wǎng)頁文檔，是創(chuàng)建其他網(wǎng)頁文檔的基礎(chǔ)文檔?？杀苊庵貜?fù)地在每個頁面中插入或修改相同的內(nèi)容，提高工作效率，簡化維護(hù)工作。在根據(jù)模板創(chuàng)建的網(wǎng)頁中，有些元素不可編輯，有些元素可以編輯修改。三、預(yù)備知識65.1.2 資源面板包含網(wǎng)站中各種資源：【圖像】、【顏色】、【URLs】、【SWF】、【Shockwave】、【影片】、【腳本】、【庫】。庫和模板均可以減輕網(wǎng)頁制作中的重復(fù)勞動，但庫側(cè)重于局部，而模板側(cè)重于整體。資源

4、面板上包含收藏（favorite）選項：用于收藏資源中的精選成分。7四、技能操作示范及學(xué)生實(shí)施任務(wù)52 創(chuàng)建模板5.2.1 創(chuàng)建網(wǎng)頁模板1根據(jù)現(xiàn)有網(wǎng)頁創(chuàng)建模板在文檔編輯窗口打開本系簡介網(wǎng)頁bxjj.html，單擊【插入】面板【常用】選項組中的【模板：創(chuàng)建模板】按鈕，模板取名為teach。說明： 所有模板集中存放在自動創(chuàng)建的Templates子文件夾中。 新建空模板方法：單擊【模板】子面板右下角的【新建模板】按鈕。 默認(rèn)情況下，模板中不包含任何可編輯區(qū)域。82模板初始設(shè)置（1）將模板teach.dwt標(biāo)題更改為“這是教學(xué)管理模板”。（2）將頁中左列“欄目導(dǎo)航”下的4個二級欄目名刪除，然后添加“教

5、學(xué)管理”欄目下的6個二級欄目名：特色專業(yè)、教研活動、教學(xué)大綱、實(shí)踐教學(xué)、實(shí)訓(xùn)基地、頂崗實(shí)習(xí)，并分別超鏈接到：“./jiaoXueGuanLi/tszy.html”、“./jiaoXueGuanLi/jyhd.html”、“./jiaoXueGuanLi/jxdg.html”、“./jiaoXueGuanLi/sjjx.html”、“./jiaoXueGuanLi/sxjd.html”、“./jiaoXueGuanLi/dgsx.html”。（3）將頁中右列當(dāng)前位置指示區(qū)中的內(nèi)容修改為“首頁教學(xué)管理這里顯示二級欄目名”，并且“教學(xué)管理”超鏈接到“./jiaoXueGuanLi/tszy.html

6、”，“這里顯示二級欄目名”超鏈接到“./jiaoXueGuanLi/tszy.html”。（4）將頁中右列具體內(nèi)容顯示區(qū)中的標(biāo)題文本和正文內(nèi)容刪除： 95.2.2 創(chuàng)建可編輯區(qū)域（1）選擇超鏈接“這里顯示二級欄目名”，單擊【插入】面板【常用】選項組中的【模板：可編輯區(qū)域】按鈕。取名為location。說明： 創(chuàng)建可編輯區(qū)域時一般需先選擇文檔中的元素或其中的部分內(nèi)容（如部分文字、圖像、超鏈接、段落、標(biāo)題、div等）。 可編輯區(qū)域創(chuàng)建后，在其左上方顯示可編輯區(qū)域標(biāo)志，單擊它選中。 取消可編輯區(qū)域的方法：選中可編輯區(qū)域后，打開【修改】【模板】【刪除模板標(biāo)記】菜單。 可編輯區(qū)域location的XHT

7、ML代碼為： 默認(rèn)時，在頭部head中會自動創(chuàng)建2個可編輯區(qū)域，分別用于存放title和style等元素。這里顯示二級欄目名10（2）在頁中右列具體內(nèi)容顯示區(qū)中的標(biāo)題位置創(chuàng)建可編輯區(qū)域 content_title，在內(nèi)容位置創(chuàng)建可編輯區(qū)域content。 再新建保存到common.css中的如下CSS規(guī)則：#wrap #main #content ul li list-style-type: circle;margin-left: 60px;line-height: 1.5em;115.2.3 創(chuàng)建可選區(qū)域可選區(qū)域用于由條件控制區(qū)域的顯示與否。選擇頁腳div#footer，單擊【插入】面板【常

8、用】選項組中的【模板：可選區(qū)域】按鈕創(chuàng)建可選區(qū)域footer。說明： 可編輯的可選區(qū)域不僅可由條件控制區(qū)域的顯示與否，而且當(dāng)條件滿足時還可對該區(qū)域進(jìn)行編輯。 修改可選區(qū)域：單擊其左上方的標(biāo)志If footer，再單擊屬性面板上的【編輯】按鈕。 在【新建可選區(qū)域】對話框中，【高級】選項卡用于自行設(shè)置條件。 此處顯示內(nèi)容1253 根據(jù)模板創(chuàng)建網(wǎng)頁5.3.1 對現(xiàn)有網(wǎng)頁應(yīng)用模板（1）打開在第1章創(chuàng)建的特色專業(yè)網(wǎng)頁jiaoXueGuanLi/tszy.html，在模板面板上選中模板teach，并單擊左下方的【應(yīng)用】按鈕。說明： 當(dāng)將模板應(yīng)用于一個已有內(nèi)容的網(wǎng)頁上時，會彈出【不一致的區(qū)域名稱】對話框提示

9、當(dāng)前內(nèi)容的放置位置，此時，可以選擇模板中的一個可編輯區(qū)域來放置當(dāng)前內(nèi)容，或者舍棄當(dāng)前內(nèi)容。 在應(yīng)用了模板的網(wǎng)頁XHTML代碼中只有可編輯區(qū)域的內(nèi)容和模板參數(shù)未灰化，可以修改，其余內(nèi)容全部灰化，即鎖定了。13（2）修改tszy.html網(wǎng)頁的標(biāo)題為“教學(xué)管理_特色專業(yè)”，刪除可編輯區(qū)域location中的原有內(nèi)容并輸入“特色專業(yè)”，刪除可編輯區(qū)域content_title中原有內(nèi)容并輸入“專業(yè)特色”。（3）先刪除可編輯區(qū)域content中原有內(nèi)容，然后輸入有關(guān)專業(yè)特色的具體內(nèi)容，并使用定義列表：先分別輸入專業(yè)各個特色的標(biāo)題和具體介紹內(nèi)容，每個標(biāo)題和具體介紹內(nèi)容均為一段；選中這些段落；單擊【插入】

10、面板【文本】選項組中的【定義列表】按鈕。說明： 定義列表是用來定義一系列術(shù)語以及相關(guān)的說明，是塊級元素。定義列表的開始標(biāo)簽是，每個被說明的術(shù)語的開始標(biāo)簽是，每個說明的開始標(biāo)簽是，在dd元素中的內(nèi)容可以是段落、回車、圖像、鏈接或其他的列表等。14（4）給定義列表新建保存到tszy.html網(wǎng)頁中的CSS規(guī)則：15 5.3.2 根據(jù)模板創(chuàng)建網(wǎng)頁（1）打開【文件】【新建】菜單，在彈出的對話框中選擇teach模板進(jìn)行。說明： 如果某一根據(jù)模板創(chuàng)建的網(wǎng)頁想與模板脫離關(guān)系而變成普通網(wǎng)頁，則可打開【修改】【模板】【從模板中分離】菜單。（2）將網(wǎng)頁保存到j(luò)iaoXueGuanLi子文件夾中，取名為jyhd.h

11、tml。修改網(wǎng)頁標(biāo)題為“教學(xué)管理_教研活動”，刪除可編輯區(qū)域location中的原有內(nèi)容并輸入文字“教研活動”，并超鏈接到j(luò)yhd.html，刪除可編輯區(qū)域content_title中原有內(nèi)容并輸入文字“本學(xué)期教研活動計劃”。16（3）先刪除可編輯區(qū)域content中原有內(nèi)容，然后以項目列表形式輸入各個教研室名稱，再在其下方依次輸入各個教研室的教研活動計劃標(biāo)題和內(nèi)容。分別將光標(biāo)定位于各個教研活動計劃標(biāo)題后，單擊【插入】面板【常用】選項組中的【命名錨記】按鈕插入錨記，分別取名為anchor1、anchor2等等。再將教研室名稱項目列表中的各個列表項分別超鏈接到對應(yīng)的錨記#anchor1、#anc

12、hor2等。說明： 錨記是指文檔中設(shè)置的位置標(biāo)記。錨記鏈接常用在長文檔中實(shí)現(xiàn)快速跳轉(zhuǎn)。 在同一網(wǎng)頁中創(chuàng)建錨記鏈接：#anchor。 在不同網(wǎng)頁中創(chuàng)建錨記鏈接：another.html#anchor。（4）根據(jù)需要創(chuàng)建保存到j(luò)yhd.html中的CSS規(guī)則：#content .teachingplan /*項目列表的class屬性值為teachingplan*/margin-bottom: 300px;17（5）打開【修改】【模板屬性】菜單，在彈出的對話框中取消復(fù)選框【顯示footer】的選中狀態(tài)以便隱藏頁腳的顯示。（6）按照前面（1）（5）的類似步驟創(chuàng)建其余4個網(wǎng)頁，即教學(xué)大綱jxdg.htm

13、l、實(shí)踐教學(xué)sjjx.html、實(shí)訓(xùn)基地sxjd.html、頂崗實(shí)習(xí)dgsx.html，均保存到子文件夾jiaoXueGuanLi中，并根據(jù)各個網(wǎng)頁具體情況修改其標(biāo)題和其他內(nèi)容，同時創(chuàng)建CSS規(guī)則進(jìn)行效果處理。當(dāng)網(wǎng)頁內(nèi)容較多時仍可采用錨記或分成多個網(wǎng)頁存放并加以鏈接的方法，同時還可根據(jù)網(wǎng)頁內(nèi)容的多少決定是否隱藏頁腳的顯示。1854 更新模板文件將模板teach.dwt頁中左列的標(biāo)題“欄目導(dǎo)航”更改為“子欄目導(dǎo)航”，然后保存，并在【更新模板文件】對話框中單擊【更新】按鈕，完成后彈出【更新頁面】對話框顯示更新狀態(tài)。說明： 如果單擊【不更新】按鈕，則就不會自動更新基于此模板創(chuàng)建的所有網(wǎng)頁。但以后仍可

14、通過打開【修改】【模板】【更新當(dāng)前頁】/【更新頁面】菜單，在彈出的對話框中更新指定的網(wǎng)頁。19五、鞏固與拓展1網(wǎng)頁制作創(chuàng)建系部概況欄各個網(wǎng)頁所用模板，并根據(jù)此模板創(chuàng)建各個網(wǎng)頁。創(chuàng)建學(xué)校網(wǎng)站教學(xué)科研欄各個網(wǎng)頁所用模板，并創(chuàng)建基于此模板的各個網(wǎng)頁。所需素材請參考學(xué)?，F(xiàn)有網(wǎng)站搜集整理。2如何創(chuàng)建嵌套模板嵌套模板是指一個模板的可編輯區(qū)域基于另一模板。步驟如下： （1）創(chuàng)建基礎(chǔ)模板； （2）新建一個基于此基礎(chǔ)模板的網(wǎng)頁，并保存該網(wǎng)頁為模板（即嵌套模板）； （3）在嵌套模板中，在基礎(chǔ)模板的可編輯區(qū)域上定義新的可編輯區(qū)域。20嵌套模板繼承基礎(chǔ)模板的屬性，若改變基礎(chǔ)模板，嵌套模板也會自動更新，所有基于基礎(chǔ)模板和嵌套模板的網(wǎng)頁都會改變。根據(jù)嵌套模板創(chuàng)建的網(wǎng)頁可在基礎(chǔ)模板和嵌套模板的所有可編輯區(qū)域中輸入內(nèi)容。3使標(biāo)簽屬性可編輯在模板中可改變標(biāo)簽的部分屬性，方法是：在模板中先選擇標(biāo)簽，再打開【修改】【模板】【令屬性可編輯】菜單，在彈出的對話框中設(shè)置；在根據(jù)模板創(chuàng)建的網(wǎng)頁中，打開【修改】【模板屬性】菜單，在彈出的對話框中對屬性進(jìn)行編輯。 21六、演示、點(diǎn)評與總結(jié)1演示與點(diǎn)評（下次課前進(jìn)行）2歸納總結(jié)本章通過教學(xué)管理欄各個網(wǎng)頁所使用模板的制作講述了模板的創(chuàng)建和使用方法。重點(diǎn)講解了可編輯區(qū)域和可選區(qū)域的創(chuàng)建以及如何根據(jù)模板創(chuàng)建網(wǎng)頁。模板創(chuàng)建后還可隨時根據(jù)需要修改，修改后自動更新相關(guān)的頁面。通過模板