修正失效的導覽錨點
條件：依序點擊四個導覽連結，確認網址雜湊與停留區塊相符。 驗收：四個導覽連結都到正確區塊
CHAPTER 13 · 120 MINUTES
作品集整合、回歸修復與階段展示
Starter 已有 Hero、About、Works 與 Contact；本章只修正重複 id、錨點失效、class 規則互相覆蓋與手機版回歸。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能修好什麼
統一容器與區塊間距
條件：從 Hero 往下捲動，比較內容區與卡片的間距是否像同一套網站。 驗收：各來源區塊像同一個網站而非貼上碎片
完成桌機與手機回歸清單
條件：把視窗縮到 320px，檢查導覽換行、作品一欄與水平捲動。 驗收：320px 下導覽換行、作品一欄且無水平捲動
進場檢核與作品接力
- 具備第 12 章成果：在 320px 到桌機寬度都可閱讀、可操作的作品集：不看答案，展示或口述第 12 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 12 章產物：在 320px 到桌機寬度都可閱讀、可操作的作品集
本章輸出：在既有整合頁修正錨點、間距與手機版回歸，留下修補前後證據
產物類型：mainline；後續用途：第 14 章
PROBLEM & ANALOGY
既有骨架已完成，本章專注巡場修補
整合像組裝完成後巡查展場：招牌、動線、展品與出口都已存在，本章的工作是找到互相干擾之處並留下回歸證據，不是假裝從零搭建。
本章要解決：各章零件單獨打開都正常，合在一起卻出現重複 id、錨點失效、class 規則互相覆蓋與手機版回歸。
接住上一章：前十二章分別完成的 HTML、CSS、元件與 RWD 成果。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- 共同容器
- 統一內容最大寬度與左右留白。
- 錨點 href/id
- 導覽連結與目標區塊的配對契約。
- 來源區塊
- 被整合進作品集的 Hero、內容與卡片。
- 間距系統
- 讓不同來源看起來像同一網站的共同留白。
- 320px
- 驗證整合後窄寬度的回歸基準。
SCOPE
今天的學習邊界
能自己完成
建立唯一且可跳轉的導覽錨點；統一容器與區塊間距；完成桌機與手機回歸清單。
看得懂即可
能辨識整合錯誤與單一元件錯誤的差別。
刻意延後
不新增新視覺技巧，不趁整合全面重做設計。
本章術語：integration、anchor、regression、duplicate id、scope、checkpoint。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先列出既有區塊與基準證據，再逐項修補，不一次改完整頁面。
- 每修一處就重測導覽、寬度與 class 衝突。
- 回歸證據包含桌機、手機、鍵盤與連結，不以『看起來可以』結案。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：故意讓導覽的 href="#projects" 對不到 id="works"，學生用網址 hash 與 Elements 對照後修正。
- 錨點不動：比對 href 的 # 名稱與唯一 id。
- 某一區樣式突然改變：用 Styles 找出廣泛 class，縮小作用範圍。
- 手機才壞：從最外層容器開始找固定寬度，不亂加 overflow hidden。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
點導覽沒有到正確區塊
先查：逐字比對 href 與目標 id，確認沒有重複 id。
畫面像拼貼
先查：找各來源的 container、padding 與 margin，再統一共同規則。
手機出現橫向捲軸
先查：在 320px 找真正超出的區塊，不用全域隱藏。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我已列出四個導覽連結與目標 id。
- 我知道哪些規則是共同容器與共同間距。
- 我會保留每個來源區塊的功能與內容。
- 我會在 320px 操作完整導覽後再提交。
修正整合頁共同容器與可用錨點
檔案：index.html、style.css
位置：依任務文字搜尋對應元素或函式
結果：四個導覽連結都到正確區塊
統一 Hero、內容區與卡片間距
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：各來源區塊像同一個網站而非貼上碎片
完成手機回歸修正
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：320px 下導覽換行、作品一欄且無水平捲動
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我的 href 分別抵達 ______；我把共同容器統一為 ______；320px 下我驗證了 ______。
整合不是把來源貼在一起；每個修改都要能說明對應哪個回歸問題。
提交既有頁面的修補前後對照、320px 與桌機截圖，並現場用導覽走完四個區塊。
範圍說明：120 分鐘只驗收既有回歸修補；同一次課剩餘 60 分鐘進入第 14 章 Git 初始化與第一個 commit。
下一章：第 14 章會把整合成果建立版本紀錄並送到 GitHub。
階段關卡提交：先填需求拆解、證據清單與同儕回饋，再用四級 rubric 自評；第 3 級才算通過。開啟學生提交包