1. 課程開場
歡迎來到這場零基礎快速上手的數位工作坊！
請放輕鬆學習，等待內容慢慢解鎖。在這裡，我們將打破艱澀程式語言的藩籬，帶領你高效率生成專屬的個人網頁！
今日終極目標
👇 看看我們今天能做到什麼？
這是我利用相同概念建立的教學示範網站。
認識建構網頁的基本概念...
2. 網頁的基本架構
HTML (骨架)
放文字與圖片的地方
CSS (化妝)
控制顏色與美觀排版
JS (靈魂)
按鈕功能與互動效果
網頁進化演示 (點擊體驗)
preview.html
我的教學網站
這是一段文字，目前看起來非常樸素。
HTML 原始碼 (負責骨架)
<h3>我的教學網站</h3> <p>這是一段文字，目前看起來非常樸素。</p> <button>點擊這裡</button>
課程重點簡報回顧
動手建立你的第一個網頁...
3. 建立第一個網頁
網頁誕生四部曲
範本一：個人網站首頁
# Persona (角色)
你是一位資深前端工程師與 UI/UX 設計師，非常擅長教育類網站的體驗設計。你的程式碼乾淨、具備現代感，且非常注重排版的美感、動態 SVG 動畫與響應式設計。
# Task (任務)
請幫我撰寫一個「個人教學網站」的首頁程式碼。
# Context (背景)
1、網站左上角是網頁標題：【請更改為你的網頁標題】
2、右上角導覽列選單：【請填入有哪些選單，例如：關於我、物理課程、網頁課程、聯絡方式】
3、下方留空作為我之後放置教學內容的區塊
# Format (格式)
1、響應式設計 (RWD)
2、完整輸出：直接給我完整包含 HTML、CSS 與 JavaScript、可以直接執行的最終版本程式碼。
範本二：互動式教學頁面
# Persona (角色)
你是一位資深前端工程師與「數位教育設計師」，非常擅長將抽象的概念轉化為具象的互動實驗。你的程式碼乾淨、具備現代感，且非常注重互動的美感、動態 SVG 動畫與響應式設計。
# Task (任務)
請幫我撰寫一個關於「【填入單元或概念名稱】」的沉浸式互動網頁教材程式碼。
# Context (背景)
1、整體視覺：使用沉浸式的淺色調背景，排版乾淨俐落。
2、互動元件：教學核心的互動元件請務必使用動態 SVG 動畫呈現。
3、控制面板：在畫面角落提供滑桿 (Slider) 或按鈕，允許學生點擊、拖曳物件或調整相關參數，用以進行探究學習。
4、說明區塊：在畫面下方加入一個乾淨的小區塊，簡要說明此實驗的步驟與背後原理。
# Format (格式)
1、響應式設計 (RWD)
2、完整輸出：直接給我完整包含 HTML、CSS 與 JavaScript、可以直接執行的最終版本程式碼。
開啟線上編輯器
將生成的 HTML 程式碼貼入此處，立刻預覽你的專屬網頁！
操作提示與範例解析
即將發布你的網頁到全世界...
4. 上架Github
GitHub 上架四部曲
操作提示與範例解析
學無止盡，看看還能做什麼？
5. 延伸挑戰與練習
能力進化藍圖
視覺 🖼️ Canva/Google 簡報嵌入
將簡報「發佈到網路」並獲取 iframe 代碼，請 AI 幫你放入網頁中。
資料 📊 試算表作為資料庫
利用 GAS 讀寫試算表，做出簽到表或留言板功能。
互動 🤖 AI 聊天機器人
串接 Felo AI 的免費 API，讓你的網頁會自動回答問題。