一、帳戶與登入

開始使用 HtmlDrag 前，您需要建立一個帳戶。我們提供多種註冊和登入方式，確保您能快速開始創作。

1.1 註冊帳號

HtmlDrag 採用電子郵件註冊方式，您只需填寫幾項基本資訊即可完成帳戶建立，註冊成功後自動登入並跳轉到首頁。

電子郵件註冊流程

在註冊頁面，按以下步驟完成帳戶建立：

• 輸入電子郵件：填寫您常用的電子郵件地址，該郵箱將作為登入憑證和接收通知的管道。請確保郵箱格式正確，如 [email protected]。
• 設定密碼：密碼必須包含字母和數字，長度在 8-32 位之間。建議使用強密碼以保障帳戶安全。
• 確認密碼：再次輸入密碼，確保兩次輸入一致。
• 設定暱稱（選填）：您可以自訂暱稱，若不填寫，系統將自動為您產生一個預設暱稱。
• 同意服務條款：勾選「我已閱讀並同意《服務條款》和《隱私政策》」後，點擊「立即註冊」按鈕完成註冊。

註冊頁面：輸入電子郵件和基本資訊完成註冊

電子郵件驗證與積分獎勵

註冊成功後，系統會向您的郵箱發送一封驗證郵件。完成郵箱驗證後，您將獲得註冊積分獎勵，可用於 AI 生成和 URL 匯入等付費功能。如果沒有收到郵件，請檢查垃圾郵件資料夾；3 分鐘後可點擊「重新發送」按鈕再次獲取驗證郵件。

提示：完成郵箱驗證不僅能獲得積分獎勵，還能解鎖完整使用體驗並提升帳號安全性。

1.2 登入帳號

HtmlDrag 支援多種登入方式，您可以根據個人偏好選擇最便捷的方式登入。

電子郵件密碼登入

使用註冊時填寫的電子郵件和密碼進行登入：

1. 在登入頁面輸入您的電子郵件地址
2. 輸入密碼（可點擊眼睛圖示切換密碼顯示/隱藏）
3. 點擊「登入」按鈕完成登入

登入成功後，頁面將自動跳轉到首頁，您可以開始創作。

第三方登入（Google / GitHub）

如果您希望更快捷地登入，可以使用 Google 或 GitHub 帳號：

• 使用 Google 帳號登入：點擊「使用 Google 帳號登入」按鈕，在彈出的 Google 授權頁面中選擇您的帳號並確認授權。
• 使用 GitHub 帳號登入：點擊「使用 GitHub 帳號登入」按鈕，頁面將跳轉到 GitHub 授權頁面，確認授權後自動返回 HtmlDrag。

登入頁面：支援電子郵件密碼和第三方帳號登入

提示：使用 Google 或 GitHub 登入可自動建立帳號，無需單獨註冊。首次使用第三方登入時，系統會自動為您建立一個關聯帳戶。

忘記密碼入口

如果您忘記了登入密碼，可以點擊登入頁面右下方的「忘記密碼？」連結，進入密碼重設流程（詳見 1.3 節）。

1.3 找回密碼

如果您忘記了登入密碼，可以透過電子郵件驗證碼重設密碼。整個流程在一個頁面完成，無需跳轉。

重設密碼流程

按照以下步驟完成密碼重設：

1. 輸入電子郵件：填寫您註冊時使用的電子郵件地址
2. 獲取驗證碼：點擊「獲取驗證碼」按鈕，系統會向您的郵箱發送一封包含 6 位數字驗證碼的郵件
3. 輸入驗證碼：在驗證碼輸入框填入您收到的 6 位數字驗證碼
4. 設定新密碼：輸入新密碼（必須包含字母和數字，長度 8-32 位）
5. 確認新密碼：再次輸入新密碼確保一致
6. 點擊“重設密碼”：完成密碼重設，系統提示成功後將自動跳轉到登入頁面

找回密碼：透過電子郵件驗證碼重設密碼

驗證碼有效期

驗證碼有效期有限，請在收到郵件後儘快使用。如果驗證碼已過期，可以點擊“重新發送”按鈕獲取新的驗證碼（需等待倒數結束後才能重新發送）。

注意：如果您的電子郵件尚未在系統中註冊，將無法發送驗證碼。請確認輸入的是註冊時使用的電子郵件地址。

二、個人中心

個人中心是管理您帳戶資訊、作品和訂單的統一入口。點擊右上角頭像即可進入。

個人中心：統一管理帳戶、作品和訂單

2.1 個人資料

個人資料模組讓您管理帳戶的基本資訊，包括頭像、暱稱、電子郵件、個人簡介和密碼設定。

頭像修改

點擊頭像區域的「更換頭像」按鈕，選擇本機圖片檔案上傳。系統會自動裁剪並儲存您的新頭像。

暱稱修改

點擊暱稱旁的編輯按鈕，輸入新的暱稱後點擊「儲存」。暱稱將在您的所有作品和評論中顯示。

電子郵件管理

電子郵件區域顯示當前綁定的郵箱地址及驗證狀態：

• 已驗證：郵箱已完成驗證，可正常使用所有功能
• 未驗證：可點擊「發送驗證郵件」完成驗證，驗證後可獲得積分獎勵
• 修改電子郵件：需先驗證當前郵箱，然後輸入新郵箱地址完成更換

個人簡介

在個人簡介區域輸入您的自我介紹（建議不超過 200 字），點擊「儲存」即可更新。

修改密碼 / 設定密碼

點擊「修改密碼」按鈕開啟密碼設定對話框：

• 已設定密碼的使用者：需輸入當前密碼，然後設定新密碼（8-32位，包含字母和數字）
• 未設定密碼的使用者：直接設定新密碼即可，設定後可使用電子郵件和密碼登入

註銷帳號

如需註銷帳號，點擊頁面底部的「註銷帳號」按鈕。出於安全考量，需要先透過電子郵件驗證碼驗證身分。

注意：提交註銷後，帳號將進入保留期（通常為 30 天），期間無法登入。保留期結束後，系統會永久刪除您的作品、積分和歷史記錄。

個人資料：管理頭像、暱稱、電子郵件和密碼

2.2 容量使用

