从网页psd到html的开发

　　从网上下载了一张psd的网页设计稿，初学html+css，所以记录一下我的学习过程。原图是这个样子：

　　           

　　　　　　　　　　　　原图                                                                                     布局图

一、整体思路

　　拿到一张psd图片以后，先不要着急做，一定要先整体观察它的布局，确定基本框架。不管css，先在草稿纸上画出布局图，然后写出没有css的html。新建一个webpage2的文件夹，在里面新建images文件夹，用来保存第二步切图的图片。　

　　 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <header>
 9         
10     </header>
11     <div class="center_content">
12         
13     </div>
14     <footer>
15         
16     </footer>
17 </body>
18 </html>
View Code

二、切图

　　把psd中的图片图标什么的，切出来，使用工具Photoshop cc，不知道为什么这个psd在fireworks里面打开就出现了错位，所以就用photoshop了。切图注意事项如下：

　　1.图片的框选：因为是手工切图，所以要把图片放的大一些，才可以更为准确的测量图片的大小。这里也可以用fireworks辅助。

　　2.圆角矩形：使用css3ps辅助，可以在一定程度上输出css的格式，如照片的背景框就是一个圆角矩形，图1.

　　　　　　　　但是有的是不行的，如：红色more，这时候我是大致用选取框测量的。如图2.

　　　　     

　　　　　　　　　　　　　　　　　　　　　　　　图一　　　　　　　　　　　　　　　　　　　　　　图二

　　3.图片的存储：在Photoshop里，选取了图片以后，Ctrl + c，Ctrl+N，Ctrl+V，就可以存储为web所用格式，记得在右侧调整图片的格式png8，png24，gif，jpeg等。保                          存在images文件夹下。

三、细化布局：

　　在头部，身体，和尾部三部分中又分别有各自的布局。下面，我们来一一分析：

　　1.header

　　　　header部分有三部分：logo，nav和一张宽为1920的img。logo部分文字和图片，我们把图片设置为背景（只是其中一种方法，有空会写一下文字和图片对齐的几种方　式）。nav部分是a标签。代码如下：　

 1     <header>
 2         <div class="center_content">
 3             <!-- logo和nav -->
 4             <div class="header_1">
 5                 <!-- <img src="images/logo.png"> -->
 6                 <span class="f1">羲缘康非药物调养中心</span>
 7                 <hr color="#57411a" width="250px" height="1px" />
 8                 <span class="f2">XI YUAN KANG NON DRUG THERAPY CENTER</span>
 9             </div>
10             <nav>
11                 <a href=""  id="nav1">网 站 首 页</a>
12                 <a href="">企 业 简 介</a>
13                 <a href="">惜 缘 开 讲</a>
14                 <a href="">调 养 生 命</a>
15                 <a href="">预 约 健 康</a>
16                 <a href="">招 贤 纳 士</a>
17                 <a href="">羲 缘 厨 房</a>
18                 <a href="">调 养 产 品</a>
19                 <a href="">禅 乐 静 修</a>
20                 <a href="">联 系 我 们</a>
21             </nav>
22         </div>
23         <img src="./images/pic_2.png">
24     </header>
View Code

