从网页psd到html的开发
2025-01-31 18:36:54 来源: 阅读:
从网上下载了一张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>
二、切图
把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>
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"> 国际中医现代非药物疗法协会(以下简称协会，是经香港特别行政区注册(第622章)，并在国家中医药管理局的业务指导和监督管理下，具有独立法人资格的社会组织... <span class="detail">[详细]</span></span> 21 </div> 22 <div class="nav2"> 23 <a href="">企业文化</a> 24 <code>/</code> 25 <a href=""> 企业资质</a> 26 <code>/</code> 27 <a href=""> 合作伙伴</a> 28 <code>/</code> 29 <a href=""> 健康理念</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">更多></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 < 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 < 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>
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>
四、对每部分进行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 }
又因为整个布局中所有的内容都在中间，所以我们把中间的css设置为max-width: 980px;水平居中
1 /*主题部分*/ 2 .center_content { 3 margin: 0 auto; 4 max-width: 980px; 5 position: relative; 6 }
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 }
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 }
右侧：
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 }
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 }
五、素材文件打包，大家一起交流学习。(*^__^*) 第一次做的网页，技术一般~
http://yun.baidu.com/share/link?shareid=1682921571&uk=3811305747