开始使用 html5+css3吧

kairyou — 2009-12-11 16:00

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

XHTML1.0、XHTML1.1的doctype不嫌长吗？虽然XHTML1.1比XHTML1.0的少了几个字母，但html5仅需：，喜欢探索的同学应该注意到了淘宝、土豆的首页，都使用了html5的DTD。

html5的编码仅需：，html5可以直接、,不需要加type="text/css"、type="text/javascript"。而且还加入了更语义化的：header、nav、menu、article、aside、details、dialog、footer等，不过为了兼容IE(IE下css里设置html5新增元素的样式无效)目前还是使用div吧。或者是把加入，然后用到的块级元素(section, article, aside, header, footer, nav, dialog, figure)在css加上：display:block也可以。原理就是用js先创建这些元素，然后ie下面就可以应用css的样式了。具体例子可看：http://ejohn.org/blog/html5-shiv/

css3的圆角阴影等虽然在兼容上有问题，有些时候部分内容也可以用一下,毕竟新技术是要不断学习的。总要学点啥吧？

最近用html5、css3写了一个门户站，感觉优化的极好，结构和兼容性都很满意，很有成就感，哈哈

vim使用autocomplpop插件编辑html文件错误的解决

kairyou — 2009-11-19 18:02

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

autocomplpop插件绝对是一个出色的差价，边输入边提示，使VIM看起来像IDE了。废话不多说了，使用autocomplpop编辑html文件时，比如输入"

Error detected while processing function htmlcomplete#complete tags:
line 304
E121: Undefined variable :classlines

下面提供两个解决方法：

1、我的：把plugin/acp.vim 的35/36行（html/xhtml那里）删除掉,100-104/106-110行删除或者注释掉。

2、我也发了邮件给作者，他说没有发现任何问题（可能他用的LINUX），经过两次交流，他发给我个地址：http://likealunatic.jp/2009/09/29_acpvim.php，这里的方法是：编辑：autoload/htmlcomplete.vim，

245-256行注释掉（246、247不注释），294-310行注释掉（295、296、307、308不注释）

推荐第二种，因为我的方法，在html下面没有autocomplpop的功能了，当然，如不需要HTML的提示也可以用第一种。

加入VIM阵营了

kairyou — 2009-11-15 10:38

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

刚接触vim应该是2年前吧，到现在才去尝试把它作为自己的主要编辑器。VIM的界面实在太普通，貌似是从史前一万年座时空穿梭机来的，这点绝对是让很多人不想接触它的原因之一，不过我们使用gVim，下几个配色方案、插件或者别人的配置，感觉会舒服许多。

VIM不愧是世界第二，可制定性很强大，而且插件N多，虽然开始有些不适，需要在下面打一些命令。但是我会强制多使用它的，用熟练了是绝对可以提高效率地。
优秀的软件的发展应该就要走这个路线，自己本身提供最基本的功能，然后超强的可制定性，加上很多好用的插件等待你去发掘。比如：前端开发er必备的firefox。
但是Editplus也算是比较优秀的编辑器，缺点就是制定性有限（还有，是收费的:)）。ed自己配置后，很多功能也是可以用快捷键实现，开发效率也是比较快的。目前的状况是vim有的ed没有，ed有的vim(可能还)没有。所以一段时间内，这两个都是我不可或缺的软件。

使用vim，推荐看看这篇文章，http://blog.chinaunix.net/u/3514/showart.php?id=1974190
http://vimcdoc.sourceforge.net/ 这里的pdf手册
或者在线阅读：http://vimcdoc.sourceforge.net/doc/help.html
VIM的命令实在太多，如果一个人能熟练使用它所有的命令，那他一定是个使用VIM很多年的大牛了。不要太贪，想一下就可以驾驭它，可以慢慢去发掘，慢慢去体会。

