載入你的 HTML 簡報

使用說明

基本操作

1. 載入:開啟 AI 產出的 HTML 檔案(或直接貼上原始碼)。
2. 選取:在畫面上點一下元素,底部會顯示「元素路徑」,點路徑可選到外層容器(例如整張卡片而不是裡面的文字);底部左側的狀態標籤會顯示目前是「已選取」還是「編輯文字中」。
3. 改文字:連點兩下元素(或選取後直接打字)進入文字編輯;點旁邊或按 Esc 完成,內容會保留(Ctrl+Z 可復原)。Esc 是兩段式:第一次結束編輯但保留選取(方便接著調樣式),再按一次才取消選取。
4. 改樣式:選取後用右側面板調整字型、顏色、大小、間距。
5. 匯出:按右上角「匯出 HTML」下載編輯後的檔案;原始檔不會被更動。

版面調整

1. 移位置:選取後直接拖曳即可移動,自動吸附對齊參考線與等距提示(和鄰近元素間距相同時顯示粉紅色間距標記);方向鍵微調 1px(Shift=10px);「上移/下移」調整前後順序。
2. 縮放與旋轉:選取後拖曳周圍 8 個白色控點縮放大小(圖片/影片角落等比);拖曳上方綠色控點旋轉(吸附 15°,Shift 任意角度)。
3. 多選:Shift+點擊加選多個元素(畫布或文件結構樹皆可);右側面板可對齊(左/中/右/頂/底)與平均分佈(邊到邊等間距,同 PowerPoint)。注意:對齊/分佈需選同一容器內的元素,且該容器不是彈性佈局(flex/grid)——是的話請改調容器的「多欄佈局」。拖曳、方向鍵、Delete 對整組生效。
4. 畫布縮放:工具列的縮放選單可調整顯示比例;「適應寬度」自動符合簡報寬度,適合小螢幕。
5. 圖層順序:右側「圖層順序」按鈕可把重疊元素移到最上/下層。

樣式與媒體

1. 連結:選取按鈕或任意元素,在「連結」區設定網址或頁內錨點(#開頭),可切換新分頁開啟;非連結元素會自動包上連結。
2. 漸層背景:「背景與外觀」提供雙色漸層與方向;若報告底色是漸層,改「背景顏色」無效,請直接調漸層或先按 ✕ 移除。整頁背景請點底部路徑最左的「🗎 頁面」選取後調整。
3. 換圖片:點選圖片後可上傳新圖或貼網址,也可裁切、旋轉、翻轉。
4. 插入影片:選取任一元素後按「插入影片」,支援本機檔案與 YouTube 連結;點選影片可設定控制列、自動播放、循環、封面圖。
5. 插入元素:工具列「➕ 插入」可加入標題、段落、按鈕、卡片、表格、兩欄容器等;選「圖片」會直接開啟檔案選擇器,選圖即內嵌插入。
6. 格式刷:「複製樣式」→ 選取另一個元素 →「貼上樣式」,快速統一外觀(只寫入有差異的屬性)。

進階與其他

1. 文件結構:左側樹狀圖列出所有元素(依 HTML 階層),點選即可選取,適合選取被覆蓋或不好點的元素;支援完整鍵盤操作——↑↓ 移動、→ 展開/進子層、← 收合/跳父層、Home/End 首末、Enter 選取、Shift/Ctrl+點擊加選。
2. 原始碼:工具列「</> 原始碼」可檢視與修改 HTML,含語法上色與搜尋(顯示第幾筆/共幾筆);開啟時會自動定位並反白目前選取的元素(進階者用)。
3. 自動草稿:編輯內容會自動存在瀏覽器中,意外關閉後重開工具可還原;工具列會顯示最近儲存時間。
4. 預覽模式:暫時關閉編輯、收合側欄、恢復原本的動畫與互動效果,確認實際呈現;頁內錨點連結可捲動。
5. 快速鍵:Ctrl+Z 復原(會選回還原的元素)、Ctrl+Y 重做、Delete/Backspace 刪除選取元素(含子元素的容器會先確認)、Esc 完成編輯/取消選取、方向鍵微調位置。

插入元素

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

HTML 原始碼

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

裁切圖片

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

請確認

插入影片