全國清華大學版信息技術(shù)八年級下冊第3單元第10課《左右逢源-滾動、字幕與層的使用》說課稿

全國清華大學版信息技術(shù)八年級下冊第3單元第10課《左右逢源--滾動、字幕與層的使用》說課稿授課內(nèi)容授課時數(shù)授課班級授課人數(shù)授課地點授課時間設(shè)計思路本節(jié)課《左右逢源--滾動、字幕與層的使用》旨在讓學生掌握網(wǎng)頁設(shè)計中滾動畫面的制作、字幕的插入以及層的使用技巧?；诎四昙墝W生的認知水平，本節(jié)課的設(shè)計思路如下：

1.以生活中的滾動字幕實例引入，激發(fā)學生學習興趣。

2.結(jié)合教材，詳細講解滾動、字幕與層的基本概念及操作方法。

3.通過實例演示，讓學生動手實踐，掌握滾動畫面、字幕的插入和層的使用技巧。

4.引導學生進行課堂討論，分享制作過程中遇到的問題及解決方法。

5.課堂小結(jié)，鞏固所學知識，布置課后實踐作業(yè)，提高學生的實際操作能力。核心素養(yǎng)目標1.信息意識：培養(yǎng)學生主動獲取、評估、使用信息的能力，通過本課學習，能獨立設(shè)計并實現(xiàn)簡單的滾動字幕和網(wǎng)頁層效果。

2.計算思維：培養(yǎng)學生利用信息技術(shù)解決問題的思維，通過分析問題、設(shè)計解決方案、實踐操作，掌握網(wǎng)頁設(shè)計中滾動、字幕與層的使用技巧。

3.信息社會責任：教育學生遵循信息倫理，尊重知識產(chǎn)權(quán)，培養(yǎng)良好的信息行為習慣，在網(wǎng)頁設(shè)計中遵循規(guī)范，提升自身信息素養(yǎng)。學情分析本節(jié)課面向的是八年級的學生，他們在信息技術(shù)學科方面已具備一定的知識基礎(chǔ)和操作能力。具體學情分析如下：

1.知識基礎(chǔ)：學生已經(jīng)學習了網(wǎng)頁設(shè)計的基本概念和簡單操作，掌握了HTML和CSS的基本語法，能夠創(chuàng)建簡單的網(wǎng)頁。

2.能力水平：學生在之前的學習中已經(jīng)能夠獨立完成網(wǎng)頁的搭建和簡單布局，但尚缺乏動態(tài)效果的實現(xiàn)能力。

3.素質(zhì)方面：學生具備一定的觀察能力和動手操作能力，但創(chuàng)新意識和解決問題的能力有待提高。

4.行為習慣：學生在操作電腦時，普遍存在耐心不足、粗心大意等問題，這可能會影響到課堂實踐中的效果。

5.對課程學習的態(tài)度：學生對網(wǎng)頁設(shè)計充滿興趣，但對動態(tài)效果的制作感到有些難度，存在一定的畏難情緒。教學資源-軟件資源：網(wǎng)頁設(shè)計軟件（如Dreamweaver）、HTML/CSS編輯器

-硬件資源：多媒體計算機、投影儀、白板

-課程平臺：學校網(wǎng)絡(luò)教學平臺

-信息化資源：教學PPT、網(wǎng)頁設(shè)計案例、滾動字幕和層的效果示例

-教學手段：問題驅(qū)動法、任務(wù)驅(qū)動法、小組合作法、實時反饋與指導教學過程一、導入新課

1.各位同學，大家好！今天我們將繼續(xù)學習網(wǎng)頁設(shè)計的相關(guān)內(nèi)容。上一節(jié)課我們學習了網(wǎng)頁的基本布局，那么大家想不想讓我們的網(wǎng)頁變得更加生動有趣呢？今天，我們就來學習如何使用滾動、字幕與層，讓網(wǎng)頁動起來。

二、探究新課

