最近两周一直在学 Javascript。尽管没有任何的编程经验，也还是逼着自己一点一点啃完了语法。到目前为止，基本上还算是没有遇到什么太大的难题。从昨天起去 mootools 下载了一些脚本，随后便开始了自己的第一个 js 项目——搭建一个基于 javascript 的在线相册。

因为主要使用的是现成封装好的 lightbox 和 mootools 的 Fx.Element，因此在编写脚本上并没有花太大功夫，主要都是调整和熟悉别人对于 javascript 的使用——看着人家的代码，自惭形秽啊，怎么自己弄起来七死八活的东东别人用起来就那么行云流水呢？当年偷师别人的CSS的时候都没有过这样的感觉。一切在尚算顺利的状况下一瘸一拐地前进着，直到今天上午，直到刚才，直到我突发奇想关闭了 Fx 的 javascript 支持。

没了浏览器对于 javascripe 的支持，那个刚才还华丽丽的 gallery 变成了只有索引图片的一潭死水，任我把鼠标左键点得如小鸡啄米依然毫无反应。我愣住，随后想起去掉 CSS 之后自己写的页面，叹口气，关掉了那个死水 gallery 的页面。

最终，我还是忘记了使用 javascript 应该记住的第一要义：要预留退路，要在浏览器禁用 javascript 的时候依然能访问你想呈现的东西。

对我来说，挑战 javascript 其实应该属于不自量力的一种表现形式——如我这般凌乱的逻辑思维能力，看了半本黑格尔的《小逻辑》依然没用；再加上一穷二白的写代码经验，根本就是开自己的玩笑嘛。但是……还是下决心要挑战一下才肯罢休，毕竟不能一直都只是纠缠在如何将图片或者PSD变成 XHTML+CSS 上面。在看过了《DOM Scripting》之后，我终于鼓足了勇气奔着 javascript 而去，只是在我自以为领悟透了《Unix编程艺术》与《DOM Scripting》的要义之后还是犯了最要命的错误。

尽管 web 2.0 和 AJAX 一手把 javascript 的位置推到了它诞生以来的最高点，但是那段最臭名昭彰时代的阴影还是一直盘旋在它头上无法挥去。浏览器之间的兼容问题目前已经得到了很大的好转，但是随之而来的就是滥用的问题。使用 javascript 生成内容一直是 W3C 和各个web标准组织不推荐的，但是目前用 javascript 生成内容的页面依然比比皆是——如此一来的后果就是一旦浏览器禁用了 javascript 访问者就什么东西都看不到，只能冲着呆若木鸡的页面发愣。可能会有人嘲笑：这完全是杞人忧天啊，都 web 2.0 的时代了，难道还会有人禁用 javacript 不成？问题就是，的确会有一些人禁用浏览器的 javascript，有一些拦截广告的浏览器插件也是冲着 javascript 下手的，难道你一句“这些人毕竟是少数，我们的目标客户也不是这类人”就可以了么？

因此，最好的解决方法还是将所有的东西该呈现的都呈现出来，只是用 javascript 决定哪些该藏，那些该露，或者添加一些动画效果增强交互性；或者一些不重要的、仅仅是一些提示功能的内容——比如相册中点击某图片之后出现的 loading 动画——可以由 javascript 生成。永远都要预留退路，在退路的基础上再发挥，如此才可以保证将 javascript 很好得利用又不会发展为滥用。

或许我的 javascript 之路还有很长很长很长……一段要走。

现在要面临的问题就是，如何给我的 gallery 预留退路呢？以我现在的水平，要自己去重写出一个预留了退路的脚本根本就是天方夜谭……算了，还是踏踏实实，重新去看语法和别人的代码吧……

到北京以后的第二个星期重新温习了《The Zen of CSS Design》，加上最近接触的公司的项目和刚刚完成的 training project，对于 margin、padding 外加浮动布局这几位老朋友运用得更加娴熟，同时也比以前有了更深的认识。

之前我一直觉得为了避免IE对于盒模型的非标准理解应该尽量使用 margin，但是最近发现这种想法有点天真——首先，margin 纵向叠加的问题是所有浏览器都存在的；其次由于IE对于“拥有布局”的奇特定义，几乎所有的著名 IE bug ——双空白边浮动 bug、3像素文本偏移bug等等——都是跟浮动布局和 margin 过不去。因此web标准组织目前推荐是尽量使用padding，尤其是在浮动布局的时候。如果非要在浮动布局的时候使用 margin，还是事先就准备好解决方法的好。

相对于在一个 css 文件中使用大量 hacks for IE，现在的我更倾向于为IE的各个版本浏览器分别编写样式表——这样一来，在代码的修改和维护方面会更加方便，至少不用去眼花缭乱的找下划线 hack 或者花里胡哨的 Tantek 框模型 hack 了。风凝在刚刚完成的 training project 中便分别编写了针对现代浏览器、IE 7 和 IE 6 三个样式表。在分别处理针对 IE7 和IE6 的样式表的过程中，确实能感觉到对于这些浏览器对样式表的呈现方式有了全新的认识。以前在写一些 hack 的时候总会有误打误撞的感觉，这次却觉得自己在完好的理解了W3C标准之外，又可以很好的转换为 IE7 和 IE6 的理解模式，如此一来，思路更加连贯，编写起来也更加得心应手。

其实现在想想，padding 还是比较好的——关于它的 IE bug 只有盒模型一项，处理起来又十分简单。当年我居然会排斥 padding，真是鼠目寸光了一把。在这次的 training project 中需要做出三栏流体布局。感谢 padding，没有让我遇到很多麻烦，只是很少的一点加减法就解决了IE6中的显示问题——不得不说一下，这次的 project 风凝真的是一直都没离开 Windows 自带的计算器，只是不知道是该感谢微软的贴心设计还是对自己日益退化的心算能力脸红。

从目前的形势来看，只要微软帝国不倒，只要页面还需要流体布局（浮动布局），padding 总还是要比 margin 让人放心。其实说起来，float 真的比想象中要好用，除了需要对浮动元素进行清理，真的已经是很完美的控制了；而且经常可以将浮动的各个部分想象成漂浮在方形木盆里面的木块，木块之间的漂浮原则完全适用于浮动布局，比如假设两个相邻的浮动部分宽度总和大于它们的容器宽度，就会有一部分浮动到另一个下面——两块在木盆里的木块如果宽度之和大于盆子的时候，自然会有一块模板漂在另一个下面啊。有时候形象思维就是有助于思考，hiahia。

关于 margin 和 padding 以及跟他们有关的一切一切事情，我越来越不敢自称精通。停留于“知道自己不知道”的境界，期待着“不知道自己知道”的来临。关于这些没完没了的琐碎东东，不知道我能发现多少乐趣。

