網頁連結教學第四課：用 AI 快速生成內容頁

1

為什麼要用 AI 幫忙？

問題來了... 🤔

我們已經做好了首頁 index.html，
也在側邊欄設定好連結指向 html-tutorial.html、css-tutorial.html...

但是！這些頁面都還不存在！
要一個一個手動寫，太花時間了...

這時候，AI 就是你最好的助手！🤖

🤖 可以幫忙的 AI 工具：

🟣

Claude

Anthropic 出品的 AI

ChatGPT

OpenAI 出品的 AI

很好用

🔵

Gemini

Google 出品的 AI

免費

⚫

Copilot

微軟出品的 AI

免費

💡 AI 能幫你做什麼？

快速生成風格一致的子頁面
自動寫好相同的側邊欄結構
幫你填入教學內容（參考維基百科等資料）
節省80% 以上的時間！

2

AI 生成頁面的完整流程

1

📄

準備好
index.html

→

2

✍️

寫好
Prompt

→

3

📎

上傳檔案
給 AI

→

4

🤖

AI 生成
新頁面

→

5

✅

檢查
並存檔

⚠️ 最重要的事！

一定要把 index.html 一起傳給 AI！
這樣 AI 才能看到你的側邊欄結構，生成風格一致的頁面。

3

Prompt 要包含哪些重點？

一個好的 Prompt（提示詞）要告訴 AI 這 7 件事：

1

🎯 要做什麼頁面

告訴 AI 你要生成「CSS 教學」或「HTML 教學」等哪種內容頁

2

📄 使用相同側邊欄

請 AI 使用與 index.html 相同的側邊欄導航結構

3

🔗 修改連結

告訴 AI 側邊欄的 href 要改成什麼（首頁→index.html 等）

4

✨ 標示目前頁面

指定哪個選單項目要加上 class="active"

5

📚 內容主題與來源

告訴 AI 主要內容要放什麼，可以參考維基百科或其他資料

6

🎨 風格要求

描述風格（活潑、適合初學者、適合小學生等）

7

🌈 背景色

指定背景色改成課程代表色（HTML 橘紅色、CSS 藍色等）

4

完整 Prompt 範本

以下是生成「CSS 教學」頁面的完整 Prompt，可以直接複製修改使用：

🤖

給 AI 的 Prompt

