網(wǎng)制作項(xiàng)目11-使用模板和庫(kù)制作學(xué)校主-市公開課一等獎(jiǎng)省賽課微課金獎(jiǎng)?wù)n件

主講：網(wǎng)頁(yè)設(shè)計(jì)與制作——Dreamweaver81/24項(xiàng)目十一 使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一創(chuàng)建庫(kù)──制作頁(yè)眉和頁(yè)腳任務(wù)二創(chuàng)建模板━━制作學(xué)校主頁(yè)項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作Dreamweaver8任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)2/24任務(wù)一創(chuàng)建庫(kù)──制作頁(yè)眉和頁(yè)腳

在Dreamweaver中，庫(kù)是一個(gè)特殊Dreamweaver文件，用來(lái)存放諸如文本、圖像等網(wǎng)頁(yè)元素，這些元素通常被廣泛用于整個(gè)站點(diǎn)，而且經(jīng)常被重復(fù)使用或更新。將網(wǎng)頁(yè)制作中經(jīng)常使用到廣告條、頁(yè)眉、頁(yè)腳及菜單等制作成庫(kù)是最適當(dāng)。在網(wǎng)頁(yè)中應(yīng)用庫(kù)，不但能夠提升效率，也會(huì)給網(wǎng)站維護(hù)帶來(lái)便利。本任務(wù)將經(jīng)過(guò)創(chuàng)建庫(kù)來(lái)制作學(xué)校主頁(yè)頁(yè)眉和頁(yè)腳，要求讀者掌握在Dreamweaver中創(chuàng)建和編輯庫(kù)方法以及【資源】面板使用方法。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)3/24操作一創(chuàng)建庫(kù)文件經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：1、【資源】面板使用

【資源】面板將網(wǎng)頁(yè)元素分為9類，面板左邊垂直并排著【圖像】、【顏色】、【URLs】、【Flash】、【Shockwave】、【影片】、【腳本】、【模板】和【庫(kù)】9個(gè)按鈕，每一個(gè)按鈕代表一大類網(wǎng)頁(yè)元素。面板右邊是列表區(qū)，分為上欄和下欄，上欄是元素預(yù)覽圖，下欄是明細(xì)列表。

Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)創(chuàng)建庫(kù)文件操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)4/24

2、在【資源】面板中創(chuàng)建庫(kù)文件方法在主菜單中選擇【窗口】/【資源】命令打開【資源】面板，單擊【庫(kù)】按鈕切換至【庫(kù)】分類，并單擊右下角【新建庫(kù)項(xiàng)目】按鈕新建一個(gè)庫(kù)文件，在列表框中輸入庫(kù)名稱并加以確認(rèn)即可。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作一創(chuàng)建庫(kù)文件項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)5/24

經(jīng)過(guò)選擇【文件】/【新建】命令打開【新建文件】對(duì)話框，然后選擇【常規(guī)】/【基本頁(yè)】/【庫(kù)項(xiàng)目】選項(xiàng)也可創(chuàng)建庫(kù)文件。從已經(jīng)有網(wǎng)頁(yè)中也能夠創(chuàng)建庫(kù)文件，方法是：首先打開一個(gè)已經(jīng)有文檔，從中選擇要保留為庫(kù)文件對(duì)象，然后在主菜單中選擇【修改】/【庫(kù)】/【增加對(duì)象到庫(kù)】命令，該對(duì)象即被添加到庫(kù)文件列表中，庫(kù)文件名為系統(tǒng)默認(rèn)名稱，修更名稱后按Enter鍵確認(rèn)即可。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作一創(chuàng)建庫(kù)文件項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)6/24操作一創(chuàng)建庫(kù)文件Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)

3、應(yīng)該注意問(wèn)題創(chuàng)建庫(kù)文件保留在網(wǎng)站依據(jù)目錄下“Library”文件夾內(nèi)，“Library”是自動(dòng)產(chǎn)生，不能對(duì)它隨意修改，不然庫(kù)將不能正常使用。任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)7/24

1、頁(yè)眉特點(diǎn)學(xué)校主頁(yè)頁(yè)眉通常包含學(xué)校標(biāo)志與名稱、廣告條以及導(dǎo)航欄等內(nèi)容，其中導(dǎo)航欄表現(xiàn)形式各種多樣，如文本格式、圖片格式、Flash格式等。

2、在【資源】面板中打開庫(kù)文件方法在【資源】面板中雙擊庫(kù)文件或者先選中庫(kù)文件再單擊【資源】面板右下角【編輯】按鈕即可打開庫(kù)文件。

