商用網站架設實務

LESSON-08 · solution

CSS 基礎：首頁整合

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter2 個小成果
Checkpoint一個核心缺口
Solution3 個差異

開始前確認

這一頁的結果：首頁與 services.html 都可開啟且 Console 無錯誤；index.html 只有一個 main、h1 與主要 CTA；390px 沒有水平捲軸，Tab focus 清楚且 CSS 結果可由 Computed 證明

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：index.html、style.css、main.js、services.html

本堂焦點：整合共用容器、Hero、服務摘要與 CTA 成為首頁

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

先讓 HTML 說清楚首頁的唯一主標題、內容分區與下一步行動。

目的

先讓 HTML 說清楚首頁的唯一主標題、內容分區與下一步行動。

修改檔案

index.html

程式碼位置

.page-shell

現在要做：先對照差異，再檢查 在 index.html 的「.page-shell」對照這項變更：<section class="hero" aria-labelledby="hero-title"> <p class="eyebrow">LESSON-08 · 首頁整合</p> <h1 id="hero-title">沐光工作室：讓空間回到生活</h1> <p>用清楚的頁面區塊，讓訪客快速理解我們能提供什麼。</p> <a class="primary-button" href="services.html">查看服務內容</a> </section> <section id="services" class="service-summary" aria-labelledby="services-title"> <h2 id="services-title">服務摘要</h2> <ul class="service-list"> <li><h3>品牌網站</h3><p>建立可信任的第一印象。</p></li> <li><h3>內容整理</h3><p>把複雜資訊變成可閱讀的路徑。</p></li> <li><h3>持續優化</h3><p>用觀察與迭代讓體驗越來越好。</p></li> </ul> </section>

貼上位置：index.html 的 .page-shell 區塊

<section class="hero" aria-labelledby="hero-title">
  <p class="eyebrow">LESSON-08 · 首頁整合</p>
  <h1 id="hero-title">沐光工作室：讓空間回到生活</h1>
  <p>用清楚的頁面區塊，讓訪客快速理解我們能提供什麼。</p>
  <a class="primary-button" href="services.html">查看服務內容</a>
</section>

<section id="services" class="service-summary" aria-labelledby="services-title">
  <h2 id="services-title">服務摘要</h2>
  <ul class="service-list">
    <li><h3>品牌網站</h3><p>建立可信任的第一印象。</p></li>
    <li><h3>內容整理</h3><p>把複雜資訊變成可閱讀的路徑。</p></li>
    <li><h3>持續優化</h3><p>用觀察與迭代讓體驗越來越好。</p></li>
  </ul>
</section>

預期結果：頁面出現品牌標題、Hero 主標、三項服務摘要與前往 services.html 的連結。

驗收證據：Elements 可看到 header、main、section、h1 與 a[href="services.html"]，且整頁只有一個 h1。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

把內容放進可閱讀的容器，並讓主要行動在視覺上被看見。

目的

把內容放進可閱讀的容器，並讓主要行動在視覺上被看見。

修改檔案

style.css

程式碼位置

.page-shell

現在要做：先對照差異，再檢查 在 style.css 的「.page-shell」對照這項變更：.page-shell { width: calc(100% - 2rem); max-width: 760px; margin: 2rem auto; padding: 2rem; } .hero { padding-block: 3rem 2rem; } .primary-button { display: inline-block; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 999px; background: #16324f; color: #ffffff; text-decoration: none; } .primary-button:hover, .primary-button:focus-visible { background: #0b1f33; } @media (max-width: 560px) { .page-shell { width: calc(100% - 1rem); margin-block: 1rem; padding: 1rem; } }

貼上位置：style.css 的 .page-shell 區塊

.page-shell {
  width: calc(100% - 2rem);
  max-width: 760px;
  margin: 2rem auto;
  padding: 2rem;
}

.hero {
  padding-block: 3rem 2rem;
}

.primary-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #16324f;
  color: #ffffff;
  text-decoration: none;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: #0b1f33;
}

@media (max-width: 560px) {
  .page-shell {
    width: calc(100% - 1rem);
    margin-block: 1rem;
    padding: 1rem;
  }
}

預期結果：桌機畫面有穩定內容寬度與留白，CTA 成為清楚的可點擊按鈕；縮窄到 390px 後內容仍不溢出。

驗收證據：Computed 可看到 max-width、margin、padding、display；390px 預覽沒有水平捲軸，Tab 可看到 focus。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

讓學生練習從瀏覽器的失敗證據回到 HTML 的 href，而不是盲目重寫整頁。