1.首先，我們來了解什么是滾動效果。滾動效果可以讓網(wǎng)頁內(nèi)容在瀏覽器窗口中自動滾動，這樣用戶就可以在不滾動滾動條的情況下查看更多內(nèi)容。請大家打開教材第10課的內(nèi)容，我們一起來看看滾動效果是如何實現(xiàn)的。

2.請同學們跟隨我的操作，在網(wǎng)頁設(shè)計軟件中創(chuàng)建一個新的HTML文件。然后，我們在body標簽中添加一個marquee標簽，設(shè)置滾動方向、速度等屬性?，F(xiàn)在，大家在自己的電腦上嘗試一下，看看能不能實現(xiàn)滾動效果。

3.接下來，我們來學習字幕的插入。字幕可以讓網(wǎng)頁更加生動，我們可以使用＜marquee＞標簽來實現(xiàn)字幕效果。請大家看教材上的例子，分析一下字幕是如何實現(xiàn)的。

4.現(xiàn)在，請大家在自己的電腦上嘗試插入一個字幕，可以是一句話，也可以是一段文字。在操作過程中，注意觀察字幕的樣式、大小、顏色等屬性，嘗試調(diào)整它們，看看會有什么變化。

5.最后，我們來學習層的使用。層是一種用于在網(wǎng)頁中定位元素的工具，我們可以使用＜div＞標簽來創(chuàng)建層。請大家看教材上的例子，分析一下層是如何使用的。

6.現(xiàn)在，請大家在自己的電腦上創(chuàng)建一個層，并設(shè)置其樣式。然后，嘗試將一個圖片或文字放入層中，看看效果如何。

三、實踐操作

1.下面，我們將進行一個實踐操作，請大家將之前學到的滾動、字幕與層的效果結(jié)合起來，制作一個有趣的網(wǎng)頁。

2.首先，我們需要規(guī)劃網(wǎng)頁的整體布局，確定滾動、字幕和層的位置。請大家根據(jù)自己的想法，畫出網(wǎng)頁的布局圖。

3.接下來，我們開始編寫HTML代碼，實現(xiàn)網(wǎng)頁的布局。在編寫代碼的過程中，請大家注意以下幾點：

-合理使用＜marquee＞標簽實現(xiàn)滾動效果；

-適當插入字幕，豐富網(wǎng)頁內(nèi)容；

-合理使用＜div＞標簽創(chuàng)建層，并設(shè)置樣式。

4.編寫完代碼后，請大家預(yù)覽網(wǎng)頁效果，檢查是否有需要調(diào)整的地方。如果有，請及時修改代碼，直到達到預(yù)期的效果。

5.在實踐操作過程中，如果遇到問題，可以隨時向我請教，也可以與同學們一起討論，共同解決問題。

四、課堂小結(jié)

1.現(xiàn)在，我們已經(jīng)完成了本節(jié)課的學習，大家是否掌握了滾動、字幕與層的使用呢？

2.請同學們分享一下自己在實踐操作中的收獲和體會，也可以談?wù)勗诓僮鬟^程中遇到的問題及解決方法。

3.最后，我要給大家布置一個課后作業(yè)：請大家結(jié)合今天所學的內(nèi)容，制作一個有趣的網(wǎng)頁，下節(jié)課我們來進行展示和交流。

4.好了，本節(jié)課我們就到這里，希望大家能夠充分利用所學知識，發(fā)揮自己的創(chuàng)意，制作出更加精彩的網(wǎng)頁。下課！拓展與延伸1.拓展閱讀材料：

-《網(wǎng)頁設(shè)計與制作實例教程》

-《HTML5與CSS3權(quán)威指南》

-《JavaScript高級程序設(shè)計》

2.課后自主學習和探究：

a.深入學習HTML5和CSS3的新特性，了解它們在網(wǎng)頁設(shè)計中的應(yīng)用。

b.學習JavaScript基礎(chǔ)，掌握如何在網(wǎng)頁中添加交互性，例如響應(yīng)用戶事件、動態(tài)修改內(nèi)容等。

