教師工具指南
一鍵 HTML 產生器
把準備好的完整 HTML 程式碼貼進工具，先預覽、再下載成單一檔案；上課前也能依照清單確認它是否真的可以離線使用。
先用一句話理解這個工具
它不是替你撰寫程式的 AI，而是「完整 HTML 的預覽器與下載器」。
當你已經從 AI 或其他來源取得一份完整 HTML 程式碼時，可以用這個工具先檢查畫面，再把內容儲存成瀏覽器能直接開啟的檔案。整個過程不需要安裝開發工具。
完整 HTML
內容最好包含 <!DOCTYPE html>、<head> 與 <body>。
預覽與下載
在頁面左側顯示結果，並將原始內容下載成一個 .html 檔。
離線實測
關閉網路後重新開啟檔案，確認文字、圖片、字型與互動都能正常使用。
什麼情況適合使用
這個工具最適合「程式碼已經完成，只差檢查與存檔」的階段。
先看畫面再下載
貼上程式碼後立即預覽，先發現空白畫面、排版跑掉或按鈕沒有反應等問題。
下載為 .html 檔
把程式碼儲存成學生可用瀏覽器開啟的檔案，方便放進隨身碟、雲端硬碟或學習平台。
準備離線版本
若教材本身不依賴外部資源，下載後可在沒有網路的環境中開啟，作為課堂備援。
保留原始內容
工具不會重寫貼入的程式碼。需要調整時，可以回到原始內容修改，再重新預覽與下載。
三步驟完成教材檔案
先保留一份原始程式碼；每次修改後都重新預覽，再下載新版本。
-
輸入檔案名稱並貼上完整程式碼
檔名可以使用英文、數字與連字號，例如
projectile-motion。工具會自動補上.html。 -
選擇「在左側預覽」
檢查標題、文字、圖片、控制元件與互動是否正常。再次按下按鈕可以關閉預覽。
-
確認無誤後選擇「打包下載」
瀏覽器會下載一個 HTML 檔。請實際打開下載檔，而不是只相信預覽畫面。
若瀏覽器阻擋 iframe 內下載，請使用上方「開啟一鍵 HTML 產生器」後再下載。
帶進教室前的檢查清單
完成下載後，用真正上課會使用的裝置測試一次。
- 開啟下載資料夾中的檔案，確認副檔名是
.html。 - 暫時關閉 Wi-Fi 或拔除網路線，再重新整理頁面。
- 逐一操作所有按鈕、滑桿、輸入框、動畫與全螢幕功能。
- 檢查圖片、字型、公式與圖示是否仍然出現。
- 用教室電腦與投影幕確認字體大小、對比與畫面比例。
- 保留一份已測試版本，避免上課前臨時修改造成新問題。
個人操作
將檔案放在學生裝置或學習平台，讓學生依任務單自行操作與紀錄觀察。
全班展示
教師以投影幕操作，先請學生預測結果，再改變參數驗證；離線檔可作為網路不穩時的備案。
常見問題
預覽正常，下載後為什麼圖片不見了？
圖片很可能使用網站相對路徑或線上網址。若要做成單一離線檔，請把小型圖片轉為 Data URL 內嵌，或把圖片與 HTML 一起放入資料夾並修正路徑。
下載後雙擊，為什麼功能和網站上不同？
瀏覽器對本機檔案有安全限制，相機、麥克風、跨網域請求與部分模組功能可能需要 HTTPS 或本機伺服器。這類教材不適合只靠單一 HTML 離線執行。
可以直接貼一小段 JavaScript 嗎？
不建議。工具預期收到完整 HTML 文件；只有片段時，請先請 AI 或開發者補齊必要的 HTML、CSS 與 JavaScript 結構。
工具會替我修正錯誤的程式碼嗎？
不會。它會照原樣預覽與下載。若畫面空白或互動失效，需要回到原始程式碼找出錯誤後再貼入。
重點整理
先預覽、再下載，最後一定要離線實測
- 工具負責預覽與儲存完整 HTML，不負責自動生成或修正程式碼。
- 單一 HTML 能否離線使用，取決於內容是否仍引用外部資源。
- 真正可靠的課堂備援，是在實際教學裝置上關閉網路並完整操作一次。