另外再推荐一个VIM插件：autocomplpop(语法自动提示，像VS2008、DW的提示，很好很强大)http://www.vim.org/scripts/script.php?script_id=1879
还有：snipMate(tab键代码段补全（仿MAC下的TextMate的补全）)http://www.vim.org/scripts/script.php?script_id=2540，针对不同的文件类型可以自己制定，发现没有css制定的，粗略看了下它里面的注释是用的#号开头，应该会和css里面的冲突，不过用了：autocomplpop这点完全可以忽略了。
autocomplpop的确是很不错的插件，这个插件应该会让很多使用其他编辑器的人加入VIM阵营吧～
在推荐2个防TextMate的配色方案
    eclm_wombat.vim:    http://www.vim.org/scripts/script.php?script_id=2490
    blackboard.vim:        http://www.vim.org/scripts/script.php?script_id=2280
    vim72\colors\里面自带的：desert.vim、slate.vim也是不错的

google的 Closure Compiler 真的很强大，压缩js效果很好。

最近也尝试使用jquery写页面了

kairyou — 2009-09-21 02:07

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

其实自己写了一个js库的，这也不能算是库吧，因为叫库的话，应该要比较强大吧。和jquery、mootools、yui那些比起来简直差好多。我这个只是把自己常用的整理在了一起，比如：addclass、hasclass、removeclass、cookies、getByClassName、event等一些最常用的，相对简单许多了，写法应该和JQ、yui的有些类似吧。因为JQ压缩版也有50多K，而我写的因为简单，做一个门户站的话，全站的js差不多也就30来k，所以还是有些好处的，因为大家都知道仅仅因为一个tab切换而去用jq的话，那算是暴发户所为吧，太浪费了。但是这个有一个缺点，因为JS代码不统一，而合作开发的人如果要用到里面的写法，那么就会需要花费时间，或者，可能他自己加入了另一个js库去实现页面，那么与其这样倒不如团队统一。自己写的那个js目前也用在了两个门户站还有几个小站上面，也算知足了吧。那么goodbye了，为了团队开始用jq吧。

发现了一个IE6的2个form嵌套bug

kairyou — 2009-04-08 21:00

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

如果网站是.net程序的话，body下面紧跟着就是一个form，因此页面出现两个form的几率很高。在做公司目前的一个项目时，发现当在网页中加进去一个form后，用IE6测试时，发现加进去的form后面的文字变成居中对齐了。比如下面的代码：

>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
<style>
body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 

#body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
#body div{text-align:left;} 
style>  
head>  
  
<body>  
<form>第一个form 
    <div id="body">  
        <div>  
            <form>第二个form：这是一个神奇的Form，这个form下面的内容，IE6会居中显示，继承了body的text-align:center（#body:{text-align:left}没有起到作用）。删除这个form后，会发现ie6下下面的内容都变成正常的左对齐了。 
            form>  
            此现象应该是form内又嵌套了一个form所导致。 
        div>  
        <div>这里的内容,要再设置一次：#bd div{text-align:left;} ie6才会左对齐div>  
        <h2>这里的内容IE6居中了h2>  
    div>  
form>
body>  
html>

由于以前接触的基本都是php的程序，从来没遇到过这样的情况，.net把body间的内容用一个form给包含了，当里面再加进去一个form后，上面描述的问题就出现了。

我想到的解决办法就是：

1、把css里body的text-align:center;修改成：text-align /*IE5.5 only*/:center; （这里没照顾ie5.0），由于IE5、IE6都识别前面加下划线“_text-align:”这个hack，所以这个hack在这里也用不上（以前还以为加下划线只有IE6能识别）。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

2、狠下心把body的text-align:center删掉也能解决，但是ie5就。。可惜IE5还有极少数的人在用。。

3、或者 * html body{text-align:left;}/*IE6/ie7都识别*/

4、重设#body下面的元素，#body div, #body h2{text-align:left;}

在实践中上面的四种方法都可能用到，个人更偏向于第三、四种方案。

另外发现我blog的字体，在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体，等宽主要是方便用vim的时候选择，还有bug 所以还不能发布，等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体，所以才萌生了自己做的想法。这个合并字体搞了很久，也搞的很郁闷，制作字体的时候CUP经常100%，终于发现我的电脑年纪不小了。。英文使用DejaVu，是因为最喜欢它的等宽字体，Consolas、Monaco、Bitstream等等好多等宽字体测试后，发现DejaVu的效果是最好的，1、l和0、o、O很容易区分（dejavu也是Bitstream出的他们很接近）。

WinXP SP3 安装IE7的方法

kairyou — 2009-03-10 22:45

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

