第3單元第10課《左右逢源-滾動(dòng)、字幕與層的使用》-教學(xué)設(shè)計(jì)2023-2024學(xué)年清華大學(xué)版（2012）初中信息技術(shù)八年級(jí)下冊(cè)

第3單元第10課《左右逢源--滾動(dòng)、字幕與層的使用》-教學(xué)設(shè)計(jì)2023—2024學(xué)年清華大學(xué)版（2012）初中信息技術(shù)八年級(jí)下冊(cè)課題：科目：班級(jí)：課時(shí)：計(jì)劃1課時(shí)教師：?jiǎn)挝唬阂?、設(shè)計(jì)思路同學(xué)們，今天我們要一起探索信息技術(shù)中一個(gè)充滿趣味性的主題——《左右逢源--滾動(dòng)、字幕與層的使用》。想象一下，當(dāng)你的網(wǎng)頁(yè)動(dòng)起來(lái)，字幕飛舞，是不是瞬間覺(jué)得整個(gè)世界都生動(dòng)了起來(lái)呢？咱們這節(jié)課，就是要教會(huì)大家如何讓網(wǎng)頁(yè)“動(dòng)”起來(lái)。咱們一起，走進(jìn)這個(gè)奇妙的世界，感受信息技術(shù)帶來(lái)的無(wú)限魅力吧！??????二、核心素養(yǎng)目標(biāo)1.提升信息意識(shí)，理解滾動(dòng)、字幕與層在網(wǎng)頁(yè)設(shè)計(jì)中的作用。

2.培養(yǎng)計(jì)算思維，通過(guò)編程實(shí)踐，學(xué)會(huì)使用相關(guān)工具進(jìn)行網(wǎng)頁(yè)動(dòng)態(tài)效果的設(shè)計(jì)。

3.增強(qiáng)問(wèn)題解決能力，學(xué)會(huì)分析問(wèn)題，運(yùn)用所學(xué)知識(shí)解決實(shí)際問(wèn)題。

4.強(qiáng)化實(shí)踐創(chuàng)新，鼓勵(lì)學(xué)生創(chuàng)作個(gè)性化網(wǎng)頁(yè)，提升創(chuàng)新意識(shí)和能力。三、教學(xué)難點(diǎn)與重點(diǎn)1.教學(xué)重點(diǎn)，

①如何正確設(shè)置滾動(dòng)字幕的速度和方向，實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

②掌握層的基本操作，包括創(chuàng)建、移動(dòng)、隱藏和顯示層，以及層與層之間的交互。

③學(xué)會(huì)使用JavaScript代碼控制滾動(dòng)、字幕和層的行為，實(shí)現(xiàn)復(fù)雜動(dòng)態(tài)效果。

2.教學(xué)難點(diǎn)，

①理解層與層之間的嵌套關(guān)系，避免在操作過(guò)程中產(chǎn)生錯(cuò)誤。

②熟練運(yùn)用JavaScript進(jìn)行編程，實(shí)現(xiàn)動(dòng)態(tài)效果的同時(shí)保證代碼的可讀性和可維護(hù)性。

③在實(shí)際操作中，根據(jù)需求調(diào)整滾動(dòng)、字幕和層的效果，達(dá)到美觀和實(shí)用的平衡。四、教學(xué)方法與策略1.采用講授法結(jié)合演示，直觀展示滾動(dòng)、字幕與層的基本操作。

2.設(shè)計(jì)互動(dòng)實(shí)驗(yàn)環(huán)節(jié)，讓學(xué)生親手操作，鞏固所學(xué)知識(shí)。

3.引入案例分析，引導(dǎo)學(xué)生分析優(yōu)秀網(wǎng)頁(yè)的動(dòng)態(tài)效果，激發(fā)創(chuàng)意。

4.運(yùn)用游戲化教學(xué)，通過(guò)完成任務(wù)卡片的形式，提高學(xué)生參與度和學(xué)習(xí)興趣。

