刺客 » 前端开发 http://blog.cike.org 刘益民中文网 Tue, 28 Jun 2011 00:33:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 常见广告尺寸整理 http://blog.cike.org/2009/ad-size/ http://blog.cike.org/2009/ad-size/#comments Mon, 10 Aug 2009 16:47:51 +0000 cike http://blog.cike.org/?p=453 继续阅读 →]]> 广告与页面能完美结合才是好模板，对点击率和体验都会有不少帮助，整理了我了解的几个广告尺寸

Adsense广告尺寸

728 x 90
728 x 15
468 x 60
468 x 15
336 x 280
300 x 250
250 x 250
234 x 60
200 x 200
200 x 90
180 x 150
180 x 90
160 x 600
160 x 90
125 x 125
120 x 600
120 x 240
120 x 90

Alimama广告尺寸

950 x 90
760 x 90
728 x 90
658 x 60
468 x 60
360 x 190
336 x 280
300 x 250
290 x 200
250 x 300
250 x 250
250 x 60
200 x 200
180 x 250
160 x 600
120 x 600
120 x 240
120 x 60

CHANet联盟广告尺寸

成果联盟具体某个广告不固定，但大部会集中在以下尺寸

967*60
950*60
760*80
728*90
468*60
300*300
250*250
200*130
160*600
120*600
120*60
100*300

Vunion广告尺寸

980 x 450
980 x 90
945 x 80
600 x 90
600 x 480
465 x 60
450 x 380
330 x 240
320 x 250
320 x 185
250 x 60
160 x 500

百度联盟有号未使用，未作参考，从adsense、alimama两大广告尺寸可以看到宽度728、468、336、300、250、200、180、160、120被很好地支持着，结论非常郁闷，使用2列布局里，[900，1000]找不到一个组合的整宽（包括间隔）正好为950、980甚至990

2列组合

728+250+10＝988

728+200+10＝938

728+180+10＝908

3列组合

300+336+336+8+8＝988  2列使用10px间隔，3列使用8px，正好可以组合出几组相同的总宽

250+336+336+8+8＝938

336+300+300+8+8＝952

……

推荐使用988组合，不要跟我提栅格，这里只有广告

]]> http://blog.cike.org/2009/ad-size/feed/ 0 《Web Form Design: Filling in the Blanks》-Luke Wroblewski http://blog.cike.org/2009/web-form-design-filling-in-the-blanks%e3%80%8b-luke-wroblewski/ http://blog.cike.org/2009/web-form-design-filling-in-the-blanks%e3%80%8b-luke-wroblewski/#comments Wed, 18 Mar 2009 17:50:09 +0000 cike http://blog.cike.org/?p=394 继续阅读 →]]> 源于BI群里一篇价值3亿美元的按钮译文吸引我了解了这本书，当当上没找到！到了Luke Wroblewski网站才看到

Amazon本书信息：http://www.amazon.com/gp/product/1933820241/ref=ase_lukewinterfac-20/189-8918156-3138128?ie=UTF8&redirect=true

36刀太贵了，等待电子D版或国内发行中文版

发几张书内的插图先饱个眼瘾

web-form-design-1

web-form-design-2

web-form-design-3

很惊艳，又见到了这种热度分布图

]]> http://blog.cike.org/2009/web-form-design-filling-in-the-blanks%e3%80%8b-luke-wroblewski/feed/ 0 快慢间的幽雅-绿软下载按钮 http://blog.cike.org/2009/xdonws-2008ucd/ http://blog.cike.org/2009/xdonws-2008ucd/#comments Fri, 16 Jan 2009 23:14:00 +0000 cike http://blog.cike.org/?p=350 继续阅读 →]]> 绿色软件小巧、环保，大部分还是绿色破解版，一向是我的喜好！推荐一个不错的站

绿色软件联盟:www.xdowns.com

http://www.xdowns.com/skin/xdowns/download.gif

http://www.xdowns.com/skin/xdowns/download.gif

满城下载垃圾站+在动画被AD滥用的国内互联网，上面这个下载按钮有多少人愿意点击，第一眼看到我会犹豫，再来看一下改版前的下载按锯，相近的大小，区别在整体的动感

xdowns-load2

http://web.archive.org/web/20070102014613/http://www.xdowns.com/skin/xdowns/download.gif

两者相比，得承认前者华丽火爆的多，思考按钮应是吸引眼球还是引导点击！？问了几个网友，大部分更会接受前者是广告图片，个人之见，绿软的这个小改动是个败笔，根据经历，更多的时候设计师设计一个按钮只是因为这个按钮好看，网站主把网站功能广告化是也是常犯的败笔。推荐阅读下面这本书

book-jiuzhemejiandan
向怡宁-《就这么简单》

]]> http://blog.cike.org/2009/xdonws-2008ucd/feed/ 0 基于jQuery的wordpress留言本插件 http://blog.cike.org/2008/wordpress-ajax-guestbook/ http://blog.cike.org/2008/wordpress-ajax-guestbook/#comments Sun, 14 Dec 2008 16:20:49 +0000 cike http://blog.cike.org/?p=309 继续阅读 →]]> 从zblog转到wp，入手不到一周，用周未一天制作wordpress Ajax留言本，主要特点：

  1. 基于Jquery的Ajax提交
  2. 直接读库，提取日志中的评论，支持回复、审核
  3. 支持纯留言发布

演示：http://blog.cike.org/guestbook/ 【失效】

