項(xiàng)目七模板、庫和浮動(dòng)框架的應(yīng)用2261用模板和庫創(chuàng)建秋季五金商品交易會(huì)網(wǎng)頁2制作“觀眾中心”欄目框架網(wǎng)頁目錄CONTENTS227任務(wù)1用模板和庫創(chuàng)建秋季五金商品交易會(huì)網(wǎng)頁2281.了解模板和庫的概念、形式、作用及應(yīng)用。2.能將現(xiàn)有的網(wǎng)頁另存為模板。3.能用模板和庫快速創(chuàng)建網(wǎng)頁。4.能編輯模板，定義和修改可編輯區(qū)域與可選區(qū)域，管理模板和庫。229本任務(wù)是模板和庫的應(yīng)用實(shí)例（下見圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握創(chuàng)建模板和庫、用模板和庫快速創(chuàng)建與更新網(wǎng)頁的過程及方法，熟悉用“資源”面板管理模板和庫項(xiàng)目的技巧。230231用模板和庫制作的網(wǎng)頁效果一、模板1.?模板的有關(guān)概念模板是一種擴(kuò)展名為.dwt的特殊類型的文件，類似于Word文檔的模板文件。模板用于制作同一個(gè)網(wǎng)站的各張網(wǎng)頁中“相同的”部分、設(shè)計(jì)“固定的”頁面布局?；谀０鍎?chuàng)建的文檔會(huì)繼承模板的頁面布局和“相同的”部分，并與模板保持鏈接關(guān)系，修改模板后，所有基于該模板創(chuàng)建的文檔都可以自動(dòng)更新。232模板中的區(qū)域可分為兩部分，一部分區(qū)域?qū)?yīng)基于模板創(chuàng)建的文檔中不能編輯的部分，稱為“不可編輯區(qū)域”；另一部分區(qū)域?qū)?yīng)基于模板創(chuàng)建的文檔中可以編輯的部分，稱為“可編輯區(qū)域”。2332.?模板的創(chuàng)建模板的創(chuàng)建方法有以下兩種。一種是新建空白模板，然后像制作普通網(wǎng)頁一樣插入內(nèi)容；另一種是將已經(jīng)制作好的普通網(wǎng)頁文件轉(zhuǎn)換為模板。（1）新建空白模板1）啟動(dòng)Dreamweaver?CC，單擊“文件”→“新建”命令，打開“新建文檔”對(duì)話框，在左側(cè)的列表中選擇“新建文檔”，在“文檔類型”列表中選擇“HITML模板”，在“布局”列表中選擇“無”，如圖所示。234235“新建文檔”對(duì)話框2）單擊“創(chuàng)建”按鈕，創(chuàng)建一個(gè)模板，并進(jìn)入編輯狀態(tài)，如圖所示。3）單擊“文件”→“保存”命令，會(huì)彈出提示對(duì)話框，在該提示對(duì)話框中勾選“不再警告我”復(fù)選框，然后單擊“確定”按鈕，如圖所示。236新建的模板及代碼

提示對(duì)話框4）彈出“另存模板”對(duì)話框，在“站點(diǎn)”下拉列表中選擇模板保存的站點(diǎn)（本項(xiàng)目站點(diǎn)為“moban”），在“另存為”文本框中輸入模板的名稱“t1”，然后單擊“保存”按鈕保存模板，如圖所示。237“另存模板”對(duì)話框

5）打開“文件”面板，可以看到其中多了一個(gè)名為“Templates”的文件夾，展開該文件夾，可以看到新建的模板“t1.dwt”，如圖所示。6）繼續(xù)像普通網(wǎng)頁一樣，輸入模板內(nèi)容后保存即可。238“文件”面板上的模板（2）將已經(jīng)制作好的普通網(wǎng)頁轉(zhuǎn)換為模板1）打開一個(gè)已經(jīng)制作好的HTML文檔，單擊“文件”→“另存為模板”命令，打開“另存模板”對(duì)話框。2）在“另存模板”對(duì)話框的“另存為”文本框中輸入模板名稱“t2”，并單擊“保存”按鈕，如圖所示。239“另存模板”對(duì)話框3）彈出提示對(duì)話框，詢問是否更新鏈接，一般情況下單擊“是”按鈕，如圖所示，這樣就將當(dāng)前打開的已制作好的HTML文檔另存為模板“t2”。240“更新鏈接”對(duì)話框2.?模板的編輯（1）設(shè)置可編輯區(qū)域1）單擊“文件”→“打開”命令，在“打開”對(duì)話框中選擇要修改的模板文件如“t2.dwt”，單擊“打開”按鈕。2）在打開的模板“t2.dwt”中將插入點(diǎn)移動(dòng)到需創(chuàng)建為可編輯區(qū)域的位置，或選擇要設(shè)置為可編輯區(qū)域的對(duì)象，如圖所示。241選擇要設(shè)置為可編輯區(qū)域的對(duì)象3）單擊“插入”→“模板”→“可編輯區(qū)域”命令，打開“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入可編輯區(qū)域的名稱，如圖所示。242“新建可編輯區(qū)域”對(duì)話框4）單擊“確定”按鈕，完成可編輯區(qū)域的創(chuàng)建，如圖所示。5）按組合快捷鍵Ctrl+S保存模板。243

