《網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容與制作》.ppt

《《網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容與制作》.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、《網(wǎng)頁(yè)設(shè)計(jì)與制作》第七章模板與庫(kù)的應(yīng)用7.37.47.57.17.2實(shí)例導(dǎo)入：利用模板生成的站點(diǎn)創(chuàng)建模板模板的應(yīng)用和更新使用庫(kù)利用模板和庫(kù)生成站點(diǎn)的制作過(guò)程本章主要介紹了利用模板和庫(kù)設(shè)計(jì)風(fēng)格一致的網(wǎng)站，使用模板和庫(kù)的組合使得建設(shè)網(wǎng)站和維護(hù)網(wǎng)站變得很輕松，尤其是在對(duì)一個(gè)規(guī)模較大的網(wǎng)站進(jìn)行建設(shè)與維護(hù)時(shí)，就能體會(huì)到模板和庫(kù)的好處?！颈菊聦W(xué)習(xí)目的】本章通過(guò)一個(gè)典型的網(wǎng)站案例重點(diǎn)講解了模板和庫(kù)技術(shù)的應(yīng)用，通過(guò)本章的學(xué)習(xí)，掌握利用模板和庫(kù)技術(shù)創(chuàng)建風(fēng)格一致的網(wǎng)站的方法。一個(gè)成功的網(wǎng)站首先要具備自己獨(dú)特的風(fēng)格，才能夠在茫茫的網(wǎng)絡(luò)中脫穎而出，給人留下深刻的印象。但僅憑網(wǎng)站中的一兩個(gè)較好的頁(yè)面

2、，很難收到良好的效果。因此就需要整個(gè)站點(diǎn)內(nèi)的頁(yè)面體現(xiàn)出統(tǒng)一的風(fēng)格。因此通過(guò)使用模板能夠生成多個(gè)具有相似結(jié)構(gòu)和外觀網(wǎng)頁(yè)，從而提高網(wǎng)頁(yè)制作效率?！纠?.1】利用模板技術(shù)生成網(wǎng)站實(shí)例，如圖7.1所示。在本網(wǎng)站實(shí)例主要涉及到以下知識(shí)點(diǎn)：首先進(jìn)行網(wǎng)頁(yè)版面布局的設(shè)計(jì)；劃分模板鎖定區(qū)域和可編輯區(qū)域；創(chuàng)建模板和編輯模板，最后根據(jù)模板快速創(chuàng)建網(wǎng)頁(yè)。7.2創(chuàng)建和設(shè)置模板關(guān)于模板最顯著的特征就是鎖定區(qū)域和可編輯區(qū)域之分。鎖定區(qū)域主要用來(lái)鎖定體現(xiàn)網(wǎng)站風(fēng)格部分，而將經(jīng)常要改變的文字、圖像、鏈接等網(wǎng)頁(yè)元素設(shè)置成可編輯區(qū)域，網(wǎng)頁(yè)中只編輯可編輯區(qū)域的內(nèi)容，從而得到與模板相似但又有所不同的新的網(wǎng)頁(yè)。7.2.

3、1創(chuàng)建模板創(chuàng)建模板有二種常用的方法：一是創(chuàng)建新模板，二是將當(dāng)前網(wǎng)頁(yè)另存為模板。1.創(chuàng)建新模板創(chuàng)建新模板可通過(guò)以下兩種方法來(lái)實(shí)現(xiàn)：方法一：選擇“文件”菜單｜“新建”命令，彈出“新建文檔”對(duì)話框中，選擇“常規(guī)”選項(xiàng)卡｜“基本頁(yè)”｜“HTML模板”，單擊“創(chuàng)建”按鈕，方法二：選擇“窗口”菜單｜“資源”命令，或按F11鍵打開(kāi)“資源”面板，單擊“資源”面板左邊的“模板”選項(xiàng)，單擊右下角的新建模板按鈕，如圖所示。2.將當(dāng)前文檔另存為模板將一個(gè)編輯好的網(wǎng)頁(yè)按照要求加以修改，然后另存為模板。7.2.2編輯模板首先劃分可編輯區(qū)域和鎖定區(qū)域，然后編輯模板，通常是像編輯網(wǎng)頁(yè)一樣先將鎖定區(qū)域編輯好