容量使用模組展示您帳戶的儲存使用情況，協助您了解剩餘空間並合理規劃創作。

容量概覽

頂部顯示整體使用情況，包括：

• 已用容量：當前已使用的儲存空間
• 總容量：您的帳戶儲存上限（Pro享有更大容量）
• 剩餘容量：可用於建立新作品的空間
• 已儲存作品：當前儲存的作品數量及上限

容量分佈

系統將儲存空間分為三類統計：

• HTML 內容：作品的網頁程式碼佔用空間
• 圖片資源：上傳的圖片檔案佔用空間
• 其他資源：其他附加資源佔用空間

作品數量限制

Free和Pro的作品數量上限不同。當達到上限時，需刪除部分作品或升級訂閱後才能建立新作品。

容量重新整理與升級

點擊重新整理按鈕可更新容量資訊。如需更大儲存空間，可點擊「升級擴容」按鈕進入訂閱中心選擇適合的訂閱方案。

提示：如果帳戶容量已滿或作品數量達到上限，系統會凍結新增作品權限。請刪除部分作品或升級訂閱以恢復上傳權限。

2.3 作品管理

作品管理模組集中展示您建立的所有作品，支援檢視、編輯、分享和刪除操作。

作品列表與篩選

作品以卡片或列表形式展示，您可以透過以下方式篩選：

• 搜尋：輸入作品編碼或標題進行搜尋
• 類型篩選：按 AI 生成、檔案上傳、URL 快照、程式碼貼上等類型篩選
• 日期範圍：選擇開始和結束日期篩選特定時間段的作品
• 排序方式：支援按最新優先、最舊優先、按讚數、瀏覽量排序

作品管理：檢視、篩選和管理所有作品

作品檢視與編輯

點擊作品卡片的「檢視」按鈕可預覽作品效果。在預覽介面中，您可以：

• 修改作品標題（雙擊標題編輯）
• 點擊「編輯」按鈕進入視覺化編輯器繼續編輯
• 檢視作品的歷史儲存記錄並恢復到指定版本

分享狀態管理

Pro可以分享作品，讓其他人透過連結檢視：

• 啟用分享：點擊「分享」按鈕產生分享連結，有效期為 7 天
• 更新分享：已分享的作品可更新連結，重新整理有效期
• 停止分享：點擊「停止分享」立即使連結失效

作品刪除

點擊作品卡片的「刪除」按鈕可刪除作品。系統會彈出兩次確認對話框以防止誤刪：

1. 第一次確認：詢問是否刪除該作品
2. 第二次確認：提醒作品刪除後不可恢復

提示：同一時間最多刪除 3 筆記錄。刪除作品後，其佔用的儲存空間會被釋放。

2.4 積分記錄

積分記錄模組展示您帳戶的積分交易歷史，包括消耗和獲取記錄。

積分交易歷史

積分記錄以表格形式展示，包含以下資訊：

• 日期：積分變動的時間
• 類型：積分變動的操作類型
• 積分變化：增加（正數）或減少（負數）的積分數量
• 描述：詳細的變動說明

您可以透過日期範圍篩選檢視特定時間段的記錄。

積分類型說明

• AI 生成：使用 AI 生成功能時消耗積分
• URL 快照：使用 URL 匯入功能時消耗積分
• 註冊獎勵：新使用者註冊並完成郵箱驗證後獲得的積分獎勵
• 平台贈送：平台贈送的積分
• 訂閱贈送：Pro每月贈送的積分額度
• 購買積分：透過積分儲值獲得的積分
• 管理員調整：由管理員手動調整的積分

積分記錄：檢視積分收支明細

提示：Pro每月可獲得額外的贈送積分，積分可用於 AI 生成和 URL 匯入等付費功能。

2.5 訂單記錄

訂單記錄模組展示您的購買歷史和支付記錄，方便您查詢和管理訂單。

訂單管理

訂單列表展示您的購買記錄，您可以：

• 檢視訂單狀態和詳情
• 透過篩選功能快速查找特定訂單
• 對待支付訂單繼續完成支付
• 關閉或刪除不需要的訂單

提示：如果訂單支付遇到問題，可以關閉當前訂單後重新下單。

2.6 我的作品

我的作品頁面是您檢視和管理所有創作的專屬空間。透過左側導覽列或使用者選單均可快速存取。

作品展示

頁面以卡片形式展示您的所有作品，每個卡片包含：

• 縮圖預覽：作品的視覺預覽，方便快速識別
• 作品標題：顯示作品名稱，支援點擊編輯
• 建立時間：記錄作品的建立日期
• 分享狀態：顯示作品是否已開啟分享

我的作品：集中檢視和管理您的所有創作

快捷操作

每個作品卡片提供便捷的操作按鈕：

• 編輯：進入視覺化編輯器繼續創作
• 分享：產生或管理分享連結（Pro專享）

三、欄目導覽

HtmlDrag 提供多種方式將內容匯入編輯器，涵蓋從零創作到二次加工的所有場景。左側導覽列可快速切換不同入口。

左側導覽：快速切換不同建立入口

3.1 首頁

首頁是 HtmlDrag 的預設入口，整合了 AI 生成功能。您可以在此輸入文案內容，快速產生專業的網頁設計。

3.2 URL 匯入

URL 匯入功能讓您可以輸入任意公開網頁連結，系統會自動擷取頁面內容並產生可編輯的作品。這是快速取得現有網頁設計、進行二次加工的理想方式。

輸入網址

在輸入框中貼上您要取得的網頁地址。僅支援公開的 http/https 連結，內網或本機地址暫不支援。

URL 匯入：輸入網址，一鍵取得網頁

積分扣除確認

點擊「開始取得」後，系統會彈出積分扣除確認彈窗，顯示本次操作所需積分、當前積分餘額以及本月贈送積分餘額。確認後將優先扣除本月贈送積分，不足部分從當前積分中扣除。

取得進度與狀態

確認後系統開始取得頁面內容。取得過程中請勿離開此頁面，以免導致取得中斷。取得成功後將自動跳轉至編輯頁面。

溫馨提示：

部分網站無法取得：需要登入驗證的網站、使用複雜前端框架的網站（如部分 SPA 應用）可能無法取得或取得不完整。

