制作在email中显示的html文件

最新推荐文章于 2023-08-16 13:04:00 发布

newBunny

最新推荐文章于 2023-08-16 13:04:00 发布

阅读量2.8k

点赞数

分类专栏： email table

email 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

table

1 篇文章 0 订阅

订阅专栏

出自：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails 作者:Tessa Thornton

译文：http://www.w3cplus.com/css/getting-started-with-html-emails.html 译者：大漠

HTML Mail介绍

作为Web开发人员，编写HTML电子邮件是一件非常具有挑战性的任务，我们也必须得处理。幸运的是，当我的第一个客户要求我设计和编写一个HTML电子邮件的通知，他耐心的陪我渡过整个编写过程，让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运，所以本教程可以帮你做好一切的准备。

电子邮件客户端的问题

你认为IE很痛苦。等你见到Outlook2007，你就不这么认为了。因为电子邮件客户端渲染HTML/CSS有巨大差异，在许多流行的电子邮件客户端使用现代编码技术让布局相当的混乱。电子邮件客户端和浏览器渲染HTML不一样——甚至在许多情况下不一样。浮动、背景图像，甚至是外距不再是你编写代码的一些词汇。所以你应该怎么编码呢？

解决文案：代码像1997年的一样

这是正确的。table、cellpadding、cellspacing、colspan，所有这些你以为你可以使用。格式是电子邮件唯一布局的方法，所以你暂时要忘记你喜欢的CSS方式和你想要的语义化，这样只会让表格更混乱。

步骤一：电子邮件设计

保持简单

当设计一个HTML电子邮件时，请记住保持简单。我们今天使用的设计是一个多列布局，主要是出于演示的目的，但电子邮件布局的时候，编码的时候考虑坚持两列布局，这样能为您省去很多麻烦的事情。

减少图像的使用

记住你的设计不能太花哨，因为Outlook不支持背景图像。事实上，根据客户的需求，你可能想跳过Photoshop的过程，强迫自己完成一个实用型的电子邮件设计。也就是说，在这里我们将使用Photoshop，这样你就可以更好的理解我们要做的事情。

如果邮件是清晰的或者不用没有什么影响的，你可以使用背景图片来装饰。例如，我们要给邮件头部添加一个渐变的效果，如果它不会显示，但这也没什么大不了。

窄屏最好

因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度，你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条。

保持一致

记住，我们使用固定的元素属性cellpadding和cellspacing设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的。

我们的设计

这个设计类似于去年夏天我的客户的一个电子邮件通知的设计，他非常的简单。这虽然不是很好看，但这并不很重要。他非常简单一致，有许多布局选项，这样你就可以看到他们是不同的。

步骤二：规划我们的代码

以我的经验来看，HTML电子邮件代码变得非常的复杂，非常的快速。重要的是要有一个可行性计划。这里是我们的计划(我们会回来的，如果你没有遵循，不用担心)。

首先，我们先要设置一个宽度为100%的灰色背景，这是我们的表格容器。

接下来，请注意表容器里有三个单独的表格：一个在顶部，放置“浏览器中查看”的链接，中间的表格放置主要内容和一个度部的表格，用来放置“邮件退订”链接。

开始制作HTML Email

最后，在主表格中，每个水平区域的内容都放置在表格的行或单元格里。也就是说，表格的每个单元格都包含了每一个内容。

开始制作HTML Email

`cellpadding`和`cellspacing`

我们将使用HTML的cellpadding和cellspacing属性来替代CSS的margin和padding属性。

cellpadding和CSS的padding几乎是一样的——用来设置内容周边的空白空间。cellspacing是用来设置表格单元格与单元格之间的间距。

#main表格设置了15px的cellspacing，这样我们的主内容周围就有15px的空白间距，每个水平组之间有15px间距。cellpadding和cellspacing仅仅适用于父表格，而不适合每一个单元格。如果我们不希望有单元格边距或单元格间距，我们只需要给每个表格指定他们的值为0。

步骤三：开始编码

现在我们可以一段一段的为我们的电子邮件开始编码。与最佳实践相反，我们将要单独的给每个结构添加样式。我们将从布局开始，包括所有的间距和内距，背景颜色，之后我们要写排版和其他的CSS样式。

设置

设置电子邮件很简单：只包括了html、head和body标记。让我们在表容器中放置我们之前讨论的三个主要表格。

对于DOCTYPE布言，有几种不同的方法，在这文章中做过详细的介绍。在我们的这个例子中，我决定不使用任何文档类型，因为我们不需要任何DOCTYPE声明的任何东西。在大多数情况下，电子邮件客户端会删除我们自定义的DOCTYPE类型。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Nettuts Email Newsletter</title>
    </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4">
            <tr>
                <td>
                    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- top message -->

                    <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
