{ Hauy`s blog } Inpeck.com

前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。
在这里，我也要把我的经验和大家分享一下。
众所周知，Email是一项最古老的互联网应用之一。
因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。
HTML细节
就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：
对于纯文本邮件：

邮件标题不要超过18个字；
每行不要超过34个字。

对于HTML邮件：

邮件标题不要超过18个字；
HTML代码和图片尽量不要超过50kb；
页面宽度推荐500px，最大不要超过600px；
避免使用边缘的、非主流的HTML技术；
不使用css来布局，应该使用表格来布局；
不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style=”font-family:arial,helvetica; font-size:10pt; color:#000000″>
…
</font>
不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%” height=”100%”>
<tr>
<td width=”100%” height=”100%” bgcolor=”…..”>
<!— 邮件内容 –>
</td>
</tr>
</table>
有背景图片的时候，我们要采用这种写法：<table background=”background.gif” cellspacing=”0″ cellpadding=”0″>

查看全文 »

用户界面

I Like Your Color
输入URL然后它会抓出其中的颜色并用16进制表示。
CSS Multi-element Rollover Generator
使用CSS和一个图片创建出一个翻转按钮的样式。
CSS Rounded Box Generator
Ruthsarian Layouts
6个CSS页面布局模板，包括颜色、标题等。
Bluerobot Layout Reservoir
2栏和3栏的CSS布局框架
Glish CSS Layout techniques
2、3、 4栏的CSS布局框架
The Layout-o-matic
输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。
Little Boxes
w3cn.org上提供的那些布局模板
Open Source Web Design
各种免费的完整页面模板
Web Builders’ Toolkit
更多的模版资源
Iconico Online CSS Scrollbar Color Changer
List-u-Like
一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。
Nifty Corners: 无需图片的圆角矩形
Round Corner Stone/Icon (rcsi) V1.0
增强的圆角矩形
Xylescope
无需下载其他站点就能轻松分析其CSS代码。
W3C Core Styles
Checkliste zur Webseitengestaltung
Testseite zur Zeilenbreite

查看全文 »

IE真是莫名其妙。
我自己可以在浏览器里关闭这个功能，但是我做的网页别人来访问怎么办呢？
关闭这个工具条有这么几个方法：
方法一：
<META HTTP-EQUIV=”imagetoolbar” CONTENT=”no”>
方法二：
<img galleryimg=”no”>
方法三：定义CSS
<style>
img {nobar:expression(this.galleryImg=’no’)}
</style>

查看全文 »

<p>如果世界是美好的，浏览器都没有缺点，W3C的规范清晰明了，而这篇文章也永远不会出现。Welcome to the real world. 在这篇文章中，我们将会探讨几个主流浏览器的在Web标准（或者CSS规范）下存在的典型问题/臭虫，提供相应的解决方案（hacks/filters）。</p>
<h3>NN 4.x</h3>
<p>很幸运我们生活在这个时代。这个10年前的古董浏览器,网景导航家（Netscape Navigator）4.x，终于只剩下0.3%的市场份额，大部分网站也声明不再支持。它有着最基本的CSS支持，而且依然有不少死忠（我相信越来越少），所以依然有设计师为它设计样式。但最多只能改变下字体，颜色等最基本的东西了。所以，我是说假如，你还要顾及NN 4.x的话，比较合适的做法是，做一个基本样式给它用，并对其隐藏不可识别的高级样式（给其他浏览器用）。很容易做到，因为NN 4.x不认<code>@import</code>

查看全文 »

昨天装了IE7，今天又卸了。
狠不爽，主要缺点：
1.IE7里英文居然是糊的，大概是因为新增加了放大网页这个功能的缘故。
2.原本IE6下正常显示的网页居然要滚动条了……
3.速度极慢
4.占资源
5.原本能正常运行的js会出问题……
等等……
我还是等正式版出来再考察IE7在CSS方面有哪些改进吧。

查看全文 »

我觉得表格和CSS并没有矛盾，谁说用了表格就不能用CSS来控制板面？
我一样也能做到随心所欲。
w3c.org主页上还是用表格控制的呢~
当然，初次接触网页制作的朋友可以尝试摒弃表格，用div来控制板面。
已经习惯用表格的我也觉得没必要全面转向div控制。
说到web标准，我又不得不说几句。
不是说w3c发布了标准我们就要采纳，他们只是一个建议。
比如firefox的主页左边菜单栏在ie下和firefox下效果完全不一样。
而某个公司要我做网页，要firefox下的那种效果。
想想看就知道，那些人不要说firefox，可能听也没听说过。
那我该怎么办？
我有两个办法，一个是劝说公司老总换用firefox。
第二，采用别的实现方法，让ie下显示类似的效果，但是不能保证firefox下的效果。
你们如果是我，你们会采取哪种方法？
第一种么？老总会不会问我，firefox是什么东西？我为什么要装这个？

查看全文 »