PS转换html实践常识:PS切图到CSS+XHTML步骤
2011-11-26 1:02:48
访问量:2889614
翻开PhotoShop/FireWorks将图片切割导出为(x)HTML。
直接在DreamWeaver之类的工具去拖沓布局,雅安酒店住宿，导入相关的图片、flash资源。
先在PS中完成切图后，在文本编辑器中看着效果图一步步的制作。
本文起源网页制作教程网www.zzarea.com 原文链接：
第一种方式最为不好，这样的代码基本不具维护性跟可读性。
第二种方法也不好，代码未免会有冗余，做出来的货色基础需要排查一遍。
第三种办法也不好，由于你需要看效果图一点点的拼,www.4hjd.com，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。
实在尺度的网制作实现的工作实际是：psd to html，个别情形下，咱们会拿到美工的psd,这时候不同的人会有不同的做法：
分析这个页面，先在脑袋中或者草稿纸上刻画大略的结构
依据设计稿的的情况，剖析背景图的分布、ICO图的散布等
切割相应的图片，导出、合并图片
在编辑器中写整体结构XHTML代码，包含页面中呈现的所有元素的结构
编写CSS样式中的整体以及模块代码
细节调剂
收工，浏览器验证是否正确
浏览所有设计稿，同一计划站点模块、图片、文件分布
开始第一点的操作,雅安商务酒店，但规划站点的内容分布很主要
拿到psd后，先不要做别的，直接在文本编纂器中将网页的框架写出来，不要假设这块未来css要去怎么渲染，完整天然化的标签，不加任何的css。
写完之后在各个阅读器运行之后确保大体定位都不问题。
书写总体css,这里的css只负责大块的定位及款式。
切出须要的图片资源，在写好的框架中一点点的去结构，一直的调试，终极为成品。
最后，为本人的代码增添解释，在css，html中都要适合的为自己的代码增加正文。
要想做出能机动切换皮肤，让css主导表示，还有许多要留神的处所，但大体的流程就是这样的，当然我们一开端不能直接就做到先写html，但最少要有这个意识，循序渐进。。。
2、css布局：9个对于PSD转换成DIV+CSS架构的教程
三、整体考虑点
图片的合并，减少恳求量，构造的公道性，语义化，样式的简练，便于后期维护，多为后期的保护以及程序开发着想，如何简略实现后果。
二、由多个页面组成的小站点或者大站点
相干ps切图到ps转换的实例：
一、一个独破的页面
1、CSS网页制作实例:PS切图将PSD网站模板转换为XHTML+CSS网页
================================================== ============
这里给大家一点倡议。
3、CSS网页制作教程-完整布局实例（十分具体的完全网页布局制造）
最近一段时光发明友人良多在网页制作教程中寻找如何PS切图到html转换的教程，都说例子很丰盛，然而缺乏实践支持，不知道ps to html转换的准确步骤。
PSD出网站从两个大点斟酌
正确的做法是：
以上是大多被采取的方法，但都不好：