似乎不少初学 CSS 的人对定位问题都很感冒，尤其是 margin、padding，简直能要人老命（秋香？！）。不过风凝在当初学的时候并没有遇到太大阻力。这还是要归功于当初小打小闹画过一段时间漫画，为了投稿不得不学习了“边界”（margin）和“补白”（padding）的概念。

所谓”补白“，就是为了防止在印刷剪裁的时候造成白边而填充的内容——也有人往里面画搞笑四格的。一般的漫画杂志会要求将画面内容画满补白，但是不能在补白中画上重要的部分——有点像《名侦探柯南》动画组在自行制作一集动画的时候不能涉及主线和人物性格（笑）。而”边框“，一般就是一片空白——这里是不允许画上东西的，但是也不可或缺，在页面与内容之间保持一定距离避免过份拥挤。至于那个”边线“（border），就是边框与补白之间的一条蓝铅笔线——通常蓝铅笔线是不会被印刷出来的，所以会推荐使用蓝铅笔画边线。

其实 HTML 诞生之处就是为了给学术论文排版，因此只要稍加留意就会发觉 HTML 和 CSS 中的很多东西就是印刷术语。在 CSS 里看似抽象的 margin、padding，在印刷上其实是一个很简单的概念。嗯…不知道做平面的设计师对于 HTML 和 CSS 会不会比常人更敏锐，或许更敏锐的是排版工人吧

其实说来说去看来看去也不如自己动手写几行代码体会深刻——随便找一段文字或者一张图片，在它的选择器属性中设定宽度、背景图片/颜色、边框、padding、margin，来回复制粘贴几遍文字/图片的 HTML 代码，然后把东西拿到浏览器里面去看就一目了然了——元素和 padding 都是有背景的，而 margin 则是将文字/图片和其他的距离拉远。

效果怎么样？

如果你是个好孩子，应该会大叫一声：Oh no!

如果你真的测试了，你就会发现一些怪异的地方——纵向的 margin 重合了！这个现象当纵向相邻的元素 margin 值一样的时候尤为明显，似乎我们就只设定了顶部或者底部的 margin。纵向 margin 哪里去了？

Margin 和 padding 折磨人不仅仅是它们的定义不好掌握，也在于它们真的有点捉摸不定——有一个名词叫做“压缩边界”，就是说纵向相邻的边界压缩。这样有好处，那就是当我们需要编排一个纵向无序列表的时候，我们只需要写下

li { margin: 5px 0;}

就可以得到间距都是5像素的无序列表。压缩边界的坏处就如我上面提到的那个例子——当我们需要在 padding、边框以外再留出一段距离的时候该怎么办呢？

答：在相邻的元素的 margin 上动手脚吧。

上面这句话不是忽悠，是实打实的解决方案。只有这样才能保证出来的效果和你的预期以致——要知道，有时候捷径并非直线的那条路。不过还是有一个好消息的——压缩只应用于 margin，padding 和 border 不会被压缩。

目前流行的浏览器对于 margin、padding 的理解各有不同——现代浏览器们，比如 Firefox、Opera、Safari、IE7，都是按照web标准解释的，那就是元素框宽度=margin+border+padding+ width；而IE6及其更低版本，却将width理解为元素宽度+padding，既元素框宽度=margin+border+width——所以我经常怀疑IE6及其更低版本的开发者以前是给漫画社供稿的。因此在浏览器兼容性问题中，遇到最频繁的问题是 width/height 的问题。遇到这种bug，下划线 hack 和 !IMPORTANT hack 是最简便易行的解决方法。

Margin 和 padding 之所以重要，是因为它们承担了定位的任务——web标准不提倡 table 排版而是大力提倡使用CSS，margin 和 padding 就是使得排版变得轻松并且兼顾了浏览器兼容问题的解决方案。试想如果没有 margin 和 padding，恐怕我们还要和表格定位的网页作斗争吧？

随着AJAX近两年的大热，JavaScript也热门起来。想想当年DHTML时候的惨况，不知道JavaScript如果自己有知觉会不会感慨一番。其实相对于AJAX，DHTML才是正宗的卖弄概念——将当时刚出现不久的CSS参合上JavaScript和HTML就敢说自己是“动态HTML”了。不过使得DHTML这个名词臭名昭彰的并非卖弄概念这条罪状，主要是当时正逢浏览器大战时代，每个浏览器都有自己的一套DOM，使得网页制作人员为了呈现某个并不复杂的效果要针对各个浏览器重复编写大量代码，如此当然不能保证JavaScript在各个浏览器上都能顺利运行，因为加载JavaScript出错导致浏览器崩溃的事情不胜枚举。加之当时JavaScript也多被用作弹出广告框，导致很多人认为JavaScript就是浏览器崩溃、弹出广告的代名词。

JavaScript一开始就很冤——连名字都是让人误会的根源。JavaScript和Java完全就是两回事，但是似乎是为了给人一点“系出名门”的感觉，便抱上了Java的粗腿，从一开始的LiveScript改名叫JavaScript。这便导致了一个很尴尬的局面：一般的程序员觉得JavaScript不过是一个脚本语言，且只能在浏览器中生存，太过简单，跟“Java”相去甚远，不屑去学；而很多网页设计人员又因为“Java”一词心生畏惧不敢去学——风凝刚开始学JavaScript的时候也被其中的函数什么的唬了个半死。JavaScript真就是活生生的风箱里的老鼠。

这不由让人想起了另一个几乎可以跟JavaScript同病相怜的家伙：Flash。现在听到Flash，基本就是广告和动画的同义词了——或许应该再加上一个“页面打开缓慢”？而ActionScript则是失败了——现在完全用Flash建站的已经很少，有也都是一些个性化站点，小众的。浏览这些站点很费时间，基本上在浏览器地址栏中输入域名按下回车然后去悠悠闲闲煮杯咖啡回来刚好可以赶上进站动画。酷归酷，除非必要我还是尽量不去这样的站点。Flash的滥用和JavaScript有的拼——很多站点在使用Flash和JavaScript的时候很少考虑是不是必须用，而是认为“既然别人都有了那么我们也必须有”。记得就在前几年个人首页风行一时的时候，到处都可以看到“页面出汗”啊、鼠标下面跟着条鱼啊、韩国风格的Flash导航之类的东西，根本就不怎么考虑这些东西是否实用，只是觉得好玩便将网络上现成的代码拷贝过来粘贴就over了。风凝无语。

反观CSS，就是完全不同的结果了。从CSS一诞生开始人们就是很小心的使用——不知道和大多数网页设计人员固执的使用table定位以及内联样式有没有关系。就算到了现在，也有一些网页设计师只用CSS控制一下页面中的文字字体、颜色，定位的任务依然交给table。CSS Zen Garden在CSS推广方面无疑起到了举足轻重的作用。现在哪个连CSS定位都搞不定的人还要自称是网页设计师是要被耻笑的。W3C力推的CSS目前版本是2.1，预计CSS3的推出应该也不会很远，从目前官方泄露出来的消息来看，届时CSS的功能将更加强大，对标准支持不力的浏览器在彼时估计是很难生存的。

