《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第20課 模板與庫(kù)（一）_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第20課 模板與庫(kù)（一）_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第20課 模板與庫(kù)（一）_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第20課 模板與庫(kù)（一）_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第20課 模板與庫(kù)（一）_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

20第20第課模板與庫(kù)（一）（一）模板與庫(kù)（一）模板與庫(kù)第課20PAGE6PAGE6PAGE7PAGE720第20第課模板與庫(kù)（一） 課題模板與庫(kù)（一）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）熟悉模板的基礎(chǔ)知識(shí)。（2）能夠使用DreamweaverCC在網(wǎng)頁(yè)中創(chuàng)建并應(yī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)：模板的基礎(chǔ)知識(shí)教學(xué)難點(diǎn)：使用DreamweaverCC在網(wǎng)頁(yè)中創(chuàng)建并應(yīng)用模板教學(xué)方法情景模擬法、問答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：傳授新知（38min）第2節(jié)課：實(shí)踐探究（25min）

項(xiàng)目實(shí)訓(xùn)（15min）

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

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

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

（5min）【教師】提出以下問題：請(qǐng)說說模板有哪些優(yōu)點(diǎn)？【學(xué)生】思考、舉手發(fā)言使用模板可以高效率地制作同一網(wǎng)站中結(jié)構(gòu)相同的頁(yè)面。通過問題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動(dòng)學(xué)生的主觀能動(dòng)性，了解本節(jié)課要學(xué)習(xí)的內(nèi)容傳授新知

