《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程(第2版) 》教案 第21課 模板與庫(kù)(二)_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程(第2版) 》教案 第21課 模板與庫(kù)(二)_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程(第2版) 》教案 第21課 模板與庫(kù)(二)_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程(第2版) 》教案 第21課 模板與庫(kù)(二)_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程(第2版) 》教案 第21課 模板與庫(kù)(二)_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

實(shí)踐探索(15min)

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

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

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

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

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論