第10課 左右逢源-滾動、字幕與層的使用 教學設(shè)計 -2023--2024學年清華大學版（2012）初中信息技術(shù)八年級下冊

第10課左右逢源——滾動、字幕與層的使用教學設(shè)計-2023—-2024學年清華大學版（2012）初中信息技術(shù)八年級下冊學校授課教師課時授課班級授課地點教具教學內(nèi)容第10課左右逢源——滾動、字幕與層的使用教學設(shè)計-2023—-2024學年清華大學版（2012）初中信息技術(shù)八年級下冊

本節(jié)課主要圍繞網(wǎng)頁設(shè)計中的滾動效果、字幕效果以及層的使用展開。具體內(nèi)容包括：滾動條的添加與設(shè)置、字幕的創(chuàng)建與編輯、層的創(chuàng)建與操作等。通過學習這些內(nèi)容，學生將掌握網(wǎng)頁設(shè)計的基本技巧，提高網(wǎng)頁的美觀性和互動性。核心素養(yǎng)目標教學難點與重點1.教學重點

-理解并掌握滾動、字幕與層的基本概念及其在網(wǎng)頁設(shè)計中的作用。

-能夠熟練應(yīng)用滾動條、字幕和層制作簡單的動態(tài)網(wǎng)頁效果。

-學會使用CSS樣式表對滾動效果、字幕和層進行美化與調(diào)整。

2.教學難點

-理解滾動、字幕與層之間的協(xié)同工作原理，例如，如何使?jié)L動條與層聯(lián)動。

-CSS樣式表的深入理解與應(yīng)用，特別是對動畫效果和層疊樣式的掌握。

-破解瀏覽器兼容性問題，確保在不同瀏覽器上都能實現(xiàn)預(yù)期的效果。

-舉例說明：

-難點一：當滾動條滾動時，如何使層中的內(nèi)容同步移動，而不是簡單地跟隨滾動條。

-難點二：在創(chuàng)建字幕效果時，如何設(shè)置過渡效果，使字幕出現(xiàn)和消失更加平滑。

-難點三：在網(wǎng)頁中使用層時，如何處理層之間的相互重疊和遮擋問題，確保內(nèi)容的可見性和交互性。教學資源-軟硬件資源：計算機教室、學生電腦、投影儀、白板

-課程平臺：學校信息技術(shù)課程教學平臺

-信息化資源：網(wǎng)頁設(shè)計相關(guān)教程、在線演示文稿、CSS樣式表參考手冊

-教學手段：PPT演示、視頻教學、實際操作示范、小組合作學習教學過程設(shè)計導入環(huán)節(jié)（5分鐘）

-創(chuàng)設(shè)情境：展示一些具有滾動效果、字幕和層應(yīng)用的網(wǎng)頁，如新聞網(wǎng)站、視頻網(wǎng)站等，引導學生觀察并討論這些網(wǎng)頁的特點。

-提出問題：詢問學生如何制作這樣的網(wǎng)頁效果，激發(fā)學生對網(wǎng)頁設(shè)計的興趣。

-學生回答：邀請學生分享他們已有的網(wǎng)頁設(shè)計經(jīng)驗，為后續(xù)學習做鋪墊。

講授新課（20分鐘）

-滾動條的使用：

-介紹滾動條的概念和作用。

-展示滾動條的HTML和CSS代碼示例。

-通過實際操作演示如何添加和設(shè)置滾動條。

-字幕的創(chuàng)建與編輯：

-介紹字幕的概念和作用。

-展示字幕的HTML和CSS代碼示例。

-通過實際操作演示如何創(chuàng)建和編輯字幕。

-層的使用：

-介紹層的基本概念和作用。

-展示層的HTML和CSS代碼示例。

-通過實際操作演示如何創(chuàng)建、顯示和隱藏層。

-學生互動：在講解過程中，適時提問學生，檢查他們對知識的理解程度，并鼓勵學生提出問題。

鞏固練習（15分鐘）

-練習一：學生獨立完成一個簡單的滾動效果網(wǎng)頁，包括添加滾動條、設(shè)置字幕和創(chuàng)建層。

-練習二：學生分組討論，如何優(yōu)化網(wǎng)頁效果，如調(diào)整滾動速度、字幕樣式等。

-學生展示：每組派代表展示他們的作品，并分享制作過程中的心得體會。

課堂提問（5分鐘）

-提問一：如何解決滾動條與層聯(lián)動的問題？

-提問二：在制作字幕效果時，如何設(shè)置過渡效果？

-提問三：在網(wǎng)頁中使用層時，如何處理層之間的相互重疊和遮擋問題？

