基礎網頁設計
Web design
| 節 | 週一 |
|---|---|
2 09:00–09:50 | 基礎網頁設計 HK114（六家） 3 節連堂 |
3 10:10–11:00 | |
4 11:10–12:00 |
* 根據陽明交大上課時間表所列
1. 本課程旨在培養學生具備基礎網站建置能力，從零開始學習HTML與CSS，並進一步導入前端框架Bootstrap與AI輔助開發工具，完成具備實務應用價值的網站作品。 2. 課程結合理論與實作，並導入現代數位行銷與數據分析工具，使學生不僅會「做網站」，更能理解網站在行銷與商業上的應用。 課程目標： 1. 理解網站基本架構與前端技術（HTML / CSS） 2. 能獨立製作靜態網頁（個人品牌或商業頁面） 3. 熟悉Bootstrap快速建站流程 4. 能運用AI工具（如Codex）輔助程式撰寫與除錯 5. 建立基本數據分析概念，能埋設： (1) Google Analytics (2) Microsoft Clarity 6. 完成一個具備UI設計與數據追蹤能力的網站作品
本課程為基礎入門課程，無需具備程式設計背景，但建議學生具備以下能力： 1. 基本電腦操作能力（檔案管理、瀏覽器使用） 2. 基礎網路使用經驗（如網站瀏覽、註冊帳號等） 3. 對數位內容、網站或行銷有基本興趣 4. 具備AI工具使用概念（重要） (1) 曾使用 ChatGPT 或 Claude 等生成式AI工具 (2) 能進行基本提問（Prompt），如：「請幫我寫HTML」、「幫我修改CSS」 (3) 理解AI為輔助工具，需具備基本判讀與修正能力
無備註
教學方法： 1. 講授＋實作並行（每堂課至少50%實作） 2. 範例拆解教學（老師帶做 → 學生模仿 → 自行延伸） 3. 專題導向學習（Project-Based Learning） 4. AI輔助學習（Prompt設計＋實作應用） 教學資源： 1. AI工具： ChatGPT Codex / Claude（程式輔助與學習） 2. 開發工具： VS Code 3. 前端資源： Bootstrap官方文件 4. 數據分析工具： Google Analytics Microsoft Clarity 配合事項： 1. 學生需自備筆電 2. 課程需註冊Google帳號（用於GA） 3. 建議申請GitHub帳號（網站部署） 4. 鼓勵學生課後使用AI工具練習與除錯 5. 可設置助教協助除錯與作業輔導（建議）
評量方式： 1. 平時作業（30%） (1) HTML頁面製作 (2) CSS排版練習 (3) Bootstrap切版 2. 課堂參與與實作（20%） (1) 即時操作 (2) AI工具應用練習 (3) 課堂互動 3. 期中作業（20%） (1) 個人靜態網站（含基本排版與內容） 4. 期末專題（30%） (1) 完整網站作品（需包含） i. 響應式設計（RWD） ii. Bootstrap應用 iii. GA或Clarity追蹤碼 iv. 基本UI設計與內容規劃 ※ 本課程偏重實作，不另設筆試或僅作簡單測驗 2.教學方法及教學相關配合事項（如助教、網站或圖書及資料庫等）
教師未提供此項資料
| 週次 | 主題 |
|---|---|
| 第 1 週 | 網站概念 +VScode介面介紹 |
| 第 2 週 | HTML5：網站結構與佈局、區塊與行內元素、表格、圖片 |
| 第 3 週 | HTML5：表單、音訊、影片置入、社群嵌入；色彩模試介紹 |
| 第 4 週 | 教師節 |
| 第 5 週 | CSS：行內、標頭、外連樣式；類別、id樣式介紹 |
| 第 6 週 | CSS：背景、邊框、定位、溢出、浮動、2D/3D Animate特效 |
| 第 7 週 | Bootstrap 5前端響應式框架介紹與引用 |
| 第 8 週 | 光復節補假 |
| 第 9 週 | 期中 git與github介紹、註冊使用 |
| 第 10 週 | Codex與Claude Code、readme規範設置 |
| 第 11 週 | 網站規劃、設計與建置 |
| 第 12 週 | UIUX設計-Adobe Xd 或 Figma擇一 |
| 第 13 週 | AI Vibe Coding開發＋Google Sheet ＋Google App Script |
| 第 14 週 | GEO、AISEO 搜尋引擎優化 |
| 第 15 週 | GA + Clarity 使用者行為分析 |
| 第 16 週 | 期末專題發表 |
HTML＆CSS：網站設計建置優化之道 作者：Jon Duckett 出版日期2012-05-21 出版商：碁峰資訊
- 地點
- 教師未提供此項資料
- 時間
- 教師未提供此項資料
- 聯絡方式
- 教師未提供此項資料