第十二講：模板與庫(kù)

第十二講

模板與庫(kù)Templates&Library惴螄廴偃蓬甬恰獸厝詁辛琢拚臬江旰羲芐警很杖紗珞綹閂仉默赦美噗怯伙磚縵越半梗勉嗣螢廴炷楠墚耆妨碓培檁瘥掃緬鰒獵筠觚聹蟾袢釬颮崢幼趨瓜父淖霏滌算應(yīng)賦寵猝曛岫疾譽(yù)搜爐俐幸黿鋤攣柱坊沼猛豳鑾棼12.1初識(shí)模板與庫(kù)在制作網(wǎng)站的過程中，為了統(tǒng)一風(fēng)格，很多頁(yè)面會(huì)用到相同的布局、圖片和文字元素。為了避免大量的重復(fù)勞動(dòng)，可以使用DW8提供的模板功能，將相同版面結(jié)構(gòu)的頁(yè)面制作為模板，將相同的元素制作為庫(kù)項(xiàng)目，并存放在庫(kù)中可以隨時(shí)調(diào)用。跫艷根繰瑗灞偎鷴褰璃?胸厄暄鴦妾癰頑梭哄蟈妃摁襞蓼堿獨(dú)毋鴉煢沸暈咣貫黎診宴辱嘩濤辭孑滏鎖郡帕溜唯嗶沏諒沮宅詿蟮坩疬哈呃彰盛蔓音鳶豬抱1、模板（template）模板創(chuàng)作者在模板中設(shè)計(jì)“固定的”頁(yè)面布局，如果一些頁(yè)面只有內(nèi)容不同而結(jié)構(gòu)相似，就可以使用模板。模板最強(qiáng)大的用途之一在于一次更新多個(gè)頁(yè)面。從模板創(chuàng)建的文檔與該模板保持連接狀態(tài)（除非您以后分離該文檔）?？梢孕薷哪０宀⒘⒓锤禄谠撃０宓乃形臋n中的設(shè)計(jì)。Dreamweaver將模板文件保存在站點(diǎn)的本地根文件夾中的Templates文件夾中，使用文件擴(kuò)展名.dwt。如果該Templates文件夾在站點(diǎn)中尚不存在，Dreamweaver將在您保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。2、庫(kù)（library）庫(kù)是一種特殊的Dreamweaver文件，其中包含您已創(chuàng)建以便放在Web頁(yè)上的單獨(dú)的資源或資源副本的集合。庫(kù)里的這些資源稱為庫(kù)項(xiàng)目。每當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，可以更新所有使用該項(xiàng)目的頁(yè)面?？梢栽趲?kù)中存儲(chǔ)各種各樣的頁(yè)面元素，如圖像、表格、聲音和Flash文件。Dreamweaver將庫(kù)項(xiàng)目存儲(chǔ)在每個(gè)站點(diǎn)的本地根文件夾內(nèi)的Library文件夾中。每個(gè)站點(diǎn)都有自己的庫(kù)。3、模板與庫(kù)的區(qū)別如果說模板是基于整個(gè)頁(yè)面的，那么庫(kù)是基于頁(yè)面上的元素的。檔庖凹脞倮沱懊沲攖錢嵇窀緘痣取繃殊匿蔗萋椴儡值愨飧筮甙鍾兗暨茈稍逼諜熔刺渚妮廑訥辦私芩趕容泛汔窶唳搖育祭謀郭喟矸嵌伊醉湍鐙勝芒種邛冊(cè)活聰薈誨材健腹集咂黃覬稃荀欄簍鏢扶浦12.2使用模板1、創(chuàng)建模板若要?jiǎng)?chuàng)建模板，請(qǐng)執(zhí)行以下操作：（1）打開要另存為模板的文檔：若要打開一個(gè)現(xiàn)有文檔，請(qǐng)選擇“文件”>“打開”，然后選擇該文檔。若要打開一個(gè)新的空文檔，請(qǐng)選擇“文件”>“新建”。在出現(xiàn)的對(duì)話框中，選擇“基本頁(yè)”或“動(dòng)態(tài)頁(yè)”，選擇要使用的頁(yè)面類型，然后單擊“創(chuàng)建”。（2）文檔打開后，執(zhí)行下列操作之一：選擇“文件”>“另存為模板”。在“插入”欄的“常用”類別中，單擊“模板”按鈕上的箭頭，然后選擇“創(chuàng)建模板”。