默认的xp sp3安装的ie都是ie6，那么像我们这类搞web前端开发的就郁闷了，还要装IE7再装IEtester。但是系统为精简版的SP3可能会安装IE7失败，摸索很久才找到原因，不过这个方法很久之前就被我发现了，一直没时间打字～下面说下我的解决办法：

访问：Windows update：http://update.microsoft.com/Windowsupdate/v6/default.aspx?ln=en，安装Windows update ActiveX Control，之后它会提示重启系统。
再安装IE7，问题就解决了。

我想原因就是系统精简了Windows update，而安装ie7首先需要这个功能所以导致安装失败。安装好ie7后再关闭Windows update即可。
我用的是SP3英文版，中文版的解决办法也都是大同小异的了。

fieldset 在ie 和 firefox 下的不同

kairyou — 2009-01-06 16:57

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

最近用php做了一个留言板，用户发布留言的form就用到了fieldset，不过发现了一个问题，就是IE下面fieldset的margin-top和margin-bottom无效，当然margin横向是正常的。

比如css里：fieldset{margin:100px auto;}那么这个fieldset在FF（包括safari等浏览器）显示是上下100px、左右居中。而IE下就是左右居中，margin的上下无效。（当然这里的ie是IE6-IE8、页面带DOCTYPE声明）。

我的解决办法就是修改fieldset内legend的margin，或者fieldset外面加一个div，然后修改这个div的margin。

顺便，这个表单也被我拿来当作练习js了，深刻的体会到：学到的理论如果不用到实践上，那永远也不会有提升。

删除重复内容行

kairyou — 2008-12-30 20:32

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

由于要处理一个两万多行的数据，但要删除其中内容重复的行，所以找了几个方法：

1. 用sed替换重复内容，使用命令 -n "G;s/\n/&&/;/^$.*\n$.*\n\1/d; s/\n//;h;P" "$(FilePath)" （这里是在editplus里的使用，注意$(FilePath)必须是带路径的文件名）。当然sed不需依赖editplus，可以单独使用的。优点：删除重复内容后，顺序结构不变。缺点：不支持UTF-8，处理大文件时（2w多行）就不行了。

2.使用editplus-工具-排序，勾选"删除重复"。可惜不想把内容排序，却被自动排序了。（勾选"区分位置"，好像没用？），这个效率相当快～差不多是瞬间完成的，之所以没放弃editplus，确实它的优点有很多。

3.使用一个批处理

@echo off :: 删除重复的行，但不能保留空行 :: 对不符合变量命名规则、变量个数超过限制的文本都无法正确处理 (echo 清除重复行后的文件内容：& echo.)>str_.txt for /f "delims=" %%i in (testText.txt) do ( if not defined %%i set %%i=A & echo %%i>>str_.txt) :: start str_.txt

当然也不支持utf8，效率也比较慢，处理2w多行用了1分多钟，不过排序没有改变:)。

editplus 正则删除多行注释

kairyou — 2008-12-24 13:16

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

editplus的正则不能用于多行，这点比较郁闷。css里面的注释，有些内容都是多行的，而且还可能包含html语句，这样的情况editplus批量删除注释就不能用了。研究了一下，提供下我认为目前比较完美的方法：

