九、布置作業(yè)

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

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

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

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

5、學(xué)管理”欄目下的6個(gè)二級(jí)欄目名：特色專業(yè)、教研活動(dòng)、教學(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）將頁(yè)中右列當(dāng)前位置指示區(qū)中的內(nèi)容修改為“首頁(yè)教學(xué)管理這里顯示二級(jí)欄目名”，并且“教學(xué)管理”超鏈接到“./jiaoXueGuanLi/tszy.html

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

7、ML代碼為： 默認(rèn)時(shí)，在頭部head中會(huì)自動(dòng)創(chuàng)建2個(gè)可編輯區(qū)域，分別用于存放title和style等元素。這里顯示二級(jí)欄目名10（2）在頁(yè)中右列具體內(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ū)域的顯示與否。選擇頁(yè)腳div#footer，單擊【插入】面板【常

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

9、當(dāng)前內(nèi)容的放置位置，此時(shí)，可以選擇模板中的一個(gè)可編輯區(qū)域來(lái)放置當(dāng)前內(nèi)容，或者舍棄當(dāng)前內(nèi)容。 在應(yīng)用了模板的網(wǎng)頁(yè)XHTML代碼中只有可編輯區(qū)域的內(nèi)容和模板參數(shù)未灰化，可以修改，其余內(nèi)容全部灰化，即鎖定了。13（2）修改tszy.html網(wǎng)頁(yè)的標(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è)各個(gè)特色的標(biāo)題和具體介紹內(nèi)容，每個(gè)標(biāo)題和具體介紹內(nèi)容均為一段；選中這些段落；單擊【插入】

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

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

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

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

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