4、，然后再定義可編輯區(qū)域?？删庉媴^(qū)域：在模板中可編輯區(qū)域?qū)?yīng)網(wǎng)頁(yè)中的可編輯部分，鎖定區(qū)域是那些不可編輯的部分。在默認(rèn)的方式下，Dreamweaver將新模板的所有部分設(shè)置為不可編輯區(qū)域，由用戶來(lái)定義可編輯區(qū)域。在編輯模板時(shí)，無(wú)論是可編輯區(qū)域還是鎖定區(qū)域都是可以編輯的。但是將模板應(yīng)用到網(wǎng)頁(yè)中，在網(wǎng)頁(yè)中的鎖定區(qū)域是不可以編輯的。常用定義可編輯區(qū)域的方法有二種，首先在模板中將光標(biāo)單擊要新建可編輯區(qū)域位置，選擇“插入”菜單｜“模板對(duì)象”｜“可編輯區(qū)域”命令，或單擊“插入”欄｜“常用”選項(xiàng)｜“模板”｜“可編輯區(qū)域”按鈕，彈出一個(gè)“新建可編輯區(qū)域”對(duì)話框，如圖所示，輸入這個(gè)區(qū)域的名稱，單

5、擊“確定”按鈕。7.3模板的應(yīng)用和更新利用模板快速生成新的網(wǎng)頁(yè)，也可以將模板應(yīng)用于已經(jīng)存在的網(wǎng)頁(yè)。7.3.2模板的更新1.模板的修改模板創(chuàng)建后，用戶利用模板生成了網(wǎng)頁(yè)文件。在網(wǎng)頁(yè)文件的編輯過(guò)程中可能會(huì)有一些不合適的地方，比如：鏈接有錯(cuò)誤、網(wǎng)頁(yè)布局中單元格對(duì)齊方式不合理、圖像不能正常顯示等，而對(duì)于鎖定區(qū)域，是無(wú)法在網(wǎng)頁(yè)編輯狀態(tài)進(jìn)行修改，因此需要對(duì)模板進(jìn)行修改。打開(kāi)模板文件，對(duì)模板文件進(jìn)行修改，針對(duì)在網(wǎng)頁(yè)編輯中發(fā)現(xiàn)的問(wèn)題進(jìn)行修改。修改模板：對(duì)鎖定區(qū)域進(jìn)行修改。刪除可編輯區(qū)域：在模板編輯狀態(tài)，選中已定義的可編輯區(qū)域，選擇“修改”菜單｜“模板”｜“刪除模板標(biāo)記”命令，該可編輯區(qū)域就

6、不存在了。2.用模板更新網(wǎng)頁(yè)和網(wǎng)站一旦模板被應(yīng)用到多個(gè)網(wǎng)頁(yè)文檔中，對(duì)此模板的修改則會(huì)更新全部與其相關(guān)聯(lián)的文檔。這種使用模板更新文件的方法大大節(jié)省了用戶的時(shí)間，尤其在涉及大量的改動(dòng)時(shí)極為有效。7.4使用庫(kù)Dreamweaver中提供了庫(kù)的概念。庫(kù)是用來(lái)存儲(chǔ)想要在整個(gè)網(wǎng)站上經(jīng)常重復(fù)使用或更新的網(wǎng)頁(yè)元素，其它網(wǎng)頁(yè)可調(diào)用庫(kù)文件。這樣一旦需要修改重復(fù)使用的部分，只需要修改庫(kù)文件，而其它調(diào)用此庫(kù)的頁(yè)面將會(huì)被全部更新。7.4.1創(chuàng)建庫(kù)庫(kù)項(xiàng)目可以包含多種網(wǎng)頁(yè)元素，如：圖像、鏈接、表格、腳本等，但CSS樣式表文件不能作為庫(kù)項(xiàng)目添加到庫(kù)。創(chuàng)建庫(kù)的常用方法有三種：方法一：選擇“窗口”菜單｜“資源

7、”命令，打開(kāi)“資源”面板，選擇“庫(kù)”選項(xiàng)，單擊“資源”面板下方的“新建庫(kù)項(xiàng)目”按鈕。方法一：選擇“文件”菜單｜“新建”命令，彈出“新建文檔”對(duì)話框，選擇“常規(guī)”選項(xiàng)卡｜“基本頁(yè)”｜“庫(kù)項(xiàng)目”命令，單擊“創(chuàng)建”按鈕，如圖所示。方法三：將已經(jīng)編輯好的網(wǎng)頁(yè)元素轉(zhuǎn)換為庫(kù)文件，首先選中要轉(zhuǎn)換為庫(kù)文件的網(wǎng)頁(yè)元素，然后選擇“修改”菜單｜“庫(kù)”｜“增加對(duì)象到庫(kù)”命令，當(dāng)前選中的網(wǎng)頁(yè)元素就會(huì)成為一個(gè)新的庫(kù)項(xiàng)目以供其它網(wǎng)頁(yè)調(diào)用。創(chuàng)建庫(kù)文件后，站點(diǎn)中就會(huì)多出子文件夾library，庫(kù)文件的默認(rèn)存儲(chǔ)路徑就是該文件夾。庫(kù)文件的后綴名為lbi