5.利用多媒體工具，如視頻和動(dòng)畫(huà)，輔助教學(xué)，加深學(xué)生對(duì)動(dòng)態(tài)效果的理解。五、教學(xué)過(guò)程1.導(dǎo)入（約5分鐘）

-激發(fā)興趣：同學(xué)們，你們有沒(méi)有在網(wǎng)上看到過(guò)那些動(dòng)感的網(wǎng)頁(yè)，上面的文字和圖片就像會(huì)跳舞一樣？今天我們就來(lái)學(xué)習(xí)如何讓我們的網(wǎng)頁(yè)也變得這么有趣！

-回顧舊知：在之前的學(xué)習(xí)中，我們了解了網(wǎng)頁(yè)的基本結(jié)構(gòu)和HTML標(biāo)簽的使用，今天我們將在此基礎(chǔ)上，學(xué)習(xí)如何讓網(wǎng)頁(yè)動(dòng)起來(lái)。

2.新課呈現(xiàn)（約25分鐘）

-講解新知：首先，我會(huì)詳細(xì)講解滾動(dòng)、字幕與層的基本概念和原理，包括它們的創(chuàng)建、屬性設(shè)置和交互方式。

-舉例說(shuō)明：通過(guò)展示一些優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)案例，讓學(xué)生直觀地看到滾動(dòng)、字幕與層的效果，并分析其實(shí)現(xiàn)方法。

-互動(dòng)探究：我會(huì)提出一些問(wèn)題，引導(dǎo)學(xué)生思考如何實(shí)現(xiàn)特定的動(dòng)態(tài)效果，并鼓勵(lì)他們進(jìn)行小組討論。

3.實(shí)踐操作（約40分鐘）

-學(xué)生活動(dòng)：現(xiàn)在，請(qǐng)大家打開(kāi)電腦，跟隨我的步驟，嘗試創(chuàng)建一個(gè)簡(jiǎn)單的滾動(dòng)字幕效果。

-教師指導(dǎo)：在學(xué)生操作過(guò)程中，我會(huì)巡視教室，解答他們的問(wèn)題，并給予必要的指導(dǎo)。

4.鞏固練習(xí)（約20分鐘）

-學(xué)生活動(dòng)：接下來(lái)，我將提供一個(gè)更復(fù)雜的案例，要求學(xué)生獨(dú)立完成一個(gè)帶有滾動(dòng)圖片和字幕的網(wǎng)頁(yè)設(shè)計(jì)。

-教師指導(dǎo)：我會(huì)提供一些提示，幫助學(xué)生解決問(wèn)題，并鼓勵(lì)他們嘗試不同的解決方案。

5.課堂小結(jié)（約5分鐘）

-回顧本節(jié)課所學(xué)內(nèi)容，強(qiáng)調(diào)滾動(dòng)、字幕與層在網(wǎng)頁(yè)設(shè)計(jì)中的重要性。

-鼓勵(lì)學(xué)生在課后繼續(xù)探索，嘗試設(shè)計(jì)更多有趣的網(wǎng)頁(yè)動(dòng)態(tài)效果。

6.作業(yè)布置（約2分鐘）

-要求學(xué)生課后完成一個(gè)個(gè)人網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目，運(yùn)用今天所學(xué)的滾動(dòng)、字幕與層技術(shù)，展示自己的創(chuàng)意。

在整個(gè)教學(xué)過(guò)程中，我會(huì)采用以下策略：

-利用多媒體教學(xué)手段，如PPT、視頻等，豐富教學(xué)內(nèi)容。

-通過(guò)小組合作，培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作能力。

-鼓勵(lì)學(xué)生提問(wèn)和表達(dá)，提高他們的溝通能力。

-結(jié)合實(shí)際案例，讓學(xué)生在實(shí)踐中學(xué)習(xí)和應(yīng)用知識(shí)。六、學(xué)生學(xué)習(xí)效果學(xué)生學(xué)習(xí)效果

