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

             

            原图                                                                                     布局图

一、整体思路

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

  

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header> </header>
<div class="center_content"> </div>
<footer> </footer>
</body>
</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标签。代码如下: 

     <header>
<div class="center_content">
<!-- logo和nav -->
<div class="header_1">
<!-- <img src="data:images/logo.png"> -->
<span class="f1">羲缘康非药物调养中心</span>
<hr color="#57411a" width="250px" height="1px" />
<span class="f2">XI YUAN KANG NON DRUG THERAPY CENTER</span>
</div>
<nav>
<a href="" id="nav1">网 站 首 页</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>
</nav>
</div>
<img src="./images/pic_2.png">
</header>

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

     <!-- 中间 -->
<div class="center_content">
<!-- 左侧的主体 -->
<div class="left_main">
<!-- 图片轮播的地方 -->
<div class="focus_pic">
<img src="data:images/focuspic.png">
<span class="focus_pic1">“顺天而食,顺时而食”的养生观念</span>
</div>
<!-- 企业简介div -->
<div class="content">
<div class="t1">
<span class="t1_1">企业简介</span>
<div class="t1_2">more</div>
</div>
<div class="boo">
<div class="boom">
<img src="data:images/boom.png">
</div>
<span class="boom_1">&nbsp;&nbsp;国际中医现代非药物疗法协会(以下简称协会,是经香港特别行政区注册(第622章),并在国家中医药管理局的业务指导和监督管理下,具有独立法人资格的社会组织... <span class="detail">[详细]</span></span>
</div>
<div class="nav2">
<a href="">企业文化</a>
<code>/</code>
<a href="">&nbsp;企业资质</a>
<code>/</code>
<a href="">&nbsp;合作伙伴</a>
<code>/</code>
<a href="">&nbsp;健康理念</a>
</div>
</div>
<!-- 调养产品 -->
<div class="ty_pro">
<div class="ty_head">
<span class="t3_1">调养产品</span>
<span class="t3_2">更多&gt;</span>
</div>
<div class="ty_examples">
<div class="ty_example">
<img src="data:images/驱寒.png">
<br/>
<a href="">祛寒</a>
</div>
<div class="ty_example">
<img src="data:images/排湿.png">
<br/>
<a href="">排湿</a>
</div>
<div class="ty_example">
<img src="data:images/拨筋.png">
<br/>
<a href="">拨筋</a>
</div>
<div class="ty_example">
<img src="data:images/艾灸补阳.png">
<br/>
<a href="">艾灸补阳</a>
</div>
<div class="ty_example">
<img src="data:images/食疗.png">
<br/>
<a href="">食疗</a>
</div>
</div>
</div>
</div>
<!-- 右侧主体:网站公告、电话等 -->
<div class="right_main">
<!-- 网站公告 -->
<div class="webad">
<div class="t2">
<span class="t2_1">网站公告</span>
<div class="t1_2">more</div>
</div>
<div class="announce">
<span class="date_gray">02/11/2015</span>
<a href="">常州市道德讲堂主持词(脚本)</a>
<span class="date_gray">02/11/2015</span>
<a href="">南大街调整优化交通方案</a>
<span class="date_gray">02/11/2015</span>
<a href="">新《交通旅游图》 地理风貌出行旅游</a>
<span class="date_gray">02/11/2015</span>
<a href="">中共中央关于制定国民经济和社会发展第</a>
</div>
</div>
<!-- 调养预约 -->
<div class="ty_app">
<img src="data:images/ty_app.png">
<span class="ty_app1">调养预约</span>
<div class="circle">
&lt;
</div>
</div>
<!-- 招贤纳士 -->
<div class="offer">
<img src="data:images/offer.png">
<span class="ty_app1">招贤纳士</span>
<div class="circle">
&lt;
</div>
</div>
<!-- 电话 -->
<div class="tel">
<img src="data:images/tel.png">
<span class="tel_num">(+86) 519-85512976 <br/>400-0157-687
</span>
</div>
</div>
</div>

  3.footer

    footer部分只有两段文字 

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

footer

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

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

 * {
margin:;
padding:;
} body {
background: url(images/background.jpg) no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}

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

 /*主题部分*/
.center_content {
margin: 0 auto;
max-width: 980px;
position: relative;
}

  2.header

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

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

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

 header {
position: relative;
/*height: 580px;*/
width: 100%;
}
/**/
header img{
width: 100%;
height: 215px;
}
/*logo的定位*/ .header_1 {
height: 152px;
width: 370px;
position: relative;
padding-left: 95px;
margin-top: 36px;
display: inline-block;
font-family: FZCCHJW—GB1-0, serif;
line-height: 35px;
float: left;
background: url(images/logo.png) no-repeat left top;
} .f1 {
font-size: 24px;
} .f2 {
font-size: 14px;
} /*导航*/ nav {
position: absolute;
right:;
}
/*网站首页的显示*/
nav #nav1 {
background-color: rgb(160, 39, 22);
color: #fff;
}
/*其他a标签的定位和属性设置*/ nav a {
margin-top: 26px;
display: block;
width: 18px;
text-decoration: none;
float: left;
margin-right: 20px;
color: #000;
font-size: 14px;
padding: 2px;
line-height: 20px;
}
/*hover属性的设置*/ nav a:hover {
color: #fff;
background-color: rgb(160, 39, 22);
}

  3.center_content部分

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

 .left_main {
float: left;
width: 740px;
height: 500px;
} .left_main .focus_pic {
width: 330px;
height: 248px;
position: relative;
float: left;
/*background: url(images/focus_pic.png);*/
}
/*焦点图片文字位置的设置*/
.focus_pic1 {
position: absolute;
z-index:;
left:;
bottom:;
width: 100%;
color: #fff;
background: rgba(0, 0, 0, .7);
height: 30px;
line-height: 30px;
font-size: 12px;
overflow: hidden;
}
.content{
width: 330px;
height: 248px;
float: left;
margin-left: 40px;
position: relative;
/*float: left;*/
}
/*企业简介标题*/
.content .t1{
border-bottom: dotted #ccc;
height: 36px;
}
.content .t1_1{
float: left;
margin-top: 11px;
font-weight:bold;
font-size: 14px; }
/*更多more*/
.t1_2{
margin-top: 12px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: #fff;
float: right;
width: 53px;
height: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgb(185,15,16); }
.boo{
height: 164px;
border-bottom: dotted #ccc;
}
/*企业简介图片的圆角框*/
.boom {
width: 106px;
height: 106px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #fff;
float: left;
margin-top: 30px;
}
/*介绍内容*/
.boom_1{
display: block;
margin-top: 30px;
float: right;
font-size: 12px;
margin-left: 20px;
width: 200px;
line-height: 22px;
}
.boom_1 .detail{
color: red;
}
.nav2 a{
margin-top: 18px;
display: inline-block;
margin-right: 8px;
font-size: 12px;
color: red;
text-decoration: none;
}
/*调养产品div*/
.ty_pro{
width: 701px;
height: 218px;
float: left;
margin-top: 35px;
position: relative;
background-color: #fff;
}
/*调养产品的标题*/
.ty_head{
width: 641px;
height: 50px;
border-bottom: solid #ccc;
margin-left: 20px;
}
.ty_head .t3_1{
float: left;
margin-top: 18px;
font-weight: bold;
font-size: 14px;
}
.t3_2{
margin-top: 19px;
float: right;
font-size: 12px;
color: #999;
}
/*调养产品的照片浏览*/
.ty_examples{
width: 641px;
margin-left: 20px;
}
.ty_example{
margin-top: 24px;
float: left;
margin-left: 10px;
text-align: center; }
.ty_examples a{
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
}

    右侧:  

 /*主体右侧*/
