《中文版Dreamweaver CS5網(wǎng)頁設(shè)計(jì)實(shí)用教程》第7章 模板與庫

中文版DreamweaverCS5網(wǎng)頁設(shè)計(jì)實(shí)用教程模板7.1第7章

模板與庫7.3資源面板7.2庫7.1模板一、創(chuàng)建模板二、將網(wǎng)頁存儲(chǔ)為模板三、設(shè)置模板的可編輯區(qū)域四、用模板新建網(wǎng)頁五、套用模板六、用模板更新網(wǎng)頁及網(wǎng)站七、模板的相關(guān)操作7.1模板創(chuàng)建模板的方法如下：（1）執(zhí)行“文件/新建”命令，打開“新建文檔”對(duì)話框。如圖7-1所示，選擇“空模板”下的“HTML模板”，單擊“創(chuàng)建”按鈕，進(jìn)入到編輯界面。圖7-1“新建文檔”對(duì)話框7.1模板（2）在編輯界面中可以像編輯普通網(wǎng)頁一樣編輯模板，如圖7-2所示。圖7-2模板的編輯界面7.1模板（3）使用前面講解的編輯網(wǎng)頁的方法，把當(dāng)前網(wǎng)站中各網(wǎng)頁共有的元素放到指定位置，如基本的框架、網(wǎng)站左上角的標(biāo)識(shí)、首頁鏈接等。（4）設(shè)置完成后，執(zhí)行“文件/保存”命令，打開如圖7-3所示的“另存模板”對(duì)話框，在該對(duì)話框中選擇存放模板的站點(diǎn)，然后命名模板名稱，單擊“保存”按鈕完成保存。圖7-3“另存模板”對(duì)話框7.1模板還可以使用資源面板來創(chuàng)建模板，方法如下所示：（1）單擊“窗口/資源”，打開“資源”面板，單擊圖7-4所示的“模板”按鈕。圖7-4“模板”按鈕7.1模板（2）單擊“新建模板”按鈕，如圖7-5所示，在資源欄中新增一個(gè)模板。輸入模板名稱后按【Enter】鍵。（3）當(dāng)需要編輯該模板時(shí)，可雙擊該模板圖標(biāo)，或在選擇該模板后，單擊“編輯”按鈕。（4）編輯該模板后保存。

圖7-5新增一個(gè)模板二、將網(wǎng)頁存儲(chǔ)為模板將現(xiàn)有網(wǎng)頁存儲(chǔ)為模板的方法如下所示:（1）打開一個(gè)網(wǎng)頁。（2）執(zhí)行“文件/另存為模板”命令，打開“另存模板”對(duì)話框。也可以切換到“插入”面板的“常用”選項(xiàng)卡中，單擊圖7-6所示的“創(chuàng)建模板”按鈕，打開“另存模板”對(duì)話框。二、將網(wǎng)頁存儲(chǔ)為模板圖7-6“創(chuàng)建模板”按鈕二、將網(wǎng)頁存儲(chǔ)為模板（3）在圖7-7所示的“另存模板”對(duì)話框中，選擇保存模板的站點(diǎn)，設(shè)置模板的名稱，單擊“保存”按鈕，打開如圖7-8所示的更新鏈接提示框。圖7-7“另存模板”對(duì)話框

