商用網站架設實務

LESSON-24 · solution

頁面開發：首頁與共用網站外框

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

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

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

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

本堂焦點：建立多頁網站共用外框與首頁入口

照這個順序做

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

差異 1

先讓多頁網站有一致入口。

目的

先讓多頁網站有一致入口。

修改檔案

index.html

程式碼位置

shared navigation

現在要做：先對照差異，再檢查 在 index.html 的「shared navigation」對照這項變更：<header class="site-header"><a href="index.html">安心維護</a><nav><a href="services.html">服務</a><a href="about.html">關於</a><a href="contact.html">聯絡</a></nav></header>

貼上位置：index.html 的 shared navigation 區塊

<header class="site-header"><a href="index.html">安心維護</a><nav><a href="services.html">服務</a><a href="about.html">關於</a><a href="contact.html">聯絡</a></nav></header>

預期結果：首頁可前往四頁且導覽責任一致。

驗收證據：四個 href、網址列與首頁 h1。

卡住時先看這裡

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

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

差異 2

讓不同頁面共用同一個外框責任。

目的

讓不同頁面共用同一個外框責任。

修改檔案

style.css

程式碼位置

.page-shell

現在要做：先對照差異，再檢查 在 style.css 的「.page-shell」對照這項變更：.page-shell { width: min(100% - 2rem, 760px); margin-inline: auto; padding: 2rem 0; } .site-header { display: flex; justify-content: space-between; gap: 1rem; }

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

.page-shell { width: min(100% - 2rem, 760px); margin-inline: auto; padding: 2rem 0; }
.site-header { display: flex; justify-content: space-between; gap: 1rem; }

預期結果：四頁內容左邊界與寬度一致。

驗收證據：分別開四頁比較容器與 Computed width。

卡住時先看這裡

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

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

差異 3

確認共用外框不是只在首頁有效。

目的

確認共用外框不是只在首頁有效。

修改檔案

main.js

程式碼位置

lesson-behavior-slot

現在要做：先對照差異，再檢查 在 main.js 的「lesson-behavior-slot」對照這項變更：status.textContent = "home shell：四頁導覽與共用外框已驗證"; console.log("home shell：四頁導覽與共用外框已驗證");

貼上位置：main.js 的 lesson-behavior-slot 區塊

status.textContent = "home shell：四頁導覽與共用外框已驗證";
console.log("home shell：四頁導覽與共用外框已驗證");

預期結果：Console 顯示四頁 shell 驗收完成。

驗收證據：四頁 URL、共用 CSS Network 與 Console。

卡住時先看這裡

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

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

差異 4

讓首頁主要導覽能到達表單入口。

目的

讓首頁主要導覽能到達表單入口。

修改檔案

index.html

程式碼位置

contact link

現在要做：先對照差異，再檢查 在 index.html 的「contact link」對照這項變更：<a href="contact.html">聯絡</a>

貼上位置：index.html 的 contact link 區塊

<a href="contact.html">聯絡</a>

預期結果：點擊聯絡後開啟 contact.html，沒有 404。

驗收證據：網址列、Network 與 contact 頁 h1。

卡住時先看這裡

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

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

階段檔案

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

開啟 solution 的可執行入口

index.html入口檔案：從這份 HTML 開始觀察本堂主題結果。

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

​
<!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="../../../assets/favicon.svg" 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> <a href="services.html">服務</a> <a href="about.html">關於</a> <a href="contact.html">聯絡</a></nav></header>
<main class="page-shell">
<p class="eyebrow">LESSON-24 · 建立多頁網站共用外框與首頁入口</p>
<h1>頁面開發：首頁與共用網站外框</h1>
<p class="page-description">建立多頁網站共用外框與首頁入口</p>
<header class="site-header"><a href="index.html">安心維護</a><nav><a href="services.html">服務</a><a href="about.html">關於</a><a href="contact.html">聯絡</a></nav></header>
<a href="contact.html">聯絡</a>
<section class="result-card" aria-labelledby="result-title">
<h2 id="result-title">本堂可觀察結果</h2>
<p id="baseline-status" role="status">尚未操作，請依微步驟完成本堂練習。</p>
<button id="baseline-action" type="button">執行本堂操作</button>
</section>
</main>
<script src="main.js" defer></script>
</body>
</html>
style.css呈現層：只放本堂實作需要觀察的 CSS 規則。

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

​
: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; }
.site-header { width: min(100% - 2rem, 920px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .7rem; }
.site-header a { color: #155e75; }
.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; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
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 #f1ab2c; outline-offset: 3px; }
.status { min-height: 2rem; color: #17643d; }
.page-shell { width: min(100% - 2rem, 760px); margin-inline: auto; padding: 2rem 0; }
.site-header { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }
main.js行為層：處理本堂操作、狀態與 Console 驗收訊息。

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

​
const status = document.querySelector("#status, #baseline-status");
const action = document.querySelector("#action, #baseline-action");
function showResult() {
  if (status) status.textContent = "建立多頁網站共用外框與首頁入口：先完成入口操作，再逐步驗收。";
  console.log("LESSON-24：入口已執行");
}
status.textContent = "home shell：四頁導覽與共用外框已驗證";
console.log("home shell：四頁導覽與共用外框已驗證");
if (action) action.addEventListener("click", showResult);
services.html服務頁：集中說明服務內容與方案比較。

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

​
<!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="../../../assets/favicon.svg" 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> <a href="services.html">服務</a> <a href="about.html">關於</a> <a href="contact.html">聯絡</a></nav></header>
<main class="page-shell">
<p class="eyebrow">LESSON-24 · 建立多頁網站共用外框與首頁入口</p>
<h1>服務方案</h1>
<p class="page-description">建立多頁網站共用外框與首頁入口</p>
<!-- lesson-slot -->
<section class="service-grid"><article class="service-card"><h2>到府諮詢</h2><p>先釐清訪客需求。</p></article><article class="service-card"><h2>定期維護</h2><p>建立穩定的服務節奏。</p></article></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
about.html關於頁：說明商家背景與服務方式。

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

​
<!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="../../../assets/favicon.svg" 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> <a href="services.html">服務</a> <a href="about.html">關於</a> <a href="contact.html">聯絡</a></nav></header>
<main class="page-shell">
<p class="eyebrow">LESSON-24 · 建立多頁網站共用外框與首頁入口</p>
<h1>關於商家</h1>
<p class="page-description">建立多頁網站共用外框與首頁入口</p>
<!-- lesson-slot -->
<section><h2>我們如何協助</h2><p>先理解現場，再提出可執行的服務方案。</p></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
contact.html聯絡頁：提供表單欄位與狀態流程。

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

​
<!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="../../../assets/favicon.svg" 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> <a href="services.html">服務</a> <a href="about.html">關於</a> <a href="contact.html">聯絡</a></nav></header>
<main class="page-shell">
<p class="eyebrow">LESSON-24 · 建立多頁網站共用外框與首頁入口</p>
<h1>聯絡與諮詢</h1>
<p class="page-description">建立多頁網站共用外框與首頁入口</p>
<!-- lesson-slot -->
<form id="contact-form"><label for="name">姓名</label><input id="name" name="name" required><label for="email">Email</label><input id="email" name="email" type="email" required><button id="action" type="submit">送出諮詢</button><p id="status" role="status">尚未送出</p></form>
</main>
<script src="main.js" defer></script>
</body>
</html>

完成驗收

下一步

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

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