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

admin

首先，製作圖像切片（以一張圖片為例子）
一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
4 `5 F5 ?7 ^) P6 r8 i6 v" R$ s

. E# @3 R# C6 y! L' ?                               
登入/註冊後可檢視大圖

切片後如下圖
% k8 B  X, x; N: z8 g5 E9 |& c

                               
登入/註冊後可檢視大圖

! b+ ~. m0 j1 ?/ X' i二、設定切片選項（如大小、目標連結、圖片說明等等）：選擇「切片選擇」工具，在要設定的圖像切片上雙擊，在彈出的面板進行具體設定（如圖）：
" Z8 [0 q) C. r8 [

* o9 ]1 o4 T* S& K( ]0 {( j                               
登入/註冊後可檢視大圖

+ i8 V) _5 J4 [3 y+ Y三、儲存切片為網頁：
, a6 M6 F$ k* U: s1 o/ |檔案——儲存為WEB和設備所用格式

9 C  s0 K. b( v, a8 f                               
登入/註冊後可檢視大圖

一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」

                               
登入/註冊後可檢視大圖

然後，儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局，則設定「其它」
; `, |7 e4 a/ {. Y! E3 f# h

& D- H! ]3 M1 P  n+ u9 Z# \                               
登入/註冊後可檢視大圖

2 ~! j" U' o; O: i) Q此時會彈出進一步設定面板，選擇「切片」「建立CSS」

                               
登入/註冊後可檢視大圖

% v: b+ Y( u, D# Q& [6 C這樣，圖像切片就被儲存成DIV+CSS的網頁佈局了。

lindaren

不懂