LESSON-08 · 零基礎學生教材
CSS 基礎：首頁整合
完成只有一個 h1 與 main 的首頁、有效的 services.html CTA，以及可在窄版閱讀的共用容器。
先理解：這堂課解決什麼問題？
單一區塊都已會排版，現在要把它們組成訪客一進站就能理解並採取行動的首頁。
本堂要完成：完成只有一個 h1 與 main 的首頁、有效的 services.html CTA，以及可在窄版閱讀的共用容器。
學習邊界：先完成「整合共用容器、Hero、服務摘要與 CTA 成為首頁」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
本堂先備：單一區塊都已會排版，現在要把它們組成訪客一進站就能理解並採取行動的首頁。 需要的檔案是 index.html、style.css、services.html、.page-shell、.hero、#services、.primary-button。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。
- 檔案位置：先找到
index.html、style.css、services.html、.page-shell、.hero、#services、.primary-button，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：開啟
examples/minimal.html，先看 Elements 的 header、main、h1 與兩個 section，再點擊 CTA；接著切換 390px、按 Tab 並選取.page-shell看 Computed。 - 預期：頁面只有一個 main 與一個 h1；CTA 跳到 #services；Computed 能讀到 max-width、margin、padding，Tab focus 清楚且 390px 沒有水平捲軸。
- 重設：重新整理
examples/minimal.html，先回到桌機寬度，再重新做一次 DOM、CTA、Computed 與鍵盤檢查。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先開啟examples/minimal.html，用 Elements 找到唯一 main、h1 與兩個 section，再點擊頁面內 CTA。 -
2
名詞
回到名詞卡，依序拆解 element、class、id、section、h1、a/href、CTA、landmark、container、selector、property/value、Box Model 與 media query。 -
3
Starter
把 Starter 複製到自己的工作資料夾：只完成兩個核心步驟，先在 index.html 建立 HTML，再在 style.css 觀察容器、Hero 與 CTA；main.js 不修改。 -
4
Checkpoint
開啟 Checkpoint，點擊故意寫成service.html的 CTA，從 Network 確認唯一 404。 -
5
Step 5
只把 href 修回services.html，確認服務頁成功開啟，兩頁 Console 都沒有 TypeError。 -
6
Solution
前往 Solution 對照唯一 h1/main、CSS Computed、390px 與 Tab focus，最後留下 DOM、Computed、Network 與鍵盤證據。 -
7
變體驗收
完成情境變體與獨立挑戰，保留下一堂二維版面銜接，不提前加入本課以外的框架、外部資料服務或部署工具；並閱讀下一堂銜接：Grid：下一堂會把服務摘要改成可伸縮的多欄版面。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
index.html首頁入口：呈現商家第一印象與主要 CTA。style.cssCSS 樣式檔：放置本堂「整合共用容器、Hero、服務摘要與 CTA 成為首頁」相關的版面規則。services.html服務頁：集中說明方案、內容與比較資訊。.page-shell頁面容器 class：控制內容最大寬度、內距與整體版面。.heroHero class：控制首屏訊息、標題與 CTA 的版面。#services服務區塊 id：讓導覽或 JavaScript 精準找到服務內容。.primary-button主要按鈕 class：標示訪客最重要的行動入口。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
HTML 結構與入口
8 個詞elementelement 白話意思：HTML 裡代表一個內容或區域責任的完整節點。 展開查看正式定義、範例與驗收證據
- 正式定義
- 瀏覽器依 HTML 標籤建立的文件節點，可能包含文字、子元素與屬性。
- 什麼時候用
- 要讀懂 header、main、section、h1 或 a 在頁面中各自負責什麼時。
- 最小範例
- <section><h2>服務摘要</h2></section> 是一個 section element。
- 可觀察證據
- Elements 面板能看到節點的階層、文字與屬性。
- 容易混淆
- 和 tag 混淆；tag 是原始碼寫法，element 是瀏覽器解析後的完整節點。
classclass attribute 白話意思：給一個或多個元素共用的可重用名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- HTML 元素上的 class attribute，通常作為 CSS selector 的匹配依據。
- 什麼時候用
- 多個服務項目要套用同一組樣式，或要讓
.primary-button命中連結時。 - 最小範例
- <a class="primary-button">查看服務</a>。
- 可觀察證據
- Elements 看得到 class，Styles 顯示
.primary-button是否命中。 - 容易混淆
- 和 id 混淆；class 可以重複使用，id 通常識別單一元素。
idid attribute 白話意思：給頁面中一個元素的唯一識別名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- 元素上應唯一的識別屬性，可被
#idselector、頁面內連結或 JavaScript 使用。 - 什麼時候用
- section 需要成為
#services目標，或要在 DOM 中精準找到它時。 - 最小範例
- <section id="services"> 搭配 <a href="#services">服務</a>。
- 可觀察證據
- 點擊後網址出現
#services，Elements 也能找到唯一 section。 - 容易混淆
- 和 class 混淆；id 是單一識別，class 是可共用分類。
sectionsection element 白話意思：把同一個主題的內容包成一個分區。 展開查看正式定義、範例與驗收證據
- 正式定義
- 表示文件中具有主題、通常有標題的獨立內容區域之語意 HTML 元素。
- 什麼時候用
- 首頁要把 Hero 和服務摘要分成可以讀懂的內容責任時。
- 最小範例
- <section aria-labelledby="services-title">...</section>。
- 可觀察證據
- Elements 看見 section，且 section 內有對應的 h2。
- 容易混淆
- 和 div 混淆；div 只是通用容器，section 會表達內容分區。
h1level-one heading 白話意思：這一頁最主要的標題。 展開查看正式定義、範例與驗收證據
- 正式定義
- 表示目前 HTML 文件最高層級主題的標題元素；本課每頁只保留一個。
- 什麼時候用
- 需要讓訪客與輔助技術知道目前頁面主題時。
- 最小範例
- <h1>沐光工作室：讓空間回到生活</h1>。
- 可觀察證據
- Elements 搜尋
h1只有一個，畫面也能指出它是本頁主題。 - 容易混淆
- 和 title 混淆；title 在分頁，h1 在頁面內容。
a／hrefanchor element and href 白話意思：a 是可點擊連結，href 告訴瀏覽器要去哪裡。 展開查看正式定義、範例與驗收證據
- 正式定義
- anchor 元素透過 href 指定超連結目的地；同層頁面可使用相對路徑。
- 什麼時候用
- 首頁要把訪客帶到
services.html，或要重現服務頁 404 時。 - 最小範例
- <a href="services.html">查看服務內容</a>。
- 可觀察證據
- Tab 能聚焦，點擊後網址與 Network 顯示目標 HTML；錯寫成
service.html會是 404。 - 容易混淆
- 和 button 混淆；a 用於導覽，button 通常在目前頁面觸發操作。
CTAcall to action 白話意思：頁面希望訪客下一步做的主要行動。 展開查看正式定義、範例與驗收證據
- 正式定義
- 依頁面任務選出的主要行動入口；本課 CTA 是前往
services.html的 a 連結。 - 什麼時候用
- 首頁已說明服務，接下來要讓訪客繼續查看完整方案時。
- 最小範例
- <a class="primary-button" href="services.html">查看服務內容</a>。
- 可觀察證據
- Tab 可聚焦、文字清楚、點擊後到達
services.html，Network 回應 200。 - 容易混淆
- 和外觀按鈕混淆；有圓角不代表它真的有 href 或完成導覽責任。
landmarklandmark region 白話意思：讓人可以快速找到頁首、主要內容等頁面區域。 展開查看正式定義、範例與驗收證據
- 正式定義
- 由語意 HTML 元素或 ARIA role 暴露給輔助技術的頁面區域。
- 什麼時候用
- 檢查 header、main 與 section 是否能說明首頁結構時。
- 最小範例
- <header>...</header><main class="page-shell">...</main>。
- 可觀察證據
- Elements 的 DOM 中只有一個 main，頁面區域責任可被說出來。
- 容易混淆
- 和 class 名稱混淆；class 是樣式／分類名稱，landmark 是內容區域語意。
容器與響應式樣式
5 個詞containerlayout container 白話意思：控制內容寬度、左右留白與閱讀範圍的盒子。 展開查看正式定義、範例與驗收證據
- 正式定義
- 限制內容可用寬度並由 margin、padding 等 CSS 規則管理版面邊界的元素。
- 什麼時候用
- Hero、服務摘要與 CTA 要對齊，且窄版不能超出 viewport 時。
- 最小範例
- .page-shell { max-width: 760px; margin: 2rem auto; padding: 2rem; }。
- 可觀察證據
- Computed 能讀到 max-width、margin、padding；390px 沒有水平捲軸。
- 容易混淆
- 和 section 混淆；section 表達內容責任，container 表達版面邊界，兩者可以是同一元素但概念不同。
selectorCSS selector 白話意思：告訴 CSS 要把規則套用到誰。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS 規則中用來匹配文件元素的模式，例如 class selector 或 id selector。
- 什麼時候用
- 要讓
.page-shell、.hero或.primary-button產生可預期改變時。 - 最小範例
- .hero { padding-block: 3rem 2rem; }。
- 可觀察證據
- Styles 顯示規則命中；選取元素後能看到對應宣告。
- 容易混淆
- 和 property 混淆；selector 決定對誰作用，property 決定改什麼。
property／valueCSS property and value 白話意思：property 是要改的項目，value 是它採用的具體設定。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS declaration 由 property 名稱和值組成，瀏覽器依規則計算最後結果。
- 什麼時候用
- 要讀懂
max-width、margin、padding或display的宣告時。 - 最小範例
- max-width: 760px 中 max-width 是 property，760px 是 value。
- 可觀察證據
- Styles 看原始宣告，Computed 看最後計算出的實際值。
- 容易混淆
- 和 HTML attribute 混淆；class、id、href 寫在 HTML，
property/value寫在 CSS。
Box ModelCSS box model 白話意思：每個元素都像一個由內容、內距、邊框、外距組成的盒子。 展開查看正式定義、範例與驗收證據
- 正式定義
- 瀏覽器計算元素內容區、padding、border 與 margin 尺寸和空間的模型。
- 什麼時候用
- 容器太寬、內容貼邊、間距不如預期或出現水平捲軸時。
- 最小範例
- .page-shell { padding: 2rem; margin: 2rem auto; }。
- 可觀察證據
- DevTools Box Model 與 Computed 的 width、padding、margin 可互相對照。
- 容易混淆
- 和 Flexbox 混淆；Box Model 說明盒子尺寸，Flexbox 說明子元素排列。
media querymedia query 白話意思：依 viewport 條件套用另一組 CSS 規則。 展開查看正式定義、範例與驗收證據
- 正式定義
- 用
@media根據媒體特徵，例如 viewport 寬度，條件式套用 CSS。 - 什麼時候用
- 同一個首頁在 390px 需要較小 padding 與 margin 時。
- 最小範例
- @media (max-width: 560px) { .page-shell { padding: 1rem; } }。
- 可觀察證據
- 切換 390px 與桌機後，Computed 的 padding 不同且沒有水平捲軸。
- 容易混淆
- 和 JavaScript 判斷螢幕寬度混淆；本課先用 CSS media query，不寫 JS viewport 邏輯。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
Elements：header=1、main=1、h1=1、section=2
CTA：<a class="primary-button" href="services.html">查看服務內容</a>Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
先把首頁 HTML 責任放對位置
- 目的
- 先用 header、main、section、h1 與 h2 說清楚首頁結構，再談 CSS 外觀。
- 修改位置
starter/files/index.html的.page-shell
在既有 main 內加入 Hero、服務摘要與唯一 h1；CTA 使用 a[href="services.html"]。- 預期結果
- 重新整理後看到 Hero、三項服務摘要與服務頁連結；整頁只有一個 main 與一個 h1。
- 驗收證據
- Elements 確認 header=1、main=1、h1=1、section=2；再檢查 CTA 的 class 與 href。
- 卡住先查
- 只在 Elements 搜尋 <main>、<h1> 與 href="
services.html"，先不要改 CSS。
-
Step 2
用 CSS 容器建立可閱讀節奏
- 目的
- 把 max-width、margin、padding、display 分別對應到看得見的版面結果。
- 修改位置
starter/files/style.css的.page-shell、.hero、.primary-button
依序修改.page-shell、.hero、.primary-button，儲存後各做一次 Computed 與窄版檢查。- 預期結果
- 桌機內容有一致左右邊界與留白；CTA 的 padding 可見，390px 沒有水平捲軸。
- 驗收證據
- 選取
.page-shell看 Computed 的 max-width、margin、padding；選取 .primary-button 看 display；切換 390px。 - 卡住先查
- 只確認
.page-shell是否命中，並讀 Computed 的 margin 與 padding。
-
Step 3
先故意製造，再修正一次 404
- 目的
- 把錯誤 href 變成 Network 證據，讓學生學會從症狀回到最小修正。
- 修改位置
checkpoint/files/index.html的 .primary-button[href]
先點擊 CTA，在 Network 找到service.html的 404，再只把 href 改成services.html。- 預期結果
- 修正前看到
service.html404；修正後services.html成功開啟，兩頁 Console 都沒有 TypeError。 - 驗收證據
- Network 先有
service.html／404，再有services.html／成功；檔案樹只有services.html。 - 卡住先查
- 只複製 Network 的請求 URL，逐字與
checkpoint/files/services.html比對。
-
Step 4
用 DOM、Computed 與鍵盤完成驗收
- 目的
- 把畫面上的『看起來完成』轉成可以重現的結構、樣式與操作證據。
- 修改位置
solution/files/index.html、services.html、style.css
確認唯一main/h1、CTA 目標、Computed 容器規則、390px 寬度與 Tab focus。- 預期結果
- 首頁結構、服務導覽、CSS 計算值與鍵盤操作都能被指出；390px 沒有水平捲軸。
- 驗收證據
- Elements、Computed、Network、390px viewport 與 Tab focus 各留下一項證據。
- 卡住先查
- 依序只查一件事：先數 DOM，再點 CTA，最後切換 390px 並按 Tab。
-
Step 5
整合本堂驗收證據
- 目的
- 把前面完成的修改放回本堂任務，確認不是只修好單一畫面。
- 修改位置
examples/minimal.html與本堂驗收證據
依序檢查 首頁區塊順序、唯一h1/main、CTA 目標、DOM/Computed/Network證據、桌機與 390px 畫面，只記錄一個實際觀察，不新增本堂以外的技術。- 預期結果
- 完成只有一個 h1 與 main 的首頁、有效的
services.htmlCTA，以及可在窄版閱讀的共用容器。 - 驗收證據
- 首頁區塊順序、唯一
h1/main、CTA 目標、DOM/Computed/Network證據、桌機與 390px 畫面 - 卡住先查
- 先確認開啟的真的是
examples/minimal.html，再在 Elements 展開 body，不要先修改 CSS。
-
Step 6
完成最後回歸檢查
- 目的
- 用本堂的操作與驗收條件重跑一次，留下可以重現的結果。
- 修改位置
examples/minimal.html與本堂驗收證據
依序檢查 首頁區塊順序、唯一h1/main、CTA 目標、DOM/Computed/Network證據、桌機與 390px 畫面，只記錄一個實際觀察，不新增本堂以外的技術。- 預期結果
- 完成只有一個 h1 與 main 的首頁、有效的
services.htmlCTA，以及可在窄版閱讀的共用容器。 - 驗收證據
- 首頁區塊順序、唯一
h1/main、CTA 目標、DOM/Computed/Network證據、桌機與 390px 畫面 - 卡住先查
- 先確認開啟的真的是
examples/minimal.html，再在 Elements 展開 body，不要先修改 CSS。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「element」在本堂要解決什麼問題？ 本題線索：element；回到名詞卡與 Elements 面板能看到節點的階層、文字與屬性。 展開解析收合解析
白話解析：
HTML 裡代表一個內容或區域責任的完整節點。 正式來說，瀏覽器依 HTML 標籤建立的文件節點，可能包含文字、子元素與屬性。
對照位置：
回到名詞卡「element」，再看 Elements 面板能看到節點的階層、文字與屬性。
預期觀察：
你應該能用自己的話說出：要讀懂 header、main、section、h1 或 a 在頁面中各自負責什麼時。
常見錯誤：
不要只回答「它是element」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「開啟 examples/minimal.html，先看 Elements 的 header、main、h1 與兩個 section，再點擊 CTA；接著切換 390px、按 Tab 並選取 .page-shell 看 Computed。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：starter/files/index.html 的 .page-shell；要修改：在既有 main 內加入 Hero、服務摘要與唯一 h1；CTA 使用 a[href="services.html"]。；觀察：Elements 確認 header=1、main=1、h1=1、section=2；再檢查 CTA 的 class 與 href。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：先用 header、main、section、h1 與 h2 說清楚首頁結構，再談 CSS 外觀。
對照位置：
對照 Live Lab Step 1，位置是 starter/files/index.html 的 .page-shell；範例內容：Elements：header=1、main=1、h1=1、section=2
CTA：<a class="primary-button" href="services.html">查看服務內容</a>
預期觀察：
重新整理後看到 Hero、三項服務摘要與服務頁連結；整頁只有一個 main 與一個 h1。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只在 Elements 搜尋 <main>、<h1> 與 href="services.html"，先不要改 CSS。
立即驗證：
實際操作後檢查 Elements 確認 header=1、main=1、h1=1、section=2；再檢查 CTA 的 class 與 href。。
Q3概念比較
「element」和「class」在本堂的責任有什麼不同？
本題線索：比較 element 與 class；操作位置：starter/files/style.css 的 .page-shell、.hero、.primary-button
展開解析收合解析
白話解析：
element：HTML 裡代表一個內容或區域責任的完整節點。；class：給一個或多個元素共用的可重用名稱。
對照位置：
對照兩張名詞卡的正式定義：瀏覽器依 HTML 標籤建立的文件節點，可能包含文字、子元素與屬性。／HTML 元素上的 class attribute，通常作為 CSS selector 的匹配依據。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 starter/files/style.css 的 .page-shell、.hero、.primary-button 做「依序修改 .page-shell、.hero、.primary-button，儲存後各做一次 Computed 與窄版檢查。」，再用 選取 .page-shell 看 Computed 的 max-width、margin、padding；選取 .primary-button 看 display；切換 390px。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：solution/files/index.html、services.html、style.css；第一個檢查位置：Elements、Computed、Network、390px viewport 與 Tab focus 各留下一項證據。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只提交桌機截圖，或用 overflow:hidden 把窄版溢位藏起來。
對照位置：
對照最後一段 Live Lab：solution/files/index.html、services.html、style.css；檢查方式：依序只查一件事：先數 DOM，再點 CTA，最後切換 390px 並按 Tab。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用 HTML、CSS、瀏覽器與預寫的 null-safe JavaScript 驗收腳本；學生只修改
index.html與style.css，其他檔案用來觀察結果。
本堂任務與驗收
完成只有一個 h1 與 main 的首頁、有效的 services.html CTA，以及可在窄版閱讀的共用容器。
- 能用 首頁區塊順序 留下可重現證據。
- 能用 唯一
h1/main留下可重現證據。 - 能用 CTA 目標 留下可重現證據。
- 能用
DOM/Computed/Network證據 留下可重現證據。 - 能用 桌機與 390px 畫面 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。