下載網(wǎng)頁(yè)網(wǎng)站制作教程第10章

1、 第10章 用框架、模板和庫(kù)制作網(wǎng)頁(yè) Dreamweaver 8(網(wǎng)頁(yè)制作）主 講：張景山24.1相似的圖形 凌格風(fēng)空機(jī) wk11 本章知識(shí)點(diǎn)及學(xué)習(xí)目標(biāo) 本章主要講述了框架、模板和庫(kù)在網(wǎng)頁(yè)中的運(yùn)用。首先從框架開始介紹了框架的概念，框架的創(chuàng)建、框架的保存、框架的選擇和框架的編輯等內(nèi)容。然后講述了模板和庫(kù)的創(chuàng)建、修改以及應(yīng)用等幾個(gè)方面的知識(shí)。相信通過(guò)本章的學(xué)習(xí)，讀者對(duì)框架、模板和庫(kù)在網(wǎng)頁(yè)設(shè)計(jì)和制作中的應(yīng)用已經(jīng)比較熟悉了。 了解什么是框架 創(chuàng)建模板可編輯區(qū)域如何創(chuàng)建框架和框架集 創(chuàng)建基于模板的頁(yè)面選擇和編輯框架的方法 在基于模板的頁(yè)面中編輯內(nèi)容保存框架文檔 將目標(biāo)應(yīng)用到現(xiàn)有文檔將頁(yè)面載入框架 編輯和

2、更新模板認(rèn)識(shí)模板 創(chuàng)建庫(kù)項(xiàng)目創(chuàng)建和保存模板 插入庫(kù)項(xiàng)目查看模板 修改庫(kù)和更新站點(diǎn)本書內(nèi)容概覽10.1什么是框架10.2使用框架 10.2.1創(chuàng)建框架和框架集 10.2.2選擇和編輯框架 10.2.3保存框架文檔 10.2.4將頁(yè)面載入框架10.3認(rèn)識(shí)模板 10.3.1關(guān)于模板 103.2進(jìn)一步認(rèn)識(shí)認(rèn)識(shí)模板10.4模板的使用 10.4.1創(chuàng)建和保存模板 10.4.2查看模板 10.4.3創(chuàng)建編輯區(qū)域 10.4.4創(chuàng)建基于模板的頁(yè)面 10.4.5在基于模板的頁(yè)面中編輯內(nèi)容 10.4.6將模板應(yīng)用到現(xiàn)有文檔 10.4.7編輯和更新模板10.5庫(kù)的創(chuàng)建與使用 10.5.1創(chuàng)建庫(kù)項(xiàng)目 10.5.2插入庫(kù)

3、項(xiàng)目 10.5.3修改庫(kù)和更新站點(diǎn)10.6實(shí)戰(zhàn)演練 10.6.1 范例1 設(shè)置框架鏈接 10.6.2 范例2 使用模板、庫(kù)創(chuàng)建網(wǎng)頁(yè)10.7思考與練習(xí)10.1什么是框架 框架技術(shù)由框架集和框架兩部分組成。框架集顧明思義就是多個(gè)框架的集合，它定義了所包含地多個(gè)框架地結(jié)構(gòu)、數(shù)量、大小尺寸以及框架中的頁(yè)面文件名和路徑等有關(guān)框架的屬性?？蚣芗⒉辉跒g覽器中顯示，只是存儲(chǔ)所含框架的相關(guān)信息，框架集中地全部框架文件組合在一起就構(gòu)成了一個(gè)網(wǎng)頁(yè)頁(yè)面。框架僅是框架集的組成元素，框架中的頁(yè)面是整個(gè)網(wǎng)頁(yè)頁(yè)面的一部分，是一個(gè)矩形區(qū)域，具有網(wǎng)頁(yè)的所有屬性和功能。如圖所示便是一個(gè)框架網(wǎng)頁(yè)，在該網(wǎng)頁(yè)中共包含了3個(gè)子框架網(wǎng)頁(yè)，

4、從圖中地【框架】面板中更容易看出網(wǎng)頁(yè)的框架結(jié)構(gòu)。 10.2使用框架 學(xué)習(xí)框架就是為了更好地使用框架。在本節(jié)就一些來(lái)學(xué)習(xí)如何創(chuàng)建框架、保存框架以及框架相關(guān)的屬性設(shè)置等內(nèi)容。 10.2.1創(chuàng)建框架和框架集 在 Dreamweaver 8 中已經(jīng)提供了許多預(yù)置的框架集，既可以從預(yù)定義的框架集中選擇，也可以自己設(shè)計(jì)框架集。 1使用預(yù)置的框架集創(chuàng)建框架網(wǎng)頁(yè)2創(chuàng)建自定義框架網(wǎng)頁(yè) 10.2.2選擇和編輯框架 1在框架面板中選擇框架和框架集 要修改框架或框架集，首先要選擇要修改的框架或框架集?？梢栽谠O(shè)計(jì)視圖（文檔窗口）中，使用框架面板選擇框架或框架集。2在文檔窗口中選擇框架或框架集 在文檔窗口中按下【Alt】

5、并在預(yù)選擇的框架內(nèi)單擊，該框架可以被選中。用鼠標(biāo)單擊框架的邊框整個(gè)框架集可以被選中，被選中框架集內(nèi)的所有框架的邊框都帶有虛線輪廓。 10.2.3保存框架文檔 要在瀏覽器中預(yù)覽頁(yè)面，必須先保存框架集和框架文件?？梢苑謩e保存框架集或框架文件，也可以同時(shí)保存所有框架和框架集文件。 10.2.4將頁(yè)面載入框架 當(dāng)完成框架頁(yè)面的創(chuàng)建后，可以直接在框架集的框架頁(yè)面中插入表格、圖像以及多媒體等網(wǎng)頁(yè)元素，完成整個(gè)網(wǎng)頁(yè)的制作，也可以將已經(jīng)完成的頁(yè)面載入框架 。10.3認(rèn)識(shí)模板 使用過(guò)Word的人一提到模板都會(huì)贊不絕口，因?yàn)樗窃谑翘奖懔?，運(yùn)用模板可以將許多文字編輯中的重復(fù)性的工作都可以被放置到模板中，這樣只需

