2026年10月14日星期三

從資料夾到網站：HTML、CSS、JavaScript 與 Python 網頁伺服器

網站製作入門・從零開始

從資料夾到網站：HTML、CSS、JavaScript 與 Python 網頁伺服器

想做一個自己的網頁，不需要一開始就架設正式主機。先建立網站資料夾、製作首頁，再用 Python 內建的簡易 HTTP Server，就能在自己的電腦上預覽網站。

一、先認識網站資料夾與目錄

網站通常由多個檔案組成，例如網頁、樣式表、圖片和程式。把它們放在同一個專案資料夾，再依用途建立子資料夾，可以讓檔案容易管理。資料夾在命令列中也常稱為「目錄」。

website_demo/
├── index.html       ← 網站首頁
├── css/
│   └── style.css    ← 網頁樣式
├── js/
│   └── main.js      ← 互動程式
└── images/
    └── banner.jpg   ← 圖片

範例先把所有內容放在 website_demo，只建立 index.html 也能開始。日後內容變多，再將 CSS、JavaScript 和圖片分別整理到子目錄。

二、首頁為什麼常叫 index.html？

index.html 是常見的預設首頁檔名。當伺服器收到某個目錄的請求，例如瀏覽器開啟網站根網址時，通常會優先尋找該目錄中的 index.html，因此不必在網址後面輸入檔名。

「首頁」是網站入口頁面的角色；index.html 則是大家常用來命名這個檔案的名稱。若改成 hello.html，瀏覽器就要用完整路徑開啟該檔案。

三、HTML、CSS、JavaScript 各自負責什麼？

技術	主要工作	可以想成
HTML	安排標題、段落、圖片、連結等內容結構	房子的結構與房間配置
CSS	設定顏色、字型、間距、版面與響應式呈現	室內裝潢與外觀
JavaScript	處理按鈕、表單、選單等互動行為	讓設備動起來的控制系統

三者可以寫在同一個 HTML 檔案，也可以拆成不同檔案。初學時可以先在 HTML 裡寫少量 CSS；網站長大後，再分檔管理，閱讀與維護會更清楚。

四、操作步驟：建立並編輯首頁

在電腦中建立一個資料夾，例如 website_demo。
開啟 Notepad++，選擇「檔案」→「新增」。
輸入以下 HTML 範例。
選擇「檔案」→「另存新檔」，存入 website_demo，檔名輸入 index.html。確認副檔名是 .html，不要存成 index.html.txt。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一個網站</title>
  <style>
    body {
      font-family: "Microsoft JhengHei", sans-serif;
      max-width: 720px;
      margin: 4rem auto;
      padding: 0 1.25rem;
      color: #24352f;
      background: #f4f8f5;
    }
    h1 { color: #176b52; }
    button { padding: .6rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>你好，網站！</h1>
  <p>這是我的第一個 HTML 網頁。</p>
  <button id="helloButton">按我看看</button>
  <p id="message"></p>

  <script>
    document.getElementById("helloButton").addEventListener("click", function () {
      document.getElementById("message").textContent = "JavaScript 讓網頁可以互動！";
    });
  </script>
</body>
</html>

這個範例以 HTML 建立標題、段落與按鈕；<style> 裡的 CSS 負責外觀；<script> 裡的 JavaScript 則在按鈕被點擊時改變文字。

五、在命令提示字元切換目錄

按下 Windows 鍵，輸入 cmd 並開啟「命令提示字元」。使用 cd（change directory）切換目前所在目錄。

cd /d "C:\Users\你的帳號\Documents\website_demo"

請把範例路徑換成自己資料夾的實際位置。Windows 下若目錄在不同磁碟，使用 /d 也會一併切換磁碟。路徑中有空格時，請保留雙引號。

切換後可輸入 dir 查看檔案清單，確認目前目錄內有 index.html。

六、啟動 Python 網頁伺服器：解讀指令

在網站目錄中執行：

python -m http.server 8000

指令部分	意思
`python`	啟動 Python 解譯器。
`-m`	要求 Python 以模組方式執行指定模組。
`http.server`	Python 內建的簡易 HTTP 伺服器模組，用來提供目前目錄中的檔案。
`8000`	伺服器使用的埠號；瀏覽器會透過這個埠連線。

成功啟動時，命令提示字元會顯示類似 Serving HTTP on ... port 8000 的訊息。伺服器啟動期間，這個視窗要保持開啟。

找不到 python 指令時：Windows 有些環境需要使用 py -m http.server 8000。若 8000 埠已被其他程式使用，可以改用其他埠號，例如 python -m http.server 8080，並在瀏覽器改開 8080。

七、用瀏覽器測試網站

保持命令提示字元中的伺服器執行。
開啟 Chrome、Edge 或其他瀏覽器。
在網址列輸入 http://localhost:8000，或 http://127.0.0.1:8000，按 Enter。
確認畫面出現「你好，網站！」，再按一下按鈕，檢查 JavaScript 互動是否正常。
修改並儲存 index.html 後，回到瀏覽器重新整理，即可檢視更新結果。

網址中的 localhost 代表目前這台電腦；8000 是伺服器埠號。Python 的簡易伺服器適合本機練習與預覽，並不是完整的正式網站部署方案。

八、停止伺服器與常見檢查

要停止伺服器時，切回命令提示字元視窗，按 Ctrl + C。
若瀏覽器顯示目錄清單或找不到首頁，確認檔名是 index.html，而且命令列目前所在目錄正確。
若瀏覽器無法連線，確認伺服器仍在執行、網址埠號與指令一致，並檢查是否有其他程式占用該埠。
若中文文字亂碼，確認 HTML 的 <head> 中有 <meta charset="utf-8">，並以 UTF-8 編碼儲存檔案。

完成以上步驟後，你已經建立一個由 HTML、CSS 和 JavaScript 組成，並透過 Python 本機伺服器開啟的入門網站。接著可以加入圖片、導覽列、多個網頁，再逐步整理 CSS 與 JavaScript 檔案。

智慧生活科技專業社群

2026年10月14日星期三