实例详细讲解将PSD转成HTML.docx
《实例详细讲解将PSD转成HTML.docx》由会员分享，可在线阅读，更多相关《实例详细讲解将PSD转成HTML.docx（43页珍藏版）》请在冰豆网上搜索。
实例详细讲解将PSD转成HTML
本教程通过一个实例，来详细讲解如何将psd转为html/css，以及js插件的使用。
将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。
因此本教程通过对一个完整实例的详细讲解来教大家如何将psd转成html/css，转换后的html/css可兼容各种主流浏览器。
我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。
基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。
点击下载PSD文件
1.我们需要从PSD文件得到什么？
如下图，我们只需要从这个psd文件得到4个非常基本的东西。
推荐内容（featured）的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。
其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。
下图红线圈起来的地方，就是我们需要从psd获取的内容。
本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。
2.设置站点
为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。
文件夹结构
下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。
∙根目录
o这是放置index首页文件的地方
o这是网站的顶级目录
∙JavaScript文件夹
o这是放置JS文件或者js框架jquery的地方
o我们在这个教程用到的jquery插件Nivo-Slider（做推荐内容）也放在这个文件夹里
∙样式（Styles）文件夹
o这里是存放css文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹:
oImages:
这是我们存放推荐内容部分的图片以及网站展示的图片的地方
oTemplate:
这是存放和网页设计样式相关图片的地方，比如说底部背景图
具体文件的放置
将index.html文件放置在根目录，这个文件也是我们编写html代码的文件。
将jquery插件Nivo-Slider里面的三个文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夹。
将两个css文件，reset.css和global.css放到样式文件夹。
这样我们的文件夹结构设置就差不多完成了。
3.编写HTML代码
1）编写首页Html文件
将psd转换成html/css的工作流程是先编写出html文件，随后再编写css，并加入js动态效果。
下面我们会一步步讲解html的编写，先编写出大概完整的框架，代码如下：
帮助
01
02
03
04
05
06
07
08
09
10
11
12
13
DOCTYPEhtml>
--SiteTitle-->
PSDtoHTML:</p><p>APhotographySite
--MetaData-->