我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网页空间、营销软件、网站建设、潜江网站维护、网站推广。

一、页面构建必备工具—Firebug

相信每个页面构建的同学都有这个工具吧?如果没有的话，你赶紧安装(点击此处安装),Firebug就像它的名字一样，帮你找到虫子，烧掉它!同时有一些firefox的页面调试工具也是基于Firebug的，比如Yslow,CSSUsage

二、网页测量利器–MeasureIt

当我们拿到一个设计稿,写完基本的结构后,我们的测量工具可能就开始了,那些间距\高度\宽度\对齐,就需要一把好尺子来协助我们了,这里我像大家推荐MeasureItFirefox点击安装,通过这把尺子,我们就能很方便的进行一些测量对齐工作,但是这个工具的缺陷是由于那个尺子的边框,我们不容易达到像素级的标准,那我们就需要下面将要介绍的工具Pixelperfect

三、实时颜色选取工具–Colorzilla

将版式调整好后的任务应该就是处理颜色方面的问题，通常我们会将其放到ps等图片编辑软件中来查看相应的色值，如果有了Colorzilla，我们就能更直观的使用颜色，特别是有时候我们用文本编辑软件编写CSS色值的时候，我们甚至可以将设计稿直接拖到浏览器里面直接去想要位置的颜色,而且支持RGB，RGBa，HSL，十六进制，可以直接复制。同时这个软件还提供了色板和渐变生成工具。点击此处立刻体验

四、检查网页的相关信息–WebDeveloper

一个页面相关信息的集大成者，任何关于网页前端的信息你都能从里面找到，我们可以很方便的查看网页的大纲、无CSS，查看DOM节点等。只要你想，基本都有了。

五、让你的CSS更瘦一些—CSSusage

随着产品经理一遍遍的调整产品，你是不是也感觉你的css文件慢慢变胖，但是又不敢轻易删掉一些样式，因为你不知道它们是不是被用到过，那就让下面的CSSUsage来帮你。

通过检查class名称使用情况，来查看页面中的CSS信息，从而方便开发者优化CSS样式表。

可显示4类信息

Seencss中当页所使用的class

Seenbefore此class曾经出现在此网站的其他网页，当然是在已经浏览过其他网页的情况下

Unseencss中的class，此页面并未使用过

:hover伪类信息

我们以前曾稍微深入的探讨,请移步至CSS减肥工具—CSSUsage

六、网页评级工具–Yslow

Yslow是基于firebug的一个网页评级工具,它根据Yahoo用户体验部门订制的34条可能对网页前段表现产生影响的规则,这些规则中有23条可以通过这个工具来测试.即使我们不使用这个工具,了解这些规则也是很不错的.

1、减少Http请求

2、使用CDN

3、避免使用空SRC或者href

4、AddanExpiresoraCache-ControlHeader

5、压缩组件

6、将样式文件放在页面的上面

7、将脚本文件放在页面的下面

8、禁止使用样式表达式

9、使用外链的css和js文件

10、减少DNS查找

11、减小CSS和JS文件

12、避免使用重定向

13、删除重复内容

14、ConfigureETags

15、是Ajax可以缓存

16、使用Get方法来处理Ajax请求UseGETforAJAXRequests

17、减少DOM节点的数量

18、不要有404页面

19、减少Cookie文件的大小

20、UseCookie-FreeDomainsforComponents

21、避免使用滤镜

22、不要在HTML中重定义文件的大小

23、favicon.ico小而且可以被缓存

以上内容由创新互联（成都网站建设）为您提供,更多精彩内容：https://www.cdcxhl.com/

本文标题：网站优化建设firefox小工具（一）
本文网址：http://ybzwz.com/article/spocch.html