别摸我｜catch the digital flow

北极冰仔部落格独家 CSS 扫盲教程 - 第七期
这一期的主要内容是给大家介绍 CSS 中一个重要的属性：position（位置）。

一般情况下，HTML 页面上元素的布局由源代码中各元素的书写顺序决定，例如两个 div 容器，在源代码中靠前的在页面上呈现时一般也会靠前。但是我们不总是这样做，譬如为了 SEO，我们可能会将更重要的内容，如文章正文放置于页面代码相对靠前的地方，以保证搜索引擎蜘蛛可以一“进门”就看到“宝贝”，而不是长途跋涉、翻山越岭，经过一层层的抽丝剥茧终于看到文章本身。但是这样会产生一个矛盾，正文之前的东西放哪里？放在文章后面可以吗？
阅读全文 - 1643 字 »

CSS 扫盲教程继续，这是第六期，主讲内容为 CSS 伪类。在与前五期扫盲教程相隔的这么多天中，我也陆续写过不多几篇 CSS 技巧或与 CSS 有关的东西，但最终没有归入这一系列，毕竟技巧归技巧，基础知识归基础知识嘛。——这一段其实全是废话，是我有意安排来凑版面的，下面正式开始：
CSS 伪类：用来给某些选择器或类添加特殊的效果。伪类的语法为：

阅读全文 - 1296 字 »

在网页上选中一段文字，默认的呈现总是深蓝色背景 + 白色文字。个性，个性哪儿去了？如果你也想换成下面这样，或换得比它们更漂亮，请继续往下看。
我的：

aw 的：
阅读全文 - 564 字 »

在很多情况下，我们使用 window.onload 事件判断页面加载完成，注意：不是 DOM。这里就会有一个问题，我们编写的 JS 代码将会在页面上所有元素加载完成之后才开始执行。打个比方，你在网页上使用了一个用来调整外观的 JS，而此刻恰好网络状况不太好，那么用户很可能在漫长地等待页面中所有图片下载完成或超时之后，才能看到脚本调整后的新外观，而在这之前，你的页面外观可能会比较尴尬。
熟悉 jQuery 的朋友知道 $(document).ready 的好处就在这里，它只等待 DOM 加载完成，而不是页面。不过我们不可能做任何应用都引入略显庞大的 jQuery 框架，所以就有国外的大牛写了这个压缩后只有 617 字节的东西：addDOMLoadEvent。本来想亲自写一大段话解释解释这个东东，却 Google 出了别人早写好的，简体中文，有兴趣的直接跳转过去看吧。
这里是 adddomloadevent.js 的代码，用法不多说了，作者已经写在代码的注释里了。（PS：代码贴不到日志里来，不知道是 DH 还是 WordPress 的编辑器，真垃圾！囧）

去年（是啊，今天可是 2008 年了，各位写日期时别搞错了啊 - -）写过一篇关于 CSS Sprites 的文章，由于已经有大量的文章写它的原理，我只是敷衍两句罢了。
CSS Sprites 这东西不知道能不能算上是个技术，我觉得充其量也就是个 CSS 技巧。但是当你网站上小图标数量特别多（例子）的时候，这个小技巧却有大用处。CSS Sprites 通过使用一张图片代替所有的小图标以节约 HTTP 连接开销以提高加载速度，再为不同的元素指定不同的 background-position 属性值将小图标分别显示在正确的位置上。更好玩的应用当属刚刚改版的谷歌首页了，下面那活灵活现的动画可不是 GIF 图片，不信你看看背景图，真的只有一张，还不会动：

听上去很简单，做起来也不太难，如果只有七八个图标用 PS 一下子就搞定了，但是图标数量多了就不好办了，你不仅需要把这些图标整合成一张图片，还需要不停地计算并记住图标的位置（像素值）。我没亲手做过很多图标，估计也是一件令人崩溃的事情。如果你刚好在为这个烦恼，那不如试试一个专门的 CSS Sprites 生成器，把所有图标打个 zip 包再指定几个参数就搞定了，这玩艺儿不仅可以为你自动生成整张图片，连对应的 CSS 也写好了，一个字：省事。
阅读全文 - 555 字 »

