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

　　　　　　　　　　　　原图                                                                                     布局图

一、整体思路

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

Document

二、切图

　　把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标签。代码如下：　

羲缘康非药物调养中心XI YUAN KANG NON DRUG THERAPY CENTER网 站 首 页企 业 简 介惜 缘 开 讲调 养 生 命预 约 健 康招 贤 纳 士羲 缘 厨 房调 养 产 品禅 乐 静 修联 系 我 们

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

“顺天而食，顺时而食”的养生观念企业简介more国际中医现代非药物疗法协会(以下简称协会，是经香港特别行政区注册(第622章)，并在国家中医药管理局的业务指导和监督管理下，具有独立法人资格的社会组织... [详细]企业文化/企业资质/合作伙伴/健康理念调养产品更多祛寒排湿拨筋艾灸补阳食疗网站公告more02/11/2015常州市道德讲堂主持词（脚本）02/11/2015南大街调整优化交通方案02/11/2015新《交通旅游图》 地理风貌出行旅游02/11/2015中共中央关于制定国民经济和社会发展第调养预约招贤纳士(+86) 519-85512976 400-0157-687

　　3.footer

　　　　footer部分只有两段文字　

2015 All Rights Reserved 版权所有·国际中医现代非药物疗法协会 苏ICP备08009317号-4常州市武进区湖塘镇永胜路118-40 （+86） 519-85512976 　　400-0157-687 13961180976@139.com

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

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

1 * { 2 margin: 0; 3 padding: 0; 4 } { 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;水平居中