一、課程名稱
網頁布局與網頁制作

二、授課對象
初中/高中信息技術選修課學生或對網頁設計感興趣的初學者

三、課時安排
1課時（45分鐘）

四、教學目標
1. 知識與技能：理解網頁布局的基本概念（如盒模型、浮動、定位、Flexbox、Grid等），掌握使用HTML和CSS進行基礎網頁布局與制作的流程和方法，能夠獨立完成一個結構清晰、布局合理的簡單靜態網頁。
2. 過程與方法：通過案例分析、教師演示、學生動手實踐相結合的方式，引導學生從分析需求、規劃布局到代碼實現，體驗完整的網頁制作過程。
3. 情感態度與價值觀：激發學生對網頁設計與前端開發的興趣，培養其邏輯思維、審美能力和解決實際問題的能力，體驗創作的樂趣。

五、教學重點與難點
教學重點：網頁布局的核心技術（如盒模型、Flexbox基礎應用），HTML結構搭建與CSS樣式控制。
教學難點：CSS布局模型的靈活運用，實現設計稿到代碼的精準轉化，解決不同瀏覽器的兼容性考慮（入門階段僅作簡介）。

六、教學準備
1. 教師準備：制作多媒體課件（PPT）、準備多個典型網頁布局案例（如新聞門戶、個人博客、產品展示頁等）、編寫課堂演示代碼、準備課堂實踐任務及評價標準。
2. 學生準備：預習HTML和CSS基礎知識，安裝好代碼編輯器（如VS Code、Sublime Text等）和主流瀏覽器（Chrome、Firefox）。
3. 環境準備：多媒體教室、投影設備、學生電腦需能運行代碼編輯器和瀏覽器。

七、教學過程

(一) 導入新課（5分鐘）
1. 情境創設：展示幾個布局風格迥異的優秀網站（如蘋果官網、一個簡約的個人博客、一個信息密集的新聞站），引導學生觀察其布局特點。
2. 提問互動："這些網頁給你怎樣的視覺感受？它們的結構有何不同？是什么決定了這種結構和視覺效果？"
3. 引出課題：明確本節課主題——網頁布局與制作，即學習如何像建筑師一樣，用代碼“搭建”出既美觀又實用的網頁“骨架”和“外觀”。

(二) 新知講授與演示（15分鐘）
1. 核心概念講解：
* 網頁布局是什么：是規劃網頁中各個元素（文字、圖片、導航等）位置和大小關系的過程。

• 布局技術演進：簡要介紹從<table>表格布局到<div>+CSS，再到現代CSS3布局（Flexbox彈性盒子和Grid網格布局）的發展，強調語義化和響應式的趨勢。

• 盒模型（Box Model）：通過圖示詳細講解內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)，這是所有布局的基石。

1. 關鍵技術演示（以Flexbox為例）：

• 使用PPT或實時編碼，演示一個簡單的水平導航欄或卡片布局的實現。

• 關鍵代碼點：display: flex;、justify-content、align-items、flex-direction等屬性的應用。

• 強調HTML結構語義化（使用<header>, <nav>, <main>, <footer>等標簽）與CSS樣式分離的好處。

(三) 課堂實踐與指導（20分鐘）
1. 布置任務：要求學生模仿一個給定的簡單布局設計稿（例如：一個包含頁頭、導航、左右兩欄主要內容區、頁腳的頁面），使用HTML5和CSS3（鼓勵嘗試Flexbox）進行實現。
2. 實踐步驟：
* 第一步：規劃結構。在紙上或注釋中畫出布局草圖，劃分區域。

• 第二步：編寫HTML。搭建基本的語義化結構。

• 第三步：編寫CSS。設置盒模型屬性，應用布局技術。

• 第四步：調試與優化。在瀏覽器中查看效果，使用開發者工具調試。

1. 教師巡視指導：走下講臺，觀察學生實踐情況，對共性問題進行集中提醒，對個別學生進行一對一輔導，解決代碼錯誤或理解偏差。

(四) 成果展示與（5分鐘）
1. 展示交流：邀請1-2位完成速度快、效果好的學生展示其作品，并簡要分享思路或遇到的困難及解決方法。
2. 課堂：
* 回顧本節課核心：網頁布局是網頁的骨架，CSS是美化工具，兩者結合才能創造出好網頁。

• 關鍵知識點：盒模型、Flexbox基礎、結構語義化。

• 展望：鼓勵學生課后探索更復雜的Grid布局、響應式設計以及JavaScript交互，為網頁注入“靈魂”。

八、課后作業
1. 基礎作業：完善課堂實踐作品，確保在不同瀏覽器中顯示正常，并添加簡單的色彩和字體樣式。
2. 拓展作業（選做）：嘗試使用CSS Grid布局實現一個九宮格圖片展示區，或搜索學習如何使自己的布局能夠適應手機屏幕（媒體查詢初步）。

九、教學反思（課后填寫）
本節課容量是否合適？學生實踐時間是否充足？
學生對Flexbox等新概念的理解程度如何？哪些地方需要后續課程加強？
案例和任務的設計是否有效激發了學生的興趣和創造力？
教學演示與個別指導的平衡點掌握得如何？

十、板書設計（或課件要點提綱）
網頁布局與制作

1. 目標：搭建骨架 + 美化外觀
2. 核心：盒模型 (Content-Padding-Border-Margin)
3. 利器：Flexbox / Grid (彈性/網格)
4. 原則：結構(HTML)與樣式(CSS)分離，語義化標簽
5. 流程：規劃 -> 寫結構 -> 加樣式 -> 調試