認(rèn)識(shí)動(dòng)態(tài)網(wǎng)頁(yè) 公開(kāi)課教學(xué)設(shè)計(jì)

通過(guò)實(shí)例認(rèn)識(shí)動(dòng)態(tài)HTML一、教學(xué)目標(biāo)了解動(dòng)態(tài)HTML，能夠?qū)崿F(xiàn)簡(jiǎn)單的動(dòng)態(tài)HTML效果。二、教材內(nèi)容分析關(guān)于動(dòng)態(tài)HTML，書(shū)上的概念是：“所謂動(dòng)態(tài)HTML，是指即使在脫離網(wǎng)絡(luò)環(huán)境的情況下，網(wǎng)頁(yè)下載到瀏覽器以后仍能夠隨時(shí)變換的HTML?！北靖拍畋容^模糊，學(xué)生從字面上理解比較含混，不透徹，不直觀。教師需要將該概念直觀化、形象化，便于學(xué)生理解。在理解動(dòng)態(tài)HTML的同時(shí)，需要強(qiáng)調(diào)的一點(diǎn)是，并不是網(wǎng)頁(yè)上所有“動(dòng)”的效果都是動(dòng)態(tài)HTML效果，比如，有的GIF圖片也會(huì)表現(xiàn)出各種活動(dòng)效果，但這只是圖片本身的“動(dòng)畫(huà)”效果而不是“動(dòng)態(tài)HTML”效果。三、教學(xué)方法及策略1．通過(guò)簡(jiǎn)單的實(shí)例演示，讓學(xué)生對(duì)動(dòng)態(tài)HTML概念有比較具體的認(rèn)識(shí)。2．利用任務(wù)驅(qū)動(dòng)法，讓學(xué)生學(xué)會(huì)簡(jiǎn)單的動(dòng)態(tài)HTML制作。3．分組上網(wǎng)搜索動(dòng)態(tài)DHTML的應(yīng)用實(shí)例，發(fā)揮團(tuán)隊(duì)作用，促進(jìn)學(xué)生的團(tuán)隊(duì)意識(shí)，增強(qiáng)彼此之間的合作。利用精彩的實(shí)例，激發(fā)學(xué)生學(xué)習(xí)動(dòng)態(tài)HTML網(wǎng)頁(yè)的制作興趣，提高學(xué)生的審美情趣。四、教學(xué)過(guò)程1．教師展示網(wǎng)上搜集到的一個(gè)“旋轉(zhuǎn)導(dǎo)航菜單”師：請(qǐng)學(xué)生們就本導(dǎo)航菜單展開(kāi)討論。（1）分析與常見(jiàn)的導(dǎo)航欄的區(qū)別。（2）你看到這個(gè)導(dǎo)航菜單在動(dòng)，你覺(jué)得它是普通意義上的動(dòng)畫(huà)嗎？生：根據(jù)教師投影出的“旋轉(zhuǎn)導(dǎo)航菜單”討論老師提出的問(wèn)題。師：希望大家踴躍發(fā)言，說(shuō)出自己的觀點(diǎn)。2．教師給出DHTML的比較容易理解的解釋DHTML不是有關(guān)面向服務(wù)器的腳本、JavaApplet或動(dòng)畫(huà)GIF圖像，所有的這些操作都可以自己完成，除了改變頁(yè)面內(nèi)容外，不需要訪(fǎng)問(wèn)服務(wù)器。頁(yè)面下載后，不論什么時(shí)候，DHTML都能處理頁(yè)面元素，改變頁(yè)面版面、內(nèi)容和位置并把結(jié)果不斷地提供給用戶(hù)。3．自己動(dòng)手制作簡(jiǎn)單的動(dòng)態(tài)HTML師：請(qǐng)同學(xué)們從網(wǎng)上找兩幅自己喜歡的圖片并下載到本地機(jī)。然后打開(kāi)FrontPage,先將其中的一幅圖片插入，使用DHTML效果，利用其中的“鼠標(biāo)懸?！笔录?，將第一幅圖片交換成第二幅圖片。生：利用網(wǎng)絡(luò)，在本地機(jī)上完成該任務(wù)，同時(shí)體會(huì)動(dòng)態(tài)HTML效果。4．自己動(dòng)手更多地體驗(yàn)FrontPage中的DHTML效果師：請(qǐng)同學(xué)們?cè)谧鐾晟蟼€(gè)題目以后，相互討論，逐一快速體會(huì)其他的DHTML效果。生：相互討論，完成其他操作。5．分組上網(wǎng)搜索動(dòng)態(tài)HTML的應(yīng)用實(shí)例，更好地理解、體會(huì)動(dòng)態(tài)HTML的概念及應(yīng)用師：按照我們?cè)瓉?lái)的分組，請(qǐng)同學(xué)們上網(wǎng)搜索動(dòng)態(tài)HTML的應(yīng)用實(shí)例。我們本節(jié)只注重直觀認(rèn)識(shí)，暫不考慮該動(dòng)態(tài)HTML效果是如何實(shí)現(xiàn)的。生：同學(xué)們進(jìn)行分組活動(dòng)，并做好記錄。6．教師總結(jié)師：同學(xué)們，我們本節(jié)課主要是了解了動(dòng)態(tài)HTML的實(shí)現(xiàn)效果，希望同學(xué)們通過(guò)課堂上講解的實(shí)例，對(duì)動(dòng)態(tài)HTML有個(gè)大致的了解。為以后進(jìn)一步學(xué)習(xí)打下基礎(chǔ)。請(qǐng)同學(xué)們利用剩余及課后的時(shí)間，完成表5-1的填寫(xiě)。表5-1動(dòng)態(tài)HTML效果舉例網(wǎng)頁(yè)地址是否運(yùn)用動(dòng)態(tài)HTML運(yùn)用了哪幾種你知道的動(dòng)態(tài)HTML效果