1.**知識(shí)掌握與應(yīng)用能力提升**：

-學(xué)生能夠熟練掌握滾動(dòng)、字幕與層的基本概念和操作方法，理解它們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中的作用。

-學(xué)生通過(guò)實(shí)踐操作，能夠?qū)⑺鶎W(xué)知識(shí)應(yīng)用于實(shí)際項(xiàng)目中，設(shè)計(jì)出具有動(dòng)態(tài)效果的網(wǎng)頁(yè)。

2.**編程技能的增強(qiáng)**：

-學(xué)生通過(guò)學(xué)習(xí)JavaScript代碼控制滾動(dòng)、字幕與層，提高了編程技能，增強(qiáng)了邏輯思維和問(wèn)題解決能力。

-學(xué)生學(xué)會(huì)了如何編寫(xiě)簡(jiǎn)潔、高效、可維護(hù)的代碼，為以后深入學(xué)習(xí)編程打下基礎(chǔ)。

3.**信息意識(shí)與創(chuàng)新能力培養(yǎng)**：

-學(xué)生在課程學(xué)習(xí)中，對(duì)信息技術(shù)的應(yīng)用有了更深的認(rèn)識(shí)，提高了信息意識(shí)。

-學(xué)生通過(guò)嘗試不同的設(shè)計(jì)，激發(fā)了創(chuàng)新思維，能夠提出自己的設(shè)計(jì)理念和解決方案。

4.**團(tuán)隊(duì)合作與溝通能力的提高**：

-在小組合作的項(xiàng)目中，學(xué)生學(xué)會(huì)了如何與他人協(xié)作，共同完成任務(wù)。

-學(xué)生通過(guò)討論和分享，提高了溝通能力，學(xué)會(huì)了如何表達(dá)自己的想法和聽(tīng)取他人的意見(jiàn)。

5.**實(shí)踐操作與動(dòng)手能力的鍛煉**：

-學(xué)生通過(guò)實(shí)際操作，鍛煉了動(dòng)手能力，學(xué)會(huì)了將理論知識(shí)轉(zhuǎn)化為實(shí)際成果。

-學(xué)生在遇到問(wèn)題時(shí)，能夠通過(guò)查閱資料、討論等方式解決問(wèn)題，提高了自主學(xué)習(xí)能力。

6.**審美觀念的提升**：

-學(xué)生在設(shè)計(jì)和制作動(dòng)態(tài)網(wǎng)頁(yè)的過(guò)程中，對(duì)網(wǎng)頁(yè)設(shè)計(jì)的審美有了更深的理解。

-學(xué)生學(xué)會(huì)了如何平衡實(shí)用性和美觀性，提高了對(duì)網(wǎng)頁(yè)設(shè)計(jì)的審美鑒賞能力。

7.**情感態(tài)度與價(jià)值觀的塑造**：

-學(xué)生在課程學(xué)習(xí)中，體會(huì)到信息技術(shù)帶來(lái)的便捷和樂(lè)趣，增強(qiáng)了學(xué)習(xí)興趣。

-學(xué)生通過(guò)自己的努力實(shí)現(xiàn)設(shè)計(jì)目標(biāo)，培養(yǎng)了自信心和成就感。七、反思改進(jìn)措施反思改進(jìn)措施（一）教學(xué)特色創(chuàng)新

1.**案例教學(xué)法的深化**：在教學(xué)中，我嘗試了結(jié)合實(shí)際案例進(jìn)行教學(xué)，讓學(xué)生在真實(shí)情境中學(xué)習(xí)滾動(dòng)、字幕與層的使用。未來(lái)，我計(jì)劃進(jìn)一步豐富案例庫(kù)，引入更多行業(yè)內(nèi)的成功案例，讓學(xué)生更直觀地感受技術(shù)在實(shí)際工作中的應(yīng)用。