圖7-8更新鏈接提示框二、將網(wǎng)頁存儲(chǔ)為模板（4）在如圖7-8所示的提示框中單擊“是”按鈕，完成模板另存。在網(wǎng)站中建立模板后，會(huì)發(fā)現(xiàn)在站點(diǎn)中多了一個(gè)Templates文件夾，如圖7-9所示，所有模板都自動(dòng)放置在這個(gè)文件夾下。資源面板中顯示了當(dāng)前站點(diǎn)下的所有模板。圖7-9新建的模圖7-8更新鏈接提示框三、設(shè)置模板的可編輯區(qū)域（1）單擊或框選目標(biāo)區(qū)域。（2）執(zhí)行“插入/模板對(duì)象/可編輯區(qū)域”命令，打開圖7-10所示的“新建可編輯區(qū)域”對(duì)話框。（3）在該對(duì)話框中輸入該可編輯區(qū)域名稱，單擊“確定”按鈕，完成該區(qū)域可編輯的指定。圖7-10“新建可編輯區(qū)域”對(duì)話框四、用模板新建網(wǎng)頁利用模板制作網(wǎng)頁的方法如下：（1）執(zhí)行“文件/新建”命令，打開“新建文檔”對(duì)話框，（2）如圖7-11所示，選擇模板中的頁，選擇目標(biāo)站點(diǎn)中的模板，單擊”創(chuàng)建”按鈕。圖7-11模板中的頁四、用模板新建網(wǎng)頁（3）如圖7-12所示，在設(shè)計(jì)視圖中可以直接向可編輯區(qū)域中輸入內(nèi)容。（4）最后執(zhí)行“文件/保存”命令。圖7-12在可編輯區(qū)域中輸入內(nèi)容五、套用模板制作好模板后，我們便可以將模板套用到網(wǎng)頁中，具體方法如下：（1）新建一個(gè)HTML文檔。（2）執(zhí)行“修改/模板/應(yīng)用模板到頁”命令，打開“選擇模板”對(duì)話框。在“選擇模板”對(duì)話框中選擇要套用的目標(biāo)模板，單擊“選定”按鈕，如圖7-13所示。步驟（2）也可以用下面的方法代替：打開“資源”面板的“模板”標(biāo)簽，選擇目標(biāo)模板，單擊“應(yīng)用”按鈕。圖7-13“選擇模板”對(duì)話框五、套用模板（3）如果當(dāng)前網(wǎng)頁含有的內(nèi)容與準(zhǔn)備套用的模板不完全相符，會(huì)彈出圖7-14所示的“不一致的區(qū)域名稱”對(duì)話框。圖7-14“不一致的區(qū)域名稱”對(duì)話框五、套用模板（4）先單擊目標(biāo)內(nèi)容，然后再單擊“將內(nèi)容移到新區(qū)域”右側(cè)的下拉按鈕，在彈出的下拉菜單中選擇目標(biāo)可編輯區(qū)域，如圖7-15所示。圖7-15選擇目標(biāo)可編輯區(qū)域六、用模板更新網(wǎng)頁及網(wǎng)站（1）修改模板，執(zhí)行“文件/保存”命令，彈出圖7-16所示的“更新模板文件”提示框。在圖中列出了當(dāng)前站點(diǎn)中所有使用該模板建立的網(wǎng)頁。（2）單擊“更新”按鈕，彈出圖7-17所示的“更新頁面”對(duì)話框。圖7-16“更新模板文件”提示框