AJAX这个名词的出现以及现在 web 2.0 概念的火爆，可以说是JavaScript历史上一个黄金时期。但是就目前AJAX被抡圆了用的状况，实在不能对其未来抱着特别乐观的态度。对待JavaScript，是应该像Flash，还是像CSS？或许这才是决定了JavaScript这个小家伙未来几年命运的关键。

W3C公布DOM标准已经有些年头，DOM Scripting组织也在相关方面做出了有目共睹的贡献。但是真正愿意100%遵从标准去写JavaScript的又有几人？能将页面分为内容层、表现层、行为层彼此独立互不交错的又有几人？将浏览器中的CSS disable然后关闭JavaScript还有多少页面可以被人看懂？估计惨不忍睹的叶子不在少数。

风凝很感谢自己是在目前这个形势下学习网页设计与制作的——浏览器大战已经尘埃落定，W3C的相关标准已经广为人知并且被越来越重视，可用性设计也被提升到一个很重要的位置，不管是学XHTML还是CSS还是JavaScript抑或可用性设计都已经有了十分成熟的经验可供我借鉴，当然，也有不少活生生的反面教材给我敲着警钟。当我越来越贪婪的学习着这些东西并且不断成长的同时，我几乎不需要像前人那样担心今天学东西会不会过阵子就成了明日黄花——W3C的标准就摆在那里，现在的浏览器再竞争也一定要首先标榜自己对于标准的出色支持，当年那种自己跟自己玩、困难都留给设计师和用户的事情一去不复返了。

Blog边侧栏Twitter显示的“DOM Scripting”已经有一周时间了。或许有人会觉得是风凝偷懒不去更新，实际情况是这几天我一直都在看这本书，不断的学习并且思考。似乎直到我学了JS才算是完整的学习了网页的各个部分，而直到此时我才能以一个全新的视角去思考这个叫做“网页设计与制作”的东东。

JavaScript虽然不是非常的难，不过对于我这种一点编程经验都没有的纯种小白来说估计还是需要一段时日才能完全掌握。等JS这部分基本搞定，我想我会在设计方面再多下点功夫——因为我还不想当IT民工，我更希望这是我能一直从事下去的事业，而不是纯为了拿薪水的工作。

我知道“可用性”三个字，是去年的事情了。不过我真正的开始理解它并且能下意识在看到任何页面都会用“可用性”三个字去评判，是最近一个月的事情。3月初，我买了《Don’t Make Me Think》。

从寒假前到刚回来的那几天，我一直沉浸在 CSS Mania 无法计数、眼花缭乱的页面中无法自拔。CSS 让我着了迷。看过了很多别人的作品，自己也写了不少，但是始终觉得欠了那么一点，却总是不知道欠缺在了哪里。或许是设计上的不成熟，或许是色彩搭配上的缺陷，太多的或许让我摸不到头脑。谢天谢地，《Don’t Make Me Think》及时出现。

“可用性”，说白了，就是“Don’t Make Me Think”。一个互联网用户，不管他的上网资历深浅，不管他的职业与喜好，在面对一个完全陌生的站点的时候，这个站点的可用性如何对他而言，就是他是否需要自己能意识到的思考来到达他想要的部分。

我以前总是从页面的某个部分的设计去评判一个站点的可用性，直到我看过了《Don’t Make Me Think》才意识到自己错得多可爱。菜单是用列表还是下拉框都不是可用性的重点。在这种细节上，每个人都有不同的喜好，因此判断可用性，还是要从整体的设计去评判：就像颜色一样，每个人喜好不同，但是并不是影响人们浏览站点的第一原因。

我最喜欢的是Krug关于“好感储存器”的描述——假设进入一个站点的时候，我们都有一个好感储存器，而且在网站上遇到的任何问题都会使好感下降。如果这个站点的态度恶劣，好感就会被消耗殆尽，人们就会离开网站，以至于不会再回到这里。这个好感储存器有如下特点——

• 因各人特质不同而不同；
• 依情况而定；
• 可以被重新填满；
• 有时候一个错误就可以清空。

这样的一个好感储存器完全可以作为一个站点可用性的量度。而且可用性这种东西，本来就是严重的因人而异——就像使用*nix的用户对于技术型困难的耐受能力比Winodws和mac用户都要好一样。努力去填充用户的好感储存器，比无休止地研究是列表好还是下拉菜单好要实在得多。而且好感储存器并非一次定性的东西——一个错误可能会降低好感，但是很容易从错误中恢复并且给出适当的道歉又会增加好感。因此，与其为了虚无的“可用性”三个字去设计，倒不如为了好感储存器去设计。

寒假的时候看《精通CSS》。里面有一章给我的印象深刻——是一个例子，在去掉CSS之后依然可以很好的阅读，条理依然清晰。这对我的冲击很大——与其说是因为这样的页面对于使用屏幕阅读器的盲人也可以方便得浏览，到不如说是真正地领悟了CSS的真谛——定义元素展现的方式与样式。想想过去流行的用表格定位，整个页面如同俄罗斯套娃，一旦去掉了表格整个页面立刻惨不忍睹。其实现在很多使用 DIV+CSS 制作网页的人依然固执的保留着表格时期的习惯，为了追求视觉效果而将标签滥用。良好的可阅读性，应该是可用性不可分割的一部分，同时也正是可用性的体现。

现在的我对于可用性测试很有兴趣，只是估计最近几年是没有什么机会操作啦……不过我相信，在可用性上早迈出一步，对于以后的设计，就多一点好处。

看过了 CSS Mastery 才知道，所谓的“Fx浏览网页问题”其实是IE自身的问题。想那 IE 6 少说有5、6年没有更新，早就属于老掉牙的浏览器了——石器时代的网景我们就不讨论了；相比之下，Firefox 和 Safari 几乎是个把月就要更新一次，一旦发现bug立刻就会出补救版本，且也算是比较严格的遵守了W3C的规则。而IE作为的M$的产品，很自觉的继承了M$一贯的妄尊自大，偏就是喜欢按照自己的标准来，不鸟W3C那一套，加入了一大堆非标准的插件，才会有了所谓的“很强的兼容性”，打倒了不思进取的网景。由于windows的横行，IE也是占了绝对市场份额的主流浏览器，许多上网的人都是用IE浏览器，许多制作网页的人也都是从照顾IE起步。这就有了一个很大的问题：按照标准教程去学 XHTML+CSS 会发现书本上讲的东西在IE浏览器中许多地方都不对，为了照顾市场以及自己的饭碗又要学习一大堆hack手段，使得hack被滥用而真正的标准又被无视。更有甚者，干脆就奉IE标准为圭臬，大骂 Fx 和 Safari 兼容性烂。这种本末倒置的事情，满坑满谷。

