第十二講：模板與庫

第十二講

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

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

Templates

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

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

標簽，它將使您可以方便地在整個站點中更改圖像的alt文本，甚至更改它的src

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