網頁設計之滾動字幕教案.doc

20152016學年 第二學期網頁設計之滾動字幕教案（公開課）信息技術組：米暢2016年6月22日授課內容網頁設計之滾動字幕課時安排1課時 教學目標要求知識與技能會使用標簽制作滾動字幕，并理解屬性與屬性值之間的含義。過程與方法鞏固對Dreamweaver軟件中“標簽”和“標簽檢查器”的使用。學會合理的規(guī)劃滾動圖片或文字的出現效果。情感態(tài)度與價值觀本節(jié)學習將滾動字幕作為一個單獨的元素進行講解，選取更為簡單易懂的案列來幫助學生掌握重點。同時引導學生注意觀察周圍事物，將滾動這種表現方式不僅僅局限于網頁設計，而是利用Dreamweaver這個軟件來實現該效果。待學生熟練掌握滾動字幕的制作后，就可以在他們的網站里自由發(fā)揮。由此引導學生理解什么是觸類旁通，真正授人以漁。教學重點難點重點：利用滾動字幕增強網頁表現力。難點：利用“標簽檢查器”為標簽的各個屬性設置參數。教學方法手段 講授法、演示法、任務驅動法 教學內容提綱一、新課引入 同學們，對于HTML語言的學習已有一段時間，其中我們認識了很重要的一個元素標簽。大家先跟老師一起回顧所學過的標簽。【播放幻燈片】以上這些標簽都是構成靜態(tài)網頁的基本元素，若想實現如示例所示的網頁效果，我們該如何制作呢？先請同學們欣賞這幾個網頁，找出它們的共同點?！菊故緷L動字幕網頁】 師將發(fā)言簡單總結，確定本節(jié)課的主題滾動字幕。2、 本課教學師：既然同學們都見過滾動字幕，那么它到底是如何實現的呢？接下來請大家觀看一段微視頻，觀看的同時思考以下幾個問題?！咎岢鰡栴}，播放視頻】1 滾動字幕的標簽如何表示？2 滾動字幕的標簽中有哪些屬性？3 該標簽是否可以用來制作滾動圖片？通過微視頻我想同學們對滾動字幕都有了自己的認識，那么剛才提出的三個問題心中也有了答案。哪位同學來回答第一個問題？【提問回答】1 2 behavior滾動方式、direction滾動方向、scrollamount滾動速度、scrolldelay滾動時停頓的時間 3 可以師：在微視頻中學生不僅學習了一個新標簽，同時也獲得了如何制作滾動字幕的信息?，F在，我們發(fā)布挑戰(zhàn)一，請同學們自主完成，速度最快的兩名同學可以充當小老師幫助其他同學。挑戰(zhàn)一：根據已給的文字素材，每位同學制作滾動字幕，表現形式不限。最先做完的三名同學將為所在大組贏得一面小紅旗?！菊故緦W生作品，并上臺進行演示】一探究竟：大部分同學已經實現文字滾動效果，在前面思考的問題中有一個“滾動字幕的標簽中有哪些屬性”，但是對標簽的屬性有多少同學能熟練運用呢？為了能讓大家實現更多的滾動效果，請同學們按照老師所說的步驟，一步一步的執(zhí)行，然后仔細觀察網頁中的文字發(fā)生了怎樣的變化?！静シ呕脽羝? 將behavior屬性后面雙引號中的內容進行修改2 將direction屬性后面雙引號中的內容進行修改3 將scrollamount屬性后面的數值增大，接著減少4 將scrolldelay屬性后面的數值增大，接著減少簡單的我們已經掌握，像游戲一樣我們來提升難度。剛才思考的第三個問題是“該標簽是否可以用來制作滾動圖片”，答案是當然可以。所以接下來請同學們利用老師下發(fā)的素材包括文字、圖片，挑選自己認為合適的難度任務來完成。完成速度較快的并且充滿創(chuàng)意的同學，可以幫助其他同學?！静シ呕脽羝刻魬?zhàn)二：難度系數：一顆星自由發(fā)揮，制作一段滾動字幕，內容自定義。難度系數：兩顆星自由發(fā)揮，利用已給圖片素材制作滾動圖片。難度系數：三顆星自由發(fā)揮，利用已給的圖片和文字素材，制作多樣的滾動內容。 先將全體學生分為四個組，然后學生根據情況自由選擇不同難度的挑戰(zhàn)，并在20分鐘內完成。老師檢查通過后，可在所對應的大組加上相應的星星數。最后，星星數最多的一組為獲勝組?！菊故緦W生作品】三、課堂小結首先，采用快問快答的方式對本節(jié)課的知識點進行一個鞏固，老師提問學生集體回答。師：最后我們一起對本節(jié)課進行一個小結。在Dreamweaver中制作滾動字幕，無需手動輸入代碼，可以使用HTML的標簽，并設置屬性即可。標簽的屬性常用的有四個，分別為behavior滾動方式、direction滾動方向、scrollamount滾動速度、scrolldelay滾動時停頓時間。當然也可以用來制作滾動圖片，只需將我們要滾動顯示的單張或多張圖片排列好選中后，再添加標簽并設置參數就可以了。課外學習要求 師：課后，請同學們利用今天所學的滾動字幕，為自己所作網站增添亮麗一筆。同時結合課本第72頁至73頁，自己嘗試利用AP Div元素（層）布局網頁。教學后記 這堂課我把教學內容轉化為具有潛在意義的問題，讓學生產生強烈的探究意識，使學生的整個學習過程成為“猜想”，繼而緊張地探索，期待尋找答案和理由的一個過程。在實際情況下進行學習，可以先讓學生見證網頁效果，然后自己動手嘗試達到同樣的效果。并且教師需要引導學生將不同參數值設置的情況進行對比，發(fā)現不同加深映象，這樣獲取的知識，不但易于保持，而且易于遷移到陌生的問題情境中。本課沿用了我一貫的教學手段“挑戰(zhàn)難度任務”，同時這一環(huán)節(jié)也貫穿了始終，讓學生在競爭中得到歡樂，獲得知識。由易到難的制作過程，促使學生一步步掌握了滾動字幕的制作技巧，再利用到自己的網站中實現增強網頁表現力這一目標。最后的快問快答的總結形式，再一次加深了學生對新知識的記憶，更主要強調了創(chuàng)新的重要性。同時，溫故