-總結(jié)本節(jié)課所學內(nèi)容，強調(diào)滾動、字幕與層在網(wǎng)頁設(shè)計中的重要性。

-拓展：鼓勵學生嘗試使用其他網(wǎng)頁設(shè)計工具，如AdobeDreamweaver等，進一步探索網(wǎng)頁設(shè)計的可能性。

教學過程設(shè)計詳細流程：

1.導入環(huán)節(jié)（5分鐘）

-展示網(wǎng)頁示例（1分鐘）

-提出問題（1分鐘）

-學生回答（2分鐘）

2.講授新課（20分鐘）

-滾動條的使用（5分鐘）

-字幕的創(chuàng)建與編輯（5分鐘）

-層的使用（5分鐘）

-學生互動（5分鐘）

3.鞏固練習（15分鐘）

-練習一（5分鐘）

-練習二（5分鐘）

-學生展示（5分鐘）

4.課堂提問（5分鐘）

-提問一（1分鐘）

-提問二（1分鐘）

-提問三（1分鐘）

5.總結(jié)與拓展（5分鐘）

-總結(jié)（2分鐘）

-拓展（3分鐘）

總用時：45分鐘知識點梳理1.網(wǎng)頁設(shè)計基礎(chǔ)

-網(wǎng)頁的基本結(jié)構(gòu)：HTML、CSS、JavaScript

-網(wǎng)頁設(shè)計原則：布局、色彩、字體、交互性

2.滾動效果

-滾動條的概念和作用

-滾動條的HTML標簽：`<div>`、`<span>`、`<marquee>`

-滾動條的CSS樣式：`overflow`、`scrollbar-width`、`scrollbar-color`

3.字幕效果

-字幕的概念和作用

-字幕的HTML標簽：`<marquee>`、`<div>`、`<span>`

-字幕的CSS樣式：`text-align`、`color`、`font-size`

4.層的使用

-層的概念和作用

-層的HTML標簽：`<div>`、`<span>`

-層的CSS樣式：`position`、`top`、`left`、`width`、`height`

5.CSS樣式表

-CSS的基本概念和作用

-選擇器：類選擇器、ID選擇器、標簽選擇器、后代選擇器

-屬性：字體、顏色、大小、間距、邊框、背景等

6.動畫效果

-CSS動畫的基本概念和作用

-過渡效果：`transition`

-動畫效果：`animation`

7.瀏覽器兼容性

-瀏覽器兼容性的概念和作用

-常見瀏覽器的兼容性問題及解決方案

-使用工具：CSS兼容性測試工具、瀏覽器開發(fā)者工具

8.網(wǎng)頁優(yōu)化

-網(wǎng)頁優(yōu)化的概念和作用

-網(wǎng)頁加載速度優(yōu)化：壓縮圖片、減少HTTP請求、使用CDN

-網(wǎng)頁性能優(yōu)化：緩存、懶加載、代碼優(yōu)化

9.網(wǎng)頁安全

-網(wǎng)頁安全的概念和作用

-防止跨站腳本攻擊（XSS）

-防止跨站請求偽造（CSRF）

-防止SQL注入

10.網(wǎng)頁設(shè)計趨勢

-響應(yīng)式設(shè)計：適應(yīng)不同設(shè)備和屏幕尺寸的網(wǎng)頁設(shè)計

-移動優(yōu)先設(shè)計：優(yōu)先考慮移動設(shè)備上的用戶體驗

-交互式設(shè)計：增強用戶與網(wǎng)頁的互動性

-個性化設(shè)計：根據(jù)用戶需求提供定制化服務(wù)反思改進措施反思改進措施（一）教學特色創(chuàng)新

1.融入項目式學習：在教學中引入實際的項目案例，讓學生通過完成項目來學習滾動、字幕與層的使用，提高學生的實踐能力和解決問題的能力。

2.互動式教學：設(shè)計更多互動環(huán)節(jié)，如小組討論、角色扮演等，讓學生在交流中學習，增強課堂的趣味性和參與度。

反思改進措施（二）存在主要問題

1.學生對理論知識的理解不夠深入：在講解滾動、字幕與層的使用時，部分學生對于CSS樣式表的概念和屬性理解不夠，導致實際操作時遇到困難。

2.實踐環(huán)節(jié)時間分配不合理：在練習環(huán)節(jié)，由于時間限制，部分學生無法完成所有練習，影響了對知識點的全面掌握。

3.評價方式單一：主要依靠學生的課堂表現(xiàn)和作業(yè)完成情況來評價學生的學習效果，缺乏對學生實際操作能力的全面評估。