.right_main {
width: 240px;
float: left;
}
.webad{
width: 240px;
height: 248px;
float: left;
position: relative;
/*float: left;*/
}
/*网站公告的标题*/
.webad .t2{
border-bottom: dotted #ccc;
height: 36px;
}
.webad .t2_1{
float: left;
margin-top: 11px;
font-weight:bold;
font-size: 14px; }
/*更多more*/
.t1_2{
margin-top: 12px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: #fff;
float: right;
width: 53px;
height: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: rgb(185,15,16); }
/*网站公告*/
.announce{
margin-top: 20px;
}
/*日期*/
.announce span{
color: #aaa;
display: block;
font-size: 12px;
margin-bottom: 10px;
}
/*网站公告链接*/
.announce a{
text-decoration: none;
color: #000;
display: block;
font-size: 12px;
margin-bottom: 10px;
}
/*调养预约*/
.ty_app{
width: 240px;
height: 52px;
float: left;
margin-top: 35px;
background-color: #bdb098;
}
/*调养预约字体*/
.ty_app1{
font-size: 18px;
line-height: 52px;
font-weight: bold;
}
/*调养预约图标*/
.ty_app img{
float: left;
margin-left: 20px;
margin-top: 15px;
}
/*右侧小圆圈*/
.circle{
width: 20px;
height: 20px;
background-color: #533B27;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: right;
margin-right: 13px;
color: #fff;
margin-top: 16px;
text-align: center; }
/*招贤纳士div*/
.offer{
width: 240px;
height: 52px;
vertical-align:middle;
float: left;
margin-top: 10px;
background-color: #bdb098;
}
/*招贤纳士图标*/
.offer img{
float: left;
margin-left: 20px;
margin-top: 15px;
}
/*电话div*/
.tel{
width: 240px;
height: 52px;
float: left;
margin-top: 10px; }
/*电话号码*/
.tel_num{
color: #000;
margin-top: 15px;
font-size: 14px;
line-height: 24px;
font-weight: bold;
display: block;
float: left;
margin-left: 15px;
}
/*电话图标定位*/
.tel img{
float: left;
/*margin-left: 20px;*/
margin-top: 15px;
}

  4.footer    

 footer {
float: left;
margin-top: 50px;
color: white;
width: 100%;
height: 120px;
background-color: rgba(0, 0, 0, .8);
}
/*左边文字区域*/
.footer1{
float: left;
width: 424px;
height: 40px;
margin-top: 40px;
font-size: 12px;
font-weight: bold;
line-height: 20px;
}
/*右边文字区域*/
.footer2{
float: right;
width: 424px;
height: 40px;
margin-top: 40px;
font-size: 12px;
font-weight: bold;
line-height: 20px;
}

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

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

  

