web design
如何在IE和Firefox里屏蔽BackSpace
在网页上输入信息，特别是注册的时候，如果输入的焦点不在输入框里的话，按BackSpace键，IE和Firefox以及许多浏览器都会理解为”后退”命令，返回上一页。这样的话，刚才输入的内容就全没了。这是非常让人泄气的事儿，为了在自己设计的页面里，给用户更好的使用体验，有必要屏蔽掉这个功能。
其实，在GMail，Google Document等许多基于Web的应用都对这个问题作了相应的处理。当这种操作发生时，出项一个警告，提示用户是否真的想放弃当前页面上输入的内容。这个屏蔽功能其实很简单，只要在你写的html里加上一段Javascript代码就行了。让javascript代码检查用户的输入事件，如果发生了输入焦点不在输入框的时候，用户按下了Backspace键，那就触发相应的代买来处理就行了。但，需要注意的是IE和Firefox的事件处理方法不同，API也不一样，需要区别对待。做Web应用最让人恼火是莫过于此了。为了适应各种浏览器，不得不写各种对应代码，然后在各种浏览器上做测试。如果Web应用还有手机可以浏览的功能，那就更麻烦了。现在市场上，几乎每天都在发布新的手机，为了不出问题，你就必须定期的在所有的新手机上做测试。这是让人抓狂啊。要是有统一的标准该多好。
好像跑题了，呵呵，演过正传，下面就是实例代码，在IE7和Firefox3测试通过。
<script type="text/javascript"><!–
// For IE
if (typeof window.event != ‘undefined’) {
document.onkeydown = function() {
var type = event.srcElement.type;
var code = event.keyCode;
return ((code != 8 && code != 13) ||
(type == ‘text’ && code != 13 ) ||
(type == ‘textarea’) ||
[...]
Google Sites上线
今天Google又给我们提供一项免费的服务，Google Sites。如果你拥有一个Google的帐号就可以随时建立一个属于你自己的网站。Google Sites得主页上介绍了它的如下特点：
* 简单的点击即可创建页面
* 不需要写HTML代码
* 可定制外观。
* 可设置访问权限，和共享的信息。
* 免费
另外，主页上还有一个简单的介绍视频。我比较感兴趣的是那里面介绍的一个特性。就是你不仅可以邀请别人来访问你的网站，还可以让他们来和你一起开发这个网站。
这使我突然间有了一个想法，用Google Sites创建校友录也许是个不错的主意。
如何在CSS里设置文本的尺寸
但从标题上来说，也许会有人认为这太简单。但是，这个简单与不简单是有条件的，如果你开发的Web应用程序只给固定的一些少数人用，而这些人又碰巧只使用一种浏览器，那么设置网页的文本尺寸就是个简单问题。但是如果你开发的项目要给成千上万人使用，你不知道他们使用什么浏览器，不知道他们用的是什么系统，而你又非常关心你的网站的用户体验，那么这就是复杂的问题。
网页的设计标准是统一的，但是由于现实中存在IE，Firefox，Opera，Safari等等许多浏览器，而且他们对同一标准支持又不尽相同。所以制作页面的时候，就不得不考虑它们。其中IE6对标准的支持是最差的，在制作网页的时候经常要对IE6做特殊照顾。在CSS里设置文本的时候也不例外。
固定的字体大小和高度固然是良好设计的前提，但是网页又有其特殊性，用户和设计一样，可以随意更改页面的样式。比如，你的网页显示给视力不好的人看的时候，他们就可以通过浏览器改变你原来设置的字体大小来使文字看起来更舒服。所以制作的网页的时候也需要考虑这个。
以我个人做过的项目来看，很多网站都使用PX来设置文本大小，这个对于IE以外的浏览器来说没有问题，你设置的字体都可被放大和缩小。但是在IE却不行。所以，不需找到一个更通用的方法来设置字体大小。
W3C的标准推荐使用em。什么是em呢。在最开始，它表示英文字母的水平长度。但是后来由于其他自然语言的水平长度和英文字母并不相同，比如中文。用em表示水平长度就造成混乱，但是，字符都是由高度的，并且任何语言高度都是统一的，所以现在em是表示一个字符的垂直高度。
浏览器里默认的1em高度都是16个px。所以要使你的网页跨浏览器支持字体缩放，可以通过下面的方法把CSS中的px转换成em。
1.首先在body里设置font-size为62.5%，即：font-size： 62.5%;
因为1em = 16px，那么10px就应该是0.625em。所以把font-size缩小0.625倍，在换算器来就方便了。
另外最好把line-height也固定下来，即： line-height： 1.2em;
2.在CSS里原有的px除以10，单位改成em就可以了。默认字体就应该与转换之前一样。但是需要注意的是em的尺寸是有继承关系的。比如下面的代码：
<div>Parents<ul>Children</ul></div>
如果设置div为1.2em，并且又设置了ul为1.2em，结果ul的字体大小不是1.2em，而是1.2 * 1.2 = 1.44em了。一定要注意。这样有个好处就是是你被迫的去删除多余的css字体大小设置。在编写CSS的时候不自觉的精简代码。
参考文章：How to size text using ems
