🎨 網頁設計課程

一致性設計（Consistency Design）for P1-3

📚 課程概述

呢個課程用「Portfolio Builder」教小朋友網頁設計的核心概念：一致性設計。

同學會用 5 堂課由零開始設計自己的網上檔案，學習點樣用一致的顏色、字體、動畫同互動元素建立專業嘅網頁。

🎯 核心概念：什麼是一致性設計？

一致性設計（Consistency）就係「整個網頁睇落都係同一種風格」。就好似你著校服，每次都係同一款服裝、同一個顏色，睇落專業、有品牌感。

好處： 俾人專業、信任感、舒適感。用家知道點樣操作，邊度睇都統一。

5 堂課程

1️⃣

認識網頁 + 個人檔案

學習重點：

主題
  • 網頁係咩？
  • Portfolio 有乜部分
  • 一致性設計介紹
  • 試試改名字 + Email
2️⃣

相片與視覺設計

學習重點：

主題
  • 相片輪播 Demo
  • 點樣用相片講故事
  • 相片順序嘅重要性
  • 淡入淡出動畫
3️⃣

文字 + 顏色設計

學習重點：

主題
  • 顏色心理學
  • 背景顏色選擇
  • 文字對比度
  • 跑馬燈設計
4️⃣

聯絡資訊 + 互動設計

學習重點：

主題
  • 聯絡方式嘅格式
  • 互動按鈕設計
  • 網上安全意識
  • Footer 嘅作用
5️⃣

完成作品 + 分享發佈

學習重點：

主題
  • 一致性設計檢查表
  • 匯出 ZIP 檔案
  • 發佈到網絡
  • 向班友展示

📖 課程進度

1

第 1 堂：網頁結構（30 分鐘）

認識 portfolio 嘅 4 個部分（名字、相片、聯絡、簽名），了解一致性嘅定義。

2

第 2 堂：視覺故事（40 分鐘）

上載 5 張相片，用輪播講故事。學習相片順序同動畫嘅一致性。

3

第 3 堂：顏色心理學（40 分鐘）

6 個背景顏色選擇，學習顏色代表嘅意義，設計跑馬燈。

4

第 4 堂：互動設計（30 分鐘）

輸入聯絡資訊，認識點擊即連結嘅原理，學習網上安全。

5

第 5 堂：發佈分享（50 分鐘）

最後檢查一致性，匯出 ZIP，發佈到 Cloudflare Pages，向班友展示。

🎓 教師指引

每堂課嘅流程：

  1. 打開教學頁面（5 分鐘）： 用 Projector 展示課程內容
  2. 互動示範（10 分鐘）： 教師喺大螢幕上示範，小朋友睇
  3. 學生練習（15 分鐘）： 小朋友喺自己電腦上實踐
  4. 討論分享（5 分鐘）： 幾個小朋友分享佢哋嘅設計選擇
  5. 檢查清單（5 分鐘）： 確認小朋友明白當堂嘅學習重點

🔗 配合工具：

✅ 評估指標

每堂課有清單，教師可以評估小朋友係咪達到學習目標：