怎么把psd格式转换成css+div

html-css026

怎么把psd格式转换成css+div,第1张

先把psd格式图片切图,切下来的图最好是jpg,或者png .gif的 格式 然后用 DW 等软件进行布局,把你想做的东西做成网页, 我就是做这个的, 有什么不明白的加Q:七四二九四八三奇三

1. psd按1:1比例做好图,分辨率设置为72

2.做好图后将你需要的图片单独切下来,用psd生成的网页基本上没用(1.代码很累赘,2.不方便修改,3.生成的是table格式)所以最好是自己手动重写

3.div+css 按照你的网页设计来布局,写DIV时尽量简洁,不要多层嵌套,最好不要超过3层

4.如果图片都很小的话 可以整合到一张图片(01.gif)上 利用坐标控制 ,首先建一个固定大小的div层(如:id设置为 A),再给这个层设置背景,然后利用坐标控制背景的位置,如(#A{background:url(images/01.gif) no-repeat 10px -20pxwidth:20pxheight: 20pxfloat: left})注:图片最好用 gif格式因为png在IE6中不透明很麻烦!

5.试几下就明白了哈~~

将psd网站模板转换成html网页形式,首先需要理解,psd的模版,只是对于网站的一个整理布局,使用图片的形式来做的,而在浏览器上需要过html+css+js等等这些技术手段才可以来做出来,如PSD的网站的背景颜色,在网页中,需要去使用background:#f00,来实现,psd其实就是一种参考,具体我们看下,一些小的代码设计:

<html>

<head>

<style>

body{

width:960px //限定网页的宽度

margin:0 auto

boreder:1px solid #f00 //加个边框利于观察

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>