商用網站架設實務

LESSON-03 · solution

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

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

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

開始前確認

這一頁的結果：四個 HTML 頁面與相對路徑都可運作；contact.html 有一個完整表單與三個欄位；沒有 TODO、CHECKPOINT 或教材專用資源路徑

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

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

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

照這個順序做

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

差異 1

讓每一頁都能用同一組相對路徑回到其他頁面。

目的

讓每一頁都能用同一組相對路徑回到其他頁面。

修改檔案

index.html、services.html、about.html、contact.html

程式碼位置

site-navigation

現在要做：先對照差異，再檢查 在 index.html、services.html、about.html、contact.html 的「site-navigation」對照這項變更：<nav aria-label="主要導覽"> <a href="index.html">首頁</a> <a href="services.html">服務</a> <a href="about.html">關於</a> <a href="contact.html">聯絡</a> </nav>

貼上位置：index.html、services.html、about.html、contact.html 的 site-navigation 區塊

<nav aria-label="主要導覽">
  <a href="index.html">首頁</a>
  <a href="services.html">服務</a>
  <a href="about.html">關於</a>
  <a href="contact.html">聯絡</a>
</nav>

預期結果：四個頁面可以互相找到，停用 JavaScript 也能導覽。

驗收證據：逐一從四個頁面點擊導覽，記錄四個 URL 與 Network 的 200。

卡住時先看這裡

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

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

差異 2

把聯絡頁的輸入範圍與三個欄位責任先建立起來。

目的

把聯絡頁的輸入範圍與三個欄位責任先建立起來。

修改檔案

contact.html

程式碼位置

contact-form

現在要做：先對照差異，再檢查 在 contact.html 的「contact-form」對照這項變更：<form id="contact-form" action="contact.html" method="get"> <label for="name">姓名</label> <input id="name" name="name"> <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="message">需求</label> <textarea id="message" name="message"></textarea> </form>

貼上位置：contact.html 的 contact-form 區塊

<form id="contact-form" action="contact.html" method="get">
  <label for="name">姓名</label>
  <input id="name" name="name">

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

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

預期結果：Elements 看到一個 form、三組 label／控制項，點擊文字會把焦點移到正確欄位。

驗收證據：Elements 的 form 巢狀關係、Tab 順序與三組 for/id 對照。

卡住時先看這裡

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

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

差異 3

讓瀏覽器能進行最小原生驗證，並讓 name 欄位在 GET URL 中留下證據。

目的

讓瀏覽器能進行最小原生驗證，並讓 name 欄位在 GET URL 中留下證據。

修改檔案

contact.html

程式碼位置

form-submit

現在要做：先對照差異，再檢查 在 contact.html 的「form-submit」對照這項變更：<input id="name" name="name" required> <input id="email" name="email" type="email" required> <textarea id="message" name="message" required></textarea> <button type="submit">送出諮詢</button>

貼上位置：contact.html 的 form-submit 區塊

<input id="name" name="name" required>
<input id="email" name="email" type="email" required>
<textarea id="message" name="message" required></textarea>
<button type="submit">送出諮詢</button>

預期結果：空白送出會被瀏覽器阻止；填寫完成後可送出並在網址列看到 name、email、message。

驗收證據：原生驗證提示、button 位於 form 內，以及送出後 URL 的 query string。

卡住時先看這裡

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

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

差異 4

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

目的

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

修改檔案

index.html

程式碼位置

primary-action

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

貼上位置：index.html 的 primary-action 區塊

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

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

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

卡住時先看這裡

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

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

階段檔案

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

開啟 solution 的可執行入口

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>
    <section>
  <h2>首頁介紹</h2>
  <p>先讓訪客知道這是一個提供到府服務的商家。</p>
</section>
<p id="primary-action"><a href="services.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>

完成驗收

下一步

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

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