五、對(duì)該案例的評(píng)價(jià)利用任務(wù)驅(qū)動(dòng)法，使學(xué)生進(jìn)行有目的的學(xué)習(xí)和總結(jié)；利用分組完成任務(wù)，有助于增進(jìn)學(xué)生的團(tuán)隊(duì)意識(shí)，提高合作精神。六、還可以怎樣講以“動(dòng)態(tài)HTML”為搜索目標(biāo)，讓同學(xué)們自己進(jìn)行學(xué)習(xí)、總結(jié)，提高學(xué)生們的自學(xué)能力。七、可能遇到的問(wèn)題學(xué)生花費(fèi)了一些時(shí)間，卻沒(méi)能找到相關(guān)的一些動(dòng)態(tài)HTML效果。怎么辦？因?yàn)閷W(xué)生第一次接觸DHTML，把握不透，所以在網(wǎng)上搜索動(dòng)態(tài)HTML效果時(shí)，卻沒(méi)能找到幾個(gè)。鑒于此，教師應(yīng)該提前把工作做細(xì)，可以提供一些自己搜索到的動(dòng)態(tài)HTML效果，把網(wǎng)址告訴同學(xué)們。這樣就能節(jié)省時(shí)間，加快學(xué)生對(duì)動(dòng)態(tài)HTML效果的認(rèn)知。靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的比較一、教學(xué)目標(biāo)準(zhǔn)確把握靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的區(qū)別，為學(xué)生以后自主制作動(dòng)態(tài)網(wǎng)頁(yè)打下良好的基礎(chǔ)。二、教材內(nèi)容分析關(guān)于動(dòng)態(tài)網(wǎng)頁(yè)，沒(méi)有動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)，可能理解起來(lái)比較困難，甚至分不清何為靜態(tài)網(wǎng)頁(yè)，何為動(dòng)態(tài)網(wǎng)頁(yè)。而網(wǎng)絡(luò)世界走到今天，動(dòng)態(tài)網(wǎng)頁(yè)已是大行其道，也是學(xué)生很有必要掌握的。而教材上關(guān)于動(dòng)態(tài)網(wǎng)頁(yè)的介紹顯得比較籠統(tǒng)，教師有必要收集相關(guān)資料，讓學(xué)生正確認(rèn)識(shí)動(dòng)態(tài)網(wǎng)頁(yè)的含義。三、教學(xué)方法及策略依據(jù)學(xué)生前面制作網(wǎng)頁(yè)的基礎(chǔ)，首先給出靜態(tài)網(wǎng)頁(yè)的概念，有了靜態(tài)網(wǎng)頁(yè)的學(xué)習(xí)，采用比較法，學(xué)生會(huì)對(duì)動(dòng)態(tài)網(wǎng)頁(yè)有個(gè)粗淺的了解。進(jìn)而通過(guò)實(shí)例演示，讓學(xué)生對(duì)動(dòng)態(tài)網(wǎng)頁(yè)有更深一步的了解，達(dá)到準(zhǔn)確把握動(dòng)態(tài)網(wǎng)頁(yè)的概念。該堂課理論內(nèi)容較多，教師需要將講授內(nèi)容通過(guò)投影展示到屏幕上，以便于學(xué)生學(xué)習(xí)。四、教學(xué)過(guò)程1．教師首先根據(jù)同學(xué)們前面的學(xué)習(xí)，給出靜態(tài)網(wǎng)頁(yè)的概念師：同學(xué)們前面都自己利用FrontPage制作過(guò)自己喜歡的網(wǎng)頁(yè)，這種網(wǎng)頁(yè)的文件擴(kuò)展名是.htm或者.html。網(wǎng)頁(yè)上的每一行代碼都是同學(xué)們預(yù)先編寫(xiě)好后，放置到Web服務(wù)器上的，在發(fā)送到客戶(hù)端的瀏覽器上不再發(fā)生任何變化。這種網(wǎng)頁(yè)，就稱(chēng)之為靜態(tài)網(wǎng)頁(yè)。2．教師展示靜態(tài)網(wǎng)頁(yè)的處理過(guò)程靜態(tài)網(wǎng)頁(yè)的處理流程，如圖5-1所示。（1）當(dāng)用戶(hù)在瀏覽器的“地址”欄中輸入一個(gè)URL地址并單擊“轉(zhuǎn)到”按鈕或敲擊鍵盤(pán)上的回車(chē)鍵（或者在瀏覽器菜單欄的“收藏”選擇一個(gè)網(wǎng)址）后，瀏覽器將向Web服務(wù)器發(fā)出一個(gè)頁(yè)面請(qǐng)求。（2）當(dāng)Web服務(wù)器收到這個(gè)頁(yè)面請(qǐng)求，根據(jù).htm或.html判斷出這是一個(gè)靜態(tài)的HTML文件，然后從磁盤(pán)或存儲(chǔ)器中查找獲取用戶(hù)請(qǐng)求的這個(gè)頁(yè)面。（3）Web服務(wù)器找到這個(gè)請(qǐng)求文件后，就會(huì)把它發(fā)送到瀏覽器，瀏覽器對(duì)這個(gè)返回的HTML文件進(jìn)行解釋并將結(jié)果顯示在瀏覽器中。圖5-1靜態(tài)網(wǎng)頁(yè)處理過(guò)程3．教師提出關(guān)于靜態(tài)網(wǎng)頁(yè)的問(wèn)題，學(xué)生思考師：同學(xué)們，如果你自己有一個(gè)個(gè)人網(wǎng)站，需要發(fā)布大量的信息，采用靜態(tài)網(wǎng)頁(yè)的形式，你們覺(jué)得方便嗎，有什么弊端？請(qǐng)同學(xué)們討論。生：討論老師提出的問(wèn)題。4．登錄126網(wǎng)站，體驗(yàn)動(dòng)態(tài)網(wǎng)頁(yè)師：請(qǐng)同學(xué)們登錄126網(wǎng)站，通過(guò)“注冊(cè)2280M免費(fèi)郵箱”，注冊(cè)一個(gè)屬于自己的郵箱。在這個(gè)過(guò)程中，思考這樣一個(gè)問(wèn)題：這種注冊(cè)方式是靜態(tài)網(wǎng)頁(yè)能完成的任務(wù)嗎？生：注冊(cè)郵箱，并思考問(wèn)題。5．老師給出動(dòng)態(tài)網(wǎng)頁(yè)的概念及處理流程動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)的相同之處：都是ASCII編碼文件，都存在著HTML代碼，都能包含腳本語(yǔ)言代碼，都存放在Web服務(wù)器上，都把用戶(hù)請(qǐng)求的頁(yè)面發(fā)送到瀏覽器上。動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)的區(qū)別是：動(dòng)態(tài)網(wǎng)頁(yè)的文件擴(kuò)展名不是.htm、.html，而是以．a(chǎn)sp、．jsp、．php、．perl、.cgi等形式為文件后綴；動(dòng)態(tài)網(wǎng)頁(yè)中的某些腳本只能在服務(wù)器上運(yùn)行，而靜態(tài)網(wǎng)頁(yè)不能包含在服務(wù)器上運(yùn)行的任何腳本；當(dāng)Web服務(wù)器收到用戶(hù)請(qǐng)求的靜態(tài)頁(yè)面后，將把查找結(jié)果直接發(fā)送到瀏覽器，而當(dāng)Web服務(wù)器收到用戶(hù)請(qǐng)求的動(dòng)態(tài)頁(yè)面后，它將先把這個(gè)網(wǎng)頁(yè)傳遞給一個(gè)稱(chēng)為應(yīng)用服務(wù)器擴(kuò)展的特殊軟件進(jìn)行處理，然后將處理結(jié)果傳送給瀏覽器。動(dòng)態(tài)網(wǎng)頁(yè)的處理流程如圖5-2所示。（1）用戶(hù)在瀏覽器的“地址”欄中輸入一個(gè)URL地址并單擊“轉(zhuǎn)到”按鈕或敲擊鍵盤(pán)上的回車(chē)鍵（或者在瀏覽器菜單欄的“收藏”選擇一個(gè)網(wǎng)址）后，瀏覽器將向Web服務(wù)器發(fā)出一個(gè)頁(yè)面請(qǐng)求。（2）當(dāng)Web服務(wù)器收到這個(gè)頁(yè)面請(qǐng)求，根據(jù)文件擴(kuò)展名判斷出它是一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)，會(huì)從磁盤(pán)或存儲(chǔ)器中查找獲取用戶(hù)請(qǐng)求的這個(gè)頁(yè)面，再將這個(gè)頁(yè)面?zhèn)鬟f給應(yīng)用程序服務(wù)器。（3）用程序服務(wù)器解釋執(zhí)行該頁(yè)中的腳本代碼，并將結(jié)果以靜態(tài)網(wǎng)頁(yè)的形式保存。（4）應(yīng)用程序服務(wù)器將靜態(tài)網(wǎng)頁(yè)結(jié)果傳遞給Web服務(wù)器。（5）Web服務(wù)器把它發(fā)送到瀏覽器，瀏覽器對(duì)這個(gè)返回的HTML文件進(jìn)行解釋并將結(jié)果顯示在瀏覽器中。圖5-2動(dòng)態(tài)網(wǎng)頁(yè)的處理過(guò)程教師進(jìn)一步比較靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。（1）程序是否在服務(wù)器端運(yùn)行，是區(qū)分動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)的重要標(biāo)志。在服務(wù)器端運(yùn)行的程序、網(wǎng)頁(yè)、組件，屬于動(dòng)態(tài)網(wǎng)頁(yè)，它們會(huì)隨不同客戶(hù)、不同時(shí)間，返回不同的網(wǎng)頁(yè)，例如ASP、PHP、JSP、ASP．NET、CGI等。運(yùn)行于客戶(hù)端的程序、網(wǎng)頁(yè)、插件、組件，屬于靜態(tài)網(wǎng)頁(yè)，例如Html頁(yè)、Flash、JavaScript、VBScript等等，它們是永遠(yuǎn)不變的。（2）這里說(shuō)的動(dòng)態(tài)網(wǎng)頁(yè)，與網(wǎng)頁(yè)上的各種動(dòng)畫(huà)、滾動(dòng)字幕等視覺(jué)上的“動(dòng)態(tài)效果”沒(méi)有直接關(guān)系，動(dòng)態(tài)網(wǎng)頁(yè)可以是純文字內(nèi)容的，也可以是包含各種動(dòng)畫(huà)的內(nèi)容，這些只是網(wǎng)頁(yè)具體內(nèi)容的表現(xiàn)形式，無(wú)論網(wǎng)頁(yè)是否具有動(dòng)態(tài)效果，采用動(dòng)態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁(yè)都稱(chēng)為動(dòng)態(tài)網(wǎng)頁(yè)。從網(wǎng)站瀏覽者的角度來(lái)看，無(wú)論是動(dòng)態(tài)網(wǎng)頁(yè)還是靜態(tài)網(wǎng)頁(yè)，都可以展示基本的文字和圖片信息，但從網(wǎng)站開(kāi)發(fā)、管理、維護(hù)的角度來(lái)看卻有很大的差別。動(dòng)態(tài)網(wǎng)頁(yè)的一般特點(diǎn)如下：（1）動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量；（2）采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶(hù)注冊(cè)、用戶(hù)登錄、在線(xiàn)調(diào)查、用戶(hù)管理、訂單管理等等；（3）動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶(hù)請(qǐng)求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)。7．根據(jù)所學(xué)內(nèi)容，完成表5-2。表5-2靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的比較表

靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)