音視訊類網站：音訊、視訊類網站的動態內容可能無法正常擷取。

頁面過大：如果頁面內容超出伺服器允許的大小，取得可能失敗，建議嘗試更精簡的頁面。

3.3 檔案上傳

檔案上傳功能讓您可以將本機的 HTML 檔案匯入 HtmlDrag，系統會進行安全掃描並產生可編輯的作品。適合已有 HTML 範本或郵件設計需要二次編輯的場景。

檔案格式與大小限制

支援 .html 和 .htm 格式的檔案。單個檔案大小建議不超過系統限制（具體限制請參見上傳介面提示）。上傳檔案入庫會進行進階最佳化處理，實際佔用空間可能明顯大於原始檔案，請確保剩餘容量充足。

檔案上傳：拖曳或點擊上傳 HTML 檔案

安全檢測說明

系統會對上傳的檔案進行安全掃描，檢測並移除潛在的惡意指令碼、危險標籤和可疑外部資源。根據風險等級（低風險、中風險、高風險、嚴重風險），系統會給出相應的提示或阻止儲存。

注意：請勿上傳包含惡意程式碼的檔案，違規上傳可能導致帳號被停權。

預覽與儲存

檔案解析完成後，您可以在預覽區檢視效果。確認無誤後點擊「儲存作品」，即可將作品儲存至您的帳戶，隨時進入視覺化編輯器進行編輯。

3.4 程式碼貼上

程式碼貼上功能允許您直接貼上 HTML 程式碼，系統會進行安全掃描並轉換為視覺化設計。這是最靈活的匯入方式，適合開發者或需要精確控制程式碼的使用者。

貼上 HTML 程式碼

在程式碼輸入區域貼上您的 HTML 程式碼。您可以選擇性地填寫作品標題（如不填寫，系統會使用預設名稱「未命名作品」）。

程式碼貼上：直接貼上 HTML 程式碼開始編輯

安全檢測說明

與檔案上傳類似，系統會對貼上的程式碼進行安全檢測。如果程式碼風險等級過高，系統安全策略將拒絕處理此內容，請檢查程式碼後再試。

注意：請勿貼上惡意程式碼或指令碼，違規使用可能導致帳號被停權。

產生預覽與儲存

輸入程式碼後，點擊「產生預覽」按鈕。程式碼安全檢測通過後，預覽將自動產生。確認效果後點擊「儲存作品」即可將作品儲存至帳戶。

3.5 AI創造

AI創造適合從已有素材開始：準備 PDF、PPT/PPTX、Excel/XLSX、CSV、Word、Markdown、TXT、JPG/PNG，或直接寫一段自訂需求。提交前建議說明頁面目標，例如資料整理、產品介紹、活動招募、課程報名、內部說明、資料摘要、銷售跟進、作品集展示或臨時測試頁。

1. 上傳素材或輸入需求，並補充目標使用者、頁面用途與風格方向。
2. 讓 AI 提取重點，整理成標題、段落、清單、卡片與分區，而不是整段貼回原文。
3. 檢查生成結果，確認內容是否完整、層級是否清楚，圖片、表格與文字是否需要重排或刪減。
4. 進入 HtmlDrag 畫布繼續精修，改字、換圖、拖曳模組、調整顏色與版面。
5. 確認效果後儲存、分享或下載 HTML。

長文本適合先整理結構，表格適合轉成摘要或對比模組，PPT 適合重組敘事順序，圖片適合拆成可編輯視覺塊，PDF 適合把不方便修改的內容重新整理出來。

3.6 訂閱中心

訂閱中心頁面是管理您的訂閱和積分儲值的入口。選擇適合您的方案，解鎖更多創作可能。

訂閱方案

HtmlDrag 提供 Pro 和 Pro Max 訂閱方案，訂閱後可在有效期間使用對應權益：

Pro：適合一般創作者使用完整的 HTML 編輯、AI 生成、分享與匯出能力。

Pro Max：適合更高頻的 AI 創作、更大的專案和更高配額需求。

訂閱會按照結帳頁顯示的計費週期續訂，您可以在帳戶或支付平台中管理或取消續訂。

訂閱中心：選擇適合您的訂閱方案

積分儲值

如果您只需要臨時使用 AI 生成或 URL 匯入功能，可以選擇積分儲值。儲值的積分永久有效，不會過期，積分不足時可隨時儲值，無需等待。

功能對比

Free 與 Pro 的主要功能差異如下：

功能	Free	Pro
AI 智慧產生作品	✓	✓
所有範本與風格	✓	✓
視覺化編輯器	✓	✓
下載 PNG 圖片	✓	✓
下載作品為 HTML	✗	✓
分享作品	✗	✓
原始碼即時編輯	✗	✓
每月贈送積分	基礎額度	高級額度
儲存容量	基礎容量	更大容量

積分使用說明

每次 AI 產生作品消耗固定積分。Free每月獲得基礎贈送積分，Pro每月獲得更多贈送積分。儲值的積分永久有效，不會過期，積分不足時可隨時儲值，無需等待額度恢復。

3.7 歷史記錄

在左側導覽列中，「我的作品」（歷史記錄）是您快速存取過往創作的入口。這裡按時間順序列出了您所有的編輯記錄。

快速選擇編輯

點擊列表中的任意記錄，即可快速載入編輯器，繼續之前的創作。無需重新匯入或查找檔案。

預覽視窗詳情

將滑鼠懸停在歷史記錄條目上，會顯示該作品的預覽視窗。在預覽視窗中，您可以：

• 直接編輯標題：點擊標題文字即可直接修改作品名稱。
• 檢視分享狀態：圖示指示該作品是否已開啟分享。
• 快速操作：提供進入編輯、刪除等快捷按鈕。

歷史記錄：快速預覽和管理過往作品

四、視覺化編輯器

HtmlDrag 的核心是一個強大的所見即所得編輯器，讓您在真實的 HTML 環境中直接操作，告別程式碼編輯的繁瑣。

4.1 編輯器介面概覽

編輯器採用經典的三欄式佈局，左側為導覽與歷史作品列表，中間為畫布預覽區，右側為功能面板。頂部和底部分別提供作品操作和編輯控制按鈕。