从网页psd到html的开发的更多相关文章

  1. Sketch网页截屏插件设计开发

    1.需求 在Sketch的Artboard中插入网页截图: 1.1.输入网址,自动截图到Artboard中,并居中显示: 1.2.可截取网页局部图片 2.技术选型 技术的选型主要是针对截图功能的选型, ...

  2. QT使用BC技术(网页与桌面结合)开发程序,好多相关链接(寒山居士)

    http://blog.csdn.net/Esonpo/article/category/1366376

  3. 微信开放平台开发——网页微信扫码登录(OAuth2.0)

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  4. Nvelocity模板引擎开发网页

    在ASP.NET网站开发中,我们要做许多的网页,如果多个网页的内容框架有些重复使用,我们用NVelocity模板引擎,就可以把相同的部分html代码单独放在一个文件中就行了,当要使用的时候,只需使用# ...

  5. 转载:微信开放平台开发第三方授权登陆(二):PC网页端

    微信开放平台开发第三方授权登陆(二):PC网页端 2018年07月24日 15:13:32 晋文子上 阅读数 12644更多 分类专栏: 微信开发 第三方授权登录   版权声明:本文为博主原创文章,遵 ...

  6. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  7. com.panie 项目开发随笔_前后端框架考虑(2016.12.8)

    (一) 近日和一同学联系,说了我想要做一个网站的打算.她很感兴趣.于是我们协商了下,便觉得一起合作.她写前端,我写后台.因为我对于前端样式设计并不怎么熟悉. (二) 我们决定先做一个 个人博客. 网上 ...

  8. [Cordova] 手机网页里的1px

    [Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素 ...

  9. web前端开发和后端开发有什么区别?

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

随机推荐

  1. foxmail配置office365邮箱

    公司用的是office365套装,由于一直不习惯outlook点x就退出程序的设置,导致经常出现没能及时响应邮件的情况.一怒之下,把客户端改成foxmail. 邮箱客户端切换的主要问题出现在foxma ...

  2. PHP 标准库 SPL 之数据结构栈(SplStack)简单实践

    PHP 5.3.0 版本及以上的堆栈描述可以使用标准库 SPL 中的 SplStack class,SplStack 类继承双链表 ( SplDoublyLinkedList ) 实现栈. 代码: & ...

  3. 图片流滚动效果html代码(复制)

    <!doctype html> <html> <head>     <meta charset="utf-8" />     < ...

  4. 使用react-native做一个简单的应用-01项目介绍

    学习react-native也有一个月的时间了.当学习了关于react-native的基础知识之后,打算自己去仿一个应用去练手.于是花了10天左右的时间,这个小应用的基本功能也实现的差不多了. 在展示 ...

  5. 生成pdf文件

  6. 【数据压缩】LZ78算法原理及实现

    在提出基于滑动窗口的LZ77算法后,两位大神Jacob Ziv与Abraham Lempel [1]于1978年又提出了LZ78算法:与LZ77算法不同的是LZ78算法使用树状词典维护历史字符串. [ ...

  7. 2017-11-09 中英文代码对比系列之Java一例

    原文: https://zhuanlan.zhihu.com/p/30905033. 作者为本人. 这个系列将对同一段代码进行中文命名和英文命名两个版本的比较. 目的包括, 演示中文命名, 发现命名时 ...

  8. centos 7 配置tomcat开机启动

    1. tomcat 需要增加一个pid文件 在tomca/bin 目录下面,增加 setenv.sh 配置,catalina.sh启动的时候会调用,同时配置java内存参数. #add tomcat ...

  9. 关于进行pdf的每页广告去除、转换word等方案。

    pdf转word经常使用的是 软件下载安装破解完成以后进行编辑pdf,可以导出word,效果比一般的word自带的转换效果要好. 在进行pdf的每页去除页脚或者页眉的广告时候,使用pdf的替换功能.这 ...

  10. ACM-ICPC 2018 徐州赛区网络预赛 A Hard to prepare

    https://nanti.jisuanke.com/t/31453 题目大意: 有n个人坐成一圈,然后有\(2^k\)种颜色可以分发给每个人,每个人可以收到相同的颜色,但是相邻两个人的颜色标号同或不 ...