《網(wǎng)頁設(shè)計與制作案例教程（第2版） 》教案 第21課 模板與庫（二）

21第21第課模板與庫（二）（二）模板與庫（二）模板與庫第課21PAGE4PAGE4PAGE5PAGE521第21第課模板與庫（二） 課題模板與庫(二）課時2課時（90min）教學(xué)目標知識技能目標：（1）熟悉庫項目的基礎(chǔ)知識。。（2）能夠使用DreamweaverCC為網(wǎng)頁中創(chuàng)建并應(yīng)用庫項目。思政育人目標：（1）學(xué)習(xí)模板和庫，增強專業(yè)技能，提高工作效率。（2）學(xué)習(xí)工匠精神，培養(yǎng)認真、嚴謹?shù)墓ぷ鲬B(tài)度。教學(xué)重難點教學(xué)重點：庫項目的基礎(chǔ)知識教學(xué)難點：使用DreamweaverCC為網(wǎng)頁中創(chuàng)建并應(yīng)用庫項目教學(xué)方法情景模擬法、問答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計第1節(jié)課：傳授新知（23min）課堂討論（15min）第2節(jié)課：任務(wù)實施（25min）

實踐探索（15min）

課堂小結(jié)（3min）

作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP，查閱資料，了解網(wǎng)頁中的庫項目【學(xué)生】按照教師要求完成課前任務(wù)通過課前的預(yù)熱，讓學(xué)生了解所學(xué)軟件，激發(fā)學(xué)生的學(xué)習(xí)欲望考勤

（2min）【教師】使用文旌課堂APP進行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀律性，掌握學(xué)生的出勤情況問題導(dǎo)入

（5min）【教師】提出以下問題：請說說庫的作用是什么？【學(xué)生】思考、舉手發(fā)言使用庫項目可以將網(wǎng)頁中常用的頁面元素保存起來，然后在多個網(wǎng)頁中重復(fù)使用。通過問題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動學(xué)生的主觀能動性，了解本節(jié)課要學(xué)習(xí)的內(nèi)容傳授新知

（38min）【教師】通過學(xué)生的發(fā)言，引入新的知識點，介紹創(chuàng)建、應(yīng)用、編輯庫項目的方法一、創(chuàng)建庫項目【教師】提出以下問題：什么是庫項目？【學(xué)生】閱讀、思考、舉手發(fā)言庫項目是一種特殊類型的文件，拓展名為lbi。我們可以將網(wǎng)頁中的任意元素定義為庫項目，如圖像、表格、文本、聲音等。（詳見教材）【教師】展示Dreamweaver中的庫項目，幫助學(xué)習(xí)理解庫項目可以在多個網(wǎng)頁中重復(fù)使用，當更改某個庫項目時，所有應(yīng)用該庫項目的網(wǎng)頁都可以同時更新。例如，假設(shè)為某公司建立一個大型站點時，公司想讓其廣告語出現(xiàn)在站點的每個網(wǎng)頁上，但是還沒有確定最終的廣告語。此時就可以創(chuàng)建一個包含臨時廣告語的庫項目并插入到每個網(wǎng)頁中，當公司提供了最終的廣告語后，就可以通過更改庫項目使所有網(wǎng)頁自動更新。（詳見教材）【教師】提出以下問題：針對圖像等元素，網(wǎng)頁中只是保存了指向圖像等文件的路徑，以后通過置換圖像來更新網(wǎng)頁不也一樣嗎？【學(xué)生】閱讀、思考、舉手發(fā)言其實是不一樣的。例如，假設(shè)將一幅廣告圖像創(chuàng)建為庫項目，則圖像及其尺寸、鏈接、目標等屬性均包含在庫項目中。以后修改廣告時，只要修改一次庫項目及其屬性，就可以自動更新全部使用該庫項目的網(wǎng)頁。如果不將廣告圖像創(chuàng)建為庫項目，盡管可以通過置換圖像來更新網(wǎng)頁，但是還必須分別在各網(wǎng)頁中為其設(shè)置鏈接等屬性。（詳見教材）【教師】演示使用DreamweaverCC在網(wǎng)頁中創(chuàng)建庫項目（1）打開“blog”站點，雙擊“文件”面板中的網(wǎng)頁文檔“index.html”，將其打開。在“設(shè)計”視圖中選中網(wǎng)頁最下方的<footer>標簽，然后單擊“工具”→“庫”→“增加對象到庫”菜單，打開“Dreamweaver”對話框和“資源”面板。（2）單擊“確定”按鈕，可以看到在“資源”面板中生成了庫項目，其名稱處于可編輯狀態(tài)。（3）在文本框中輸入庫項目名稱，此處為“footer”，然后按“Enter”鍵確認，打開“更新文件”對話框，單擊“更新”按鈕，完成庫項目的命名。（詳見教材）【學(xué)生】觀察、記錄、理解二、應(yīng)用庫項目【教師】演示使用DreamweaverCC在網(wǎng)頁中創(chuàng)建庫項目庫項目的應(yīng)用方法為，首先定位插入點，然后選中庫項目并單擊“資源”面板底部的“插入”按鈕，將庫項目插入到文檔中。（詳見教材）【學(xué)生】觀察、記錄、理解【教師】展示Dreamweaver中的網(wǎng)頁庫項目屬性面板，幫助學(xué)習(xí)理解“屬性”面板中各設(shè)置項的意義如下。 “Src”信息：顯示庫項目源文件的名稱和在站點中存放的位置。 “打開”按鈕：單擊可打開庫項目源文件并進行編輯。 “從源文件中分離”按鈕：單擊可斷開所選庫項目與其源文件之間的鏈接，使庫項目成為普通對象。 “重新創(chuàng)建”按鈕：若應(yīng)用后的庫項目有所改動，單擊該按鈕可用新的庫項目覆蓋舊的庫項目。三、編輯庫項目【教師】演示使用DreamweaverCC在網(wǎng)頁中編輯和更新庫項目想要編輯庫項目時，可在“資源”面板中雙擊庫項目，將其在文檔窗口中打開，然后進行編輯即可。在編輯庫項目后，對其進行保存操作時，將打開“更新庫項目”對話框，詢問是否更新使用了庫項目的網(wǎng)頁，單擊“更新”按鈕后，打開“更新頁面”對話框，在“查看”下拉列表中選擇“整個站點”選項，然后單擊“完成”按鈕即可。（詳見教材）【學(xué)生】觀察、記錄、理解【課堂互動】教師提出以下問題：【學(xué)生】聆聽、思考、舉手回答【教師】對學(xué)生的回答進行總結(jié)【學(xué)生】聆聽、思考、記憶、實際操作通過講解，讓學(xué)生了解如何創(chuàng)建、應(yīng)用、編輯庫項目課堂討論（15min）【教師】組織學(xué)生閱讀“侯帥”的故事，并讓學(xué)生以小組為單位討論以下問題：這個故事帶給你怎樣的啟發(fā)？你認為如何才能做好電商設(shè)計工作？【學(xué)生】閱讀、思考、小組討論，有小組代表上臺發(fā)表討論結(jié)果【教師】與學(xué)生一起評價各組的發(fā)言以學(xué)生為主體，針對學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動其他學(xué)生掌握知識點第二節(jié)課任務(wù)實施

