做网站-如何将设计稿还原为网页

做网站开发的伙伴应该很清楚，一个网站从设计到开发完成，经过的步骤，除了需求功能这些不说以外，其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页面的效果图，然后再把这个设计稿通过网页的形式来展现，那么这个过程到底如何来做?今天网站站小编就和大家一同来探讨一下...

通常来说，一个设计稿都是通过一些设计软件设计出来的，比如常见的PhotoShop、FireWorks。所谓的设计图其实就是导出来设计好的图片，在确认好这些设计稿以后，我们需要通过"切片"的方式来还原网页，具体有以下几个步骤：

1、PhotoShop或fireworks进行图层切片

这个切片是啥意思呢？很简单，就是把设计稿中一些单独或者说独立的图片或者标志切出成相同尺寸的图片。比如说网站的Logo，一些装饰性的图标，无规律的线条。对于一些有规律的背景，可以切出那一个重复的图片单元即可。为了提高网站的图片加载速度，我们可以把一些切好的单独的图片汇聚在一个大的图片上，背景为透明，这样我们就可以通过CSS的背景X，Y轴偏移的方式对这一张图片来做到点缀整个网站的装饰图的效果。现在很多大型的网站也是这样做好，可以很好的提高网站对加载图片的速度。

2、根据设计稿编写DIV+CSS布局

一个设计稿出来后，我们可以通过观察分析出它的布局。比如说是上中下结构，还是左右结构，或者说两者的结合。可以先在纸上把大概的布局先画出来，然后再用DW或者其它的网页设计编辑工具，通过编辑div来布局好这些层次结构。这些定义好以后，再给这些DIV定义和编写好相应的样式。这样就能初步还原为网页的效果了。

3、CSS样式控制，调试。

这一步当然是比较繁锁同时也是特别花费时间的一步，尤其是针对不同浏览器的调试，这就要求我们在编写CSS代码的时候，要规范化。越是复杂的效果图还原其CSS样式也越是难写，因为可能会有多层的DIV嵌套，这时我们需要对DIV的浮动，相对定位，绝对定位，清除浮动，以及内边距，外边距都要设置合理，确保各个浏览器的展示效果一样。

4、对页面中的交互效果加入适当的JS

5、整理好目录结构，CSS，JS通过文件引入方式加入

一个静的网页，我们也需要规范好目录结构，比如使用image目录存放所有图片，js目录存放javascript脚本，css目录存放样式文件。外层的index.html就是网页入口文件，这样也更清晰明了。另外静态html代码中应该把一些样式代码和js脚本代码抽离出去，用文件的方式引入进来，这样做，一来可以使代码更加简洁，二来浏览器访问的时候会更快(浏览器会缓存)。

总结：

以上5点关于设计稿还原为网页的步骤是做网站小编经常使用的方法，静态网页做好以后我们就可以用它来套用我们的程序进而作成动态的网站。当然，如果不需要设计师设计效果图，为了省事，静态的网页模板我们也可以从一些专业的网站模板来下载。这就不在我们这篇文章的讨论范围了...

往期热点文章：

#做网站-面向对象面向过程的区别

#做网站-必备的10款网站性能测试工具(推荐)

#做网站-前端工程师都用啥编辑器

#做网站-虚拟主机与独立服务器区别

#做网站-10个CSS简写技巧

#做网站-如何学好面象对象编程

#做网站-怎么学习MySQL(新手)

#做网站需要掌握哪些知识与技能?

做网站公众平台（zwangz888）每天为您分享原创Web开发资讯，开发经验，为您的技能充电。期待您的关注与分享，同时欢迎您留言，让我们每天进步一点点！