</table><!-- main -->

                    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- bottom message -->
                </td>
            </tr>
        </table><!-- wrapper -->
    </body>
</html>

注意两个信息的表格设置了cellpadding值为20px。这将设置了主内容中段落的空间。主表格设置了15px的cellspacing。这是为了在垂直方向有一个间距。因为每个部分都放置在表格的单元格里，他们之间设置了一个15px的间距。

还要注意，表格都设置了align="center"和我们都定义了表格的宽度。在HTML电子邮件中，一般最好不要给表容器定义宽度。你最好为每个单元格定义宽度，但在这种情况下，我们将打破这个规则，因为我们担心表格有cellspacing和cellpadding。

一般而言，指定表格单元格宽度要比指定表格自身宽度要好。

信息表格

这些非常简单：段落在单元格中居中显示。

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
    <tr>
        <td align="center">
            <p>Trouble viewing this email? <a href="#">View in Browser</a></p>
        </td>
    </tr>
</table><!-- top message -->

底部的信息表格和这个完全一样。

头部

头部非常简单，有三行，每行一列。因为我们表格有蓝色背景，我们需要给每个表格的单元格设置一些内距，让文本不挨着边框。

<tr>
    <td>
        <table id="header" cellpadding="10" cellspacing="0" align="center">
            <tr>
                <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
                <td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
            </tr>
            <tr>
                <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
            </tr>
        </table><!-- header -->
    </td>
</tr><!-- header -->

记得要设置每个单元格的宽度，在本例中是570px（600px - 两边单元格各15px）。我们还设置了align属性为right，让日期向右对齐。现在，我们还没有添加背景图片，不过我们稍后会这么做。同时我们给单元格设置浅蓝色背景。

请注意，我们使用bgcolor来替找style="background:"。这是因为在电子邮件客户端中HTML属性要比CSS样式更好。

开始制作HTML Email

到目前为止，这样看起来很糟糕，但布局正是我们想要的。

内容区域——两列

我们的第一部分内容是图像居左，图像右边有两个标题。这里不使用常用的CSS浮动，我们在这里使用一个具有三个单元格的表格：

第一个放置图像
第二个用来制作图像与标题之间的间距
最后一个放置标题

开始制作HTML Email

图像有边框效果，我们将在单元格内嵌套一个表格，前且设置表格的cellpadding="5"，同时给他设置一个灰色的背景色。cellpadding增加了元素的宽度，所以我们在定义单元格宽度的时候需要减云10px。

<tr>
    <td></td>
</tr>
<tr>
    <td>
        <table id="content-1" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="170" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="375" valign="top" colspan="3">
                    <h3>All New Site Design</h3>
                    <h4>It's 150% Better and 40% More Efficient!</h4>
                </td>
            </tr>
        </table><!-- content 1 -->
    </td>
</tr><!-- content 1 -->

注意：

我们添加一个空行。因为我们内容有15px的间距，我们使用一个空的单元格来制作这个间距。在我的测试中，这个空格没有问题，但你最好在单元格中添加一个空白的符号 
我们也给单元格设置了align属性值为top，让单元格内容垂址方各，顶端对齐。这个很重要，因为单元格垂直方向的align默认值为middle，这样将会导致一些奇怪的结果。
我们使用的虚拟图像来自于dummyimage.com,因为电子邮件客户只支持服务器上的图像，这样做更容易让图片显示。看看这个网站，它解释了如何让你通过URL地址来指定你需要的图像。

内容区域——一列

这一部分真的很简单：单列的表格里面放了一个段落。不要忘记了设置单元格的宽度和设置表中心对齐。

<tr>
    <td>
        <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="570"><p>Lorem ipsum dol...</p></td>
            </tr>
        </table><!-- content-2 -->
    </td>
</tr><!-- content-2 -->

分割器

添加垂直空间的单元格间距(超过15px)时，我们必须使用一个图像来模拟制作间隔。就像90年代一样！我们可以使用一个空白的gif，但目前只需要使用一个虚拟的图像，你可以看到一开始是灰色的，但后来我们把设置成白色的。

<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>

效果如下图所示：

开始制作HTML Email

内容区域——三列

对于三列内容区域，我们使用一个具有五个单元格的表格，每一个单元格为一列，两列之间的单元格用来制作间距。

开始制作HTML Email

<tr>
    <td>
        <table id="content-3" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table><!-- content-3 -->
    </td>
</tr><!-- content-3 -->

