对于css+div网站重构学习的拙见（2）–实践篇

     上次说了关于学习页面重构的准备工作，从这次开始要说说实际学习了。我一向贯彻的方法就是多动手实践，像上次说过的css手册是必不可少的，我建议先通读一遍，然后再找一些比较规范的源码来看，在看的过程中有不清楚的再回头来查手册，关键的是要理解别人是怎么构思，怎么排版的。这时候可以借助dreamweaver的可视化工具，就可以很清楚的看出别人的排版方法了。

     然后可以在通读一两个源码之后，回过头来自己借用原有的素材来尝试着实践。这步主要是使用别人已经切好的图片素材来进行排版，加上之前已经仔细了解过了该源码，所以你一定会按照他的思路去排，如果发现有不一样的地方，就要自己琢磨为什么自己跟别人的不一样。

      当你可以完美的模仿出别人的代码以后，就要试着把别人已经生成的页面截图，然后自己切图，按照自己的构思去做。这一步才是你最终的目的，也是培养自己对于布局的感觉。通常我们采用的方式是从上到下，从左到右的顺序。切图的同时还要考虑的是每一部分的数据该如何去填写。可能你并不懂得程序，这时你就需要简单的去了解一些，比如一段新闻列表。格式如：

   

标题内容一二三四五六七八                   [2010-09-12]

标题内容一二三四五六七八                   [2010-09-12]

标题内容一二三四五六七八                   [2010-09-12]

标题内容一二三四五六七八                   [2010-09-12]

 

 

 

      你一定会知道标题和时间是同一行的，然后程序会循环调用这样N条数据，最终就形成了这样的一个新闻列表，你绝对不可以做成左边所有标题写出来以后，再做右边的内容。这样是完全错误的，也行你在切图的时候文字是可以填上的，但是会给程序员带来很大的问题。

       当然在你可以自己完整完成一份网站的时候，你就该考虑到每一个前端设计师都无法逃避的问题，兼容性。你需要打开你的IETester和FireFox开始测试你的网页，如果你之前写代码的过程中没有考虑过兼容性的问题，你一定会在这个时候看到很多问题，在不同的浏览器下，你会发现他们完全不是你想要的效果，别急，你需要一点点去了解浏览器，这些问题都将迎刃而解的。这部分内容我们将在以后提出。

在这里给新人总结一下页面重构的步骤吧，你需要按照这样一步一步的解决问题，做事情只要遵循一定的步骤，有章可循就能够更好的完成。

 

页面重构步骤：

1.当你看到一个设计稿的时候，开始思考你该怎么切图，怎么布局。网站的大体框架是什么样的。

2.根据自己的构思开始把需要的图片切出来。想好每张图我该怎么用

3.开始根据网站结构写出大的区块，然后再一步步的布局

4.在不熟练的时候可以采用边布局，边测试的办法，当你完成一小块内容之后，就可以用各个浏览器进行测试，及时调试。当熟练以后完全可以完成一个页面后再进行兼容性测试。

 

     最好总结一下，这一篇主要概述了一下页面布局的过程，很笼统。以后将不采取这种方法给大家介绍了。本来是想系列的写下去，但是发现很多东西不扩展就会让人觉得很笼统，听不明白，一旦扩展篇幅就很大。之后我将每次只针对一小部分内容进行介绍。我想这样会更加明了一点。

 

 

文章作者：IceSun
本文地址：http://www.iscss.tk/?p=28
版权所有 © 转载时必须以链接形式注明作者和原始出处！