🎉 第 5 堂：完成作品 + 分享發佈
檢查設計一致性、匯出作品、分享你的創意成果
🎯 完成一個 Portfolio 嘅 5 步過程
由開始到發佈，我哋用左 5 堂課完成呢 5 個步驟：
💡 回顧： 每堂課都教咗一個「一致性設計」嘅元素。名字、相片、顏色、按鈕、Footer —— 全部都統一風格。
🚀 依家輪到你啦！(Now is your turn)
運用你喺呢 5 堂課學到嘅「一致性設計」知識，打開 Portfolio Builder 開始製作你嘅專屬網頁啦！
製作完成後，再返嚟呢頁做最後檢查同匯出。
打開 Portfolio Builder ↗️
🔍 最後檢查清單：一致性設計
喺發佈前，檢查下你個設計有冇做到一致：
🎨 視覺一致性
- 顏色重覆出現
- 圓角統一
- 陰影效果一樣
- 邊框風格一致
📐 功能一致性
- 所有按鈕同行為
- 相片動畫一致
- 互動反應相同
- 聯絡方式格式統一
✨ 最後打磨
完成設計後，做幾樣嘢令個 portfolio 更專業：
✅ 可以改進嘅地方
- 相片得唔得？
- 顏色搭配好唔好？
- 跑馬燈文字有意思嗎？
- 整體版面平衡嗎？
📦 匯出 ZIP 檔案
你嘅 portfolio 會被打包成一個 ZIP 檔案，包含所有內容（HTML、相片、設定）：
⬇️ Export to ZIP
當你按「Export ZIP」按鈕，會發生以下嘅事：
- ✅ 整個 portfolio 被打包
- ✅ 相片儲存喺 images/ 資料夾
- ✅ HTML 檔案自動生成
- ✅ 一份 README 文件記錄資訊
檔案名會係：YourName_portfolio.zip
大約 5-50 MB（取決於相片數量）
💡 提示： ZIP 檔案就像一個「包裹」，包住所有檔案。你可以儲存、傳送、或者上載到網絡。
🌐 發佈你的 Portfolio
有好幾種方式可以將你的 portfolio 公開到網絡：
選項 1️⃣ — Cloudflare Pages（推薦）
最簡單，免費，快速
適合初學者。3 分鐘內發佈，自動取得 URL。
- 解壓你嘅 ZIP 檔案
- 去
pages.dev（網址會 show 喺課程裡）
- Drag & Drop 你個資料夾上去
- 等 2 分鐘，自動生成 URL
- 分享 URL 比朋友同家長
選項 2️⃣ — 本地電腦（離線）
無需網絡，私隱最高
只有你嘅電腦上睇到，家長可以睇，但世界睇唔到。
- 解壓 ZIP 檔案
- 雙擊
index.html
- 瀏覽器會開啟你個 portfolio
- 掛著瀏覽器就得
選項 3️⃣ — USB / Google Drive（分享）
隨身帶著走或雲端儲存
適合上課展示或家人共享。
- 將 ZIP 檔案放喺 USB 手指
- 或者上載到 Google Drive
- 需要睇時，解壓 + 開 index.html
- 有網絡嘅地方都得
💡 建議： 用 Cloudflare Pages（選項 1）最方便，即時有 URL，可以分享給世界睇。
🎤 向班友展示你的作品
當你完成 portfolio，可以向班友講解你嘅設計選擇。建議講 2-3 分鐘：
📝 Presentation 框架
🎨 「我嘅顏色選擇」（30 秒）
- 「我揀咗 [Aurora/Sunset/Forest/...] 因為...」
- 「呢個顏色代表...（信任/熱情/創意）」
- 「我覺得好配我嘅個性」
📷 「我嘅相片故事」（1 分鐘）
- 「第一張係...（介紹自己）」
- 「中間幾張係...（我的興趣）」
- 「最後一張係...（我的夢想）」
- 「我揀呢個順序係因為...」
💭 「我想講嘅訊息」（30 秒）
- 「我個跑馬燈寫左...」
- 「呢句說話對我好重要因為...」
- 「希望睇到呢個 portfolio 嘅人會...」
💡 小貼士： 唔使趕時間！講得慢 d、講得自然 d，係最好嘅 presentation。
👥 互相評價：一致性設計投票
全班睇完所有 portfolio 後，可以做個投票活動：
🏆 投票項目
每人可以投票俾 3 個 portfolio（不可投自己）。佢哋會睇到全班嘅投票結果 :)
✅ 投票目的
- 互相欣賞
- 學習優點
- 建立班級榮譽感
- 睇到一致設計嘅力量
🎓 5 堂課嘅重點回顧
我哋用「一致性設計」貫穿整個課程：
第 1 堂：網頁結構
認識 portfolio 有咩部分，統一命名同用途
第 2 堂：視覺故事
用相片講故事，統一比例同動畫
第 3 堂：顏色心理
選色規則，確保文字同背景對比
第 4 堂：互動設計
按鈕、連結格式統一，建立信任感
💡 核心概念： 一致性設計唔只令網頁睇落專業，更重要係為用家建立可信任、舒適嘅體驗。就似個人衣著整齊會俾人好感覺。
🚀 下一步：繼續進步
如果你想學更多網頁設計，可以試試：
- 響應式設計： 學習點樣令你個 portfolio 喺電話、平板、電腦都睇起來好
- Hover 動畫： 添加更多互動效果，令按鈕、圖片有趣啲
- 暗黑模式： 讓訪客可以選擇暗色背景，保護眼睛
- 多語言： 用簡體中文、英文同繁體中文，擴大受眾
- 性能優化： 用細啲嘅相片檔案，令網頁加載更快
- SEO 優化： 令你嘅 portfolio 喺 Google 搜尋到
- 學 CSS： 自己設定顏色、字體、動畫
- 學 JavaScript： 添加更複雜的互動功能
💡 提醒： 最重要嘅一直係「一致性」。無論你加咗幾多 fancy 嘅功能，一致嘅設計永遠係基礎。
🎉 最後功課 + 慶祝
- 完成檢查清單： 逐項檢查你個 portfolio 嘅一致性
- 匯出 ZIP： 按 Export 按鈕，儲存你個作品
- 發佈到 Cloudflare Pages： 或者其他方式分享
- 準備 Presentation： 寫下你想講嘅 2-3 點
- 邀請家長： 用 URL 比家長睇，聽聽佢哋點講
- 投票同欣賞： 睇班友嘅 portfolio，互相投票
- 拍照紀念： 截個圖留念你嘅成果
🌟 恭喜你完成咗個網頁設計課程！你依家已經知道一致性設計嘅秘訣，而且建立咗你自己嘅 portfolio。呢啲技能會陪住你一世！