今天有朋友给我留言说我昨天新改的这个主题侧边栏有错位，不用说，他们使用的浏览器内核一定是 IE6。自从微软开放 IE7 完全免费升级以来，我就让 IE6 彻底下岗了（虽然我使用 Firefox 的时间占到了 99% 以上），没想到这却给测试网页带来了麻烦，毕竟 IE7 比 IE6 对 W3C 标准的支持要好得多，所以在 Firefox 和 IE7 下浏览没有问题的页面，在 IE6 下就会出现一些这样那样的问题——通常是由于 IE6 对宽度、高度、边界等定义不标准引起的——我们又不能简单粗暴地放弃数量众多的 IE6 用户。
过多的抱怨不是解决问题的途径，我们必须想办法叫页面在符合标准的情况下适应 IE6。废话说多了，赶紧切入正题，安装 IE7 后如何再使用 IE6？Google 了一下我找到两种方法：一、安装微软提供的安装有 IE6 的 XP 虚拟机镜像，在这个页面下载 VPC 镜像文件，需要注意的是现在下载的镜像将在 2008 年 4 月 1 日过期，到时你必须得下载一份新的镜像才能继续使用。二、下载一个名叫 IE6Eolas 的绿色版 IE6，随便解压到哪里都可以直接使用，虽然在“关于”中看到的仍是 IE7 的版本信息，但这个东东的确是 IE6，我用 acid2 测试过，典型的一塌糊涂，错不了，呵呵。
阅读全文 - 688 字 »

我最早是在 Realazy 看到 CSS Sprites 的介绍（如果你不知道什么是 CSS Sprites，那么一定要读读这篇文章），紧接着 Zhang-Zi 在自己的阅微堂上应用了这一技术；此时此地，我也把它实现了，（基本上）这里的全部背景图片（虽然也只有几张）都用一张图片包办了，blog 加载的速度显然比之前快了一些。
------ 单薄的分割线 ------
刚才去阅微堂找链接的时候，发现了这篇文章：《加速 blog：序》，对此系列文章充满期待。

我写完 CSS 喜欢用 CSS Tidy（Clean CSS 基于 CSS Tidy 1.1）整理一下，压缩一下体积再上传至服务器（节省加载时间），一直没啥问题。不知咋地今天突然出状况了，修改过的 CSS 再压缩一下之后页面布局变得乱七八糟，左边的 #content 本来是 float:left，可呈现出来偏偏是 float:right 的样式，思来想去我只是改了改正文以外的字体，别的什么都没改，用插件强制清了 WP 的缓存也不行，那问题只能出在 CSS Tidy 身上了，估计是哪个清理选项把代码给改掉了，害我又重新写了一遍 CSS，今后使用 CSS Tidy 之前一定要做个备份。

其实这样的标题不太准确，因为压缩 JavaScript 的不是 PHP，而是 gzip。另外这种方法应用也相当广泛了，WordPress 上著名的 K2 主题一直是这样压缩 JavaScript 的。
第一步
打开需要压缩的 JavaScript 文件，把下面的代码加在 JavaScript 代码前面：

阅读全文 - 211 字 »

昨天跟我们伟大的 IE 浏览器斗了整整一天，在 Firefox 下好好的东西到 IE 里就变得支离破碎，让我抓狂到几次想亲手毁了它。不过刚才无意中居然给弄好了，发现跟 IE 沟通还是得有相当高的技巧，毕竟人家是微软的东西，高贵！

在之前的（续）中，我借助插件为外部链接加上了 rel="external" 这个标签，然后再通过 jQuery 为其添加 class="external"，忘了当初为什么要这样做了（我确定是有理由的），事后发现在每篇日志的留言部分，rel="external" 会与 WP 自动为链接加上的 rel="nofollow" 标签发生冲突，因为同一元素不允许同时存在两个 rel 标签。
想了几种办法：插件处理 DOM 不太现实、用正则表达式判断是否有 rel="nofollow"，如有，将其改为 rel="nofollow external" 过于复杂会影响效率、修改 WP 默认添加 rel="nofollow" 的方式等等，都不合适。
没办法，还是往简单了改吧，直接让插件给外部链接添加 class="external" 不就结了，相应的 jQuery 也做了修改，CSS 不变，效果不变。目前还有点小 bug，是属于转向插件的，暂时先不管了。