很幸运的，从04年中开始我便一直把Fx作为主要使用的浏览器——所以到了Ubuntu，也没有什么不适应的地方。所以现在 XHTML+CSS 的时候，都是先用 Eclipse+Fx 把骨骼都搞定，然后再放到IE里面去看效果，在不伤到基本骨骼的情况下进行调整或者使用一点hack手段，兼顾一下广大 IE 6 用户。

因为机器配置所限，IE 7 我装不了，也就无从去研究。据说 IE 7 在服从标准方面大有进步，但是从其出身考虑，我还是不抱太大奢望。等年中换了新机器，估计就能有机会一睹 IE 7 的真容了。那个时候，就要学习新的 hack 手法了。无休止的猫鼠斗争……

现在的浏览器已经够智能了——不仅能将静态的动态的网页还有位图呈现——IE 6 不支持PNG透明这个事情让我一直想不通啊想不通，客户端脚本（JavaScript就是很好的例子啦）也是支持得风风火火。现在Fx已经支持SVG图像，估计矢量图象时代也不远了。再加上一些林林总总的插件扩展，现在正热的 web 2.0 服务，浏览器做不到的或许就只有一些专业软件和工程软件的事情了吧。在这样的时候，有没有更好执行W3C的标准，似乎可以作为一个很好的衡量标准——在一个趋于世界大同的背景下，固执己见的死抱着自己的那套标准不放，Netscape 已经是一个活生生的教训。

其实IE（主要是6啦，其他的我也没用过……）的问题归结起来就是它在html标签之外又加了一个布局。一般HTML文件都是html标签为最大，里面是head还有body标签，大家各司其职。而IE在html标签之外又套了一层，使得其布局变得更加复杂。我一直觉得IE对于表格的支持远优于对CSS的支持，而在W3C大力推崇 XHTML+CSS、CSS 3都要面世的时候IE还那么固执自己的标准，真让人想笑它的迂——Fx、Safari、Opera 哪一个是省油的灯？如果IE还是想靠着windows的捆绑来保证市场的话，一败涂地只是时间的问题。

传说中IE 7进步了不少，不知道效果如何。只是希望，不要又是一场空欢喜，然后紧接着的就是一轮找bug、修bug的猫鼠战。

HTML，是超文本标记语言（Hypertext Markup Language）的缩写。顾名思义，HTML就是为了文本布局而存在的东西——它当初被发明，也是为了在最初的网络中能方便的分享文档资料，将图片、声音、文本组合在一起，而不再是散乱的一堆文件。至于后来HTML被WWW看中，成了气候，那是后话。

归根结底，HTML还是为了内容而存在的东西，毕竟它的诞生就是为了表现文档。但是目前的一个趋势是——国内很明显，国外似乎还强些，估计是 web 2.0 冲击的——HTML的表现已经大于它要表现的内容。网络的升级带来的结果是大量的图片、Flash堆砌出一个华丽的界面，内容却乏善可陈。因为我是从04年开始接触网络，以至于这么长时间以来我都觉得这是一个很普通的现象。直到我第一次看《HTML与XHTML权威指南》的时候，看到里面连篇累牍地讲解最基本的HTML标记的含义和使用场合的时候，我还会笑作者的迂腐——现在还有多少人按照标准来啊？还不是随手拈来搭个花架子了事？而随着慢慢的深入，我才终于明白了，HTML，还是内容为王。

纵观现在的 web 2.0 设计趋势，貌似已经逐渐回归到了“内容为王”的道路上——设计基本都是从简，繁复些的也多是矢量图。相对起国内的一些设计，我更喜欢国外的 web 2.0 的那种感觉：直截了当，一目了然，直奔主题。当然我也不打算盖棺定论说华丽了就是不好。毕竟还有很多专门的艺术站点，人家的卖点就是那个界面，大量的图片、Flash那是必然——谁说华丽的网站就不 2.0 了呢？

我理解上的“内容为王”，除了内容要言之有物外，还有很重要的一点是要让HTML去做它本来的任务——标记文本，布局文档。想象一下：现在把手头随便打开的一个网页去掉CSS，你还能看懂么？现在有许多的页面看着华丽丽，而去掉了CSS，整个布局便会一塌糊涂，让人无从阅读。当然，现在的人还不至于吝惜那一点点资源，也可以排除部分盲人上网使用的阅读器，但是对于很多使用移动设备上网的人来说，这样的页面就几几乎是噩梦了。为什么在设计的时候就多想一步呢？而且，其实如果一开始就很好的使用HTML标记排版，会发现CSS更好写——因为大量的东西都已经是现成的了，稍微调整一下加一些背景图片，就可以大功告成。

我一直觉得W3C之所以要把XHTML和CSS分开，就是为了突出内容为王，让XHTML只去负责内容，而将表现的任务都交给CSS。抽离了CSS，XHTML依然要能做到它的基本任务——展示文档内容——我觉得这才是设计的终极奥义。如果抽离了CSS，读者看到的就是一盘散沙，那么基本可以断定这是一个失败的设计，至少这位设计师，并不真的理解什么是XHTML和CSS。

看了3天的动物书——O’Reilly的《HTML与XHTML权威指南》，昨天恰好浏览完了CSS部分，便做起了自己的第一个HTML页面，整体是模仿SK去年的一个Longhorn show。

效果…似乎自己还算满意，因为本身这个叶子也就是试验的一部分，以后会随着继续的学习更加完善，直到可以完整的放到早已在首页放置的 works 栏目中去。

第一次读动物书——于我自己，也是第一次去系统且认真的学习一样东西。说来，大学从有电脑以后，似乎学了不少，但是基本都是处于长时间不断的使用过程中积累起的一些比较零散的知识，没有经过梳理，也很皮毛。终于，不想再继续散兵游勇的状态，也打算去给自己培养一支正规军，以便在以后的日子里能真的在某个领域里去驰骋。

承认，学习这个东西，如果没有pad陪在身边一起去看去讨论，或许进度不会如此的迅速。而且从私心上说，我也是想学点新东西、做出点新东西来让自己开心。缘由再怎么去追究，似乎都是没有很大的价值。能享受过程，并求得一个好结果，便是最好。

很久以前就想过要写一些关于 port 的东西。这次借着Amora热得烫手的机会，风凝有幸协助我爱布制作Amora的VS。因为很久没有做过 port，期间有很多的想法。恰好与我爱布聊天时他再次说到 port 教程的事，于是打算真得认真去写一次。

风凝在这里要说一下：首先，这个教程不会是“SB的基础使用”，很多都会建立在一定的 SB 初级以上的基础之上（如果我说“经典风格色彩”阁下都不知道是什么的话，还是出门右转去 GS 收东西的好）。其次，port 是一个技术活，跟创意什么的不搭边。由于并非原创，主要的思想是尽量和 MacTheme 的风格和细节靠拢，所以要借助大量的素材比如截图或者是 guikit 解析的TIFF格式图片，因此对于PS的水平要求有限，能掌握基本的操作就可以了。