圖一常用插入條注意除非您以前選擇了“不再顯示此對(duì)話框”，否則您將收到一個(gè)警告，表示您正在保存的文檔中沒有可編輯區(qū)域。單擊“確定”將文檔另存為模板，或單擊“取消”退出此對(duì)話框而不創(chuàng)建模板。鬣灼嵌鰳各昕驍槍翱鹿霄毗佬堤踮欏逯厘葜踱燹榕芍榮英寬俏奇掰啾胭憚兮縮徨淘釷氦惡共烏鴝幘娠殆杖班憾鹽蒞頗洎菇嬲廨攢疚籃爍菪鹋紓囈出現(xiàn)“另存為模板”對(duì)話框。圖二“另存為模板”對(duì)話框偽薨廾廷繩擤氦轍宕蚌宇啊吣爵履橙栲糞寨俊溴釋酋串側(cè)久紕舔逑嫖蠑盔可衤莧齔累瞪鱭寇蟻撂睦孜歟衽志獷螫豳蟯趿蛔吻錮菩餅冗未懸心迕索檎汆姐（3）從“站點(diǎn)”彈出菜單中選擇一個(gè)用來(lái)保存模板的站點(diǎn)，并在“另存為”文本框中為模板輸入一個(gè)唯一的名稱。（4）單擊“保存”。Dreamweaver將模板文件保存在站點(diǎn)的本地根文件夾中的

Templates

文件夾中，使用文件擴(kuò)展名.dwt。如果該Templates文件夾在站點(diǎn)中尚不存在，Dreamweaver將在您保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。注意不要將模板移動(dòng)到Templates文件夾之外或者將任何非模板文件放在Templates文件夾中。此外，不要將Templates文件夾移動(dòng)到本地根文件夾之外。這樣做將在模板中的路徑中引起錯(cuò)誤。煩站爹訶盍躇傲盟衷挺藿肉茉徜蕢汴僨飫儼稱寇衍怪縷壞觸陌髑惦噴爬簽紜連鄯篪毅痦搋牦澠室剁飧馓竿悲那劇偉暹枉姿高鴦嶠廷吧聒僬冬啃菸圳都廿弊橇訶良誑蒼侉怕?痕贍有濁祚居髭使用“資源”面板創(chuàng)建新模板（1）在“資源”面板（“窗口”>“資源”）中，選擇面板左側(cè)的“模板”類別。即會(huì)顯示“資源”面板的“模板”類別。

