歡迎來到網站製作：創建網頁！

各位 IGCSE ICT 的同學大家好！
這一章節將帶領你從單純的軟件使用者轉變為網頁創作者。理解如何使用 HTML (超文本標記語言) 和 CSS (層疊樣式表) 來構建網頁，是 Paper 3 考試中至關重要的實用技能。
如果一開始看到代碼覺得有點眼花撩亂，不用擔心！我們會將網頁製作的過程拆解成簡單易懂的層次！

核心目標： 能夠自信地使用 HTML 標籤來構建內容，並運用 CSS 進行外觀格式化，確保你的網頁風格統一且符合受眾需求。

第一層：網頁結構的基礎 (21.1)

想像網頁就像建造房子。你需要分別規劃建築結構、室內設計以及智能家居功能。網站遵循相似的原則，使用 三個開發層次 來將不同的功能分開處理。

網頁開發的三個層次

理解為什麼要分離這些功能非常重要：這能讓網站更易於管理、編輯，並保持風格的一致性。

1. 內容層 (HTML)

用途： 用於輸入實際內容並創建網頁的 結構（骨架）。
控制內容： 文字、圖片、超連結、表格、列表和標題。
比喻：這就像教科書本身——包含了原始資訊和章節內容。

2. 呈現層 (CSS)

用途： 用於顯示和 格式化 網頁內的元素。
控制內容： 顏色、字體、大小、邊框、間距和佈局。
比喻：這就像圖形設計——教科書頁面的顏色、字體選擇和版面設計。

3. 行為層 (腳本語言)

用途： 使用腳本語言（如 JavaScript）來控制網頁內的元素。
控制內容： 互動功能、動畫、驗證表單輸入。
注意：你只需要知道此層的目的，無需編寫相關代碼。

快速複習：三個層次

1. HTML = 結構（它是什麼？）
2. CSS = 外觀（它看起來如何？）
3. 腳本 = 動作（它能做什麼？）


第二層：使用 HTML 創建網頁內容 (21.2)

HTML 定義了網頁的基本結構，主要分為兩個部分：Head（頭部）和 Body（主體）。

網頁的 `` 部分

Head 部分包含關於網頁本身的資訊（元數據/Metadata），這些內容通常不會在瀏覽器的主視窗中 顯示 給使用者看。

  • 網頁標題 (Page Title)： 非常重要。它定義了顯示在瀏覽器標籤頁或視窗框架上的標題。
  • 連結外部樣式表： 告訴 HTML 頁面到哪裡尋找對應的 CSS 文件以套用格式。這裡我們使用 相對路徑。
  • 元標籤 (Metatags)： 為瀏覽器和搜索引擎提供關鍵資訊。常見的關鍵元標籤包括：
    • charset： 定義字符編碼（通常為 UTF-8）。
    • description & keywords： 幫助搜索引擎理解網頁的主題。
    • author： 標明網頁的創作者。
    • viewport： 告訴瀏覽器如何根據不同裝置（如手機和平板）來縮放頁面。
  • 預設目標視窗： 設定超連結點擊後預設開啟的位置（例如：在同一視窗開啟）。

網頁的 `` 部分

這是所有可見內容存放的地方！

文字與結構標籤

HTML 為文字元素提供了預定義的標籤，用以定義其重要性和結構：

  • 標題： `h1`, `h2`, `h3`（H1 最重要，H3 重要性次之）。
  • 段落： `p`。
  • 列表： `li`（列表項目）。可以是 有序列表（數字）或 無序列表（項目符號）。
  • `
    ` 標籤： 一個非常常用的標籤，用作 容器 或分隔符來將元素分組，通常用於將樣式或類別（class）一次性套用到整個組別。
處理圖片、聲音和影片

插入多媒體對象可以讓頁面更生動，但必須使用正確的屬性：

  • 圖片： 必須設定正確的尺寸和長寬比。務必使用 替代文字 (alt text)。
    你知道嗎？替代文字對無障礙瀏覽（視障人士使用的螢幕閱讀器）和搜索引擎優化 (SEO) 至關重要。
  • 影片和聲音片段： 你需要指定是否顯示 播放控制欄（播放、暫停、音量），或者媒體是否應 自動播放。你可能還需要調整尺寸。
用於結構和數據的表格