觉得自己用SB还算顺PS也是耍过几天有志于 port 大业的同志们，可以继续我们的正题了。

一、不要问我从哪里来

MacTheme很华丽很漂亮，地球人都知道。只是，我们这些win用户只能流着哈喇子可远观不可亵玩焉。

一般我们都是从如下地点看到 MacTheme 的：MacThemes 论坛的 Screenshot Thread、MacNN 的 The Offical OS X Customizations Screenshot Thread、dA 的 mac show。show 给人的冲击的确很大，不然也不会到处都是贴了个 mac show 就开始求 VS / WB 的。对于没有GuiKit 解析的TIFF的人来说，截图就是素材的全部来源；而对于有TIFF的人，show 图也可以提供更整体的信息。

在这里不得不遗憾得提到，老牌的 mac 资源站点 ResExcellence 近来改版已经无法再向打算 port 的同学提供一如这样的res图和这样全面的GuiKit截图了，不得不说是一个很可惜的损失。不过，因为目前有些截图还是会附有res图，而且res图的确可以提供相对最全面的信息，因此在下面的讲述中还是会多次提到。

除了 show图较多的地点，顺带提供一下可以下载 MacTheme GuiKit包的地址：比较知名而且更新迅速的有 MacTheme 及其论坛、InterfaceLIFT。提供下载主要是方便一些有能力找人弄到 GuiKit 素材的人，不是存心刺激大家。

有了看中的主题？而且已经收集了很多截图甚至弄到了TIFF？OK，让我们来认识一下这些看得见的陌生人吧。

声明：风凝的 port 讲解会以Niqu为例。res图例已经由前面给出。TIFF资源请到我的box.net网络存储 Win Customize 文件夹中下载（下载不了的点这里是邀请）。VS和WB下载地址给出，可以作为参照。

二、掀起你的头盖骨

一般截图中能看到的窗口分为两种，一个就是平常所说的 Finder（链接为图例，头盖骨部分皆同），有宽边，一般效果比较华丽，金属系主题会有横向渐变、金属光泽等样式；还有一种是 Document Window，也就是所谓的“无边” ，有时候会以很平实的TitleBar+纯色窗口 的面目出现。似乎更多时候，人们会把 Safari 的样子叫做“borderless”，因为 Safari 既有Finder华丽的外表，又没有边，所以有些时候很得人心。

这些有边无边可以在 MacTheme 中得到很好的施展，大家融洽的在一个主题中各司其职。但是VS不行——要么大家都有边，要么大家都没有边。虽然VS可以使用2像素的边沿给大家造成视觉上的“无边”并且配合ShellStyle可以做出Finder的宽边效果，但是模仿毕竟只是模仿，效果总还是有一点点的欠缺。前阵子有些人研究出来可以用1像素的PNG图片来给VS做出“真正的无边”。这样做，的确是没有边了，看起来效果很好，但是影响了使用——无法调整窗口的大小，只能在 show 的时候一搏眼球。

鱼与熊掌不可得兼。舍哪个取哪个成了一个很大的问题。因此我们会看到有不少的 port 作品中的色彩方案有好几种，Metal（Finder 样式）和 Normal（Document Window 样式）已经是最基本的两种。有些作者还会加入 Safari 样式以满足各种需求。

上面提到的种种有边无边、华丽朴实，其实相同之处还是绝大多数，在素材的使用上也是大同小异。下面将会就其普适部分来讲解素材的使用。不同的地方，会放在之后慢慢讲到。

三、截图里不思议

对一个 MacTheme 一见钟情却没有哪个神通广大搞到 TIFF？（什么？已经有那个神通搞到VS？姐姐给你块糖一边玩儿去哈）截图就是 porter 们的第一素材。show 图往往是被收集的一大素材源，而且其数量的多寡有时候能决定 port 的质量。但是，port 不是群殴，有时候，质量更重要。那么，什么样子的截图叫做有质量呢？那当然是 ResExcellence 的效果图质量最好。但是 ResExcellence 已经没有办法提供素材，难道我们就要坐以待毙么？

答案当然是否，不然要这篇东西做什么……鉴于res实在是能提供最多的素材，首先就res进行讲解。讲解完res的图例，大家自然会明白什么样子的截图最有用。下图中的注释，用以说明其在VS（SB）中应用时的位置。

很容易看出，res图不仅可以给出VS所需要的关键按钮图片，更重要的是能提供Btnface等经典风格色彩。

当然，仅有res图是不够的。一般在VS中还需要的截图部分有——

1. 开始按钮（StartButton）：普通和按下样式。
   
2. 任务栏（TaskBar）及其按钮：按钮激活与按下样式。
   
3. 分组显示任务栏按钮时的菜单（TaskBandGroupMenu）及其按钮：按钮激活与按下的样式。一般这个部分还可以应用到开始菜单的菜单项（StartMenu – MenuBand）中。并且在mac主题中，菜单项的分隔栏往往是两种色彩拼做的横条。这个时候可以应用这两个颜色：深色的可以做经典风格色彩中的 BtnShadow，浅色的可以做 BtnHighlight。
   
4. Finder的窗口：含标题栏（FrameCaption）、菜单栏（ToolbarBackground）、以及左边（frameLeft）右边（frameRight）底部（frameBottom）、Status Bar 以及 ResizeGripper。至于窗口按钮已经不必赘言，一等一的重要。一般的截图中只能得到 Normal（普通，就是窗口激活时候的样式）与  Disable（无效，可以从一些看起来灰灰的窗口上得到）样式。而 ResExcellence 给出的预览图上有 Hot （激活）的样式，这样无疑丰富且完备了我们的素材资源。
   

OK，如果能具备完整的如上要求，那基本就是截图中最完备的了。ResExcellence 没有办法提供素材，我们还可以发扬吃苦耐劳的精神，尽可能搜集全这些制作VS必需的部分。如果没有办法收集全部的话，那很多地方就要靠蒙了——按钮的样式，色彩的搭配，都要尽可能和主题风格统一。

但是，porter 们不得不面对的一个问题是——就算有了能找到的全部截图，依然要面对一大堆的难题。仅仅一个窗口按钮，有 普通(normal)、激活(hot)、按下(pressed)、失效(disable) 等等样式，更何况经常用的 CheckBox、Radiobutton？就算图片们修修补补搞定了，那么多的色彩搭配，要如何完成？截图提供的细节有限，精益求精的porter要如何抉择？妥协，还是另辟蹊径？

该TIFF们上场了。

四、半搪主义

所谓的TIFF资源，是由 GuiKit（类似win上面的StyleXP的东东）主题包由如 Themepark 之类的软件提取出来的透明背景TIFF格式图片。MacTheme 如此的取用方便是便于替换图片文件，加上使用简便同时效果出众的调色系统，MacTheme 随处可见的 Modifications 和 Hybrids。艳羡的同时，也无疑方便了porter们，可以使用到最原始的素材，这样就可以更加接近原著。

