5016B 智慧微課程

面向國中科技領域的靜態互動教學網站。網站以 PBL-STEM+C 的跨域專題為主軸，帶領學生從單一模組操作，逐步完成「智慧停車場」整合專題。

• 線上網站：byte-core-su.github.io/5016b
• 部署方式：GitHub Pages（main 分支）
• 技術：HTML、原生 JavaScript、Tailwind CSS、Lucide Icons
• 後端與帳號：無；所有圖片轉碼均在使用者瀏覽器內完成，不會上傳到伺服器。

網站架構

index.html              頁面結構、課程資料與所有互動邏輯
styles.css              已編譯的正式 Tailwind CSS，GitHub Pages 直接載入
tailwind.input.css      Tailwind 來源樣式與少量自訂 CSS
tailwind.config.js      Tailwind 色彩與掃描設定
images/                 課程環境設定截圖與單元三示意圖
README.md               專案與維護說明

styles.css 是部署所需檔案；修改 HTML 類別或 Tailwind 來源設定後，務必重新產生並一併提交。

頁面與互動設計

區塊	用途	主要互動
首頁 #about	說明課程定位與 5016B 平台	從單元一開始、瀏覽課綱、查看環境設定
課程總覽 #curriculum	顯示五個課程卡片	點選卡片進入單元詳情
課程詳情 #detail-view	顯示單元目標、材料、流程與專屬實作	進度條、頁內導覽、上一／下一單元、返回總覽
平台設定 #platform-view	說明 NKNUBLOCK 模擬環境連線流程	五步驟圖文指引
圖片對話框 #image-modal	放大閱讀單元三程式圖片	關閉按鈕、Esc 關閉、焦點回復

首頁與課程卡片採用真正的連結元素，支援鍵盤聚焦；進入單元時焦點會移到課程標題。單元三較進階的跑馬燈與圖片轉碼內容預設收合，讓初學者可先完成基礎實作。

課程內容

單元	主題	核心模組	學習成果
1	8×8 LED 矩陣：走路動畫	MAX7219 LED 矩陣	使用二維陣列、迴圈與延遲建立動畫
2	炫彩燈條：彩虹流光	WS2812B 數位燈條	理解 RGB 色彩與流動燈效
3	OLED 顯示：文字掉落與圖片繪製	I2C OLED	製作文字動畫並把圖片轉為 1-bit C 陣列
4	感測控制：智慧停車場閘門	HC-SR04、SG90	依距離條件控制伺服馬達
5	智慧停車場：出入口閘門管理	全部模組整合	完成車輛與行人通行的情境專題

程式結構

網站刻意維持單頁、零框架的結構，方便教師直接修改課程文字與操作流程。

• courseData：集中定義五個單元的標題、描述、目標、材料與課堂步驟。
• unitDemoHandlers：將各單元對應到專屬預覽 HTML 與初始化函式。
• openCourseDetail()：切換到課程詳情，填入資料、更新進度與切換按鈕、初始化專屬互動。
• openPlatformDetail()：切換到平台環境設定頁。
• getUnit1DemoHTML() 至 getUnit5DemoHTML()：各單元的實作預覽內容。

單元三工具

OLED 圖片轉換器使用 <canvas> 在本機將圖片縮放、灰階化、二值化，並輸出 C 語言位元陣列。複製功能優先使用 Clipboard API，必要時才退回相容性複製方式。

圖片資產

所有教學圖片均放在 images/，以相對路徑載入，因此可離線預覽且不依賴 GitHub Raw 圖片網址。

檔案	用途
501601.png–501605.png	NKNUBLOCK 模擬環境設定的五個步驟截圖
unit3-ticker.png	OLED 進階跑馬燈積木程式圖

如需替換圖片，保留原檔名即可；若改用新檔名，請同步修改 index.html 中的相對路徑與替代文字。

本機預覽

網站不需要安裝依賴即可預覽。於專案根目錄執行：

python -m http.server 4173

接著開啟 http://127.0.0.1:4173/。

更新樣式

何時需要重建

以下情況都需要重新產生 styles.css：

• 新增或刪除 index.html 中的 Tailwind 類別。
• 調整 tailwind.input.css 的自訂樣式。
• 調整 tailwind.config.js 的色彩或掃描範圍。

編譯指令

pnpm dlx tailwindcss@3.4.17 -c tailwind.config.js -i tailwind.input.css -o styles.css --minify

完成後請檢查網站畫面，並將 styles.css、來源 CSS 與設定檔一起提交。

發布與維護流程

1. 修改內容、互動或圖片。
2. 若有樣式變更，重新編譯 styles.css。
3. 本機預覽並測試首頁、課程切換、圖片放大與單元三工具。
4. 提交並推送至 main 分支。
5. GitHub Pages 會自動更新；若沒有立即看到變更，請等待短暫部署並重新整理瀏覽器快取。

維護原則

• 新增單元時，同步更新首頁課程卡片、courseData 與 unitDemoHandlers。
• 動態插入的 HTML 如包含 Lucide 圖示，需在插入後呼叫 lucide.createIcons()。
• 所有可點擊元件應保持可鍵盤操作，並提供清楚的焦點樣式與中文替代文字。
• 不要直接編輯 styles.css；請修改 tailwind.input.css 或設定檔後重新編譯。