实例详细讲解将PSD转成HTML

将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的编写，先编写出大概完整的框架，代码如下：帮助010203040506!DOCTYPEhtmlhtmllang=enhead!--SiteTitle--titlePSDtoHTML:APhotographySite/title07080910111213!--MetaData--metacharset=UTF-8//headbody/body/html2）编写html文件的head部分下面我们要开始为刚才的html文件添加细节。首先是head部分，在head部分我们要添加一些meta信息，这样有利于搜索引擎读取。我们增加了keywords、authors、description、copyright等meta信息，并把语言编码设置为utf-8。代码如下:帮助12345metaname=keywordscontent=photography,commercials,exposurevideos,seniorpicturesmetaname=descriptioncontent=Yourcompanydescription.metaname=authorcontent=TutToaster.com/authors/CodyRobertsonmetaname=copyrightcontent=Copyright2010TutToaster.commetaname=robotscontent=follow,index现在要开始在html载入一些必须js和css的文件，以便让这些文件起作用，同时为了考虑到浏览器的兼容性，还增加了一些相应的判断条件。具体代码如下：帮助010203040506070809!DOCTYPEhtmlhtmllang=enhead!--SiteTitle--titlePSDtoHTML:APhotographySite/title!--MetaData--metacharset=UTF-8/metaname=keywordscontent=photography,commercials,exposurevideos,seniorpicturesmetaname=descriptioncontent=Yourcompanydescription.metaname=authorcontent=TutToaster.com/authors/CodyRobertsonmetaname=copyrightcontent=Copyright2010TutToaster.commetaname=robotscontent=follow,index1011121314151617181920212223242526272829!--SiteThemeStyling--linkrel=stylesheethref=style/reset.css/linkrel=stylesheethref=style/global.css/!--[ifltIE9]scripttype=text/javascriptsrc=![endif]--/headbody!--jQueryandNivoSlider--scripttype=text/javascriptsrc=javascript/jQuery-1.4.2.min.js/scriptscripttype=text/javascriptsrc=javascript/Nivo-Slider.min.js/script/body/html3）编写html的body部分body部分是html文件的主要部分，网页上显示主要是body部分的内容，我们会将这个网页的布局分成以下5个部分：header、featured、status、content、footer。我们为每个部分增加一个div并在每个部分的内部加一个类名为container的div。帮助01020304050607080910111213141516171819202122232425divid=headerdivclass=container/div/divdivid=featureddivclass=container/div/divdivid=statusdivclass=container/div/divdivid=cotentdivclass=container/div/divdivid=footerdivclass=container/div/div04）编写#header部分这个网页的header部分主要由两部分组成，一个是logo，另一个是导航栏。logo是简单div，而导航栏则是列表ul。帮助01020304050607!--Logo--h1id=logoYourLogo/h1!--NavigationMenu--ulid=menuliclass=activeahref=#HOME/a/liliahref=#PHOTOGRAPHY/a/li0809101112liahref=#COMMERCIALS/a/liliahref=#SPORTS/a/liliahref=#EXPOSUREVIDEOS/a/liliahref=#CONTACT/a/li/ul05）编写#featured部分网页的#featured是我们放置推荐内容的部分，这部分也有两部分组成，一个是欢迎文字（welcome），另一个滑动图片Slider。Welcome区域welcome区域是一个id为welcome的div，由标题文字和描述文字组成，标题文字h2的显示用图片来代替。描述的文字用p标签包起来。帮助12345divid=welcomeh2Welcome/h2pWelcometoYourSite!Weareafullserviceproductioncompany,andareaone-stopshopforyourproductionneeds.Weloveinteractingwithpeopleandhaveapassionforcreatingaproductthatwows!AsahusbandandwifeteamandgraduatesofSpecsHowardSchoolofBroadcastArts,welovetolearnnewthingsandarecontinuallystrivingtoperfectourcraft./ppWhetheritbeFamilyPhotographs,aCollegeSportsExposureVideo,SeniorPictures,orVideoEditing,wedoitall!Thanksforstoppingbyandfeelfreetolookaround!!!/p/divSlider区域slider区域由一个透明边框和几张滑动图片组成。滑动图片放在class为slides的列表里边。帮助12345678divid=sliderdivid=frame /divulclass=slidesliimgsrc=style/images/slider-placeholder.png//liliimgsrc=style/images/slider-placeholder2.png//liliimgsrc=style/images/slider-placeholder.png9//liliimgsrc=style/images/slider-placeholder2.png//li/ul/div完整的#featured部分的代码下面是完整的#featured部分的代码，读者可以参照对比查看。帮助010203040506070809101112131415161718192021divid=featureddivclass=container!--WelcomeText/SiteWelcome--divid=welcomeh2Welcome/h2pWelcometoYourSite!Weareafullserviceproductioncompany,andareaone-stopshopforyourproductionneeds.Weloveinteractingwithpeopleandhaveapassionforcreatingaproductthatwows!AsahusbandandwifeteamandgraduatesofSpecsHowardSchoolofBroadcastArts,welovetolearnnewthingsandarecontinuallystrivingtop