Dreamweaver中嵌套模板的用法

    最近在整理日誌,用到了DW的模板功能,在使用過程中,感覺純模板不能滿足我的需求。比如我在博客日誌頂部有個 div 標籤的聲明,見下圖。

 

圖1 功能需求

 

    聲明中的“原始出處”和“引用地址”做成博客日誌文章的鏈接。如果把整個“聲明”的 div 標籤做成模板的不可編輯區域,那麼這兩處的鏈接就不能編輯了。反過來,如果把整個“聲明”的 div 標籤做成模板的可編輯區域,其它部位的文字又怕不小心編輯更改了。真是很矛盾的想法。

    看到 DW 裏面有“嵌套模板”命令,是不是可以模板嵌套模板,把“聲明”標籤做成不可編輯區域,再把“原始出處”這裏嵌套個可編輯模板。這樣是不是就可以達成我的目的呢?百度一圈,只搜索到一些簡單資料。於是自己摸索、實驗,搞清楚了 DW 中嵌套模板的用法,也達成了我的目的。現分享我的經驗,給大家拋磚引玉。如果有謬誤的地方,包括錯別字,請指正。如果您有更好的想法設計,歡迎交流。

    技術在分享中前進!

 

 

    嵌套模板(Nested Template),其實就是基於另一個模板創建的模板。要創建嵌套模板,首先要保存一個基礎模板,然後用基礎模板創建新的文檔,再把該文檔保存爲嵌套模板。在這個新的嵌套模板中,可以對基礎模板中定義的可編輯區作進一步的定義。

在一個整體站點中,利用嵌套模板可以讓多個頻道的風格一致,又在細節上有所不同。嵌套模板還有利於頁面內容的控制、更新、和維護。修改基礎模板將自動更新基於該基礎模板創建的嵌套模板和基於該基礎模板及其嵌套模板的所有的網頁文檔。

 

1、創建基礎模板。DW - “Ctrl+N”,新建一個空白頁面文檔。並且規劃好基本的頁面佈局,見下圖。

 

圖2 基礎模板

 

在本例中我設計了聲明、版權、關鍵詞、分割線、內容和結尾這幾個佈局模塊,並分別把他們做成可編輯區域,保存模板爲“blog_基礎模板.dwt”。

 

2、創建嵌套模板。要創建嵌套模板,必須有個基於基礎模板的頁面。“Ctrl+N”,新建一個基於基礎模板的頁面,見下圖。

 

圖3 新建基於基礎模板的頁面

 

創建此不需要保存的頁面後,再在此頁面上創建基於基礎模板的嵌套模板,見下圖。

 

圖4 創建基於基礎模板的嵌套模板

 

將此嵌套模板的聲明、版權、關鍵詞、分割線、內容和結尾這幾個模塊填充內容並做美化,見下圖。

 

圖5 嵌套模板填充內容並美化

 

保存嵌套模板爲“blog_嵌套模板1.dwt”。

至此嵌套模板就創建完畢了,我們可以用嵌入模板創建頁面(“trl+N”-“模板中的頁”-“blog_嵌套模板1”)。我們也可以用基礎模板創建頁面(“Ctrl+N”-“模板中的頁”-“blog_基礎模板”),只不過創建的頁面光禿禿的就幾個空模塊。

在我的例子中基礎模板主要是用於控制佈局,比如我們可以修改“blog_基礎模板”調整“聲明”模塊到底部,那麼基於“blog_基礎模板”的嵌套模板和頁面都跟着更新,“聲明”模塊都被調整到了底部。等等,諸如此類的佈局變化。

當然你也可以把基礎模板設計成一個模板頁:頂部設計好網站 logo(不可編輯區域),底部版權信息(不可編輯區域),中間爲內容區域(可編輯區域)。然後基於此模板創建嵌套模板,什麼中間區域設計成兩欄的嵌套模板、中間區域設計成三欄的模板,等等等等。發揮你的想象,聰明的你可以設計出多彩多樣的模板。

寫到這裏,我開篇提到的功能需求怎麼解決呢?答案是用嵌套模板。

 

3、創建第三級嵌套模板。“Ctrl+N”,新建一個“blog_嵌套模板1”的頁面,然後將“原始出處”、“引用地址”、“版本”、“修訂”、“出處”等插入爲可編輯區域。這時原可編輯區域變成橙色的了以示區分,見下圖。

 

圖6 嵌套模板中的可編輯區域

 

“作者”、“版權”、“勘正”等爲 Dreamweaver 的“庫”功能。關於“庫”的用法,見我的另一篇文章。插入完可編輯區域後,將此文檔保存爲“blog_嵌套模板1-1.dwt”。那麼橙色區域就是不可編輯區域,青藍的就是可編輯區域。

我們驗證下,“Ctrl+N”-“模板中的頁”-“blog_嵌套模板1-1”。創建的頁面文檔,橙色區域不可編輯,只有可編輯區域才能編輯。實現了我要求的功能。

 

思路拓展。學完上面的嵌套模板的用法,我們可以靈活運用,利用這個技術更新維護大型、複雜的整體網站。比如用基礎模板控制佈局,用嵌套模板1控制頁面美化(logo、copyright、contact等),用嵌套模板1-1製作新聞頻道頁面,用嵌套模板1-2製作體育頻道頁面。用嵌套模板2控制第二種風格的美化,用嵌套模板2-1製作科技頻道頁面。等等等,諸如此類。加上 Dreamweaver 的協同工作功能、Subversion 功能等等,聰明的你只要發揮想象,就可以做出比我更優秀的整體網站維護方案。

 

 

~全文完~

 

        indian

    2012年11月23日15:42:20 初稿。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章