文档章节

从头开始构建一个HTML电子邮件模板

奥巴码侬
 奥巴码侬
发布于 2015/03/24 09:55
字数 3514
阅读 6140
收藏 15

最好的理解方式就是从头开始自己动手实施的过程。今天,我们要做的只是用于电子邮件设计,从头开始构建一个HTML电子邮件模板。

按照方法做了一个公司的html邮箱模板,亲测很好很稳定。0 0!

做了事的

首先,值得一提的是,我使用的一些资源。

正如我们前面的教程中讨论的一样,HTML邮件需要一个XHTML文档类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demystifying Email Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> </html>

接下来我们可以开始构建其余的结构。

创建body和主体表格

首先,我们将为我们的电子邮件添加一个总体结构,从<body>标记开始。我们给<body>标记设置margin和padding为0,以避免产生意想不到的空间。

我们还将添加一个宽度为100%的表格。这才是我们的电子邮件的真正主体,因为<body>标签并不完全支持。如果你要给你的邮件的body添加背景色,你需要将它应用到大的table标签上来代替body标签。

设置你的单元格边距(cellpadding) 和单元格间距(cellspacing)为0,避免产生不必要的空间。

注意:我们给我们的table设置border="1",这样我们可以看到我们框架的布局。最后我们将使用“查找和替换”删除它们。

<body style="margin: 0; padding: 0;"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Hello! </td> </tr> </table> </body>

从头开始构建一个HTML电子邮件模板

如果属性存在于HTML,可以用来替代CSS的样式。

现在在表格容器内放置一个600px宽度的表格,并且让他居中。600px是一个安全的最大宽度,使用你的邮件在桌面和Web邮件客户端在大多数的屏幕分辨率下显示的最舒服。

使用宽度的属性替代CSS来设置这个宽度。HTML电子邮件开发的黄金法则是:如果一个属性存在于HTML中,绝对使用标签属性而不使用CSS样式

我们将使用这个表格来替代我们的标题“Hello!”:

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table>

这里看得可能会有点晕,使用上面的表格代替第一个表格中的标题"Hello!"——大漠

整体的代码如下:

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table> </td> </tr> </table>

我们已经添加了一个内联样式,设置border-collapse的属性值为collapse。如果我们不这样做,新版本的Outlook将会给我们的表格与边框之间添加一个小的空间距。

从头开始构建一个HTML电子邮件模板

创建结构和头部

在我们的设计中,我们可以看到电子邮件分为三个逻辑部分,所以给每一个部分创建一个行。

让我们重复复制行,使其总行数为三。我已经变了行里面的文本内容,这样我们可以更容易的标识每一行。

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table> </td> </tr> </table>

从头开始构建一个HTML电子邮件模板

现在根据设计给他们设置颜色。bgcolor是有效的HTML属性,我们使用这个属性来替代CSS的background-color属性来设置背景颜色。永远记住要使用完整的6个完整的十六进制编码,如果使用三个简写字符,不总是有效

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td bgcolor="#70bbd9"> Row 1 </td> </tr> <tr> <td bgcolor="#ffffff"> Row 2 </td> </tr> <tr> <td bgcolor="#ee4c50"> Row 3 </td> </tr> </table> </td> </tr> </table>

从头开始构建一个HTML电子邮件模板

好的,接下来我们将重点放在第一行。我们在单元格上调整内距(padding),然后插入我们需要的图像。

使用内距padding

当在电子邮件中使用padding,您必须始终指定每一个值(top、right、bottom和left),否则你可以得到无法预测的结果。我发现你仍然可以使用简写,例如:padding:10px 10px 8px 5px,但是如果你有麻烦,你需要单独写出来,例如:padding-top:10px;padding-right:10px;padding-bottom:8px;padding-left:5px;。

如果你使用padding有更大的麻烦(例如,如果您发送邮件的平台把CSS样式都删除了),不要使用它。简单的使用空的单元格创建空的间距。没有必要使用空的gif文件到单元格中,只需要确保在单元格中添加行内样式style="line-height:0;font-size:0",并在单元格中填充一个&nbsp;并给他设置一个明确的高度或宽度。这里有一个例子:

<tr><td style="font-size: 0; line-height: 0;" height="10">&nbsp;</td></tr>

还请注意,在td标签上使用padding还算是安全的,但在div或p标签上,他们表现得更加不可预测。