反思改進措施（三）改進措施

1.深化理論知識講解：針對學生對理論知識的理解不夠深入的問題，可以采用分層次的教學方法，先講解基本概念，再逐步深入到具體的應(yīng)用。

2.優(yōu)化實踐環(huán)節(jié)設(shè)計：在保證理論知識講解的基礎(chǔ)上，適當增加實踐環(huán)節(jié)的時間，讓學生有足夠的時間去操作和練習，確保對知識點的全面掌握。

3.多元化評價方式：引入多種評價方式，如學生互評、小組評價、項目展示等，全面評估學生的學習效果，特別是實際操作能力。

4.加強與企業(yè)的合作：與企業(yè)合作，邀請專業(yè)人士來校進行講座或?qū)嵺`指導，讓學生了解行業(yè)動態(tài)，提高學生的職業(yè)素養(yǎng)和就業(yè)競爭力。

5.利用信息技術(shù)輔助教學：利用多媒體教學資源，如在線教程、視頻案例等，豐富教學內(nèi)容，提高學生的學習興趣和參與度。

6.定期進行教學反思：在教學過程中，定期對自己的教學進行反思，總結(jié)經(jīng)驗教訓，不斷優(yōu)化教學方法，提高教學效果。板書設(shè)計①滾動效果

-滾動條類型：水平滾動、垂直滾動

-HTML標簽：`<div>`,`<span>`,`<marquee>`

-CSS樣式：`overflow`,`scrollbar-width`,`scrollbar-color`

②字幕效果

-字幕類型：滾動字幕、固定字幕

-HTML標簽：`<marquee>`,`<div>`,`<span>`

-CSS樣式：`text-align`,`color`,`font-size`

③層的使用

-層類型：絕對定位、相對定位

-HTML標簽：`<div>`,`<span>`

-CSS樣式：`position`,`top`,`left`,`width`,`height`

④CSS樣式表

-選擇器類型：類選擇器、ID選擇器、標簽選擇器、后代選擇器

-屬性：字體、顏色、大小、間距、邊框、背景等

⑤動畫效果

-過渡效果：`transition`

-動畫效果：`animation`

⑥瀏覽器兼容性

-常見兼容性問題：標簽屬性、樣式屬性、腳本執(zhí)行

-解決方案：CSS兼容性測試、使用工具

⑦網(wǎng)頁優(yōu)化

-加載速度優(yōu)化：壓縮圖片、減少HTTP請求、使用CDN

-性能優(yōu)化：緩存、懶加載、代碼優(yōu)化

⑧網(wǎng)頁安全

-XSS攻擊：跨站腳本攻擊

-CSRF攻擊：跨站請求偽造

-SQL注入：數(shù)據(jù)庫注入攻擊課堂1.課堂評價

-提問環(huán)節(jié)：通過提問學生關(guān)于滾動、字幕與層的基本概念和應(yīng)用，檢驗學生對知識的掌握程度。例如，詢問學生如何實現(xiàn)一個簡單的滾動效果，以及如何通過CSS調(diào)整字幕的樣式。

-觀察學生操作：在學生練習環(huán)節(jié)，觀察他們的操作過程，注意他們的操作步驟是否正確，是否有創(chuàng)新性的應(yīng)用。

-實時反饋：對于學生的回答和操作，給予及時的反饋，鼓勵正確的做法，糾正錯誤的理解。

-小組合作評價：在小組討論和項目中，觀察學生的合作情況，評價他們的溝通能力、團隊協(xié)作精神和解決問題的能力。

2.作業(yè)評價

-作業(yè)布置：根據(jù)本節(jié)課的內(nèi)容，布置相應(yīng)的作業(yè)，如設(shè)計一個包含滾動效果、字幕和層的網(wǎng)頁。

-作業(yè)批改：對學生的作業(yè)進行認真批改，重點關(guān)注學生對知識的理解和應(yīng)用能力。

-作業(yè)點評：在批改作業(yè)的同時，給予學生詳細的點評，指出他們的優(yōu)點和需要改進的地方。

-作業(yè)反饋：將作業(yè)反饋及時傳達給學生，鼓勵他們在下一次課堂上展示自己的作品，并與其他同學交流學習心得。

3.課堂測試

-設(shè)計測試題：根據(jù)本節(jié)課的教學內(nèi)容，設(shè)計一些測試題，包括選擇題、填空題和簡答題，以檢驗學生對知識的記憶和理解。

-課堂實施：在課堂上進行測試，讓學生在規(guī)定時間內(nèi)完成。

-測試分析：對測試結(jié)果進