什麼是現代網頁？- 完整教學指導手冊
👨🏫：「大家好！歡迎來到『AI生成網頁設計』課程！我知道很多同學可能覺得程式設計很困難，但今天我要告訴大家一個好消息：在AI時代，每個人都可以成為網頁設計師！」
互動：「誰有用過ChatGPT或類似的AI工具？舉手讓我看看！」
投影螢幕確保全班看清楚，使用Chrome前往Bootstrap官網
指出導航選單、內容佈局、按鈕大小等重點
戲劇化地慢慢拖拉瀏覽器邊緣，從1920px→375px
漢堡選單、文字大小、按鈕間距、圖片排列變化
讓學生用手機掃碼同時瀏覽，直接比較差異
開場：「同學們，現在我要讓大家看到網頁的『變形金剛』功能！」
操作中：「看！選單消失了...變成三條線！這就是漢堡選單！」
互動：「誰的手機螢幕最小？拿出來比較一下！」
讓學生閉眼操作熟悉的App，體驗直觀設計的重要性
閉眼實驗步驟：
👨🏫：「大家看到紅色會想到什麼？」
學生回應後：「沒錯！所以麥當勞用紅色是有原因的——刺激食慾，讓你想趕快點餐！」
延伸：「那Facebook為什麼用藍色呢？」
這個環節容易超時，因為學生會很有興趣討論。記得控制每個小主題不超過10分鐘，適時轉換話題。
3-4人一組，確保每組都有活躍的學生帶領
每組選擇不同網站，避免重複
使用提供的觀察表格，記錄發現
每組3分鐘報告，限時嚴格控制
👨🏫：「今天的作業很有趣，你們要當一次網頁設計師！設計一個介紹自己的網站草圖。」
強調重點：「記住，這不是比美術，而是比『設計思考』。重點是：你的設計有沒有考慮到用戶體驗？」
鼓勵話語：「不用擔心畫得不好，重點是想法創意。下週我們會看到很多有趣的設計！」
如果學生程度允許，可以展示Chrome開發者工具：
解決方案：
解決方案：
解決方案：
創意突出、要求完整達成、視覺效果佳
有一定創意、基本要求達成、整體不錯
創意普通、要求基本達成、有努力痕跡
缺乏創意、要求未完全達成、需要改進
記住這是第一週課程，重點在於建立學生信心和興趣。即使作業品質不高，也要找出亮點給予肯定，並提供具體的改進建議。
下週開始會有實際程式操作，請確認電腦教室設備和網路環境。同時要準備應對學生AI工具註冊困難的解決方案。