1. 課程開場
🚀 歡迎來到這場零基礎快速上手的數位工作坊！
請放輕鬆看投影幕，等待內容慢慢解鎖。在這裡，我們將打破艱澀程式語言的藩籬，帶領你利用 AI 工具，高效率生成專屬的教學網頁！
今日終極目標
👇 看看我們今天能做到什麼？
這是我利用相同概念建立的教學示範網站。
認識建構網頁的基本概念...
2. 網頁的基本架構
HTML (骨架)
放文字與圖片的地方
CSS (化妝)
控制顏色與美觀排版
JS (靈魂)
按鈕功能與互動效果
網頁進化演示 (點擊體驗)
我的教學網站
這是一段文字，目前看起來非常樸素。
課程重點簡報回顧
動手建立你的第一個網頁...
3. 建立第一個網頁
網頁誕生四部曲
複製咒語 (Prompt)
# Persona (角色)
你是一位資深前端工程師與 UI/UX 設計師，非常擅長教育類網站的體驗設計。你的程式碼乾淨、具備現代感，且非常注重排版的美感、動態svg動畫與響應式設計。
# Task (任務)
請幫我撰寫一個「個人教學網站」的首頁程式碼。
# Context (背景)
1、 網站左上角是網頁標題：【請更改為你的網頁標題】
2、右上角導覽列選單：【請填入有哪些選單，例如：關於我、物理課程、網頁課程、聯絡方式】
3、下面是我之後放的教學內容區
# Format (格式)
1、響應式設計 (RWD)
2、完整輸出：直接給我完整包含 HTML、CSS 與 JavaScript、可以直接執行的最終版本程式碼。
開啟線上編輯器
將生成的 HTML 程式碼貼入此處，立刻預覽你的專屬網頁！
操作提示與範例解析
即將發布你的網頁到全世界...
4. GitHub 上架三部曲
1
建立 Repository：命名為 my-page，設為 Public。
2
上傳檔案：將檔名命名為 index.html 後上傳。
3
啟動網站：Settings → Pages → Branch 選 main → Save。
學無止盡，看看還能做什麼？
5. 延伸挑戰與練習
🖼️ Canva/Google 簡報嵌入
將簡報「發佈到網路」並獲取 iframe 代碼，請 AI 幫你放入網頁中。
📊 試算表作為資料庫
利用 GAS 讀寫試算表，做出簽到表或留言板功能。
🤖 AI 聊天機器人
串接 Felo AI 的免費 API，讓你的網頁會自動回答問題。