歡迎來到網頁編寫的世界：網頁開發的三個層次！
各位 IGCSE 的同學大家好！網頁編寫聽起來可能很複雜，但其實製作一個網站就跟做其他事情一樣——你需要計劃、結構，以及裝飾！
這一章節將會把網站拆解成三個簡單的部分，即三個層次（Layers）。理解這三個層次，是掌握現代專業網頁如何建構與維護的關鍵。
如果剛開始覺得有點抽象也不用擔心，我們會用一個超棒的比喻，讓你一聽就懂！
理解層次：蛋糕比喻法
想像你正在製作一個華麗的生日蛋糕。網頁開發的三個層次就像蛋糕的三個部分：
- 第一層（蛋糕主體）： 這是基礎的蛋糕胚和餡料。它提供了結構（Structure）。沒有它，你就什麼都沒有。
- 第二層（糖霜與裝飾）： 這決定了外觀（Appearance）——顏色、花朵的形狀，以及漂亮的文字書寫。
- 第三層（驚喜機關）： 想像這是一個「驚喜」蛋糕，當你切開它時會播放音樂。這就是互動性（Interactivity），也就是蛋糕所執行的「動作」。
網站的結構也是一樣的：內容（Content）、呈現（Presentation）與行為（Behaviour）。
第一層：內容層（結構即一切）
內容層（Content Layer）是任何網頁的基礎。它負責承載原始資訊，並定義這些資訊的邏輯結構。
目的與功能
內容層的主要工作是：
1. 輸入內容（文字、圖片、連結），讓用戶能夠看到。
2. 建立網頁結構，告訴瀏覽器哪些部分是標題，哪些是段落，以及表格或列表應該放在哪裡。
內容層所使用的主要語言是 HTML (超文本標記語言)。
HTML 如何建立結構
HTML 使用「標籤」（tags）來標記內容，賦予其意義。把它想像成給箱子貼標籤：
- <h1>：這個標籤告訴瀏覽器：「這是最重要的標題。」
- <p>：這個標籤說：「這是一個標準的文字段落。」
- <table>：這個標籤定義了結構化資料（行與列）放置的位置。
你知道嗎？HTML 本身非常樸素。如果你只用內容層來查看網頁，它看起來就只是白底黑字，順著螢幕一直流下來而已！
快速回顧：內容層
- 關鍵角色： 結構與原始數據。
- 關鍵工具： HTML。
- 比喻： 蛋糕的食材與形狀。
第二層：呈現層（讓它看起來很美）
如果內容層提供了結構，那麼呈現層（Presentation Layer）提供的就是風格。這一層處理所有與內容如何「呈現」給用戶相關的細節。
目的與功能
呈現層的主要工作是：
1. 顯示並格式化網頁內的元素。
2. 控制佈局、顏色、字型、間距與定位。
呈現層所使用的主要語言是 CSS (串接樣式表)。
關注點分離 (Separation of Concerns)
現代網頁開發的一個核心概念是將內容（HTML）與呈現（CSS）分離。
為什麼這很重要？
- 一致性： 你可以使用同一個 CSS 檔案來格式化數百個 HTML 頁面，確保整個網站擁有統一的視覺風格（即企業形象設計標準）。
- 更易於維護： 如果你的老闆決定企業色要從藍色改成綠色，你只需要編輯一個 CSS 檔案，而不需要去修改每一個 HTML 頁面。
- 無障礙性： 它允許內容在不同設備（如智慧型手機）上輕鬆重新排列或調整大小，而不必更換核心的 HTML 結構。
記憶小撇步： 把 CSS 中的 C 想成 Colour（顏色）和 Cool designs（酷炫設計）！
快速回顧：呈現層
- 關鍵角色： 格式化、外觀與佈局。
- 關鍵工具： CSS。
- 比喻： 蛋糕上的糖霜、顏色與裝飾。
第三層：行為層（增加動作與控制）
前兩層為你提供了一個結構清晰、外觀漂亮的靜態頁面。行為層（Behaviour Layer）則通過增加互動性，讓頁面變得活靈活現。
目的與功能
行為層的主要工作是：
1. 使用程式語言（Scripting language）來控制網頁內的元素。
2. 處理事件並使頁面具有動態效果（意味著頁面無需重新載入即可變更）。
行為層最常用的語言是 JavaScript（雖然課綱廣義地稱為「程式語言」）。
什麼是「控制元素」？
控制元素涉及根據用戶的輸入或時間執行動作。例如：
- 在提交前檢查用戶是否正確填寫了表單（表單驗證）。
- 當滑鼠移過圖片時讓圖片產生變化。
- 顯示彈出視窗或提示訊息。
- 在網上購物籃中動態計算商品價格。
- 顯示旋轉橫幅或幻燈片。
如果一個網站需要「做」些什麼——例如反應、計算、驗證，或在頁面載入後變更內容——這就是行為層的工作。
IGCSE 重要提示： 雖然我們知道 JavaScript 是常用的程式語言，但你只需要理解該層的「功能」：它使用程式語言來控制元素並提供動態的行為。在這份考卷中，你不需要親自撰寫複雜的程式碼。
快速回顧：行為層
- 關鍵角色： 互動性、動態內容與控制。
- 關鍵工具： 程式語言（例如 JavaScript）。
- 比喻： 讓蛋糕播放音樂或吹熄蠟燭的機關。
總結：整合三個層次
網頁開發的三個層次協調運作，共同構建出一個完整的網站。它們完全獨立，卻又缺一不可。
快速檢查表
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
層次 | 主要角色 | 使用語言
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
內容 (Content) | 結構與原始資訊 | HTML
呈現 (Presentation) | 顯示、格式化與風格 | CSS
行為 (Behaviour) | 控制與互動性 | 程式語言 (例如 JavaScript)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
通過這種關注點分離，我們確保了網站在當今各種設備上都能高效、易於維護且具備靈活性。
做得很棒！你現在已經了解構成你所瀏覽的每個網站的基本組件了。