目的

讓學生練習從瀏覽器的失敗證據回到 HTML 的 href，而不是盲目重寫整頁。

修改檔案

index.html

程式碼位置

.primary-button[href]

現在要做：先對照差異，再檢查 在 index.html 的「.primary-button[href]」對照這項變更：<a class="primary-button" href="services.html">查看服務內容</a>

貼上位置：index.html 的 .primary-button[href] 區塊

<a class="primary-button" href="services.html">查看服務內容</a>

預期結果：修正前 Network 有 service.html 404；修正後點擊 CTA 能開啟 services.html。

驗收證據：Network 先看到 service.html 404，再看到 services.html 成功載入；兩個頁面的 Console 都沒有 TypeError。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

index.html首頁入口：建立唯一 h1、main、Hero、服務摘要與服務頁 CTA。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>沐光工作室｜首頁</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%230f4c5c'/%3E%3C/svg%3E" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="index.html">沐光工作室</a>
    <nav aria-label="主要導覽"><a href="services.html">服務方案</a></nav>
  </header>
  <main class="page-shell">
    <section class="hero" aria-labelledby="hero-title">
      <p class="eyebrow">LESSON-08 · 首頁整合</p>
      <h1 id="hero-title">沐光工作室：讓空間回到生活</h1>
      <p>用清楚的頁面區塊，讓訪客快速理解我們能提供什麼。</p>
      <a class="primary-button" href="services.html">查看服務內容</a>
    </section>
    <section id="services" class="service-summary" aria-labelledby="services-title">
      <h2 id="services-title">服務摘要</h2>
      <ul class="service-list">
        <li><h3>品牌網站</h3><p>建立可信任的第一印象。</p></li>
        <li><h3>內容整理</h3><p>把複雜資訊變成可閱讀的路徑。</p></li>
        <li><h3>持續優化</h3><p>用觀察與迭代讓體驗越來越好。</p></li>
      </ul>
    </section>
  </main>
  <script src="main.js" defer></script>
</body>
</html>
style.css共用樣式：觀察 page-shell、hero、primary-button、focus 與窄版 media query。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
: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; }
a { color: #16324f; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; width: min(100% - 2rem, 760px); margin: 1rem auto 0; }
.site-header nav { display: flex; gap: 1rem; }
.eyebrow { color: #176b87; font-weight: 800; }
a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
.page-shell { width: calc(100% - 2rem); max-width: 760px; margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.hero { padding-block: 3rem 2rem; }
.service-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.service-list li { padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; }
.service-list li + li { margin-top: 1rem; }
.primary-button { display: inline-block; margin-top: 1rem; padding: .75rem 1rem; border-radius: 999px; background: #16324f; color: #fff; text-decoration: none; }
.primary-button:hover, .primary-button:focus-visible { background: #0b1f33; }
.primary-button:focus-visible, .site-header a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
@media (max-width: 560px) { .site-header { width: calc(100% - 1rem); } .page-shell { width: calc(100% - 1rem); margin-block: 1rem; padding: 1rem; } }
main.js預寫驗收腳本：所有頁面都能安全載入，學生不修改本檔。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const status = document.querySelector("#status");
const action = document.querySelector("#action");

console.log("LESSON-08：預寫驗收腳本已載入");

function showResult() {
  if (status) status.textContent = "LESSON-08：首頁整合驗收完成";
  console.log("LESSON-08：首頁整合驗收完成");
}

if (action) action.addEventListener("click", showResult);
services.html服務頁入口：提供 CTA 的真實相對路徑目標，沒有 status/action 也不會造成 JS 錯誤。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>服務方案｜沐光工作室</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%230f4c5c'/%3E%3C/svg%3E" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="index.html">沐光工作室</a>
    <nav aria-label="主要導覽"><a href="index.html">回到首頁</a></nav>
  </header>
  <main class="page-shell">
    <p class="eyebrow">LESSON-08 · 服務頁</p>
    <h1>服務方案</h1>
    <section aria-labelledby="services-title">
      <h2 id="services-title">把需求變成可執行的方案</h2>
      <ul class="service-list">
        <li><h3>品牌網站</h3><p>建立可信任的第一印象。</p></li>
        <li><h3>內容整理</h3><p>把複雜資訊變成可閱讀的路徑。</p></li>
        <li><h3>持續優化</h3><p>用觀察與迭代讓體驗越來越好。</p></li>
      </ul>
    </section>
  </main>
  <script src="main.js" defer></script>
</body>
</html>

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