表格對於顯示數據非常實用，在早期的網頁設計中，甚至常被用來控制網頁的整體版面佈局。

  • 表格使用 `` 作為整體容器，`` 表示 表格行，`
    ` 表示 表格標題 單元格，而 `` 則是 表格數據 單元格。
  • 合併單元格： 你必須能夠調整單元格以跨越行 (rowspan) 或列 (colspan)。
  • 尺寸設定： 你可以使用 像素 (px) 設定固定尺寸，或使用 百分比 (%) 設定響應式尺寸。
  • 樣式可以直接套用到整個表格或個別單元格。

    • 導覽：超連結與書籤

    超連結是讓互聯網成為「網」的連結。

    創建超連結：

    超連結可以從文字或圖片創建，連結目標包括：

    1. 同一頁面的書籤： 這涉及到連結到由 id 屬性 定義的 錨點 (anchor)（例如：<h3 id="top">）。
    2. 其他本地儲存的網頁： 必須使用 相對路徑（例如：<a href="about.htm">）。
    3. 使用網址 (URL) 的網站： 使用完整的網頁位址（例如：<a href="http://www.example.com">）。
    4. 發送郵件： 使用 mailto: 屬性來開啟使用者的電子郵件程式。
    在指定位置開啟 (目標)

    你可以使用 target 屬性來控制連結頁面的開啟方式：

    • 同一視窗 (`_self`)： 這是預設設定。
    • 新視窗 (`_blank`)： 在新標籤頁或新視窗中開啟連結。
    • 指定名稱的視窗： 用於較複雜的框架（frame）佈局（現在較少見）。
    相對路徑 vs. 絕對路徑 (關鍵概念)

    這是學生最容易犯錯的地方。

    絕對路徑 (Absolute Path)： 從伺服器根目錄開始的完整、固定位址（例如：C:/Documents/website/image.jpg）。
    相對路徑 (Relative Path)： *相對於* 當前頁面的路徑（例如：images/logo.png）。

    為什麼本地檔案要使用相對路徑： 如果你使用絕對路徑連結本地檔案（圖片、CSS、其他 HTML 頁面），當整個網站資料夾上傳到真正的網頁伺服器時，連結就會 失效。相對路徑能確保無論資料夾放在哪裡，連結結構都不會改變。

    HTML 關鍵要點：
    使用合適的標籤（h1, p, table）來構建內容。使用元標籤來定義頁面資訊。對於本地連結和圖片，務必使用 相對路徑。

    第三層：使用 CSS 為網頁添加樣式 (21.3)

    CSS (層疊樣式表) 管理 呈現層。它最大的優點是確保整個網站的 一致性。只要修改一個 CSS 檔案，所有連結到它的頁面都會同步更新。

    樣式的類型與層疊 (Cascading)

    樣式表之所以稱為「層疊」，是因為多種樣式可以套用到同一個元素上，系統會根據層次規則決定哪個樣式生效：

    • 外部樣式表： 一個獨立的 .css 檔案，連結到 HTML。這能讓 *所有* 連結的頁面統一呈現風格（為了保持一致性，這是優先級最高的方式）。
    • 內聯樣式屬性 (Inline Style)： 直接寫在 HTML 標籤內的樣式（例如：<p style="color: blue;">）。這會覆蓋該特定元素的外部樣式。

    優先級 很重要：內聯樣式通常會覆蓋外部樣式。

    樣式、類別 (Classes) 與元素

    我們需要方法來鎖定 HTML 結構的特定部分進行格式化。

    • 元素/標籤樣式 (通用樣式)： 直接套用到 HTML 標籤的樣式（例如：將 *所有* `h1` 標籤設為藍色）。
    • 類別 (Classes)： 自訂名稱，前方加上小數點（例如：.special_text）。你可以將類別套用到 多個元素，無論它們是什麼標籤類型（H1, P, DIV 等）。類別提供了設計上的彈性。
    • 樣式 vs. 類別： 樣式 通常指套用到標準元素（如 `p` 或 `h2`）的格式，而 類別 是你定義的一組可重複使用的自訂樣式集合（例如定義一組可重複使用的邊框樣式）。

    你需要掌握的關鍵 CSS 屬性

    為了確保視覺呈現的一致性，你必須能夠建立、修改及套用控制以下屬性的樣式與類別：

    1. 字體屬性
    • 字體系列 (Font Family)： 選擇字體（例如：Arial, Times New Roman）。分為 Serif（襯線體，有裝飾邊緣）和 Sans-serif（無襯線體，邊緣簡潔）。
    • 大小： 以像素 (px) 或點 (pt) 為單位。
    • 顏色： 設定文字顏色。
    • 文字增強： 包括 粗體、斜體 以及 對齊方式（左對齊、右對齊、置中、左右對齊）。
    2. 間距與佈局屬性
    • 段落間距： 設定段落 之前和之後 的空間。
    • 行距： 文字行與行之間的間距。
    • 縮排： 為段落或項目符號列表設定縮排。
    • 背景屬性： 設定背景顏色或插入背景圖片。
    3. 表格特定屬性

    這些樣式會影響 table、tr (行)、th (標題) 和 td (數據) 元素的視覺呈現：

    • 尺寸： 設定表格/單元格的寬度和高度。
    • 對齊： 水平對齊（左、右、中）和垂直對齊（頂部、中間、底部）。
    • 內邊距 (Padding)： 單元格 *內部*，即內容與邊框之間的空間。
    • 邊框： 控制邊框的 顏色、厚度，以及邊框是否 可見/隱藏 或 合併 (collapsed)（簡化為單一線條邊框）。
    4. 連接與儲存 CSS

    外部樣式表必須儲存為 層疊樣式表格式 (.css)。你也可以在樣式表文件中 加入註解（使用 /* 此處為註解 */）來解釋你的代碼，這對以後的維護非常有幫助。

    企業風格規範 (14.2)

    記住，你做的所有造型決定（字體、顏色、佈局）都應該遵循 企業風格規範 (Corporate House Style)。這是一套由公司制定的規則，確保其所有文件和數位內容（包括網站）看起來風格統一。

    目的： 維持專業形象，並強化公司在所有媒體上的品牌認同感。

    快速複習：CSS 檢查點

    1. CSS 處理呈現（看起來如何）。
    2. 外部樣式能確保全站的 一致性。
    3. 知道如何控制 字體、背景以及表格邊框/內邊距。
    4. 將 CSS 文件連結到 HTML 頁面時，務必使用 相對路徑。

    * thinka提供的內容由AI生成，可能並非總是準確或最新。請將其用作輔助資源，並與官方材料進行核實。

    立即實踐所學

    不要只看筆記——用無限量AI題目練習，即時獲得批改回饋。加入逾100,000名正在提升成績的學生。

    立即開始練習查看定價