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

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

徹底解決破圖與失連問題
教師準備的教材包含多個.html 檔案、圖片資料夾、CSS 或JS檔，只需遵循這份標準操作流程，即可讓平台自動串接所有相對路徑。

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

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

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

•   系統自動識別的關鍵：確保教材包的首頁檔名為 index.html 或 default.html。
•  完整封裝：將「整個教材資料夾」(包含所有 HTML、圖片與子資料夾) 壓縮成單一個.zip檔。

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

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

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

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

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

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

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

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

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

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

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

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

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

• 嵌入：網頁直接呈現於 Moodle 的既有框架內，適合輕量級圖文。
• 在彈出視窗中：若教材包畫面極大或包含複雜互動，使用新視窗能提供最純粹的學習體驗。(最建議)

第五步：儲存並測試 (發布與驗證)

儲存設定，課程中展現完美的網頁

點擊「儲存並返回課程」即可發布。

當學生點擊資源時，Moodle 將像伺服器般運行 HTML 教材包，所有的相對路徑(圖片、樣式、連結)都能正常顯示。

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