如何將psd文件切圖並布局html
文章內容:如何將psd文件，切割導出圖片並插入到html代碼中。
內容對象:適合初學未入門的布局者。
下面來介紹下如何將PSD切片，然后加入到HTML的簡要步驟:
上圖是一個用ps打開的PSD文件。接下來的工作就是將圖片切割成一個小的圖片，加入到HTML中。
切圖的方法有很多種,這里先介紹2種:
1. 使用矩形選框工具(快捷鍵M)->選擇想要取得的部位->按下組合鍵Shift,Ctrl+C復制選擇內容->然后Ctrl+n新建->Ctrl+v復制到新建窗口->另存為gif格式結束。
2. 用切片工具將圖片切割好->文件-存儲為WEB格式也能將切片圖片導出
3. 或用裁剪工具(按快捷鍵c)選中要切割的那一部分，並雙擊得到切割后的圖片
切片的方法有還很多，這里我們就不一一介紹了，本人比較習慣於使用第一種方法，我覺得比較直觀干凈,想要哪一部分直接切下來。
下面正式開始制作:
步驟一:使用上述方法的一種獲得圖片;
我把這個顯示器的圖片切了下來圖片如下:
步驟二：開始布局
打開Dreamweaver工具，新建一個html文件和一個css文件。
然后開始在html中編寫代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="head"></div> </body> </html>
其中<link rel="stylesheet" type="text/css" href="style.css"/>
是對外部樣式文件名為style.css的引用;class為head的div是存放這塊圖片的容器。接下來是編寫樣式，樣式的目的是讓body背景為紅色，並且讓背景為我們剛切割下來的圖片的div自適用居中。
*{margin:0px;padding:0px;}
body
{
background-color:red;
}
.head
{
background:url(i%20mac.gif) no-repeat;
margin:0 auto;
height:444px;
width:686px;
}
最后效果圖片居中。
Jasonwu form
http://blog.csdn.net/wujiang1984 or
http://www.cnblogs.com/wujiang