第一次拿到TIFF的同志可能会一头雾水——大量的图片似乎杂乱无章全堆在了一起，一眼望过去不知道哪个是有用的。说来也可以理解，毕竟是不同的系统不同的主题，使用的图片文件及其定义都会有所不同。GuiKit 的 TIFF 资源有一个共通之处——左半边为所需要的图片资源，右半边则是一排造型一致的黑块。大家安心用左边的东西；右边的黑块只是标注出着色范围，几乎用不上，无视即可。

在这里不得不说一句题内的题外话：欲成 port 之事，鸟语的还是要会一些。鹅语一般用不上，鹰语中一些美化常用的单词还是应该知道。下面的讲解将会以有一定的英文基础（高中毕业水准即可，四六级托福雅思GRE不做要求）并且能较流畅操作SB为前提。不知道 customize 这个单词为何物的同学可以出门右转去 GS 收东西了。

尽管有些部分在 mac 与 win 中的叫法是不一样的（比如 任务栏 在 win 中叫 TaskBar，在 mac 则叫 Root Menu），但更多的是一致，比如 Push Button、Scroll、CheckBox、Radiobutton、ComboBox 等不管在哪儿都是那一个名字。因此，要是一眼望过去有点晕，按图索骥不失为一个快捷的方法——按名字搜就是。下面的问题是：有时候找到了相对应的图片，上面七七八八的按钮让人实在是不知道要怎么处理，下面就 Push Button 来说明如何将TIFF资源对应的应用到VS当中。

基本上TIFF中的按钮资源都是如此的排布模式。只要找到了需要的TIFF素材然后按照SB中的排布模式编辑以下就可以了。这里提示一点：VS中许多按钮是可以使用透明背景的PNG图片的，因此像是 Push Button、CheckBox、Radiobutton、窗口按钮，开始按钮 等都可以使用PNG图片，这样不仅可以节省劳动力，更重要的是可以保持原mac主题的风味。

TIFF资源主要是按钮资源。此外还有一些不是按钮的资源，其中很多都是很有用的资源，比如——

• Root Menu Caps：VS中的任务栏背景（TaskbarBackground）。
• Document Window Titlebar Endcaps / Movable Modal Titlebar Caps：VS中 Metal 样式可做 Small Frame Caption，Normal 样式就是 Frame Caption 了。

更多的，大家可以在制作VS的过程中慢慢体会。除了图片，TIFF资源还可以提供部分色彩搭配。如给出的 Niqu 资源中的 Bevel Button Fill 图片，就可以将其中的蓝色作为 MenuHilight 与 Highlight。

还有更直接的——我所有的 Amora 资源中有一个TIFF直接就叫做 Toolbar Background，可以直接拿来做经典风格色彩中的 Menu；还有一个叫做 Menu Item Selected Fill ，可以直接用作 MenuHilight 与 Highlight。

在这里，还是不得不说——TIFF资源也不是完全的保险箱。首先，它没有窗口的样式，Finder 部分还是要靠自己在截图中截取；其次，TIFF资源的应用过程中需要截图去进行对比修正，以发挥出TIFF的真正优势；还有，就是TIFF资源依然不能提供完备的经典风格色彩，这些都需要截图去作为必需的辅助。

由上，我们可以看出，截图与 TIFF 资源在 port 的过程中是相辅相成的关系，缺少了任何一个，都是不可能做出完美的 port 作品。因此，除了不要迷信原始资源之外，还要有善加利用这些来之不易的资源的心情，才能完成一个看起来顺眼、较少 bug 的 port VS。

素材的应用就介绍到此，不完备的地方还希望大家指出。相信对于素材有了如此的了解，有一定VS制作经验的同学一定已经可以自己动手去 port 一个MacTheme了。下面风凝还是要啰嗦一下，介绍一点小小的技巧，来帮助大家完善自己的 port 作品。

五、最后一枚啰嗦

风凝在 GS 有那么一点点市场的一个很大原因在于风凝总会在第一时间(通常3小时之内)将官方发布的 port 作品 MOD 一番之后堂而皇之挂在转载 / 原创的作品之后。排除速度上的熟能生巧可能哄了一批孩子，主要是解决了一些 porter 在 port 过程中遗留的一些他们不觉得是问题的问题。风凝的 MOD 很大程度是将一个洋人做的或者是依据洋人模式作的VS本地化而已，比如改字体、改开始菜单为 compact 样式等。此外做的工作就是查漏补缺啦。下面列出一些 port 可能会用的小技巧或者需要注意的小地方，来帮助大家更好的完善自己的port作品。

1. 推荐使用和打算 port 的MacTheme 相似的VS做基础，然后替换其位图修改其配色，如此可以事半功倍——主要是简化了繁复的色彩配置调整工序。ShellStyle 同理：找个相似替换位图修改少量色彩配置即可。每次都用 winXP 自带的主题从头修改的人，除了其刻苦耐劳的精神，没有什么值得学习的地方。
2. VS中的窗口标题栏一般有如下几种：Caption Bar、Small Caption、Max Caption 还有 Min Caption。一般说来，Caption Bar 可直接由 Finder 抠图得到；Small Caption 推荐使用 Document Window Titlebar 资源，最好能将圆角去掉改为一块方形；Max Caption 只需将 Caption Bar 的位图两边去掉圆角就可以使用；Min Caption 通常就地使用 Caption Bar 的素材，当然你也可以把它PS成四角都是圆乎乎的可爱模样。
3. 可以用 TIFF 资源中的 Bevel Button Corners 来制作 ToolbarButtons。PNG 格式与 BMP 格式皆可。将ToolbarButtons.bmp 一气刷成紫红色（win默认RGB 255, 0, 255 为透明色）是懒人的办法，风凝不是不赞成偷懒，只是这样的偷懒会在某些时候影响VS的使用——会让人分不清按钮的状态而出错。port 出来的VS也是拿来用的，不是装上截个图就雪藏的。
4. PS中的小窗口，会使用到 Small Caption 上的关闭按钮和 窗口最小化按钮的 MinimizeGlyph(2)。因此这两个按钮一定要风格统一，且在PS中反复对比调整。这样就不会出现所谓的“PS中的窗口按钮bug”。
5. 如果 MacTheme 的任务栏上有放大镜（搜索用），在VS中制作的时候，可以修改 Values – TrayNotifyHoriz – TrayNotify – Background 路径下的 TaskbarTray 图片。将放大镜部分截图右对齐。一般推荐图片尺寸为 46*22。ContentMargins（着色范围）设置为 1, 44, 0, 0 即可。
6. 进度条（Progress）一般推荐使用窄版本的资源，唯一的缺点是调整较麻烦，推荐参考 susumu 自己 port 的 STOMP 1.0 的参数设置。当然选用宽的也可以，像 Amora 就只有宽版本。这样在制作的难度上会小很多，只是某些时候可能在视觉上显得有些笨拙。折中的方法是：横向的做成窄版本样式，纵向的做成宽版本样式。选择，就要看各位 porter 自己的了。
7. 很多 porter 将 ComboBox 位图制作出6像素宽的 255, 0, 255 透明色。其实 ComboBox 位图是不可被定义出透明色的，这样做的结果就是在某些用到 ComboBox 的地方出现了一块莫名其妙的黑块。解决方法：将那6像素宽度的色彩改为 Btnface，或者干脆就不要空出纯色的部分，全部制作为方框了事。
8. Tab 部分，如果要达到类似 MacTheme 的效果，需要将各个 tabItem 中间的 pressed 效果上下左右各缩小2像素，将空白部分设置为透明色。这样在 Tab 被选中的时候，才不会有突出的状况发生。
9. 开始面板没有什么规律可循。因为MacTheme上没有“开始面板”这么个东西，大家自己开动脑筋就能斗败格格巫。不过从目前的趋势来说，一般都是使用和 Finder 一致的样式来制作的。宽窄这个度，作者自己把握。风凝用WB的时候喜欢宽版，后来转向VS又喜欢窄版的了。这个时候没原则不要紧。各取所需为上。
10. 对于 Borderless 样式的VS，用1像素的PNG图片做出“真正的无边”效果的教程在此，风凝不再赘言。

