通過DreamweaverCS3學(xué)習(xí)HTML+DIV+CSS教學(xué)第17章 模板制作與應(yīng)用ppt課件

1、第17章 模板制造與運(yùn)用在實(shí)踐的網(wǎng)頁制造過程中，有時會遇到很多的頁面如不同的欄目具有一樣的規(guī)劃。制造時為了防止這種反復(fù)的操作，設(shè)計(jì)者可以運(yùn)用Dreamweaver CS3提供的“模板功能，將具有一樣整體規(guī)劃構(gòu)造的頁面制形成模板，將一樣的規(guī)劃對象如頁面頭部，頁腳等制形成庫文件。這樣，當(dāng)設(shè)計(jì)者再次制造該頁面時，可以直接運(yùn)用庫文件，從而可以節(jié)省很多不用要的反復(fù)操作。本章將從模板簡介、模板的制造和模板的運(yùn)用三個方面對模板進(jìn)薪檣堋17.1 模板簡介Dreamweaver CS3中的模板是一種特殊類型的文檔，它用于設(shè)計(jì)規(guī)劃比較固定的頁面。用戶可以創(chuàng)建基于模板的頁面規(guī)劃。17.1.1 模板的作用模板最大的作

2、用就是可以大大提高設(shè)計(jì)者的任務(wù)效率。當(dāng)設(shè)計(jì)者對模板進(jìn)展修正后，一切運(yùn)用了這個模板的網(wǎng)頁內(nèi)容都將隨之被修正。簡單地說，就是一次可以更新多個頁面，這也是模板強(qiáng)大的功能之一。在實(shí)踐任務(wù)中，尤其是針對一些大型的網(wǎng)站，其效果更是非常明顯。所以，模板與基于模板的網(wǎng)頁之間堅(jiān)持了一種銜接的形狀，這兩者之間共同的內(nèi)容也將可以堅(jiān)持完全的一致。17.1.2 適宜運(yùn)用模板的網(wǎng)頁假設(shè)一個網(wǎng)站的規(guī)劃比較一致，擁有一樣的導(dǎo)航，且顯示不同欄目內(nèi)容的位置根本堅(jiān)持不變，那么這種規(guī)劃的網(wǎng)站就可以思索運(yùn)用模板來創(chuàng)建。這類似于前面章節(jié)中引見的框架技術(shù)。有些類型的網(wǎng)站采用框架技術(shù)或模板技術(shù)，最終的效果根本一樣。例如，下面的網(wǎng)站就適宜采用

3、模板來進(jìn)展規(guī)劃，如下圖。這些頁面雖然是不同的欄目，擁有不同的內(nèi)容，但卻具有一樣的規(guī)劃版式。 適宜運(yùn)用模板的規(guī)劃欄目一 適宜運(yùn)用模板的規(guī)劃欄目二 17.2 模板元素的操作模板實(shí)踐上就是一種文檔，其擴(kuò)展名為.dwt，存放在根目錄下的Templates文件夾中。假設(shè)該文件夾在站點(diǎn)中不存在，Dreamweaver將會在保管新建模板時自動創(chuàng)建。17.2.1 創(chuàng)建模板在Dreamweaver CS3中有兩種創(chuàng)建模板的方法：一種是將現(xiàn)有的網(wǎng)頁文件另存為模板，然后根據(jù)需求進(jìn)展修正；另一種是直接新建一個空白模板，再在其中插入需求顯示的文檔內(nèi)容。下面就以前做過的頁面頭部、主體版面和頁腳構(gòu)成的頁面為例，分別運(yùn)用兩種

4、方法將其制形成模板文件。1運(yùn)用網(wǎng)頁另存為的方法創(chuàng)建模板運(yùn)用網(wǎng)頁另存為的方法創(chuàng)建模板的詳細(xì)步驟如下： 17.2.1 創(chuàng)建模板2運(yùn)用新建空白模板的方法創(chuàng)建模板運(yùn)用新建空白模板的方法創(chuàng)建模板的詳細(xì)步驟如下：17.2.2 創(chuàng)建可編輯區(qū)域創(chuàng)建模板后接著要進(jìn)展的操作是創(chuàng)建可編輯區(qū)域。可編輯區(qū)域可以控制模板頁面哪些區(qū)域可以編輯，哪些區(qū)域不可以編輯。模板的可編輯區(qū)域主要包括以下操作。1插入可編輯區(qū)域插入可編輯區(qū)域的詳細(xì)步驟如下： 17.2.2 創(chuàng)建可編輯區(qū)域2選擇可編輯區(qū)域圖 直接選擇可編輯區(qū)域在模板文檔和基于模板文檔中，都可以很容易地標(biāo)識和選擇模板區(qū)域。選擇的方法可分為兩種：直接選擇和菜單項(xiàng)選擇擇。17.2