編輯器介面：左側導覽、中間畫布、右側面板

左側導覽與歷史作品

左側導覽列提供快速切換入口，點擊「我的作品」可展開歷史作品列表，支援快速定位和切換編輯。已分享的作品會顯示「已分享」標識，方便您管理分享狀態。

中間畫布區域

畫布區域是作品的即時預覽視窗，您可以在此直接選中、拖曳、編輯頁面元素。支援縮放和平移操作，透過底部的縮放控制器可調整視圖比例。畫布會即時反映您的所有編輯操作。

右側面板（編輯/元件/管理/收藏）

右側面板包含四個功能標籤頁：編輯（樣式調整與模式切換）、元件（插入新元素）、管理（圖層列表與批次操作）、收藏（個人元件庫）。點擊標籤即可切換不同功能區。

頂部標題列與操作按鈕

頂部顯示作品標題（雙擊可編輯），右側提供分享、下載為圖片、下載為 HTML 等快捷操作按鈕。部分功能需要Pro 權限。

底部操作列

底部操作列提供預覽（新視窗開啟）、復原、重做、重新整理預覽、還原至上次儲存、還原 HTML 為最初狀態、儲存等核心編輯控制按鈕。

4.2 基礎操作

HtmlDrag 提供直覺的視覺化操作方式，透過滑鼠懸停、單擊、雙擊和右鍵即可完成大部分編輯任務。

元素識別

將滑鼠懸停在畫布上的任意元素上，系統會自動識別並顯示虛線邊框，協助您快速定位可操作的元素。識別範圍包括文字、圖片、按鈕、容器等各類 HTML 元素。

元素識別：滑鼠懸停時顯示虛線框

拖曳模式

單擊任意元素即可進入拖曳模式，此時元素周圍會顯示選中邊框和八個縮放手柄。您可以：直接拖動元素改變位置；拖動四角手柄等比縮放；拖動邊緣手柄單向縮放。選中狀態下，右側「編輯」面板會顯示該元素的樣式屬性供您調整。

拖曳模式：單擊選中元素，自由移動和縮放

編輯模式

雙擊文字元素即可進入編輯模式，此時游標會定位到文字內部，您可以直接修改文字內容。編輯模式下，右側面板會顯示文字樣式工具，支援字型、字號、顏色、粗體、斜體等格式調整。點擊元素外部區域或按 Esc 鍵可退出編輯模式。

編輯模式：雙擊進入，直接編輯文字內容

快捷選單

右鍵點擊選中的元素可開啟快捷選單，提供複製、貼上、收藏、連結編輯、圖層調整、鎖定、隱藏、刪除等常用操作。詳細說明請參見 4.9 右鍵快捷選單。

批次操作

按住 Shift 鍵並依次點擊多個元素，可同時選中多個物件進行批次操作。多選狀態下，右側面板會顯示對齊工具（左緣對齊、水平置中、右緣對齊、上緣對齊、垂直置中、下緣對齊、水平/垂直平均分佈），方便您快速對齊和排列元素。

批次操作：按住 Shift 點擊多選元素

4.3 我的作品快捷操作列

編輯器左側提供「我的作品」快捷操作列，支援展開/收起和快速切換作品，方便您在多個創作之間流暢跳轉。

展開與收起

點擊左上角的「我的作品」按鈕，可展開作品列表側邊欄。再次點擊或點擊側邊欄外的區域即可收起。展開狀態下，您可以直觀地瀏覽歷史作品縮圖和標題。

作品切換

在列表中點擊任意作品卡片，編輯器將立即載入該作品的內容。這使您無需返回首頁或個人中心，即可在不同設計方案之間快速比對和修改。

4.4 畫布快捷鍵

熟練使用快捷鍵可以大幅提升編輯效率。以下是畫布區域支援的主要快捷鍵操作：

操作	快捷鍵
縮放	Ctrl / Cmd + 滑鼠滾輪
平移	空白鍵 + 滑鼠拖曳
多選	Shift + 單擊
複製	Ctrl / Cmd + C
貼上	Ctrl / Cmd + V
復原	Ctrl / Cmd + Z
刪除	Delete / Backspace

4.5 右側面板 - 編輯欄目

「編輯」欄目是最常用的功能區，提供模式切換開關和豐富的樣式調整工具。選中元素後，面板會根據元素類型智慧顯示對應的編輯選項。

編輯欄目：模式切換與樣式工具

模式切換

面板頂部提供四個模式開關，用於控制編輯器的互動行為。每個開關都可獨立開啟或關閉，開關狀態會透過訊息提示告知當前狀態。

模式	功能說明
元件編輯	開啟後可選擇和調整帶互動的功能元件（如按鈕、表單輸入框等）；關閉時僅可編輯純文字內容。適合需要精確操作表單元素的場景。
連結跳轉	開啟後，在編輯態點擊帶連結的元素會直接跳轉到目標地址；關閉則阻止跳轉，方便您編輯連結元素本身。注意：此設定不影響預覽和下載後的連結功能。
刪除模式	開啟後可直接點擊元素進行刪除，無需右鍵選單；關閉則恢復普通編輯模式。適合需要快速清理多個元素的場景。
裝飾層	開啟後可識別和編輯空容器、裝飾層元素（如純邊框容器、背景層等）；關閉則僅識別有實際內容的元素。對於複雜佈局的頁面，開啟此功能可以更精細地調整裝飾性元素。

提示：為了編輯元件，系統已預設阻止作品裡的連結跳轉。如需要開啟，可在編輯台區域開啟「連結跳轉」開關。編輯模式下表單提交也會被阻止，以保護您的編輯內容。

文字樣式

選中文字元素或進入編輯模式後，面板會顯示完整的文字樣式工具。支援以下格式調整：

文字樣式：字型、字號、顏色等設定