【任務說明】請幫我生成一個「CSS 教學」網頁（css-tutorial.html）【結構要求】 1. 使用與我附上的 index.html 相同的側邊欄導航結構 2. 側邊欄的連結要改成： - 首頁 → href="index.html" - HTML 教學 → href="html-tutorial.html" - CSS 教學 → href="css-tutorial.html" - JavaScript → href="js-tutorial.html" - 作品集 → href="portfolio.html" - 關於我們 → href="about.html" 3. 把「CSS 教學」選單項目加上 class="active" 【內容要求】主要內容區放 CSS 基礎教學，包含： - 什麼是 CSS（用簡單比喻解釋） - CSS 基本語法（選擇器 { 屬性: 值; }） - 三種 CSS 連結方式（行內、內部、外部） - 常用 CSS 屬性表格參考來源：維基百科「CSS」條目【風格要求】 - 風格活潑、適合初學者和小學生 - 多用 emoji 和視覺化範例 - 要有互動效果（hover 變色等）【視覺要求】 - 背景色改成 CSS 代表色：藍紫色漸層（例如：linear-gradient(135deg, #264DE4, #2965F1)） - 加上麵包屑導航：首頁 › CSS 教學 - 底部加「返回首頁」按鈕 // 記得把 index.html 檔案一起上傳給我參考！

💡 使用方式

1. 複製上面的 Prompt
2. 打開 AI 工具（Claude / ChatGPT 等）
3. 先上傳你的 index.html 檔案
4. 貼上 Prompt 送出
5. AI 就會生成完整的 css-tutorial.html！

5

不同頁面怎麼改 Prompt？

只要修改 3 個地方，就能生成不同的內容頁：

頁面	active 項目	背景色	內容主題
html-tutorial.html	HTML 教學	🟠 橘紅色 `#E44D26`	HTML 基礎、標籤、結構
css-tutorial.html	CSS 教學	🔵 藍色 `#264DE4`	CSS 語法、樣式、美化
js-tutorial.html	JavaScript	🟡 黃色 `#F7DF1E`	JS 基礎、互動、事件
portfolio.html	作品集	🟣 紫色 `#9C27B0`	學生作品展示
about.html	關於我們	🟢 綠色 `#4CAF50`	網站介紹、聯絡方式

⚠️ 記得每次都要改的地方

1. 頁面名稱（「CSS 教學」改成「HTML 教學」等）
2. class="active" 要加在哪個選單項目
3. 背景色要用該課程的代表色

6

AI 生成後的檢查清單

AI 生成的檔案，一定要檢查這些項目再使用：

✅ 必檢查項目（點擊可打勾）

側邊欄連結是否都正確？（href="xxx.html"）

目前頁面是否有 class="active"？

首頁連結是否指向 index.html？

背景色是否是該課程的代表色？

麵包屑導航顯示是否正確？

內容是否適合目標讀者（初學者/小學生）？

返回首頁按鈕是否正常運作？

存檔時檔名是否與連結一致？（如 css-tutorial.html）

💡 如果發現問題怎麼辦？

直接告訴 AI 哪裡要修改！例如：
「請把側邊欄的『首頁』連結從 href="#" 改成 href="index.html"」
「請把 CSS 教學選單加上 class="active"」

7

完成後的檔案結構

所有頁面生成完成後，你的資料夾應該長這樣：

📁 我的網站/ ├── 📄 index.html ← 首頁（你自己做的） ├── 📄 html-tutorial.html ← AI 生成 ├── 📄 css-tutorial.html ← AI 生成 ├── 📄 js-tutorial.html ← AI 生成 ├── 📄 portfolio.html ← AI 生成 ├── 📄 about.html ← AI 生成 └── 📁 images/ ← 圖片資料夾 ├── 🖼️ logo.png └── 🖼️ ...其他圖片

⚠️ 檔名很重要！

存檔時的檔名一定要和側邊欄連結完全一樣！
例如：連結寫 href="css-tutorial.html"
檔名就要存成 css-tutorial.html（不能有空格或大小寫不同）

8

動手做！生成你的第一個內容頁

準備好你的 index.html

確認側邊欄連結已經改好（href 指向正確的檔名）

打開 AI 工具

Claude、ChatGPT、Gemini 或 Copilot 都可以

上傳 index.html

用附件功能把你的首頁檔案傳給 AI

貼上 Prompt

複製第四章的 Prompt 範本，修改成你要的頁面

等待 AI 生成

AI 會給你完整的 HTML 程式碼

複製程式碼並存檔

把程式碼複製到新檔案，存在與 index.html 同一資料夾

檢查並測試

用瀏覽器打開，測試側邊欄連結是否都能正常跳轉

🖥️ 生成後的頁面應該長這樣：

📁 我的網站/html-tutorial.html

首頁 › HTML 教學

📄 HTML 入門教學

學習網頁的骨架結構

（側邊欄的「HTML 教學」會亮起來表示目前頁面）

9

常見問題 Q&A

❓ Q：AI 生成的程式碼太長，無法一次顯示完怎麼辦？

A：跟 AI 說「請繼續」或「continue」，它會接著輸出剩下的部分。

❓ Q：AI 沒有使用我的側邊欄結構怎麼辦？

A：確認你有上傳 index.html 檔案，並在 Prompt 中明確說「使用我附上的 index.html 的側邊欄結構」。

❓ Q：生成的內容和我想要的不一樣怎麼辦？

A：直接告訴 AI 要修改什麼，例如「請把第二段改成...」或「請加上 XXX 的介紹」。

❓ Q：可以一次生成多個頁面嗎？

A：可以，但建議一次只生成一個頁面，品質會比較好。生成完一個，檢查沒問題後，再做下一個。

❓ Q：AI 生成的內容有錯誤怎麼辦？

A：AI 有時會出錯，特別是專業知識。建議用維基百科等可靠來源核對內容，發現錯誤就請 AI 修正。

今天學到的重點

AI 可以幫我們快速生成風格一致的子頁面
一定要上傳 index.html 給 AI 參考
Prompt 要包含：頁面主題、側邊欄結構、連結設定、active 標示、內容來源、風格、背景色
每個頁面要改的 3 件事：頁面名稱、active 項目、背景色
AI 生成後要檢查：連結是否正確、active 是否有加、檔名是否一致
存檔時檔名要與連結完全一致（包括大小寫）
發現問題可以直接告訴 AI 修改