# 大學一年級網頁設計基礎（14週教學大綱）

這份教學大綱是為一般大學新生設計的入門課程，即使沒有程式背景也能輕鬆上手。課程重點在於「實作」與「自信建立」，而非深奧的理論。

**教材來源**：本課程使用自編教材《HTML 與 AI 時代的網頁入門》。

---

## 📅 週次與主題規劃

| 週次 | 單元主題 | 對應章節 | 教學重點 | 作業/練習 |
| :--- | :--- | :--- | :--- | :--- |
| **第 01 週** | 課程介紹與環境建置 | [前言] | 網頁運作原理、VS Code 安裝與設定、Live Server 使用 | 安裝完成並顯示 Hello World |
| **第 02 週** | HTML 基礎與文件結構 | [第一章] | HTML 標籤語法、基本骨架、註解、巢狀結構 | 製作個人自我介紹頁面（純文字） |
| **第 03 週** | 豐富內容：文字與超連結 | [第一章/第二章] | 標題(h1-h6)、段落、強調(strong/em)、絕對/相對路徑、錨點 | 建立一個多頁面的小型網站（首頁+關於我） |
| **第 04 週** | 視覺體驗：圖片與多媒體 | [第二章] | 圖片(img)、圖說(figure)、音訊(audio)、影片(video) | 製作一個線上相簿或多媒體展示頁 |
| **第 05 週** | 資料整理：清單與表格 | [第二章] | 清單(ul/ol/dl)、表格基礎(table/tr/td)、合併儲存格 | 製作課表或履歷表 |
| **第 06 週** | 互動基礎：表單設計 | [第二章] | form、input(text/email/password)、textarea、button | 製作社團報名表單（含各類輸入欄位） |
| **第 07 週** | SEO 與結構：語意化標籤 | [第三章] | header、nav、main、footer、article、section | 重構第 3 週的作業，改用語意化標籤 |
| **第 08 週** | **期中實作評量** | [第一-三章] | 綜合運用前半學期知識，課堂實作指定題目 | **期中個人網頁製作** |
| **第 09 週** | CSS 入門：讓網頁變漂亮 | [第四章] | CSS 引入方式、基本選擇器(Tag/Class/ID)、色彩與文字樣式 | 為期中網頁加上背景色與文字樣式 |
| **第 10 週** | 版面配置：盒模型與 Flexbox | [第四章] | Box Model (Margin/Padding/Border)、Flexbox 基礎排版 | 製作三欄式卡片版面 |
| **第 11 週** | JavaScript 入門：網頁互動 | [第四章] | 變數(const/let)、基本 DOM 操作(querySelector)、點擊事件 | 製作一個「點擊變色」的按鈕 |
| **第 12 週** | 前端整合專案實作 | [第四章] | 整合 HTML/CSS/JS、製作「互動名片」與「簡易待辦清單」 | **完成互動式個人名片** |
| **第 13 週** | AI 助教：從輔助到創作 | [第五章] | 提示詞設計(Prompt Design)、AI 除錯與程式碼解釋、實作協作流程 | 使用 AI 共同完成一個小專案 |
| **第 14 週** | **期末專案發表** | [全書] | 分組或個人展示最終作品，互相觀摩與回饋 | **期末成果發表** |

---

## 📝 作業與評量詳細說明

### 第 08 週：期中個人網頁
* **目標**：驗證 HTML 結構與語意化的掌握度。
* **要求**：
1. 至少 3 個頁面（首頁、興趣、聯絡方式）。
2. 包含圖片、清單、表格。
3. 使用語意化標籤。
4. 程式碼排版整齊。

### 第 12 週：互動式個人名片 (Interaction Card)
* **目標**：驗證 HTML/CSS/JS 的基礎整合。
* **要求**：
1. HTML 結構清晰。
2. CSS 美化（圓角、陰影）。
3. JS 互動（例如：點擊「追蹤」按鈕會改變文字與樣式，或切換亮/暗模式）。

### 第 14 週：期末成果 (Final Project)
* **主題**：自由發揮（例如：社團網站、個人作品集、旅遊介紹）。
* **核心要求**：
* **必須**使用 CSS Flexbox 進行排版。
* **必須**包含至少一個 JavaScript 互動功能。
* **鼓勵**使用 AI 輔助優化程式碼或生成文案。

---

## 🔧 教學備註 (給講師)

1. **難度控制**：
* 前 7 週專注於 HTML，建立自信。
* CSS 與 JS 僅介紹「最實用」的部分（如 Flexbox 置中、classList 切換），避免深入太複雜的原理（如 float、prototype）。
2. **AI 的角色**：
* 從第 1 週開始即可鼓勵學生用 AI 詢問名詞解釋。
* 第 13 週重點在於「Prompt Engineering」與「判讀 AI 產出的正確性」。
3. **第四章調整**：
* 原書第四章內容較濃縮，本課綱將其拆解為 3 週（CSS, Layout, JS/Integration）以利消化。