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

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

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

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

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

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

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