圖7-17“更新頁面”對(duì)話框六、用模板更新網(wǎng)頁及網(wǎng)站（3）如圖7-18所示，選擇“整個(gè)站點(diǎn)”，選擇目標(biāo)站點(diǎn)名稱，單擊“開始”按鈕開始更新。（4）更新完成后，單擊“關(guān)閉”按鈕，關(guān)閉“更新頁面”對(duì)話框。也可以在保存時(shí)，在彈出的提示框中選擇不更新，等整體修改完成后，執(zhí)行“修改/更新/更新當(dāng)前頁”命令，打開圖7-17所示的“更新頁面”對(duì)話框。然后進(jìn)行更新操作。圖7-18選擇“整個(gè)站點(diǎn)”六、用模板更新網(wǎng)頁及網(wǎng)站若修改模板時(shí)出現(xiàn)與原始模板中的可編輯區(qū)域無法對(duì)應(yīng)的情況，在執(zhí)行更新操作時(shí)會(huì)彈出如圖7-19所示的提示框，在該提示框中匹配編輯區(qū)域就可以了。例如刪除原始模板中的可編輯區(qū)域后，在彈出的“不一致的區(qū)域名稱”對(duì)話框中選擇提示中的“可編輯區(qū)域”。匹配工作完成后單擊“確定”按鈕，回到圖7-16所示的“更新模板文件”對(duì)話框。圖7-19“不一致的區(qū)域名稱”對(duì)話框七、模板的相關(guān)操作如果要查看、修改文檔所套用的模板，可用下列方法來完成：（1）打開一個(gè)套用了模板的網(wǎng)頁文件。（2）執(zhí)行“修改/模板/打開附加模板”命令。若要終止文檔與模板之間的關(guān)聯(lián)關(guān)系，即將文檔與模板分離，可以用下列方法來完成：（1）打開一個(gè)套用了模板的網(wǎng)頁文件。（2）執(zhí)行“修改/模板/從模板中分離”命令。7.2庫一、創(chuàng)建庫項(xiàng)目二、將網(wǎng)頁元素制作成庫項(xiàng)目三、將庫項(xiàng)目應(yīng)用到網(wǎng)頁中四、編輯庫項(xiàng)目五、脫離庫項(xiàng)目控制一、創(chuàng)建庫項(xiàng)目（1）執(zhí)行“窗口/資源”命令，打開資源面板。單擊“庫”按鈕，顯示如圖7-20所示的庫面板。（2）如圖7-21所示，單擊“庫”面板中的“新建庫項(xiàng)目”按鈕，新建一個(gè)庫項(xiàng)目，輸入庫項(xiàng)目名稱后按【Enter】鍵。圖7-20庫界面

圖7-21新建一個(gè)庫項(xiàng)目一、創(chuàng)建庫項(xiàng)目（3）雙擊“庫項(xiàng)目”圖標(biāo)，或單擊“庫”面板中的“編輯”按鈕，進(jìn)入到圖7-22所示的編輯界面。編輯庫項(xiàng)目與編輯網(wǎng)頁的方法相同。（4）編輯完成后，執(zhí)行“文件/保存”命令。圖7-22庫工作界面二、將網(wǎng)頁元素制作成庫項(xiàng)目將網(wǎng)頁中的元素制作成庫項(xiàng)目的方法如下：（1）打開網(wǎng)頁，選取目標(biāo)網(wǎng)頁元素。（2）可將網(wǎng)頁元素直接拖到庫面板中；也可以執(zhí)行“修改/庫/增加對(duì)象到庫”命令；還可以單擊庫面板中的“新建庫項(xiàng)目”按鈕。（3）網(wǎng)頁元素添加到庫面板中后，輸入庫項(xiàng)目名稱即可。應(yīng)用到網(wǎng)頁中的庫項(xiàng)目被看成是一個(gè)獨(dú)立的個(gè)體，無法直接在網(wǎng)頁中進(jìn)行修改。因此在制作庫項(xiàng)目時(shí)，應(yīng)當(dāng)注意庫項(xiàng)目內(nèi)容的相關(guān)性，考慮好庫項(xiàng)目的內(nèi)容和外觀。三、將庫項(xiàng)目應(yīng)用到網(wǎng)頁中應(yīng)用庫項(xiàng)目到網(wǎng)頁中的方法如下：（1）打開網(wǎng)頁，將光標(biāo)置于需要插入庫項(xiàng)目的位置。（2）打開“資源”面板，切換到“庫”選項(xiàng)卡中。（3）選擇目標(biāo)庫項(xiàng)目，單擊“插入”按鈕，或者拖動(dòng)庫項(xiàng)目到網(wǎng)頁中的目標(biāo)位置。如圖7-23所示，插入庫項(xiàng)目后屬性面板中顯示了當(dāng)前庫項(xiàng)目的相關(guān)設(shè)置。圖7-23顯示當(dāng)前庫項(xiàng)目的相關(guān)設(shè)置四、編輯庫項(xiàng)目編輯庫項(xiàng)目的方法如下：（1）打開“資源”面板，切換到“庫”選項(xiàng)卡中。（