當前位置:歷史故事大全網 - 範文作文 - 怎樣在dreamweaver中添加模板

怎樣在dreamweaver中添加模板

1. 編輯頁面

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

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

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

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

2. 生成模板

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

圖2,Save As Template窗口。

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

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

3. 編輯模板

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

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

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

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。請參考第三步的有關步驟。現在我們用模板生成壹個名為body3.htm的頁面。這時妳會發現,在body3.htm頁面中除了可編輯區域Region01可以編輯外,別的地方鼠標都成了限制狀態。我們在此可編輯區域中添加我們需要的內容,比如我們隨便寫入壹篇文章。這樣就可以根據我們的需要,利用模板生成頁面。

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

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

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

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

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

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

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

在DW中,還有壹項稱為庫的功能,跟模板可以有機的配合,這樣會使模板的功能更加強大,如果讀者反應有興趣的話,我願意為大家獻上這壹份禮物。

  • 上一篇:高安屯垃圾場的基本簡介
  • 下一篇:李賀小傳
  • copyright 2024歷史故事大全網