認識 Vibe Coding

示範「我的溫習時間表」網站

🎯 這一站要達成

明白「用說話就可以做網站」，並看完導師的示範網站。

完成後你會擁有：一個屬於你的網站想法。

🧭 本站路線

先完成下方活動，最後在頁底確認及蓋章。

0／3

1看導師示範：一句提示詞變成「我的溫習時間表」網站。
2認識網站五個部分（看下面的網站解剖屋）。
3把你想做的網站想法說給旁邊同學聽一次。

📎 網頁頁面結構示意圖

說

用「我想……」清楚說出想要甚麼。

排

認得網站五個部分，懂得指定位置。

創

用主題＋功能＋風格公式創作第一版。

改

逐步改良、測試，做到愈改愈靚。

Header / Nav 頁首與導航列

屋頂指示牌

放網站名稱和一排連結，讓人一按就去到不同部分。

咒語：我想加一個導航列，有網站名稱和「首頁、關於我、作品」三個連結。

Hero 英雄區

大門口招牌

一進入就看見的黃金區域：大圖片、大標題、一個最醒目的按鈕。

咒語：我想加一個超大的歡迎區塊，配上大圖片和一個「立即開始」按鈕。

Main Content 主要內容區

屋內主要房間

網站中間最大的部分，可分成關於我、作品、功能等區塊。

咒語：我想在中間放 3 張卡片，展示我的作品。

Card / CTA 卡片與行動按鈕

房間裡的傢俬

卡片是圖片加文字的小方塊；CTA 是最想別人按下去的大按鈕。

咒語：我想每張卡片下面加一個「看更多」按鈕，顏色用橙金色。

Footer 頁尾

地下室佈告欄

網站最底部，放版權、聯絡方法和一句口號。

咒語：我想在最底部加一個頁尾，寫上我的網站名稱和一句口號。

樹人智慧：1 分鐘示範提示詞

我想做一個「我的溫習時間表」網站，給小五學生使用。網站要有：頂部導航列（時間表、目標、獎勵）；一個歡迎區塊，寫住「今個星期一起加油」和一個「開始溫習」按鈕；中間一個星期一至日的時間表，每日可以寫三項功課；下面 3 張卡片放我的三個學習目標；最底有頁尾寫我的名字。風格要清新薄荷綠配白色圓角卡片、大字、橙金色重點，手機上也要好看。

✅ 完成確認（0／3）

做到一項才剔一項；剔齊後便可在下面蓋章去下一站。

1.看導師示範：一句提示詞變成「我的溫習時間表」網站。
2.認識網站五個部分（看下面的網站解剖屋）。
3.把你想做的網站想法說給旁邊同學聽一次。