因此,我们将使用一些行内CSS给单元格添加内距padding。然后,我们将插入我们的图片,添加alt属性文本和style="display:block;",这个是一个常用来修复一些电子邮件客户端图片下面空白间距。我们通过在td标记中添加align="center"将图像居中显示。我们还将添加一个重要的alt标签,因为我们邮件加载之后,在多数情况下,图片是关闭的。

注意:如果你的头部的内容很重要,在头部中不要仅仅使用一个图像。记住,大多数邮件客户端把图像关闭,所以,要是你的电子邮件很重要,不要使用图片加载进来。在这个例子中,我们的头部是非常多余的。

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>

从头开始构建一个HTML电子邮件模板

创建内容区域

首先,我们将会在中间的单元格中添加一些内距padding,按照我们的设计,表格周围有一些空间。

从头开始构建一个HTML电子邮件模板

现在我们给主内容添加一个三行的表格——一行是头部,一行是内容介绍和包含两列的一行。我们把表格的宽度设计为100%而不是使用一个固定的像素值。因为这有助于我们实现一个响应式的电子邮件。如果你总是给每个东西的宽度设置具体的像素,你就需要要媒体查询中覆盖更多的样式。如果你嵌套的表格的宽度是基于百分比,当你调整父元素的宽度,一切都将相应的会调整。

<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table> </td>

从头开始构建一个HTML电子邮件模板

现在,我们将添加内容,并给中间的单元格添加一些内距(padding)。

从头开始构建一个HTML电子邮件模板

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td style="padding: 20px 0 30px 0;"> Lorem ipsum dolor sit amet ... </td> </tr> <tr> <td> Row 3 </td> </tr> </table>

现在,我们要在第三行中添加两列内容。因为我们想要在两个单元格之间设置一个margin,但大家都知道表格是不支持margin,我们需要创建一个三列的表格,将一个空的单元格放在两列之间。

尽管我非常喜欢坚持使用百分比,但当你有一个特定大小的内容时,很难将它转换成一个百分比(在这个例子中,列设置为48.1%可能会混淆)。因为这个原因,我们有两个260px宽的图像,我们将创建260px的列,并在两列中间创建一个20px宽的空单元格。(总计是540px,这是因为我们总宽度是600px,减去两边填充的30px内距)。确保在间距的单元格中设置你的字体(font-size)和行高(line-height)为0和插入空白字符&nbsp;。

我们还将给这两个单元格添加valign="top",让内容垂直方向在顶部对齐。单元格垂直方向的默认值是middle。

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> Column 1 </td> <td style="font-size: 0; line-height: 0;" width="20"> &nbsp; </td> <td width="260" valign="top"> Column 2 </td> </tr> </table>

从头开始构建一个HTML电子邮件模板

现在给这些列添加图像和内容。我们需要嵌套一个多行的表格,因为我们不能使用任何的colspan或rowspan标签。我们将给图像和内容之间添加一些内距,并将他们复制到另一列。

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> </td> </tr> <tr> <td style="padding: 25px 0 0 0;"> Lorem ipsum dolor sit amet... </td> </tr> </table> </td> <td style="font-size: 0; line-height: 0;" width="20"> &nbsp; </td> <td width="260" valign="top"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> </td> </tr> <tr> <td style="padding: 25px 0 0 0;"> Lorem ipsum dolor sit amet, ... </td> </tr> </table> </td> </tr> </table>

这里我们使用HTML的width属性给图像设置宽度为列宽的100%。再次地,同样如此,如果我们的邮件是响应式,我们只需要使用媒体查询来改变父元素的宽度。我们将不得不用像素得写图像的高度,因为使用style="height:auto;",目前并没有所有邮件客户端都支持(如Outlook)。因此我们把它们设置固定的像素值。这也意味着,我们必须在媒体查询中使用heihgt:auto !important;覆盖图像的像素值,我们可以通过添加一个类来这样做。当我们设置宽度为百分比,我们不需要重新覆写。因为越少的东西需要覆盖,越更好。

从头开始构建一个HTML电子邮件模板

脚部

现在我们给脚部的行添加内距。

<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> Row 3 </td>

从头开始构建一个HTML电子邮件模板

在这个单元格这,我们将嵌套一个两列的表格。

<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </table>

从头开始构建一个HTML电子邮件模板

接下来为社交媒体图标创建另一个小表格。设置他的父元素单元格align="right"。确保这些链接图片设置了border="0"(为了避免链接的蓝色边框)和不要忘记了给图片添加display:block;。

<td align="right"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://www.twitter.com/"> <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> </a> </td> <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td> <td> <a href="http://www.twitter.com/"> <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> </a> </td> </tr> </table> </td>

从头开始构建一个HTML电子邮件模板

