進階排版與動畫 — 第 4 單元完整閉環
4-1 Grid 九宮格 → 4-2 CSS 動畫 → 4-5 指揮官(AI 實作)→ 4-6 偵探(抓蟲)→ 4-7 實戰練習(Canvas 會動的生日卡)→ 🎉 結業式。
👆 本堂重點,一眼看完
🗺️ 本堂流程(共約 2 小時)
4-3 響應式、4-4 動畫舞台移到回家自學(網站有整頁漫畫)。第六堂起進入 Python 新世界(共四堂),之後第十堂問卷、第十一堂結業式。
🎲 本堂小活動一覽
- 九宮格實驗:repeat(3,1fr) 改 2 — 先猜格子變幾行
- 讓星星跳起來:改速度變「緊張兔子跳」、改高度跳超高、拿掉 infinite 只演一次
- 🏅 指揮官:命令奇奇用 flexbox 排三張動物卡片
- 🔍 偵探抓蟲:display: flx 拼錯,卡片疊成一團
- 🤖 Canvas:會動的生日卡(送給下一個生日的家人!)
- ⭐ 收尾:發佈生日卡傳給家人 → 星星結算 → 預告第六堂起進入 Python
🎯 這一堂特別注意
共通守則(學習循環、指揮官/偵探帶法、星星制度、個資紅線、開課前機器準備)集中在 🏠 首頁 — 開課前讀一次就好,這裡只列這一堂特別要注意的。
- 動畫會暈:孩子容易把速度調到很誇張,提醒「好看比快重要」,並注意會不會有人看了不舒服。
- 收尾預告:提醒孩子下一堂進入 Python 新世界,結業式在第十一堂。
開場:快問快答複習上一堂
搶答搶答發星星:讓卡片排成一排的口令是?(display: flex)口令要喊給誰聽?(裝卡片的家長箱子)hover 是什麼時候發生?(滑鼠摸到的時候)
轉場口白
「flex 讓卡片排一排 — 今天升級:Grid 排一整面牆,再讓網頁自己動起來,不用滑鼠摸也會表演!」
4-1 Grid:九宮格排版
故事第一關課文口白
「flex 是排隊,Grid 是畫棋盤:先說好要幾行幾列,東西就一格一格自動入座。repeat(3, 1fr) 的意思是『三欄、每欄一樣寬』— 一句話排出九宮格!」
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}第一關:排出九宮格
- 把
repeat(3, 1fr)改成repeat(2, 1fr)— 先猜:九個格子會變成幾行? gap改大改小,觀察格子間距
4-2 CSS 動畫:會動的網頁
故事第二關課文口白
「hover 要滑鼠摸才動 — @keyframes 是寫給演員的動作腳本:0% 是開場姿勢、50% 是中間姿勢、100% 回到結尾。animation 讓元素照著腳本演,infinite 就演不停!」
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.star {
animation: bounce 1s infinite;
}第二關:讓星星跳起來
1s改0.3s— 先猜:會變成什麼感覺?(緊張兔子跳!)-20px改-60px— 跳超高- 拿掉
infinite— 只演一次就謝幕
🏅 4-5 指揮官:命令奇奇排三張卡片
AI 實作(課程網站)任務:指揮奇奇用 flexbox 把三張小卡片排成一排,卡片之間要有間距,每張有不同的 emoji 和標題。課文有示範成果圖。
指揮官三步驟
- 驗收卡:「三張卡片要排成一排(不是疊起來)」「卡片之間要有間距」
- 下指令:「請做三張介紹動物的卡片,用 flexbox 讓它們橫著排成一排,中間留一點空隙」
- 親手驗收:逐卡核對,全過蓋章!
🔍 4-6 偵探:疊成一團的卡片
抓蟲(課程網站)案情
「三張居民卡應該肩並肩排好,卻疊成一直排 — 奇奇的 flexbox 魔法完全沒生效。」
<style>
.row {
display: flx;
gap: 12px;
}
</style>藏了 1 隻蟲:flx 少了字母 — display 的值拼錯就整個失效。和 2-6 的 colr、上一堂的 herf 同一家族:拼錯不報錯,只裝沒聽到。
🤖 4-7 實戰練習:會動的生日卡
★ Canvas 壓軸老師開場
「複習:不能跟 AI 說什麼?最後的實戰:CSS 動畫讓網頁活起來 — 指揮 AI 做一張會動的生日卡,做完送給下一個生日的家人!」
流程:課程網站 4-7 實戰練習 → 「📋 一鍵複製」→ Gemini 選 Canvas → 驗收 → 迭代 → 發佈。
📋 官方提示詞(課文內建一鍵複製)
做一張「會動的生日卡」:打開時蛋糕和「生日快樂」大字有進場動畫,背景一直飄落彩帶或氣球(CSS 動畫),點畫面任何地方會重播進場動畫。
✅ 驗收清單(課文同款)
- 一打開就有進場動畫
- 背景的彩帶或氣球會一直飄,不會停
- 點畫面能重播動畫
🛡️ 巡場重點:卡片上的名字用家人稱呼(爸爸/媽媽/阿嬤),不寫全名;一律用課前登好的大人/學校帳號。