新建的可編輯區(qū)域及代碼（2）刪除可編輯區(qū)域如果要將模板中標(biāo)記的可編輯區(qū)域變更為不可編輯區(qū)域，可在打開的模板中選中該可編輯區(qū)域，單擊“工具”→“模板”→“刪除模板標(biāo)記”命令即可。2443.?模板的應(yīng)用（1）在“新建文檔”對(duì)話框中選擇模板創(chuàng)建網(wǎng)頁1）按組合快捷鍵Ctrl+N打開“新建文檔”對(duì)話框。2）在對(duì)話框左側(cè)的列表中選擇“網(wǎng)站模板”，在“站點(diǎn)”列表中選擇模板所在的站點(diǎn)moban，在“站點(diǎn)‘moban’的模板”列表中選要使用的模板“t2”，單擊“創(chuàng)建”按鈕，如圖所示。245246“新建文檔”對(duì)話框中選擇模板3）在代碼視圖中選中“可編輯區(qū)域”中“交通指南”的樣式引用代碼（class=?"wy_now02"），剪切并粘貼到“展館分布”的代碼中，實(shí)現(xiàn)“展館分布”網(wǎng)頁導(dǎo)航內(nèi)容的樣式引用效果，按組合快捷鍵Ctrl+S將文檔保存到站點(diǎn)根文件夾下，并命名為“gzzx_zgfb.html”，如圖所示。247

修改可編輯區(qū)域中“交通指南”的樣式引用代碼（2）在“資源”面板上選擇模板創(chuàng)建網(wǎng)頁1）選擇“窗口”→“資源”命令，打開“資源”面板。2）單擊面板左側(cè)的“模板”按鈕，其右側(cè)將顯示該站點(diǎn)中包含的所有模板。選擇所需的模板，如圖所示。248

