網頁專題挑戰 — 第 3 單元完整閉環
3-1 flex 排排站 → 3-2 hover 按鈕 → 3-5 指揮官(AI 實作)→ 3-6 偵探(抓蟲)→ 3-7 實戰練習(Canvas 我的最愛清單頁)。
👆 本堂重點,一眼看完
🗺️ 本堂流程(共約 2 小時)
3-3 表單、3-4 flex 集合移到回家自學(網站有整頁漫畫)。
🎲 本堂小活動一覽
- 瞬間排隊魔法:加上 display:flex,三張卡片當場排成一排
- 讓按鈕活過來:hover 變色浮起;拔掉 transition 比較「瞬間 vs 滑順」
- 🏅 指揮官:命令奇奇做自我介紹小卡(🦊 大頭貼+邊框陰影)
- 🔍 偵探抓蟲:class 選擇器少了一個「.」,樣式全滅
- 🤖 Canvas:我的最愛清單頁(逐一點目錄連結驗收)→ 發佈到作品集
🎯 這一堂特別注意
共通守則(學習循環、指揮官/偵探帶法、星星制度、個資紅線、開課前機器準備)集中在 🏠 首頁 — 開課前讀一次就好,這裡只列這一堂特別要注意的。
- flex 常見錯:寫在卡片自己身上沒效果 — 要寫在裝卡片的箱子(家長)上。
- hover 手機沒有:如果有孩子用平板,先說明 hover 是滑鼠專屬,不是程式壞掉。
開場:快問快答複習上一堂
搶答搶答發星星:CSS 句型口訣是什麼?冒號和分號少一個會怎樣?哪一招讓卡片浮起來?(box-shadow)
轉場口白
「小屋蓋好也化好妝了 — 今天學兩招專題絕活:讓卡片排隊、讓按鈕回應你。學完這兩招,你就有做真正網站的本事了!」
3-1 flex:讓卡片排排站
故事第一關課文口白
「三張卡片本來一張疊一張直直排 — 像沒排隊的小朋友。只要對它們的家長箱子說一句 display: flex,小朋友就自動手牽手排成一排;gap 是間隔、justify-content: center 是整隊站中間。」
.row {
display: flex;
gap: 16px;
justify-content: center;
}第一關:三張小卡排一排
- 先看沒有 flex 的樣子(直直疊),加上
display: flex見證瞬間排隊 gap改大改小,觀察間距
3-2 按鈕與 hover 動畫
故事第二關課文口白
「:hover 是『當滑鼠摸到它的時候』— 摸到就變色、浮起來。加一句 transition,變化會滑順地慢慢發生。這就是好網站『會回應你』的秘密。」
.btn {
background: #4a9761;
color: white;
transition: all 0.3s;
}
.btn:hover {
background: orange;
transform: translateY(-4px);
}第二關:讓按鈕活過來
- 滑上去、移開,感受變化;
0.3s改1s差在哪? - 刪掉
transition再試 — 瞬間 vs 滑順,哪個舒服?
🏅 3-5 指揮官:命令奇奇做自我介紹小卡
AI 實作(課程網站)任務:指揮奇奇做「自我介紹小卡」— 名字標題、🦊 emoji 大頭貼、一段介紹,整張卡要有邊框和陰影。課文有示範成果圖。
指揮官三步驟
- 驗收卡:「要有一個 emoji 大頭貼」「卡片要有邊框和陰影」
- 下指令:「請做一張自我介紹小卡,上面放一個 🦊 當大頭貼,卡片要有邊框和陰影」
- 親手驗收:逐卡核對,全過蓋章!
🔍 3-6 偵探:消失的卡片樣式
抓蟲(課程網站)案情
「奇奇幫小月做了漂亮的名片樣式,結果卡片一點樣式都沒有,白得像一張影印紙。」
<style>
card {
background: #f0fdf4;
border: 2px solid #16a34a;
border-radius: 12px;
padding: 16px;
}
</style>
<div class="card">
<h2>小月的名片</h2>
</div>藏了 1 隻蟲:選 class 的話,選擇器前面要加一個「.」— card 和 .card 差很多!
🤖 3-7 實戰練習:我的最愛清單頁
★ Canvas 壓軸老師開場
「複習:不能跟 AI 說什麼?專題就是骨架+美化合體 — 這頁有三個區塊、一個目錄,驗收重點:目錄連結按了要跳到對的地方!」
流程:課程網站 3-7 實戰練習 → 「📋 一鍵複製」→ Gemini 選 Canvas → 驗收 → 迭代。
📋 官方提示詞(課文內建一鍵複製)
做一個「我的最愛」網頁:最愛的食物/動物/遊戲三區塊,每區至少 3 項配 emoji、底色各不同;最上方目錄連結,點了跳到對應區塊。
✅ 驗收清單(課文同款)
- 三個區塊、每區至少 3 個項目
- 目錄連結逐一點,都跳到對的區塊
- 三個區塊底色不一樣
🛡️ 巡場重點:內容用假資料;一律用課前登好的大人/學校帳號。