網頁設計基本概念

01網頁的三大核心：HTML、CSS、JavaScript

想像一棟房子：HTML 是骨架與房間、CSS 是裝潢與外觀、JavaScript 是電器與開關。三者分工合作，缺一不可。

親手切換看看：同一份內容，加上不同的層

02基本常識：網站、網頁、首頁與網址

網址（URL）怎麼看？點點看每一段

從輸入網址到畫面出現，發生了什麼事？

下面是同一件事的文字版流程，可以對照模擬畫面閱讀：

03網站設計製作流程

從想法到上線，通常分成「規劃與設計」、「前端製作」、「後端與測試」、「上線與維護」四大階段。

04網頁命名原則（檔案、圖片、資料夾）

檔名取得不好，網站就可能在伺服器上「找不到檔案」。請養成一開始就取對名字的習慣。先試試下面的檢查器：

• 首頁的內定檔名是 index.html（動態網站則為 index.php 等），伺服器會自動判斷為首頁。
• 所有網頁檔案必須儲存在網站專屬資料夾內。資料夾請以學號命名；每個作業再依序以 hw01-學號 為資料夾名稱。
• 圖片請另開專屬資料夾（img 或 images），不要和網頁檔案混在一起。

hw01-123456789/
├── index.html        ← 首頁（檔名固定）
├── about.html
├── css/
│   └── style.css
└── img/
    ├── logo.png
    └── banner_01.jpg

05網站設計製作類型：你想怎麼做網站？

做網站不是只有「從零寫程式」一條路。依預算、時程與需求，常見有以下幾種方式。先用選擇器試試看你的條件適合哪一種：

延伸閱讀：7 大免費架設網站平台分析比較（舊文章，平台功能與收費請以官網為準）。

06網際網路與網域名稱

如何申請自己的網址？

網域名稱需要向網域註冊商購買，每年續約。.tw 由台灣網路資訊中心（TWNIC）管理，註冊商包含中華電信等；國際通用的 .com 等也可向 Cloudflare、Namecheap、GoDaddy 等註冊商申請。價格會依後綴與註冊商而異，請以官方網站公告為準。

07網域空間（主機）的認識

08常見瀏覽器

網頁都要透過瀏覽器呈現，而每個瀏覽器的「渲染引擎」不同，呈現可能有些許差異。身為網頁設計師，至少要用 Chrome、Safari（或 Firefox）各測試一次。

瀏覽器	說明
Google Chrome	Google 開發、全球市占最高。引擎 Blink。 優點：速度快、穩定、開發者工具強大、擴充套件豐富。缺點：記憶體消耗高，隱私收集常被討論。 下載 Chrome
Apple Safari	Apple 裝置內建，引擎 WebKit。優點：與 Apple 生態整合、省電、隱私保護強。限制：僅限 Apple 平台、擴充較少。iPhone 上的瀏覽器基本上都使用 WebKit，所以手機網頁務必用 Safari 測試。
Microsoft Edge	Windows 內建，與 Chrome 同樣使用 Blink，可使用多數 Chrome 擴充套件，內建 PDF 與 Microsoft 365 整合。
Firefox	Mozilla 開發的開源瀏覽器，引擎 Gecko。優點：隱私與安全功能完整、開發者工具（尤其 CSS Grid／Flexbox 檢查）很好用。市占較低，但仍是重要的交叉測試對象。 下載 Firefox

市占率怎麼查？

市占率每個月都在變動，教材不再放固定數字。請到 StatCounter Global Stats 查詢最新資料，並可切換「桌機／行動裝置」與「台灣」來觀察差異。近年的大趨勢是 Chrome 長期第一，而在手機端，Safari 因為 iPhone 的關係占比相當高。

09RWD 響應式網頁設計

響應式網頁設計（Responsive Web Design，簡稱 RWD）讓同一個網站在手機、平板、桌機等不同尺寸的螢幕，都能自動調整版面，維持好閱讀、好操作。

RWD 的現代做法

最重要的第一步，是在 <head> 加上 viewport 設定，否則手機會把網頁當成桌機版縮小顯示：

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  img { max-width: 100%; height: auto; }
  .cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
  }
</style>

拖拉看看：同一份網頁，在不同寬度怎麼重排

RWD 作品參考

10自我測驗與本單元重點

用 5 題確認自己是否理解，點選答案立即看解析。

本單元重點整理

• 網頁由 HTML（結構）、CSS（樣式）、JavaScript（行為）組成，本學期以 HTML＋CSS 為主。
• 輸入網址後，瀏覽器透過 DNS 找到伺服器，以 HTTPS 取得檔案並渲染成畫面。
• 網站製作流程：規劃設計 → 前端製作 → 後端與測試 → 上線維護；AI 與 Figma Dev Mode 能加速，但仍需自己檢查。
• 檔案命名只用半形英數、- 與 _，首頁固定 index.html，圖片放 img 資料夾。
• 每個網站都應該是 RWD，並在 Chrome、Safari、Firefox 做交叉測試。