從基礎建設web網頁-第一章

17th鐵人賽

413570464

2025-09-23 23:50:22

23 瀏覽

分享至

網頁架設

基本概念

HTML：網頁的內容（structure / 標記語言），像是文章的大骨架。
CSS：決定顏色、排版、版面。
JavaScript：處理按鈕、資料驗證等。
Prototype：在還沒做細節前做一個"樣品"，例如可互動的 HTML/CSS/JS。
本地伺服器：把檔案放到簡單伺服器上測試（避免某些跨域或 fetch 問題）。

HTML 基本骨架

把下面整個內容存為 index.html（或直接把片段貼到你的編輯器）：

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>範例：簡單響應式網頁</title>
  <style>

基本 CSS：reset + 版面 *

 </style>
</head>
<body>
 <header>
   <div class="brand">我的範例站</div>
   <nav>
     <button class="btn">首頁</button>
     <button class="btn">功能</button>
     <button class="btn">聯絡</button>
   </nav>
   <div>
     <button class="btn">登入</button>
     <button class="btn primary">註冊</button>
   </div>
 </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <div>
        <h1 id="hero-title">從基礎學會建立一個網頁</h1>

這是示範頁面：有標題、描述、以及右側的簡單互動表單。儲存為 index.html，然後用瀏覽器開啟就看得到效果。

        <div style="margin-top:14px">
          <button class="btn primary" id="demo-action">點我顯示提示</button>
        </div>
      </div>

      <aside class="card" aria-label="快速表單">
        <h3 style="margin-bottom:8px">快速聯絡</h3>
        <form id="contact-form">
          <label style="display:block;margin-bottom:6px">
            <span style="font-size:0.85rem">姓名</span><br />
            <input type="text" name="name" required style="width:100%;padding:8px;border-radius:6px;border:1px solid #ddd" />
          </label>
          <label style="display:block;margin:8px 0 12px">
            <span style="font-size:0.85rem">電子郵件</span><br />
            <input type="email" name="email" required style="width:100%;padding:8px;border-radius:6px;border:1px solid #ddd" />
          </label>
          <button class="btn primary" type="submit" style="width:100%">送出</button>
        </form>
        <div id="form-msg" style="margin-top:8px;font-size:0.9rem;color:#2b6cff;display:none"></div>
      </aside>
    </section>

    <section class="cards" aria-label="功能卡片">
      <div class="card"><h4>功能 A</h4><p style="color:#555;margin-top:6px">簡短描述 A。</p></div>
      <div class="card"><h4>功能 B</h4><p style="color:#555;margin-top:6px">簡短描述 B。</p></div>
      <div class="card"><h4>功能 C</h4><p style="color:#555;margin-top:6px">簡短描述 C。</p></div>
    </section>
  </main>

  <footer>

</footer>
<script>
  document.getElementById('demo-action').addEventListener('click', ()=>{
    alert('你按了示範按鈕！');
  });

簡單 JS：按鈕提示與表單提交模擬（不送到伺服器）

    document.getElementById('contact-form').addEventListener('submit', function(e){
      e.preventDefault();
      const form = e.currentTarget;
      const name = form.name.value.trim();
      const msgBox = document.getElementById('form-msg');
      msgBox.textContent = `感謝，${name}，我們已收到訊息（模擬）。`;
      msgBox.style.display = 'block';
      form.reset();
    });
  </script>
</body>
</html>

把整個檔案存為 index.html，直接用瀏覽器開啟就能看到（雙擊或 File > Open）。
但如果要避免某些「本機檔案」限制（例如 fetch），就會選擇啟動簡單伺服器。

在本機用簡單伺服器測試

在該 index.html 的資料夾打開終端機（Terminal / Powershell）：
用 python -m http.server 8000
然後瀏覽器打開 http://localhost:8000/

從假設 mock 進階到原型 workflows

線框 → 用紙畫出頁面大概位置（wireframe 工具）：Figma / Sketch / Adobe XD → 建置畫面與按鈕，但不需要寫 code。
高保真（interactive prototype）：在 Figma 加上互動或直接用 HTML/CSS/JS 做一個可點選的 demo（像上面範例）。
測試流程：先定義使用者要完成什麼使令，像是註冊帳號等，再把頁面拆成步驟並做可點擊連結或表單。

小技巧與常見做法

可重用的元件：把常見區塊（按鈕、卡片、表單）寫成 CSS class，未來方便複用。
開發工具：瀏覽器 DevTools（檢查元素、調整 CSS、模擬手機尺寸）。
響應式：使用彈性 grid 與 media queries 來適配不同螢幕。
無障礙性：使用正確的 semantic 標籤（nav main header footer）與 aria-* 屬性。
版本控制：把專案放到 Git（GitHub）方便回溯與部署。