根据网上高手的经验，再加上自己的习惯整理的psd到html思路，感觉非常的适合自己。
1.拿到psd后，先不要做别的，分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构。
2、根据设计稿的的情况，分析背景图的分布、ICO图的分布,再直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。
3、切割相应的图片，导出、合并图片
4、编写CSS样式中的整体以及模块代码，在几个主流浏览器下测试，确保大体定位都没有问题
5、编写细节的CSS样式，进行细节调整。还是要浏览器测试。
另外：
为自己的代码添加注释，在css，html中都要合适的为自己的代码添加注释。
图片的合并，减少请求量
结构的合理性，语义化
样式的简洁，便于后期维护
多为后期的维护以及程序开发着想，如何简单实现效果

自从不久前接触禅意花园以来，深深的被禅意花园的设计所震撼了！于是我想根据禅意花园中的作品来学习css。虽然现在没看过禅意花园这本书，不管我想这又有什么关系呢，我可以先试着通过试着研究学习其中作品源代码，来体验禅意花园的设计思想。

这次认真的看了第一个作品，并且也跟着自己做了一遍，收获最大的我想就是感受到了行内元素span的作用。

在看第一部作品的结构代码时，作者在很多标题，链接上都使用了span元素，还很纳闷为什么要用这么多的span元素，不用好像效果也已经可以实现了。当我看到其css文件代码时，这种纳闷终于逐渐的烟消云散。原来其中作品的标题是用背景图片的，而将文字放在span元素中，则可以通过ID下的span元素设置样式来隐藏标题的文字。这样不管是从内容还是结构上都非常的合理。

另外在一些导航上也常用到行内元素span，其实道理也是一样的：可以更好的进行修饰，实现一些其他的功能，或者功能的拓展等等。

在编写样式ID的过程中，区分大小写非常的重要，我因为在这次学习源代码的编写过程中就因为不小心没有注意大小写，检查了好久。在这里再次的警醒自己一定要认真。呵呵

当然行内元素span还有其他很多作用，而这是我在第一次学习禅意花园作品的一点体会，在这里分享下。

CSS是一个非常强大的网站设计标记语言。

　　虽然你可能会认为，任何人都可以转去写CSS代码，但是为了确保您在正确的轨道上，这里有如下8项CSS原则，每个网页设计师应该遵循。

　　1、W3C验证

　　如果你是1个正在写CSS编码的人员，那么建议您每次对您所创建的CSS代码进行验证。 但是，有很多设计师却在这个重要的一步跳过。验证您的代码清理反馈的任何问题，确保它的工作对访问者友好。除了验证你的CSS文件，你也应该验证您的 HTML或XHTML文件。验证这些文件之前，请确保您已经声明了正确的HTML或XHTML的doctype。声明您的doctype似乎是一个简单的 细节，但很多设计师经过很多次验证不通过以后才发现原来是因为他没有声明doctype。

　　2、文件

　　无论你的项目是一个人单干还是团队协作，很重要的是文件创建工作。如果您是在团队中单人项目，总有机会，你的单人项目将最终演变成一个团队项目，如 果发生这种情况，手头上有文件会变得很多，创建好文件归类与名称，写好注释，协作更方便。即使在如果你是个人单干的项目，当您在创意或使用上突然想用到某 些文件，您却不知道放在哪去了？当您想找到某段代码，却发现因为没有注释变得非常难？

　　涉及到创建CSS代码的注释文件，大多数设计师的自然将它放入把它直接关系到他们的代码/ *和* /中。技术上来说这种做法没有什么不正确的。然而，注释直接加入到您的CSS代码会增加该文件大小，从而增加加载时间，减缓一个网站的整体性能的大小。如 果你想成为顶尖的CSS代码编写员，你应该将注释写在一个单独的文件里。

　　虽然我知道这做法很有效，但是还是有很多人不同意这种做法。如果你拒绝将注释写在一个单独的文件中，退而求其次，您可以使用CSS压缩机（事实上，即使您将注释写在一个单独的文件中，你仍然可以使用这个CSS压缩机）。当然您也可以从谷歌搜索更好的CSS压缩机。

