CaveDuck 排版室

屬性點選預覽中的元素

☝

在預覽裡點一下任何區塊
這裡就會出現它的所有設定

單擊　選取
雙擊　直接改字（反白可單獨調）
拖外框　移動畫布裡的圖層
拖角落　縮放・上方圓點　旋轉
Delete　刪除・Ctrl+C　複製區塊

div

⬒ 這是畫布：拖進來的東西都會變成圖層

疊層

📐位置與大小

✦ 這是圖層：直接在預覽裡拖曳、拖角落縮放

左 left 上 top

寬 width 高 height 外距 margin 內距 padding

🅣文字

字級粗細字距行高

對齊

🎨顏色

100%

📌 釘選

新增元素（點＝插入 · 拖＝放到指定位置）

拖到「畫布區塊」上＝變成可自由移動的圖層；拖到一般區塊上＝接在它後面。

部件庫（滑過看樣子・按住拖到預覽）

聊天室會刪掉 <img>。這裡拖放／插入的圖片會自動改寫成「背景圖 div」（background:url()），在聊天室能正常顯示。

小工具不能放圖片：<img> 會被刪、style 裡的 url() 也會被刪。可以用漸層、色塊、文字符號代替。

貼上連結會先在這裡預覽

按住縮圖拖到預覽上：拖到畫布＝圖層、拖到畫布外＝滿寬圖片。

📌 釘選的不會被清除

淡化%

邊框px

頁面中的圖片（點＝選取）

21 款完整的小工具。滑過看樣子，點開可以「插入」或「取代整份」。
變數都是 {{英文大寫}}，記得在角色設定的狀態值裡用同樣的名字。

一般 div → 畫布
把一個區塊變成「畫布」：裡面第一層的東西會依照現在的位置變成可以自由拖曳的圖層（top／left／width 用 %），字級改成跟著寬度等比縮放。

畫布 → 一般 div
把畫布裡的圖層依照由上到下的位置排回一般版面，用 margin 保留原本的間距；同一列並排的會放進同一排。沒有文字的裝飾層（漸層、光暈）保留在原位。

選項

同時轉換字級（px ⇄ 等比縮放）

基準寬度是什麼？
就是「你的設計在多寬的時候是你要的樣子」。轉換時會先把內容排在這個寬度量位置，再換算成百分比；字級也會設定成在這個寬度時剛好等於原本的 px，比它窄就等比縮小。例如你是用 780 寬設計的，就填 780。

下面的寬度預覽只能看、不能改；可以點寬度按鈕開關，也可以輸入自訂寬度。轉好後按「放進編輯器」就能回到預覽裡繼續調。

展開一個裝飾，調好顏色後按「加到畫布」。加上去之後選取它，屬性的「顏色」裡還能再換色。

把調好的樣式存起來，之後選一個元素、點一下就套用。含 position:absolute 的會當成「圖層」直接加到畫布。

或手動貼上 CSS

已存的設定

這裡管「結構」。畫布裡的前後疊層用選取框下方的 ⏶⏷，或屬性的「疊層」。紅色 ⚠＝這個標籤在目前頁面無效。

這裡是「角色介面」自己的存檔，其他頁面看不到。上限 15 筆。
載入＝整份取代，插入＝接到後面。

💡 存檔存在哪裡？／備份

所有存檔、素材、色票、常用設定都存在這台電腦、這個瀏覽器的 localStorage。
・換電腦、換瀏覽器、無痕模式都看不到
・清除瀏覽器的網站資料會一起被刪掉
想保險的話，定期按「匯出備份」存一份檔案。

⟲ 重設

兩個都要按兩次才會執行。

只換目前這一頁的內容，可以按 ↩ 復原

欄寬、收合、預覽寬度、深淺、code 高度回到預設；語言、內容、存檔、素材、色票、常用設定都保留

角色介面

預覽寬度

尚未儲存

基準寬度 ⓘ px

原始 code

轉換結果

各寬度預覽只能看，不能改

CaveDuck 相容性檢查

div

0 字元