商用網站架設實務

LESSON-03 · checkpoint

HTML 基礎：多頁面與聯絡表單

主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。

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

開始前確認

這一頁的結果：四個 HTML 頁面都可以開啟

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

會用到的檔案：index.html、services.html、about.html、contact.html

本堂焦點：用相對路徑與表單欄位完成多頁網站骨架

照這個順序做

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

CHECKPOINT-1

用 Network 證據定位 404，再依檔案樹修正檔名。

目的

用 Network 證據定位 404，再依檔案樹修正檔名。

修改檔案

index.html

程式碼位置

primary-action

現在要做：請在 index.html 的「primary-action」位置完成：修正故意寫錯的相對路徑 service.html

貼上位置：index.html：primary-action 區塊，先保留同一檔案的其他內容。

<a href="services.html">查看服務方案</a>

預期結果：先看見 service.html 的 404，修正後前往 services.html 並得到 200。

驗收證據：Network 先出現 service.html／404，再出現 services.html／200。

卡住時先看這裡

常見錯誤：只重新整理錯誤頁，沒有對照 href 與實際檔名。

第一個檢查：先查看 Network 的完整 URL，再回到 index.html 比對 href 與檔案樹。

階段檔案

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

開啟 checkpoint 的可執行入口

index.html首頁：提供品牌介紹與前往 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>
</head>
<body>
  <header>
    <a 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>
    <h1>安心服務</h1>
    <!-- CHECKPOINT-1：主要行動連結故意指向不存在的 service.html，請用 Network 找到 404。 -->
<section>
  <h2>首頁介紹</h2>
  <p>先讓訪客知道這是一個提供到府服務的商家。</p>
</section>
<p id="primary-action"><a href="service.html">查看服務方案</a></p>
  </main>
</body>
</html>
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>
</head>
<body>
  <header>
    <a 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>
    <h1>服務方案</h1>
    <section>
  <h2>服務內容</h2>
  <p>這一頁說明商家提供的服務。</p>
</section>
  </main>
</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>
</head>
<body>
  <header>
    <a 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>
    <h1>關於商家</h1>
    <section>
  <h2>關於商家</h2>
  <p>這一頁說明商家的服務方式。</p>
</section>
  </main>
</body>
</html>
contact.html聯絡頁：提供三個有 label 對應的表單欄位與原生驗證。

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

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>聯絡｜安心服務</title>
</head>
<body>
  <header>
    <a 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>
    <h1>聯絡與諮詢</h1>
    <h2>留下諮詢需求</h2>
<form id="contact-form" action="contact.html" method="get">
  <label for="name">姓名</label>
  <input id="name" name="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="message">需求</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">送出諮詢</button>
</form>
  </main>
</body>
</html>

完成驗收

下一步

Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。

前往 Solution，逐檔對照差異