商用網站架設實務

LESSON-03 · starter

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

你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。

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

開始前確認

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

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

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

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

照這個順序做

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

TODO-1

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

目的

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

修改檔案

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

程式碼位置

site-navigation

現在要做：請在 index.html、services.html、about.html、contact.html 的「site-navigation」位置完成：在四個 HTML 都加入相同的主要導覽

貼上位置：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。

卡住時先看這裡

常見錯誤：只修改首頁，或把 services 拼成 service。

第一個檢查：先看四個檔案是否在同一個資料夾，再逐一比對 href。

TODO-2

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

目的

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

修改檔案

contact.html

程式碼位置

contact-form

現在要做：請在 contact.html 的「contact-form」位置完成：建立 form、姓名、Email 與需求欄位，並讓每個 label 對應 id

貼上位置：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 對照。

卡住時先看這裡

常見錯誤：把 input 放在 form 外，或只寫 name 沒有 id。

第一個檢查：先在 contact.html 搜尋 form、label、input 與 textarea 的巢狀位置。

TODO-3

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

目的

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

修改檔案

contact.html

程式碼位置

form-submit

現在要做：請在 contact.html 的「form-submit」位置完成：為三個欄位加入 required，並放入 type=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>

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

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

卡住時先看這裡

常見錯誤：把 required 寫在 label，或把 submit button 放到 form 外。

第一個檢查：先確認三個控制項都有 required，button 的 type 是 submit 且仍在 form 裡。

階段檔案

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

開啟 starter 的可執行入口

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>
    
  </header>
  <main>
    <h1>安心服務</h1>
    <!-- TODO-1：請在本頁加入共用導覽；四個 HTML 都要完成同一份 nav。 -->
<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>
    
  </header>
  <main>
    <h1>服務方案</h1>
    <!-- 導覽尚未完成：依 index.html 的第一個任務，在本頁加入同一份主要 nav。 -->
<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>
    
  </header>
  <main>
    <h1>關於商家</h1>
    <!-- 導覽尚未完成：依 index.html 的第一個任務，在本頁加入同一份主要 nav。 -->
<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>
    
  </header>
  <main>
    <h1>聯絡與諮詢</h1>
    <!-- 導覽尚未完成：依 index.html 的第一個任務，在本頁加入同一份主要 nav。 -->
<!-- TODO-2：請建立 contact form、三個欄位與 label／id 對應。 -->
<!-- TODO-3：請加入 required 與 type=submit，讓瀏覽器能驗證並送出表單。 -->
<p>完成欄位後，訪客可以留下諮詢需求。</p>
  </main>
</body>
</html>

完成驗收

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口