在“資源”面板上選擇模板3）用鼠標(biāo)右鍵單擊所選擇的模板，在彈出的快捷菜單中選擇“從模板新建”命令，如圖所示。4）參照“新建文檔”對(duì)話框中選擇模板創(chuàng)建網(wǎng)頁的相關(guān)步驟編輯可編輯區(qū)域中的內(nèi)容，再保存文檔，完成網(wǎng)頁的創(chuàng)建。249選擇模板創(chuàng)建網(wǎng)頁4.?模板的管理模板的管理主要包括打開并編輯模板、更新模板、刪除模板和重命名模板等。（1）打開并編輯模板1）在“資源”面板中單擊面板左側(cè)的“模板”按鈕，“資源”面板會(huì)列出站點(diǎn)可用的所有模板并顯示當(dāng)前選定模板的預(yù)覽。2502）執(zhí)行下列操作之一，可打開模板。①在模板上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中單擊“編輯”命令。②雙擊要編輯的模板打開模板。③選擇要編輯的模板，然后單擊“資源”面板底部的“編輯”按鈕。3）修改模板的內(nèi)容之后保存模板。251（2）更新模板在修改完模板并保存時(shí)，Dreamweaver?CC會(huì)彈出“更新模板文件”對(duì)話框，如圖所示，單擊“更新”按鈕可更新基于該模板創(chuàng)建的所有網(wǎng)頁；單擊“不更新”按鈕，則只保存模板而不更新基于該模板創(chuàng)建的網(wǎng)頁。252“更新模板文件”對(duì)話框（3）刪除模板在“資源”面板中選中不再需要的模板后按Delete鍵，會(huì)彈出如圖所示的提示框。如果確認(rèn)刪除模板，單擊“是”按鈕；如果不想刪除模板，單擊“否”按鈕。253“更新模板文件”對(duì)話框（4）重命名模板1）在“資源”面板上單擊模板的名稱以選擇模板。2）再次單擊模板的名稱，以使模板的名稱可選，然后輸入一個(gè)新名稱，按Enter鍵使更改生效。3）彈出如圖所示“更新模板文件”對(duì)話框，如果想更新站點(diǎn)中所有基于此模板的文檔，單擊“更新”按鈕；如果不想更新基于此模板的任何文檔，單擊“不更新”按鈕。254“更新模板文件”對(duì)話框二、庫項(xiàng)目1.?庫和庫項(xiàng)目的有關(guān)概念庫是一種特殊的Dreamweaver文件，其中包含可放置到網(wǎng)頁中的一組單個(gè)資源或資源副本。庫中的這些資源稱為庫項(xiàng)目，它是Dreamweaver?CC中自定義的網(wǎng)頁元素。每當(dāng)編輯某個(gè)庫項(xiàng)目時(shí)，可自動(dòng)更新所有使用該項(xiàng)目的頁面?？稍趲熘写鎯?chǔ)的庫項(xiàng)目包括文本、圖像、表格、聲音、表單、導(dǎo)航條等網(wǎng)頁元素。每當(dāng)需要某個(gè)庫項(xiàng)目時(shí)可直接從庫中調(diào)用。每當(dāng)編輯某個(gè)庫項(xiàng)目時(shí)，可以自動(dòng)更新所有使用該庫項(xiàng)目的頁面。2552.?庫項(xiàng)目的創(chuàng)建（1）在Dreamweaver?CC中打開網(wǎng)頁文件，單擊“窗口”→“資源”命令，打開“資源”面板。單擊左側(cè)導(dǎo)航欄中的“庫”按鈕，右側(cè)的面板顯示為“庫”面板，面板的上方為當(dāng)前庫項(xiàng)目的縮略圖，下方為庫項(xiàng)目的名稱。若當(dāng)前沒有庫項(xiàng)目，則均為空白，如圖所示。256“庫”面板（2）選中網(wǎng)頁中要?jiǎng)?chuàng)建為庫項(xiàng)目的網(wǎng)頁元素如網(wǎng)頁頭部，單擊“庫”面板下方的“+”按鈕，在打開的提示對(duì)話框中單擊“確定”按鈕，如圖所示。257創(chuàng)建庫項(xiàng)目（3）可看到“資源”面板生成的庫項(xiàng)目名稱顯示泛白效果（可編輯），用戶輸入所需的庫項(xiàng)目名稱，并按Enter鍵，這時(shí)會(huì)彈出“更新文件”對(duì)話框，根據(jù)情況選擇即可，如圖所示。可發(fā)現(xiàn)當(dāng)前站點(diǎn)中多了存放庫項(xiàng)目的文件夾“Library”，“資源”面板上多了庫項(xiàng)目“top”。258新創(chuàng)建的庫項(xiàng)目和“更新文件”對(duì)話框3.?庫項(xiàng)目的編輯在“庫”面板中要編輯的庫項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯”命令，可打開庫項(xiàng)目并在文檔窗口中修改。修改庫項(xiàng)目后進(jìn)行保存操作，會(huì)彈出“更新庫項(xiàng)目”對(duì)話框，單擊“更新”按鈕可以更新站點(diǎn)中使用了該庫項(xiàng)目的網(wǎng)頁。259任務(wù)2制作“觀眾中心”欄目框架網(wǎng)頁2601.?了解網(wǎng)頁中浮動(dòng)框架的形式、作用和應(yīng)用。2.?能根據(jù)需要?jiǎng)?chuàng)建和保存浮動(dòng)框架，創(chuàng)建浮動(dòng)框架超鏈接。3.?能初步掌握浮動(dòng)框架標(biāo)簽及屬性代碼的編輯方法。261本任務(wù)是一個(gè)浮動(dòng)框架應(yīng)用實(shí)例（見下圖

