大家也可以直接下载附件PPT，更直观一些。
做Email模板时的重要思想：
抛弃现代化的DIV+CSS技术,
回到HTML4.0 - TABLE 的时代！
少用CSS！多利用标签本身的属性！
模版的设计很重要！
尽量保持简洁的设计风格（布局，样式），少用图片！
如：FACEBOOK
1. 布局
不管是整体或是局部的布局，都严格使用TABLE！
2. CSS
@1.尽量利用标签本身的属性达到设计的效果，例如：<img width="100" height="100" />, <td cellpadding=10>
@2.元素背景：background-color全部有效，
background-image, position, repeat，对outlook2007/10,live,gmail无效。
所以非纯修饰用的图片不应该用CSS背景的方式应用。
@3.不要重复定义同样作用的标签属性和css属性，例如<td>的padding属性(css)和cellpadding属性(标签)。
@4.不用简写形式来定义属性的值，如：
font:italic bold 12px/20px arial,sans-serif;,
background: #0F0 url(bgimage.gif) no-repeat fixed top;。
@5.不要用简写的十六进制数字来定义color属性的值，如不要这么写：color:#f60;要写成：color:#ff6600;
@6.CSS代码得统统写到每个标签的style属性里，无法全局定义。
3. 图片
某些邮件客户端会默认阻止图片显示，如GMAIL. 所以要慎用图片（<img>）！
@1.每个img元素都要定义高度和宽度属性。
@2.要定义ALT属性，若图片失效，文字信息可由该属性显示出来，重要的文字信息应该避免放到图片上显示。
@3.图片格式：
有些客户端不支持8位或24位的PNG图片，所以尽量用gif和jpg格式（带大片同色的用gif，色彩丰富的用jpg）。
@4.想要定位图片浮左浮右，可直接用img标签本身的align属性，如<img align=left />，别用CSS的float属性。
@5.由于一些莫名的原因，hotmail会在图像下面添加额外的填充，解决这个问题，可以给每个图片加上：<img style="display:block;" />
4.邮件宽度及居中
@1.用来显示主体信息的表格的宽度要<600，
不要只依赖给table标签定义宽度属性，
要为所有单元格都定义好宽度属性。
@2.不需要用CSS来使table居中（虽然大部分邮件客户端也都支持），
只要给主体内容的table设置align=center即可。
特殊情况：hotmail居不了中，因为它会邪恶的给你在最外头包上一个div{display:inline-block;}
5. 邮件背景
如果想要给整个邮件定义背景图片或者背景颜色，
不要试图用css给body定义背景或者直接定义body的背景。
可以用一个table在外面嵌套，将其宽度定义为100%。
如果要定义背景图片，记得为某些不支持它的邮件客户端提供一个备用的背景颜色
<table width="100%" style="background-image:url('***'); background-color:#CCC;">
6.链接
有些客户端会覆盖掉自定义的链接样式，所以为了完全避免，使用如下定义方法：
<a style="color:blue;"><span style="color:blue;">...</span></a>
7.模板变量
在Email模板中，无法依靠css来控制各元素的样式，所以模板变量中尽量不要包含HTML代码，一般情况下只提供纯粹的文本或链接，若包含了，就必须自己控制自己的样式（style属性）。
不过特殊的是图片，若图片是动态变化的，而且不能确定所有图片的尺寸位置神马的都一样，尤其重要的是alt文本值也不一样，这时候要由模板变量提供整个img元素，而且要提供完整的标签属性，比如width, height, alt, align...
Drupal中可以很方便的使用theme('image')或theme('imagecache')
8.其它
@1. 制作模版时，DTD 可以尽量选用古老的HTML 4.01来限制你加入一些过于现代化的元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
@2.如果可能，不要在<td>标签与其内容之间有空格，ahem, Yahoo! and Hotmail 在某些情况下可能会在td里面的内容的上面或下面添加额外的填充，没有任何明显的原因...
9.测试
最后，不要忘记测试主流邮件客户端！
尤其是若包含图片，注意看若图片不显示时，文字信息（alt）是否足够表达清楚，整体样式看起来是否太差。
10.有用的资源链接
邮件模版制作导航：
http://www.campaignmonitor.com/design-guidelines
各邮件客户端可用CSS属性大全：
http://www.campaignmonitor.com/css
| Attachment | Size |
|---|---|
| html_email.ppt | 151.5 KB |
