(教學(xué)課件)chapter10利用模板與庫制作系列網(wǎng)頁

1、第10章利用模板與庫制作系列網(wǎng)頁制作“方案”欄目系列頁面深圳職業(yè)技術(shù)學(xué)院 計算機(jī)基礎(chǔ)教學(xué)部學(xué)習(xí)目標(biāo)了解庫及其在網(wǎng)頁制作中的作用掌握創(chuàng)建和應(yīng)用庫項(xiàng)目的方法掌握利用庫項(xiàng)目成批更新網(wǎng)頁的方法了解模板及其在網(wǎng)頁制作中的作用掌握創(chuàng)建和應(yīng)用模板的方法掌握利用模板創(chuàng)建系列頁面的方法深刻體會庫和模板對網(wǎng)頁制作效率的影響網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）2深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室實(shí)訓(xùn)項(xiàng)目深圳慧衡科技有限公司需要為二級頁面“方案”欄目制作系列子頁面，內(nèi)容是各類網(wǎng)站建設(shè)和網(wǎng)絡(luò)營銷的解決方案。網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）3深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室項(xiàng)目分析設(shè)計思路：（1）頁面元素：深圳慧衡科技有限公司

2、需要為二級頁面“方案”欄目制作系列子頁面，內(nèi)容是各類網(wǎng)站建設(shè)和網(wǎng)絡(luò)營銷的解決方案。（2）版面布局：對于“方案”欄目系列頁面來說，為保持整體風(fēng)格的一致性，均采取常用的“匡”字形結(jié)構(gòu)，頂部區(qū)域用于裝載網(wǎng)站的banner和導(dǎo)航條；左側(cè)區(qū)域用于裝載主要欄目列表；占據(jù)頁面最大空間的右側(cè)區(qū)域，用于裝載主體內(nèi)容（方案），底部區(qū)域裝載頁腳信息。（3）配色方案：色彩搭配和公司網(wǎng)站主頁保持一致，采用藍(lán)色主題。網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）4深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室預(yù)備知識1庫和庫項(xiàng)目及其作用庫就是用來存放和管理公共元素的一種技術(shù)。

3、被添加到庫中的網(wǎng)頁元素稱為庫項(xiàng)目，庫項(xiàng)目由單個網(wǎng)頁元素或多個網(wǎng)頁元素組成。2模板及其作用模板（Template）相當(dāng)于模子，利用模子制作出來的網(wǎng)頁，在外觀、風(fēng)格上是一致的。網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）6深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室制作流程任務(wù)1：利用庫項(xiàng)目創(chuàng)建網(wǎng)頁任務(wù)3：利用模板創(chuàng)建系列頁面任務(wù)4：利用模板更新系列網(wǎng)頁任務(wù)2：利用庫項(xiàng)目成批更新網(wǎng)頁網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）7深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室任務(wù)1 利用庫項(xiàng)目創(chuàng)建網(wǎng)頁1創(chuàng)建庫項(xiàng)目2應(yīng)用庫項(xiàng)目網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）8深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室STEP1：創(chuàng)建庫項(xiàng)目深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)

4、計與制作實(shí)用教程（第3版）9將主頁中的banner創(chuàng)建為“banner.lbi”庫項(xiàng)目。將主頁中的導(dǎo)航條創(chuàng)建為“nav.lib”庫項(xiàng)目。將主頁底部的頁腳區(qū)域創(chuàng)建為“footer.lib”庫項(xiàng)目。STEP2：應(yīng)用庫項(xiàng)目網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）10深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室將“banner.lbi”、“nav.lb”及“footer.lbi”庫項(xiàng)目分別應(yīng)用到方案欄目“scheme.html”頁面中。將“banner.lbi”、“nav.lbi”及“footer.lbi”庫項(xiàng)目分別應(yīng)用到“外貿(mào)網(wǎng)站建設(shè)和海外市場營銷推廣”方案“scheme01.html”頁面中。任務(wù)2 利用庫項(xiàng)目成批更

5、新網(wǎng)頁1編輯庫項(xiàng)目和更新網(wǎng)頁2管理庫項(xiàng)目網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）11深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室STEP1：編輯庫項(xiàng)目和更新網(wǎng)頁網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）12深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室修改“nav.lbi”庫項(xiàng)目中的版權(quán)信息。STEP2：管理庫項(xiàng)目網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）13深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室對庫項(xiàng)目重新命名。刪除庫項(xiàng)目。重新創(chuàng)建庫項(xiàng)目。解除庫項(xiàng)目內(nèi)容與原始庫項(xiàng)目之間的關(guān)聯(lián)。任務(wù)3 利用模板創(chuàng)建系列頁面1創(chuàng)建模板2定義可編輯區(qū)域3創(chuàng)建基于模板的新頁面網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）14深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室STEP深圳職業(yè)技術(shù)學(xué)院計算機(jī)基

6、礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）151創(chuàng)建模板將設(shè)計好的“scheme01.html”網(wǎng)頁另存為“scheme.dwt”模板。2定義可編輯區(qū)域?qū)ⅰ皊cheme.dwt”方案模板中的頁面右側(cè)的內(nèi)容區(qū)域定義為可編輯區(qū)域。3創(chuàng)建基于模板的新頁面基于模板創(chuàng)建如下頁面： scheme02.html、 scheme03.html和scheme04.html。任務(wù)4 利用模板更新系列網(wǎng)頁1修改模板和更新網(wǎng)頁2將模板應(yīng)用到已經(jīng)存在的網(wǎng)頁文件3管理模板網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）16深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室STEP深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）171修改模板

7、和更新網(wǎng)頁修改“scheme.dwt”模板的內(nèi)容并更新基于該模板的系列網(wǎng)頁文件。2將模板應(yīng)用到已經(jīng)存在的網(wǎng)頁文件將“scheme.dwt”模板應(yīng)用到“scheme01.html”網(wǎng)頁中。3管理模板將“scheme04.html”網(wǎng)頁與“scheme.dwt”模板分離開。項(xiàng)目總結(jié)利用模板與庫設(shè)計與制作網(wǎng)頁利用庫項(xiàng)目創(chuàng)建網(wǎng)頁創(chuàng)建庫項(xiàng)目應(yīng)用庫項(xiàng)目利用庫項(xiàng)目成批更新網(wǎng)頁編輯庫項(xiàng)目和更新網(wǎng)頁管理庫項(xiàng)目利用模板創(chuàng)建系列頁面創(chuàng)建模板定義可編輯區(qū)域創(chuàng)建基于模板的新頁面利用模板更新系列網(wǎng)頁修改模板和更新網(wǎng)頁將模板應(yīng)用到網(wǎng)頁文件管理模板網(wǎng)頁設(shè)計與制作實(shí)用教程（第3版）18深圳職業(yè)技術(shù)學(xué)院計算機(jī)基礎(chǔ)教研室課后練習(xí)配套實(shí)訓(xùn)利用配套實(shí)訓(xùn)文件夾下提供的素材文件，根據(jù)所學(xué)的表模板與庫，自主完善游戲人物介紹網(wǎng)站，要求如下：利用模板制作系列網(wǎng)頁，分別用于介紹人物Sweet、Cesar、Big Smoke和Tenpenny。通過修改“temp.dwt”模板文件的頁面底部鏈接（為“首頁 | 12345 | 尾頁”分別設(shè)置鏈接，鏈接到相應(yīng)的網(wǎng)頁），自動并更新基于模板制作的系列網(wǎng)頁。盡量將系列網(wǎng)頁的共同頁面元素創(chuàng)建為庫項(xiàng)目，并通過修改庫項(xiàng)