看到有朋友需要修改之后的 Alexa 转向插件，由于修改简单并且此功能并不属于原插件，所以我没有另发新版，需要修改的朋友请看下面的方法：（基于 Arctic's Internal Alexa Redirect 1.1 版）
我们只需要修改 wp_lzw_parse_external_links 函数的一行代码，直接复制下面的函数将插件的相应部分替换掉就可以了：

阅读全文 - 1020 字 »

XHTML 1.0 Strict 以上（含）的 W3C 标准已经不再支持 target='_blank' 这一非常好用的属性，这一改变很叫完美主义的网页设计者头疼。许久之前，我写过一篇文章介绍使用 jQuery 打开新窗口的方法，但没有亲自体验过；现在，我已经在这里实现了，将所有的外部链接加上了图标，并默认以“新窗口/标签”方式打开，原理相同，方法有一点改进。(via Barry Jaspan)
先前的方法需要手工为每一个你想让它以新窗口方式打开的链接（如：外部链接）添加名为 "new-window" 的 class，不用说也想得到，这项工程是多么浩大，简直可以跟秦始皇年间修长城的工程量媲美，并且一定会出现相当数量的漏网之鱼——总之，这个方法不可取。
如果有程序能自动提取页面中的外部链接不就好了吗，于是我改造了下 Alexa 转向插件，让它自动给外部链接添加一个 rel="external" 属性，再辅以下面的 jQuery 和 CSS，一切搞定！
阅读全文 - 768 字 »

自 Design Watercolor Effect Menu 后，今天 Nick 又发表了进阶的菜单制作教程：Advanced CSS Menu，按照教程制作出来的菜单果然相当精美，很有 Nick 独特的风格（Demo）。感兴趣的朋友请自行前往学习，我就不翻译了……
PS: Web Designer Wall 的 PageRank 在此次更新中直接由 0 到 7。OTZ...

虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript

阅读全文 - 610 字 »

由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：

阅读全文 - 798 字 »

从这一期的CSS扫盲教程开始，我将陆续发表一些有趣的CSS应用实例——学习基础知识实在无聊。今天的内容是如何利用CSS制作漂亮的双引号引用标志。看下面的示例：

使用漂亮的双引号把引用内容放进来！

阅读全文 - 1030 字 »

北极冰仔译The Blogger’s Guide to Meta Tags
尽管站外优化的重要性众所周知，但忽视影响搜索引擎排名的站内因素将会让你付出昂贵的代价。诸如一致的内部链接和富含关键字的标题等因素都会对SEO起至关重要的作用。元标签，虽然它们已经不在流行的站内优化方法选择之列，但它们仍然在搜索引擎排名中扮演一个重要角色。
什么是元标签？
元标签是使用在网页的head标签之间的一种HTML标签。与其它的HTML标签不同，元标签不会在页面的任何地方显示出来，所以绝大多数的访问者并不会看到它的存在。不同的元标签起着不同的作用，但都是用来提供关于页面的附加信息。比如，description元标签提供页面内容的摘要信息。
阅读全文 - 2081 字 »

由于对W3C标准支持程度的不同，往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情，顾此失彼的情况时有发生。但放弃任何一方的用户都是不明智的，以北极冰仔部落格来说，使用IE的访问者占所有访问者的49.57%，使用Firefox的访问者占46.78%，放弃一边就等于放弃掉了一半的访问者。
所以，使用简单的方法以保证网页显示的一致性最重要。
第一个方法。在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE，例如：

阅读全文 - 718 字 »

还记得今年5月我曾经翻译过一篇《忘掉Photoshop》吗？文中介绍的15个在线的图像生成器中有一个叫：Stripe Generator，是一个非常不错的在线条纹生成服务。在这里，不仅可以依照自己的需求，还可以根据其他用户分享的方案生成条纹。

Fabio Fidanza作为它的创建者之一，还拥有另一个类似的服务：Tartan Maker。不是生成条纹的咯，毕竟条纹的应用范围比较窄，这里生成的东东是——布纹背景！网站的风格与Stripe类似，显然出自于同一人之手。

阅读全文 - 277 字 »