PS转换html理论知识:PS切图到CSS+XHTML步骤

核心提示： 最近一段时间发现朋友很多在网页制作教程中寻找如何PS切图到html转换的教程，都说例子很丰富，PS转换html理论知识:PS切图到CSS+XHTML步骤，但是缺少理论支撑，不晓得ps to html转换的正确步骤，便于后期维护，多为后期的维护以及程序开发着想， 这里给大家一点建议， 其实标准的网制作完成的工作实际是：

　 最近一段时间发现朋友很多在网页制作教程中寻找如何PS切图到html转换的教程，都说例子很丰富，但是缺少理论支撑，不晓得ps to html转换的正确步骤。

　　这里给大家一点建议。

　　其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：

　　打开PhotoShop/FireWorks将图片切割导出为(x)HTML。

　　直接在DreamWeaver之类的工具去拖拉布局，导入相关的图片、flash资源。

　　先在PS中完成切图后，在文本编辑器中看着效果图一步步的制作。

　　以上是大多被采用的方法，但都不好：

　　第一种方法最为不好，这样的代码根本不具维护性和可读性。

　　第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。

　　第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。

　　正确的做法是：

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

　　写完之后在各个浏览器运行之后确保大体定位都没有问题。

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

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

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

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

　　==============================================================

　　PSD出网站从两个大点考虑

　　一、一个独立的页面

　　分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构

　　根据设计稿的的情况，分析背景图的分布、ICO图的分布等

　　切割相应的图片，导出、合并图片

　　在编辑器中写整体结构XHTML代码，包括页面中出现的所有元素的结构

　　编写CSS样式中的整体以及模块代码

　　细节调整

　　收工，浏览器验证是否正确

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

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

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

　　三、整体考虑点

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

　　相关ps切图到ps转换的实例：

　　1、CSS网页制作实例:PS切图将PSD网站模板转换为XHTML+CSS网页

　　http://www.zzarea.com/css/cssbj/css-733.html

　　2、css布局：9个关于PSD转换成DIV+CSS架构的教程

　　http://www.zzarea.com/css/cssbj/css-747.html

　　3、CSS网页制作教程-完整布局实例（非常详细的完整网页布局制作）

　　http://www.zzarea.com/css/cssbj/css-710.html