LESSON-24 · 零基礎學生教材
建立黃色／鐵灰品牌 shell、首頁與商品入口
完成六頁可互相到達的品牌外框；首頁有唯一 h1、前往 products.html 的主要 CTA、精選商品區入口，390px 可讀且鍵盤 focus 清楚。
先理解：這堂課解決什麼問題？
資料契約已固定，現在於 project/e-commerce 建立六頁共用導覽與首頁；黃色負責品牌與主要行動、鐵灰負責文字與表面，只用少量紅色標示特價。
本堂要完成：完成六頁可互相到達的品牌外框；首頁有唯一 h1、前往 products.html 的主要 CTA、精選商品區入口，390px 可讀且鍵盤 focus 清楚。
學習邊界：先完成「建立黃色／鐵灰品牌 shell、首頁與商品入口」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
延續上一章的鐵刻運動電商成果。本章只增加 建立黃色／鐵灰品牌 shell、首頁與商品入口 的責任；先開啟 examples/minimal.html，再依 Starter → Checkpoint → Solution 留下檔案、操作、預期與實際證據。
- 檔案位置：先找到
project/e-commerce/index.html、products.html、cart.html、checkout.html、order-success.html、contact.html、css/style.css，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：開啟本章最小實驗，按下執行按鈕，再比對畫面、Elements、Console 與 390px；不得把 local mock 當成真實 Sheet 成功。
- 預期：只呈現 L24 在鐵刻運動連續專案新增的責任，且能指出上一章輸入與下一章交付。
- 重設：重新整理
examples/minimal.html；本章最小實驗不送正式資料、不部署。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。 -
2
Step 2
自己回答互動問答 4 題，再展開解析。 -
3
最小實驗 2
開啟最小實驗，實際操作一次並記下證據。 -
4
Starter
把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。 -
5
Checkpoint
前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。 -
6
Solution
前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。 -
7
變體驗收
完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：離線商店：下一堂加入 mock 商品、購物車、checkout 與聯絡表單，但仍不連任何後端。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
index.html鐵刻運動電商頁面或發佈檔案。products.html鐵刻運動電商頁面或發佈檔案。css/style.css黃色與鐵灰共用樣式：包含響應式版面、focus 與可讀狀態。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
品牌視覺
3 個詞黃色與鐵灰 design token黃色與鐵灰 design token 白話意思：用來理解「黃色與鐵灰 design token」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 黃色與鐵灰 design token 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 黃色與鐵灰 design token 或排查相關問題時。
- 最小範例
- 黃色與鐵灰 design token
- 可觀察證據
- 能在專章範例指出 黃色與鐵灰 design token 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
紅色特價點綴紅色特價點綴 白話意思：用來理解「紅色特價點綴」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 紅色特價點綴 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 紅色特價點綴 或排查相關問題時。
- 最小範例
- 紅色特價點綴
- 可觀察證據
- 能在專章範例指出 紅色特價點綴 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
色彩用途與對比色彩用途與對比 白話意思：用來理解「色彩用途與對比」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 色彩用途與對比 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 色彩用途與對比 或排查相關問題時。
- 最小範例
- 色彩用途與對比
- 可觀察證據
- 能在專章範例指出 色彩用途與對比 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
六頁外框與可存取性
3 個詞skip link 與 landmarksskip link 與 landmarks 白話意思：用來理解「skip link 與 landmarks」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 skip link 與 landmarks 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 skip link 與 landmarks 或排查相關問題時。
- 最小範例
- skip link 與 landmarks
- 可觀察證據
- 能在專章範例指出 skip link 與 landmarks 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
唯一 aria-current唯一 aria-current 白話意思：用來理解「唯一 aria-current」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 唯一 aria-current 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 唯一 aria-current 或排查相關問題時。
- 最小範例
- 唯一 aria-current
- 可觀察證據
- 能在專章範例指出 唯一 aria-current 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
真實相對連結真實相對連結 白話意思：用來理解「真實相對連結」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 真實相對連結 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 真實相對連結 或排查相關問題時。
- 最小範例
- 真實相對連結
- 可觀察證據
- 能在專章範例指出 真實相對連結 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
首頁與商品入口
4 個詞herohero 白話意思：用來理解「hero」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 hero 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 hero 或排查相關問題時。
- 最小範例
- hero
- 可觀察證據
- 能在專章範例指出 hero 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
products.html CTAproducts.html CTA
白話意思：用來理解「products.html CTA」的實務概念。
展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將
products.htmlCTA 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。 - 什麼時候用
- 實作
products.htmlCTA 或排查相關問題時。 - 最小範例
- products.html CTA
- 可觀察證據
- 能在專章範例指出
products.htmlCTA 的操作結果。 - 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
精選商品區精選商品區 白話意思：用來理解「精選商品區」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 精選商品區 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 精選商品區 或排查相關問題時。
- 最小範例
- 精選商品區
- 可觀察證據
- 能在專章範例指出 精選商品區 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
390px／鍵盤證據390px／鍵盤證據 白話意思：用來理解「390px／鍵盤證據」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 390px／鍵盤證據 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 390px／鍵盤證據 或排查相關問題時。
- 最小範例
- 390px／鍵盤證據
- 可觀察證據
- 能在專章範例指出 390px／鍵盤證據 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
:root { --brand-yellow:#f5c400; --iron:#343a40; --surface:#f6f3e8; --sale-red:#c62828; }Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
建立黃色、鐵灰、表面與少量紅色特價 token，並限定 token 的用途
- 目的
- 先用 token 固定品牌語言，後續商品與表單才不會各自發明顏色。
- 修改位置
css/style.css
建立黃色、鐵灰、表面與少量紅色特價 token，並限定 token 的用途- 預期結果
- 主要 CTA 使用黃色、文字與表面使用鐵灰系，紅色只出現在 .sale-badge／特價文字。
- 驗收證據
- Styles／Computed 的 token 值、全檔紅色 selector 搜尋與對比證據。
- 卡住先查
- 先搜尋所有紅色值，確認只由 --sale-red 且只命中特價語意。
-
Step 2
在 index、products、cart、checkout、order-success、contact 建立 skip link、
header/nav/main/footer與唯一 aria-current- 目的
- 讓整個購物流程即使關閉 JavaScript 仍可找到主要頁面。
- 修改位置
- 六個 HTML
在 index、products、cart、checkout、order-success、contact 建立 skip link、header/nav/main/footer與唯一 aria-current - 預期結果
- 六頁互相可達，每頁只有一個 main／h1／aria-current=page，第一次 Tab 可看見 skip link。
- 驗收證據
- 六個 URL、Elements landmark 數量、aria-current 數量與純 Tab 操作。
- 卡住先查
- 先從
products.html逐一點四個導覽，再數 [aria-current='page']。
-
Step 3
完成運動器材 hero、前往
products.html的主要 CTA 與精選商品入口- 目的
- 首頁只負責建立品牌主張並把訪客帶到商品，不提前實作購物車資料。
- 修改位置
index.html
完成運動器材 hero、前往products.html的主要 CTA 與精選商品入口- 預期結果
- 首頁唯一 h1、主要 CTA 真實指向
products.html，精選區有可辨識標題與本地圖片位置。 - 驗收證據
- 畫面、href、Elements heading order、Network 本地資源與 390px 截圖。
- 卡住先查
- 先檢查 CTA 是否是有真實 href 的 a，再用 Network 確認
products.html200。
-
Step 4
把錯誤的
product.html修成products.html- 目的
- 以單一相對路徑缺口練習從 404 回到檔案樹。
- 修改位置
index.html
把錯誤的product.html修成products.html- 預期結果
- 修正後首頁主要 CTA 開啟
products.html且 Network 回應 200。 - 驗收證據
- 修正前
product.html404、修正後products.html200。 - 卡住先查
- 只比對實際檔名與首頁主要 CTA 的 href。
-
Step 5
專章驗收：品牌色 Token 與用途
- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作 品牌色 Token 與用途 並記錄結果。- 預期結果
- 能展示 品牌色 Token 與用途 的畫面、DOM、Console 或 Network 證據。
- 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
-
Step 6
專章驗收：六頁共用 Shell
- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作 六頁共用 Shell 並記錄結果。- 預期結果
- 能展示 六頁共用 Shell 的畫面、DOM、Console 或 Network 證據。
- 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「黃色與鐵灰 design token」在本堂要解決什麼問題？ 本題線索：黃色與鐵灰 design token；回到名詞卡與 能在專章範例指出 黃色與鐵灰 design token 的操作結果。 展開解析收合解析
白話解析：
用來理解「黃色與鐵灰 design token」的實務概念。 正式來說，本章將 黃色與鐵灰 design token 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
對照位置：
回到名詞卡「黃色與鐵灰 design token」，再看 能在專章範例指出 黃色與鐵灰 design token 的操作結果。
預期觀察：
你應該能用自己的話說出：實作 黃色與鐵灰 design token 或排查相關問題時。
常見錯誤：
不要只回答「它是黃色與鐵灰 design token」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「開啟本章最小實驗，按下執行按鈕，再比對畫面、Elements、Console 與 390px；不得把 local mock 當成真實 Sheet 成功。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：css/style.css；要修改：建立黃色、鐵灰、表面與少量紅色特價 token，並限定 token 的用途；觀察：Styles／Computed 的 token 值、全檔紅色 selector 搜尋與對比證據。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：先用 token 固定品牌語言，後續商品與表單才不會各自發明顏色。
對照位置：
對照 Live Lab Step 1，位置是 css/style.css；範例內容：:root { --brand-yellow:#f5c400; --iron:#343a40; --surface:#f6f3e8; --sale-red:#c62828; }
預期觀察：
主要 CTA 使用黃色、文字與表面使用鐵灰系，紅色只出現在 .sale-badge／特價文字。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；先搜尋所有紅色值，確認只由 --sale-red 且只命中特價語意。
立即驗證：
實際操作後檢查 Styles／Computed 的 token 值、全檔紅色 selector 搜尋與對比證據。。
Q3概念比較 「黃色與鐵灰 design token」和「紅色特價點綴」在本堂的責任有什麼不同？ 本題線索：比較 黃色與鐵灰 design token 與 紅色特價點綴；操作位置：六個 HTML 展開解析收合解析
白話解析：
黃色與鐵灰 design token：用來理解「黃色與鐵灰 design token」的實務概念。；紅色特價點綴：用來理解「紅色特價點綴」的實務概念。
對照位置：
對照兩張名詞卡的正式定義：本章將 黃色與鐵灰 design token 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 紅色特價點綴 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 六個 HTML 做「在 index、products、cart、checkout、order-success、contact 建立 skip link、header/nav/main/footer 與唯一 aria-current」，再用 六個 URL、Elements landmark 數量、aria-current 數量與純 Tab 操作。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。
對照位置：
對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。
本堂任務與驗收
完成六頁可互相到達的品牌外框；首頁有唯一 h1、前往 products.html 的主要 CTA、精選商品區入口，390px 可讀且鍵盤 focus 清楚。
- 能用 六頁 nav 留下可重現證據。
- 能用 唯一 aria-current 留下可重現證據。
- 能用 首頁
h1/商品 CTA 留下可重現證據。 - 能用 黃色鐵灰 token 留下可重現證據。
- 能用 紅色只用於特價 留下可重現證據。
- 能用 390px 與 Tab 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。
官方延伸閱讀
正式延伸｜自主學習
把「黃色鐵灰品牌 shell、首頁與商品入口」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
開啟自主學習入口｜4 個獨立 topic
- 先選一個 topic，讀懂成果、檔案與定位。
- 在自己的 Starter 檔案修改一小段。
- 重新載入，用畫面、Elements、Computed、Console 或文件留下證據。
建議第一個 topic：品牌色 Token 與用途。
Learning map
- 品牌色 Token 與用途｜code-edit｜files/starter/css/style.css｜count=4、uniqueCount=4、valid=true
- 六頁共用 Shell｜code-edit｜files/starter/index.html｜count=6、uniqueCount=6、valid=true
- 唯一 aria-current｜code-edit｜files/starter/index.html｜count=6、uniqueCount=6、valid=true
- 首頁 Hero 與商品入口｜code-edit｜files/starter/index.html｜count=3、uniqueCount=3、valid=true