教學(xué)課題：使用模板
教學(xué)目標(biāo)：了解“資源”面板，掌握創(chuàng)建模板的方法，掌握定義可編輯區(qū)域、定義可選區(qū)域和定義重復(fù)區(qū)域的方法。
教學(xué)重點：1、創(chuàng)建模板的二種方法。
2、定義可編輯區(qū)域、定義可選區(qū)域和定義重復(fù)區(qū)域的方法。
教學(xué)難點：創(chuàng)建模板的二種方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
一、演示案例1：直接創(chuàng)建模板
【操作步驟】
步驟1：啟動Dreamweaver CS5，在菜單欄中選擇【文件】->【新建】。
步驟2：打開“新建文檔”對話框，選擇“空白頁”選項卡，在“頁面類型”區(qū)域中選擇【HTML模板】選項，在“布局”區(qū)域選擇【無】，單擊“創(chuàng)建”按鈕，如圖12-2所示。
圖12-2
二、演示案例2：從現(xiàn)有文檔創(chuàng)建模板
【操作步驟】
步驟1：打開f:\Dreamweaver CS5案例教程\演示案例素材\chapter12\旅游.html。
步驟2：在菜單欄中選擇“文件”->“另存為模板”命令。
步驟3：
- 打開“另存為模板”對話框，如圖12-3所示。
- 單擊展開“站點”下拉列表框，選擇準(zhǔn)備使用的站點，在“另存為”文本框中輸入要保存的模板名稱。
- 單擊“保存”按鈕。
- 在“文件”面板下會出現(xiàn)一個Templates文件夾，展開文件夾，里面有剛創(chuàng)建的模板文件moban.dwt。
說明：模板文件的擴展名為：*.dwt。
圖12-3
三、演示案例3：定義可編輯區(qū)域
【操作步驟】
步驟1：打開演示案例二中所制作的模板文件moban.dwt。
步驟2：將光標(biāo)放置在用戶登錄區(qū)域，在菜單欄中選擇“插入”->“模板對象”->“可編輯區(qū)域”，打開“新建可編輯區(qū)域”對話框，輸入名稱：reg如圖12-4所示。
圖12-4
步驟3：可編輯區(qū)域即被插入模板中，在文檔窗口可以看到可編輯區(qū)域在模板頁面中由高亮顯示的矩形邊框圍繞，區(qū)域左上角顯示該區(qū)域名稱。
步驟4：選中可編輯區(qū)域后，可在“屬性”面板中對名稱等參數(shù)進(jìn)行修改。如圖12-5所示。
圖12-5
四、演示案例4：定義可選區(qū)域
可選區(qū)域是模板中的區(qū)域，可將其設(shè)置為基于模板的文件中顯示或隱藏。當(dāng)要對文件中顯示的內(nèi)容設(shè)置條件時，即可使用可選區(qū)域。
【操作步驟】
步驟1：打開模板文件moban.dwt，選中頁面下方的版權(quán)信息圖片。
步驟2：在菜單欄中選擇【插入】->【模板對象】->【可選區(qū)域】，如圖12-7所示。
圖12-7
五、演示案例5:定義重復(fù)區(qū)域
重復(fù)區(qū)域是能夠要據(jù)需要在基于模板的頁面中賦值任意次的模板部分。重復(fù)區(qū)域通過常于表格，也能夠為其他頁面的元定義重復(fù)區(qū)域。
【操作步驟】
步驟1：打開moban.dwt模板文件。
步驟2：選擇“旅游線路”區(qū)域內(nèi)的表格。
步驟3：選擇【插入】面板【常用】選項卡中，單擊“模板”展開式按鈕 
，選擇“重復(fù)區(qū)域”按鈕 
。
步驟4：彈出“新建重復(fù)區(qū)域”對話框，如圖12-8所示，在名稱文本框中輸入名稱，單擊“確定”按鈕。
說明：在一個重復(fù)區(qū)域可以繼續(xù)插入另一個重復(fù)區(qū)域。
圖12-8
教學(xué)課題：管理模板
教學(xué)目標(biāo)：掌握創(chuàng)建基于模板的頁面、模板管理的各種操作以及
用模板的最新版本更新整個站點或應(yīng)用特定模板的所有網(wǎng)頁的方法。
教學(xué)重點：1、創(chuàng)建基于模板的頁面方法。
2、重命名模板、修改模板文件以及刪除模板。
3、用模板的最新版本更新整個站點或應(yīng)用特定模板的所有網(wǎng)頁。
教學(xué)難點：創(chuàng)建基于模板的頁面方法和模板管理的各種操作。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
一、創(chuàng)建基于模板的網(wǎng)頁
演示案例1：使用新建命令創(chuàng)建基于模板的新文檔。
【操作步驟】
步驟1：選擇【文件】->【新建】命令，打開“新建文檔”對話框。
步驟2：單擊【模板中的頁】標(biāo)簽，切換到“從模板新建”窗口。在“站點”選項卡中選擇本網(wǎng)站的站點。如“未命名站4”，再從右側(cè)選項框中選擇一個模板文件。如圖12-9所示，單擊“確定”按鈕，創(chuàng)建基于模板的新文檔。
圖12-9
步驟3：編輯完文檔后，選擇“文件”->“保存”命令，保存所創(chuàng)建的文檔。在文檔窗口中按照模板中的設(shè)置建立了一個新的頁面，并可向編輯區(qū)域添加信息。
演示案例2：應(yīng)用“資源”面板中模板創(chuàng)建基于模板的網(wǎng)頁
【操作步驟】
步驟1：選擇【文件】->【新建】命令，打開“新建文檔”對話框。
步驟2：選擇“空白頁”選項。
步驟3：選擇【窗口】->【資源】命令，打開“資源”面板。在“資源”面板中，單擊左側(cè)的“模板”按鈕，從模板列表中選擇相應(yīng)的的模板，最后單擊“資源”控制面板下方的“應(yīng)用”按鈕，在文檔中應(yīng)用該模板。
二、管理模板
演示案例1：重命名模板文件
【操作步驟】
步驟1：選擇【窗口】->【資源】命令，打開“資源”面板，單擊左側(cè)的“模板”按鈕，控制面板右側(cè)顯示本站點的模板列表。
步驟2：在模板列表中，雙擊模板名稱選中文本，然后輸入一個新名稱，按<Enter>鍵使更改生效。
演示案例2：修改模板文件
【操作步驟】
步驟1：選擇【窗口】->【資源】命令，打開“資源”面板，單擊左側(cè)的“模板”按鈕，控制面板右側(cè)顯示本站點的模板列表。
步驟2：在模板列表中雙擊要修改的模板文件將其打開，根據(jù)需要修改模板內(nèi)容。例如，將“北京旅游”插入可編輯區(qū)域。
演示案例３：刪除模板
【操作步驟】
步驟1：打開【窗口】->【資源】控制面板。
步驟2：單擊左側(cè)的“模板”按鈕 
，控制面板右側(cè)顯示本站點的模板列表。單擊模板名稱選擇該模板。
步驟3：單擊控制面板下方的“刪除” 
按鈕，并確認(rèn)要刪除該模板，此時該模板文件從站點中刪除。
三、更新站點
用模板的最新版本更新整個站點或應(yīng)用特定模板的所有網(wǎng)頁。
演示案例４：用模板更新站點
【操作步驟】
步驟1：打開“更新頁面”對話框。選擇【修改】 ->【模板】->【更新頁面】，如圖12-10所示。
圖12-10
步驟2：若用模板更新整個站點，則在“查看”選項右側(cè)的第一個下拉列表中選擇“整個站點”，然后在第二個下拉列表中選擇站點名稱；若更新應(yīng)用特定模板的所有網(wǎng)頁，則在“查看”選項右側(cè)的第一個下拉列表中選擇“文件使用…”，然后在第二個下拉列表中選擇相應(yīng)的網(wǎng)頁名稱。
步驟3：在“更新”選項組中選擇“模板”復(fù)選框。
步驟4：單擊“開始”按鈕，即可根據(jù)選擇更新整個站點或應(yīng)用特定模板的所有網(wǎng)頁。
步驟5：單擊“關(guān)閉”按鈕，關(guān)閉“更新頁面”對話框。
教學(xué)課題：12.3創(chuàng)建與應(yīng)用庫項目
教學(xué)目標(biāo)：了解什么是庫項目，掌握創(chuàng)建庫項目、基于文件內(nèi)容創(chuàng)建庫項目以及創(chuàng)建空白庫項目的方法。
教學(xué)重點：1、創(chuàng)建庫項目的方法。
2、基于文件內(nèi)容創(chuàng)建庫項目的方法。
3、創(chuàng)建空白庫項目的方法。
教學(xué)難點：基于文件內(nèi)容創(chuàng)建庫項目的方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
一、什么是庫項目
庫是一種特殊的Dreamweaver文件，其中包含可放置到網(wǎng)頁的一組單個資源或資源副本，庫中的這些資源稱為庫項目?？稍趲熘写鎯Φ捻椖堪▓D像、表格、聲音和使用Adobe Flash創(chuàng)建的文件。每當(dāng)編輯某個庫項目時，可以自動更新所有使用該項目的頁面。
二、演示案例1：創(chuàng)建庫項目
【操作步驟】
步驟1：啟動Dreamweaver CS5，在菜單欄中選擇【文件】->【新建】命令，彈出“新建文檔”對話框。
步驟2：選擇【空白頁】->【庫項目】，單擊“確定”按鈕。
步驟3：選擇【文件】->【保存】，選擇保存的位置，單擊“保存”按鈕。
說明：庫文件的擴展名為.lbi。
三、演示案例2：基于文件內(nèi)容創(chuàng)建庫項目
【操作步驟】
步驟1：打開“演示案例素材\chapter12\旅游.html”文件，打開【資源】面板，單擊【庫】按鈕，打開“庫”面板。
步驟2：選中網(wǎng)頁左上角的logo圖片，按住鼠標(biāo)不放拖拽到庫列表中。起名叫：logo。
步驟3：再創(chuàng)建一個庫項目。選中頁面上“旅游線路”區(qū)域的表格，單擊“庫”面板底部的“新建”按鈕 
，給該項目輸入一個名稱“線路”，這樣庫列表中有了logo和“線路”兩個庫項目。
說明：Dreamweaver在站點本地文件根文件夾的“Library”文件夾中，將每個庫項目都保存為一個單獨的文件（擴展名為.lbi）。
四、演示案例3：創(chuàng)建空白庫項目
【操作步驟】
步驟1：確保沒有在文檔窗口中選擇任何內(nèi)容。
步驟2：打開“資源”面板，單擊“庫”按鈕，打開“庫”面板。
步驟3：單擊“庫”面板底部的“新建庫項目”按鈕 
，則添加的無標(biāo)題的庫項目，為該項目輸入一個名稱，按<Enter>鍵確定。
教學(xué)課題：12.4管理庫項目
教學(xué)目標(biāo)：掌握重命名庫項目、刪除庫項目、重新創(chuàng)建已刪除的庫項目以及修改庫項目的方法。
教學(xué)重點：1、重命名庫項目的方法。
2、刪除庫項目的方法。
3、重新創(chuàng)建已刪除的庫項目的方法。
4、修改庫項目的方法。
教學(xué)難點：重新創(chuàng)建已刪除的庫項目的方法。
教學(xué)方法：任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：重命名庫項目
【操作步驟】
步驟1：選擇【窗口】->【資源】命令，打開“資源”面板，單擊“庫”按鈕，打開“庫”面板。
步驟2：在庫列表中，雙擊要命名的庫項目名稱，然后輸入一個新名稱。
步驟3：按<Enter>鍵使更改生效，此時彈出“更新文件”對話框，如圖12-12所示。若要更新站點中所有使用該項目的文檔，單擊“更新”按鈕；否則，單擊“不更新”按鈕。
圖12-12
演示案例2：刪除庫項目
【操作步驟】
步驟1：選擇【窗口】->“【資源】”命令，打開“資源”面板，單擊“庫”按鈕，打開“庫”面板。
步驟2：在“庫”面板中選中要刪除的項目，單擊面板底部的刪除按鈕 
。
演示案例3：重新創(chuàng)建已刪除的庫項目
【操作步驟】
步驟1：先在“庫”面板中刪除“bottom”項目。
步驟2：在旅游.html頁面中選中最下方的圖片（它是bottom庫項目的一個實例）。
步驟3：選擇【窗口】->【屬性】命令，打開“屬性”面板，單“重新創(chuàng)建”按鈕，此時在“庫”面板中將顯示該庫項目，如圖12-13所示。
圖12-13
演示案例4：修改庫項目
【操作步驟】
步驟1：選擇【窗口】->【資源】命令，打開“資源”面板，單擊“庫”按鈕，打開“庫”面板。
步驟2：在庫列表中選中要修改的項目，單擊面板底部的編輯按鈕 
。
步驟3：修改完畢后，保存庫項目，彈出“更新庫項目”對話框，單擊“更新”按鈕，如圖所示。
