Tips: 使用 FireFox+FireBug 美化博客

  对上一篇文章我已经大概介绍过 FireFox 浏览器的 FireBug 扩展,它不仅仅能够帮助我们分析页面的加载过程,更重要的功能是帮助网页设计人员开发网页。

  因涉及的知识面很广,所以我只在这里跟大家说说,如何利用它来美化自己的博客模板 :)

 tips-firebug-01.gif tips-firebug-02.gif

  左图:是FireBug扩展查看页面HTML元素的截图,左侧为HTML代码,而右侧则是当前HTML标记的css属性。

  右图: 点击扩展界面左上角的查看按钮,我们的鼠标在浏览器上指向某一区块,那么左侧的HTML标记可自动定位到当前标记上。找到自己需要的区块,按下回车键(防止点击页面上的链接)右侧的css属性可切换到当前标记下。通过该功能我们可以快速找出自己想修改的HTML标记和css,方便修改。

tips-firebug-03.gif tips-firebug-04.gif

  左图:在HTML标记的css属性上,我们还可以点击相关的文字进行修改。比如我刚从是定位到博客标题的文字上,css属性列表中的 #header a {..,} 就是文字的属性了,其中已带color颜色属性为#000000黑色。点击颜色值将出现编辑框,我们可以在这里即时修改css属性并预览效果。

  右图:我们已经准确找到准确HTML标记的css属性,我们就可以参考css熟悉列表上的元素名称,对自己的模板css进行修改。

tips-firebug-05.gif tips-firebug-06.gif

  左图:切换到布局选项卡,我们还可以直观的看到当前HTML元素的大小和定位信息。

  右图:Yo2的博客可以进入管理后台-》私有模板-》编辑私有模板,修改模板的css文件。一般把自己需要修改的css写在文件的尾部。(如果你正在使用系统模板,请先私有化)

  以上是很简单的使用说明,至于如何写出自己需要的css效果请参考《CSS2 参考手册》 ,通过css可以不仅于修改文字的大小、颜色,还可以修改背景、定位、特效等等,你所能看到的一切 :) BTW:我无法提供HTML或CSS的教学指导,因日常工作量也蛮大的,还请体谅。我鼓励大家一起学习,互相帮助!

Tips: 使用 FireFox+FireBug 分析网页加载过程

Firebug是Firefox下的一款开发类插件,现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。~~引用: 初识Firebug 全文

安装好FireBug扩展后,在 FireFox 中打开FireBug的界面,扩展就可以捕获当前窗口(标签)的网页加载过程。如我按Ctrl+F5强制刷新访问博客首页 http://oneoo.com

 firebug-tips-01.gif firebug-tips-02.gif

  从左图最下方,我们可以看到整个页面加载浏览器发起了94个请求,总下载数据是146Kb,整个加载过程耗时5.24秒。而在右图,点击请求列表以展开显示该请求的详细信息,当中包括了服务器传回浏览器的Header信息,和浏览器向服务器发出请求的Header信息。这些Header信息对于普通用户来说,没什么特别意义,我就不在这里给大家阐述了。我们只需要找出影响页面加载速度的地方就足够了 :)

 firebug-tips-03.gif firebug-tips-04.gif

   从左图我们可以在请求列表上,很直观的就可以判断出哪些请求是比较慢的。查出原因就可以对症下药,想办法加快它的加载速度(通常是由我来想的)或删除之。而右图则是浏览器刷新访问时产生的请求列表,当中可发现很多请求只是304 Not Modify返回(即无需重新下载,使用浏览器缓存)结合下面的右图(普通点击访问)所产生的请求列表,来做一个综合性的分析,看看哪些请求在下载时的速度慢,和哪些请求是可以被浏览器缓存下来的(这个最重要)务求把普通点击访问所需要发起的请求数量降到最低(Yo2的博客最低可以只发起2个请求)我的博客已经做过认真的分析和优化,去除了第三方网站的访问统计,第三方网站的图片调用等等,与博客没什么必要关联的东西,可以说是最佳状态了。当然关闭yo2sns插件的访问统计功能,速度还能更快一些。

  但做事不一定要极端的,能把页面的加载耗时控制到10秒以下,基本ok :)

firebug-tips-05.gif firebug-tips-06.gif

  左图是我使用另一个扩展 Yslow分析得出的数据,左边的饼图是浏览器在没有任何缓存数据的情况下,将需要下载的页面元素,右边的饼图则是在浏览器有缓存数据的访问所需下载元素。 Yslow还可以给页面下载速度打分,要获取高分就得有很高深的优化能力了 _-!!不是一般人可以做得来,我的博客评分也只是60左右,勉强及格。

  我的博客页面上的元素非常多,达到 94个,能够获得5秒左右的加载速度,成绩算理想的。我个人评分是90分 :D 看过其他BSP提供的博客服务,个别经过精心优化(很少图片)的页面加载需要发起30多个请求,耗时在3~5秒左右。而部分华丽的BSP甚至一个页面就需要发起100多个请求,加载耗时超过10秒 _-!!什么音乐播放器、动态相册、广告等等的附加元素都挂到博客上,不慢才怪 _-!!

  博客是以内容为主打,千万别忘记这个宗旨。太多花哨的玩意不会增加流量。