qfile 从头开始_从头开始构建HTML电子邮件模板-优快云博客

qfile 从头开始

理解任何过程的最佳方法是从头开始自己执行。今天，我们将通过从头开始构建HTML电子邮件模板来完成电子邮件设计。

“越早停止应对电子邮件的怪癖，就越可以利用它们发挥自己的优势。” – Caity G. O'Connor

编者注：本教程最初由Nicole于2013年6月编写。从那时起，它已成为全世界行业领导者的首选参考书，并且已被数百万初学者用作HTML冒险之旅的起点电子邮件模板。今天与首次发布时一样重要。

Envato Elements上的流行HTML电子邮件模板

如果您正在寻找现成的专业解决方案，请在Envato Elements上获取我们流行HTML电子邮件模板之一。我们有数百个响应式选项，所有这些都包含在您的Elements成员资格中，并具有易于自定义的功能来帮助您入门。

不是您要找的？没问题，本教程将教您如何构建自己的！

我们正在建设什么

这是我们将要构建HTML电子邮件，您可以自行掏钱并自己使用它。请记住，当通过Web浏览器查看此模板时，与电子邮件客户端相比，遇到问题的可能性要小得多。

1.开始您HTML电子邮件文档

首先，值得一提的是我从中提取了一些资源。

可爱的2D图标是Pierre Borodin在Dribbble上制作的
使用的字体是Oil Can ， Source Sans Pro和Mission Script。
社交媒体图标来自Metrize图标

现在，正如我们在上一教程中讨论的那样，您需要以XHTML doctype开始HTML电子邮件模板：

<!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>

排序后，我们可以开始构建其余结构。

2.创建主体和主表

首先，我们将从<body>标记开始为电子邮件添加总体结构。我们将body标签的边距和填充设置为零，以避免任何意外的空间。

我们还将添加一个宽度为100％的表格。这是我们电子邮件的真实正文标签，因为不完全支持正文标签的样式。如果您想在电子邮件的“正文”中添加背景色，则需要将其应用于此大表。

将您的cellpadding和cellspacing设置为零，以避免表格中出现任何意外的空间。

注意：我们将在所有表上保留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中存在属性，请使用该属性而不是CSS”

现在， 在容器表内部放置一个600像素宽的居中表。 600像素是一个安全的最大宽度，可以使您的电子邮件在大多数屏幕分辨率下在大多数桌面和Webmail客户端中舒适地显示。

通过使用width属性，使用HTML而不是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>

我们还添加了一个内联样式属性，该属性将border-collapse属性设置为collapse 。如果我们不这样做，则新版本的Outlook将在我们的表格和边框之间添加一个小的空间。

3.创建HTML电子邮件模板结构和标题

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

让我们复制已经完成的单行，以便共有三行。我更改了其中的文本，以便我们可以轻松识别每一行。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td>
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

现在，我们将根据设计为其着色。由于bgcolor是有效HTML属性，因此我们将使用它来设置背景颜色，而不是CSS。切记要使用十六进制代码的完整六个字符，因为三个字符的速记将永远无法使用。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <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>

好的，接下来我们将重点放在第1行。我们要调整单元格上的填充，然后插入图像。

使用填充

在电子邮件中使用填充时，必须始终指定每个单个值（顶部，右侧，底部和左侧），否则您将获得无法预测的结果。我发现您仍然可以使用速记，即padding: 10px 10px 8px 5px; ，但是如果您遇到麻烦，不妨将其写成长格式，即padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px; padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px; 。

如果您在填充方面遇到更大的麻烦（例如，如果您的发送平台正在剥离CSS），则完全不要使用它。只需使用空单元格来创建空间。无需使用间隔GIF，只需确保添加style="line-height: 0; font-size: 0;" 到单元格，放置一个  并给它一个明确的高度或宽度。这是一个例子：

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

另请注意，在TD标签上使用填充是安全的，但在P标签或DIV上则不能使用填充。他们的行为更加不可预测。

因此，我们将使用一些内联CSS向单元格添加填充。然后，我们将插入图片，添加替代文本并添加style="display:block;" 这是一个常见的修复程序，可以阻止某些电子邮件客户端在图像下方添加空白。我们将在我们的td标签中添加align="center"以align="center"图像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>

4.创建内容区域

首先，根据我们的设计，我们将在中间单元格中添加一些填充，以使内部表周围有一些空间。

现在，我们将添加一个表，该表包含三行主要内容，一行是标题，一行是介绍性文本，另一行是两列的行。我们将表格的宽度设置为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>

现在，我们将添加内容，并在中间单元格中添加一些填充。

<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, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

现在，我们将两列内容添加到第3行。由于我们希望在这两个单元格之间添加一个“边距”，但不支持边距，因此我们将创建一个三列表格，其中在两个外柱。

尽我所能坚持百分比，当您具有特定大小的内容时，将其转换为百分比可能很棘手（在本示例中，列将为48.1％，这可能会造成混淆）。因此，由于我们的两张图片均为260px宽，因此我们将创建同样为260px宽的列，中间有20px的空白单元格。（总计540像素，即表格的600像素宽度减去两侧的30像素填充。）确保将字体大小和行高归零，并添加一个不间断的空格字符  在边缘单元中。

我们还将两个单元的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>

现在，让我们将图像和内容添加到这些列中。因为我们需要多行，所以我们将嵌套另一个表，因为我们不能使用任何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, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </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, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

在这里，我们使用HTML将图像的宽度设置为列宽的100％。同样，如果我们使此电子邮件具有响应性，则只需要使用媒体查询来更改父元素的宽度即可。

我们必须覆盖以像素为单位的高度，因为使用style="height: auto"现在将不能在所有情况下使用（咳嗽，咳嗽，Outlook） 。因此，我们将使用像素进行设置。这意味着我们必须设置height: auto!important在那些使用媒体查询覆盖像素值的图像上height: auto!important ，但是我们可以使用单个类来实现。当我们将宽度设置为百分比时，我们将不需要覆盖它。要覆盖的东西越少越好。

5.设置电子邮件模板页脚的样式

现在，将填充添加到页脚行中。

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

在该单元格内，我们将嵌套另一个表以获取两列。

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

我们将为社交媒体图标创建另一个小表。我们将其父单元设置为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>

现在，为了安全起见，我们将添加文本并为单元格添加一个宽度，即使它们之间有很多空白。我们将该单元格设置为75％，另一个设置为25％。

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

我们终于得到它了; 我们HTML电子邮件模板布局已完成！

6.运行HTML电子邮件验证测试

正如我们多次提到的，电子邮件中HTML是一个雷区。让我们通过W3C验证程序运行此程序，以确保没有任何不良或损坏。如果您严格按照说明进行操作，它将表示已通过。

接下来，我们将通过Litmus进行测试，以确保我们的电子邮件结构良好。这是我的测试摘要：

7.设置文字样式

我们的第一行是标题。我们将使用<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>

我们终于得到它了！一切就绪。该关闭边界了，看到它看起来很美。遍历所有出现的border="1"替换为border="0" 。

在这一点上，它看起来有点难过，所以让我们进入第一个600px宽的表格并添加：