c.探索網(wǎng)頁設(shè)計的最新趨勢，如響應(yīng)式設(shè)計、扁平化設(shè)計等，并嘗試將這些理念應(yīng)用到自己的網(wǎng)頁設(shè)計中。

d.學習使用網(wǎng)頁設(shè)計工具，如AdobeDreamweaver、VisualStudioCode等，提高網(wǎng)頁開發(fā)的效率。

e.研究網(wǎng)頁設(shè)計的最佳實踐，包括用戶體驗（UX）設(shè)計原則、搜索引擎優(yōu)化（SEO）等，以提升網(wǎng)頁的專業(yè)性。

f.閱讀并分析一些優(yōu)秀的網(wǎng)頁設(shè)計案例，了解它們是如何結(jié)合滾動、字幕和層的效果來增強網(wǎng)頁的視覺效果和用戶體驗的。

g.嘗試制作一個包含復(fù)雜滾動效果和動態(tài)字幕的網(wǎng)頁項目，通過實踐加深對課堂所學知識的理解和應(yīng)用。

h.參與在線網(wǎng)頁設(shè)計社區(qū)，如StackOverflow、GitHub等，與其他網(wǎng)頁設(shè)計師交流心得，學習他們的經(jīng)驗和技巧。

i.定期回顧和總結(jié)所學知識，確保對HTML、CSS和JavaScript的理解不斷深化，并能夠靈活運用到實際項目中。板書設(shè)計①滾動效果實現(xiàn)

-marquee標簽的使用

-滾動方向、速度、行為的設(shè)置

②字幕插入

-marquee標簽的屬性調(diào)整

-字幕內(nèi)容、樣式、大小的設(shè)定

③層的使用

-div標簽的創(chuàng)建與定位

-層的樣式設(shè)置與內(nèi)容嵌入教學反思與改進在教學《左右逢源--滾動、字幕與層的使用》這節(jié)課后，我進行了深入的反思，以期評估教學效果并識別需要改進的地方。

首先，在設(shè)計滾動效果的教學環(huán)節(jié)，我發(fā)現(xiàn)學生們對于marquee標簽的使用掌握得較快，但在設(shè)置滾動屬性時，部分同學對于方向、速度和行為的理解不夠深刻，導致實際操作時效果不盡如人意。為此，我計劃在未來的教學中，增加一些互動環(huán)節(jié)，比如讓學生自己嘗試設(shè)置不同的屬性值，并觀察效果的變化，以此來加深他們的理解。

其次，在字幕插入的教學中，雖然學生們能夠按照教材示例完成字幕的插入，但我注意到他們在調(diào)整字幕樣式時，對于CSS屬性的應(yīng)用還不夠熟練。我打算在下一節(jié)課中，專門安排一些時間讓學生復(fù)習CSS的基本語法，并通過練習加強他們的實際操作能力。

再來談?wù)剬拥氖褂?。雖然學生們能夠創(chuàng)建并設(shè)置層，但在層內(nèi)嵌入內(nèi)容時，出現(xiàn)了定位不準確的問題。我覺得這可能是由于理論講解不夠充分導致的。因此，我計劃在后續(xù)的教學中，通過更加直觀的演示和案例，幫助學生更好地理解層的定位原理。

1.增加課堂互動：在講解每個知識點后，我會設(shè)計一些小問題和練習，讓學生立即動手實踐，并及時給予反饋，確保他們真正理解并掌握所學內(nèi)容。

2.強化基礎(chǔ)復(fù)習：在每個新知識點講解前，我會安排一些基礎(chǔ)的復(fù)習環(huán)節(jié)，幫助學生鞏固已學知識，為學習新內(nèi)容打下堅實的基礎(chǔ)。

3.優(yōu)化案例教學：我會選擇更多貼近學生生活的案例，讓他們能夠更加直觀地感受到網(wǎng)頁設(shè)計的實用性和趣味