6、辛苦一次，以后再遇到相同的工作時(shí)，直接套用模板就可以了。編輯文字是這樣，制作網(wǎng)頁(yè)同樣也可以這樣，Dreamweaver8就提供了模板功能，對(duì)于網(wǎng)頁(yè)制作者來(lái)說(shuō)，這可是個(gè)天大的福音，它意味著從此可以擺脫不停地、重復(fù)地做同一件事件的痛苦勞作了。 10.3.1關(guān)于模板 使用模板創(chuàng)建文檔可以使網(wǎng)站和網(wǎng)頁(yè)具有統(tǒng)一的結(jié)構(gòu)和外觀，如果有好幾個(gè)網(wǎng)頁(yè)想要用同一風(fēng)格來(lái)制作，用【模板】絕對(duì)是最有效，并且也是最快的方法。模板實(shí)質(zhì)上就是作為創(chuàng)建其他文檔的基礎(chǔ)文檔。在創(chuàng)建模板時(shí)，可以說(shuō)明哪些網(wǎng)頁(yè)元素應(yīng)該長(zhǎng)期保留，不可編輯，哪些元素可以編輯修改。 模板的優(yōu)點(diǎn)風(fēng)格一致，看起來(lái)比較系統(tǒng)，也省去了制作同一頁(yè)面的麻煩。如果要修改共同

7、的頁(yè)面不必一個(gè)一個(gè)修改，只要更改應(yīng)用于它們之上的“模板”就可以了。免除了以前沒(méi)有此功能時(shí)還要常?！玖泶鏋椤浚徊恍⌒母采w重要檔案的困擾。10.3.2進(jìn)一步認(rèn)識(shí)認(rèn)識(shí)模板 Macromedia Dreamweaver 8 模板是一種特殊類型的文檔，用于設(shè)計(jì)具有固定的頁(yè)面結(jié)構(gòu)布局；我們可以基于模板創(chuàng)建文檔，從而使創(chuàng)建的文檔繼承模板的頁(yè)面布局。設(shè)計(jì)模板時(shí)，可以指定在基于模板的文檔中用戶可以編輯文檔的哪些區(qū)域。 將文檔另存為模板時(shí)，Dreamweaver 自動(dòng)鎖定文檔的大部分區(qū)域。模板創(chuàng)作者指定基于模板的文檔中的哪些區(qū)域可編輯，可在模板中插入可編輯區(qū)域或可編輯參數(shù)。 創(chuàng)建模板時(shí)，可編輯區(qū)域和鎖定區(qū)域都可

