認識動態(tài)網(wǎng)頁 公開課教學(xué)設(shè)計

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

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

靜態(tài)網(wǎng)頁動態(tài)網(wǎng)