LESSON-23 · starter
你會依序完成4個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：規劃入口可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、鍵盤 focus 與 brief 內容狀態。
會用到的檔案：index.html、style.css、main.js、project-brief.md、evidence.md
本堂焦點：把服務型商家需求整理成可執行的 project brief
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 project-brief.md 的「角色與目標」位置完成：補上目標商家、訪客角色與一句話目標
貼上位置：project-brief.md：角色與目標 區塊，先保留同一檔案的其他內容。
- 目標商家：安心到府服務；訪客：第一次尋找居家維護的屋主；目標：理解方案後送出諮詢
- 驗收證據：在自己的工作資料夾留下這一項紀錄。預期結果：brief 能用一句話說明目標商家、訪客與訪客要完成的結果。
驗收證據：project-brief.md 的角色、目標與主要 CTA 可以逐項對照。
常見錯誤：只寫喜歡的顏色或商家口號，沒有說明訪客要完成什麼。
第一個檢查：只檢查 project-brief.md 的角色與目標區塊，確認句子包含誰、做什麼、得到什麼。
現在要做：請在 project-brief.md 的「Sitemap table」位置完成：建立首頁、服務、關於、聯絡四頁的 URL、頁面責任與主要 CTA 表格
貼上位置：project-brief.md：Sitemap table 區塊，先保留同一檔案的其他內容。
| 頁面 | URL | 主要責任 | 主要 CTA |
| --- | --- | --- | --- |
| 首頁 | index.html | 建立信任並引導查看服務 | 查看服務方案 |
| 服務 | services.html | 讓訪客比較方案 | 了解適合方案 |
| 關於 | about.html | 說明背景與服務方式 | 認識我們如何協助 |
| 聯絡 | contact.html | 收集諮詢需求 | 送出諮詢 |預期結果：四列 sitemap 都有檔名、頁面責任與下一步，且不包含尚未教的技術細節。
驗收證據：project-brief.md 的 Sitemap 表格列出四個 HTML 檔案與四個主要 CTA。
常見錯誤：只列頁面名稱，沒有寫 URL、責任或訪客下一步。
第一個檢查：只逐列檢查四個檔名是否為 index.html、services.html、about.html、contact.html。
現在要做：請在 project-brief.md 的「User tasks 與 priority」位置完成：建立四個 user tasks，並為每個任務標上 P0、P1 或 P2
貼上位置：project-brief.md：User tasks 與 priority 區塊，先保留同一檔案的其他內容。
| 優先級 | User task |
| --- | --- |
| P0 | 當我是第一次訪客，我想理解服務並前往服務頁，以便判斷是否適合。 |
| P0 | 當我找到合適方案，我想送出諮詢，以便開始聯絡。 |
| P1 | 當我想確認商家可信度，我想閱讀關於頁，以便降低疑慮。 |
| P2 | 當我想快速回到服務頁，我想使用主要導覽，以便縮短尋找時間。 |預期結果：四個任務都使用『當……我想……以便……』句型，且 P0/P1/P2 能說明優先順序。
驗收證據：project-brief.md 的 User tasks 表格與 Priority 區塊。
常見錯誤：把『做得好看』『有一頁關於』當成 user task，或每項都標成 P0。
第一個檢查：只檢查每個任務是否包含訪客動作、預期結果與優先級。
現在要做：請在 index.html 的「project preview page-plan」位置完成：讓離線預覽列出四頁規劃，並保留可觀察的狀態按鈕
貼上位置：index.html：project preview page-plan 區塊，先保留同一檔案的其他內容。
<ol id="page-plan"></ol>
<p id="baseline-status" role="status">尚未檢查規劃預覽</p>
<button id="baseline-action" type="button">檢查預覽</button>預期結果：預覽入口有唯一 h1、四個頁面項目、規劃邊界說明與可操作的狀態按鈕。
驗收證據：畫面上的四個 li、#baseline-status 文字、Console 訊息與 Tab focus。
常見錯誤：一開始就建立真正的四頁或連接外部表單，超出本堂 planning-only 範圍。
第一個檢查：只檢查 index.html 是否有 #page-plan、#baseline-status 與 button[type=button]。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html離線預覽入口：將 project brief 的頁面規劃呈現成可觀察清單。style.css呈現層：控制規劃預覽、按鈕 focus 與窄版可讀性。main.js觀察腳本：讀取實際 li 數量，更新 status 並留下 Console 證據。project-brief.md規劃契約：記錄角色、sitemap、user tasks、優先級與驗收條件。evidence.md驗收紀錄：保存修改檔案、操作、預期、實際與結果。index.html離線預覽入口：將 project brief 的頁面規劃呈現成可觀察清單。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LESSON-23｜Project brief 規劃練習｜starter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page-shell">
<p class="eyebrow">LESSON-23 · starter</p>
<h1>Project brief 規劃預覽</h1>
<p class="page-description">請先完成 project-brief.md 的三個規劃責任，再把四頁 sitemap 放進這個離線預覽。</p>
<section class="project-preview" aria-labelledby="preview-title">
<h2 id="preview-title">網站地圖草稿</h2>
<p>這是規劃成果的離線預覽，不代表四個正式頁面已完成。</p>
<ol id="page-plan">
<!-- TODO-4：在這裡列出四個 sitemap 項目；先保留規劃-only 邊界。 -->
</ol>
</section>
<p id="baseline-status" class="status" role="status" aria-live="polite">尚未檢查規劃預覽</p>
<button id="baseline-action" type="button">檢查預覽項目</button>
</main>
<script src="main.js" defer></script>
</body>
</html>style.css呈現層：控制規劃預覽、按鈕 focus 與窄版可讀性。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.project-preview { margin-top: 1.5rem; }
.project-preview ol { display: grid; gap: .75rem; padding-left: 1.5rem; }
.project-preview li { padding: .75rem; border: 1px solid #d7e0eb; border-radius: .75rem; background: #f8fbfd; }
.status { min-height: 2rem; color: #17643d; font-weight: 700; }
button { padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (max-width: 560px) { .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.65rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }main.js觀察腳本：讀取實際 li 數量，更新 status 並留下 Console 證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const planList = document.querySelector("#page-plan");
const status = document.querySelector("#baseline-status");
const action = document.querySelector("#baseline-action");
function inspectPlan() {
const count = planList ? planList.querySelectorAll("li").length : 0;
if (status) status.textContent = "目前預覽有 " + count + " 個頁面項目";
console.log("LESSON-23：實際預覽項目數", count);
}
if (action) action.addEventListener("click", inspectPlan);
console.log("LESSON-23 starter：先完成規劃再檢查預覽");project-brief.md規劃契約：記錄角色、sitemap、user tasks、優先級與驗收條件。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# Project brief｜安心到府服務
## 角色與目標
<!-- TODO-1：補上目標商家、訪客角色與一句話目標。 -->
## Sitemap table
<!-- TODO-2：補上 index.html、services.html、about.html、contact.html 四列。 -->
## User tasks 與 priority
<!-- TODO-3：補上四個 user tasks，並分配 P0、P1、P2。 -->
## Acceptance checklist
- [ ] 規劃入口可以開啟
## 範圍
- 本堂只做 planning-only 規劃，不建立真正四頁、不連外部服務、不部署。
evidence.md驗收紀錄：保存修改檔案、操作、預期、實際與結果。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# 驗收證據
| 欄位 | 紀錄 |
| --- | --- |
| 修改檔案 | 尚未開始 |
| 操作 | 尚未開始 |
| 預期 | 規劃可以被讀懂 |
| 實際 | 尚未觀察 |
| 結果 | 尚未判定 |
P0/P1/P2 都能在 brief 中對照Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。