　　2.center_content部分分为左右两部分：left_main，right_main。并且在每一部分中又可以细化若干小的div。每部分都有注释哦

  1     <!-- 中间 -->
  2     <div class="center_content">
  3         <!-- 左侧的主体 -->
  4         <div class="left_main">
  5             <!-- 图片轮播的地方 -->
  6             <div class="focus_pic">
  7                 <img src="images/focuspic.png">
  8                 <span class="focus_pic1">“顺天而食，顺时而食”的养生观念</span>
  9             </div>
 10             <!-- 企业简介div -->
 11             <div class="content">
 12                 <div class="t1">
 13                     <span class="t1_1">企业简介</span>
 14                     <div class="t1_2">more</div>
 15                 </div>
 16                 <div class="boo">
 17                     <div class="boom">
 18                         <img src="images/boom.png">
 19                     </div>
 20                     <span class="boom_1">&nbsp;&nbsp;国际中医现代非药物疗法协会(以下简称协会，是经香港特别行政区注册(第622章)，并在国家中医药管理局的业务指导和监督管理下，具有独立法人资格的社会组织... <span class="detail">[详细]</span></span>
 21                 </div>
 22                 <div class="nav2">
 23                     <a href="">企业文化</a>
 24                     <code>/</code>
 25                     <a href="">&nbsp;企业资质</a>
 26                     <code>/</code>
 27                     <a href="">&nbsp;合作伙伴</a>
 28                     <code>/</code>
 29                     <a href="">&nbsp;健康理念</a>
 30                 </div>
 31             </div>
 32             <!-- 调养产品 -->
 33             <div class="ty_pro">
 34                 <div class="ty_head">
 35                     <span class="t3_1">调养产品</span>
 36                     <span class="t3_2">更多&gt;</span>
 37                 </div>
 38                 <div class="ty_examples">
 39                     <div class="ty_example">
 40                         <img src="images/驱寒.png">
 41                         <br/>
 42                         <a href="">祛寒</a>
 43                     </div>
 44                     <div class="ty_example">
 45                         <img src="images/排湿.png">
 46                         <br/>
 47                         <a href="">排湿</a>
 48                     </div>
 49                     <div class="ty_example">
 50                         <img src="images/拨筋.png">
 51                         <br/>
 52                         <a href="">拨筋</a>
 53                     </div>
 54                     <div class="ty_example">
 55                         <img src="images/艾灸补阳.png">
 56                         <br/>
 57                         <a href="">艾灸补阳</a>
 58                     </div>
 59                     <div class="ty_example">
 60                         <img src="images/食疗.png">
 61                         <br/>
 62                         <a href="">食疗</a>
 63                     </div>
 64                 </div>
 65             </div>
 66         </div>
 67         <!-- 右侧主体：网站公告、电话等 -->
 68         <div class="right_main">
 69             <!-- 网站公告 -->
 70             <div class="webad">
 71                 <div class="t2">
 72                     <span class="t2_1">网站公告</span>
 73                     <div class="t1_2">more</div>
 74                 </div>
 75                 <div class="announce">
 76                     <span class="date_gray">02/11/2015</span>
 77                     <a href="">常州市道德讲堂主持词（脚本）</a>
 78                     <span class="date_gray">02/11/2015</span>
 79                     <a href="">南大街调整优化交通方案</a>
 80                     <span class="date_gray">02/11/2015</span>
 81                     <a href="">新《交通旅游图》 地理风貌出行旅游</a>
 82                     <span class="date_gray">02/11/2015</span>
 83                     <a href="">中共中央关于制定国民经济和社会发展第</a>
 84                 </div>
 85             </div>
 86             <!-- 调养预约 -->
 87             <div class="ty_app">
 88                 <img src="images/ty_app.png">
 89                 <span class="ty_app1">调养预约</span>
 90                 <div class="circle">
 91                     &lt;
 92                 </div>
 93             </div>
 94             <!-- 招贤纳士 -->
 95             <div  class="offer">
 96                 <img src="images/offer.png">
 97                 <span class="ty_app1">招贤纳士</span>
 98                 <div  class="circle">
 99                     &lt;
100                 </div>
101             </div>
102             <!-- 电话 -->
103             <div class="tel">
104                 <img src="images/tel.png">
105                 <span class="tel_num">(+86) 519-85512976 <br/>400-0157-687
106                 </span>
107             </div>
108         </div>
109     </div>
View Code

　　3.footer

　　　　footer部分只有两段文字　

1  <!-- footer -->
2     <footer>
3         <div class="center_content">
4             <div class="footer1">2015 All Rights Reserved 版权所有·国际中医现代非药物疗法协会 <br/>苏ICP备08009317号-4</div>
5             <div class="footer2">常州市武进区湖塘镇永胜路118-40 <br/>（+86） 519-85512976 　　400-0157-687 13961180976@139.com</div>
6         </div>
7     </footer>
footer

四、对每部分进行css的设置。

　　1.整体的设置：主要是背景background，因为背景图片的大小为1920*1251，比较大，需要涉及到background-size:100% 100%的属性。　　

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 body {
 7     background: url(images/background.jpg) no-repeat;
 8     background-size:100% 100%;
 9     -moz-background-size:100% 100%;
10     -webkit-background-size:100% 100%;
11 }
View Code

　　　又因为整个布局中所有的内容都在中间，所以我们把中间的css设置为max-width: 980px;水平居中

1 /*主题部分*/
2 .center_content {
3     margin: 0 auto;
4     max-width: 980px;
5     position: relative;
6 }
View Code

　　2.header

　　　　我遇到的难点是：（1）图片和多行文字水平居中对齐（2）导航中a标签的垂直文字排列以及靠右排列

　　　　解决方法：（1）把图片设置为背景，并且设置位置为左中，然后排列文字居中，然后用padding-left属性分开图片和文字。

　　　　　　　　　（2）a标签内文字垂直方法：把a标签设置为block格式，然后设置block的宽度为width: 18px;因为字体是14px；略大于一个字体，小于两个文字宽度，所以　　　　　　　　　　　可以呈现单字竖直排列。定位方面一定要注意position和float两个的定位原理和文档流的变换。

 1 header {
 2     position: relative;
 3     /*height: 580px;*/
 4     width: 100%;
 5 }
 6 /**/
 7 header img{
 8     width: 100%; 
 9     height: 215px;
10 }
11 /*logo的定位*/
12 
13 .header_1 {
14     height: 152px;
15     width: 370px;
16     position: relative;
17     padding-left: 95px;
18     margin-top: 36px;
19     display: inline-block;
20     font-family: FZCCHJW—GB1-0, serif;
21     line-height: 35px;
22     float: left;
23     background: url(images/logo.png) no-repeat left top;
24 }
25 
26 .f1 {
27     font-size: 24px;
28 }
29 
30 .f2 {
31     font-size: 14px;
32 }
33 
34 /*导航*/
35 
36 nav {
37     position: absolute;
38     right: 0;
39 }
40 /*网站首页的显示*/
41 nav #nav1 {
42     background-color: rgb(160, 39, 22);
43     color: #fff;
44 }
45 /*其他a标签的定位和属性设置*/
46 
47 nav a {
48     margin-top: 26px;
49     display: block;
50     width: 18px;
51     text-decoration: none;
52     float: left;
53     margin-right: 20px;
54     color: #000;
55     font-size: 14px;
56     padding: 2px;
57     line-height: 20px;
58 }
59 /*hover属性的设置*/
60 
61 nav a:hover {
62     color: #fff;
63     background-color: rgb(160, 39, 22);
64 }
View Code