）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、“屬性”面板、代碼視圖創(chuàng)建浮動(dòng)框架并設(shè)置同時(shí)顯示多個(gè)網(wǎng)頁的方法和技巧，熟悉框架網(wǎng)頁布局技術(shù)。262263單擊鏈接“交通指南”效果單擊鏈接“展館分布”效果一、框架和框架集的概念框架是一種獨(dú)特的網(wǎng)頁布局技術(shù)，它能把瀏覽器窗口分割成多個(gè)相互獨(dú)立的區(qū)域，每個(gè)區(qū)域即為一個(gè)框架，并且各個(gè)框架可分別加載和展示不同的HTML文檔。而框架集本質(zhì)上是一個(gè)網(wǎng)頁文件，其主要職責(zé)是記錄網(wǎng)頁內(nèi)各個(gè)框架的詳細(xì)信息，涵蓋框架的布局架構(gòu)、在頁面中的具體位置以及尺寸大小等關(guān)鍵要素。264二、框架網(wǎng)頁的構(gòu)成與分類利用框架進(jìn)行布局設(shè)計(jì)的網(wǎng)頁被稱作框架網(wǎng)頁，它主要由框架（frame）和框架集（frameset）兩個(gè)核心部分共同組成。在過往的網(wǎng)頁設(shè)計(jì)中，BBS論壇頁面、網(wǎng)站的后臺(tái)管理頁面等常采用框架技術(shù)來構(gòu)建布局?？蚣懿季志哂幸欢ǖ膬?yōu)勢，例如其結(jié)構(gòu)清晰明了，便于網(wǎng)站管理者進(jìn)行內(nèi)容的組織與管理，在更新部分框架內(nèi)容時(shí)相對(duì)便捷，同時(shí)一些通用的框架布局還可在不同頁面中重復(fù)使用。然而，框架也存在明顯的缺點(diǎn)，需要同時(shí)加載多個(gè)框架的內(nèi)容，會(huì)導(dǎo)致頁面整體加載速度減慢。在維護(hù)方面，由于框架之間的關(guān)聯(lián)性，一旦出現(xiàn)問題，維護(hù)的難度較大。對(duì)于訪問者而言，難以直接將框架中顯示的單個(gè)網(wǎng)頁進(jìn)行收藏。265三、浮動(dòng)框架（iframe）的特點(diǎn)與應(yīng)用在當(dāng)前的網(wǎng)頁設(shè)計(jì)中，浮動(dòng)框架（iframe）是較為常用的一種技術(shù)。浮動(dòng)框架也被稱為內(nèi)聯(lián)框架，它與普通框架有所不同。普通框架必須依托于框架集存在，并且其在頁面中的顯示位置相對(duì)固定。而浮動(dòng)框架則無須框架集的支持，它不僅具備普通框架的基本功能，如在一個(gè)頁面中展示不同的文檔內(nèi)容，而且具有更高的靈活性。它可以在網(wǎng)頁內(nèi)的任意位置自由、獨(dú)立地嵌入，當(dāng)用戶點(diǎn)擊超鏈接后，能夠?qū)㈡溄禹撁娴膬?nèi)容直接顯示在當(dāng)前頁面的某個(gè)浮動(dòng)框架內(nèi)，而無須重新打開瀏覽器窗口，從而有效地實(shí)現(xiàn)了在當(dāng)前網(wǎng)頁文檔中嵌入另一個(gè)網(wǎng)頁文檔的功能，在現(xiàn)代網(wǎng)頁布局中發(fā)揮著獨(dú)特且重要的作用。2661.浮動(dòng)框架的形式打開應(yīng)用了浮動(dòng)框架的網(wǎng)頁文件“gzzx.html”，單擊觀眾中心欄目導(dǎo)航菜單中的“交通指南”，預(yù)覽網(wǎng)頁，如圖所示。267單擊鏈接“交通指南”效果單擊觀眾中心欄目導(dǎo)航菜單中的“展館分布”，如圖所示。對(duì)比上圖和右圖所示效果，可以發(fā)現(xiàn)單擊觀眾中心欄目導(dǎo)航菜單中的各個(gè)欄目時(shí)，網(wǎng)頁窗口未切換，只是導(dǎo)航菜單對(duì)應(yīng)的網(wǎng)頁內(nèi)容依次出現(xiàn)在觀眾中心欄目導(dǎo)航菜單右側(cè)的區(qū)域中，這個(gè)區(qū)域就是浮動(dòng)框架窗口。浮動(dòng)框架的標(biāo)簽格式為：<iframesrc="URL"width="x"height="x"scrolling=""frameborder="x"name="main"></