静态网页逆向分析

哈哈,这个话题(也许根本就没这个东西)太大了,成了标题党了。
其实,我想谈一下我学习CssZenGarden的一种方法:
1)分析文档结构
2)获取图像(包括装饰用背景图像)
3)获取颜色信息
4)分析,猜想,试着写出CSS
5)对比,学习作者的CSS

需要使用的工具:
1)新版的FF,IE6
2)一个有用的FF插件:http://chrispederick.com/work/web-developer/
不好意思,中文版的地址实在找不到了,自己去搜一下吧。
3)DWcs3,听说topstyle很好,没用过。

下面我具体谈一下每个步骤的做法:
1) csszengarden的文档结构如下:
www.stuffandnonsence.co.uk/archives/3d_css_zen_garden.html

2)可通过上面的ff插件获取图像和颜色信息


3)通过前面的两个步骤,可以说,准备工作已经完毕了,然后发动你的头脑开始分析了,这没有一定的规则,
我的步骤如下:我会打开原始网页,分析它的布局,观察图像位置,分析可能应用图像的元素。当有了一个初
步印象以后,然后开始尝试,按照你当前所学的知识:边分析,边编码,然后预览,对比,找出问题,在分析
.....按照这个循环一路做下去。这个过程可能不会很平坦,可能会走许多弯路。但就在这种集中的思考中,你
会理解很多问题。很多CSS知识,概念很简单,比如空白边叠加,但只有有了相当的经验以后,才能游刃有余。

4)俗话说,学而不思责惘。现在到了,分析,思考,总结的时候。对比作者css代码(这个也通过上面FF插件
得到),分析得失。csszengarden的代码比较灵活(活者说比较有技巧,但通常这样的代码在书中都有讲解),
可以让你的思维活跃起来。尽信书不如无书,这些代码不一定就是标准,你也许有不同解决方式。它里面很多
作品2004年,2005年所作,也许有些技术被淘汰,也许有了更好浏览器支持,不需要再考虑这些hack。更重
要的是,我们现在只需支持更少版本浏览器了,不用再考虑IE5.5之类的了(妈的,不说了,IE6是每个web设
计者都必须过的关,要知道,IE6在中国市场占有率仍然80%以上)。

最后,开始写博客吧,把你学到的技术,理解到的方法,技巧,你学习的感想,等等统统写下了。这不仅是复习
了知识。更重要的是会加强你的理解。

 

posted on 2009-11-08 12:14  ewee  阅读(850)  评论(0编辑  收藏  举报

导航