　　3.center_content部分

　　　　左侧主要分为三部分，上面的两个div设置为float：left；下面一个div。就不多赘述了，方法差不多。比较简单。比较考验的就是耐心和一直测量各种数据。　　　

  1 .left_main {
  2     float: left;
  3     width: 740px;
  4     height: 500px;
  5 }
  6 
  7 .left_main .focus_pic {
  8     width: 330px;
  9     height: 248px;
 10     position: relative;
 11     float: left;
 12     /*background: url(images/focus_pic.png);*/
 13 }
 14 /*焦点图片文字位置的设置*/
 15 .focus_pic1 {
 16     position: absolute;
 17     z-index: 101;
 18     left: 0;
 19     bottom: 0;
 20     width: 100%;
 21     color: #fff;
 22     background: rgba(0, 0, 0, .7);
 23     height: 30px;
 24     line-height: 30px;
 25     font-size: 12px;
 26     overflow: hidden;
 27 }
 28 .content{
 29     width: 330px;
 30     height: 248px;
 31     float: left;
 32     margin-left: 40px;
 33     position: relative;
 34     /*float: left;*/
 35 }
 36 /*企业简介标题*/
 37 .content .t1{
 38     border-bottom: dotted #ccc;
 39     height: 36px;
 40 }
 41 .content .t1_1{
 42     float: left;
 43     margin-top: 11px;
 44     font-weight:bold;
 45     font-size: 14px;
 46     
 47 }
 48 /*更多more*/
 49 .t1_2{
 50     margin-top: 12px;
 51     font-size: 12px;
 52     line-height: 12px;
 53     text-align: center;
 54     color: #fff;
 55     float: right;
 56     width: 53px;
 57     height: 12px;
 58     -webkit-border-radius: 2px;
 59     -moz-border-radius: 2px;
 60     border-radius: 2px;
 61     background-color: rgb(185,15,16);
 62 
 63 }
 64 .boo{
 65     height: 164px;
 66     border-bottom: dotted #ccc;
 67 }
 68 /*企业简介图片的圆角框*/
 69 .boom {
 70     width: 106px;
 71     height: 106px;
 72     -webkit-border-radius: 10px;
 73     -moz-border-radius: 10px;
 74     border-radius: 10px;
 75     background-color: #fff;
 76     float: left;
 77     margin-top: 30px;
 78 }
 79 /*介绍内容*/
 80 .boom_1{
 81     display: block;
 82     margin-top: 30px;
 83     float: right;
 84     font-size: 12px;
 85     margin-left: 20px;
 86     width: 200px;
 87     line-height: 22px;
 88 }
 89 .boom_1 .detail{
 90     color: red;
 91 }
 92 .nav2 a{
 93     margin-top: 18px;
 94     display: inline-block;
 95     margin-right: 8px;
 96     font-size: 12px;
 97     color: red;
 98     text-decoration: none;
 99 }
100 /*调养产品div*/
101 .ty_pro{
102     width: 701px;
103     height: 218px;
104     float: left;
105     margin-top: 35px;
106     position: relative;
107     background-color: #fff;
108 }
109 /*调养产品的标题*/
110 .ty_head{
111     width: 641px;
112     height: 50px;
113     border-bottom: solid #ccc;
114     margin-left: 20px;
115 }
116 .ty_head .t3_1{
117     float: left;
118     margin-top: 18px;
119     font-weight: bold;
120     font-size: 14px;
121 }
122 .t3_2{
123     margin-top: 19px;
124     float: right;
125     font-size: 12px;
126     color: #999;
127 }
128 /*调养产品的照片浏览*/
129 .ty_examples{
130     width: 641px;
131     margin-left: 20px;
132 }
133 .ty_example{
134     margin-top: 24px;
135     float: left;
136     margin-left: 10px;
137     text-align: center;
138     
139 }
140 .ty_examples a{
141     font-size: 12px;
142     font-weight: bold;
143     text-decoration: none;
144     color: #000;
145 }
View Code