2.**項(xiàng)目導(dǎo)向?qū)W習(xí)的實(shí)踐**：我嘗試將項(xiàng)目導(dǎo)向?qū)W習(xí)引入課堂，讓學(xué)生在完成項(xiàng)目的過(guò)程中學(xué)習(xí)。接下來(lái)，我計(jì)劃進(jìn)一步完善項(xiàng)目設(shè)計(jì)，確保項(xiàng)目既有挑戰(zhàn)性，又能激發(fā)學(xué)生的學(xué)習(xí)興趣，同時(shí)注重培養(yǎng)學(xué)生的團(tuán)隊(duì)合作能力。

反思改進(jìn)措施（二）存在主要問(wèn)題

1.**學(xué)生實(shí)踐操作時(shí)間不足**：在教學(xué)過(guò)程中，我發(fā)現(xiàn)學(xué)生在實(shí)際操作上的時(shí)間有限，導(dǎo)致一些學(xué)生無(wú)法充分掌握技能。為了解決這個(gè)問(wèn)題，我計(jì)劃增加實(shí)踐操作的時(shí)間，并設(shè)計(jì)更多的實(shí)踐練習(xí)，讓學(xué)生有更多機(jī)會(huì)練習(xí)。

2.**教學(xué)評(píng)價(jià)方式單一**：目前的教學(xué)評(píng)價(jià)主要依賴于課堂表現(xiàn)和作業(yè)完成情況，缺乏多元化的評(píng)價(jià)方式。未來(lái)，我將嘗試引入過(guò)程性評(píng)價(jià)，關(guān)注學(xué)生在學(xué)習(xí)過(guò)程中的進(jìn)步和努力，同時(shí)結(jié)合學(xué)生自評(píng)和互評(píng)，提高評(píng)價(jià)的全面性。

3.**技術(shù)更新與教學(xué)內(nèi)容匹配度問(wèn)題**：隨著技術(shù)的發(fā)展，一些新的動(dòng)態(tài)效果和技術(shù)不斷涌現(xiàn)。然而，教材的更新可能跟不上技術(shù)的步伐。為了解決這個(gè)問(wèn)題，我將定期更新教學(xué)內(nèi)容，確保學(xué)生所學(xué)知識(shí)與行業(yè)最新技術(shù)保持同步。

反思改進(jìn)措施（三）

1.**增加實(shí)踐操作環(huán)節(jié)**：為了讓學(xué)生有更多時(shí)間練習(xí)，我將在課程中安排更多的實(shí)踐操作環(huán)節(jié)，并提供詳細(xì)的操作指南和反饋，幫助學(xué)生克服實(shí)踐中的困難。

2.**引入多元化的教學(xué)評(píng)價(jià)**：我將設(shè)計(jì)一套多元化的評(píng)價(jià)體系，包括課堂表現(xiàn)、作業(yè)完成、項(xiàng)目展示、自我評(píng)價(jià)和同伴評(píng)價(jià)等多個(gè)方面，全面評(píng)估學(xué)生的學(xué)習(xí)成果。

3.**緊跟技術(shù)發(fā)展，更新教學(xué)內(nèi)容**：我會(huì)定期參加行業(yè)研討會(huì)，了解最新的技術(shù)動(dòng)態(tài)，并將這些新知識(shí)融入到教學(xué)內(nèi)容中，確保學(xué)生所學(xué)的內(nèi)容與時(shí)俱進(jìn)。同時(shí)，我也將鼓勵(lì)學(xué)生參與課外技術(shù)活動(dòng)，拓寬他們的技術(shù)視野。八、典型例題講解1.**例題**：

-創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，其中包含一個(gè)可以左右滾動(dòng)的字幕。字幕內(nèi)容為：“歡迎來(lái)到我們的網(wǎng)站！”要求設(shè)置字幕滾動(dòng)速度適中，且當(dāng)鼠標(biāo)懸停在字幕上時(shí)，滾動(dòng)停止。

**解答**：

