Q：如何在課程中放置已經製作好的一套HTML 教材包?

Q：如何在課程中放置已經製作好的一套HTML 教材包（包含多個 .html 檔案、圖片資料夾、CSS 或 JS 檔）？

五個步驟，讓 Moodle 化身專屬網頁伺服器

第一步：準備教材包(本地端打包)

確認首頁檔名，並將整個資料夾打包為 ZIP 格式。

• 系統自動識別的關鍵：確保教材包的首頁檔名為 index.html 或 default.html。

• 完整封裝：將「整個教材資料夾」(包含所有 HTML、圖片與子資料夾) 壓縮成單一個.zip檔。

※注意：請務必將所有 HTML、CSS 及 JS 檔案儲存為 UTF-8 編碼格式。

第二步：上傳至平台 (新增檔案資源)

建立檔案資源，並將壓縮檔拖放至內容區塊。

路徑：在課程頁面開啟「啟動編輯模式」>  點擊「新增活動或資源」>  選擇 「檔案 (File)」

• 輸入教材名稱。

• 無需事先解壓縮，直接將.zip檔拖入上傳區塊。

第三步：設定首頁與展開 (解壓縮與指定路徑)

直接在 Moodle 系統內執行解壓縮

• 點擊上傳完成的.zip 圖示。

• 在彈出的視窗中點擊「解壓縮(Unzip)」。系統會在背景自動展開你原本的資料夾結構。

設定主要檔案，為系統指明教材的進入點

• [關鍵動作]－找到解壓縮後的首頁檔案(如 index.html)，點擊圖示並選擇「設定主要檔案(Set main file)」。

• [驗證提示]－設定成功後，該檔名在畫面上會變成粗體，代表 Moodle 已鎖定此檔案為播放入口。

第四步：設定顯示方式 (決定學習體驗)

依據教材包的畫面尺寸，決定最佳的顯示方式

展開下方的「外觀 」設定，並在「顯示」選項中設定：

• 嵌入：網頁直接呈現於 Moodle 的既有框架內，適合輕量級圖文。

• 在彈出視窗中：若教材包畫面極大或包含複雜互動，使用新視窗能提供最純粹的學習體驗。(最建議)

HTML 教材包無痛上架檢查清單

本功能之相關操作影片