歡迎來到網頁設計的世界！

你有沒有想過你最喜歡的網站是如何建構出來的呢？無論是在社交媒體上滑動資訊流，還是為專題作業搜尋資料，背後一定有人負責這些頁面的設計與開發。在這個章節中，我們將學習如何從使用者（網頁的瀏覽者）轉變為創作者（網頁的建構者）。

如果你還不是「科技天才」，也別擔心！建立網站就像玩樂高積木或畫地圖一樣，我們將會一步一步來完成。

1. UI 與 UX：網站的「外觀」與「感受」

在接觸任何程式碼之前，我們必須先了解網頁設計中最重要的兩個部分：使用者介面 (User Interface, UI) 與 使用者體驗 (User Experience, UX)。

什麼是使用者介面 (UI)？

你可以把 UI 想成網站的表層，也就是所有你看得到、觸碰得到的東西，包括按鈕、顏色、字體和圖片。
類比：如果網站是一輛汽車，UI 就是車身的顏色、方向盤的形狀以及座椅的皮革質感。

什麼是使用者體驗 (UX)？

UX 是指使用者在瀏覽網站時的感受。找「首頁」按鈕方便嗎？頁面載入速度快嗎？網站是用起來很困惑還是很直觀？
類比：如果網站是一輛汽車，UX 就是汽車開起來順不順手，以及踩踏板方不方便。

重點複習：

UI = 外觀（按鈕、顏色、排版）。
UX = 感受（易用性、速度、邏輯）。

核心觀念： 一個優秀的網站兩者缺一不可！一個設計精美（UI 好）但卻難以操作（UX 差）的網站，只會讓使用者感到挫折並選擇離開。

2. 建構要素：HTML 與 CSS

要打造網站，我們通常會使用兩種主要語言。你可以把這些語言想像成網頁的骨架與外衣。

HTML (超文本標記語言)

HTML 是網頁的結構。它會告訴電腦哪裡是標題、哪裡是段落、哪裡該放圖片。沒有 HTML，就不會有網站！

常見的 HTML 標籤：
- <h1>：主要的大標題。
- <p>：一段文字。
- <img>：顯示圖片的標籤。

CSS (階層式樣式表)

CSS 是網頁的樣式。它會告訴 HTML 該顯示什麼顏色、文字應該多大、以及東西要放在螢幕的哪個位置。CSS 讓「骨架」變得美觀。

記憶小撇步：HTML 代表 House（房屋的牆壁與地板）。CSS 代表 Curtains（窗簾，用來裝飾）。

你知道嗎？ 你可以隨時在任何網頁上按滑鼠右鍵，選擇「檢視網頁原始碼」，就能看到該網站的 HTML。雖然看起來可能很亂，但它其實只是一長串指令清單而已！

3. 網站規劃：線框圖 (Wireframes)

專業的設計師絕對不會一開始就寫程式，他們會先進行規劃。我們使用的工具叫做線框圖 (Wireframe)。

線框圖是一份簡單的草圖（通常只有黑白線條），用來標示網頁各個元素的位置。它就像是房屋的藍圖。

為什麼要畫線框圖？
1. 在浪費時間寫程式前，先確定好排版。
2. 方便向他人展示你的想法。
3. 讓你專注於易用性（按鈕放在哪裡），而不是糾結於顏色。

線框圖繪製步驟：
1. 畫一個矩形（代表螢幕）。
2. 用方框標示圖片的位置（通常在方框中畫一個「X」）。
3. 用線條代表文字區塊。
4. 在需要讓使用者點擊的地方畫上按鈕。

核心觀念： 先規劃，後編碼！一份好的線框圖可以幫你省下事後修正錯誤的數小時時間。

4. 網站導覽與結構

使用者如何從 A 頁面跳轉到 B 頁面？這就是所謂的導覽 (Navigation)。如果你的網站頁面很多，就需要一份網站地圖 (Site Map)。

網站地圖是一個圖表，顯示頁面之間是如何連結的。大多數網站使用階層式結構：

- 首頁（頂層）
- 分類頁（關於我們、產品、聯絡方式）
- 子頁面（各分類下的詳細內容）

常見錯誤： 不要把重要資訊藏得太深！使用者應該要在三次點擊以內找到他們需要的資訊，這通常被稱為「三次點擊法則」。

5. 為所有人設計（無障礙性）

在 MYP 設計課中，我們關心所有的使用者。無障礙性 (Accessibility) 的意思是確保身心障礙人士（例如色彩辨識能力較弱或操作滑鼠有困難的人）也能順利使用你的網站。

簡單的無障礙設計小撇步：
- 高對比度： 不要使用淺黃色的文字搭配白色背景，這樣會很難閱讀！
- 字體放大： 確保字體夠大，讓每個人都能看清楚。
- 替代文字 (Alt-Text)： 務必為圖片加上文字說明，這樣螢幕閱讀軟體才能向視障使用者描述圖片內容。

重點複習箱：

1. HTML = 結構。
2. CSS = 樣式。
3. 線框圖 = 規劃藍圖。
4. 導覽 = 使用者移動的路徑。
5. 無障礙性 = 確保人人皆可使用網站。

6. 總結：網頁設計流程

如果覺得資訊量太大也別擔心！只要記住應用在網站上的設計週期 (Design Cycle)：

1. 探究 (Inquiry)： 我的目標受眾是誰？他們需要什麼？
2. 發展 (Developing)： 繪製網站地圖並畫出線框圖。
3. 創造 (Creating)： 編寫 HTML 與 CSS 來建立網站。
4. 評估 (Evaluating)： 測試網站。連結有效嗎？使用起來順手嗎？

最後鼓勵： 你的第一個網站不完美是很正常的！即使是世界上最著名的網站，最初也只是簡單的想法。只要你持續練習用 HTML 和 CSS 與電腦「溝通」，這件事會變得越來越容易。