实例详细讲解将PSD转成HTML.docx
《实例详细讲解将PSD转成HTML.docx》由会员分享,可在线阅读,更多相关《实例详细讲解将PSD转成HTML.docx(43页珍藏版)》请在冰豆网上搜索。
![实例详细讲解将PSD转成HTML.docx](https://file1.bdocx.com/fileroot1/2023-4/20/32d59051-4320-4222-b529-ad5d60bd11cf/32d59051-4320-4222-b529-ad5d60bd11cf1.gif)
实例详细讲解将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:APhotographySite
--MetaData-->