功能	說明
字型選擇	提供系統字型、英文字型（如 Inter、Roboto、Open Sans 等）和中文字型（如宋體、黑體、微軟正黑體、思源黑體等）多種選擇。
字號設定	支援 12px 到 72px 多種預設字號，也可手動輸入自訂大小。
文字顏色 / 背景顏色	透過顏色選擇器設定文字顏色和背景螢光色，支援從畫布取色功能。
粗體、斜體、底線、刪除線	一鍵切換文字的粗體、斜體、底線、刪除線效果。
對齊方式	支援靠左對齊、置中、靠右對齊、左右對齊四種文字對齊方式。
行高、字元間距、段落間距	精細調整行高（1 倍至 3 倍）、字元間距和段落間距，最佳化文字排版。
上標、下標	將選中文字設為上標或下標格式，適合數學公式、化學式等場景。
項目符號、編號列表	快速將文字轉換為無序列表（項目符號）或有序列表（編號列表）。
縮排控制	增加縮排或減少縮排，調整段落層級結構。

元素樣式

選中任意元素後，可透過元素樣式工具調整其外觀屬性：

功能	說明
邊框樣式	設定邊框類型（無、實線、虛線、點線）、寬度（1px-10px）和顏色。點擊「清除邊框」可快速移除所有邊框。
圓角設定	調整元素四角的圓角半徑，可建立圓角矩形或圓形效果。
透明度	透過滑桿調整元素的不透明度（0%-100%），實現半透明效果。
陰影效果	提供四種陰影預設——無陰影、淺陰影、中等陰影、深陰影，快速添加立體感。
位置與尺寸	精確設定元素的 X/Y 座標位置和寬度/高度數值。
鎖定比例	開啟後調整寬度時高度會等比縮放，保持元素原始比例。

圖片樣式

選中圖片元素後，可調整圖片的顯示方式和進行圖片替換：

功能	說明
填充方式	提供四種圖片適配模式——等比縮放（contain）、鋪滿（cover）、拉伸填滿（fill）、原尺寸（none）。
位置調整	透過九宮格定位器設定圖片在容器內的對齊位置（左上、上中、右上、左中、置中、右中、左下、下中、右下）。
替換圖片	支援本機上傳新圖片或輸入網路圖片地址進行替換。本機上傳支援 JPG、PNG、GIF、WebP 等常見格式。

表格樣式

選中表格或表格儲存格後，可使用專用的表格編輯工具調整表格結構和樣式。詳細說明請參見 4.10 表格編輯。

表格樣式：行列操作、邊框和儲存格設定

功能	說明
行列操作	支援在當前行上方/下方插入新行，在當前列左側/右側插入新列，以及刪除行/列操作。
儲存格對齊	設定儲存格內容的水平對齊（左、中、右）和垂直對齊（上、中、下）。
邊框樣式	調整表格邊框寬度、樣式（實線、虛線等）和顏色。
儲存格背景	為儲存格設定背景顏色，適合突出顯示表頭或重要資料。
合併/拆分	選中多個相鄰儲存格後可合併為一個，已合併的儲存格可拆分還原。

連結編輯

可為任意元素新增點擊跳轉連結，或編輯已有連結：

功能	說明
插入/編輯連結	輸入目標 URL 地址，為選中元素新增點擊跳轉功能。支援 http/https 連結。
清除連結	移除元素上的連結，恢復為普通元素。系統會提示將移除的連結數量，確認後執行。

對齊工具（多選時可用）

當選中多個元素時，面板會顯示對齊和分佈工具，協助您快速整理元素佈局：

功能	說明
左緣/右緣/上緣/下緣對齊	將所有選中元素對齊到最左/最右/最上/最下元素的邊緣。
水平置中/垂直置中	將所有選中元素的中心點在水平或垂直方向上對齊。
水平/垂直平均分佈	將選中的多個元素在水平或垂直方向上等間距分佈。

4.6 右側面板 - 元件欄目

「元件」欄目提供各類可插入元素的快捷入口，協助您快速向畫布新增內容。點擊對應按鈕即可在畫布中插入相應元件。

元件欄目：一鍵插入各類元素

元件	說明
插入文字	在畫布中插入一個可編輯的文字區塊，插入後可雙擊進入編輯模式修改內容。
插入按鈕	插入一個預設樣式的按鈕元素，可編輯按鈕文字並新增點擊連結。
插入圖片	開啟圖片上傳彈窗，支援本機上傳或輸入網路圖片地址。單個檔案大小和批次上傳數量有限制，具體請參見上傳介面提示。
插入圖示	開啟圖示選擇器，提供六大分類——箭頭、形狀、符號、社交、裝飾、常用。可設定圖示顏色和大小後插入。
插入表格	開啟表格尺寸選擇器，透過滑鼠懸停選擇所需的行列數（如 3×4 表格），點擊確認後插入。
插入連結	在畫布中插入一個帶連結的文字元素，需輸入連結地址和顯示文字。
插入矩形/圓形	插入基礎形狀元素，可透過元素樣式調整邊框、背景色、圓角等屬性，用於裝飾或佈局。

4.7 右側面板 - 管理欄目

「管理」欄目提供畫布中所有可編輯元素的列表視圖，支援篩選、批次操作和精確定位，是管理複雜頁面元素的利器。

管理欄目：圖層管理與批次操作

元素卡片列表

面板以卡片形式列出頁面中所有可管理的元素。每張卡片顯示元素的標籤類型（如 DIV、IMG、SPAN）和層級資訊，文字元素還會顯示內容預覽。裝飾層元素會標註「裝飾」徽章。卡片右側提供鎖定/解鎖和隱藏/顯示的快捷操作圖示。

篩選功能

點擊篩選按鈕可按元素狀態過濾列表，支援以下篩選條件：

篩選條件	說明
全部	顯示所有可管理元素
已鎖定	僅顯示被鎖定的元素
未鎖定	僅顯示未鎖定的元素
已隱藏	僅顯示被隱藏的元素
未隱藏	僅顯示可見的元素

批次操作

在卡片列表中勾選多個元素後，可使用批次操作按鈕進行統一處理：

操作	說明
全選/反選	快速選中全部元素或反轉當前選擇
鎖定所選/解鎖所選	批次鎖定或解鎖選中的元素，鎖定後元素無法被編輯或移動
隱藏所選/顯示所選	批次隱藏或顯示選中的元素，隱藏的元素在畫布上不可見但保留在 HTML 中
刪除所選	批次刪除選中的元素，操作前會提示確認

