Jorux Notebook

注: 由于文章难度加大, 以及十一长假将至,《If you like css …》推迟一周更新. 将于长假期间更新. 关于上篇文章留下的问题已经在留言部分说明, 尚未解决问题的朋友请参看属性篇(3)—If you love css …的留言部分. 在此感谢红鼻子的正确, 认真的解答.

事出有因:

1. 由于本人设计网页的缘故, 习惯使用Firefox浏览器(浏览本站的访客中只有1%在使用Firefox);

2. 网易是三大门户网站中唯一使用css+div构站的, 界面比较干净, 所以习惯于浏览网易新闻的news.

基于以上两个前提, 你会发现用Firefox浏览网易新闻时,  cpu占用率就会居高不下, 形同死机状. 最初以为是某个插件与其冲突, 但用Firefox的安全模式, 屏蔽掉所有插件后, 症状依然.

于是, 一场斗争开始……

结果, 自从使用了Adblock Plus, 网易新闻变成了这样(点击看大图), cpu的占用率也恢复正常:

 原因分析:

1. 在Firefox的安全模式下, cpu占用率依然居高不下, 可以排除插件冲突;

2. 访问单个新闻时, 占用率是正常的, 说明问题出在http://news.163.com的新闻主页上;

3. 首先怀疑是新闻主页上的某些Flash造成占用率居高不下, 用Adblock Plus屏蔽后依然不奏效, 排除此因;

4. 有怀疑是主页上的某些js文件的原因, 屏蔽后问题依然;

5. 仔细观察cpu的占用率变化情况, 发现其有规律性的变化, 总是先正常, 然后增加到50%以上, 之后又下降到正常, 以此往复. 再看看新闻主页上是否也有不断变化的元素, 随发现其导航下靠左边有一滚动新闻条, 时而出现, 不断滚动, 变化居然和cpu占用率有点同步. 发现疑点. 遂屏蔽此滚动条.

6. cpu占用率恢复正常, 问题解决.

所需工具:    Firefox      Adblock Plus      FireBug (FireBug的使用方法见If you love css … )

操作方法:

1. 在Firefox中安装插件Adblock Plus和FireBug;

2. 打开网易新闻, 然后点击FireBug的小眼镜, 将鼠标移到滚动新闻处, 就会在下方出现的Inspector窗口中找到滚动新闻的源代码, 即其处于<div id=”hotNews_new”></div>之中. 如下图(点击看大图):

3. 打开Adblock Plus(位于Tools–>Adblock Plus…), 增加一个过滤器(Add filter):

163.com#div(hotNews_new)

4. 刷新网易新闻, 你就会发现那个滚动新闻消失了, cpu占用率也恢复正常.

5. 是不是看网易头部的导航条和广告不爽, 同样的方法, 先用FireBug找到导航条和广告所处的div, 发现它们均处于<div id=”globleNav”></div>之中, 然后增加一个过滤器:

163.com#div(globalNav)

6. 刷新, 就会看到如第一张图片所示的被清洗的网易新闻. 

Adblock Plus过滤Element的原理:

如果你查看被清洗的网易新闻源文件, 就会发现那些被屏蔽的Element依然是存在的, 只是没有显示出来而已, 也就是说Adblock Plus只是在浏览器读取网页css时, 加入了类似于下边的代码:

***{
display:none;
}

如何建立Element过滤器: 

以滚动新闻的过滤器为例, 其代码如下:

163.com#div(hotNews_new)

1. #号前为需要添加过滤器的网页地址, 这里既可以是http://news.163.com, 也可以是163.com, 而163.com囊括了所有http://*.163.com;

2. div代表了被屏蔽Element的类型, 如是类型<tr id=”*”>, 则可填tr; 亦可以通配符”*”代替所有的Element类型, 如把以上代码写成:

163.com#*(hotNews_new)

3. 括号里面的内容则代表了Element的id或是class值.

更加详细的说明请参看: Writing Adblock Plus filters

推而广之:

总的来说, 国内网站的UI设计还处在一个初级阶段, 广告投放商和制作者的水平也是参差不齐, 基本上是简单重复和视觉冲击折磨, 可以不客气的说, 大部分网站都是被广告强暴了的.

举个典型的例子: 华军软件园

打开此网站后, 满视野均为banner广告, 像是刚被轰炸过的城市, 满地鸡毛. 从广告类型来看为动态Flash和Gif, 广告商为了”吸引”眼球, 不惜运用一些对比度非常强的红色黄色, 以及一些毫无创意的勉强称得上是动态的动作, 诸如左右, 上下摇摆, 变换颜色等极度伤害视觉效果的恶俗动态.

殊不知, 访客已经是Banner blind, 广告商从不调查一下有多少访客点击或是实质上注意到过其中的广告.

为什么大洋那边就有这样的网站:  A List Apart (国外最为权威的web design站点)

1. 广告投放点只有一处, 且位于右边靠下;

2. 为静态广告;

3. 颜色和网站主体相配;

4. 所占面积小;

这两个例子虽有点极端, 但被广告强暴的国内网站也应该从UI和广告效果上反省一下了. 我想这也是涉及中国人面子的事, 就像改变国人不良习惯一样, 改变一下网站广告的不良形象, 从你我做起, 从你的博客做起, 不要投放过多广告, 力求向以上四点靠拢. [End]