现在我们添加文本和给这个单元格设置宽度,尽管他们之前有很多空白,但为了安全起见,将这个单元设置一个宽度为75%,其他的为25%。

<td width="75%"> &reg; Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>

到此,我们的整个布都完成了。

验证

我们通过W3C验证器进行验证,确保我们的代码没有问题。如果你代码没有问题,它会说,你已通过验证。

从头开始构建一个HTML电子邮件模板

接下来我们通过Litmus来进行测试,以确保我们的电子邮件能正常工作。下面是我测试的总结:

从头开始构建一个HTML电子邮件模板

文本样式

我们的第一行是一个标题,我们将使用<b>标签来创建加粗文本,因为大家都知道,HTML属性能解决的样式决不使用CSS样式。

<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> <b>Lorem ipsum dolor sit amet!</b> </td>

我也会给其他单元格添加内联样式,来美化文本:

style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

接下来我们需要给页脚文本写样式,交且我们也将会整理我们的退订链接。我们同时使用CSS样式和HTML的<font>标签来修饰退订链接。使用这两种方式是最好的,确保你的链接从不出现默认的蓝色。

<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> &reg; Someone, somewhere 2013<br/> <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly </td>

从头开始构建一个HTML电子邮件模板

到此一切都有了,也是时间清除边框,让他看起来更漂亮。通过编辑器的“查找/替换”功能将border="1"替找成border="0"。

从头开始构建一个HTML电子邮件模板

这样看上去它好像漂浮在白色的空间上,比较难看,所以我们去给第一个设置600px的表格添加:

style="border: 1px solid #cccccc;"

现在看上去不漂移了。最后,我给第一个单元格添加了底部为30px的内距,防止我们的邮件在某些邮箱客户端(如Apple Mail)突然停止了,另外添加10px的顶部内距,让我们的页头顶部有点空间。

<td style="padding: 20px 0 30px 0;">

从头开始构建一个HTML电子邮件模板

就是这样的!你只需要做最后的测试了。

从头开始构建一个HTML电子邮件模板

总结一下

到今天为止,如果你有使用任何评论,请摆脱他们。使用评论,一些电子邮件客户端会让你窒息,所以最明智的做法就是没有必要的代码不要出现在你文件的任何地方

现在可以最后的测试,然后,你的HTML电子邮件就可以准备发送!

demo    download

本文转载自:http://www.w3cplus.com/css/build-an-html-email-template-from-scratch.html

共有 人打赏支持
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
加载中

评论(1)

早起的菜鸟
早起的菜鸟
嗯好解决了我的问题
三大最棒的开源Web开发模板或框架

  【IT168 评论】在过去的日子里,从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员,可以用很少的精力创建一个不错的网页,然后把它放在网络服务器上,就搞定了。比如...

it168网站
2017/04/14
0
0
16个快速启动 Web 项目样板

样板是可以重用在许多地方的一套代码文件,只需很少或根本不需修改。然而,这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础。另外,这也是学习编码技巧和窍门的好地方! 样板是...

虫虫
2012/03/18
7K
2
为 Web 开发者准备的 20 个有用的 HTML5 教程

HTML5: 基础知识 从头开始编码的HTML5布局 用 HTML5 设计一个博客 用 HTML5+CSS3 创建优雅的网站 用 HTML5 设计一个很酷的 iPhone App 网站 HTML5 应用基于浏览器的存储 在手机上使用 HTML5 ...

红薯
2012/02/25
15K
10
表单验证插件--SkValidForm

SkValidForm jQuery验证插件(Jquery Validation Plugin) 这个jQuery插件使简单的客户端的表单验证方便,同时还提供大量的定制选项。如果你正在从头开始构建新的东西,也可以很好的选择,但...

skschool
2015/09/24
607
0
ybValidForm 1.0 发布,jQuery 验证插件

ybValidForm 1.0 发布,添加了自定义错误样式和自定义验证规则功能 ybValidForm是一个jQuery插件,使简单的客户端的表单验证方便,同时还提供大量的定制选项。如果你正在从头开始构建新的东西...

php0225
2016/07/12
2.4K
8

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
14分钟前
0
0
关于《红楼梦》的读后感优秀范文2000字

关于《红楼梦》的读后感优秀范文2000字: (在写读《红楼梦》有感的路上遇到了博友“五音不全”师兄,使我感到汗颜,于是放弃了87版的电视剧,只读原著《红楼梦》和五音的评红作品,对原著才...

原创小博客
26分钟前
1
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
29分钟前
1
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
2
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部