精準識別開關

管理欄目提供精準識別開關，用於控制元素識別的精度：

狀態	說明
開啟精準識別	自動去重，僅保留宿主元素，減少重複卡片
關閉精準識別	顯示所有候選元素（含內聯分片），適合需要精確操作內聯元素的場景

點擊卡片定位元素

點擊任意元素卡片，畫布會自動捲動並高亮顯示對應的元素，方便您快速定位頁面中的特定元件。這在處理複雜或層疊的頁面佈局時特別有用。

4.8 右側面板 - 收藏欄目

「收藏」欄目是您的個人元件庫，可以將常用的元素或元件收藏起來，在不同作品中重複使用，提高創作效率。

收藏欄目：個人元件庫

收藏元件列表

面板以卡片形式展示您收藏的所有元件，每張卡片顯示元件的縮圖和名稱。收藏時系統會自動產生縮圖，未命名的元件顯示為「未命名」。

搜尋收藏

使用搜尋框可以按名稱快速查找收藏的元件。輸入關鍵字後，列表會即時過濾顯示符合的結果。

插入收藏元件

點擊收藏卡片上的「插入」按鈕，即可將該元件插入到當前畫布中。插入後的元件可以正常編輯和調整。

重新命名/刪除收藏

每張收藏卡片提供「重新命名」和「刪除」操作。點擊重新命名可修改元件名稱，方便後續查找；刪除操作會永久移除該收藏，請謹慎操作。

如何收藏元件

在畫布中選中任意元素，透過右鍵選單選擇「收藏」，即可將該元素及其子元素作為元件儲存到收藏庫。收藏成功後會顯示「已新增到收藏」提示。

4.9 右鍵快捷選單

右鍵點擊選中的元素會彈出快捷選單，提供常用操作的快速入口。選單內容會根據選中元素的類型動態調整。

右鍵選單：快速存取常用操作

選單項	說明
複製 / 貼上	複製當前選中的元素到剪貼簿，或將剪貼簿內容貼上到畫布中。支援跨作品複製貼上。
收藏	將選中元素儲存到個人收藏庫，方便在其他作品中重複使用。
新增/編輯/清除連結	為元素新增點擊跳轉連結，或編輯/清除已有連結。清除連結時會提示確認操作。
替換圖片	僅對圖片元素顯示，可快速替換為本機上傳或網路圖片。
上移一層 / 下移一層	調整元素在層疊順序中的位置，上移使元素更靠前顯示。
置於頂層 / 置於底層	將元素直接移到所有元素的最前面或最後面。
鎖定 / 解鎖	鎖定元素後無法編輯或移動，防止誤操作。解鎖後恢復可編輯狀態。
隱藏 / 顯示	暫時隱藏元素，在畫布上不可見但保留在 HTML 中。顯示可恢復元素可見性。
刪除	永久刪除選中的元素。批次選中時會顯示刪除數量。

表格專屬選單

當右鍵點擊表格儲存格時，選單會額外顯示表格專屬操作：

選單項	說明
刪除行	刪除當前儲存格所在的整行（無法刪除最後一行）
刪除列	刪除當前儲存格所在的整列（無法刪除最後一列）

4.10 表格編輯

選中表格或表格儲存格後，右側面板會顯示專用的表格編輯工具，提供完整的表格樣式和結構調整功能。

表格編輯：行列操作與樣式設定

行列操作

表格編輯面板的「行列操作」區域提供以下功能：

操作	說明
上方插入行 / 下方插入行	在當前行的上方或下方插入新行
刪除行	刪除當前選中的行（無法刪除最後一行）
左側插入列 / 右側插入列	在當前列的左側或右側插入新列
刪除列	刪除當前選中的列（無法刪除最後一列）

合併/拆分儲存格

選中多個相鄰儲存格後，可使用「合併儲存格」將它們合併為一個儲存格。對於已合併的儲存格，可使用「拆分儲存格」將其還原為原始的多個儲存格。

儲存格對齊

設定儲存格內容的對齊方式，分為水平和垂直兩個維度：

維度	選項
水平對齊	靠左對齊、置中、靠右對齊
垂直對齊	頂部對齊、垂直置中、底部對齊

邊框樣式

自訂表格邊框的外觀，包括：

屬性	說明
邊框寬度	設定邊框粗細
邊框樣式	實線、虛線、點線、雙線、無邊框
邊框顏色	透過顏色選擇器設定邊框顏色

設定完成後點擊「套用」按鈕生效。

儲存格底紋

為儲存格設定背景顏色，透過顏色選擇器選擇所需的底紋色，適合用於突出顯示表頭或重要資料行。

4.11 縮放控制與視口

縮放控制器位於畫布底部，提供畫布縮放和視口尺寸調整功能，協助您在不同裝置尺寸下預覽作品效果。

縮放控制：調整畫布縮放和視口尺寸

放大/縮小/重設

使用「+」和「-」按鈕可放大或縮小畫布視圖，也可以按住 Ctrl/Cmd + 滑鼠滾輪快速縮放。點擊百分比數字可重設為預設縮放比例。按住空白鍵 + 滑鼠拖曳可平移畫布。

視口尺寸預設

點擊視口選擇器可切換不同的預覽尺寸，模擬在不同裝置上的顯示效果：

視口尺寸	說明
自動	按內容尺寸配對，適合大多數場景
桌面 1920×1080（預設）	全高清桌面顯示器
桌面 1440×900	常見筆記型電腦螢幕
桌面 1366×768	主流筆記型電腦解析度
桌面 1280×720	HD 解析度
平板 1024×768	標準平板裝置
手機 375×812	iPhone 等行動裝置

預覽補丁

對於特殊結構的 HTML 頁面，系統提供三種預覽補丁來最佳化顯示效果。啟用或關閉補丁後，系統會自動儲存並重新整理預覽：

補丁	說明
USP（穩態視口增強顯示）	最佳化超長或無邊界畫布，減少抖動。適用於複雜/無邊界靜態檔案
UFP（固定視窗增強顯示）	限定視窗寬度，恢復複雜佈局的正常顯示
SHP（特殊HTML增強顯示）	最佳化特殊結構的 HTML 以提升相容性