editplus删除多行注释：/*......*/的方法：
1、把全文中的“\n”全都替换成“┓”。
2、把“[<|/]/”替换成空。(删除注释里面的“ 3、把“/\*.[^/]*\*/”替换成空。(不加[^/]，就会波及到非注释内容)
4、把"┓"再替换成"\n"。

以上替换的时候都要勾上“正则表达式”。虽然步骤比较多，但是总算能实现替换多行了。

editplus SVN 设置

kairyou — 2008-12-17 12:27

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

SVN在团队开发的时候很强大。VS有VisualSVN插件，但是我不喜欢用VS。vim电脑上也有，虽然很多人说vim也很强大，不过我目前还是习惯editplus。也许以后会去适应vim吧。

1、首先这里有一篇介绍，edtiplus使用SlikSVN来实现update、commit。当然前提也是要安装TortoiseSVN的。

2、发现了一个更好的介绍，是deitplus wiki里面的介绍的方法。

说明：方法1使用的SlikSVN是命令行端，方法2使用的TortoiseProc.exe是GUI端。

下面我把方法二的实现方法稍微翻译一下：

Subversion Commit

说明：用TortoiseSVN校检文件并提交文件到服务器（当然，前提是你安装了TortoiseSVN）
添加方法:编辑edtiplus 工具-用户工具-添加工具-程序
菜单文本：SVN Commit
命令: C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe
参数: /command:commit /path:"$(FilePath)" /notempfile /closeonend:0
初始目录: $(FileDir) Check: "Capture output", "Save open files"
勾上"保存打开文件"。可以不勾"捕获输出"，根据个人喜好吧，我是没勾。

说明：TortoiseSVN 使用临时文件在 shell 扩展和主程序之间传递多个参数，（低于1.5.0版，必须增加/notempfile参数，如果不这样做，该命令将无法正常工作，/path指定的文件将被删除。）从 TortoiseSVN 1.5.0 开始，废弃/notempfile参数，不再需要增加此参数。

Subversion Update, Delete, Rename, Checkout etc

说明：SVN的更新、删除、重命名、校检等命令
方法：只需要把上面的"参数"里的：/command:commit 用下面的替换（例如：/command:about）

:about 显示关于对话框 :log 打开日志对话框 :checkout 打开检出对话框 :import 打开导入对话框 :update 将工作副本的/path更新到HEAD，如果给定参数/rev，就会弹出一个对话框询问用户需要更新到哪个修订版本。为了避免指定修订版本号/rev:1234的对话框，需要加上/nonrecursive和/ignoreexternals参数（这2个参数我没加，还没遇到上述问题） :commit 打开提交对话框 :add 将/path的文件添加到版本控制 :revert 撤消一个文件自上次更新后的所有的变更 :cleanup 递归清理工作拷贝，删除未完成的工作拷贝锁定 :resolve 将/path指定文件的冲突标示为解决，如果加上/noquestion，将不会提示确认操作。 :repocreate 在/path创建一个版本库 :switch 切换至分枝/标记 :export 将/path的工作副本导出到另一个目录 :merge 打开合并对话框 :mergeall 打开合并所有对话框 :copy 复制工作副本至URL :settings 打开设置对话框 :remove 从版本控制里移除/path中的文件 :rename 重命名/path的文件 :diff 启动TortoiseSVN设置的外置比较程序 :help 打开帮助文件 :relocate 打开重定位对话框 :help 打开帮助文件 :repobrowser 打开版本库浏览器对话框 :ignore 将/path中的对象加入到忽略列表，仅对文件夹有效。 :blame 打开文件的追溯对话框 :createpatch 创建/path下的补丁文件。 :revisiongraph 显示/path目录下的版本变化图。 :lock 锁定一个文件，可以输入锁定的原因。 :rebuildiconcache 重建windows的图标缓存，当系统图标缓存出了问题才需要这样做（会导致桌面的图标会重新排列） :properties 显示 /path 给出的路径之属性对话框。

更多的命令看：tortoisesvn docs吧

我只用了update、commit、add、revert、rename、remove、export、lock、unlock、resolve、checkout、blame、merge，后面几个都是不太常用的了。

另外在editplus wiki，还发现了一个不错的东西：打开当前文件的文件夹（使用svn的话，这个功能就很实用了）。方法，在用户工具里添加-程序：
菜单文本：Current Location(当前文件的文件夹)
命令：%systemroot%\explorer.exe /e,/root,\local disk, 参数：$(FileDir)
初始目录：空着
勾上：退出时关闭窗口、保存打开文件

准备写个html 的 framework

kairyou — 2008-12-05 13:15

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

现在好多css framework，准备写个 html 的 framework。当然每个人的习惯不同，写这个出来也是留给自己用。这个点子是昨天想到的，比如注册页、登录页面等大部分东西都是差不多的（这里是指html的结构方面），那么为何不写一个framework提高自己的效率呢。当然，这个html 的 framework也可以顺便为它写一个css样式，那么又多了一个css framework。应该会很爽吧～很期待自己写出来一个很牛的 html +css 的framework，兴奋ing。。

现在对.net还是不怎么喜欢。以前接触的都是php程序的模板，现在也接触到了.net的程序的模板制作，几个人用visualSVN，感觉很爽～不过.net里面，加ID就会被自动改名成xxx_ID，加class要写成CssClass，这点很让人讨厌。

用css 写的一个浏览器检测

kairyou — 2008-11-09 14:50

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

这个用css hacks 判断浏览器大概是上个月写的，其中的hacks基本涵盖了大部分浏览器，本页面经过测试的浏览器：IE5.0、IE5.5、IE6、 IE7、IE8（beta1&beta2）、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。其实用css判断浏览器是没有什么意义的，其主要意义就在于css hack在多浏览器下的使用，及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列（ie5.0-IE8）的csshack，同时也加入了不太常用的针对Opera和Safari的css hacks。

演示可以见：http://www.fantxi.com/blog/demo/html/browser_detector.html

在css hacks方面，我觉得最好不要用!important来提升指定样式的优先权，我不喜欢这它，因为如果使用它的话，你可能会发现写出的css代码相对较多。当然也不是完全不用它，目的只是当我们加入hacks时，是否要考虑一下如何才能使css的代码更精简？顺便也应该想到，当我们写XHTML代码时，是否考虑某处用div合适，还是ul合适，或者是dl合适？当我们写javascript的时候呢，是否也可以使用最少的代码来实现某一效果？有些人只是写出了div、css代码就很自豪的说自己已经会div、css了，当我问他浏览器兼容和HTML标签语义化时，他却说不出。其实有很多地方值得我们去研究，上次帮公司做的网页，css和js代码基本都被我压缩的不能再压缩了，先手工压缩再机器压缩，很爽很爽:)，不过他们说我变态～。其实这样网站的效率才能达到最高。