很简单，使用前面介绍的方法一样，实现边框效果。别忘记了给单元格添加align="top"。

三个文本列制作是相同的。

<tr>
    <td>
        <table id="content-4" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <h5>Exciting New Products!</h5>
                    <p> Ut enim ad minim veniam, ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>A Newsletter Every Month</h5>
                    <p>Excepteur sint occaecat ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>New and Improved Forum</h5>
                    <p>Lorem ipsum dolor sit ...</p>
                </td>
            </tr>
        </table><!-- content-4 -->
    </td>
</tr><!-- content-4 -->

使用前面介绍的方法，在底部添加另一个分隔器。

开始制作HTML Email

其他

一切只是重复我们已经做好的两列内容和一列内容。

<tr>
    <td>
        <table id="content-5" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="267" valign="top">
                    <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0">
                        <tr>
                            <td>
                            <img src="http://dummyimage.com/267x200/e9e9e9/fff" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="278" valign="top">
                    <h4>This is a heading</h4>
                    <p>Lorem ipsum dolor sit...</p>
                </td>
            </tr>
        </table><!-- content-5 -->
    </td>
</tr><!-- content-5 -->
<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
    <td>
        <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <tr>
                </td>
                    <p align="center">Lorem ipsum dolor si... </p>
                    <p align="center"><a href="#">CALL TO ACTION</a></p>
                </td>
            </tr>       
        </table>
    </td>
</tr>

主内容的布局到此就完成：

开始制作HTML Email

图片的使用

与常规的Web页面不同，你不能把图片都放在一个文件夹中，然后使用相对路径链接这些图片。所有的路径必须是绝对的。当我开发一个电子邮件时，我通常把图片放在一个子域下或Amazon S3。当我准备发送邮件到电子邮件客户端时，我将所有的图片放到网站的子域名下。

所有图片路径必须是绝对路径。

步骤四：美化电子邮件

我们不能将外部的样式表嵌入到电子邮件中，因为有些电子邮件客户端会删除整个<head>中的标签，或者忽略<style>标签。我们要使用内联样式是一件痛苦的事情。幸运的是，有相关服务可以帮助我们将嵌入的CSS变成内联样式。我使用的是一个名为Premailer网站，你可以直接把代码粘贴到里面，它会将样式嵌入到行内中。

在本教程中，我们先把要嵌入的CSS写在<style>标签内，然后我们将使用Premailer将样式转换到行内。

Premailer将需要的CSS嵌入到行内。

重置基本样式

我们不会在你喜欢的页面中强硬的使用*选择器来重置样式。因为使用默认的值会让效果更佳一致。唯一的就是我们需要重置元素（如我们的标题和段落）的margin和padding，让元素周围空间一致(如cellpadding/cellspacing)。

您还将注意到表容器周边有一个空白的间距，这是body元素默认的样式。

<style type="text/css">
    body, #header h1, #header h2, p {margin: 0; padding: 0;}
</style>

排版

对于电子邮件的排版没有什么很特别，因为它和Web页面的文字排版几乎是一样的。不要使用简写的声明(如，font)，因为在不同的电子邮件客户端会产生不一致的结果。

#top-message p, 
#bottom-message p {
    color: #3f4042; 
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif; 
}
#header h1 {
    color: #ffffff; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 24px; 
}
#header h2 {
    color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
}
#header p {
    color: #ffffff; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 12px;  
}
h3 {
    font-size: 28px; 
    color: #444444; 
    font-family: Arial, Helvetica, sans-serif; 
}
h4 {
    font-size: 22px; 
    color: #4A72AF; 
    font-family: Arial, Helvetica, sans-serif; 
}
h5 {
    font-size: 18px; 
    color: #444444; 
    font-family: Arial, Helvetica, sans-serif; 
}
p {
    font-size: 12px; 
    color: #444444; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.8em 0;
}

现在这样看起来，效果更好：

（ps: 不过我觉得还是尽量内联比较好，比如亲测qq邮箱，style标签里的样式是无效的）

背景图片

背景图像在一些电子邮件客户端不能正常显示，如果你需要使用背景图片，最好提供一个备选颜色，把他们应用到一个单元格上。这样一来，不支持显示背景图片的客户端将会显示背景颜色。

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:>
    <h2>News and Events</h2>
</td>

各种各样的其他样式

我们需要给每个链接根据客户需要重新设置样式，用来覆盖电子邮件客户默认的样式，并给主体表格设置一个边框。我也还要给图片添加一个display:block，用来解决Outlook和Hotmail电子邮件客户中图片底部增加空白间距的问题。

