👩‍🏫 網頁三兄弟教師指南

完整的教學流程、資源和評量工具，幫助您輕鬆進行網頁設計教學

12
教學週數
36
課堂節數
6
實作專案
100+
教學資源

📋 課程概覽

🎯 課程總目標

  • 理解網頁開發的基本概念和三大核心技術
  • 掌握HTML結構化標記語言的使用
  • 學會CSS樣式設計和響應式布局
  • 熟悉JavaScript程式邏輯和DOM操作
  • 能夠獨立完成完整的網頁專案

📚 課程架構（12週計畫）

第1-2週

🏗️ HTML基礎

網頁結構、基本標籤、語義化HTML

第3-4週

🏗️ HTML進階

表單設計、多媒體嵌入、SEO優化

第5-6週

🎨 CSS基礎

樣式語法、選擇器、盒子模型

第7-8週

🎨 CSS進階

布局技術、動畫效果、響應式設計

第9-10週

⚡ JavaScript基礎

程式邏輯、變數函數、事件處理

第11-12週

🚀 綜合專案

三兄弟協作、完整網站開發

📖 詳細課程計畫

第1週：認識網頁三兄弟 🏗️🎨⚡

▼

🎯 學習目標

  • 了解網頁開發的基本概念
  • 認識HTML、CSS、JavaScript的角色分工
  • 建立第一個簡單的網頁

📋 教學流程（3節課，每節50分鐘）

第1節
網頁三兄弟介紹
  • 開場故事：三兄弟蓋房子的比喻
  • 展示不同的網站範例
  • 說明分工：結構、樣式、功能
第2節
HTML大哥登場
  • 什麼是HTML標籤
  • 基本文檔結構介紹
  • 實作：建立第一個HTML頁面
第3節
基礎標籤練習
  • 標題、段落、清單標籤
  • 學生動手實作練習
  • 成果分享與檢討

💡 教學要訣

  • 比喻教學：用蓋房子比喻網頁開發，讓學生易於理解
  • 視覺展示：多用圖片和實際網站展示概念
  • 動手實作：理論講解後立即讓學生實作
  • 鼓勵嘗試：創造安全的學習環境，不怕出錯

⚠️ 常見問題與解決

  • 學生覺得太難：強調基礎的重要性，從最簡單的開始
  • 拼寫錯誤：提醒仔細檢查，善用程式編輯器的提示功能
  • 檔案路徑問題：教導正確的檔案組織方式

第5週：CSS二哥的美術課 🎨

▼

🎯 學習目標

  • 理解CSS的作用和語法
  • 學會基本的樣式設定
  • 掌握顏色、字體、尺寸的控制

📋 教學流程

第1節
CSS語法入門
  • CSS選擇器概念
  • 基本語法：選擇器{屬性:值;}
  • 實作：為HTML頁面加上基本樣式
第2節
顏色與字體設計
  • 顏色的表示方法
  • 字體大小和樣式
  • 實作：美化個人介紹頁面
第3節
盒子模型與布局
  • margin、padding、border概念
  • 基本布局技巧
  • 實作：製作美觀的卡片設計

💡 教學要訣

  • 視覺化教學：用顏色和形狀直觀展示CSS效果
  • 即時預覽：讓學生修改代碼立即看到變化
  • 設計思維：引導學生思考使用者體驗
  • 創意發揮：鼓勵學生嘗試不同的設計風格

第9週：JavaScript小弟的程式魔法 ⚡

▼

🎯 學習目標

  • 了解程式設計的基本概念
  • 學會變數、函數的使用
  • 掌握基本的DOM操作

📋 教學流程

第1節
程式設計入門
  • 什麼是程式設計
  • 變數和資料型態
  • 實作：簡單的數學計算
第2節
函數與事件
  • 函數的概念和寫法
  • 事件監聽器
  • 實作：點擊按鈕改變內容
第3節
DOM操作實戰
  • 選取和修改網頁元素
  • 動態新增和刪除內容
  • 實作：互動式網頁元件

💡 教學要訣

  • 邏輯思維：著重培養學生的邏輯思考能力
  • 除錯練習：教導學生如何找出和修正錯誤
  • 小步前進：將複雜功能分解成小步驟
  • 實用導向：連結到生活中的實際應用

📊 評量方式與標準

📝 形成性評量（40%）

  • 課堂參與度（10%）
  • 作業完成度（15%）
  • 同儕互評（10%）
  • 學習反思（5%）
📋 下載評分表

🎯 總結性評量（60%）

  • 期中專案（20%）
  • 期末專案（25%）
  • 技能測驗（10%）
  • 作品集（5%）
📋 下載評分表

🌟 專案評分標準

  • 技術實現（30%）
  • 創意設計（25%）
  • 使用者體驗（25%）
  • 程式品質（20%）
📋 下載評分表

📈 學習進度追蹤

建議定期檢核學生的學習進度，以下是各階段的能力指標：

🏗️ HTML能力指標

  • ✅ 能夠建立基本的HTML文檔結構
  • ✅ 熟悉常用的HTML標籤及其用途
  • ✅ 理解語義化標籤的重要性
  • ✅ 能夠設計簡單的表單