3、在【資源】面板中編輯庫(kù)內(nèi)容方法在庫(kù)中編輯網(wǎng)頁(yè)元素和平時(shí)制作網(wǎng)頁(yè)沒有本質(zhì)區(qū)分。另外，在庫(kù)中使用CSS樣式時(shí)，注意不要?jiǎng)?chuàng)建“標(biāo)簽”類型CSS樣式，以免破壞被插入文檔文檔屬性。操作二制作頁(yè)眉Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：制作頁(yè)眉操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)8/241、頁(yè)腳特點(diǎn)頁(yè)腳通常包含版權(quán)信息及聯(lián)絡(luò)方式等內(nèi)容。

2、應(yīng)該注意問(wèn)題庫(kù)項(xiàng)目是能夠在多個(gè)頁(yè)面中重復(fù)使用頁(yè)面元素。在使用庫(kù)項(xiàng)目時(shí)，Dreamweaver不是向網(wǎng)頁(yè)中插入庫(kù)項(xiàng)目，而是向庫(kù)項(xiàng)目中插入一個(gè)鏈接。每當(dāng)更改某個(gè)庫(kù)項(xiàng)目標(biāo)內(nèi)容時(shí)，都能夠更新全部使用該項(xiàng)目標(biāo)頁(yè)面。操作三制作頁(yè)腳Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：制作頁(yè)腳操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)9/24

模板是制作含有相同版式和格調(diào)網(wǎng)頁(yè)文檔基礎(chǔ)文檔。在進(jìn)行大量網(wǎng)頁(yè)制作時(shí)，很多網(wǎng)頁(yè)會(huì)用到一樣版式和格調(diào)，為了防止重復(fù)勞動(dòng)，能夠?qū)⒑邢嗤婷娼Y(jié)構(gòu)網(wǎng)頁(yè)制作成模板，然后經(jīng)過(guò)模板制作其它網(wǎng)頁(yè)。本任務(wù)將介紹制作模板以及經(jīng)過(guò)模板制作學(xué)校主頁(yè)方法，主要知識(shí)點(diǎn)包含在模板中引用庫(kù)方法以及在模板中插入可編輯區(qū)域、重復(fù)區(qū)域、重復(fù)表格方法。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)二創(chuàng)建模板━━制作學(xué)校主頁(yè)項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)10/24操作一創(chuàng)建主頁(yè)模板文件Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：1、創(chuàng)建模板文件方法在主菜單中選擇【窗口】/【資源】命令，打開【資源】面板并切換至【模板】分類,然后單擊面板右下角【新建模板】按鈕新建一個(gè)默認(rèn)名稱為“Untitled”模板,并輸入模板新名稱替換原來(lái)名稱“Untitled”。雙擊模板文件或者先選中模板文件再單擊面板右下角【編輯】按鈕可打開模板文件進(jìn)行內(nèi)容編輯。也能夠經(jīng)過(guò)主菜單中【文件】/【新建】命令打開【新建文件】對(duì)話框，然后選擇【常規(guī)】/【基本頁(yè)】/【HTML模板】選項(xiàng)來(lái)創(chuàng)建模板文件。

2、應(yīng)該注意問(wèn)題創(chuàng)建模板文件保留在網(wǎng)站依據(jù)目錄下“Templates”文件夾內(nèi)，“Templates”是自動(dòng)產(chǎn)生，不能對(duì)其進(jìn)行隨意修改，不然模板將不能正常使用。創(chuàng)建主頁(yè)模板文件操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)11/24操作二插入庫(kù)項(xiàng)目頁(yè)眉和頁(yè)腳Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作1、在【資源】面板中把庫(kù)項(xiàng)目插入到模板方法將光標(biāo)置于模板文檔中，然后在【資源】面板中切換至庫(kù)分類，并在列表框中選中庫(kù)文件，單擊【資源】面板底部【插入】按鈕，將庫(kù)項(xiàng)目插入到模板頂部。在選中庫(kù)文件后，也能夠單擊鼠標(biāo)右鍵，在彈出快捷菜單中選擇【插入】命令把庫(kù)項(xiàng)目插入到當(dāng)前文檔中。

2、應(yīng)該注意問(wèn)題插入到模板中庫(kù)項(xiàng)目不能直接修改，假如要修改,必須直接打開庫(kù)項(xiàng)目進(jìn)行修改，此時(shí)插入到模板中庫(kù)項(xiàng)目將進(jìn)行更新。經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)插入庫(kù)項(xiàng)目頁(yè)眉和頁(yè)腳操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)12/24Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象1、重復(fù)區(qū)域及其插入方法