　　3、对Hacks说不

　　Hacks是为了让CSS编码在不同浏览器与平台中维持网站正常显示的做法。尽管在社会上Hacks已经成为一个可以接受的做法，这并不意味着 “CSS hacking”是你应该遵守的原则。这种设计方法的问题是，它意味着你为了解决问题而将标准的CSS变得更复杂。虽然你可能认为一个或两个Hacks不 会伤害任何人，但是这种思维可以对您的整体设计思想产生负面影响。

　　4、不滥用的div

　　由于div的提供了高度的灵活性，很容易让新人过度使用他们。为了避免过度使用DIV标签，你应该在写HTML代码的时候总是问自己是否有一个实际的HTML标记。例如，你为什么不使用HTML标题标记，例如H1和H2？

　　一旦你开始考虑到了div的问题，你很快就会使用适当的HTML标记，而不是自动创建一个新DIV。它不仅可以减少代码量，而且还会给你的代码更合理的加载时间。

　　5、Class类的命名

　　如果你问一个新的设计师，他们决定如何命名Class，他们可能会说，这并不重要。虽然从技术上来说，CSS类的命名没有什么严格的要求，但我们必须纠正那些错误的做法。

　　假设您要创建一个类来控制网页上的某部分。比如1个盒子将位于页面底部，它包含读者的评论和黑色的填充背景，很多设计师也许会随便命名，或是叫“黑 色底部”之类的。那么，我们会建议命名为“评论”。因为如果您一但决定更改背景颜色为蓝色或是不把他放在页面底部，那么“黑色底部”这个名称就再不适用 了。

　　6、使用简写

　　一旦你习惯简写方式，它也是您成为一个好的设计师最有效的做法之一。

　　使用多种简写方法，尽量减少了您的文件，同时也减小了网站的加载时间。此外，它不仅可以更容易地组织你的代码，而且对于未来修改代码提供了方便。

　　7、不要忘记打印机作为一个优秀的设计师，你应该更倾向于热爱技术，因为你是少数的一部分，生活和呼吸在技术中。不过，由于人们仍然需要打印出来自互联网的信息，那么 您要考虑使CSS内容对打印机友好。您的同行欣赏您所创建的网站，也许他们有兴趣想了解您的布局，也许他们打算将您的CSS打印出来参考，所以作为好的设 计师请不要忽视打印机。

　　8、永不停止学习

　　你可能认为这最后的原则听起来陈词滥调，但也可说是8条中最重要。 如果你致力于成为最好的设计师，您需要确保您一直致力于扩大你的CSS知识。幸运的是，如果你愿意，这很容易做到，并继续你的CSS教育。只需键入 “CSS”到谷歌，你会看到有48300.0万结果供您浏览。

　　除了来自网络上的学习，你也可以和同事，朋友，书籍上学，直到您成为CSS专家，成为顶尖的设计师。

    本篇文章来自就爱免费网 欢迎转载 转载请注明出处，就爱免费网 www.9aifree.com  免费东东一箩筐

空间更换之前：使用免费空间      
  很早就一直酝酿着做一个个人博客，但是由于能力上的不足所以直到今天才得以实现。在一年来不断的探索学习，终于基本上了解css ，seo优化等知识。

        但是目前还处于尝试阶段，所以就用国外的免费空间，可能速度上有所欠缺，不过相信在未来很短的时间里一定会有所改善的。

       人生就是在不断的学习中成长，不断的懂得新的知识，新的技术，生活将更加精彩，更加绚丽！

空间更好之后：

 至于博客名称就要懂的取名就是因为我认为人生是一个不断学习的过程。对自己有兴趣的东西就要懂，不断学习，不断奋斗！

对css和seo充满激情，于是主要专注于学习seo和学习css。虽然在空间更换的一段时间里，出现不正常，导致谷歌排名没了，但是我想象既然能有一次做到第一，就有第二次。虽然也许会比前面的难，但是我有信心！奋斗ing…….