如何使用dreamweaver的模板功能

通常在一個網站中會有幾十甚至幾百個風格基本相似的頁面,如果每次都重新設定網頁結構以及相同欄目下的導航條、各類圖標就顯得非常麻煩,不過我們可以藉助Dreamweaver MX 2004的模板功能來簡化操作。其實模板的功能就是把網頁佈局和內容分離,在佈局設計好之後將其存儲爲模板,這樣相同佈局的頁面可以通過模板創建,因此能夠極大提高工作效率。

如何使用dreamweaver的模板功能

下面是個較全面的例子,能迅速的讓你掌握模板的使用。

  1. 編輯頁面

打開DW,新建一個站點,我們就取名爲“蜘蛛網”。

新建一個空白頁面作爲內頁(通常一個網站只有一個首頁,所以對首頁我們可以不做成模板),取名爲。

編輯這個頁面,完成如圖1。

圖1,編輯完成後的頁面,注意A處,此處將作爲可編輯區域,下文會針對提及。

  2. 生成模板

編輯完成後,我們將此頁保存爲模板(注意不是保存爲普通的htm網頁)。通過DW中的FileàSave As Template可以存爲模板,執行此命令後會彈出Save As Template窗口,如圖2。

圖2,Save As Template窗口。

圖2中的B處爲選擇站點,我們選擇“ 蜘蛛網”,C處爲我們要存爲的模板文件名,我們填入body。按右上角的'Save保存。

這時我們按F8調出site(站點管理器),在Templates文件夾中可以看到(當有模板文件時,DW會自動生成Templates文件夾,dwt爲模板類型文件)

  3. 編輯模板

在Site中打開模板文件,將會發現跟頁面好像沒什麼分別,但其實是不一樣的,在中是無法添加可編輯區域的。可編輯區域只能在模板文件中添加。

爲了讓大家更好的理解“可編輯區域”,我們先用此模板生成一個htm文件:點FileàNew From Template,彈出Select Template窗口,在emplates中選擇body,再點擊右上角的Select即可生成一個新的htm文件。我們將此新建頁面改名爲。現在我們用DW將與兩文件都打開,比較一下有什麼不同。你會發現在頁面的右上角寫着“Template:body”幾個字。(說明此頁是由模板文件生成)同時你會驚訝的發現文件竟然不可以編輯(可以編輯)。對了,這就是由於在模板文件中沒有定義“可編輯區域”的結果,使得生成的頁面都不可編輯了。所以我們必須在模板文件中添加可編輯區域。下面是添加可編輯區域的步驟:

1) 打開模板文件,我們希望中間的表格可以編輯(也就是圖1中的A處)。但是要在文件中,而不是),所以要在此處添加可編輯區域。

2) 將鼠標光標放入A處表格裏,點擊鼠標右鍵,選擇New Editable Region…, 彈出New Editable Region窗口,要求填入此可編輯區域的名稱(我們通常稱爲可編輯區域標記)。我們填入Region01,點擊ok關閉此窗口完成當前可編輯區域標記的編輯。此時可以看到在表格中有如圖3的顯示。

圖3,New Editable Region窗口。

說明此處有一個標記爲Region01的可編輯區域。

到此爲止我們定義了一個可編輯區域,如果有多個編輯區域,同樣可以如法炮製。

※還可以通過ModifyàTemplatesàNew Editable Region…生成新的可編輯區域,如果想刪除可編輯區域,可通過ModifyàTemplatesàRemove Editable Region…,然後按提示操作即可。

  4. 用模板生成頁面

其實我們前面也提及過用模板生成頁面的步驟,就是通過FileàNew From Template。請參考第三步的有關步驟。現在我們用模板生成一個名爲的頁面。這時你會發現,在頁面中除了可編輯區域Region01可以編輯外,別的地方鼠標都成了限制狀態。我們在此可編輯區域中添加我們需要的內容,比如我們隨便寫入一篇文章。這樣就可以根據我們的需要,利用模板生成頁面。

  5. 修改模板內容與更新站點文件

打開模板文件,將我們需要修改的地方進行修改,比如我們把logo圖片換掉或修改任何非可編輯區域,甚至添加或刪除可編輯區域等。

下面就用換logo來說明模板是如何更新文件的。

我們把logo圖片換成另外我們喜歡的圖片,完成後保存文件,這時DW會彈出窗口詢問是否需要更新文件,選擇Update,DW就會自動的將所有用此模板生成的頁面都更新,更新時DW會彈出Update Pages窗口,完成後,在Update Pages窗口中會給出更新日誌。

※如果選擇了don’t Update,DW直接保持模板文件,暫時不更新頁面,但我們可以手動更新頁面,只要選擇ModifyàTemplatesàUpdate Pages…即可。

這時我們打開任意一個用生成的頁面,如。會發現logo圖片已經改變。

不難發現,利用這個功能,我們可以輕鬆的解決站點更新問題,模板的功能十分強大,此文只起到拋磚引玉的作用,很多功能由於篇幅問題未能提及,自己要多嘗試,這樣才能充分領略DW的模板風采。