你的位置:首页 > 网页设计

[网页设计]从网页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-687106         </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