（38min）【教師】通過學(xué)生的發(fā)言，引入新的知識(shí)點(diǎn)，介紹創(chuàng)建、編輯、應(yīng)用和管理模板一、創(chuàng)建模板【教師】提出以下問題：在DreamweaverCC中創(chuàng)建模板的方法有哪些？【學(xué)生】分析、思考、舉手發(fā)言在DreamweaverCC中創(chuàng)建模板的方法有兩種。一種是新建空白模板文檔，然后像制作普通網(wǎng)頁(yè)一樣設(shè)置模板內(nèi)容；另一種是將已經(jīng)制作好的普通網(wǎng)頁(yè)轉(zhuǎn)換為模板。（詳見教材）1．新建空白模板文檔模板文檔的擴(kuò)展名為dwt。當(dāng)用戶創(chuàng)建并保存空白模板文檔后，就可以像編輯普通網(wǎng)頁(yè)文檔一樣編輯模板文檔了。【教師】演示使用DreamweaverCC在網(wǎng)頁(yè)中新建空白模板文檔（1）啟動(dòng)DreamweaverCC，打開blog站點(diǎn)。（2）單擊“文件”→“新建”菜單，打開“新建文檔”對(duì)話框。在左側(cè)列表中選擇“新建文檔”選項(xiàng)，在“文檔類型”列表中選擇“HTML模板”選項(xiàng)，在“布局”列表中選擇“<無>”選項(xiàng)。（3）單擊“創(chuàng)建”按鈕，創(chuàng)建一個(gè)模板文檔，并進(jìn)入編輯狀態(tài)。（4）單擊“文件”→“保存”菜單，打開“Dreamweaver”對(duì)話框，勾選“不再警告我”復(fù)選框，然后單擊“確定”按鈕。（5）打開“另存模板”對(duì)話框，在“另存為”文本框中輸入模板文檔名，此處為“t1”，然后單擊“保存”按鈕，將其保存。（6）打開“文件”面板，可以看到站點(diǎn)中增加了一個(gè)名為“Templates”的文件夾，展開該文件夾，可以看到新建的模板文檔“t1.dwt”。（詳見教材）【學(xué)生】觀察、記錄、理解【課堂互動(dòng)】教師提出以下問題：【學(xué)生】聆聽、思考、舉手回答【教師】對(duì)學(xué)生的回答進(jìn)行總結(jié)2．將現(xiàn)有網(wǎng)頁(yè)轉(zhuǎn)換成模板DreamweaverCC還可以將網(wǎng)站中已經(jīng)存在的某個(gè)網(wǎng)頁(yè)另存為模板，然后再利用該模板制作網(wǎng)站中與其結(jié)構(gòu)相同的其他頁(yè)面。【教師】演示使用DreamweaverCC將現(xiàn)有網(wǎng)頁(yè)轉(zhuǎn)換成模板（1）繼續(xù)在前面的blog站點(diǎn)中操作，雙擊“文件”面板中的“bowen1.html”選項(xiàng)，打開網(wǎng)頁(yè)文檔。將插入點(diǎn)置于“代碼”視圖中，單擊“文件”→“另存為模板”菜單。（2）打開“另存模板”對(duì)話框，在“另存為”文本框中輸入模板文檔名，此處為“t2”，然后單擊“保存”按鈕，打開“Dreamweaver”對(duì)話框，詢問是否更新鏈接，一般情況下都應(yīng)單擊“是”按鈕。（3）此時(shí)網(wǎng)頁(yè)文檔的擴(kuò)展名變?yōu)椤癲wt”，在“代碼”視圖中可以看到網(wǎng)頁(yè)文檔的<head>標(biāo)簽中自動(dòng)添加了一些代碼。（詳見教材）【學(xué)生】觀察、記錄、理解二、編輯模板【教師】展示Dreamweaver中的網(wǎng)頁(yè)模板，幫助學(xué)習(xí)理解一般情況下，模板分為兩部分，一部分是模板創(chuàng)建文檔中不能編輯的區(qū)域，稱為不可編輯區(qū)域；另外一部分是模板創(chuàng)建文檔中可以編輯的區(qū)域，稱為可編輯區(qū)域。用戶在創(chuàng)建模板并設(shè)置內(nèi)容后，如果直接用其創(chuàng)建網(wǎng)頁(yè)文檔，網(wǎng)頁(yè)文檔中的內(nèi)容默認(rèn)都是不可編輯的。所以，在創(chuàng)建模板之后還需要?jiǎng)?chuàng)建可編輯區(qū)域才能用其創(chuàng)建網(wǎng)頁(yè)文檔。（詳見教材）1．創(chuàng)建可編輯的區(qū)域要使模板有效，至少要在其中創(chuàng)建一個(gè)可編輯區(qū)域，下面介紹創(chuàng)建可編輯區(qū)域的具體操作?！窘處煛垦菔臼褂肈reamweaverCC將創(chuàng)建可編輯的區(qū)域（1）打開上節(jié)創(chuàng)建的模板文檔“t2.dwt”，選中想要?jiǎng)?chuàng)建為可編輯區(qū)域的元素，此處選中id屬性值為content的<article>標(biāo)簽。（2）單擊“插入”→“模板”→“可編輯區(qū)域”菜單，打開“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入可編輯區(qū)域的名稱（此處為默認(rèn)），單擊“確定”按鈕創(chuàng)建可編輯區(qū)域，新建的可編輯區(qū)域處于選中狀態(tài)。（3）按“Ctrl+S”組合鍵，保存模板文檔。（詳見教材）【學(xué)生】觀察、記錄、理解2．刪除可編輯區(qū)域【教師】提出以下問題：如何刪除可編輯區(qū)域？【學(xué)生】閱讀、思考、舉手回答如果已經(jīng)將模板中的一個(gè)區(qū)域標(biāo)記為可編輯的，而現(xiàn)在想要再次鎖定它（使其在基于模板創(chuàng)建的文檔中不可編輯），可在選中對(duì)應(yīng)區(qū)域后，單擊“工具”→“模板”→“刪除模板標(biāo)記”菜單。三、應(yīng)用模板創(chuàng)建模板并設(shè)置好可編輯區(qū)域后，就可以應(yīng)用該模板去創(chuàng)建網(wǎng)頁(yè)文檔了。應(yīng)用模板創(chuàng)建網(wǎng)頁(yè)文檔的方法有兩種，一種是使用“新建文檔”對(duì)話框，另外一種是使用“資源”面板。1．使用“新建文檔”對(duì)話框【教師】演示使用DreamweaverCC“新建文檔”應(yīng)用模板（1）單擊“文件”→“新建”菜單，打開“新建文檔”對(duì)話框。（2）在左側(cè)列表中選擇“網(wǎng)站模板”，在“站點(diǎn)”列表中選擇模板所在的站點(diǎn)，此處為blog，在“站點(diǎn)‘blog’的模板”列表中選擇要應(yīng)用的模板，此處為t2。（3）單擊“創(chuàng)建”按鈕，使用模板創(chuàng)建的網(wǎng)頁(yè)文檔便出現(xiàn)在文檔窗口中，該文檔中只有可編輯區(qū)域的內(nèi)容可以修改。（4）按“Ctrl+S”組合鍵，打開“另存為”對(duì)話框，保存位置選擇站點(diǎn)根目錄，在“文件名”文本框中輸入“bowen2.html”，然后單擊“保存”按鈕。（5）在“設(shè)計(jì)”視圖中選中文檔可編輯區(qū)域的文本，按“Delete”鍵刪除它們；再雙擊站點(diǎn)根目錄下的文本文檔“日志2文字.txt”，在其中按“Ctrl+A”組合鍵選中所有內(nèi)容；接著按“Ctrl+C”組合鍵拷貝內(nèi)容；最后將鼠標(biāo)指針置于“設(shè)計(jì)”視圖中的可編輯區(qū)域，按“Ctrl+V”組合鍵粘貼內(nèi)容。（6）參照bowen1.html頁(yè)面的效果，在s1.css文件中為這些文本元素設(shè)置樣式，然后按“Ctrl+S”組合鍵，保存該頁(yè)面。（詳見教材）【學(xué)生】觀察、記錄、理解2．使用“資源”面板“資源”面板主要用于對(duì)網(wǎng)站中的資源進(jìn)行分類管理，這些資源包括圖像、顏色、鏈接地址等。由于“資源”面板中顯示的是當(dāng)前站點(diǎn)中的資源，所以在使用“資源”面板前，需要注意先將當(dāng)前站點(diǎn)設(shè)置為目標(biāo)站點(diǎn)。【教師】演示使用DreamweaverCC“資源”面板應(yīng)用模板（1）單擊“窗口”→“資源”菜單，打開“資源”面板。（2）（3）選擇任意一個(gè)模板文件，上方的預(yù)覽窗口中將會(huì)顯示該模板文件的預(yù)覽效果。（4）鼠標(biāo)右擊所需模板，在彈出的快捷菜單中選擇“從模板新建”選項(xiàng)，文檔窗口中將顯示新建的文檔，將其保存即可。（詳見教材）【學(xué)生】觀察、記錄、理解四、管理模板管理模板的操作主要包括更新模板、刪除模板和分離模板1．更新模板【教師】演示使用DreamweaverCC更新模板創(chuàng)建模板并應(yīng)用其創(chuàng)建網(wǎng)頁(yè)后，如果對(duì)模板中的某個(gè)部分不滿意，可對(duì)其進(jìn)行修改。修改完畢并保存時(shí)，DreamweaverCC會(huì)打開“更新模板文件”對(duì)話框，提示是否更新站點(diǎn)中基于該模板創(chuàng)建的網(wǎng)頁(yè)文檔，單擊“更新”按鈕可更新通過該模板創(chuàng)建的所有網(wǎng)頁(yè)，單擊“不更新”按鈕，則只保存模板而不更新基于該模板創(chuàng)建的其他網(wǎng)頁(yè)。（詳見教材）【學(xué)生】觀察、記錄、理解2．刪除模板【教師】演示使用DreamweaverCC更新模板如果不再需要某個(gè)模板，可將其刪除。在“資源”面板中選中不再需要的模板文件，按“Delete”鍵。如果確認(rèn)刪除，單擊“是”按鈕；如果不想刪除，則單擊“否”按鈕。（詳見教材）【學(xué)生】觀察、記錄、理解3．分離模板【教師】演示使用DreamweaverCC更新模板如果需要對(duì)使用模板創(chuàng)建的網(wǎng)頁(yè)中的不可編輯區(qū)域進(jìn)行編輯，可以將網(wǎng)頁(yè)文檔與模板進(jìn)行分離。分離后的文檔就變成了普通的網(wǎng)頁(yè)文檔，可以像編輯普通網(wǎng)頁(yè)文檔一樣對(duì)其進(jìn)行編輯操作，但更新原模板文檔后，分離后的文檔無法再同步更新。分離模板的方法為，打開使用模板創(chuàng)建的網(wǎng)頁(yè)文檔，單擊“工具”→“模板”→“從模板中分離”菜單。（詳見教材）【學(xué)生】觀察、記錄、理解【學(xué)生】聆聽、思考、記憶、實(shí)際操作通過講解，讓學(xué)生了解如何創(chuàng)建、編輯、應(yīng)用和管理模板第二節(jié)課任務(wù)實(shí)施