　　　　右侧：　　

  1 /*主体右侧*/
  2 .right_main {
  3     width: 240px;
  4     float: left;
  5 }
  6 .webad{
  7     width: 240px;
  8     height: 248px;
  9     float: left;
 10     position: relative;
 11     /*float: left;*/
 12 }
 13 /*网站公告的标题*/
 14 .webad .t2{
 15     border-bottom: dotted #ccc;
 16     height: 36px;
 17 }
 18 .webad .t2_1{
 19     float: left;
 20     margin-top: 11px;
 21     font-weight:bold;
 22     font-size: 14px;
 23     
 24 }
 25 /*更多more*/
 26 .t1_2{
 27     margin-top: 12px;
 28     font-size: 12px;
 29     line-height: 12px;
 30     text-align: center;
 31     color: #fff;
 32     float: right;
 33     width: 53px;
 34     height: 12px;
 35     -webkit-border-radius: 2px;
 36     -moz-border-radius: 2px;
 37     border-radius: 2px;
 38     background-color: rgb(185,15,16);
 39 
 40 }
 41 /*网站公告*/
 42 .announce{
 43     margin-top: 20px;
 44 }
 45 /*日期*/
 46 .announce span{
 47     color: #aaa;
 48     display: block;
 49     font-size: 12px;
 50     margin-bottom: 10px;
 51 }
 52 /*网站公告链接*/
 53 .announce a{
 54     text-decoration: none;
 55     color: #000;
 56     display: block;
 57     font-size: 12px;
 58     margin-bottom: 10px;
 59 }
 60 /*调养预约*/
 61 .ty_app{
 62     width: 240px;
 63     height: 52px;
 64     float: left;
 65     margin-top: 35px;
 66     background-color: #bdb098;
 67 }
 68 /*调养预约字体*/
 69 .ty_app1{
 70     font-size: 18px;
 71     line-height: 52px;
 72     font-weight: bold;
 73 }
 74 /*调养预约图标*/
 75 .ty_app img{
 76     float: left;
 77     margin-left: 20px;
 78     margin-top: 15px;
 79 }
 80 /*右侧小圆圈*/
 81 .circle{
 82     width: 20px;
 83     height: 20px;
 84     background-color: #533B27;
 85     -webkit-border-radius: 10px;
 86     -moz-border-radius: 10px;
 87     border-radius: 10px;
 88     float: right;
 89     margin-right: 13px;
 90     color: #fff;
 91     margin-top: 16px;
 92     text-align: center;
 93 
 94 }
 95 /*招贤纳士div*/
 96 .offer{
 97     width: 240px;
 98     height: 52px;
 99     vertical-align:middle; 
100     float: left;
101     margin-top: 10px;
102     background-color: #bdb098;
103 }
104 /*招贤纳士图标*/
105 .offer img{
106     float: left;
107     margin-left: 20px;
108     margin-top: 15px;
109 }
110 /*电话div*/
111 .tel{
112     width: 240px;
113     height: 52px;
114     float: left;
115     margin-top: 10px;
116     
117 }
118 /*电话号码*/
119 .tel_num{
120     color: #000;
121     margin-top: 15px;
122     font-size: 14px;
123     line-height: 24px;
124     font-weight: bold;
125     display: block;
126     float: left;
127     margin-left: 15px;
128 }
129 /*电话图标定位*/
130 .tel img{
131     float: left;
132     /*margin-left: 20px;*/
133     margin-top: 15px;
134 }
View Code

　　4.footer　　　　

 1 footer {
 2     float: left;
 3     margin-top: 50px;
 4     color: white;
 5     width: 100%;
 6     height: 120px;
 7     background-color: rgba(0, 0, 0, .8);
 8 }
 9 /*左边文字区域*/
10 .footer1{
11     float: left;
12     width: 424px;
13     height: 40px;
14     margin-top: 40px;
15     font-size: 12px;
16     font-weight: bold;
17     line-height: 20px;
18 }
19 /*右边文字区域*/
20 .footer2{
21     float: right;
22     width: 424px;
23     height: 40px;
24     margin-top: 40px;
25     font-size: 12px;
26     font-weight: bold;
27     line-height: 20px;
28 }
View Code

五、素材文件打包，大家一起交流学习。(*^__^*) 第一次做的网页，技术一般~

　　http://yun.baidu.com/share/link?shareid=1682921571&uk=3811305747

 

　　

posted @ 2015-11-06 10:25  fanfan_nancy  阅读(3122)  评论(7)  编辑  收藏  举报