切图psd to html页面制作技术学习与总结

切图流程和注意事项

切图的正确流程做法是：

1 写框架。拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。

2 查适配。写完之后在各个浏览器运行之后确保大体定位都没有问题。如果是手机wap、微信活动页面，还要注意按手机屏幕大小进行适配。

3 书写总体css,这里的css只负责大块的定位及样式。

4 不断调试。切出需要的图片资源，在写好的框架中一点点的去构造，不断的调试，最终为成品。

5 最后，为自己的代码添加注释，在css，html中都要合适的为自己的代码添加注释。

 

要想做出能灵活切换皮肤，让css主导表现，还有很多要注意的地方，但大体的流程就是这样的，当然我们一开始不能直接就做到先写html，但起码要有这个意识，循序渐进。。。

 

PSD出网站从两个大点考虑

 

一、一个独立的页面
分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构
根据设计稿的的情况，分析背景图的分布、ICO图的分布等
切割相应的图片，导出、合并图片
在编辑器中写整体结构XHTML代码，包括页面中出现的所有元素的结构
编写CSS样式中的整体以及模块代码
细节调整
收工，浏览器验证是否正确

 二、由多个页面组成的小站点或者大站点

浏览所有设计稿，统一规划站点模块、图片、文件分布

开始第一点的操作，但规划站点的内容分布很重要

 

三、整体考虑点

图片的合并，减少请求量，结构的合理性，语义化，样式的简洁，便于后期维护，多为后期的维护以及程序开发着想，如何简单实现效果。

大型互联网公司网站技巧学习 

相关视频链接：

1）html div+css系统学习（div的弹出二级菜单的悬浮导航）  http://www.iqiyi.com/w_19rsmqouzp.html#vfrm=2-3-0-1

2）DIV+CSS视频教程之03.使用DIV+UL+LI布局网站首页的导航信息 http://www.iqiyi.com/w_19rsdj7o0h.html#vfrm=2-3-0-1

3）使用DIV CSS制作凹凸竖型导航条 http://www.iqiyi.com/w_19rr5a73cl.html#vfrm=2-3-0-1