芒果 » Firefox

ConvertIcon
Favicon 越来越受欢迎，尤其随着 Firefox 的流行，Firefox 会将你站点的 Favicon 标志显示在标签上，也会显示于书签，Favicon 支持多种图形格式，比如 png，但 IE 并不支持 png，该站点可以帮助你将 png 等图片格式的 Favicon 转换成 IE 支持的 ico 格式。

BgPatterns
现代 Web 设计的趋势之一包括使用背景图案，BgPatterns.com 可以帮你设计背景图案，他们有大量可选的图案，可以按不同方式接合，还可以设置透明度。

HTML Encoder
如果你要在网站中显示 Web 代码，那将是非常烦人的事，你必须将诸如 < 一类的符号用编码表示，这个网站可以帮你做这些事情，只需将你的代码复制进去，他们会帮你生成可以直接使用的代码。还有 HTML Decoder 帮你做相反的事。

Xenocode Browsers
该网站非常有用，可以直接在站点中预览你的网站在 IE6，IE7，IE8，Firefox 2，Firefox 3，Google Chrome 以及 Opera 中的样子。唯一的不足是，不支持 Mac 和 Linux 环境下的浏览器。

Test Everything
这个网站包含了超过 100 中工具帮你测试几乎所有东西，如跨浏览器兼容，查 PR 值，甚至帮你验证代码。

Sprite Generator
CSS Sprites 在显著降低 HTTP 请求方面功不可没，但 CSS sprite 可不是个简单的技术，Sprite generator 可以帮你做这些繁复的工作，将你的图片打包成 zip 上传上去，他们会把你的图片组合成 sprite，还帮你生成 CSS 代码。

Buttonator
这个网站可以帮你设计漂亮的按钮。

Load Impact
这个压力测试站点可以帮你测试你的站点的抗压能力，如果你的某篇文章曾经上过 Digg 或 StumbleUpon 等网站的首页，你就会知道抗压测试多么重要。

IconFinder
这个网站收藏了大量来自网络的免费图标。

TypeTester
该站点可以帮你测试不同字体的显示效果。

CSS Tidy
这个站点可以帮你检查 CSS 代码，并修正其中的错误，比如，它可以发现你的 CSS 代码中最常见到重复设置问题。

Contact Forms Generators
自定义表单可以帮助你实现同访问者的互动，无需编程，就能快速生成访客反馈表单，甚至帮你生成邮件发送 PHP，ASP，Perl 代码。

英文原稿：15 sites web developers and designers should know | CatsWhoCode
翻译整理：Web 设计与开发者必须知道的 15 个站点 | COMSHARP

16 款优秀的 Firefox SEO 插件

芒果 — Sun, 26 Jul 2009 11:39:28 +0000

Firefox 跟 WordPress 一样，其魅力在于拥有无可限量的插件与扩展，只要你能想到的功能，就有人能够帮你实现。下面收集的是 16 款 Firefox SEO 相关插件，欢迎使用。

1. SEO for Firefox

功能强大。可以显示PR，网站年龄，外链，Alexa，教育网链接等等一大堆 SEO 相关的资料。SEO for Firefox 可能是目前最强大的 Firefox SEO 插件了，由 SEObook 出品。 SEO for Firefox 功能非强强大，安装 SEO for Firefox 扩展后打开页面，会显示非常多的该网站的资料，如 PR 值，Delicious 上面的收藏数量， Technorati 反向链接情况，Alexa 排名，WhoIs 信息等几十个参数。

2. SeoQuake

SeoQuake 曾被国内的站长称为 SEO 终极完美工具，功能也是非常之强大。安装 SeoQuake Firefox 扩展后可以显示 Google PR，Google，Yahoo 和 MSN 等搜索引擎的收录数量及反向链接等内容，而且具有很强的可定制性。

3. SEO Link Analysis

SEO Analysis Tool 这个 Firefox SEO 插件可以在你使用 google 工具箱和 Yahoo! Site Explorer 的时候丰富链接的资料。例如，可以显示锚文本，反向链接是 nofollow 属性还是已经不存在了。

4. Rank Checker

Rank Checker 是 SeoBook 出品的另外一个 Firefox SEO 工具，这个 SEO 插件可以保存并跟踪任意一个网页在 Google，Yahoo 和 Live 三个搜索引擎里面的排名情况。因为这些结果都是保存在本地电脑上的，所以用户不用担心隐私等问题。

5. LinkDiagnosis Firefox Extension

LinkDiagnosis Firefox 扩展可以让站长看到每一个反向链接的 PR 值，反向链接的使用的锚文本，最多使用的链接锚文本等。

6. Smart PageRank

Smart PageRank 是一个非常简单但是功能强大的 Firefox SEO 工具，可以显示当前你访问页面的 PR 值，alexa 排名，Whois 信息，反向链接的 PR 等。

7. RankQuest SEO Toolbar

RankQuest SEO Toolbar Firefox 扩展可以让你一目了然的知道你的网站在 30 多个 SEO 工具里面的情况。

8. Quirk Search Status

SearchStatus 这个 Firefox 扩展可以在 Firefox 上显示很多 SEO 相关的数据，例如 Google PR 值， Alexa 排名，Compete 排名，moz 排名，Whois 信息，robos.txt 的链接地址，sitemap.xml 的链接地址等。

9. HTML Validator

