第 1 週課程

網頁設計入門

什麼是現代網頁？

課程時間：3小時 | 適合：大一新生

學習目標

完成本週課程後，你將能夠：

了解現代網頁的基本概念和特色
認識網頁設計的基本工具和環境
學會觀察和分析優秀網頁設計
建立對網頁開發的整體認知

現代網頁的四大特色

響應式設計

一個網站適應所有裝置

網站能自動調整版面，在手機、平板、電腦上都能完美顯示

重要數據
  • 2024年超過 60% 的網路流量來自手機
  • Google 優先索引手機版網站
  • 不響應式網站的跳出率高達 90%
就像變形金剛一樣，同一個網站可以變成適合不同裝置的樣子！

用戶體驗優先

簡潔、直觀、快速

UX/UI 基本概念：
  • UX：使用者體驗 - 好不好用？
  • UI：使用者介面 - 好不好看？
3秒法則

網頁載入超過3秒，53%用戶會離開

核心原則：Don't Make Me Think（別讓我思考）

視覺設計進化

扁平化、極簡主義、微互動

設計趨勢演變：
2000s: 擬物化 → 2010s: 扁平化 → 2020s: 新擬物化
色彩心理學
  • 暖色調：活力、溫暖、急迫感
  • 冷色調：冷靜、專業、信任感

成功案例分析

學習頂尖網站的設計精髓

🍎 Apple
Less is More
極簡主義
🔍 Google
功能至上
極簡主義
🎬 Netflix
個人化
沉浸式體驗

課堂活動：網站觀察家

活動內容

  • 分組活動：3-4人一組
  • 任務：選擇知名網站進行分析
  • 成果分享：每組3分鐘報告

推薦網站

蝦皮購物 YouTube Instagram 定利集團官網

觀察重點

第一眼看到什麼？
顏色搭配如何？
按鈕和連結在哪裡？
手機版和電腦版有什麼不同？

分析表格範例

觀察項目 電腦版 平板版 手機版
導航選單 橫向排列 橫向排列 漢堡選單
圖片大小 大 中 小
文字大小 正常 稍大 大

課後作業

主要作業：我的理想網站設計

任務內容

設計一個「個人介紹網站」的草圖，展現你對現代網頁設計的理解

具體要求

  • 使用 A4 紙手繪或 PowerPoint/Canva 設計
  • 包含：個人照片位置、姓名、興趣、聯絡方式
  • 至少設計電腦版和手機版兩個版本
  • 體現現代網頁設計的特色

繳交時間

下週上課前上傳到課程平台

延伸觀察作業

選擇一個你常用的 App 或網站，找出：

  • 3個你喜歡的設計細節
  • 2個你覺得可以改進的地方
  • 1個讓你印象最深刻的互動效果

評分標準

創意性 30%
完整性 40%
美觀性 30%

延伸學習資源

優秀設計範例

學習資源

實用工具

深度思考題

課後可以思考以下問題，下次上課我們會討論：

  1. 為什麼現在的網站都喜歡用白色背景？
  2. 你覺得哪個網站設計最煩人？為什麼？
  3. 如果你是盲人，你會希望網站怎麼設計？
  4. 為什麼有些網站要故意設計得很複雜？

學習成果檢核

完成本週學習後，你應該能夠：

說出現代網頁的3個主要特色
安裝並開啟 VS Code 編輯器
觀察並分析網站的設計特點
繪製簡單的網頁設計草圖
理解響應式設計的重要性
識別好的用戶體驗設計原則
下週預告

第2週：AI工具初體驗 - 讓AI成為你的程式夥伴

AI工具介紹

學習如何有效使用 ChatGPT 和 Claude

第一次程式生成

用 AI 生成你的第一個 HTML 代碼

提問技巧

學會問對問題，讓 AI 幫你解決問題

提示：下週請準備好你的 ChatGPT 或 Claude 帳號，我們將開始實際動手操作！