风凝能想到的注意事项就上面10条。如果有什么不足之处欢迎大家指出。如果有什么是必需而风凝没有写的，也希望大家能指出，风凝好补上，服务更多人。

port，总体说来是一个技术活儿，其质量的高低，很大程度上取决于作者的SB技术。同时不可忽视的是，作者自己对于主题的理解也很重要，也因此往往一个 MacTheme 除了官方发布还会有许多个port的版本。风凝不避讳暴露自己浅薄写这个东西，只是想给想 port 而不会的人一点经验之谈，同时希望能与 port 高手切磋，借此提高自己的水准。

各位不甘于漂亮的东西为 mac 独有的同学们，抓紧鼠标，向着 port 前进。

　　我知道的全部和FF有关的就都在这里了。包括使用和美化两部分。谨以此献给所有对FF有兴趣的朋友。

第一部分 上手
1 安装
　　推荐安装最新的 Mozilla Firefox 1.5.0.2，beta们留给有心也有力的人吧。
　　双击exe文件后一路next没有难度吧？小提示：如果你要把FF安装到非系统盘，记得选择“自定义安装”。

2 插件
　　对于Firefox——是浏览器就是，不光FF——有些插件是必须的。不过相信一般的插件如RealPlayer、Windows Media Player、Macromedia Flash Player、QuickTime等等一般人都有装。如果缺了什么的话（比如Java），可以到这里下载。

3 扩展
　　刚装好的FF不好用？不知道FF出名的就是牛X的可制定性么？到 Mozilla Update | 中国 下载最新的扩展“让Firefox变得更好用”（mozilla中国中心语）吧。什么？下载的东西双击无效？谁让你双击了？工具- 扩展，把下载到的.xpi文件拖到弹出的面板上就OK。或者你可以和我一样懒——点击“安装”以后设置弹出来的对话框中的地址为信赖站点以后从这个站点就可以直接安装扩展无需再下载到本地了。

　　在此推荐一些常用或曰必需的扩展——或者说，装上FF就能很顺畅的跑了。

Tab Mix Plus，增强标签页浏览功能的扩展。
FlashGot，允许 Firefox、Mozilla Suite、Netscape 和 Thunderbird 使用大多数流行的外部下载管理器处理单一的和全部(”全部” 和 “选择”)下载，支持 Windows, Mac OS X, Linux 和 FreeBSD 系统。
Super DragAndGo，拖拽链接到网页的任意空白位置就可以在新标签页中打开此链接。
IE Tab，让你直接在 Firefox 的标签页中以内嵌的 IE 引擎浏览 IE Only 网页。
Compact Menu，是 Firefox 菜单栏的扩展，它可以精简你常用的菜单栏，减少占用空间。

　　装了上面的5个，FF就可以跑得很欢畅了。当然这些只是基本的必须，其他的扩展可以根据不同的需要配置。比如我除了这5个还装了——

Popup ALT Attribute，这个扩展能象 NC4、IE 等浏览器一样，弹出图像的 ALT 属性的替换文字（ALT 属性并不是为图象提供描述信息的，但是一些网页作者常常只是为了弹出额外的说明信息才使用这个属性）。如果描述文字太长，它将自动以多行显示。
Minimize To Tray，最小化 Firefox, Thunderbird, Mozilla Suite, 和 Nvu 到系统托盘的强大扩展。
Right Encoding，在上下文菜单（右键菜单）中加入字符编码菜单项。
Restart Firefox，这个扩展会在“文件”菜单中增加“重新启动 Firefox”的选项, 并添加一个工具栏按钮。使你在安装主题或扩展后，重新启动 Firefox 变得更加容易和方便。（前阵子研究FF的皮肤反复重启观看效果就靠它了）

　　哎，哎，别看到链接就一路使劲点，没说就让你非要和我装的东西一样啊。可制定性强，就可以打造一个完全私人的浏览器——从此不用忍受任何别人硬塞给你的东东，一切取决于你的需求。

4 备份
　　重装系统以后面对裸FF欲哭无泪？恭喜你中奖了！现在知道要备份了吧？推荐个简单实用小东东：MozBackup，Mozilla系列的cookie/password/extension备份/复原软件。解压后直接使用，无需安装。什么？重装以前你忘记用这个小东西了？请节哀……

　　另外，这里是Mozilla Firefox 1.5 部分使用技巧。提供给有需要的朋友。

　　FAQ（如果你有什么问题，可以提出来；如果我觉得有代表性就会放到这里^^）：
1. 如何能让FF在一打开就有tab栏呢？
　　工具 – 选项 – 标签式浏览，去掉 只打开一个页面时自动隐藏标签栏 前面的勾。

2. 我想让FF像遨游那样双击关闭标签页，怎么办？
　　装Tab Mix Plus了？ok。工具 – 扩展 – Tab Mix Plus – 选项 – 鼠标设置 – 双击左键。明白要怎么做了吧？

3. 我想让FF看着像Safari，该怎么做？
　　……首先要承认这个问题我被问到的次数最多；其次要承认这个话题很大，涉及的东西不少；最后，麻烦您轻移款步这边走先，我清好了嗓子专门说说这个话题。

第二部分 美化
　　安装FF的人中，恐怕相当一部分人是冲着FF漂亮的皮肤去的。在此风凝要再次恭喜——很多漂亮的皮肤存在版本兼容问题，也就是说，很多漂亮的皮肤你流光口水最新版本的FF装不上去就是装不上去。什么？你豁出去用旧版本的FF？那Mozilla公司使那么大劲开发干什么？在此，风凝要贡献出部分个人研究成果……

