網頁設計

當前位置 /首頁/設計製作/網頁設計/列表

如何使用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的模板風采。

TAG標籤:模板 Dreamweaver #