9月 142008
 

Firefox下调试Div/ CSS网页的三大插件

Firefox 是什么就不用说了,地球上的站长都知道,他的浏览器市场占有率仅次于IE,尤其被各大小站长所喜爱。除了大家都熟知的标签显示,定制外观等许多功能外,被站长们喜欢的还有以下两个重要原因,一是Firefox是完全符合W3C标准的,而IE却自成体系,搞自己的一套,导致很多网页只能在IE 下浏览,可怜的站长们为了保证所有用户的正常浏览,不得不在开发时,在IE、Firefox中频繁切换,以求兼容;另一个原因是Firefox提供了大量的各种免费功能插件给用户,用户可以方便获得众多附加功能。

Firefox的插件实在是太多了,今天,我们只讲一下在进行网站的DIV/CSS设计与调试中所使用到的几个插件。

1、 IE Tab 插件

首先就是IETab,这个插件的功能很简单,就是一个在Firefox 的框架下,在IE内核与Firefox内核之间切换的工具,安装完毕以后,就会在Firefox下方的状态栏中出现一个图标,单击这个图标,就可以轻松实现这两个内核的切换,这样,可怜的站长们就不用在两种浏览器中频繁切换来看网页的设计效果了。

2、 Web Developer 插件 (或firebug)

其次就是大名鼎鼎的Web Developer,这个工具在这里就不再细讲,他的功能确实太牛了,网上有很多有关他的教程,这里有详细教程:http://hi.baidu.com /lesliespace/blog/item/88f4b9b596ea80c836d3cab3.html。大家去看就是了。在这里只是简单的说一下他的CSS菜单,在这个菜单中,除了能显示css代码、显示各个元素的样式信息、显示网页的手持式设备显示效果等功能外,最方便的就是它可以在线调试 css代码,在界面上可以实时看到调整后的显示效果。调试css代码简直太方便了。

3、 Html Validater插件

当你完成了一个网页后,如果你想检查你的代码是否标准,是否最优,大家最常用的就是W3C网站的在线校验工具了。网址是:http://validator.w3.org/,大家只要输入自己的网址就可以了。经过测试后,网站会生成一份测试报告,将你的网站中所有不符合 W3C标准的代码为你标识出来,并告诉你应该如何处理。

而在Firefox中也有一个类似插件,可以完成同样的功能,Html Validater。安装这个插件后,当你浏览网页时,就会在浏览器的右下角会显示出该网页目前有N个Errors,N个Warnings,N个 access Warnings。只要双击这个区域就会显示出该网页的源码、错误信息、错误信息所在位置,并给出修改错误的方案。同时,这个插件也提供了在线的W3C校验的链接,也可以很方便的进行W3C检测。

一般来说,校验网页中出现的Errors一定要修改过来的,这些都属于比较严重的错误,至于Warnings,也建议尽量的改过来,如果 Warnings 太多,说明你的代码有很多不规范的地方,在一定程度上,会影响用户或蜘蛛访问网页的速度;至于最后的access Warnings则不必理会,其实,这些Access Warnings只是一些建议而已。即使是W3C机构的网页也有133个access Warnings。

装上这个插件去访问其他网站,发现比较大的网站都可以达到Errors为0,但是仍有很多没有达到Warnings为0。那些通过W3C认证的网站则没有任何问题。提供几个网站,大家可以上去看看,他们的Errors和Warnings全部为0。如W3C机构:(validator.w3.org),悠然商旅网(yrtrip.com),北京浩宇视界等。

4、 如何安装插件

最后一个问题,就是如何下载并安装这些插件:启动Firefox,进入菜单 工具-附加组件,然后点击图标“获取附加组件”,就会进入“Firefox 附加组件”网页,在这里查找,安装就可以了。另外,也可以直接在Firefox中访问:http://addons.mozilla.org/zh-CN /Firefox,可以达到同样的效果。

 回复

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>