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

1.以生活中的滾動(dòng)字幕實(shí)例引入，激發(fā)學(xué)生學(xué)習(xí)興趣。

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

3.通過(guò)實(shí)例演示，讓學(xué)生動(dòng)手實(shí)踐，掌握滾動(dòng)畫(huà)面、字幕的插入和層的使用技巧。

4.引導(dǎo)學(xué)生進(jìn)行課堂討論，分享制作過(guò)程中遇到的問(wèn)題及解決方法。

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

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

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

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

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

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

4.行為習(xí)慣：學(xué)生在操作電腦時(shí)，普遍存在耐心不足、粗心大意等問(wèn)題，這可能會(huì)影響到課堂實(shí)踐中的效果。

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

-硬件資源：多媒體計(jì)算機(jī)、投影儀、白板

-課程平臺(tái)：學(xué)校網(wǎng)絡(luò)教學(xué)平臺(tái)

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

-教學(xué)手段：?jiǎn)栴}驅(qū)動(dòng)法、任務(wù)驅(qū)動(dòng)法、小組合作法、實(shí)時(shí)反饋與指導(dǎo)教學(xué)過(guò)程一、導(dǎo)入新課

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

二、探究新課

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

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

3.接下來(lái)，我們來(lái)學(xué)習(xí)字幕的插入。字幕可以讓網(wǎng)頁(yè)更加生動(dòng)，我們可以使用＜marquee＞標(biāo)簽來(lái)實(shí)現(xiàn)字幕效果。請(qǐng)大家看教材上的例子，分析一下字幕是如何實(shí)現(xiàn)的。

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

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

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

三、實(shí)踐操作

1.下面，我們將進(jìn)行一個(gè)實(shí)踐操作，請(qǐng)大家將之前學(xué)到的滾動(dòng)、字幕與層的效果結(jié)合起來(lái)，制作一個(gè)有趣的網(wǎng)頁(yè)。

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

3.接下來(lái)，我們開(kāi)始編寫(xiě)HTML代碼，實(shí)現(xiàn)網(wǎng)頁(yè)的布局。在編寫(xiě)代碼的過(guò)程中，請(qǐng)大家注意以下幾點(diǎn)：

-合理使用＜marquee＞標(biāo)簽實(shí)現(xiàn)滾動(dòng)效果；

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

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

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

5.在實(shí)踐操作過(guò)程中，如果遇到問(wèn)題，可以隨時(shí)向我請(qǐng)教，也可以與同學(xué)們一起討論，共同解決問(wèn)題。

四、課堂小結(jié)

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

2.請(qǐng)同學(xué)們分享一下自己在實(shí)踐操作中的收獲和體會(huì)，也可以談?wù)勗诓僮鬟^(guò)程中遇到的問(wèn)題及解決方法。

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

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

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

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

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

2.課后自主學(xué)習(xí)和探究：

a.深入學(xué)習(xí)HTML5和CSS3的新特性，了解它們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

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

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

d.學(xué)習(xí)使用網(wǎng)頁(yè)設(shè)計(jì)工具，如AdobeDreamweaver、VisualStudioCode等，提高網(wǎng)頁(yè)開(kāi)發(fā)的效率。

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

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

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

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

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

-marquee標(biāo)簽的使用

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

②字幕插入

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

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

③層的使用

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

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

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

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

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

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

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

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