HTML Validator 这个插件不仅仅对于网页设计人员和开发人员非常有用，还是个非常有用的 SEO 工具。HTML Validator Firefox 扩展可以让你检测 HTML 代码中的错误，从而提高网站在搜索引擎中的排名。

10. SEOpen

Provides 提供了很多搜索引擎优化相关的数据，例如 google 里面的反向链接数量，Yahoo 里面的反向链接数量，Google PageRank 查询，http header 检测等。

11. Google Global Firefox Extension

Google Global Firefox Extension 这个 FireFox 扩展可以允许你选择不同国家的 Google 自然搜索结果和付费搜索结果，对于所搜索引擎竞价排名非常有用。

12. Foxy SEO Tool

Foxy SEO Tool 是一款免费的，开源的 Firefox SEO 插件，网站主可以利用 Foxy SEO Tool 进行网络流量和页面分析。

13. Socialphile

Socialphile Firefox 扩展可以让网站主搜索社会化新闻网站的结果，同时可以站长直接提交搜索结果到社会化新闻网站，目前仅支持 Digg.com，开发人员表示将会支持更多的社会化新闻媒体网站。

14. KGen

KGen Firefox SEO 扩展可以让你非常快速的指导一个网页上面密度最大的关键词是什么，对于网站主来统筹整个网页的关键词密度策略，或者与竞争对手的网页进行关键词密度分析非常有用。

15. Niche Watch Tool

Niche Watch Firefox SEO 插件可以显示域名的反向链接数量，搜索引擎抓取数量，PageRank 值等等。

16. User Agent Switcher

User Agent Switcher，一款非常有用的 Firefox SEO 扩展，用来伪装浏览器和操作系统的标识。

转载自每一个 Blogger 都应该知道的 16 个 Firefox SEO 插件 | 博客联盟

透明图片的 CSS Alpha 滤镜方法

芒果 — Thu, 18 Jun 2009 09:19:42 +0000

网页图片的透明效果，可以使用诸如 Photoshop、Firefox 等桌面软件处理，然而利用 CSS 的 Alpha 滤镜可以更简便地实现图片透明化。Alpha 滤镜用于把一个目标元素与背景混合，以指定数值来控制混合的程度。

CSS 滤镜并不符合 Web 标准，不过鉴于 IE 的市场份额，还是有一定的使用范围。在 IE 中透明渐变代码一般如下：

当然，样式代码也可以独立编写。滤镜可选的参数说明如下：

opacity – 透明渐变的开始透明度。
finishOpacity – 透明渐变的结束透明度。
style – 0 表示统一形状，1 表示线形，2 表示放射状，3 表示菱形。
startx/starty – 透明渐变开始坐标。
finishx/finishy – 透明渐变结束坐标。

如果是 Firefox 浏览器，只可以实现图片的透明效果，示例样式：

-moz-opacity:0.5;
opacity:0.5;

其参数取值范围为 0~1 之间。

这种透明图片的处理方法只是源于 IE 的旁门左道，在考虑多种浏览器兼容性方面，通用性差，仅供参考。

CSS 文本域和按钮对齐问题

芒果 — Fri, 12 Jun 2009 02:22:53 +0000

在不同浏览器中，CSS 文本域和按钮对齐的表现不尽相同。芒果曾经被此问题困扰很久。后在帕兰的帮助下得以解决。现简要分析此问题的浏览器兼容方法。

对 input 标记设定样式，代码如下：

//HTML 代码




//CSS 代码
#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;}

文本域设置高度 16px，按钮高度需要设置 20px。按照 IE 的标准正常对齐，但在 Firefox 中文本域和按钮高度是错开的。

此时通过对 input 标记设定左浮动 (float:left)，即可兼容 Firefox，CSS 代码如下：

#textfield{border:1px solid #000;height:16px;float:left;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px;float:left;}

当然，可以使用 CSS Hack 以更有针对性地控制浏览器表现。

FireBug，网页开发调试工具

芒果 — Thu, 05 Mar 2009 01:19:48 +0000

Firebug 是网页浏览器 Mozilla Firefox 的一个扩展，是一个除错调试工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与 JavaScript 代码。

Firebug 是 Firefox 强力推荐插件之一。集 HTML 查看和编辑、Javascript 控制台、网络状况监视器于一体，是网页开发人员的必备工具。虽然属第三方插件，但是它已和 Firefox 浏览器无缝结合，使用方便直观。能从不同的角度剖析 Web 页面内部的细节层面，分框架实时调试和浏览。还可以分析网页下载的效率，甚至可以自己扩充 Firebug 的功能。

Firebug 官方主页 / Firebug 1.3.3 官方下载地址

目前 Firebug 已更新至 1.3.3 版本，支持 Firefox 3.0 版本。

注：可在 Firefox 的“工具”-“附加组件”中直接搜索 Firebug 插件并安装到 Firefox。

芒果 » Firefox

Firefox 下的亦歌音乐盒插件

推荐阅读

Firefox Sync，同步 Firefox 浏览器数据

推荐阅读

Xmarks，Firefox 书签同步扩展插件

推荐阅读

Google Analytics Monitor，Firefox 统计监控插件

推荐阅读

40 个出众的网页设计展示站

推荐阅读

Web 设计与开发者必须知道的 15 个站点

推荐阅读

16 款优秀的 Firefox SEO 插件

推荐阅读

透明图片的 CSS Alpha 滤镜方法

推荐阅读

CSS 文本域和按钮对齐问题

推荐阅读

FireBug，网页开发调试工具

推荐阅读