Dreamweaver網(wǎng)頁制作技巧:使用模板_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è)普通的頁面完全相同,只是不需要把頁面的所有部分都制作完成,僅僅需要制作出導(dǎo)航條、標(biāo)題欄等各個(gè)頁面的公有部分,而把中間區(qū)域用頁面的具體內(nèi)容來填充。
第一步:先在Dreamweaver MX 2004中運(yùn)行“File→New”命令,接著從圖1所示的窗口中依次選定“Template page→HTML template”選項(xiàng),點(diǎn)擊“Create”按鈕之后即可創(chuàng)建一個(gè)模板文件。
第二步:在頁面設(shè)計(jì)視圖下插入網(wǎng)頁框架、導(dǎo)航條、Flash標(biāo)題等所有頁面公有的元素(圖2),然后運(yùn)行“File→Save”命令將這個(gè)模板保存下來。
小提示:可以先下載一個(gè)中意的網(wǎng)頁,然后在Dreamweaver MX 2004中打開它,僅僅保留框架等元素之后通過“File→Save as Template”命令將其保存為模板,這樣能夠省去很多制作模板的時(shí)間。
為了避免編輯時(shí)候誤操作而導(dǎo)致模板中的元素變化,模板中的內(nèi)容默認(rèn)為不可編輯,只有把某個(gè)區(qū)域或者某段文本設(shè)置為可編輯狀態(tài)之后,在由該模板創(chuàng)建的文檔中才可以改變這個(gè)區(qū)域。先用鼠標(biāo)選取某個(gè)區(qū)域(也就是每個(gè)頁面不同內(nèi)容的區(qū)域),接著運(yùn)行“Modify→Templates→New Editable Region”命令,并且在彈出的對話框中為這個(gè)區(qū)域設(shè)定一個(gè)名稱,這樣就完成了編輯區(qū)域的設(shè)置。
小提示:設(shè)定好編輯區(qū)域之后需要運(yùn)行“File→Save”命令保存所做的修改。
二、使用模板
有了模板之后,接下來就要在編輯網(wǎng)頁時(shí)候使用它們了。只要在Dreamweaver MX 2004主窗口中運(yùn)行“File→New”命令即可看見圖1所示的新建窗口,接著進(jìn)入“Templates”標(biāo)簽即可查看到已經(jīng)保存的模板,從中選取一種還可以在右部的預(yù)覽區(qū)進(jìn)行預(yù)覽(圖3),最后挑選一款中意的模板并點(diǎn)擊下部“Create”按鈕打開這個(gè)模板。
在打開的模板中,無法編輯的區(qū)域?qū)⒊矢吡翣顟B(tài)顯示,但是有些位置是鎖定區(qū)域,卻不是高亮顯示,這主要是因?yàn)閳D片正好蓋住了背景的顏色。對于這種情況,可以運(yùn)行“Edit→Preferences”命令,在彈出窗口的“Category”列表中選取“Highlighting”一項(xiàng),接著在右部區(qū)域中選取“Locked regions”旁邊的“Show”選項(xiàng)(圖4),并且設(shè)定高亮顯示色為藍(lán)色,這樣就可以很清楚地分辨出模板中的鎖定區(qū)域了。
小提示:假如仍然看不見高亮顯示效果,還可以依次選中“View→Visual Aids→Invisible Elements”命令。
最后,我們只要在可編輯區(qū)域添加網(wǎng)頁的內(nèi)容就可以了,比如添加一些文字說明或者是插入相應(yīng)的圖片,最后通過“File→Save”命令保存頁面即可。
三、修改和更換模板
在通過模板創(chuàng)建了若干個(gè)頁面之后,假如需要更改頁面或者增加欄目,再對所有的頁面手工修改則非常麻煩,因此我們可以通過Dreamweaver MX 2004的模板修改功能來解決這個(gè)問題。比如我們對模板進(jìn)行了修改之后,運(yùn)行“File→Save”命令來保存模板,這時(shí)候會(huì)彈出提示框詢問是否更新所有使用了該模板的頁面(圖5),確認(rèn)之后就會(huì)顯示出更新的頁面總數(shù)以及更新的時(shí)間等信息。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 在Dreamweaver中創(chuàng)建或修改 ColdFusion 數(shù)據(jù)源
- Dreamweaver開發(fā)ASP實(shí)例視頻教程準(zhǔn)備
- Dreamweaver 4.0使用技巧集錦
- 在Dreamweaver中插入有顏色的直線
- Dreamweaver MX 2004從零開始
- 如何像表格table一樣對層div進(jìn)行輕松布局
- 網(wǎng)頁制作技巧:Dreamweaver快速圖片鏈接批處理
- 使用Dreamweaver CSS樣式表設(shè)置網(wǎng)頁文本格式
- Javascript 表單之間的數(shù)據(jù)傳遞
- 巧妙運(yùn)用DW進(jìn)行網(wǎng)頁制作技巧
猜你也喜歡看這些
- 挑戰(zhàn)DREAMWEAVER MX互動(dòng)網(wǎng)站百寶箱FOR ASP
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- Dreamweaver MX 2004 官方簡體中文版教程
- DIV+CSS 入門視頻教程,只用記事本編寫代碼演示
- 《Dreamweaver CS3網(wǎng)頁設(shè)計(jì)技能進(jìn)化手冊》--樣章、樣例、教學(xué)視頻
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- PHP+MYSQL網(wǎng)站設(shè)計(jì)入門實(shí)踐
- Dreamweaver系列視頻教程
- Dreamweaver 8完美網(wǎng)頁設(shè)計(jì):白金案例篇
- Dreamweaver 8 ASP動(dòng)態(tài)網(wǎng)頁編程完全自學(xué)手冊
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver網(wǎng)頁制作技巧:使用模板。