8、以更改。但是，在基于模板的文檔中，模板用戶只能在可編輯區(qū)域中進(jìn)行更改；無(wú)法修改鎖定區(qū)域。共有四種類型的模板區(qū)域。【可編輯區(qū)域】：是基于模板的文檔中的未鎖定區(qū)域；它是模板用戶可以編輯的部分?！局貜?fù)區(qū)域】：是文檔中設(shè)置為重復(fù)的布局部分。例如，可以設(shè)置重復(fù)一個(gè)表格行?！究蛇x區(qū)域】：是在模板中指定為可選的部分，用于保存有可能在基于模板的文檔中出現(xiàn)的內(nèi)容（如可選文本或圖像）?！究删庉嫎?biāo)簽屬性】：可以在模板中編輯標(biāo)簽屬性，以便該屬性可以在基于模板的頁(yè)面中編輯。例如，可以【鎖定】在文檔中出現(xiàn)的圖像，但讓模板用戶將對(duì)齊設(shè)為左對(duì)齊、右對(duì)齊或居中對(duì)齊等屬性。10.4模板的使用 學(xué)習(xí)模板就是為了更好的使用模板，為網(wǎng)

9、頁(yè)設(shè)計(jì)和制作服務(wù)。在接下來(lái)的操作中將一起學(xué)習(xí)如何創(chuàng)建模板、保存模板、設(shè)置模板以及使用模板等操作。 10.4.1創(chuàng)建和保存模板 創(chuàng)建模板有2條途徑，既可以從新建的空白HTML文檔中創(chuàng)建模板，也可以把現(xiàn)有的HTML文檔存為模板，并通過(guò)對(duì)可編輯區(qū)域進(jìn)行適當(dāng)?shù)男薷?，使之符合新的網(wǎng)頁(yè)設(shè)計(jì)要求。Dreamweaver 8自動(dòng)把模板存儲(chǔ)在站點(diǎn)的本地根文件夾下的Templates子文件夾中。如果此文件夾不存在，當(dāng)在站點(diǎn)中存儲(chǔ)第一個(gè)模板時(shí)，Dreamweaver 8將自動(dòng)在本地根文件夾中生成此子文件夾（Templates）。 10.4.2查看模板使用【資源】面板的【模板】類別可以管理現(xiàn)有模板，包括重命名模板文件

10、和刪除模板文件。 1. 重命名模板2. 刪除模板10.4.3創(chuàng)建編輯區(qū)域 在模板創(chuàng)建之后，需要根據(jù)自己的具體要求對(duì)模板中的具體內(nèi)容進(jìn)行編輯，指定哪些內(nèi)容可以編輯，哪些內(nèi)容不能編輯（鎖定）。 在模板文檔中，可編輯區(qū)是頁(yè)面中變化的部分，如每日導(dǎo)讀的內(nèi)容等。鎖定區(qū)（不可編輯區(qū)）是各頁(yè)面中相對(duì)保持不變的部分，如導(dǎo)航欄和欄目標(biāo)志等。 當(dāng)我們新創(chuàng)建一個(gè)模板或把已有的文檔存為模板時(shí)，Dreamweaver 8默認(rèn)把所有區(qū)域被標(biāo)記為鎖定。因此，我們必須根據(jù)自己的要求對(duì)模板進(jìn)行編輯，把某些部分標(biāo)記為可編輯的。 在編輯模板時(shí)，可以修改可編輯區(qū)，也可以修改鎖定區(qū)。但當(dāng)該模板被應(yīng)用于文檔時(shí)，只能修改文檔的可編輯區(qū)，文

