我的HTML模板在Outlook中弄乱了



我有一个简单的html模板,当我在浏览器上预览时正常工作,但是当我尝试将其作为html作为新闻通讯发送时,它都弄乱了...背景图像根本没有显示,我的桌子被弄乱了,等等...

这是我的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>Untitled Document</title>
</head>
<body>
<table background="/images/background" width="727" border="0">
  <tr>
    <td width="48">&nbsp;</td>
    <td width="314">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/header.png" /></td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"><h1 style="color: white; font-family: Verdana, Geneva, sans-serif;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/footer.png" /></td>
  </tr>
</table>
</body>
</html>

背景图像是大多数电子邮件客户端中非常受支持的事情之一。gmail完全忽略了它们,您会发现的大多数黑客根本不值得遇到麻烦,因为它们即使在同一电子邮件客户端的不同版本之间也是不一致的。

您能做的最好的方法是尝试以简单地合成图像切片和背景标记颜色来实现令人满意的结果的方式重新排列您的布局。

也建议使用HTML电子邮件前服务或软件检查不同的电子邮件客户端中期望什么样的结果或结果。我个人最喜欢的是http://premailer.dialect.ca/。

如果将图像添加到电子邮件通讯中,请提供完整的URL。

<td colspan="4"><img src="/images/header.png" /></td>

将是

<td colspan="4"><img src="http://www.mysite.nl/images/header.png" /></td>

并非所有电子邮件客户端也都拍摄背景图像。我发现的解决方法通常是试图使它们成为正常的图像。如果可能的话。是否需要调整背景图像前面的文本?如果没有,请将其制作为您添加的单个图像。如果确实需要更改,也许它在图像的平淡部分?如果是这样,您可以围绕它进行切割,并使用背景色,这在电子邮件客户端提供了更多支持。如果两者都不正确,则可能需要调整设计。

确保所有彼此顶部的TR都具有相同数量的TD。否则会弄乱。

<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td> // This one has 4 TD's
</tr>
<tr>
    <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"></td> // This one has 3
</tr>
<tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2>
</td> // This one has 2
</tr>

如果要使用不同的测量/TD的数量,请与其他区域一样使用Colspan,或关闭桌子并打开一个新的。还要确保任何CSS都是内联的,但是您做到了。祝你好运!

您可以在http://www.campaignmonitor.com/css/

上检查浏览器支持和支持元素

当您说"将其连接到Outlook"时,这可能是问题。如果您不正确发送它,则什么都无法正常工作。

除此之外,如上所述,您需要绝对的图像链接(托管)才能出现。

您应该在所有表单元格上设置宽度(尤其是第一行),否则已知Outlook会弄乱它们。

也将您的颜色声明更改为6位十六进制,因此white应该始终为#FFFFFF

最新更新