（25min）【教師】演示在DreamweaverCC中應(yīng)用模板制作“傳承經(jīng)典網(wǎng)”介紹頁(yè)的操作，對(duì)其進(jìn)行分析（1）繼續(xù)在項(xiàng)目八任務(wù)二任務(wù)實(shí)施中創(chuàng)建的文檔中操作，或用本書配套素材“項(xiàng)目九”→“任務(wù)一”→“Sculture”文件夾中的文件替換本地磁盤中站點(diǎn)文件夾中的文件，并打開“index.html”網(wǎng)頁(yè)文檔。（2）切換至“代碼”視圖，將<nav>標(biāo)簽中無序列表的第一個(gè)列表項(xiàng)的超鏈接目標(biāo)地址改為“index.html”；將第二個(gè)列表項(xiàng)的超鏈接目標(biāo)地址改為“about.html”；然后將網(wǎng)頁(yè)文檔保存。（3）將鼠標(biāo)指針置于“代碼”視圖中，單擊“文件”→“另存為模板”菜單，打開“另存模板”對(duì)話框，在“另存為”文本框中輸入“t1”，然后單擊“保存”按鈕，打開“Dreamweaver”對(duì)話框，單擊“是”按鈕，創(chuàng)建首頁(yè)的模板。（4）選中<main>標(biāo)簽，單擊“插入”→“模板”→“可編輯區(qū)域”菜單，打開“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入“con”，然后單擊“確定”按鈕，添加可編輯區(qū)域。（5）保存該模板。（6）；接著在其中添加一個(gè)<h1>標(biāo)簽和12個(gè)<p>標(biāo)簽，標(biāo)簽的具體內(nèi)容可參考本書配套素材“項(xiàng)目九”→“任務(wù)一”→“about.html”文件。（7）在index.css文件中添加樣式。（8）添加#about_mainh1選擇器，設(shè)置樣式。（9）保存文檔，按“F12”鍵查看頁(yè)面效果。（詳見教材）【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問題通過任務(wù)實(shí)施，讓學(xué)生們主動(dòng)參與學(xué)習(xí)，熟悉使用DreamweaverCC應(yīng)用模板制作網(wǎng)頁(yè)實(shí)踐探索

（15min）【教師】組織學(xué)生搜集資料，保存網(wǎng)頁(yè)，通過練習(xí)熟悉使用DreamweaverCC制作模板的操作【學(xué)生】自主學(xué)習(xí)、理解、上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問題通過實(shí)踐探索，使學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)，了解更多關(guān)于網(wǎng)頁(yè)模板的知識(shí)課堂小結(jié)

（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課學(xué)習(xí)了使用Dreamweaver創(chuàng)建、編輯、應(yīng)用和管理網(wǎng)頁(yè)模板的具體操作，并通過實(shí)踐練習(xí)了使用Dre

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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)論