網頁專題製作
進階多頁網站：先畫地圖（index/about/gallery），資料夾分 css/ images/；每頁同一組 nav 連結，相對路徑連頁和圖。無障礙檢查 alt、標題級數、對比；SEO 每頁獨有 title 加 meta description。
- 動工先畫網站地圖：有哪幾頁、怎樣互連；index.html 是慣例主頁。
- 資料夾分家：css/ 放樣式、images/ 放圖，網站大了都不亂。
- 每頁同一組 nav 連結、同一份 CSS — 一致就是專業。
文體小知識：專案指南課由企劃到評估逐步帶你完成整個製作，適合接著做小組功課和比賽作品。
§課文原文 Passage
1真正的網站不止一頁。動工前先畫網站地圖：主頁 index.html、關於 about.html、相簿 gallery.html — index.html 是慣例的門面，訪客輸入網址時瀏覽器自動開它。檔案用資料夾管理：css/ 放樣式檔、images/ 放圖片，網站一大也不會亂。
2多頁網站的靈魂是導覽列（Navigation）：每一頁的 ＜nav＞ 都放同一組連結，訪客任何位置都可以去任何頁。連結用相對路徑：同一層寫 ＜a href="about.html">，圖片寫 ＜img src="images/p1.jpg"> — 路徑寫錯一個字母，圖片就變交叉。每頁共用同一份 css/style.css，網站才有統一外觀。
3圖文排版有現成的搭配：＜figure＞ 包住 ＜img＞，再用 ＜figcaption＞ 給圖片一個說明 — 圖和說明永遠在一起。版面一致的 header 和 footer 令網站看起來專業；主要內容放在 ＜main＞ 內，結構一目了然。
4完成前做兩項檢查。無障礙（Accessibility）：所有圖有 alt、標題由 h1 順級落 h2 不跳級、文字與底色對比夠強 — 視障用戶的螢幕閱讀器才能讀得通。搜尋引擎最佳化（SEO）初步：每頁 ＜title＞ 寫清楚而且各頁不同，加 ＜meta name="description" content="一句話簡介">，標題用回應內容的關鍵字 — 搜尋引擎才會把你的網頁推給搜「校園植物」的人。
1重點摘要 Summary
多頁網站：先畫地圖（index/about/gallery），資料夾分 css/ images/；每頁同一組 nav 連結，相對路徑連頁和圖。無障礙檢查 alt、標題級數、對比；SEO 每頁獨有 title 加 meta description。
2生字卡 Vocabulary
動工前畫好的頁面清單和連接關係，決定網站有哪幾頁、怎樣互連。
網站的預設門面：訪客打開目錄時瀏覽器自動載入的檔案。
每頁都有的連結選單（通常在 nav 標籤內），令訪客可以到達任何一頁。
以目前檔案位置為基準的路徑，例如同層的 about.html、子資料夾的 images/p1.jpg。
figure 包住圖片，figcaption 寫說明文字，令圖和說明綁在一起。
各頁共用的 header、nav、footer 和樣式，令網站看起來專業統一。
令視障等不同需要的用戶都能使用的設計：alt 說明、標題順級、足夠色彩對比。
令網頁更容易被搜尋引擎理解和推薦的做法：清楚標題、meta description、關鍵字。
head 內的一句網頁簡介，搜尋結果列表常常直接顯示它。
3逐步講解 Steps
- 畫網站地圖真正的網站不止一頁，動工之前先畫網站地圖：每頁一個檔案、一句話寫明內容。例如三頁方案：index.html（主頁：簡介與重點推介）、about.html（關於：班別介紹）、gallery.html（相簿：活動照片）。index.html 是慣例的網站門面，訪客輸入網址時瀏覽器自動開啟它。地圖畫在紙上只需五分鐘，卻能防止日後頁面職能重疊、連結混亂，令整個專案方向清晰，是低成本高效益的一步。
- 建立資料夾結構檔案用資料夾分門別類：my-site/ 之內放三個 HTML 檔，再開 css/ 資料夾放 style.css，images/ 資料夾放所有照片。日後找檔案一目了然，網站擴充也不會混亂。路徑書寫規則：同一層直接寫檔名 about.html；入子資料夾寫 images/sports.jpg。路徑錯一個字母，圖片便顯示為交叉方框，這是新手最常見的問題；養成「先建資料夾、再存檔案」的順序，可避免大半路徑錯誤。
- 統一導覽列多頁網站的靈魂是導覽列：每一頁的 body 頂部都放同一組連結 ＜nav＞＜a href='index.html'＞主頁＜/a＞｜＜a href='about.html'＞關於＜/a＞｜＜a href='gallery.html'＞相簿＜/a＞＜/nav＞，訪客在任何一頁都能去任何地方。製作時寫好一頁之後複製到其餘各頁，確保一字不差；任何一頁改了連結，其餘各頁也要同步修改。當前頁可加 class='active' 再以 CSS 標色，提示訪客身在何處。
- 共用樣式表每頁的 head 內寫 ＜link rel='stylesheet' href='css/style.css'＞，三頁共用同一份 CSS。好處立現：想全站更換主色，只改 style.css 一處，三頁同步更新；字體、行距、卡片樣式全站一致，網站才有「同一個網站」的觀感。反例是每頁各寫各的樣式，改一次主色要改三個檔案，日後必有一頁被遺漏，網站漸漸變得五顏六色。共用樣式表是網站一致性的技術基礎。
- 圖文排版相簿頁的圖文排版用 figure 組合：＜figure＞＜img src='images/sports.jpg' alt='陸運會4x100接力'＞＜figcaption＞圖一：陸運會接力賽＜/figcaption＞＜/figure＞。figure 把圖片與說明綁成一組，兩者永不分離；figcaption 是圖片的說明文字。每張圖必須有 alt，內容具體描述圖片而非只寫「照片」二字；說明文字則補充背景，例如活動名稱與日期。多張圖逐一排列，配合 CSS 統一闊度，版面即顯整齊。
- 無障礙檢查完工之前逐頁做無障礙檢查：每個 img 是否都有 alt？標題是否由 h1 到 h2、h3 順級而下，沒有跳級？文字與背景色的對比是否足夠，例如白底上的淺灰字對視障讀者太淺？連結文字是否自明其義，避免「按這裡」而應寫「查看相簿」？全部達標，螢幕閱讀器才能把整頁讀通。無障礙不是附加題：它令網站服務所有讀者，亦是評分標準的常設項目。
- SEO 初步設定搜尋引擎最佳化（SEO）的初步設定：每頁的 ＜title＞ 寫清楚而且各頁不同，例如 ＜title＞3A班網站：校園植物專題＜/title＞；head 內加 ＜meta name='description' content='3A班記錄校園30種植物的觀察筆記與照片'＞，這句簡介會顯示在搜尋結果之中；標題與內容使用訪客會搜尋的關鍵字，例如「校園植物」。搜尋引擎據此理解並收錄網頁，別人搜尋「校園植物」時才有機會找到你的專題。
4圖解 Diagrams
5例題示範 Example
例題：為「3A班校園植物網」寫出主頁 index.html 的完整骨架，包含 title、meta description、導覽列、h1、一段簡介和一張有說明的圖。
- 骨架與 SEO：＜!DOCTYPE html＞ ＜html＞ ＜head＞ 之內 ＜title>3A班校園植物網＜/title＞ ＜meta name="description" content="3A班記錄校園植物的觀察筆記"> ＜/head＞。
- 導覽列：body 開頭 ＜nav>＜a href="index.html">主頁＜/a＞｜＜a href="gallery.html">相簿＜/a＞＜/nav＞ — 與其他頁完全一致。
- 主內容：＜main＞ 之內 ＜h1>歡迎來到3A班植物網＜/h1＞ ＜p>我們用一個學期觀察了校園30種植物。＜/p＞。
- 有說明的圖：＜figure＞＜img src="images/banyan.jpg" alt="校園細葉榕">＜figcaption>圖一：操場旁的細葉榕＜/figcaption＞＜/figure＞，最後補 ＜/main＞ ＜/body＞ ＜/html＞。
- 答案：主頁骨架 = SEO 頭（title + meta description）＋ 一致導覽列 ＋ main 內 h1、簡介段 ＋ figure 圖文 — 存為 index.html 即成網站門面。
6常見錯誤 Mistakes
75 題快測 Quick check
Q1訪客輸入網站網址時，瀏覽器自動載入哪個檔案？A. home.html B. index.html C. main.html
Q2網頁在根目錄，圖片放在 images/ 資料夾，img 的 src 應該怎樣寫？
Q3多頁網站的導覽列應該怎樣處理？
Q4寫出兩項無障礙檢查。
Q5meta description 的作用是什麼？
8重點回顧 Recap
- 動工先畫網站地圖：有哪幾頁、怎樣互連；index.html 是慣例主頁。
- 資料夾分家：css/ 放樣式、images/ 放圖，網站大了都不亂。
- 每頁同一組 nav 連結、同一份 CSS — 一致就是專業。
- 相對路徑要寫齊資料夾：images/p1.jpg；錯一個字母圖片就裂。
- 完工兩查：無障礙（alt、標題順級、對比）加 SEO（獨特 title、meta description）。