如何将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