psd文件生产html,PSD文件切图制作html全过程记录

PSD文件切图制作html全过程记录

最后效果图：

新建文件夹

开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器(Dreamweaver)，并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：

打开index.html文件。在head标签顶部，添加链接到您的样式表(style.css)。你可以使用下面的代码。

头部的代码如下面:

Modern Design Studio

建立HTML结构

现在，我们将设置HTML文件结构。设置3个部分(标题，内容，页脚)像下面一样:

Untitled Document

切割背景

我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。

现在在photoshop里面打开原先设计好的,隐藏所以的图层，除背景层外.

现在采取的切片工具，选择背景，保存网页web格式按(ALT +shift+Ctrl + S)。然后保存的图像文件夹文件名为background.jpg。

设置背景样式

打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：

* {

margin: 0px;

padding: 0px;

}

body

{

background:url(images/background.jpg);

}

#container

{

margin: auto;

width: 960px;

}

切割头部

返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。

编辑头部背景代码

在style.css文件里编辑如下代码:

#header

{

background:url(images/header.jpg);

height:124px;

}

切割头部logo

在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片

添加在页面添加logo

现在返回到html中，在#header #container内,添加下面的代码

....

现在,下面切换到style.css文件，编写#logo样式.

#logo

{

margin-top:20px;

border:none;

}

编辑导航代码

下面是页面里的代码，头部header包括logo和导航两个部分.

Home
About
Work
Blog
Contact

导航样式如下：

现在,添加css表里的导航样式~，ul、li和链接a的样式:

#header li

{

color:#959595;

list-style:none;

float:left;

margin-right:20px;

font-family:"Myriad Pro",arial;

font-weight:bold;

font-size:24px;

}

#header li a

{

color:#959595;

text-decoration:none;

padding:10px;

}

#header ul

{

float:right;

margin-top:-40px;

}

#header li a:hover

{

background:#202020;

color:#d2d2d2;

-moz-border-radius:5px;

-khtml-border-radius:5px;

-webkit-border-radius:5px;

}现在制作中间部分

现在我们在页面的中间部分content添加两个div，如下图：

切换到photoshop的psd页面,切下中间部分，取名为featured.jpg.如下图：

在你的HTML页面添加如下代码，和一些文字介绍:

MORE PROJECTS

Portfolio project, Jan 5th, 2010 Have you

ever wanted to create clean and nice portfolio design? In this tutorial I

will show you how to design clean blue portfolio layout. Have you ever wanted

to create clean and nice portfolio design? In this tutorial I will show you how

to design clean blue portfolio layout in Adobe Photoshop.

在PSD文件里，隐藏其他所以图层，只留下按钮图层部分，切下按钮部分，保存png格式，命名为button.png.

现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景样式，和按钮的样式.

#featured

{

background:url(images/featured.jpg) no-repeat;

height:381px;

margin-top:30px;

margin-left:80px;

}

#featured a

{

background:url(images/button.png);

height:30px;

width:124px;

text-indent:-9999px;

position:absolute;

margin-top:330px;

margin-left:180px;

}

#featured a:hover

{

background-position:0px 30px;

}现在我们添加些dummytext(文字介绍)的样式:.dummytext

{

color:#d2d2d2;

width:245px;

margin-top:150px;

position:absolute;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

line-height:180%;

margin-left:290px;

}

.dummytext span

{

font-size:16px;

color:#191919;

font-weight:bold;

}下面添加添加图片展示下面的分类介绍部分

页面的代码部分如下.

BEAUTIFULWebDesignFan is a design related blog about web design, photoshop, freebies

and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free

resources like vectors, wordpress themes and a lot of inspiration.

EFFECTIVEWebDesignFan is a design related blog about web design, photoshop, freebies

and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free

resources like vectors, wordpress themes and a lot of inspiration.

FUNCTIONALWebDesignFan is a design related blog about web design, photoshop, freebies

and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free

resources like vectors, wordpress themes and a lot of inspiration.

我们中间部分的内容，整体看起来应该是这样的: