載入你的 HTML 簡報

使用說明

1. 載入:開啟 AI 產出的 HTML 檔案(或直接貼上原始碼)。
2. 選取:在畫面上點一下元素,底部會顯示「元素路徑」,點路徑可選到外層容器(例如整張卡片而不是裡面的文字);底部左側的狀態標籤會顯示目前是「已選取」還是「編輯文字中」。
3. 改文字:連點兩下元素(或選取後直接打字)進入文字編輯;點旁邊或按 Esc 完成,內容會保留(Ctrl+Z 可復原);完成後會回到未選取狀態。
4. 改樣式:選取後用右側面板調整字型、顏色、大小、間距。
5. 連結:選取按鈕或任意元素,在「連結」區設定網址或頁內錨點(#開頭),可切換新分頁開啟;非連結元素會自動包上連結。
6. 漸層背景:「背景與外觀」提供雙色漸層與方向;若報告底色是漸層,改「背景顏色」無效,請直接調漸層或先按 ✕ 移除。整頁背景請點底部路徑最左的「🗎 頁面」選取後調整。
7. 移位置:選取後直接拖曳即可移動,自動吸附對齊參考線與等距提示(和鄰近元素間距相同時顯示粉紅色間距標記);方向鍵微調 1px(Shift=10px);「上移/下移」調整前後順序。
8. 縮放與旋轉:選取後拖曳周圍 8 個白色控點縮放大小(圖片/影片角落等比);拖曳上方綠色控點旋轉(吸附 15°,Shift 任意角度)。
9. 多選:Shift+點擊加選多個元素;右側面板可對齊(左/中/右/頂/底)與平均分佈(邊到邊等間距,同 PowerPoint);拖曳、方向鍵、Delete 對整組生效。
10. 畫布縮放:工具列的縮放選單可調整顯示比例;「適應寬度」自動符合簡報寬度,適合小螢幕。
11. 圖層順序:右側「圖層順序」按鈕可把重疊元素移到最上/下層。
12. 換圖片:點選圖片後可上傳新圖或貼網址,也可裁切、旋轉、翻轉。
13. 插入影片:選取任一元素後按「插入影片」,支援本機檔案與 YouTube 連結;點選影片可設定控制列、自動播放、循環、封面圖。
14. 插入元素:工具列「➕ 插入」可加入標題、段落、按鈕、卡片、表格、兩欄容器等;選「圖片」會直接開啟檔案選擇器,選圖即內嵌插入。
15. 文件結構:左側樹狀圖列出所有元素(依 HTML 階層),點選即可選取,適合選取被覆蓋或不好點的元素;也可用 Tab + Enter 鍵盤操作。
16. 格式刷:「複製樣式」→ 選取另一個元素 →「貼上樣式」,快速統一外觀。
17. 原始碼:工具列「</> 原始碼」可檢視與修改 HTML,含語法上色與搜尋;開啟時會自動定位並反白目前選取的元素(進階者用)。
18. 自動草稿:編輯內容會自動存在瀏覽器中,意外關閉後重開工具可還原。
19. 預覽模式:暫時關閉編輯、恢復原本的動畫與互動效果,確認實際呈現。
20. 匯出:按右上角「匯出 HTML」下載編輯後的檔案;原始檔不會被更動。
21. 快速鍵:Ctrl+Z 復原、Ctrl+Y 重做、Delete/Backspace 刪除選取元素(含子元素的容器會先確認)、Esc 完成編輯或取消選取、方向鍵微調位置。

插入元素

新元素會插入在目前選取元素的後面(未選取時加到頁面最後);插入後可連點兩下修改文字。

HTML 原始碼

可直接修改原始碼後按「套用」;此功能供進階使用者微調,一般編輯建議使用視覺化介面。

裁切圖片

在圖片上按住滑鼠拖曳,框出要保留的範圍;可重複框選,滿意後按「套用裁切」。

請確認

插入影片