在 QSYUD 數位設計完成網站交付並進行教育訓練時，客戶最常感到興奮的就是：「哇！你們的網頁編輯器介面看起來跟微軟的 Word 好像，那以後我們自己維護更新是不是就很簡單了？」
這句話只對了一半。Web 編輯器的介面雖然親民，但「網頁排版」和「印在紙上的 Word」在技術底層有著天壤之別。特別是在響應式網頁設計（RWD）盛行的今天，如果負責維護的窗口缺乏基本的美術編輯與排版觀念，很容易在上架新內容時，讓原本漂亮的網站不小心跑版。
圖文並茂的兩欄排版，背後隱藏的數學與美術題
我們以網站最常見的「一行兩欄（左右並排）」格式為例：客戶通常希望「左邊放產品圖，右邊放說明文字」。在傳統 Word 裡，您只要拉一個表格（Table）把圖和字丟進去就好。但在網頁編輯器中，您必須同時考慮到電腦版與行動版（手機）的自適應切換：
- 圖片高度的計算： 左邊的圖片上傳後，其真實的像素高度（px）是多少？
- 文字量的對等平衡： 右邊的文字字數，是否剛好能填滿圖片右側的空白？如果文字太少，右邊會過度空洞；如果文字太多，文字會向下溢出，導致左右不平衡。
- 手機版的崩潰： 當這個「左右並排」的表格到了手機版，系統會自動將它垂直排列（變成圖在上、字在下）。如果當初在電腦版為了追求平衡而硬塞了過多的空格或特定語法，在行動版上就會直接出現大機率的跑版或突兀空隙。
為什麼網站後台維護需要「美術編輯底子」？
這就是為什麼對於一般企業內沒有美術或網頁設計背景的行政窗口而言，後台維護是有一定難度的。網頁編輯器上的每一個表格、每一張圖片，都牽動著 CSS 語法與 RWD 的動態縮放。
因此，QSYUD 數位設計在專案交接時，會在後台建立明確的「圖片尺寸」規範。我們建議負責營運的窗口，在利用 Web 編輯器排版時，應盡量保持版面的「結構極簡化」，避免使用複雜的表格巢狀嵌套，而是利用系統預設的響應式區塊來填入圖文。
結語
Web 編輯器提供了無門檻的文字修改便利，但若要做到完美的「圖文平衡」與「跨裝置流暢閱讀」，仍需依賴基礎的美術與網頁結構觀念。如果您單位的維護人力有限，在建站初期的「需求分析」階段，不妨與 QSYUD 討論，讓我們為您量身打造最不易跑版、最直覺的後台架構！
