核心價值

利用 PS 內建切片工具 + 存儲為 Web 格式輸出設置，可快速將視覺設計稿轉為結構化 XHTML+CSS 代碼雛形，適合快速原型驗證或移交前端參考（實際項目仍建議手寫優化代碼）。

操作步驟

1. 切片劃分

• 開啟設計稿 → 切片工具（K）劃分功能區塊（導航、Banner、內容區、底部等）

2. 輸出設置關鍵配置

• Ctrl+Alt+Shift+S 開啟「存儲為 Web 所用格式」
• 右上角倒三角選單 → Edit Output Settings

3. 核心參數：CSS 生成策略

• 第二下拉選單選 Slices
• 勾選 Generate CSS
• 下拉選 By ID（以切片名稱作為 CSS ID，語義化更強）

4. 導出執行

• 確定關閉設置 → Save → 存儲類型選 HTML and Images → 輸入文件名保存

5. 代碼檢視

生成的 HTML 結構語義化、CSS 樣式內聯/外聯分離，可直接在瀏覽器預覽或移交前端重構。

優缺點分析與建議

優點	局限	建議
極速生成結構雛形	代碼冗餘、非響應式、語義標籤有限	僅作原型/參考，正式項目用 Dreamweaver + EditPlus 手寫重構
切片命名即 CSS ID，語義清晰	複雜交互/動畫無法實現	配合切片命名規範（如 header-nav, banner-main）提升可用性