做网站开发的伙伴应该很清楚，一个网站从设计到开发完成，经过的步骤，除了需求功能这些不说以外，其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页面的效果图，然后再把这个设计稿通过网页的形式来展现，那么这个过程到底如何来做?今天网站站小编就和大家一同来探讨一下...
通常来说，一个设计稿都是通过一些设计软件设计出来的，比如常见的PhotoShop、FireWorks。所谓的设计图其实就是导出来设计好的图片，在确认好这些设计稿以后，我们需要通过"切片"的方式来还原网页，具体有以下几个步骤：
1、PhotoShop或fireworks进行图层切片
这个切片是啥意思呢？很简单，就是把设计稿中一些单独或者说独立的图片或者标志切出成相同尺寸的图片。比如说网站的Logo，一些装饰性的图标，无规律的线条。对于一些有规律的背景，可以切出那一个重复的图片单元即可。为了提高网站的图片加载速度，我们可以把一些切好的单独的图片汇聚在一个大的图片上，背景为透明，这样我们就可以通过CSS的背景X，Y轴偏移的方式对这一张图片来做到点缀整个网站的装饰图的效果。现在很多大型的网站也是这样做好，可以很好的提高网站对加载图片的速度。
2、根据设计稿编写DIV+CSS布局
一个设计稿出来后，我们可以通过观察分析出它的布局。比如说是上中下结构，还是左右结构，或者说两者的结合。可以先在纸上把大概的布局先画出来，然后再用DW或者其它的网页设计编辑工具，通过编辑div来布局好这些层次结构。这些定义好以后，再给这些DIV定义和编写好相应的样式。这样就能初步还原为网页的效果了。
3、CSS样式控制，调试。
这一步当然是比较繁锁同时也是特别花费时间的一步，尤其是针对不同浏览器的调试，这就要求我们在编写CSS代码的时候，要规范化。越是复杂的效果图还原其CSS样式也越是难写，因为可能会有多层的DIV嵌套，这时我们需要对DIV的浮动，相对定位，绝对定位，清除浮动，以及内边距，外边距都要设置合理，确保各个浏览器的展示效果一样。
4、对页面中的交互效果加入适当的JS
到这一步通过静态的效果已经还原完毕。我们需要做的是对效果图中那些有交互动作的地方加上JS。比如说首页广告图的轮播效果，导航栏的鼠标放上去效果，以及标签的切换效果等等。JS代码可以加在body标签的最后面，我们可以引入Jquery类库，或者一些写好的JS类库，比如说首页广告图轮播的，这些网上都有现成的，自己可以自行作适当的修改即可。
5、整理好目录结构，CSS，JS通过文件引入方式加入
一个静的网页，我们也需要规范好目录结构，比如使用image目录存放所有图片，js目录存放javascript脚本，css目录存放样式文件。外层的index.html就是网页入口文件，这样也更清晰明了。另外静态html代码中应该把一些样式代码和js脚本代码抽离出去，用文件的方式引入进来，这样做，一来可以使代码更加简洁，二来浏览器访问的时候会更快(浏览器会缓存)。
总结：
以上5点关于设计稿还原为网页的步骤是做网站小编经常使用的方法，静态网页做好以后我们就可以用它来套用我们的程序进而作成动态的网站。当然，如果不需要设计师设计效果图，为了省事，静态的网页模板我们也可以从一些专业的网站模板来下载。这就不在我们这篇文章的讨论范围了...
