🎨 第 1 堂：認識網頁 + 個人檔案介紹

學習網頁的基本結構，設計一個屬於自己的名片卡

🌐 網頁係咩嚟嘅？

網頁就像一張電子名片卡，可以放你的資料、相片、同聯絡方式。全世界嘅人都可以透過網際網絡睇到佢！

📋 紙質名片卡

✅ 可以用手摸
❌ 只能比一個人
❌ 唔好攞會冇咗

💻 網頁名片卡

✅ 無限個人睇
✅ 用 URL 分享
✅ 隨時隨地可以見

💡 小知識： 你現在睇緊嘅呢個頁面，就係一個網頁！佢由文字、圖片、顏色組成。

🏗️ 個人 Portfolio 有乜嘢？

一個好嘅 portfolio 通常有呢啲部分：

Portfolio 架構
名字
你的名字（大大隻）
相片
你最喜歡的相片輪播
聯絡
Email 同電話（有人想搵你）
簽名
Footer（代表你的身份）

✏️ 試試改你嘅名字

下面你可以輸入自己的名字同 email，即刻睇到效果！

你的名片卡預覽：

Your Name
you@example.com

🎯 一致性設計係咩意思？

一致性（Consistency）就係「整個網頁睇落去都係同一種風格」。好似你每次著校服去學校，個樣同服著都係一樣咁。

✅ 一致的設計

  • 字體統一
  • 顏色搭配和諧
  • 間距規則
  • 按鈕風格一樣

❌ 唔一致嘅設計

  • 五花八門嘅字體
  • 顏色亂晒
  • 間距時寬時窄
  • 按鈕大細唔一樣
💡 比喻： 想像一隊運動員，個個著唔同顏色嘅隊衣，睇落好亂！但如果個個都著同一隻隊衣，就會睇落好專業、好團結。

🖼️ 你個 Portfolio 有呢啲 Consistent Elements

我們用嘅設計元素

📌 顏色主調： 藍色 (#5f7cff) = 信任、專業

🔤 字體： Noto Sans + Noto Sans TC = 清晰易讀

📐 間距： 24px margin、30px padding = 舒適感

🔲 圓角： 20px border-radius = 柔和、親切

✨ 陰影： 輕微 shadow = 立體感

注意到冇？你個 portfolio 好多地方都用咗藍色 + 圓角 + 陰影，呢啲就係「一致性」。

✅ 今堂學習成果

檢查下你識唔識以下嘅嘢：

📝 課後功課

試試以下嘅任務：

  1. 改你嘅名字： 打開你個 portfolio，改成你真正的名字
  2. 更新聯絡資料： 輸入你的 email（如果家長同意）
  3. 觀察顏色： 睇下你個 portfolio，找出有咩顏色重覆出現？
  4. 截圖分享： 截你個 portfolio 嘅圖，同家長分享

🎬 下一堂預告

第 2 堂：相片與視覺設計

我哋會學點樣用相片講故事！你會上載 5 張相片，佢哋會自動輪播。你會明白為咩相片順序好重要，同淡入淡出嘅動畫點樣影響人的感受。

🏠 Home Next →