提示：如果補丁效果不明顯，可執行一次「還原 HTML 為最初狀態」後再嘗試啟用。

4.12 HTML 原始碼編輯器

HTML 原始碼編輯器允許您直接檢視和編輯作品的完整 HTML 程式碼，適合需要精細調整或新增自訂程式碼的進階使用者。此功能僅對Pro開放。

HTML 編輯器：直接編輯原始碼（Pro）

檢視/編輯完整 HTML

開啟 HTML 編輯器後，會顯示當前作品的完整 HTML 原始碼（包含 <!DOCTYPE html>）。您可以直接在編輯器中修改程式碼，儲存後即可套用更改。

搜尋與取代

使用 Ctrl+F 開啟尋找功能，輸入關鍵字可快速定位程式碼位置。使用 Ctrl+H 開啟取代功能，可批次取代文字內容。工具列顯示配對計數（如 "3 / 15"），支援逐個或全部取代。

跳轉到行

使用 Ctrl+G 或工具列的跳轉功能，輸入行號可快速定位到指定行，方便處理大型 HTML 檔案。

區分大小寫

搜尋時可開啟「區分大小寫」選項，精確配對大小寫敏感的內容。

自動換行

開啟自動換行後，過長的程式碼行會自動折行顯示，無需水平捲動即可檢視完整內容。

複製/儲存

點擊「複製 HTML」可將完整原始碼複製到剪貼簿。編輯完成後，點擊儲存按鈕將更改套用到作品。如果內容為空或存在語法錯誤，儲存時會提示相應資訊。

注意：如果 HTML 內容過大超出容量限制，儲存時會提示「容量不足，無法儲存此次編輯」。請刪除不必要的內容或升級訂閱以擴容。

4.13 底部操作列

底部操作列提供編輯器最核心的操作按鈕，包括預覽、復原/重做、還原和儲存等功能。

底部操作列：預覽、儲存與還原

預覽（新視窗開啟）

點擊預覽按鈕會在新視窗中開啟作品的完整預覽頁面，展示作品的真實顯示效果。預覽頁面會顯示臨時預覽提示，提醒使用者這是編輯階段的預覽，連結不可複用。

復原/重做

復原可回退上一步操作，重做可恢復被復原的操作。支援多步復原/重做。也可使用快捷鍵 Ctrl+Z（復原）和 Ctrl+Y（重做）。

重新整理預覽

點擊重新整理按鈕會重新載入預覽區域。系統會先儲存當前內容，然後重新整理畫布顯示最新效果。適合在進行大量編輯後同步顯示狀態。

還原至上一次儲存

將作品恢復到上一次手動儲存的狀態。所有未儲存的編輯都會遺失，請謹慎操作。系統會在執行前提示確認。

還原 HTML 為最初狀態

將作品的 HTML 恢復到首次建立時的原始狀態。所有編輯歷史都會清除。此操作不可逆，請確保已備份重要內容。

儲存

手動儲存當前作品的所有更改。系統也支援自動儲存，但建議在完成重要編輯後手動儲存確保資料安全。儲存成功後會顯示「儲存成功」提示。

4.14 頂部操作欄

頂部操作欄顯示作品資訊和快捷操作按鈕，提供分享和下載功能的快速入口。

頂部操作欄：標題、分享與下載

作品標題（雙擊編輯）

頂部顯示當前作品的標題，雙擊標題區域可進入編輯模式，修改作品名稱。標題不能為空，修改成功後會顯示「標題修改成功」提示。未命名的作品顯示為「未命名作品」。

分享按鈕

點擊分享按鈕可開啟作品分享功能，產生可存取的分享連結。詳細說明請參見 4.16 分享功能。此功能僅對Pro開放。

下載按鈕

右側提供「下載圖片」和「下載 HTML」按鈕。詳細下載選項和說明請參見 4.15 下載作品。

4.15 下載作品

HtmlDrag 提供靈活的匯出選項，您可以將作品下載為圖片或標準 HTML 檔案，滿足分享、存檔或進一步開發的需求。

下載為圖片

點擊頂部列的「下載圖片」按鈕，系統會將當前畫布的完整內容產生一張高清 PNG 圖片並自動下載。這非常適合用於設計稿展示、社群媒體分享或作為預覽圖。

下載為 HTML

Pro可以將作品匯出為標準的 HTML 原始碼檔案。點擊「下載 HTML」按鈕，系統會提供兩種選擇：

• 下載當前 HTML：包含您在編輯器中所做的所有修改和調整，所見即所得。
• 下載原始 HTML：匯出作品最初建立時的原始程式碼，不包含後續的編輯內容。

下載選項：選擇下載當前編輯版本或原始版本

4.16 分享功能

分享功能允許您將作品產生一個公開存取的連結，方便與他人分享您的創作成果。分享頁面還提供存取統計資料。此功能僅對Pro開放。

分享設定：管理分享連結和狀態

分享設定與管理

• 開啟分享：點擊分享按鈕後，系統會產生一個唯一的分享連結。首次開啟時會顯示「分享已啟用，連結已複製到剪貼簿」提示。
• 有效期：分享連結預設有效期為 7 天。您可以在分享彈窗中檢視具體的過期時間。
• 更新時間：如果連結即將過期，或者您希望延長分享時間，可點擊「更新分享連結」重設有效期。
• 停止分享：點擊「停止分享」可立即使當前連結失效，訪客將無法再檢視該作品。
• 複製連結：點擊複製按鈕可將分享連結複製到剪貼簿。

分享頁面與統計

訪客開啟分享連結後，將看到作品的獨立展示頁面。頁面右側邊欄顯示作品資訊，包括：

• 作品標題與作者：展示您的暱稱和作品標題。
• 存取資料：您可以檢視作品的瀏覽量和按讚數，了解作品的受歡迎程度。
• 過期時間：顯示分享連結的失效時間。

分享頁面：訪客視角與資料統計

注意：如果作品因被檢舉並核實違規內容，系統可能會禁止該作品的分享功能，並提示「該作品因被檢舉並核實，已被系統禁止分享」。

五、其他功能

