为了获得最佳的阅读体验，请使用Chrome, Firefox,IE9以上的浏览器！
切割专题切割专题

--将PSD转换成HTML页面

一.教程说明

本教程使用的页面实例如图所示：

二.拷贝基础模板

1.拷贝基础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 href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper"></div>
</body>
</html>

2.拷贝基础CSS代码：

@charset "GBK";
/* CSS Document
Use for:  aseoe.com
Version:  1.00
Date: 2012/7/17
Author:
*/


body, div, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dt, dd, ul, ol, li, fieldset, form, tr, th, td, center, input, button, textarea{padding:0;margin:0}/*基础设置ˉ*/
table { border-collapse: collapse; border-spacing: 0;}
fieldset, img { border: 0;}
button,input,select,textarea{ font-size:12px;}
input,img,select{ vertical-align:middle;}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; }
.left{ float:left;}
.right { float:right;}
.txthide{text-indent:-9999em;overflow:hidden; line-height:0; font-size:0;}
.relative { position:relative;}
.absolute { position:absolute;}

/* float */
.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}
.clearfix{ zoom:1;}
.clear { clear:both;}

/* a */
a {color:#7c7c7c; text-decoration:none;}
a:hover {color:#7c7c7c; text-decoration:underline;} 

body{font-size:12px; font-family:"宋体";}
.wrapper{margin:0 auto ; width:1002px;}

3.目录结构

目录结构如下所示：

文件夹/
├── css/
│   ├── style.css
├── js/
└── images/
└── pic/
└── index.html

(1)文件夹的根目录中存放切割的HTML文件；

(2)css文件夹中存放页面切割中使用到的样式表文件；

(3)js文件夹中存放页面切割中使用到的js文件，JQ库等；

(4)images文件夹中存放页面切割中使用背景图片等；

(5)pic文件夹中存放页面切割中使用的广告图片，轮播图片等；

三.PSD分析

页面整体分析：

查看PSD，可以看出页面背景色为白色，页面整体宽度为1400px,页面主体宽度为960px.

进一步分析页面结构，可以将页面分为以下几大部分，如图所示：

按照划分的5个区域，书写对应的HTML代码：

<body>
<!--header-->
<div class="header">
  <div class="wrapper"> 
  </div>
</div>
<!--/header-->

<!--flash-->
<div class="flash">
</div>
<!--/flash-->

<!--container-->
<div class="wrapper container clearfix">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>
<!--/container-->

<!--footer-->
<div class="footer">
  <div class="wrapper">
  </div>
</div>
<!--/footer-->
</body>

对应的CSS代码：

body{font-size: 12px; font-family: "宋体"; background-color：#FFF; }
.wrapper{margin:0 auto ; width: 960px;}

/*header*/
.header{height: 87px;}

/*flash*/
.flash{height: 340px;}

/*container*/
.container{margin-top: 25px;}
/*main*/
.main{float: right; width: 662px; overflow: hidden; }
/*sidebar*/
.sidebar{float: left; width: 270px; overflow: hidden;}

/*footer*/
.footer{}

四.header切割

1.header结构分析

结构分析中可以看出，header有一个渐变的背景，并且header可以分为左边的logo,以及右边的nav两个大的模块

(1) logo部分必须为可点击的链接，所以用<a>标签最合适,需要向左浮动,并且需要给<a>标签增加title说明

(2) nav部分需要像有浮动

对应的HTML代码：

<!--header-->
<div class="header">
  <div class="wrapper clearfix">
    <a href="###" class="logo" title="福建终身教育女职工周末学习网"></a>
    <div class="nav"></div>
  </div>
</div>
<!--/header-->

CSS书写分析：

(1) header的背景可以运用图片横向循环来处理；

(2) logo图片可以直接使用图片背景，从PSD中截取logo图片，大小为302px*88px；

(3) nav的整体宽度为550px,并且向右浮动；

对应的CSS代码：

/*header*/
.header{height: 88px; background: url(images/header_bg.jpg) repeat-x;}
  .header a.logo{display: block; width: 302px; height: 88px; background: url(images/logo.jpg) no-repeat; float: left;}
  .nav{float: right; width: 550px;}

2.nav结构分析

nav有5个导航地址组成，可以使用5个<a>标签表示，并且<a>标签有打开状体，可以添加on样式。

对应的HTML代码：

<div class="nav clearfix">
    <a href="###">首页</a>
    <a href="###">课程推荐</a>
    <a href="###" class="on">课程分类</a>
    <a href="###">新闻公告</a>
    <a href="###">关注女职工</a>
</div>

CSS书写分析：

(1) 每个<a>标签根据文字自适应宽度，文字大小为18px的微软雅黑，并且向左边浮动；

(2) <a>标签有on样式，有on样式的<a>标签，有一个小三角的图标背景；

(3) 小三角的背景，可以运用CSS Sprite整合到与logo同一张图片中,如图所示:

对应的CSS代码：

.nav{float: right; width: 550px; padding-top: 30px;}
    .nav a{display: block; float: left; padding: 0 10px; height: 57px; line-height: 30px; margin-right: 10px; font-size: 18px; font-family: "MicroSoft YaHei"; color:#000; }
    .nav a:hover, .nav a.on{color: #cd5d00; background: url(images/sprite.gif) no-repeat center -87px; text-decoration: none;}

五.flash切割

从PSD来看，flash模块只是一张全屏的广告图，所以只要把广告图保存下来，写入到页面中即可。/p>

对应的HTML代码：

<!--flash-->
<div class="flash">
  <img src="pic/flash1.jpg" />
</div>
<!--/flash-->

CSS书写分析：

(1) flash模块的背景色为广告的背景色的延展，并且高度为图片的图片；

(2) 图片需要居中显示；

对应的CSS代码：

/*flash*/
.flash{height: 340px; background-color: #FFCED4; height: 337px; overflow: hidden;  }
  .flash img{display:block; margin:0 auto;}

六.main切割

1.main结构分析

由PSD可以看出main可以由上半部分的main_title和下半部分的main_con两部分组成。

对应的HTML代码：

<div class="main">
    <div class="main_title">女职工安全规范</div>
    <div class="main_con"></div>
</div>

2.main_title结构样式分析

由PSD可以看出main_title文字为大小为24px微软雅黑，底部边框高度为3px,颜色为#ff7a00。

对应的CSS代码：

.main_title{font-size: 24px; font-family: "MicroSoft YaHei"; border-bottom: 3px solid #ff7a00; line-height: 35px;}

3.main_con结构样式分析

由PSD可以看出，main_con由上半部分的列表main_list和下半部分的分页main_page两个部分组成

对应的HTML代码：

<div class="main_con">
    <div class="main_list"></div>
    <div class="main_page"></div>
</div>

4.main_list结构样式分析

由PSD可以看出，main_list由9个结构相同的小模块组成，所以考虑使用li列表来实现对应结构。并且li是向做浮动，自动排列的。

对应的HTML代码：

<div class="main_list">
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

分析li，如果所示，li由带图片和文字标题的链接，以及底部的播放次数两个部分构成。并且播放的小图片需要使用CSS Sprite整合到sprite图片中。

对应的HTML代码：

<li>
    <a href="###"><img src="pic/pic1.jpg">中级人像摄影技术</a>
    <span>播放2,598次</span>
</li>

对应的CSS分析：

(1) main的宽度为660px,则每个li的宽度为220px,并且li中的小模块需要水平居中；

(2) a标签的宽度与图片的宽度一致，为200px,文字大小为14px,文字颜色为#333,并且a要水平居中；

(3) span宽度与a一样，并且有播放的小图标做背景，文字颜色为#576408，并且span要水平居中;

对应的CSS代码：

.main_list{padding-top: 20px;}
  .main_list li{float: left; width: 220px; overflow: hidden; margin-bottom: 20px;}
  .main_list li a, .main_list li span{display: block; width: 200px; overflow: hidden; margin: 0 auto;}
  .main_list li a{color: #333; font-size: 14px; margin-bottom: 15px;}
  .main_list li a:hover{text-decoration: none;}
  .main_list li a img{margin-bottom: 10px;}
  .main_list li span{color: #576408; background: url(images/sprite.gif) no-repeat 10px -160px; width: 190px; height: 20px; line-height: 20px; padding-left: 30px; }

5.main_page结构样式分析

由PSD可以看出，main_page中的分页为几个a标签，并且当前页可以用span标签标识，分页码鼠标滑过的效果与当前页效果一致。

对应的HTML代码：

<div class="main_page">
    <a href="###">首页</a>
    <a href="###"><<</a>
    <a href="###">1</a>
    <a href="###">2</a>
    <a href="###">3</a>
    <span>4</span>
    <a href="###">5</a>
    <a href="###">6</a>
    <a href="###">...</a>
    <a href="###">尾页</a>    
</div>

对应的CSS分析：

(1) 一整个main_page距离顶部和底部都一定距离；

(2) 默认a标签背景颜色为#f9f9f9,边框颜色为#f3d2a1,字体颜色为#434242；

(3) 当前页和鼠标滑过模块时，背景颜色为#f1a000，边框颜色为#f1a000；

对应的CSS代码：

.main_page{margin:25px 0; padding-left: 170px; }
  .main_page a, .main_page span{display: block; float: left; height: 24px; padding:0 10px; background-color: #f9f9f9; border:1px solid #f3d2a1; color: #434242; text-align: center; line-height: 24px; margin-right:7px; font-size: 13px;  }
  .main_page a:hover, .main_page span{background-color: #f1a000; border:1px solid #f1a000; text-decoration: none;}

七.sidebar切割

1.sidebar结构分析

由PSD分析可以看出，sidebar可以分为sidebar_title和sidebar_con两大部分组成。

对应的HTML代码：

<!--sidebar-->
<div class="sidebar">
    <div class="sidebar_col">
        <div class="sidebar_title"></div>
        <div class="sidebar_con"></div>
     </div> 
</div>
<!--/sidebar-->

2.sidebar_title结构样式分析

sidebar_title背景是一张不可循环的图片。

对应的HTML代码：

<div class="sidebar_title">课程分类</div>

对应的CSS代码：

.sidebar_title{height: 60px; width: 270px; background: url(images/sprite.gif) no-repeat 0 -200px; text-indent: -9999px;}

3.sidebar_con结构样式分析

由PSD可以看出，sidebar_con可以有4个li构成，并且li打开项背景图片为白色，有一个背景图片。

对应的HTML代码：

<div class="sidebar_con">
    <ul>
        <li><a href="###">女职工操作手册</a></li>
        <li class="on"><a href="###">女职工操作手册</a></li>
        <li><a href="###">女职工操作手册</a></li>
        <li><a href="###">女职工操作手册</a></li>
    </ul>
</div>

对应的CSS代码：

.sidebar_con{background-color: #fbeeda; border-bottom: 1px solid #f3d2a1;}
    .sidebar_con li{height: 49px; line-height: 49px; padding-left: 25px; border-left: 1px solid #f3d2a1; border-right:1px solid #f3d2a1; }
    .sidebar_con li.on{border-left:2px solid #fe5d00; padding-left: 23px; border-top:1px solid #f3d2a1; border-bottom:1px solid #f3d2a1; border-right: none; background: url(images/sprite.gif) no-repeat -298px -180px #FFF; }
    .sidebar_con li a{font-size: 16px; display: block;}

八.footer切割

footer结构分析

footer由友情链接和版权信息两部分组成，友情链接为一排链接。

对应的HTML代码：

<!--footer-->
<div class="footer">
  <div class="wrapper">
    <div>
      <span>友情链接：</span>
      <a href="###">福州总工会</a>  |  
      <a href="###">厦门总工会</a>  |  
      <a href="###">漳州总工会</a>  |  
      <a href="###">泉州总工会</a>  |  
      <a href="###">龙岩总工会</a>  |  

      <a href="###">三明总工会</a>  |  
      <a href="###">南平总工会</a>  |  
      <a href="###">莆田总工会</a>  |  
      <a href="###">宁德总工会</a>  |  
      <a href="###">福州教育总工会</a>  
    </div>
    <div>
      <span>主办单位：福建省总工会</span>
      <span>技术支持：福建广播电视大学</span>
      <a href="###">主办单位：闽ICP10011489号</a>
    </div>
  </div>
</div>
<!--/footer-->

对应的CSS代码：

/*footer*/
.footer{background-color: #fbeeda; border-top: 1px solid #f3d3a4; padding: 20px 0; text-align: center; margin-top: 30px;}
  .footer a, .footer span{color: #333; text-decoration: none;}
  .footer a:hover{text-decoration: underline;}
  .footer div{padding: 10px 0;}

九.完整切割页面查看

页面地址