我的做法就是在做网页时，应该以firefox来作为参照，然后再在ie和其他浏览器下测试，这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍，善用clear:both，有时也可以这样：，给IE单独做一个css。因为之前做的是门户级的网站，写了很多页面，从中也学到了很多新知识，一时想不起来了，有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

又发现了点css hack的写法

kairyou — 2008-07-18 12:34

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

之前在这里：http://www.fantxi.com/blog/archives/534总结了一次，这次加上点。

CSS代码

这个是基本大家都知道的：
test{margin:1px!important;margin:2px}
firefox/IE7 -> 1px
IE6 -> 2px
下面两个是新发现的(这里不考虑IE5了，最值得看的就是第三个)：
test{margin:1px;+margin:2px}
firefox ->1px
IE6/IE7 ->2px
test{margin:4px!important;>margin:3px!important;margin:2px;}
firefox -> 4px
IE7 -> 3px
IE6 -> 2px

译文：开发人员经常犯的8个设计错误

kairyou — 2008-04-28 18:26

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

计师在抱怨开发人员不尊重Web标准，后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率？相信很多网站或软件开发公司都越到类似的问题。

从UED的角度而言，我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过，用户体验不只是UED的事情，而是整个开发团队乃至整个公司需要参与的事情。

我们不能只是抱怨，我们去理解开发人员。同样，我们做出努力，让开发人员去理解我们。

我们努力去先做出改变。（小马按语）

原文地址： 8 Web Design Mistakes That Developers Make

一个优秀的网站是优秀的设计和优秀的代码的结合，你经常发现设计师不得不去理解代码，而开发人员尝试自己去设计。开发人员花费大学生涯和与其他开发人员一起学习，我可以肯定的说程序员并不是设计师。谢天谢地，我们以前可以评判代码是否重用或者符合正确的OO方法论，但却无法评判美学。但现在，一个开发人员最值钱的资产就是他对设计的敏锐的理解。

现在据我所知，程序员可能从不需要任何设计的知识（或者说，设计师从不需要了解程序）。但事实是，每一个拥有个人项目、少量客户或是管理角色的程序员都需要设计。甚至，我可以说，显而易见，一个自由工作者最大优势就在于，培养潜在的客户让他们渴望理解整个网站的建构过程。所以一个人正在学习做一个开发人员的同时，也需要学设计（至少尝试去做），以下就是我曾经听说或者犯过的8个错误。

“我知道什么看起来很好（我有photoshop）”

