汇图网psd素材库/design/new/
PSD网页切图制作HTML全过程教程今天的这个教程,教大家如何把psd页面利用div+css切割成html页面,这类的教程,本站做的一直都很少,大多
讲的都比较零碎的一些东西,在今后,我们将慢慢发布翻译出更多这类的教程,供大家学习,转载请著名来源,以及站码翻译,谢谢
首先看看效果
下面的图片就是效果图,切割出来后,可能头部和底部会宽点
新建文件夹
开始时,在您的计算机中创建一个文件夹。我把它命名为zmool 。再在文件夹中创建新文件夹images ,放网站的所有图像。接下来打开代码编辑
器(Dreamweaver) ,并在根目录下创建一个HTML文件名为index.html ,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名
为style.css文件。如下图:
/design/new/964.html
汇图网psd素材库/design/new/
打开index.html文件。在head标签顶部,添加链接到您的样式表(style.css) 。你可以使用下面的代码。
?1
头部的代码如下面:
?1
2
3
4
5
6
7
8
9
10
11
建立HTML结构
现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像下面一样:
?1
2
3
4
5
6
7
8
/design/new/964.html
汇图网psd素材库/design/new/
9
10
11
12
13
14
15
16
17
18
19
切割背景
我们的PSD文件包含了很多纹理效果,我们要把这些全部切出来,然后,用代码添加到网页上面,使div页面效果和设计的效果达到一致。
?1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
现在在photoshop里面打开原先设计好的, 隐藏所以的图层,除背景层外.
/design/new/964.html
汇图网psd素材库/design/new/
现在采取的切片工具,选择背景,保存网页web格式按(ALT +shift+Ctrl + S) 。然后保存的图像文件夹文件名为background.jpg 。
设置背景样式
打开style.css文件,设置基本样式,还有背景样以及主体部分的宽度,如下代码:
?1
2
3
4
5
6
7
8
9
10
11
12
13* {
margin: 0px;
padding: 0px;
}
body
{
background:url(images/background.jpg);
}
#container
{ /design/new/964.html
汇图网psd素材库/design/new/
margin: auto;
width: 960px;
}
切割头部
返回photoshop ,隐藏所以图层,除头部背景外,并用同样的方法,把头部背景图片切割保存为web格式,保存文件名为head.jpg 。
编辑头部背景代码
在style.css文件里编辑如下代码:
?1
2
3
4
5#header
{
background:url(images/header.jpg);
height:124px;
}
切割头部logo
在这时,切割logo层,隐藏所有图层,包括背景层,如上同样方法切割logo层保存为logo.png,注意:保存为png格式图片
添加在页面添加logo
现在返回到html 中,在#header #container内,添加下面的代码
.
?1
2
3
4
5
现在, 下面切换到style.css文件,编写