快速业务通道

页面构建事半功倍:页面构建常用的一些小工具

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

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

  • 页面bug调试工具–Firebug
  • 实时测量工具–Measureit
  • 实时颜色选取工具–Colorzilla
  • SEO优化工具–SenSEO
  • CSS使用效率优化工具–CSS usage
  • 网页截图存储工具–Pearl crescent page saver basic
  • HTML页面与设计稿比对工具–Pixel perfect
  • 本地调试页面样式利器–Fiddler
  • DNS刷新工具–DNS flusher
  • 网页评级工具–Yslow

页面构建必备工具 — Firebug

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

网页测量利器– MeasureIt

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

实时颜色选取工具–Colorzilla

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

检查网页的相关信息–Web Developer

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

让你的CSS更瘦一些 — CSS usage

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

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

页面构建事半功倍:页面构建常用的一些小工具

可显示4类信息
Seen css中当页所使用的class
Seen b

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号