这是成为差劲的设计师的原因之一。更无可救药的是本来就很差劲了，还以为自己很好。每个好的设计师都有一个度量好设计的“设计标准”，这个经验来自于自己经常看好的设计。你需要把时间花费在看伟大的设计上，诸如TheFWA, FaveUp, Design is Kinky, 和我个人喜欢的 Behance Network 这些网站。你可能也知道如何去挑选设计杂志，比如How或者print（注意两者并不都是美国的，可能更加国际化一些）。就像好的程序员喜欢看（或评论）其他人的代码一样，好的设计师也总是环顾他人的工作成果，无论是站点、广告牌还是菜单。没有一个好的“设计标准”，即使有大量的photoshop滤镜也拯救不了你。

“一再地使用蓝色和白色”

大多数程序员嘲笑一个设计师总是花费大量的时间来为站点挑选精确的颜色。但是，颜色总要比你想象中还重要，并且你不能在站点构建的时候来更改（至少，那时候就不得不花费大的气力）。象很多事物一样，观察一个好的设计师的配色方案是很有帮助的，寻找配色方案最好的一个站点是COLOURlovers.

“我把每样东西都居中”

大多数情况下，将标题、标语和副本的一部分居中很自然。但是通常，将网页上的文字居中就很外行了。左对齐是很保险的做法，但往往最好是视情况而定。更好地是，在photoshop中利用标尺和网格精确地计算你网站的各个部分。这并不意味着你的设计像格子一样，但是眼睛可以注意到理应被排成一行的几部分却没有这样排列的情况（特别是文本）。每个像素都很重要。

“使用免费的字体…它对于我来说看起来不错”

我曾有一段时间这样想：（a）所有的衬线字看起来都一样（b）没有任何字体值得付钱。我现在把这两条都废除了，去继续学习更多的字体知识，那是一个复杂而美丽的世界。坦诚地讲，如果有一个领域我能成为专家，我希望是字体。你可以只用一点颜色和不错的字体来建立伟大的站点（这只是任何伟大设计的基础）。再次申明，在字体方面要做得更好，需要你多阅读好的站点培养你的眼睛。

“我们可以在那里放置更多的信息”

在拥有程序员和设计师的团队里工作，两者间一个普遍的争论是“空间的利用”，程序员想在页面明显的位置放置尽可能多的信息。设计师争论道，眼睛不可能承受如此多的东西，最好只是在明显的位置只放置logo和标语。尝试去找到最佳的平衡，需要知道（a）杂乱的网站可能没有效果（b）留白不是懒惰的设计师在倒退（c）被称作“空”的部分是很必要的，以便突出其它元素。

“我可不想为照片付钱”

槽糕的图片或照片可以毁灭一个合理的网站，同时经过简单处理的伟大图片可以看起来很好。在网页上那么多的资源，没有理由使用差劲的图片。对于非营利站点而言，可以查看stock.xchng 或 Flickr。对于商业的站点，有许许多多的站点，比如iStockPhoto（但是需要了解版权的知识，因为不久后，你可能在其他站点上看到同样的照片了）。最后不要为在诸如Veer这样的站点上找到完美的照片而花费大笔的钱吓坏了。

“我无需询问意见”

更多地询问而不是闭门造车，你会成为你们设计师的最大粉丝（尽管你戴着一副玫瑰色的眼镜）。你需要询问你认识的设计师，以便得到坦诚的评价。不幸的是，我知道大多数被我问过的人，都只是赞誉而非批评。所以让你的自尊滚一边去吧，戴上“知识”这顶帽子。因为这些人是设计师而你不是。然后在你得到了他们的反馈之后，尊重他们、信任他们，并做一些改变。

“无需得到太多细节”

就像你很一般的代码需要等待提高（虽然仍能执行），你也有一些还说的过去的设计，但是离伟大差得远呢。看伟大的设计很容易这样想“这看起来没什么嘛”，但是事实上，伟大的设计花费了很多的时间（特别是对设计的新手）。但是有这些伟大的设计，你只是看到了最终的产品，并不知道设计者期间经历了多少次编辑和修改。甚至，你可能会惊讶于一条分割线会为设计带来多大的不同。当你把所有元素刚放在一起的时候，别以为设计做“完”了。

总而言之，伟大的设计（就像伟大的代码）很耗时间、耐心和技巧——因此，应该得到适当的尊重。尽管作为程序员（或者是内容编辑还是其他的web员工），你可能从不需要设计整个一个站点，但我有一种感觉，或多或少，你不得不做一点设计。如果可能的话，你尽量不要犯以上的错误……

