由设计图转pcsshtml网页制作实用实例。psd设计图是网页的设计效果图，我们必须要把它转化成网页来，这样才能适合用户浏览，那都有哪些技术和好的路线呢，在此首创网络来给大家一块分析学习下：

第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,p,p那我们的选择符就写body,p,p就可以了.不需要写*了.

*{

margin:0px;

padding:0px;

}

第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕.

这样的话,我们可以为body添加背景图片.要让基在沿水平方向平铺即可.

body{

background:url(image/bj.jpg)repeat-x;

}

第三步：通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码

HTML代码:

通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中.

#header,#nav,#banner,#main,#footer{

margin:0px auto;

width:950px;

}

第四步：先完成header头部部分

LOGO：一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的？所以我们采用了如下HTML代码：

邯郸网站建设效果图转换html

那么CSS编码该如何实现呢？

大家可以可以先想一下。然后在看我下边写CSS代码的，其实这个地方采用的是CSS以图换字技巧。CSS代码如下

#headerh1a{

background:url(image/logo.jpg);

width:476px;

height:102px;

display:block;

text-indent:-9999px;

}

好。现在我们接着完成头部右侧部分，还是先进行HTML代码的编写

• css切图培训
• 设为首页
• 加入收藏

CSS代码：

#headerh1{

float:left;

}

我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。

#headerul{

float:left;

padding:50px0px0px200px;

list-style:none;

}

为了避免问题，可以让UL也浮动。大家可以试一下，如果不设置浮动在IE各版本，火狐中表现的是否一致

#headerulli{

float:left;

padding:0px10px;

}

上边代码在火狐和IE8中没有问题，但是在IE6中会出现问题。我们会在后面进行讲解。

#headerullia{

color:#555;

text-decoration:none;

font-size:13px;

}

#headerullia:hover{

color:#000;

text-decoration:underline;

}

这时候的结果如下显示：

第五步：完成导航效果，效果说明：鼠标放上背景变成浅蓝色，并且要制作当前页的效果。

HTML代码：

• 网站首页
• 网站制作
• 网站制作
• office培训
• 平面设计就业
• pcss培训
• 联系我们

现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道.

导航部分文字跑到header头部右侧了。怎么解决呢?

其实就该我们万能的清除浮动起作用了

CSS代码

.clear{

clear:both;

}

这时候为我们

变成了

大家现在看一下，是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算，如果计算得当，不会出现这个问题。

完成导航的CSS样式

#nav{

padding-top:3px;

}

#navul{

list-style:none;

}

#navulli{

float:left;

}

默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态，达到咱们想要的结果

#navullia{

display:block;

width:135px;

height:56px;

line-height:56px;

color:#fff;

text-align:center;

text-decoration:none;

font-size:14px;

}

display:block;让A元素变成块状，然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px，同高度56px对应，可以实现什么效果呢。同学们想一下？

#navullia:hover{

background:#177cb7;

}

现在我们导航基本已经完成，但是还少了一个当前状态的导航效果。怎么办呢。

其实很简单就是为当前所在页面的A链接添加一个ID为current的标记。如下：

网站首页

接着这个状态和鼠标悬停时是一致的，所以很简单，只需要在鼠标悬停状态后边在添加一个#navullia#current选择符即可。你完成没

第六步：产品宣传banner图片，公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片

必要的属性是alt必须加上。替换文本，当图片不能正常加载，还有就是为了优化。

小技巧：

因为多次用到UL。都需要添加默认圆点。所以在*里面写上list-style:none;.这样其它地方就不用写了。其实包含文字颜色大小等，如果很多地方也是一样。同样可以声明到*选择符里。

第七步：完成内容区域

思路：我们可以把内容区域划分为两部分：一部分是左侧导航，一部分为主要内容区域。这样我先为进行HTML编码：

测试

现在我们先看一下右侧导航的结果图

右侧导航html代码:

培训课程

• 网站首页
• 网站制作
• 网站制作
• 网站制作
• 网站制作
• pcss培训
• pcss培训
• 联系我们

css代码:下边这些代码在上边制作过程中都已经说过了。所以直接给出来了，不再讲解。

#main{

padding:10px0px;

}

#main.container{

width:674px;

margin-right:50px;

float:left;

}

#main.subMenu{

width:226px;

float:left;

margin-bottom:10px;

}

#main.subMenuh5{

background:#19577c;

height:39px;

text-align:center;

color:#fff;

font-size:15px;

line-height:39px;

}

#main.subMenuulli{

border-bottom:1pxsolid#d4d4d4;

background:#f1f1f1;

}

#main.subMenuullia{

display:block;

color:#000;

height:36px;

line-height:36px;

text-decoration:none;

padding-left:60px;

background:url(image/li.jpg)no-repeat40px50%;

}

#main.subMenuullia:hover{

color:#177cb7;

background:url(image/li3.jpg)no-repeat40px50%;

}

第八步：内容的主体区域编码：通过上边的效果的图片，大家可以先想一下HTML如何编写。我是使用的DLDD的方式，大家一定要学会这个标记的用法，很常用，叙述产品时经常性用到。

现在我们看看HTML代码：

学校简介

首创网络技术有限公司是邯郸一家专注高端品牌网站建设、网站制作的专业服务商，始于2005年，七年网站建设运营经验，以网站建设、网站制作、网页设计……

学校新闻

浅谈平面设计中配色方案2013-4-14

浅谈平面设计中配色方案2013-4-14

浅谈平面设计中配色方案2013-4-14

浅谈平面设计中配色方案2013-4-14

接着是最下边产品部分的HTML编码：

精品课程

现在开始完成CSS代码的编写：

首选是学校简介与新闻，其实仔细观察这两个也是两列布局，所以设定宽，并设置左浮动：

#main.containerdl{

width:300px;

float:left;

}

接着是栏目名称：因为这两个效果是一样的。所以直接使用群组选择符把两个都选择编写就可以了。

#main.containerdlh5,#main.producth5{

border-bottom:1px#000solid;

margin-bottom:15px;

font-size:17px;

}

#main.containerdlh5a{

padding-left:170px;

}

先完成左侧学校简介，让简介浮在图片右方：

#main.containerdldt{

float:left;

width:110px;

}

#main.containerdldtimg{

border:1pxsolid#ccc;

}

#main.containerdl.xuexiaodd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

}

单独设置新闻的DD标记

#main.containerdl.xinwendd{

height:22px;

line-height:22px;

background:url(image/li.jpg)no-repeat050%;

}

#main.containerdl.xinwendda{

color:#000;

text-decoration:none;

padding-left:20px;

}

#main.containerdl.xinwenddspan{

padding-left:25px;

}

#main.containerdl.xuexiao{

margin-right:40px;

}

现在我们开始完成产品的CSS代码：

#main.product{

padding-top:20px;

}

让其距顶部空出一定距离。

#main.producth5a{

padding-left:510px;

}

#main.productulli{

float:left;

padding-left:10px;

}

让LI进行左浮动即可。

最后一步：完成底部：

HTML代码：

地址：河北省邯郸市东柳大街15号126室  电话：0310-7979386

CSS代码：

#footer{

background:#d1dce3;

height:50px;

line-height:50px;

text-align:center;

}

到此我们已经完成了一个页面的切图。

几个错误：头部标记在IE6中有下面表现。所以通过下边代码解决一下：

上边代码的意思是仅IE6可以识别。这样我们就可以单独为IE6编辑样式了。

其中里面还涉及了一些别的知识。在后续课程会去讲解。