重復(fù)區(qū)域是指能夠在模板中復(fù)制任意次數(shù)指定區(qū)域。重復(fù)區(qū)域不是可編輯區(qū)域，若要使重復(fù)區(qū)域中內(nèi)容可編輯，必須在重復(fù)區(qū)域內(nèi)插入可編輯區(qū)域或重復(fù)表格。重復(fù)區(qū)域能夠包含整個(gè)表格或單獨(dú)表格單元格。在一個(gè)重復(fù)區(qū)域內(nèi)能夠繼續(xù)插入另一個(gè)重復(fù)區(qū)域。整個(gè)被定義為重復(fù)區(qū)域部分都能夠被重復(fù)使用。經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)插入模板對(duì)象操作動(dòng)畫任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)13/24Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象

插入重復(fù)區(qū)域方法：在主菜單中選擇【插入】／【模板對(duì)象】／【重復(fù)區(qū)域】命令，打開【新建重復(fù)區(qū)域】對(duì)話框，在【名稱】文本框中輸入名稱。單擊【確定】按鈕，插入對(duì)應(yīng)名稱重復(fù)區(qū)域。也能夠單擊【插入】／【慣用】／【模板】面板中【重復(fù)區(qū)域】按鈕打開【新建重復(fù)區(qū)域】對(duì)話框，將當(dāng)前選定區(qū)域設(shè)置為重復(fù)區(qū)域。

項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)14/24Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)

2、可編輯區(qū)域及其插入方法可編輯區(qū)域是指以模板為基準(zhǔn)創(chuàng)建文檔區(qū)域，在該區(qū)域中能夠進(jìn)行添加、修改和刪除網(wǎng)頁(yè)元素等操作。可編輯區(qū)域在模板中由高亮顯示矩形邊框圍繞，該邊框使用在首選參數(shù)中設(shè)置高亮顏色。該區(qū)域左上角選項(xiàng)卡顯示該區(qū)域名稱。另外需要注意是，在一個(gè)可編輯區(qū)域內(nèi)不能再插入另一個(gè)可編輯區(qū)域。

任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)15/24Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)

插入可編輯區(qū)域方法：在主菜單中選擇【插入】／【模板對(duì)象】／【可編輯區(qū)域】命令，打開【新建可編輯區(qū)域】對(duì)話框，在【名稱】文本框中輸入名稱，然后單擊【確定】按鈕插入可編輯區(qū)域。也可單擊【插入】／【慣用】／【模板】面板中【可編輯區(qū)域】按鈕，打開【新建可編輯區(qū)域】對(duì)話框，插入或者將當(dāng)前選定區(qū)域設(shè)置為可編輯區(qū)域。任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)16/243、重復(fù)表格及其插入方法能夠使用重復(fù)表格創(chuàng)建包含重復(fù)行表格格式可編輯區(qū)域，能夠定義表格屬性并設(shè)置哪些表格單元格可編輯。假如在對(duì)話框中不設(shè)置單元格邊距、單元格間距和邊框值，則大多數(shù)瀏覽器按單元格邊距為“1”、單元格間距為“2”、邊框?yàn)椤?”顯示表格。對(duì)話框上半部分與普通表格參數(shù)沒有什么不一樣，主要是下半部分參數(shù)。【重復(fù)表格行】指定表格中哪些行包含在重復(fù)區(qū)域中，【起始行】將輸入行號(hào)設(shè)置為包含在重復(fù)區(qū)域中第1行，【結(jié)束行】將輸入行號(hào)設(shè)置為包含在重復(fù)區(qū)域中最終1行，【區(qū)域名稱】為重復(fù)區(qū)域設(shè)置惟一名稱。重復(fù)表格能夠被包含在重復(fù)區(qū)域內(nèi)，但不能被包含在可編輯區(qū)域內(nèi)。另外，不能將選定區(qū)域變成重復(fù)表格，只能插入重復(fù)表格。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)17/24

插入重復(fù)表格方法：在主菜單中選擇【插入】／【模板對(duì)象】／【重復(fù)表格】命令，打開【插入重復(fù)表格】對(duì)話框，進(jìn)行設(shè)置后加以確認(rèn)即可。也可單擊【插入】／【慣用】/【模板】面板中【重復(fù)表格】按鈕，打開【插入重復(fù)表格】對(duì)話框，在當(dāng)前區(qū)域插入重復(fù)表格。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)18/244、選擇模板對(duì)象方法：選擇模板對(duì)象方法，一個(gè)是單擊要選擇模板對(duì)象名稱，另一個(gè)是把光標(biāo)定位在模板對(duì)象處，然后在工作區(qū)下面選擇對(duì)應(yīng)標(biāo)簽。在選擇模板對(duì)象時(shí)會(huì)顯示其【屬性】面板，在【屬性】面板中可修改模板對(duì)象名稱。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作三插入模板對(duì)象項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)19/24

經(jīng)過(guò)模板創(chuàng)建網(wǎng)頁(yè)文檔：在主菜單中選擇【文件】／【新建】命令，打開【新建文檔】對(duì)話框，切換至【模板】選項(xiàng)卡，然后選擇已經(jīng)創(chuàng)建主頁(yè)模板“class_1.dwt”，單擊【創(chuàng)建】按鈕，打開基于模板文檔窗口。假如在【從模板新建】對(duì)話框中沒有對(duì)【當(dāng)模板改變時(shí)更新頁(yè)面】復(fù)選框打上“√”標(biāo)志，那么模板改變了，由模板生成網(wǎng)頁(yè)就不會(huì)改變。在這種情況下怎樣才能讓由模板生成頁(yè)面也發(fā)生改變呢？能夠在主菜單中選擇【修改】/【模板】/【更新頁(yè)面】命令，打開【更新頁(yè)面】對(duì)話框，在對(duì)話框中設(shè)置對(duì)應(yīng)參數(shù)后，單擊【開始】按鈕，Dreamweaver將對(duì)選定范圍中由模板生成網(wǎng)頁(yè)進(jìn)行更新。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作四經(jīng)過(guò)模板制作學(xué)校主頁(yè)項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)經(jīng)過(guò)本操作學(xué)習(xí)，應(yīng)該掌握內(nèi)容有：任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)20/24

在文檔中可編輯區(qū)域內(nèi)，能夠插入文本、圖像、音頻、視頻、表單、表格等網(wǎng)頁(yè)元素，并可進(jìn)行格式設(shè)置，這與直接創(chuàng)建空白網(wǎng)頁(yè)文檔中操作沒有區(qū)分。另外，在模板中能夠引用庫(kù)，在網(wǎng)頁(yè)文檔中也能夠引用庫(kù)。單擊“+”按鈕，能夠添加一個(gè)重復(fù)欄目。假如要?jiǎng)h除已經(jīng)添加重復(fù)欄目，能夠先選擇該欄目，然后單擊“-”按鈕。應(yīng)用了模板網(wǎng)頁(yè)文檔除了可編輯區(qū)域之外，其它部分無(wú)法進(jìn)行編輯。不過(guò)假如把網(wǎng)頁(yè)文檔和模板分離，那么應(yīng)用了模板網(wǎng)頁(yè)文檔就會(huì)轉(zhuǎn)化為普通網(wǎng)頁(yè)文檔，這時(shí)就可在全部區(qū)域內(nèi)進(jìn)行隨意編輯。分離模板和網(wǎng)頁(yè)文檔命令是【修改】/【模板】/【從模板中分離】。Dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)與制作操作四經(jīng)過(guò)模板制作學(xué)校主頁(yè)項(xiàng)目十一：

使用模板和庫(kù)制作學(xué)校主頁(yè)任務(wù)一小結(jié)任務(wù)二實(shí)訓(xùn)21/24

在主頁(yè)模板中，因?yàn)轫?yè)眉和頁(yè)腳都是庫(kù)，無(wú)法直接修改，假如要添加或修改相關(guān)內(nèi)容，需要直接打開庫(kù)文件進(jìn)行修改。在庫(kù)文件被修改后，通常引用該庫(kù)網(wǎng)頁(yè)文件會(huì)自動(dòng)進(jìn)行更新，假如沒有進(jìn)行更新，能夠在主菜單中選擇【修改】/【庫(kù)】/【更新頁(yè)面】命令進(jìn)行更新。還有兩種經(jīng)過(guò)模板創(chuàng)建文檔方法：（1）在【資源】面板中從現(xiàn)有模板創(chuàng)建文檔。首先在【資源】面板中切換到模板分類，查看當(dāng)前站點(diǎn)中模板列表，用鼠標(biāo)右鍵單擊要應(yīng)用模板，在彈出快捷菜單中選擇【從模板新建】命令，基于模板新文檔即會(huì)在文檔窗口中打開。（2）將當(dāng)前文檔應(yīng)用模板。首先打開要應(yīng)用模板文檔，然后在【資源】面板模板列表框中選中要應(yīng)用