網頁大圖載入緩慢？切片工具將大圖拆分為多小塊分批載入，並自動生成 HTML/CSS 重組，顯著提升首屏速度與用戶體驗。本指南系統講解切片工作原理、三種樣式 (正常/固定比例/固定大小)、基於參考線自動切片、切片選項編輯 (名稱/URL/目標/Alt/尺寸)、存儲為 Web 格式輸出設置 (HTML+圖片/僅圖片/僅 HTML)、Dreamweaver 中代碼結構解析，助你掌握從設計到前端落地的完整鏈路。

一、切片工作原理

大圖切片 → 各切片獨立優化儲存 → 瀏覽器並行下載多小圖 → HTML/CSS 定位拼合 → 用戶感知載入更快、更流暢。特別適合 Hero Banner、大型產品展示圖、長圖文頁面。

二、切片基礎知識與建立方式

• 工具：切片工具 (C 循環)、切片選擇工具。
• 三種樣式：正常 (自由繪製)、固定長寬比 (設定比例)、固定大小 (設定像素尺寸)。
• 輔助精準切片：視圖 > 新建參考線 標註關鍵位置 → 切片選單「基於參考線建立切片」自動生成網格切片。
• 切片選擇工具可拖曳移動、調整大小、對齊切片。

三、編輯切片資訊 (對應 HTML 屬性)

雙擊切片或右鍵「編輯切片選項」設定：

• 名稱： 輸出圖片檔名前綴 (如 hero_01)。
• URL： 切片點擊跳轉鏈接。
• 目標： _self (當前頁) / _blank (新分頁)。
• 訊息文字： 狀態列顯示文字 (舊版瀏覽器)。
• Alt 標籤： 圖片無法載入/無障礙閱讀器讀取的替代文字。
• 尺寸座標： 精確設定 X/Y/W/H。

四、存儲為 Web 格式輸出

1. 檔案 > 匯出 > 存儲為 Web 所用格式 (舊版) (或 Alt+Shift+Ctrl+S)。
2. 各切片獨立設定格式 (JPEG/PNG-8/PNG-24/GIF)、品質、透明度、矩陣/優化。
3. 點擊「儲存」→ 彈出「儲存最佳化結果」對話框：

• 格式：HTML 與圖片 (標準)、僅圖片 (手寫 HTML)、僅 HTML (圖片已存在)。
• 設置：預設/自訂 (XHTML 1.0、CSS 類名首碼等)。
• 切片：所有切片 / 所有使用者切片 / 選取切片。

五、生成代碼結構解析

輸出資料夾包含：index.html (或自訂檔名) 與 images/ 目錄 (含所有切片圖)。HTML 結構為 <table> 或 <div>+CSS 定位 (視設置)，每一切片對應一個 <img> 或 <a><img></a>，尺寸、Alt、邊框 0 等屬性完整。直接可用於 Dreamweaver/編輯器進一步開發。

六、實戰建議

• 切片數量控制在 20 內，過多增加 HTTP 請求反而拖慢速度 (HTTP/2 環境下壓力較小)。
• 重複紋理區域 (如純色背景) 切成 1×1 px 切片配合 CSS background-repeat，極致壓縮體積。
• 配合現代構建工具 (Webpack/Vite) 將切片圖經壓縮、Base64 內聯、雪碧圖合併，進一步優化。