- 相關推薦
Dreamweaver定義模板批量制作網頁
其實只要用好模板工具,就能很好地“批發”網頁。常見的網頁制作工具如DreamWeaver中都有這項功能,使用模板就能減少大量的重復勞動。下面就由小編為大家介紹一下Dreamweaver定義模板批量制作網頁,歡迎大家閱讀!
一、建立模板
1、創建模板頁面
最簡單的辦法是將一個網頁另存為模板文件,通過執行命令:File→Save as Template,DreamWeaver會在網站根目錄中建立一個模板文件夾——Templates來保存該模板。
當然,也可以新建一個模板:Window→Templates,會出現的Templates面板,單擊右下角的New Template按鈕,輸入文件名,就建立了一個空模板;再單擊Open Template按鈕打開該模板,保存后自動存放于網站模板文件夾Templates中。
新建、打開的模板頁面和普通的網頁沒什么兩樣,同樣可以加入表格、層、圖片、動畫、腳本,設置頁面屬性等。
舉例:這里以制作一個模板為例來說明。在該頁面中,我們希望左側的網站標識圖和底部的導航圖出現在每個頁面中。其中標識圖由兩幅圖片疊加而成,導航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個熱區分別鏈接到不同的文件,它們在每個頁面中都不變。右上部的主頁面區和左下角彈出式選單按鈕下面的頁面說明則各不相同。為了保持頁面整潔,我們用表格來布置這些元素。
準確地說它只是一個沒有可編輯區域的“準模板”,下面再設定可編輯區域。
2、設定可編輯區域
設定模板可編輯區域,一般來說有兩種方法。
新建可編輯區域:選擇命令:Modify→Template→New Editable Region。在某一空白區域中單擊后執行該命令即可將該區域變為可編輯區域。
標記某一區域為可編輯區域:選擇命令:Modify→Template→Mark Selectin as Editable Region。如果某區域已經有一些文字,并且希望在以后新建的超文本文件中部分保留其內容,先選中該區域再執行標記命令即可。
取消可編輯狀態:選擇命令:Modify→Template→Unmark Editable Region。執行該命令后會彈出一個對話框,其中有當前已有的可編輯區域列表,選中要取消的區域名稱,確認即可。
舉例:在大片空白區中隨便單擊一下,執行Modify→Template→New Editable Region命令,在彈出對話框中輸入名稱:Main;選中左下角本頁說明下面的文字,執行Modify→Template→Mark Selectin as Editable Region命令,輸入名稱:exp?梢钥吹娇删庉媴^顯示為淺藍色,保存即完成模板制作。
二、使用模板批量制作網頁
1、根據模板新建頁面
命令:File→New From Template。彈出對話框,從模板列表中選取模板,出現的新頁面中除可編輯區外均有淡黃色背景,是不能進行修改的部分。空白的Main編輯區可直接進行插入表格、文字、圖片等操作,Exp編輯區保留有原來的文字,修改或重新編輯均可。
2、對一個已經有內容的頁面應用模板
命令:Modify→Template→Apply Template to Page。選擇模板后還會彈出一個對話框,讓您選擇現有的孤立內容保存到哪個可編輯區域(Choose Editable Region for Orphaned Content)。要是不想保留則可以選擇“(none)”。
舉例:我們先新建一個普通頁面,輸入:“CIW電腦工作室”,執行Modify→Template→Apply Template to Page命令,選擇模板test,現有內容保存區域選擇Main,確認后可看到頁面自動變成了模板頁的形式,而“CIW電腦工作室”這一行字就出現在主編輯窗口中。
3、更新模板以全面更新站點
基于某一模板建立了一些頁面后,對模板進行修改后保存時,就會自動彈出一個對話框,列出所有使用了該模板的頁面,詢問是否要更新。
另外一種方法是執行Modify→Template→Update Pages命令。從Update Pages對話框中選擇一個站點或站點的某一種模板(同一站點中可以使用多個模板),單擊右側的Start按鈕,軟件會自動搜索與模板相關聯的網頁并進行更新。非常方便!
舉例:Test模板左側圖形中的“讀書破萬站”圖片是用一個圖層疊加在另一幅圖片之上的,現在不想要它,同時還想將所有頁面中的該圖片均刪除。就可以打開模板test.dwt,刪除該圖層,保存模板,單擊右側的“Update”按鈕即可。
注意:新建和使用模板前需定義站點。方法是,執行命令:Site→Define Sites;指定站點名稱和本地根目錄(Local Root)。模板使用的是相對路徑,如果沒有指定網站在本地的位置,軟件就不能準確找到并保存模板文件;并且應用模板新建和更新頁面時,頁面中的超鏈接也不能隨頁面文件保存位置的不同而相應變化。
為期兩周的網頁實訓終于結束了。為什么說終于結束了呢?因為兩個星期做五個時間太緊了,我們每天晚上都是加班加點。但是結果是令人欣慰的,我們大都按時按質完成了任務,而且是一個比一個做得好!總的來說,還是有很大的收獲。
本次實訓共有五個任務,它們分別是:沈陽植物園網、開元科技網、家臺灣旅游網、我愛低碳網、博愛助學網。要求是每個至少要8個或8個以上的頁面,并運用flash做動畫,用css美化頁面等。
整個實訓的過程可以說是所學知識的一個整理,一個綜合,一個靈活運用。之前我們課堂上學的東西是一個個知識點,比較零散。雖然在實訓之前我們也做過兩個,但那是我們小組合作的,所以有些知識點我們并沒有都用到。而這次實訓是自己一個人做,做的各個環節都要自己親力親為,可以說是一個挑戰,同時也是對知識的一種升華。它不僅是dreamweaver軟件的熟練操作,也是potoshop、flash軟件的熟練運用。我們需要自己設計的logo這就需要運用到potoshop軟件強大的圖形圖像處理功能,需要做出生動的網頁效果,就需要flash做出動態的文字效果和圖片切換效果。
在設計的過程中遇到問題,可以說得是困難重重,這畢竟是第一次獨自設計、制作,難免會遇到過各種各樣的問題,同時在設計的過程中發現了自己的不足之處,對以前所學過的知識理解得不夠深刻,掌握得不夠牢固,在css的具體應用還不是和很熟練,沒有能完全達到自己預期的效果,還好通過老師的細心指導才能達到最終效果通過這次網頁設計與制作實訓,一定把以前所學過的知識重新溫故。
兩周網頁設計與制作的實訓課程結束了,回顧這次課程設計實訓,至今我仍感慨頗多。的確,從選材到開始制作,從理論到實踐,在兩周的實訓日子里,可以說得是苦多于甜,但是可以學到很多很多的的東西,同時不僅可以鞏固了以前所學過的知識,而且學到了很多在書本上所沒有學到過的知識。更懂得并親身體會到了理論與實際相結合的重要性,只有理論知識是遠遠不夠的,把所學的理論知識與實踐相結合起來,從理論中得出結論,才能真正為掌握技術,從而提高自己的實際動手能力和獨立思考的能力。
【Dreamweaver定義批量制作網頁】相關文章:
Dreamweaver制作網頁的基本步驟10-09
Dreamweaver怎么定義站點04-01
Dreamweaver創建網頁的基本方法04-01
怎么用Dreamweaver設計網頁12-28
Dreamweaver如何制作錨點鏈接09-14
網頁制作練習試題03-24