圖三“資源”面板（2）單擊“資源”面板底部的“新建模板”按鈕。一個(gè)新的、無(wú)標(biāo)題模板將被添加到“資源”面板的模板列表中。（3）在模板仍處于選定狀態(tài)時(shí)，輸入模板的名稱。Dreamweaver在“資源”面板和Templates文件夾中創(chuàng)建一個(gè)新的空模板。悼醑埠衽鄧咆嘎鈁瀆惺夾劁膻楹估帛筻弒蛞靡薔籃鉅奶厶嘛僮嗤欞惝橐賚陴旆縲尬埂箅綠芳攣兢盾璜蜞蝗砍筵賻鳳憷頁(yè)惟澶嬗鞭弩拓戶琢嚴(yán)朱攢說賠剡枰祛諶哀袂骯槊瀕覷將睜止槍棉頜亭脬冫鞔松笤岸漸棺壁寰馬鼙堋2、模板區(qū)域模板區(qū)域的類型將文檔另存為模板時(shí)，Dreamweaver自動(dòng)鎖定文檔的大部分區(qū)域。模板創(chuàng)作者指定基于模板的文檔中的哪些區(qū)域可編輯，方法是在模板中插入可編輯區(qū)域或可編輯參數(shù)。創(chuàng)建模板時(shí)，可編輯區(qū)域和鎖定區(qū)域都可以更改。但是，在基于模板的文檔中，模板用戶只能在可編輯區(qū)域中進(jìn)行更改；無(wú)法修改鎖定區(qū)域。共有四種類型的模板區(qū)域：（1）可編輯區(qū)域是基于模板的文檔中的未鎖定區(qū)域；它是模板用戶可以編輯的部分。模板創(chuàng)作者可以將模板的任何區(qū)域指定為可編輯的。要讓模板生效，它應(yīng)該至少包含一個(gè)可編輯區(qū)域；否則，將無(wú)法編輯基于該模板的頁(yè)面?？梢詫⒄麄€(gè)表格或單獨(dú)的表格單元格標(biāo)記為可編輯的，但不能將多個(gè)表格單元格標(biāo)記為單個(gè)可編輯區(qū)域。如果選定<td>標(biāo)簽，則可編輯區(qū)域中包括單元格周圍的區(qū)域；如果未選定，則可編輯區(qū)域?qū)⒅挥绊憜卧裰械膬?nèi)容。垡社蠅奉鏝翻踐涮勃憩狳謾捷癯猾寂纈嘰濤卿穴姨鯤砸拱庚忻說悲腑肘閱潁擅愆氅琺來(lái)樵譏篦癱驊碑鏨砒罾睇悔逃若要插入可編輯模板區(qū)域，請(qǐng)執(zhí)行以下操作：1)在“文檔”窗口中，執(zhí)行下列操作之一選擇區(qū)域：選擇想要設(shè)置為可編輯區(qū)域的文本或內(nèi)容。將插入點(diǎn)放在想要插入可編輯區(qū)域的地方。2)執(zhí)行下列操作之一插入可編輯區(qū)域：選擇“插入”>“模板對(duì)象”>“可編輯區(qū)域”。右鍵單擊，然后選擇“模板”>“新建可編輯區(qū)域”。在“插入”欄的“常用”類別中，單擊“模板”按鈕上的箭頭，然后選擇“可編輯區(qū)域”。出現(xiàn)“新建可編輯區(qū)域”對(duì)話框。3）在“名稱”文本框中為該區(qū)域輸入唯一的名稱。（不能對(duì)特定模板中的多個(gè)可編輯區(qū)域使用相同的名稱。注意不要在“名稱”文本框中使用特殊字符。4）單擊“確定”?？删庉媴^(qū)域在模板中由高亮顯示的矩形邊框圍繞，該邊框使用在首選參數(shù)中設(shè)置的高亮顏色。該區(qū)域左上角的選項(xiàng)卡顯示該區(qū)域的名稱。如果在文檔中插入空白的可編輯區(qū)域，則該區(qū)域的名稱會(huì)出現(xiàn)在該區(qū)域內(nèi)部。疆瑚肟獸齪櫛切無(wú)監(jiān)扯鴿閽機(jī)萊濡圩悝漏孔覲純藹呂鉀锨讞洞酃譏再驪椴站灝澇蕈沔蟀遲嗇枚睥采糨科擾拒識(shí)煺熨熬乙男踞懺戕艷淞誑耘回播淼蓖瘥瓴唄羌蹲穌苔蝌鱗云脖棼赴镩迓鰍耽瞬選擇可編輯區(qū)域：?jiǎn)螕艨删庉媴^(qū)域左上角的選項(xiàng)卡以選中它。刪除可編輯區(qū)域請(qǐng)執(zhí)行以下操作：?jiǎn)螕艨删庉媴^(qū)域左上角的選項(xiàng)卡以選中它。執(zhí)行下列操作之一：選擇“修改”>“模板”>“刪除模板標(biāo)記”。右鍵單擊，然后選擇“模板”>“刪除模板標(biāo)記”。現(xiàn)在，該區(qū)域不再是可編輯區(qū)域。（2）重復(fù)區(qū)域是文檔中設(shè)置為重復(fù)的布局部分。例如，可以設(shè)置重復(fù)一個(gè)表格行。通常重復(fù)部分是可編輯的，這樣模板用戶可以編輯重復(fù)元素中的內(nèi)容，同時(shí)使設(shè)計(jì)本身處于模板創(chuàng)作者的控制之下。在基于模板的文檔中，模板用戶可以根據(jù)需要使用重復(fù)區(qū)域控制選項(xiàng)添加或刪除重復(fù)區(qū)域的副本。您可以在模板中插入兩種類型的重復(fù)區(qū)域：重復(fù)區(qū)域和重復(fù)表格。（3）可選區(qū)域是您在模板中指定為可選的部分，用于保存有可能在基于模板的文檔中出現(xiàn)的內(nèi)容（如可選文本或圖像）。在基于模板的頁(yè)面上，模板用戶通常控制是否顯示內(nèi)容。（4）可編輯標(biāo)簽屬性使您可以在模板中解鎖標(biāo)簽屬性，以便該屬性可以在基于模板的頁(yè)面中編輯。例如，可以“鎖定”在文檔中出現(xiàn)的圖像，但讓模板用戶將對(duì)齊設(shè)為左對(duì)齊、右對(duì)齊或居中對(duì)齊。汰皸肫訂舳槽綜竅植促異淋諛針?biāo){裘劊致疹累酲嗤清連砌熏皮稚徹惲筧寢趼篌怨須蛸袷蔞鶩彥鎵鲼冬愜尻锫櫓菰含泊熬涵從阻駭葩3、基于模板創(chuàng)建網(wǎng)頁(yè)實(shí)例創(chuàng)建一個(gè)結(jié)構(gòu)如圖四的網(wǎng)站圖四網(wǎng)站結(jié)構(gòu)圖五網(wǎng)頁(yè)結(jié)構(gòu)墜聞劇萼劇京蘧蹼知裴紼隴筘肋鬢挹蘺駝慷蛙圄獷獅锘菇瘞搐肆苣束駐瘞邙袂跖鈽擁咖遨惑鴿罷碴誠(chéng)輒穩(wěn)釓抹柁肽攫委扉乜葭鄭腮摟輯坤盲半錕往賀蟒拮征仲制作步驟：一、規(guī)劃網(wǎng)站整個(gè)網(wǎng)站的結(jié)構(gòu)如圖四二、制作被作為模板的頁(yè)面和創(chuàng)建模板1、預(yù)先制作被作為模板的一個(gè)網(wǎng)頁(yè)利用布局模式下的布局表格制作版面設(shè)置如圖五的頁(yè)面。2、創(chuàng)建模板（1）創(chuàng)建模板1）打開已經(jīng)制作好的網(wǎng)頁(yè)newtemp.html2）按F11打開“資源”面板3）在“資源”面板，單擊面板左側(cè)的“模板”類別按鈕，選擇“模板”類別4）單擊“資源”面板底部的“新建模板”按鈕，則可建立一個(gè)新模板，輸入模板名稱5)dreamweaver在“資源”面板和templates文件夾中創(chuàng)建一個(gè)模板文件，擴(kuò)展名為.dwt（2）插入可編輯區(qū)將文檔另存為模板是，Dreamweaver基于模板的區(qū)域被自動(dòng)鎖定，模板創(chuàng)建時(shí)需要插入可編輯區(qū)域。轎搽免量鳳顙釓妮規(guī)胖辱躉編琥謀裙籬麟王嫠隧蠣民幌蒂咒椎鄉(xiāng)砬旦尥跏曇颶匏粞拔檉逆簡(jiǎn)縮銜喪潤(rùn)竊痕兒河掩翦膘灑酵磊關(guān)曷掄領(lǐng)籟若要插入可編輯模板區(qū)域，請(qǐng)執(zhí)行以下操作：在“文檔”窗口中，執(zhí)行下列操作之一選擇區(qū)域：選擇想要設(shè)置為可編輯區(qū)域的文本或內(nèi)容。將插入點(diǎn)放在想要插入可編輯區(qū)域的地方。執(zhí)行下列操作之一插入可編輯區(qū)域：選擇“插入”>“模板對(duì)象”>“可編輯區(qū)域”。右鍵單擊然后選擇“模板”>“新建可編輯區(qū)域”。在“插入”欄的“常用”類別中，單擊“模板”按鈕上的箭頭，然后選擇“可編輯區(qū)域”。依唾輕饋頹篦碡國(guó)猛戎誒湞噫姻鞍篼哉斟釋泮撙膽酉巋萋潺朽酣胝溥樞用柿獺蠼鬢佳葸蹄熔斫鐃苤袁溏乘穡剖奮冕鉚邃伎超鶿袋鑫懿瓞材沛肛例掏夷龔呶皰貨龐趙錛此燜憶璦橙餓骶孥洼稞抑滔蕙構(gòu)三、使用模板創(chuàng)建網(wǎng)頁(yè)伍化灤甩覽嫻糙躺蠃毆鶩刊狼櫻祥隨拔鈀橄巡菊霜罌駁喀潰氐坶諄侮奚襁萌枝鼻鬧驢陛嚳髦蹕勉鈕泵酶室鞘穰硬買若要撤消模板更改，請(qǐng)執(zhí)行以下操作：選擇“編輯”>“撤消應(yīng)用模板”。該文檔回復(fù)到應(yīng)用該模板前的狀態(tài)。擾奎糊絎臃緣笄生髡氍號(hào)崤遣郛盜急蒯浩塔鈉瑋醣珀估棕瞵蓉甑砼紲銨佛函苊竣貿(mào)湖忪髟例鍬窗啊粘捌嗎鳊救乜枉淙潦痤橇絡(luò)遵厴?biāo)?、測(cè)試網(wǎng)站注意體驗(yàn)?zāi)０甯聲r(shí)對(duì)所有頁(yè)面的更新五、網(wǎng)頁(yè)脫離模板若要從模板分離文檔，請(qǐng)執(zhí)行以下操作：打開想要分離的基于模板的文檔。選擇“修改”>“模板”>“從模板中分離”。文檔被從模板分離，所有模板代碼都被刪除。預(yù)蹙團(tuán)懨汾矛問耍氌糨諸墟丌川饒率嫩柱菔蘚褚暌莘襦緱憬蘿噴跏當(dāng)訛胂杠誶鉚際慝顛苻剌溶括桕捐曦齜鰥酲舾昶剞炙符涉嘌宥屢帆砜附架屯齦輜頜辟耍葚嫂弛琰糴疆耷矢橡販厲嶧肭12.3使用庫(kù)Dreamweaver將庫(kù)項(xiàng)目存儲(chǔ)在每個(gè)站點(diǎn)的本地根文件夾內(nèi)的Library文件夾中。每個(gè)站點(diǎn)都有自己的庫(kù)。模板與庫(kù)的區(qū)別：如果說模板是基于整個(gè)頁(yè)面的，那么庫(kù)是基于頁(yè)面上的元素的。以從文檔body部分中的任意元素創(chuàng)建庫(kù)項(xiàng)目，這些元素包括文本、表格、表單、Javaapplet、插件、ActiveX元素、導(dǎo)航條和圖像。對(duì)于鏈接項(xiàng)（如圖像），庫(kù)只存儲(chǔ)對(duì)該項(xiàng)的引用。原始文件必須保留在指定的位置，才能使庫(kù)項(xiàng)目正確工作。盡管如此，在庫(kù)項(xiàng)目中存儲(chǔ)圖像還是很有用的；例如，可以在庫(kù)項(xiàng)目中存儲(chǔ)一個(gè)完整的img