5、.2 創(chuàng)建可編輯區(qū)域3刪除可編輯區(qū)域假設(shè)曾經(jīng)將模板文件的一個區(qū)域標(biāo)志為可編輯，而如今想再次鎖定它使其在基于模板的文件中不可編輯，可先選中該可編輯區(qū)域，然后單擊【修正】|【模板】|【刪除模板標(biāo)志】命令，可編輯區(qū)域即會被刪除，而之前其中的內(nèi)容會被保管。假設(shè)要刪除某個可編輯區(qū)域和其中的內(nèi)容，選中該可編輯區(qū)域后按Delete鍵即可。17.2.2 創(chuàng)建可編輯區(qū)域4更改可編輯區(qū)域的稱號曾經(jīng)插入的可編輯區(qū)域依然可以再次更改它的稱號。詳細(xì)的操作步驟如下：17.2.3 創(chuàng)建基于模板的文檔在創(chuàng)建模板后，就可以向空白文檔中運(yùn)用模板了。創(chuàng)建基于模板的新文檔有很多方法，如可以運(yùn)用【資源】浮動面板，或單擊菜單【文件】|【

6、新建】命令。本章主要引見【資源】浮動面板的方法，其他方法也大同小異，讀者可以本人進(jìn)展嘗試。運(yùn)用【資源】浮動面板創(chuàng)建基于模板文檔的詳細(xì)操作步驟如下：17.2.4 分別文檔中運(yùn)用的模板假設(shè)要更改基于母本的文檔的鎖定區(qū)域，必需將該文檔從模板中分別。將文檔分別后，整個文檔中的內(nèi)容都將變?yōu)榭删庉嫷男螤?。分別文檔中的模板詳細(xì)的操作步驟如下：17.2.5 更新模板及基于模板的網(wǎng)頁更改并保管模板時，Dreamweaver CS3可以自動更新基于該模板的一切文檔。讀者也可以手動更新這些文檔。更新模板的詳細(xì)操作步驟如下：17.2.6 模板的嵌套與表格和層一樣，模板也可以進(jìn)展嵌套。嵌套模板是根本模板的一種擴(kuò)展。讀者

7、可以經(jīng)過保管一個基于模板的文檔，然后將該文檔另存為一個新模板的方式來嵌套模板。嵌套多個模板會使規(guī)劃變得更加準(zhǔn)確。圖17.19 單擊【從模板新建】命令在默許情況下，根本模板中的一切可編輯區(qū)域都將經(jīng)過嵌套模板傳送到基于該嵌套模板的文檔中。這意味著假設(shè)在根本模板中創(chuàng)建一個可編輯區(qū)域，然后再創(chuàng)建一個嵌套模板，只需讀者沒有在嵌套模板的區(qū)域中插入新的可編輯區(qū)域，那么原可編輯區(qū)域?qū)鋈缃窕谇短啄０宓奈臋n中。 17.3 模板的運(yùn)用實(shí)踐中運(yùn)用模板，首先需求分析該模板中適宜插入的可編輯區(qū)域的分布，也就是欄目之間擁有不同內(nèi)容的位置。普通網(wǎng)頁的不同大部分都位于頁面的主體部分。然后，編輯可編輯區(qū)域，以制造適宜特定欄

8、目的頁面。在上一節(jié)中引見了模板的操作方法，在本節(jié)中，將根據(jù)之前制造的頁面講解模板的運(yùn)用。 17.3.1 分析規(guī)劃翻開之前創(chuàng)建的模板文檔muban.dwt，如下圖。此頁面是一個作品展現(xiàn)頁，各欄目頁面的不同主要是作品展現(xiàn)欄的不同。17.3.2 插入可編輯區(qū)域刪除了主體版面相關(guān)內(nèi)容之后，需求在模板中創(chuàng)建可編輯區(qū)域，以便在后面的步驟中可以對基于模板的文檔進(jìn)展編輯。詳細(xì)操作步驟如下：17.3.3 運(yùn)用模板設(shè)置模板后就可以運(yùn)用這個模板了。詳細(xì)操作步驟如下： 17.3.3 運(yùn)用模板至此基于模板創(chuàng)建的欄目頁就制造完成了，可以發(fā)現(xiàn)，制造的步驟簡單了許多，只需求做簡單的文字輸入和圖片插入，大大提高了任務(wù)效率。 17.4 專家總結(jié)本章主