文章来源: http://ued.taobao.com/blog/2008/02/01/8-web-design-mistakes-that-developers-make/

js 解决两列、三栏div等高(自适应高度)

kairyou — 2008-04-20 01:08

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

JavaScript代码

"text/javascript">

网上的div等高方法大致有五种，这个算是其中一种的完善，无论left或是right高时，都可以实现自适应高度。而且就算遇到left或right里面有其他元素影响时，也可以通过在+"px"; 前面加上加减乘除来达到满意的效果，例,可写成：+5+"px"。

下面是三栏等高：

"javascript"> 
var l=document.getElementById("left").scrollHeight 
var m=document.getElementById("middle").scrollHeight 
var r=document.getElementById("right").scrollHeight 
layoutHeight=Math.max(l,m,r) 
document.getElementById("left").style.height=layoutHeight+"px" 
document.getElementById("right").style.height=layoutHeight+"px" 
document.getElementById("middle").style.height=layoutHeight+"px"

240多个jQuery插件

kairyou — 2008-03-20 16:22

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。

阅读全文

使你的网站设计更加科学的23条

kairyou — 2008-03-19 23:23

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课 ——Christina Laun

在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：

1.对比图像，文字更具吸引力

与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。

3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明，读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。

8.遇到感兴趣的内容，用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如这个电子商务网站的产品介绍。

11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。

14.在各种测试中，人们阅读文字广告最为专心。

正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部，导航工具的作用将更好的发挥

理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。

符合标准的带关闭的对联广告

kairyou — 2007-12-19 16:49

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

这东西虽然自己不喜欢，可还是有用得着的时候。

阅读全文

常用正则

kairyou — 2007-12-16 18:13

Kairyou's Blog ( http://www.fantxi.com/blog/ ) :

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)： [^\x00-\xff]
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
匹配空行的正则表达式： \n[\s| ]*\r
匹配HTML标记的正则表达式： /<(.*)>.*<\/>|<(.*) \/>/
匹配首尾空格的正则表达式： (^\s*)|(\s*$)
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
利用正则表达式分解和转换IP地址：
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的javascript程序：
function IP2V(ip) {
re=/(\d )\.(\d )\.(\d )\.(\d )/g //匹配IP地址的正则表达式
if(re.test(ip)) {
return RegExp.*Math.pow(255,3)) RegExp.*Math.pow(255,2)) RegExp.*255 RegExp.*1
}
else {
throw new Error("Not a valid IP address!")
}
}
不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：
var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是：" (ip[0]*255*255*255 ip[1]*255*255 ip[2]*255 ip[3]*1))
匹配Email地址的正则表达式： \w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*
匹配网址URL的正则表达式： http://([\w-] \.) [\w-] (/[\w- ./?%&=]*)?
利用正则表达式去除字串中重复的字符的算法程序：
var s="abacabefgeeii"
var s1=s.replace(/(.).*/g,"")
var re=new RegExp("[" s1 "]","g")
var s2=s.replace(re,"")
alert(s1 s2) //结果为：abcefgi
用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1
s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/)([^\.] ).*/ig,"")
alert(s)
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
用正则表达式限制只能输入全角字符：
onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
用正则表达式限制只能输入数字：
onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
用正则表达式限制只能输入数字和英文：
onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

开始使用 html5+css3吧

vim使用autocomplpop插件编辑html文件错误的解决

加入VIM阵营了

最近也尝试使用jquery写页面了

发现了一个IE6的2个form嵌套bug

WinXP SP3 安装IE7的方法

fieldset 在ie 和 firefox 下的不同

删除重复内容行

editplus 正则删除 多行注释

editplus SVN 设置

Subversion Commit

Subversion Update, Delete, Rename, Checkout etc

准备写个html 的 framework

用css 写的一个浏览器检测

最近，最近，最近

又发现了点css hack的写法

译文：开发人员经常犯的8个设计错误

js 解决两列、三栏div等高(自适应高度)

240多个jQuery插件

使你的网站设计更加科学的23条

符合标准的带关闭的对联广告

常用正则

editplus 正则删除多行注释