如何使用 HTML 和 CSS 创建电子邮件模板？
已发表: 2020-02-10作为设计师和开发人员，有一天您的客户会要求您为他们的各种时事通讯提供电子邮件模板。 我必须说，电子邮件模板并没有那么令人兴奋，仅仅是因为对 HTML 和 CSS 的支持存在很大差距。 您可能会认为，在我们正在推进 HTML5 和 CSS3 的当今时代，情况并非如此。 但是，我很遗憾地说，在呈现电子邮件时，情况并非如此。
创建 HTML 电子邮件模板时要记住的第一件事是，所有 CSS 样式都应该内联完成。 在任何其他情况下，这是一个非常大的禁忌。 但是，因为对外部 CSS 甚至头部 CSS 的支持很少，所以内联是实现它的方式。 此外——我相信你以前听说过这个——模板必须用 TABLEs 创建，而不是 DIVs。 再一次，这是不幸的，但这是要走的路。 鉴于电子邮件总体上没有那么大，设计和创建它们并不难——与网络或移动设计相比，它只是乏味。
- 该设计
- 结构
- 样式
- 内容
- 内联样式
- 身体
- 桌子
- 第一行 - 标题
- 第二行
- 第三排
- 第四排
- 第五行 - 页脚
- 最后的话
该设计
为您推荐：如何使用现代 CSS 框架加速您的设计过程？
结构
在 HTML 页面的正文中，粘贴以下代码。 只需查看代码，您就可以看出这封电子邮件的结构并不多。 这实际上是一件非常好的事情，因为电子邮件永远不应该是复杂的。 到目前为止，还有少量的样式只指定了表格的总宽度并且表格的单元格之间没有任何内容。
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>样式
好的，现在我们要在文档内容中添加一些 CSS。 只是重置和链接颜色和样式定义，这根本没有什么花哨的。 我会非常小心你放在这里的 CSS，因为它经常被电子邮件客户端忽略。
<style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>内容
是时候用内容填满表格了。 您可以在上面为您提供的文件中找到图像 - 在本教程的开头。 现在您应该填写此电子邮件中的所有文本和图像。 请注意，在本教程中，您不必将超链接实际链接到任何内容，您也可以自由使用自己的图像。 到目前为止，在代码中，我已经定义了所有三个图像的宽度，只是为了确保它们的大小已设置。
我需要你非常注意一些事情：图像非常适合电子邮件，只要它们是 a：小尺寸和 b：有一个 alt 标签可以很好地描述它们。 我相信您知道，为了让图像出现在电子邮件中，这封电子邮件的收件人必须允许图像出现。 如果他们不这样做，就没有什么可以告诉他们应该期待什么。 如果您不为盲人用户提供描述，这也是一个可访问性问题。 然而，那是另一回事了。 所以，教训是：始终使用带有 alt 标签的小图像！
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>内联样式
我们要做的最后一件事是为这个 HTML 电子邮件模板提供内联 CSS 样式。 正如您所看到的，这就是电子邮件外观的原因，到目前为止，这封电子邮件看起来一点也不漂亮。 我会把这部分分成小块，这样它就不会变得过于庞大。
您可能还喜欢： 7 个使您的电子邮件主题行更易于点击的有用提示。
身体
首先，让我们设置整个电子邮件页面的背景颜色以及默认的字体大小和字体颜色。
<body bgcolor="#f7d973" ></body>桌子
接下来要做的是将电子邮件内容居中并为其提供自己的背景颜色，以便脱颖而出。
第一行 - 标题
第一行的单元格中发生了很多事情。 请注意，内联样式在 <td> 而不是 <tr> 上。 我们在这里所做的是与徽标相匹配的新背景颜色。 此外，还有一些填充和对齐。 现在，我将文本的颜色更改为白色，因为替代文本默认为黑色。 您将无法在此背景上看到它，因此我确保您可以通过更改文本的颜色来查看它。 这对您来说似乎没用，但就像我说的，这对于默认情况下不允许使用图像的人来说非常重要。
<tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>第二行
在该行中，再次只有一个跨两列的单元格。 这个单元格通过添加一些填充和底部的分隔线来将其内容与下面的行分开来稍微操作。 我们也有一个大标题，它通过利润获得了一些空间。 而且，这就是这一行。
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>第三排
对于这里的两个单元格，我们都设置了宽度和填充。 它们完全相同，因此细胞被均匀地分成两半。 除此之外，没有其他内容，因为单元格中充满了图像和一些关于它的文本。
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>第四排
这是迄今为止此 HTML 电子邮件模板中最具风格的部分。 正如您在下面的代码中看到的那样，发生了很多事情。 首先，整行都获得了新的背景颜色和文本颜色，以确保文本可见——就像在标题中一样。 第一个和第二个单元格及其内容都获得了相同的样式更改。 首先，单元格本身正在获得新的背景和文本颜色。 然后，其标题中的链接变为黄色。 最后，最后一段加了下划线，并添加了一些分隔页边距。 正如我所说，第二个单元格及其内容的样式完全相同。
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider"><tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider">第五行 - 页脚
最后是页脚。 这里几乎没有发生什么。 只是通过填充一些间距，就是这样！
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>最后的话
本教程有点长，但我希望您现在了解从头开始创建 HTML 电子邮件模板需要什么。 这不是一个复杂的概念，但它可能很乏味。 现在，轮到您开始制作外观精美的高端电子邮件了！ 您可以结合使用多种技术来创建电子邮件模板，使其更加独特。
本文由汉娜巴特勒撰写。 她是一名网络开发人员和设计师。 此外，她喜欢以文章的形式分享她的经验。 在这种情况下，她在 WriteMyPaper4Me.co 网站上有自己的部分。 未来，她将开始写博客，向他人介绍她的工作方法。