（25min）【教師】演示在DreamweaverCC中應(yīng)用庫項目完善“傳承經(jīng)典網(wǎng)”介紹頁的操作，對其進行分析（1）“任務(wù)二”→“Sculture”文件夾中的文件替換本地磁盤中站點文件夾中的文件，然后打開“index.html”網(wǎng)頁（2）選中<main>→<divclass="sheet_3">標簽的所有內(nèi)容，打開“資源”面板，單擊面板下方的“新建庫項目”按鈕，打開“Dreamweaver”對話框，單擊“確定”按鈕，創(chuàng)建庫項目。（3）“資源”面板添加一個庫項目，其名稱處于可編輯狀態(tài)，將其命名為“sheet_3”，按“Enter”確定，打開“更新文件”對話框，單擊“更新”按鈕，完成庫項目的添加。（4）保存“index.html”。雙擊“文件”窗口的“about.html”，將其在文檔窗口中打開，在<main>標簽后添加一個class屬性值為center的<div>標簽。（5）將鼠標置于<div>標簽中，在“資源”面板中選中“sheet_3”選項，然后單擊面板下方的“插入”按鈕，添加庫項目。（6）保存“about.html”，按“F12”鍵查看頁面效果（詳見教材）【教師】巡堂指導(dǎo)，及時解決學(xué)生的問題利用任務(wù)實施，讓學(xué)生們主動參與學(xué)習(xí)，熟悉在Dreamweaver中創(chuàng)建庫的步驟實踐探索

（15min）【教師】組織學(xué)生自主練習(xí)，創(chuàng)建并應(yīng)用模板制作“圖書交易網(wǎng)”小說投稿頁【學(xué)生】參照任務(wù)實施的步驟上機操作【教師】巡堂指導(dǎo)，及時解決學(xué)生的問題通過實踐探索，使學(xué)生進一步鞏固所學(xué)知識，了解更多關(guān)于網(wǎng)頁模板的知識課堂小結(jié)

（3min）【教師】簡要總結(jié)本節(jié)課的要點本節(jié)課學(xué)習(xí)了創(chuàng)建、應(yīng)用、編輯庫項目的基本操作，并通過實踐練習(xí)了使用DreamweaverCC應(yīng)用庫項目制作網(wǎng)頁的方法。希望大家在課下多加練習(xí)，掌握庫項目的相關(guān)知識和操作?！緦W(xué)生】總結(jié)回顧知識點總結(jié)知識點，鞏固印象作業(yè)布置

（2min）【教師】布置課后作業(yè)（1）完成相關(guān)課