[计算机软件及应用]实例详细讲解将PSD转成HTML.doc
本教程通过一个实例，来详细讲解如何将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文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹: o Images: 这是我们存放推荐内容部分的图片以及网站展示的图片的地方 o Template: 这是存放和网页设计样式相关图片的地方，比如说底部背景图 具体文件的放置将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的编写，先编写出大概完整的框架，代码如下：帮助01020304050607080910111213<!DOCTYPE html> <html lang="en"> <head> <!- Site Title -> <title>PSD to HTML: A Photography Site</title> <!- Meta Data -> <meta charset="UTF-8" /> </head> <body> </body> </html>2）编写html文件的head部分下面我们要开始为刚才的html文件添加细节。首先是head部分，在head部分我们要添加一些meta信息，这样有利于搜索引擎读取。我们增加了keywords、authors、description、copyright等meta信息，并把语言编码设置为utf-8。代码如下:帮助12345<meta name="keywords" content="photography, commercials, exposure videos, senior pictures"> <meta name="description" content="Your company description."> <meta name="author" content="TutToaster.com/authors/CodyRobertson"> <meta name="copyright" content="Copyright 2010 TutToaster.com"> <meta name="robots" content="follow, index">现在要开始在html载入一些必须js和css的文件，以便让这些文件起作用，同时为了考虑到浏览器的兼容性，还增加了一些相应的判断条件。具体代码如下：帮助0102030405060708091011121314151617181920212223242526272829<!DOCTYPE html> <html lang="en"> <head> <!- Site Title -> <title>PSD to HTML: A Photography Site</title> <!- Meta Data -> <meta charset="UTF-8" /> <meta name="keywords" content="photography, commercials, exposure videos, senior pictures"> <meta name="description" content="Your company description."> <meta name="author" content="TutToaster.com/authors/CodyRobertson"> <meta name="copyright" content="Copyright 2010 TutToaster.com"> <meta name="robots" content="follow, index"> <!- Site Theme Styling -> <link rel="stylesheet" href="style/reset.css" /> <link rel="stylesheet" href="style/global.css" /> <!-if lt IE 9> <script type="text/javascript" src="javascript/HTML5-Shiv.js"></script> <!endif -> </head> <body> <!- jQuery and Nivo Slider -> <script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script> <script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script> </body> </html>3）编写html的body部分body部分是html文件的主要部分，网页上显示主要是body部分的内容，我们会将这个网页的布局分成以下5个部分：header、featured、status、content、footer。我们为每个部分增加一个div并在每个部分的内部加一个类名为container的div。帮助01020304050607080910111213141516171819202122232425<div id="header"> <div class="container"> </div> </div> <div id="featured"> <div class="container"> </div> </div> <div id="status"> <div class="container"> </div> </div> <div id="cotent"> <div class="container"> </div> </div> <div id="footer"> <div class="container"> </div> </div>04）编写#header部分这个网页的header部分主要由两部分组成，一个是logo，另一个是导航栏。logo是简单div，而导航栏则是列表ul。帮助010203040506070809101112<!- Logo -><h1 id="logo">YourLogo</h1> <!- Navigation Menu -><ul id="menu"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">PHOTOGRAPHY</a></li> <li><a href="#">COMMERCIALS</a></li> <li><a href="#">SPORTS</a></li> <li><a href="#">EXPOSURE VIDEOS</a></li> <li><a href="#">CONTACT</a></li> </ul>05）编写#featured部分网页的#featured是我们放置推荐内容的部分，这部分也有两部分组成，一个是欢迎文字（welcome），另一个滑动图片Slider。Welcome区域welcome区域是一个id为welcome的div，由标题文字和描述文字组成，标题文字h2的显示用图片来代替。描述的文字用p标签包起来。帮助12345<div id="welcome"> <h2>Welcome</h2> <p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p> <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!</p> </div>Slider区域slider区域由一个透明边框和几张滑动图片组成。滑动图片放在class为slides的列表里边。帮助123456789<div id="slider"> <div id="frame"> </div> <ul class="slides"> <li><img src="style/images/slider-placeholder.png" /></li> <li><img src="style/images/slider-placeholder2.png" /></li> <li><img src="style/images/slider-placeholder.png" /></li> <li><img src="style/images/slider-placeholder2.png" /></li> </ul> </div>完整的#featured部分的代码下面是完整的#featured部分的代码，读者可以参照对比查看。帮助010203040506070809101112131415161718192021<div id="featured"> <div class="container"> <!- Welcome Text/Site Welcome -> <div id="welcome"> <h2>Welcome</h2> <p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p> <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!</p> </div> <!- Nivo-Slider -> <div id="slider"> <div id="frame"> </div> <ul class="slides"> <li><img src="style/images/slider-placeholder.png" /></li> <li><img src="style/images/slider-placeholder2.png" /></li> <li><img src="style/images/slider-placeholder.png" /></li> <li><img src="style/images/slider-placeholder2.png" /></li> </ul> </div> </div> </div>6）编写#status部分这部分非常简单，由一段文字和一个按钮组成。帮助123456<div id="status"> <div class="container"> <span>I am currently accepting new projects/appointmentsat this time.</span> <button>Hire Me</button> </div> </div>7）编写#content部分在psd文件中，你可以看到#content部分的内容会比较多一点，所以我将它按上下分成两个部分。第一部分在psd文件中，你可以看到，第一部分由两块区域组成，这两块区域各占据了50%的宽度，一个区域是About Us，另一个区域是What others think，两个区域都有一个标题和一些文字描述。帮助01020304050607080910<div id="about_us"> <h3>A little about us.</h3> <p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p> </div> <div id="others_say"> <h3>What others think.</h3> <p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went ill never go anywhere else. <br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite> </p> </div>第二部分第二部分是由四个各占据25%宽度的小区域组成，这些小区域是由一些预览图、标题和文字组成。帮助0102030405060708091011121314151617181920212223242526272829<ul id="services"> <!- Photography -> <li> <img src="style/images/service_preview_1.gif" alt="placeholder" /> <h4>Photography</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!- Commercials -> <li> <img src="style/images/service_preview_2.gif" alt="placeholder" /> <h4>Commercials</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!- Sports -> <li> <img src="style/images/service_preview_3.gif" alt="plceholder" /> <h4>Sports</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!- Exposure Videos -> <li> <img src="style/images/service_preview_1.gif" alt="placeholder" /> <h4>Exposure Videos</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> </ul>8）编写#footer部分现在是#footer部分的编写，包含一些联系信息和版权信息等。帮助010203040506070809101112131415161718192021222324252627282930313233343536373839404142<ul id="footer-widgets"> <li> <h5>Contact Us</h5> <ul> <li>3352 Streetname rd.</li> <li>Commerce Township, MI, 48382.</li> <li> </li> <li>Tell: (248)838-9823</li> <li>Fax: (248)942-2342</li> <li>Email: johnnywallerme.com</li> </ul> </li> <li> <h5>Services</h5> <ul> <li><a href="#">Home</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Commercials</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Exposure Videos</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li> <h5>About Johnny</h5> <p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p> </li> <li> <h5>About Amber</h5> <p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p> </li> </ul> <!- Positioning Fix -><br class="clear" /> <br /><br /> <!- Copyright -><div id="copyright"> <span>© Copywright 2010 TutToaster.com. All Rights Reserved.</span> <a href="#">Back to top</a> </div>Html最终显示结果下图是我们编写好的html文件的最终显示结果，下面还有一份完整的html的代码，方便读者阅读对比。帮助001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168<!DOCTYPE html> <html lang="en"> <head> <!- Site Title -> <title>PSD to HTML: A Photography Site</title> <!- Meta Data -> <meta charset="UTF-8" /> <meta name="keywords" content="photography, commercials, exposure videos, senior pictures"> <meta name="description" content="Your company description."> <meta name="author" content="TutToaster.com/authors/CodyRobertson"> <meta name="copyright" content="Copyright 2010 TutToaster.com"> <meta name="robots" content="follow, index"> <!- Site Theme Styling -> <link rel="stylesheet" href="style/reset.css" /> <link rel="stylesheet" href="style/global.css" /> <!-if lt IE 9> <script type="text/javascript" src="javascript/HTML5-Shiv.js"></script> <!endif -> </head> <body> <div id="header"> <div class="container"> <!- Logo -> <h1 id="logo">YourSite Title</h1> <!- Navigation Menu -> <ul id="menu"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">PHOTOGRAPHY</a></li> <li><a href="#">COMMERCIALS</a></li> <li><a href="#">SPORTS</a></li> <li><a href="#">EXPOSURE VIDEOS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <div id="featured"> <div class="container"> <!- Welcome Text/Site Welcome -> <div id="welcome"> <h2>Welcome</h2> <p>Welcome to Johnny Waller Productions! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p> <p>Whether it be Family Photogra