11、檔的鎖定區(qū)是不允許修改的。1. 定義新的可編輯區(qū)2. 定義可編輯的重復(fù)區(qū)域3. 取消可編輯區(qū)標(biāo)記 10.4.4創(chuàng)建基于模板的頁(yè)面 創(chuàng)建模板只是為了以后使用模板打下良好的基礎(chǔ)，用戶可以在此基礎(chǔ)上分別添加內(nèi)容，從而創(chuàng)建一系列具有相同外觀的頁(yè)面。 10.4.5在基于模板的頁(yè)面中編輯內(nèi)容 在基于模板所創(chuàng)建的新頁(yè)面中，模板中所定義的不可編輯區(qū)域中鼠標(biāo)不可用，呈現(xiàn) 狀態(tài)。而在可編輯區(qū)域鼠標(biāo)可用，可以直接在可編輯區(qū)域中輸入特定的內(nèi)容。這不但保證了系列頁(yè)面風(fēng)格一致性，也保證了鎖定區(qū)域內(nèi)容不被破壞，從而大大提高了設(shè)計(jì)效率。 10.4.6將模板應(yīng)用到現(xiàn)有文檔在很多時(shí)候，已經(jīng)有了大量未使用模板的網(wǎng)頁(yè)，現(xiàn)在想要將其轉(zhuǎn)

12、換為統(tǒng)一的外觀，此時(shí)就可以利用將模板應(yīng)用到現(xiàn)有文檔的方法來(lái)統(tǒng)一這些頁(yè)面的風(fēng)格。 10.4.7編輯和更新模板模板創(chuàng)建好以后并非一成不變，可以根據(jù)實(shí)際需要，隨時(shí)編輯模板以滿足新的設(shè)計(jì)要求。當(dāng)修改一個(gè)模板時(shí)，Dreamweaver 8會(huì)提示我們是否更新應(yīng)用該模板的網(wǎng)頁(yè)。當(dāng)然也可以使用更新命令，手工更新當(dāng)前網(wǎng)頁(yè)或整個(gè)站點(diǎn)。 10.5庫(kù)的創(chuàng)建與使用庫(kù)是一種特殊的 Dreamweaver 文件，其中包含用戶已創(chuàng)建的單獨(dú)資源或資源副本的集合。庫(kù)中可以存放各種各樣的頁(yè)面元素，如圖像、表格、聲音和Flash影片。庫(kù)里的這些資源稱為庫(kù)項(xiàng)目。在需要時(shí)，可以把庫(kù)項(xiàng)目拖放到文檔中。這時(shí)，Dreamweaver 8會(huì)在文

13、檔中插入該庫(kù)項(xiàng)目的文件。這樣，通過(guò)修改庫(kù)項(xiàng)目，即可實(shí)現(xiàn)整個(gè)網(wǎng)站各頁(yè)面上與庫(kù)項(xiàng)目相關(guān)內(nèi)容的一次性更新，既快捷又方便。Dreamweaver 8將庫(kù)項(xiàng)目存放在每個(gè)站點(diǎn)的本地根目錄下的Library文件夾中，擴(kuò)展名為.lbi，而將所有的模板文件都存放在站點(diǎn)根目錄下的Templates子目錄中，擴(kuò)展名為.dwt。 10.5.1創(chuàng)建庫(kù)項(xiàng)目庫(kù)可以是各種網(wǎng)頁(yè)元素。Dreamweaver 8保存的只是對(duì)被鏈接項(xiàng)目（如圖像）的引用。原始文件必須保留在指定的位置，這樣才能保證庫(kù)項(xiàng)目的正確引用。庫(kù)項(xiàng)目也可以包含行為，但是在庫(kù)項(xiàng)目中編輯行為有一些特殊的要求，例如庫(kù)項(xiàng)目不能包含時(shí)間軸或樣式表等。創(chuàng)建庫(kù)項(xiàng)目時(shí)，先選取文檔主體的某一部分，然后由Dreamweaver 8轉(zhuǎn)換為庫(kù)項(xiàng)目。 10.5.2插入庫(kù)項(xiàng)目把庫(kù)項(xiàng)目添加到頁(yè)面時(shí)，實(shí)際內(nèi)容以及對(duì)項(xiàng)目的引用就會(huì)被插入到文檔中。 10.5.3修改庫(kù)和更新站點(diǎn) 當(dāng)編輯庫(kù)項(xiàng)目時(shí)，可以更新使用該項(xiàng)目的所有文檔，也可以選擇不更新。 庫(kù)項(xiàng)目其他種類的更改包括。重命名項(xiàng)目以斷開其與文檔或模板的鏈接；從站點(diǎn)的庫(kù)中刪除項(xiàng)目；重新創(chuàng)建丟失的庫(kù)項(xiàng)目。10.6 實(shí)戰(zhàn)演練 通過(guò)前面的學(xué)習(xí)，我們