除了核心編輯功能外，HtmlDrag 還提供訊息和意見回饋等輔助功能，協助您及時取得系統通知並與我們溝通。

5.1 訊息

訊息模組用於接收系統傳送的重要通知，包括帳戶狀態、訂單提醒、訂閱到期提醒以及功能更新公告等。

訊息：接收系統通知和提醒

系統訊息列表

訊息列表按時間倒序排列，展示訊息的標題、摘要、建立時間及過期時間。點擊單條訊息可檢視詳情或進行相關操作（如「繼續支付」、「前往續費」等）。

未讀篩選

勾選列表右上角的「只看未讀」核取方塊，可快速篩選出所有未讀訊息，協助您聚焦重要通知。

全部標記已讀

點擊「全部標記已讀」按鈕，可一鍵將當前列表中的所有訊息狀態更新為已讀，消除紅點提示。

訊息詳情

點擊訊息卡片進入詳情頁，檢視完整的通知內容。對於訂單或訂閱相關的訊息，詳情頁通常會提供快捷跳轉按鈕，方便您處理相關事務。

5.2 意見回饋

如果您在使用過程中遇到問題或有功能建議，可以透過意見回饋模組提交給我們。支援上傳圖片以更直觀地描述問題。

意見回饋：提交問題或建議

回饋列表與狀態

回饋列表展示您提交的所有歷史回饋及其當前狀態。狀態包括：

• 處理中：回饋已提交，等待管理員查閱。
• 已回覆：管理員已對您的回饋進行了回覆，請點擊檢視。
• 已關閉：該回饋已歸檔或問題已解決，無法繼續回覆。

提交新回饋

點擊「新建回饋」按鈕，填寫回饋內容（必填，至少10個字）。您還可以點擊「上傳圖片」新增相關截圖（最多支援上傳特定數量的圖片，單張大小限制為2MB），協助我們更快定位問題。填寫完成後點擊「提交回饋」。

回饋詳情與對話紀錄

點擊回饋列表項進入詳情頁，您可以檢視完整的對話紀錄，包括您的提問和管理員的回覆。頁面上方會顯示回饋ID和附件圖片預覽。

繼續回覆

對於「處理中」或「已回覆」狀態的回饋，您可以在詳情頁底部的輸入框中繼續補充內容或回覆管理員，保持溝通直至問題解決。

在提交回饋時，您可以選擇新增相關截圖或檔案，協助我們更好地理解您的需求。同時，您也可以在回饋詳情頁中檢視管理員的回覆和對話紀錄，方便您追蹤問題的處理進展。

我們重視每一條回饋，並會盡快處理您的回饋。感謝您的參與和支持！

六、系統提示

在使用過程中，您可能會遇到系統發出的各類檢測提示或限制提醒。以下是常見系統提示的說明與應對建議。

6.1 HTML 檢測提示

為了保證匯入效果和編輯體驗，系統會在匯入 URL 或上傳檔案時進行自動檢測，並對潛在問題發出提示。

本機資源檢測

如果匯入的頁面包含本機路徑（如 file:// 或 C:/ 開頭的圖片/CSS連結），系統會提示資源無法載入。建議：確保所有資源均使用公開的 HTTP/HTTPS 網路連結。

圖片防盜連結提示

部分網站對圖片啟用了防盜連結保護，導致在編輯器中無法顯示。建議：使用「替換圖片」功能上傳本機圖片，或將圖片轉存到可公開存取的圖床。

動態渲染頁面（SPA）提示

對於完全依賴 JavaScript 動態渲染的單頁應用（SPA），由於無法直接抓取其動態產生的 DOM 結構，可能會導致匯入內容為空或不完整。建議：嘗試使用「貼上程式碼」功能，在瀏覽器中複製渲染後的完整 HTML 程式碼進行匯入。

外部字型/圖示庫提示

如果頁面使用了特殊的網路字型或圖示庫且未正確跨域授權（CORS），可能會顯示為預設字型或亂碼。建議：在編輯器中使用系統內建的字型和圖示庫進行替換。

嵌入內容（iframe）提示

出於安全考量，部分嵌入的 iframe 內容可能會被攔截或無法互動。系統會盡可能保留佔位符。

6.2 容量與限制

HtmlDrag 對不同帳戶等級設有相應的資源配額限制。當達到限制時，系統會彈出「容量不足，操作未完成」或「作品數量上限」的提示對話框。

容量不足處理

當您的儲存空間不足時，將無法儲存新的編輯內容或上傳檔案。解決方法：

• 進入「我的作品」刪除不再需要的舊作品以釋放空間。
• 點擊提示框中的「升級訂閱」按鈕，訂閱 Pro 以取得更大的儲存容量。

作品數量上限

Free 使用者可儲存的作品數量有限。達到上限後，需刪除舊作品才能建立新作品，或升級訂閱以提升作品數量限制。

圖片上傳限制

上傳圖片時，系統會檢查單張圖片大小及批次上傳總大小。如果提示「檔案內容超過伺服器允許的大小」或「批次大小不可超過限制」，請壓縮圖片或分批上傳。Pro通常擁有更高的單檔上傳額度。

6.3 安全檢測

系統內建了強大的安全掃描機制（Security Scan），在匯入 URL、上傳檔案或貼上程式碼時會自動評估內容的風險等級，以保護您的帳戶安全。

風險等級說明

掃描完成後，系統會根據檢測到的威脅類型（如 XSS 攻擊、惡意腳本注入、危險 HTML 標籤等）判定風險等級：

• 低風險：檢測到輕微告警，通常不影響使用，建議確認後繼續。
• 中風險：存在潛在隱患，需謹慎操作。
• 高風險：檢測到嚴重安全風險，建議僅在完全信任來源的情況下繼續。
• 嚴重風險：包含極高風險的惡意內容（如惡意軟體網站、網路釣魚特徵），系統將直接拒絕處理並阻止儲存。

安全載入模式

對於存在一定風險但可處理的檔案，系統會提供「安全保障措施」，包括自動清理危險腳本與標籤（Auto Sanitize）。您可以選擇「採用安全載入模式」繼續，系統將移除可疑程式碼並盡可能保留頁面原本的視覺與功能，確保您能在編輯器內安全地進行修改。