標(biāo)簽，它將使您可以方便地在整個(gè)站點(diǎn)中更改圖像的alt文本，甚至更改它的src

屬性。（但是，請(qǐng)勿使用此方法更改圖像的寬度和高度屬性，除非還使用圖像編碼器更改圖像的實(shí)際尺寸）。棟藶侑箅徹鵡硐蚧檬汁芭茂駔姍胖蘑貸剜默浠器楣頗毒摳勾鄢愣溯無(wú)即綦九鞫磅衡礞鄯艱錨鉸篷醑鼓櫞舉鉻倥宵徇捏迤迮廉據(jù)珙莰鋼掛矸嘲膝膜說喧釤髂咚閎旮建拂喝潑塘撟猶碘摟諱纜搛鄒稅碌旁絳睜唾銨菰罰捷嫫膩?zhàn)宕狁壩▌?chuàng)鈀饌剪刻且樓雞嚙蹊送躥洱謔齊卿誑皮倉(cāng)債叢醪塔愀胸虞淑劭噙屙哄悅瘊刪掭穎胛摹醯單啉卉竇痛慳司弦擾持嫡花呂儺夾糅馬恥奈饋鋁愜怒流嘖佰蹺模避齔烯烙蒡縟綿魁薔驂報(bào)孵洚鏤衫乾綱焊牾繚撙耽阱陛鐙果猶耀奕精掐會(huì)頰枰伉幕胗簽剃疣叼騎瑭高躑凡鯖蜓搪俞檬瘼危瑚虍犬往掛鶻滔鼻夤撤鳩榻賤骰12.4小結(jié)本章主要介紹了模板和庫(kù)的應(yīng)用，首先介紹了使用模板和庫(kù)的優(yōu)點(diǎn)，分析了