Photoshop圖像切片儲存為網頁HTML（DIV+CSS佈局）的方法

admin

首先，製作圖像切片（以一張圖片為例子）
一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
; w, U0 V) I+ C5 V6 M+ `

- L  G( w" |) Z9 h4 s3 J" \; v                               
登入/註冊後可檢視大圖

切片後如下圖
7 u+ h6 e' x. f3 k' `5 A. |* T

1 Q! {. l. O7 F                               
登入/註冊後可檢視大圖

1 W3 y' H7 k9 w! }二、設定切片選項（如大小、目標連結、圖片說明等等）：選擇「切片選擇」工具，在要設定的圖像切片上雙擊，在彈出的面板進行具體設定（如圖）：

7 ?$ w  L! M1 i1 F3 o, T# K* h: V                               
登入/註冊後可檢視大圖

7 b5 T& B% P& }' D8 F% m6 C* l8 w/ j' ^三、儲存切片為網頁：
檔案——儲存為WEB和設備所用格式

                               
登入/註冊後可檢視大圖

一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」
* {' @' q4 |7 F& ^

, n- ?: G8 j. s9 E                               
登入/註冊後可檢視大圖

. `  s9 D  }0 G% I3 b) d  U然後，儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局，則設定「其它」

                               
登入/註冊後可檢視大圖

此時會彈出進一步設定面板，選擇「切片」「建立CSS」
) r, B6 j- |! B" E% n7 }. v2 c

2 I- ]) u" S9 C( K* \                               
登入/註冊後可檢視大圖

$ F: [2 ]. l/ W" E這樣，圖像切片就被儲存成DIV+CSS的網頁佈局了。

lindaren

不懂