下截：http://blog.cike.org/demo/wordpress-guestbook.zip【失效】

更新日志：

  1. 完善分页部分 [update 20090117]
  2. 增加表单判断
  3. 如果有时间，区分评论与留言，评论内容将显示相应的日志名称
  4. 支持avatar头像[update 20090317 ]
]]> http://blog.cike.org/2008/wordpress-ajax-guestbook/feed/ 0 从CHINAZ看FAVICON.ICO设计 http://blog.cike.org/2008/favicon-ico/ http://blog.cike.org/2008/favicon-ico/#comments Sun, 17 Aug 2008 16:39:37 +0000 cike http://temp.cike.org/2008/08/%e4%bb%8echinaz%e7%9c%8bfaviconico%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e8%ae%be%e8%ae%a1/ Favorites Icon其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中

如何像CHINAZ一样做出动画效果且实现跨浏览器兼容呢？是否存在可改进的内容？

 

继续阅读 →]]> FAVICON.ICO知识基础

Favorites Icon其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中，大小为16*16，目前IE6好像不支持自定义Favicon，IE7仅支持ICO格式，FF/Opera支持GIF/PNG/ICO/JPG等格式。

网站如何应用Favicon图标

  1. 方法一：将制作的Favorites Icon命名为Favicon.ico，放置网站根目录即可，浏览器会自动索引
  2. 方法二：使用<link rel=”icon” href=”图标路径” type=”MIME类型” />如 <link rel=”icon” href=”/cike/favicon.ico” type=”image/x-icon” />

如何使用动画Favicon

无意中看到CHINAZ的FAV图标在FF中隔8秒左右上滚一次，还以为是眼花了，截图为证

IE7中显示正常一定是ICO格式，ICO是不支持动画的，CHINAZ是如何做的呢

<link rel=“shortcut icon” href=“favicon.ico” >
<link rel=“icon” href=“favicon.gif” type=“image/gif” >

结论出来了在IE中使用第一行代码，遇到第二行因不支持GIF格式所以不影响第一行效果，FF支持GIF格式，覆盖第一行，最终显示favicon.gif

CHINAZ的用法完美了吗？

力求精简的我们是不会就此收工的，既然浏览器默认会索引根目录下的 favicon.ico，仅使用代码

<link rel=“icon” href=“favicon.gif” type=“image/gif” >

可以实现IE显示ICO，FF/Opera显示gif吗？实践中……

以下依次为IE7、Opera、FF3+FireBug

看来CHINAZ还可以为每个页面精简一行代码！演示DEMO http://blog.cike.org/demo/html/favicon/

关于Favicon结论

  1. 无动画要求：使用ico格式，并命名为 favicon放置于网站根目录
  2. 有动画要求最佳方法：分别制作ICO格式和动画格式两个favicon，将ICO格式favicon文件放置根目录，网站HEAD区使用 <link rel=“icon” href=“favicon.gif” type=“动画格式图片MIME” >
]]> http://blog.cike.org/2008/favicon-ico/feed/ 0 让TD支持完美支持overflow:hidden的CSS实现 http://blog.cike.org/2008/td-overflow-hidden/ http://blog.cike.org/2008/td-overflow-hidden/#comments Thu, 14 Aug 2008 09:49:51 +0000 cike http://temp.cike.org/2008/08/%e8%ae%a9td%e6%94%af%e6%8c%81%e5%ae%8c%e7%be%8e%e6%94%af%e6%8c%81overflowhidden%e7%9a%84css%e5%ae%9e%e7%8e%b0/ 直接在TD上使用OVERFLOW：HIDDEN是无效的，在百度之多半的结论是使用DIV插入TD再使用OVERFLOW显然这是不精简的代码，若是大量的TD，工作量还是个问题

有人提议 为其table定义width:*; table-layout : fixed 但是我在IE7下、Opera、FF3下看都无效，仅实现了对列宽度的控制，换行还是存在无意发现white-space: pre 在IE下实现了

继续阅读 →]]> 直接在TD上使用OVERFLOW：HIDDEN是无效的，百度之，多半的结论是使用DIV插入TD再使用OVERFLOW

显然这不是追求精简的我们所要的，即便不考虑在大量的TD时的工作量

有人提议 为其table定义宽度，并使用 table-layout : fixed ，结合white-space: nowrap 实现了

<style>
table{  border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed;}
td{border:1px solid blue; height:25px;overflow:hidden; white-space:nowrap;}
</style>
<table>
<tr>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
</tr>
<tr>
<td>by:cike.org</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

问题又来了，现实中我们用表格列宽常是不等的，如第一列为80px，再看TD又换行了

……
<td style=”width:80px”>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
……

再次埋头实验－失败－实验…… 答案揭晓 white-space:pre，已通过IE6、7、8B1、FF23、Opera9

<style>
table{border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed}
td{border:1px solid blue; height:25px;white-space:pre;overflow:hidden}
.w80{ width:80px}
</style>
<table>
<tr>
<td class=”w80″>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
</tr>
<tr>
<td>by:<a href=”http://cike.org”>cike.org</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

总结：当td无宽度值时，table{width*;table-layout:fixed;}+td{white-space:nowrap/pre} td将展现为等宽；当TD有指定值时white-space只能为pre，为了省力，推荐在两种情况下都使用white-space:pre

疑惑：为什么指定宽度会使nowrap无效，知道的请分享

最终实例：DEMO>>

]]> http://blog.cike.org/2008/td-overflow-hidden/feed/ 0