- 相關(guān)推薦
如何使用dreamweaver的模板功能
通常在一個(gè)網(wǎng)站中會(huì)有幾十甚至幾百個(gè)風(fēng)格基本相似的頁面，如果每次都重新設(shè)定網(wǎng)頁結(jié)構(gòu)以及相同欄目下的導(dǎo)航條、各類圖標(biāo)就顯得非常麻煩，不過我們可以借助Dreamweaver MX 2004的模板功能來簡化操作。其實(shí)模板的功能就是把網(wǎng)頁布局和內(nèi)容分離，在布局設(shè)計(jì)好之后將其存儲(chǔ)為模板，這樣相同布局的頁面可以通過模板創(chuàng)建，因此能夠極大提高工作效率。
下面是個(gè)較全面的例子，能迅速的讓你掌握模板的使用。
1. 編輯頁面
打開DW，新建一個(gè)站點(diǎn)，我們就取名為“蜘蛛網(wǎng)”。
新建一個(gè)空白頁面作為內(nèi)頁(通常一個(gè)網(wǎng)站只有一個(gè)首頁，所以對首頁我們可以不做成模板)，取名為body.htm。
編輯這個(gè)頁面，完成如圖1。
圖1，編輯完成后的body.htm頁面，注意A處，此處將作為可編輯區(qū)域，下文會(huì)針對提及。
2. 生成模板
編輯完成后，我們將此頁保存為模板(注意不是保存為普通的htm網(wǎng)頁)。通過DW中的FileàSave As Template可以存為模板，執(zhí)行此命令后會(huì)彈出Save As Template窗口，如圖2。
圖2，Save As Template窗口。
圖2中的B處為選擇站點(diǎn)，我們選擇“ 蜘蛛網(wǎng)”，C處為我們要存為的模板文件名，我們填入body。按右上角的Save保存。
這時(shí)我們按F8調(diào)出site(站點(diǎn)管理器)，在Templates文件夾中可以看到body.dwt(當(dāng)有模板文件時(shí)，DW會(huì)自動(dòng)生成Templates文件夾，dwt為模板類型文件)
3. 編輯模板
在Site中打開body.dwt模板文件，將會(huì)發(fā)現(xiàn)跟body.htm頁面好像沒什么分別，但其實(shí)是不一樣的，在body.htm中是無法添加可編輯區(qū)域的。可編輯區(qū)域只能在模板文件中添加。
為了讓大家更好的理解“可編輯區(qū)域”，我們先用此模板生成一個(gè)htm文件：點(diǎn)FileàNew From Template，彈出Select Template窗口，在emplates中選擇body，再點(diǎn)擊右上角的Select即可生成一個(gè)新的htm文件。我們將此新建頁面改名為body2.htm。現(xiàn)在我們用DW將body.htm與body2.htm兩文件都打開，比較一下有什么不同。你會(huì)發(fā)現(xiàn)在body2.htm頁面的右上角寫著“Template:body”幾個(gè)字。(說明此頁是由body.dwt模板文件生成)同時(shí)你會(huì)驚訝的發(fā)現(xiàn)body2.htm文件竟然不可以編輯(body.htm可以編輯)。對了，這就是由于在body.dwt模板文件中沒有定義“可編輯區(qū)域”的結(jié)果，使得生成的頁面都不可編輯了。所以我們必須在模板文件中添加可編輯區(qū)域。下面是添加可編輯區(qū)域的步驟：
1) 打開body.dwt模板文件，我們希望中間的表格可以編輯(也就是圖1中的A處)。但是要在body.dwt文件中，而不是body.htm)，所以要在此處添加可編輯區(qū)域。
2) 將鼠標(biāo)光標(biāo)放入A處表格里，點(diǎn)擊鼠標(biāo)右鍵，選擇New Editable Region…， 彈出New Editable Region窗口，要求填入此可編輯區(qū)域的名稱(我們通常稱為可編輯區(qū)域標(biāo)記)。我們填入Region01，點(diǎn)擊ok關(guān)閉此窗口完成當(dāng)前可編輯區(qū)域標(biāo)記的編輯。此時(shí)可以看到在表格中有如圖3的顯示。
圖3，New Editable Region窗口。
說明此處有一個(gè)標(biāo)記為Region01的可編輯區(qū)域。
到此為止我們定義了一個(gè)可編輯區(qū)域，如果有多個(gè)編輯區(qū)域，同樣可以如法炮制。
※還可以通過ModifyàTemplatesàNew Editable Region…生成新的可編輯區(qū)域，如果想刪除可編輯區(qū)域，可通過ModifyàTemplatesàRemove Editable Region…，然后按提示操作即可。
4. 用模板生成頁面
其實(shí)我們前面也提及過用模板生成頁面的步驟，就是通過FileàNew From Template。請參考第三步的有關(guān)步驟。現(xiàn)在我們用模板生成一個(gè)名為body3.htm的頁面。這時(shí)你會(huì)發(fā)現(xiàn)，在body3.htm頁面中除了可編輯區(qū)域Region01可以編輯外，別的地方鼠標(biāo)都成了限制狀態(tài)。我們在此可編輯區(qū)域中添加我們需要的內(nèi)容，比如我們隨便寫入一篇文章。這樣就可以根據(jù)我們的需要，利用模板生成頁面。
5. 修改模板內(nèi)容與更新站點(diǎn)文件
打開body.dwt模板文件，將我們需要修改的地方進(jìn)行修改，比如我們把logo圖片換掉或修改任何非可編輯區(qū)域，甚至添加或刪除可編輯區(qū)域等。
下面就用換logo來說明模板是如何更新文件的。
我們把logo圖片換成另外我們喜歡的圖片，完成后保存body.dwt文件，這時(shí)DW會(huì)彈出窗口詢問是否需要更新文件，選擇Update，DW就會(huì)自動(dòng)的將所有用此模板生成的頁面都更新，更新時(shí)DW會(huì)彈出Update Pages窗口，完成后，在Update Pages窗口中會(huì)給出更新日志。
※如果選擇了don’t Update，DW直接保持模板文件，暫時(shí)不更新頁面，但我們可以手動(dòng)更新頁面，只要選擇ModifyàTemplatesàUpdate Pages…即可。
這時(shí)我們打開任意一個(gè)用body.dwt生成的頁面，如body3.htm。會(huì)發(fā)現(xiàn)logo圖片已經(jīng)改變。
不難發(fā)現(xiàn)，利用這個(gè)功能，我們可以輕松的解決站點(diǎn)更新問題，模板的功能十分強(qiáng)大，此文只起到拋磚引玉的作用，很多功能由于篇幅問題未能提及，自己要多嘗試，這樣才能充分領(lǐng)略DW的模板風(fēng)采。
【如何使用dreamweaver的功能】相關(guān)文章：
使用Dreamweaver代碼提示功能08-05
如何學(xué)習(xí)使用Dreamweaver06-14
在Dreamweaver中如何使用模板08-27
Dreamweaver如何使用空鏈接09-01
Dreamweaver命名錨記如何使用09-03
如何使用Dreamweaver插入文件域06-05