　　首先看图。

　　声明：这个是纯模仿Safari的。一切Safari系的皮肤都可以在我以下的啰哩八嗦中顺利搞定。什么？你不喜欢Safari的样子？那您可以关闭这个标签页 where cold where go 了。
　　还有在的？ok，开始我们的FF 2 Safari之旅。

1 主题安装
　　漂亮的主题这里有一部分，不过当心版本兼容问题。哎、哎，给我停下你要卸载1.5换成1.0.x的手，我这里还没有讲完呢你着急什么？不会让你看着漂亮的东西用不了的。下载到的主题一般都是.jar的压缩包，把.jar包拖放到 工具 – 主题 弹出的面板上，双击重启，看到效果了吧？因为版本问题而没看到效果的同学练习一下基本动作先……

2 更像Safari
　　这个是原版safari的截图。喏，纸巾，把流到下巴的口水擦净先。很简单的方法即可达到你要的感觉。

　　下载这个小包包先。然后我们来 step by step。

　　首先，基本皮肤。压缩包里面的skin是我做的，基于sky的Lie。要效果，装上先。小提示：装好以后看到的按钮是Tiger的样式；按钮上右键 – 定制，钩选 使用小图标。看到了么？Sunken样式的按钮。
　　其次，书签栏、标签栏。把Documents_and_Settings_chome压缩包（特别感谢 Zeddo@AS。他的代码和素材给了我最直接的启示）解压后里面的东西丢到 系统盘:\Documents and Settings\xxxx\Application Data\Mozilla\Firefox\Profiles\xxxxxx.default\chrome，重启FF。看到了什么？tab那里和safari已经几乎一样了吧？
　　再次，搜索框小放大镜。把searchplugins压缩包里面的 google.gif 丢到 \Program Files\Mozilla Firefox\searchplugins 文件夹下，然后搜索框选择google就好了。
　　最后，去掉标题栏上的 Mozilla Firefox。用winrar打开 \Program Files\Mozilla Firefox\chrome 目录下的 zh-CN.jar，locale – branding，用记事本打开 brand.dtd，把里面的内容改为
< !ENTITY brandFullName "">
< !ENTITY brandShortName "Safari">
< !ENTITY releaseURL "http://www.mozilla.org/products/firefox/releases/1.5.html">
< !ENTITY vendorShortName "Apple">

　　什么？你还要改“帮助”里面版权信息页面？够狠……\Program Files\Mozilla Firefox\chrome 目录下，browser.jar – content – branding，替换掉里面的about.png和aboutCredits.png就可以了。压缩包里有个范本，可以参考。

　　如果你还要更Safari的效果，请配合WB5使用——这样不管是左边的窗口按钮还是光滑的标题栏渐变，一应俱全。如果你是VS的死忠粉丝，装个mod过的无边VS也可以达到我上面给出的预览的样子。什么？不知道WB5和VS是什么东东？麻烦出门了右转有个地方叫做GuiStyle的负责这个部分的解说……

3 进阶方案——皮肤制作
　　觉得最Safari的样子看着腻？想要配合主题给FF换肤？觉得那些下载了的版本不对的FF皮肤丢了可惜？ok，现在给出相当简单的搞定其他Safari类FF皮肤的方法。

　　以下的部分是基于要配合主题给FF换肤的办法。版本不对的同学继续练习基本动作……不过我更希望您能跟着一起看看，有好处。

　　这个时候，可以把我之前要大家丢在 Documents and Settings 先删除，不然会影响效果。

　　鉴于现在很多mac port的主题都提供了StylerToolbar，这给我们的工作带来了很大的方便。找一个和你要的FF效果差不多的已有的FF皮肤，用winrar解压.jar包。看到一堆文件夹还有图片之类的先别晕，我们不需要一个一个看过去……
　　a. browser文件夹下有 buttons.png 和 buttons-small.png 分别控制按钮和小按钮的样子，照猫画虎把你有的StylerTB按钮替换上去，就可以了——明白我的皮肤为什么有两种按钮了吧？两个png图片用两种按钮替换就好了。
　　另外page-livemark.png 和 page-livemarks.png 可以用Safari的RSS图标来代替，达到Safari上地址栏RSS图标的效果。
　　b. global文件夹下要改的东西就多了。不过基本都是照猫画虎就能搞定。
　　menu文件夹里的 menulist-dropmarker.png、menulist-dropmarker-dis.png、menulist-dropmarker-hov.png是地址栏下拉的按钮样式。
　　progressmeter文件夹里的图片是进度条。
　　scrollbar文件夹里的图片是滚动条。

　　这几个地方的图片依样做好以后（特别提醒注意图片格式）——妄图再打包的同学可以停手了，没用的——将图片拖放放到.jar包相应的地方就可以了。然后就是基本的主题安装步骤。看到期望的效果了么？

　　如果你是打算自己做一个主题还想着发布的话，改掉根目录下的preview.png以及contents.rdf、install.rdf中的信息就可以了。

　　版本不对的同学现在有没有脑袋旁边突然亮了个小灯泡的感觉？没错，解压版本不对的皮肤包，替换到版本没问题的其他皮肤包里面，照样用。不会花很长时间啦，总比干等着某大大制作版本正确的皮肤来的现实。

　　什么？按照我的方法折腾了半天发现书签栏还有标签栏还是不对劲？还没讲完呢您再忍忍……

　　上面的方法是很classic的皮肤制作方法。如果你可以配合VS/WB使用的话，我们有更狡猾狡猾的方法……这个时候让你之前丢到 Documents and Settings 的东西派上用场了（如果删了再给我放回去）。

　　讲解一下你丢过去的东东都是什么好了。

　　userChrome.css - 控制效果的CSS文件。以后你要改书签栏、标签栏字体什么的在这里改。
　　bookmarks-bg.bmp - 书签栏背景。
　　Tab-selected.bmp - 选中的标签页的样子。
　　tab-bg.bmp - 标签页背景。
　　Platinum.bmp - 工具栏背景。

　　现在明白了？就是这五个小东西控制着工具栏、书签栏、标签栏的样式。因此，有了这个，我们就不用费劲找要替换的位图了，在皮肤包外即可实现对这几个地方的修改，很快捷。不是于是乎，用默认的皮肤替换掉工具栏按钮以后修改了这几个位图在配合VS/WB就能出来足以乱真的效果，用不着劳神费力等皮肤也不用劳神费力做皮肤。

　　更多的我也说不好——我研究FF的皮肤也刚没几天。不过我是懒人，用的都是偷懒的方法，相信和我差不多懒的都能受益——比我勤快的可以考虑自己再开发一更完美的出来。

　　最后，这里有一些Firefox的Tips & Tricks，提供给更有兴趣开发FF的人们。