确保所有图片添加display:block，以防止Outlook和Hotmail电子邮件客户端产生一个怪异的margin。

#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}

我们完成了比较容易的部分。现在我们需要测试我们制作的电子邮件。

步骤五：测试

（PS：Mailchimp测试，在check email这步就截止了，怎么都点不过去，所以有小伙伴做的时候注意下这个问题）

电子邮件的测试过程是非常重要的，也是最让人讨厌的。处理电子邮件的时候，在每个阶段我都常测试，这样我就可以确定有什么差错。有很多客户测试和大量的方法来测试他们，让我们去结束这一切吧。

电子邮件客户端

下面这些电子邮件客户端，你应该都需要测试：

Outlook2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

怎么测试

我们首先需要找到一种方法发送制作好的HTML电子邮件。你的客户可能会像Mailchimp和Campaign Monitor测试电子邮件或发送电子邮件。

你可能认为没有必要这么复杂化，你可能认为只需要将HTML代码粘贴到电子邮件客户端发送即可。然而，这可能导致在不同的电子邮件客户端有不同的结果。所以为了有一个好的应用，测试是必不可少的。

使用Mailchimp测试

我的首选方案是使用Mailchimp进行测试和发送电子邮件。Mailchimp有一个免费发送500人的版本，这样你就不需要支付测试的费用。它有一个简单易用的界面，这里有一个快速操作的介绍：

注册一个免费的Mailchimp的账户，并添加一个测试电子邮件账户的收件人列表：Hotmail、Yahoo!和Gmail等，登录到您的新账户。
在你的账户主界面选择创建一个活动并选择常规的。填写基本信息，你需要的只是一个用于测试的一个名称。
在设计页面，选择Import -> 粘贴代码，确保您选择了自动的CSS inliner选项。
如果你不使用Mailchimp,确保您使用Premailer将CSS转换成内联。
直到你确认了并选择发送测试。从这里您可以发送一些测试，但在那之后，你需要一个实际发送电子邮件的列表。

使用litmus测试

Litmus是一个Web应用程序，可以测试HTML电子邮件在各种各样版本下的电子邮件客户端。需要全方位的服务，你需要付费，你可能无法说服你的客户支付这笔测试费用，但他的免费版本仍然允许您在Outlook2003和Gmail上做测试。

清理这个烂摊子

经过全面的考虑，这是一个非常成功的测试，因为我们测试了Outlook和Gmail下的很多元素。我们与老的Gmail和Hotmail的问题相关的客户使用默认样式表。我们使用!important覆盖了标题自带的绿色文本效果。有时候这些效果真的让我们要疯了。

为了解决这个问题，我们需要给我们带有绿色标题元素添加!important重新设置，覆盖默认的样式。

h3 {
    font-size: 28px; 
    color: #444444 !important; 
    font-family: Arial, Helvetica, sans-serif; 
}
h4 {
    font-size: 22px; 
    color: #4A72AF !important; 
    font-family: Arial, Helvetica, sans-serif; 
}
h5 {
    font-size: 18px; 
    color: #444444 !important; 
    font-family: Arial, Helvetica, sans-serif; 
}

在老的Gmail邮箱中有一个类似的问题，Gmail会给标题标签底部添加一个margin。我们只需要覆盖margin-bottom样式即可。

#header h1 {
    color: #ffffff !important; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 24px; 
    margin-bottom: 0!important; 
}
#header h2 {
    color: #ffffff !important; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
    margin-bottom: 0 !important
}

我们修复hotmail下的效果

开始制作HTML Email

所以有一个实用的，一致的HTML电子邮件。这是一件痛苦的事情，但是你得到一个系统就要快得多。尽量保持你的代码有注释和组织结构清晰，以便你以后可以重用。

如果你能说服你的客户注册Litmus之类，让你变得更容易。你也可以通过Mailchimp和Campaign monitor更多版本来做测试。

排除故障

你肯定还会遇到我这里没有提到的问题，但我有一些建议可以帮助你更好的排除这些故障：

检查你的数学：我不记得有多少次是因为计算出错，增加了单元格宽度而搞砸了我的布局。记得占用的单元格边距：他会增加你单元格的宽度。
检查默认样式表：使用类似Firebug或Webkit的检查工具来检查是否客户端会覆盖你的样式。如果发生这种情况，添加一个!important声明，应该可以帮助你解决问题
搜索查找，总是有人经历过你碰到的问题。如果Google帮不了你，试着找一些技术博客和流行的电子邮件客户端的博客，他们可能知道这些东西。
将其分解：如果你找不到你的问题出在哪，加到最开始，一点眯地查看你的电子邮件，直到你找到问题所在。