HTML／CSS · CHAPTER 01–13 CAPSTONE

HTML／CSS 一頁式服務品牌整合專題

完成一張可直接開啟、可在窄版閱讀、可用鍵盤操作的一頁式服務品牌網站。

從 Starter 開始查看完成品

今天的示範品牌：拾光攝影工作室。學生完成後要換成自己的品牌、文案、圖片與 CTA。

180 MINUTES

本堂學習路線

0–10 分鐘

成果導入｜先看完成品與訪客任務

講師操作：展示拾光攝影工作室的完成品，請學生先點擊導覽與主要 CTA，說出訪客要先知道什麼、最後要完成什麼。

你的產出：寫下目標訪客、品牌主張與主要 CTA。

查看驗收證據

完成品畫面、#home 到 #contact 的操作與一張目標筆記。

10–30 分鐘

檔案地圖與 HTML 語意結構

講師操作：開啟 starter/site/index.html，逐段指出 header、nav、main、section、figure、img、a 的責任，示範檔案與瀏覽器畫面的對應。

你的產出：在自己的檔案標出入口頁、CSS、圖片資料夾與五個主要錨點。

查看驗收證據

檔案樹、Elements 語意結構與 #home／#about／#services／#work／#contact。

30–55 分鐘

教師示範｜完成 HTML 內容與可走訪導覽

講師操作：只修改 site/index.html：修正區塊 id、圖片 alt、CTA href 與案例內容；每次儲存後重新整理，讓學生預測下一個畫面變化。

你的產出：完成 TASK-01 的 HTML 結構與可點擊導覽。

查看驗收證據

五個導覽連結各抵達唯一區塊，圖片可見且 alt 可讀。

55–85 分鐘

教師示範｜建立桌機視覺系統

講師操作：只修改 site/style.css：先建立變數，再依序示範 Hero、Flex、Grid、Box Model、button 變體、卡片與背景遮罩。

你的產出：完成 TASK-02 的桌機版主要視覺。

查看驗收證據

Hero、導覽、服務卡、案例卡與 CTA 的前後畫面及 Computed 值。

85–95 分鐘

休息與問題整理

講師操作：投影保留三個檢查問題：目前修改哪個檔案、畫面哪裡變了、下一個證據在哪裡。

你的產出：記下自己目前卡住的單一問題，不先打開 Solution。

查看驗收證據

一筆症狀／檔案／下一個檢查位置紀錄。

95–125 分鐘

學生跟做｜完成 Starter → Checkpoint 1

講師操作：巡迴確認學生先完成 HTML，再用導覽、圖片與 Elements 驗收；卡住時只問目前開啟的檔案與第一個失效 selector。

你的產出：完成 TASK-01，留下 HTML 結構與導覽證據。

查看驗收證據

Checkpoint 1 的五個 hash、圖片 alt、Elements 截圖。

125–150 分鐘

學生跟做｜完成桌機 CSS → Checkpoint 2

講師操作：請學生依順序完成變數、Hero、Flex、Grid、卡片與按鈕，不一次貼完整答案；抽查 Computed 是否能回到 CSS source。

你的產出：完成 TASK-02，形成可閱讀的桌機版形象頁。

查看驗收證據

1280px／1440px 截圖、Computed 的 gap／padding／background／color。

150–170 分鐘

獨立挑戰｜手機回歸與品牌變體

講師操作：示範 320px 導覽換行、圖片縮放、單欄卡片、focus-visible、reduced-motion，接著讓學生替換品牌名稱、配色、服務與 CTA。

你的產出：完成 TASK-03 與至少三項自己的品牌決策。

查看驗收證據

320px／390px／800px／1100px／1440px 回歸矩陣與一項變體前後對照。

170–180 分鐘

成果展示與交接

講師操作：依提交表抽查網址錨點、鍵盤操作、圖片邊界、Console 與 CSS source，請學生說明一個選擇與一個修正。

你的產出：提交頁面截圖、DevTools 證據、回歸表與創作說明。

查看驗收證據

完整提交包與下一步可部署的 site 資料夾。

TASK WORKFLOW

三項任務，三次可見成果

TASK-01

完成服務品牌的 HTML 結構與導覽

先讓訪客能走完頁面，並讓每段內容有正確 HTML 責任。

修改檔案: site/index.html
完成後: 重新整理後，五個導覽連結各抵達唯一區塊；圖片正常顯示；主要 CTA 能抵達聯絡區。
第一個檢查: 先在編輯器搜尋 href，再搜尋相同的 id；每個 #fragment 必須有且只有一個目標。

TASK-02

建立桌機版視覺系統與可重用元件

把可走訪的內容整理成有品牌層級、間距與元件責任的桌機版頁面。

修改檔案: site/style.css
完成後: 1280px 以上可看到完整 Hero、橫向導覽、左右欄、服務卡、案例卡與清楚 CTA。
第一個檢查: 先選取一張 .service-card，看 Styles 是否命中自己的 selector，再看 Computed 的 padding 與 background。

TASK-03

完成響應式、互動狀態與回歸驗收

讓同一份頁面在手機、平板與桌機都可讀、可操作且能解釋。

修改檔案: site/style.css
完成後: 320px／390px 為單欄，800px 為兩欄，1100px 以上為三欄；頁面沒有水平捲軸，Tab 與 prefers-reduced-motion 驗收通過。
第一個檢查: 先量 document.documentElement.scrollWidth 與 viewport 寬度，再檢查最右側超出的元素 bounding box。

SKILL MAP