📧 第 4 堂：聯絡資訊 + 互動設計
學習點樣安全咁分享聯絡方式，設計互動元素
🤝 為咩要有聯絡資訊？
聯絡資訊係你個 portfolio 同世界連接嘅「橋樑」。人可以透過 Email 或電話搵你，問你問題、讚賞你、甚至聘請你。
✅ 有聯絡資訊嘅好處
- 朋友可以搵你
- 機會會黎搵你
- 展示你開放同專業
- 建立信任感
❌ 無聯絡資訊嘅壞處
- 冇人搵得你
- 機會就咁飛走
- 看起來唔專業
- 難以建立關係
📝 聯絡方式嘅正確格式
Email 同電話號碼有特定嘅格式。格式正確先可以「點擊直接聯絡」：
💡 格式點樣搞？ Email 要有 @ 符號，電話區號前有加號（+），要有數字同連結符號（- 或空格）。瀏覽器先至可以識別同連結。
✨試試你的聯絡資訊
輸入 Email 同電話，睇下點樣變成可點擊嘅連結：
📱 預覽（點擊試試）：
💡 點樣工作： 喺電腦睇，點 email 會開郵件程式；喺電話睇，點電話會彈出通話界面。呢個就係「互動設計」。
🔘 互動按鈕設計
好嘅按鈕要有明確嘅視覺反饋。試試下面嘅按鈕，睇下 hover 同 click 嘅反應：
✅ 好的按鈕
- 顏色清晰
- Hover 時有變化
- 有足夠大小（touch-friendly）
- 文字清楚講明功能
❌ 差嘅按鈕
- 顏色模糊
- 唔知係咪可以點
- 太細，難以點擊
- 文字唔清楚（「Click Here」）
💡 一致性原則： 所有按鈕要同一種顏色、同樣大小、同樣 hover 效果。咁先至俾人一致嘅體驗。
🔒 網上安全 — 分享聯絡資訊時要小心
⚠️ 安全提示
- 取得家長同意： 喺網上公開個人資訊要取得家長許可
- 用學校 Email： 如果係學校項目，考慮用班主任嘅 email 而唔係個人 email
- 避免全球可見： 要諗清楚全世界嘅人會睇到呢個資訊
- 定期檢查： 如果搬屋或轉學校，要更新聯絡方式
- 唔好用 SMS： Email 會比電話號碼更安全
✅ 安全做法
- 家長知道並同意
- 用官方 email
- 定期檢查收到嘅信
- 如有 spam 即刻report
❌ 危險做法
- 冇告知家長
- 用私人電話號碼
- 唔睇郵件
- 回覆可疑訊息
🏷️ Footer — 身份的象徵
Footer（底部）係網頁嘅「簽名」。通常放 copyright（版權）、連結、同品牌資訊。
© 2025 Bridge & Build
讓創意教學與數碼工具真正落地
All rights reserved. | Privacy Policy | Contact
✅ 好的 Footer
- 清晰嘅品牌名
- 版權年份正確
- 有聯絡資訊連結
- 顏色同上面一致
❌ 差嘅 Footer
- 冇品牌資訊
- 年份 2020 咁舊
- 冇聯絡方式
- 顏色亂晒
💡 一致性設計： Footer 用同主題相同的顏色（藍色）同字體（Noto Sans），保持整個網頁嘅視覺統一。
📝 課後功課
- 取得家長同意，準備你嘅聯絡資訊（Email 同電話）
- 點擊試試 Email 同電話連結係咪有效
- 睇下你個 portfolio 嘅 Footer，識唔識到 Bridge & Build 嘅品牌？