```html

<html>

<head>

<style>

#marquee{

width:300px;

overflow:hidden;

white-space:nowrap;

}

</style>

</head>

<body>

<divid="marquee">

<marqueedirection="left"scrollamount="2">

歡迎來(lái)到我們的網(wǎng)站！

</marquee>

</div>

</body>

</html>

```

2.**例題**：

-在網(wǎng)頁(yè)上創(chuàng)建一個(gè)層，當(dāng)用戶點(diǎn)擊網(wǎng)頁(yè)上的一個(gè)按鈕時(shí)，層將顯示在網(wǎng)頁(yè)的中央位置，并顯示一行文字：“點(diǎn)擊按鈕，層出現(xiàn)！”

**解答**：

```html

<html>

<head>

<style>

#layer{

width:200px;

height:100px;

background-color:#f0f0f0;

position:absolute;

display:none;

text-align:center;

line-height:100px;

}

#button{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

</style>

<script>

functionshowLayer(){

document.getElementById('layer').style.display='block';

}

</script>

</head>

<body>

<buttonid="button"onclick="showLayer()">點(diǎn)擊這里</button>

<divid="layer">點(diǎn)擊按鈕，層出現(xiàn)！</div>

</body>

</html>

```

3.**例題**：

-設(shè)計(jì)一個(gè)網(wǎng)頁(yè)，其中包含一個(gè)可以上下滾動(dòng)的圖片列表。圖片列表包含5張圖片，每張圖片在鼠標(biāo)懸停時(shí)放大，移開(kāi)后恢復(fù)原大小。

**解答**：

```html

<html>

<head>

<style>

#gallery{

width:500px;

overflow:hidden;

white-space:nowrap;

position:relative;

}

.image-item{

display:inline-block;

width:100px;

margin:10px;

transition:transform0.3s;

}

.image-item:hover{

transform:scale(1.1);

}

</style>

</head>

<body>

<divid="gallery">

<divclass="image-item"><imgsrc="image1.jpg"alt="Image1"></div>

<divclass="image-item"><imgsrc="image2.jpg"alt="Image2"></div>

<divclass="image-item"><imgsrc="image3.jpg"alt="Image3"></div>

<divclass="image-item"><imgsrc="image4.jpg"alt="Image4"></div>

<divclass="image-item"><imgsrc="image5.jpg"alt="Image5"></div>

</div>

</body>

</html>

```

4.**例題**：

-創(chuàng)建一個(gè)網(wǎng)頁(yè)，其中包含一個(gè)動(dòng)態(tài)的數(shù)字時(shí)鐘，顯示當(dāng)前時(shí)間，并且每隔一秒更新一次。

**解答**：

```html

<html>

<head>

<style>

#clock{

font-size:24px;

font-family:'Arial',sans-serif;

}

</style>

<script>

functionshowTime(){

varnow=newDate();

varhours=now.getHours().toString().padStart(2,'0');

varminutes=now.getMinutes().toString().padStart(2,'0');

varseconds=now.getSeconds().toString().padStart(2,'0');

document.getElementById('clock').textContent=hours+':'+minutes+':'+seconds;

}

setInterval(showTime,1000);

</script>

</head>

<body>

<divid="clock"></div>

</body>

</html>

```

5.**例題**：

-設(shè)計(jì)一個(gè)簡(jiǎn)單的游戲，用戶點(diǎn)擊網(wǎng)頁(yè)上的不同區(qū)域，每個(gè)區(qū)域都會(huì)顯示一個(gè)不同的動(dòng)畫(huà)效果。

**解答**：

```html

<html>

<head>

<style>

.game-area{

width:200px;

height:200px;

border:1pxsolid#000;

position:relative;

}

.game-areadiv{

width:50%;

height:50%;

position:absolute;

}

#area1{top:0;left:0;background-color:red;}

#area2{top:0;left:50%;background-color:green;}

#area3{top:50%;left:0;background-color