🎨 CSS能力指標

  • ✅ 掌握CSS基本語法和選擇器
  • ✅ 能夠設計美觀的網頁樣式
  • ✅ 理解盒子模型和布局原理
  • ✅ 具備響應式設計概念

⚡ JavaScript能力指標

  • ✅ 理解程式設計基本概念
  • ✅ 能夠撰寫簡單的JavaScript函數
  • ✅ 掌握DOM操作技巧
  • ✅ 能夠處理用戶互動事件

📚 教學資源與工具

💻 推薦開發工具

Visual Studio Code

免費且功能強大的程式碼編輯器，適合初學者使用

🔗 立即使用

Chrome DevTools

瀏覽器內建的開發者工具，幫助學生理解網頁結構

📖 使用指南

GitHub

程式碼版本控制與協作平台，培養學生專案管理能力

🔗 註冊使用

📖 課堂活動設計

🎯 程式碼拼圖

將HTML/CSS/JS代碼打散，讓學生重新組合，訓練邏輯思維

📥 下載活動包

🎨 網頁設計比賽

分組競賽，每組負責不同主題的網頁設計，激發創意

📥 下載規則

🔍 錯誤偵探

提供有錯誤的代碼，讓學生找出並修正，培養除錯能力

📥 下載題目

🤝 同儕審查

學生互相檢查作品，給予建議，培養批判思考能力

📥 下載表格

📋 可列印教材

📄 快速參考卡

🏗️ HTML常用標籤
  • <h1> - 主標題
  • <p> - 段落
  • <div> - 容器
  • <a> - 連結
  • <img> - 圖片
  • <ul><li> - 清單
🎨 CSS常用屬性
  • color - 文字顏色
  • background - 背景
  • font-size - 字體大小
  • margin - 外邊距
  • padding - 內邊距
  • border - 邊框
⚡ JS基本語法
  • let name = "值"
  • function() { }
  • document.getElementById()
  • addEventListener()
  • if (條件) { }
  • for (i=0; i<10; i++)
🖨️ 列印參考卡

❓ 常見問題解答

Q1: 學生沒有程式設計基礎，如何開始教學？

建議做法：

  • 從生活化的比喻開始（如：蓋房子、畫畫、寫作）
  • 先讓學生看到成果，再解釋原理
  • 多使用視覺化工具和互動示範
  • 鼓勵動手實作，從錯誤中學習
  • 建立互助學習的班級氛圍
Q2: 如何處理學生學習進度不一的情況？

差異化教學策略：

  • 基礎版：提供模板和詳細步驟指導
  • 進階版：給予挑戰性任務和開放性題目
  • 協作學習：安排能力互補的分組
  • 個別指導：利用課餘時間協助落後學生
  • 多元評量：提供不同難度的評量選擇
Q3: 學校設備不足，如何進行網頁設計教學？

設備替代方案：

  • 手機/平板：使用線上編輯器（如CodePen）
  • 紙筆活動：設計網頁wireframe和流程圖
  • 分組使用：一台電腦供多位學生輪流使用
  • BYOD政策：鼓勵學生攜帶自己的設備
  • 雲端工具：善用免費的線上開發環境
Q4: 如何評量學生的學習成效？

多元評量方法：

  • 作品集：收集學生的所有作品，觀察進步軌跡
  • 實作評量：現場觀察學生的操作過程
  • 同儕評量：學生互評彼此的作品
  • 自我反思：學生撰寫學習心得和困難點
  • 專案展示：公開展示最終作品並說明設計理念
Q5: 如何保持學生的學習動機？

激勵策略：

  • 成果展示：定期舉辦作品發表會
  • 實用連結：連結到學生感興趣的主題
  • 競賽活動：舉辦班級或校際比賽
  • 業界連結：邀請專業人士分享經驗
  • 個人化學習：讓學生選擇自己喜歡的專案主題

📞 教學支援與聯絡

🎓 教師社群

加入我們的教師交流群組，分享教學經驗與資源

加入社群

💡 教學諮詢

遇到教學困難？我們提供免費的教學諮詢服務

申請諮詢

📚 資源更新

定期更新教學資源，確保內容與時俱進

訂閱更新

📋 教學檢核清單

每週課程前，請確認以下準備工作：

課前準備 ✅

  • □ 測試所有設備和軟體
  • □ 準備課堂範例檔案
  • □ 檢查網路連線狀況
  • □ 準備備用教學方案

課堂進行 ✅

  • □ 清楚說明學習目標
  • □ 提供充足的實作時間
  • □ 適時巡視學生進度
  • □ 鼓勵學生提問和討論

課後檢討 ✅

  • □ 收集學生學習反饋
  • □ 檢核學習目標達成度
  • □ 規劃下次課程調整
  • □ 更新教學資源
← 回到專案範例 列印教學指南 🖨️
Link('https://code.visualstudio.com/')">🔗 官方網站

CodePen

線上程式碼編輯器，即時預覽效果，適合課堂示範