本章學習地圖

為什麼要加圖片？

三種圖片來源

加入圖片前後的頁面對比效果

截取工具操作截圖

截圖是最簡單的圖片來源，把你操作工具的畫面拍下來就好！

建議截取的畫面

• 工具首頁：展示你使用了哪些 AI 工具
• API Key 輸入畫面：展示設定過程（注意遮住金鑰！）
• 角色描述畫面：展示你設計的 AI 角色
• 對話結果：展示 AI 回覆的效果

使用系統截圖工具擷取操作畫面

建立 images 資料夾

截圖拍好後，需要一個地方存放這些圖片檔案。

資料夾結構

my-project/
  ├── my-card-page.html    <-- 你的網頁檔案
  └── images/              <-- 新建這個資料夾
       ├── tool-homepage.png
       ├── api-key-input.png
       ├── chat-result.png
       └── role-setting.png

命名規則

• 用英文命名：tool-homepage.png（不要用中文）
• 用小寫字母：api-key-input.png（不要用大寫）
• 用短橫線分隔：chat-result.png（不要用空格）
• 說明性名稱：看檔名就知道是什麼圖片

img 標籤用法

基本語法

<img src="images/tool-homepage.png" alt="工具首頁截圖">

加上 CSS 美化

<img src="images/tool-homepage.png"
     alt="工具首頁截圖"
     style="width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);">

圖片插入效果展示

加入圖片後，原本純文字的卡片頁面瞬間變得更豐富、更專業！

加入圖片後的卡片頁面效果

加入 emoji 裝飾

emoji 是最簡單的視覺裝飾，不需要找圖片，直接打字就能用！

範例：卡片標題加上 emoji

如何輸入 emoji

加入 emoji 後的卡片標題效果

用 AI 生成步驟樣式

請 AI 幫你設計漂亮的「圓形編號 + 連接線」步驟卡片！

Prompt 範例

AI 生成的 CSS 範例

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}
.step-circle {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}
.step-content {
  margin-left: 15px;
}
/* 連接線 */
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 45px;
  width: 2px;
  height: calc(100% - 20px);
  background: #667eea;
}

AI 生成的圓形編號步驟卡片效果

接下來，讓我們加入動畫效果，讓網頁真正「動」起來！

滾動動畫原理

魔術師比喻

CSS 動畫樣式

在你的 CSS 中加入這兩段

/* 初始狀態：隱藏 + 往下偏移 */
.card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 出現狀態：顯示 + 回到原位 */
.card.visible {
  opacity: 1;
  transform: translateY(0);
}

逐行解釋

CSS 動畫的隱藏與出現狀態

JavaScript IntersectionObserver

「門衛」比喻

IntersectionObserver 就像一個站在門口的門衛，負責偵測誰進入了視線範圍。

程式碼

// 建立一個「門衛」觀察者
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 卡片進入視線範圍了！加上 visible class
      entry.target.classList.add('visible');
    }
  });
}, {
  threshold: 0.2  // 出現 20% 就觸發
});

// 讓門衛觀察所有卡片
document.querySelectorAll('.card').forEach(card => {
  observer.observe(card);
});

程式碼解釋

• IntersectionObserver：瀏覽器內建的「偵測元素是否在畫面中」的工具
• entry.isIntersecting：如果元素進入視窗範圍，回傳 true
• classList.add('visible')：加上 visible class，觸發 CSS 動畫
• threshold: 0.2：元素出現 20% 就觸發（0.2 = 20%）

測試動畫效果

測試步驟

1. 1儲存你的 HTML 檔案
2. 2在瀏覽器中重新整理頁面（Ctrl + R 或 Cmd + R）
3. 3慢慢往下滾動，觀察每張卡片的出現動畫
4. 4卡片應該會從下方「淡入上移」到正確位置

滾動時卡片依序淡入出現的效果

Hover 效果：滑鼠移上去卡片浮起

讓使用者把滑鼠移到卡片上時，卡片會微微浮起，增加互動感。

CSS 程式碼

.card.visible:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

效果說明

回到頂部按鈕

當頁面很長的時候，使用者需要一個快速回到頂部的方法。

HTML 程式碼

<a href="#" class="back-to-top" title="回到頂部">↑</a>

CSS 程式碼

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.3s ease;
}

.back-to-top:hover {
  transform: scale(1.1);
}

重點說明

• position: fixed：固定在螢幕上，不會隨著滾動消失
• bottom: 30px; right: 30px：固定在右下角
• z-index: 1000：確保按鈕在所有內容的最上層
• href="#"：點擊後跳回頁面最頂端

上午最終檢查清單

在結束上午課程前，確認你的作品具備以下功能：

上午完成的作品全貌

練習時間

.card:nth-child(1) {
  transition-delay: 0s;
}
.card:nth-child(2) {
  transition-delay: 0.1s;
}
.card:nth-child(3) {
  transition-delay: 0.2s;
}

上午的作品大功告成！下午我們要把它放到網路上，讓全世界都能看到！

本章回顧