1

我的 html 新闻信函有一个主图像，我试图在某些位置的主图像顶部放置 5 个图像（图像按钮）。如果我将它们放在绝对位置，它在 Web 浏览器中显示时会呈现良好，只要我将 html 页面嵌入到电子邮件（outlook）中，图像就会被扔到一边。

当涉及到 html News Letters 时，最好的方法是什么？

任何建议将不胜感激。

4

2 回答 2

1

@user1475479 您可以使用VML创建背景图像，然后使用标准表格布局将图像按钮放在顶部，如下例所示。

另一种选择是使用一个大图像并使用图像映射，但这在电子邮件中是不好的做法，因为许多订阅者不打开图像，在这种情况下，您的电子邮件将是空白的，他们不会看到您的按钮。

最好和最常见的解决方案是将大图像分解成较小的图像，然后将其放在桌子上。这样，您可以为每个图像分配一个 alt 标签，因此如果订阅者不加载图像，它仍然保持其结构，人们仍然知道什么是什么以及在哪里点击。注意 - 添加 display:block; 非常重要；任何时候只要它们单独在表格单元格中，就可以添加到您的图像中。

@lukeocom - 您的示例存在一些问题，我没有编辑您的回复，而是在下面重建了它。您的图像都需要拥有style="display:block;"，并且以像素为单位设置宽度和高度可能会更好。此外，您需要将所有颜色声明为 6 位十六进制代码，并且在 html 声明中您不需要包含 px（仅在 css 中需要）。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#959595">
<tr>
    <td colspan="3" width="600" bgcolor="#757575">
        <a href=""><img src="yourHeader.png" alt="Header" style="margin: 0; border: 0; padding: 0; display: block;" height="100"  width="600"></a>
    </td>
</tr>
<tr>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
    <td width="500" valign="top" style="padding:20px;">
      <font style="font-family: Century Gothic, Avant Garde, sans-serif; font-size: 14px; color: #000000;">
        PUT YOUR CONTENT HERE
      </font>
    </td>
    <td width="50" style="vertical-align: top;background-color:#555555;">
        <a href=""><img src="sideBars.png" style="margin: 0; border: 0; padding: 0; display: block;" alt="" height="200" width="50"></a>
    </td>
</tr>
<tr>
    <td colspan="3">
        <a href=""><img src="yourFooter.png" alt="Footer" style="margin: 0; border: 0; padding: 0; display: block;" height="100" width="600"></a>
    </td>
</tr>

如果你想让整个东西居中浮动，把它包起来：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding:30px;">

PUT THE ABOVE TABLE IN HERE

</td></tr></table></td></tr></table></body></html>

我使用 html strict 而不是 xhtml，但工作原理相同减去自关闭 img 标签。

于 2013-02-22T14:24:09.190 回答
0

过去一周我刚刚在一封电子邮件上度过了，真是太痛苦了！我发现 html 电子邮件的最佳方法是使用表格布局。有很多标签不适用于电子邮件。每个电子邮件客户端都有很多不同的呈现方式。Outlook是我最讨厌的！

如果您使用的图像上没有任何链接，则使用 Photoshop 创建页眉和页脚横幅，然后使用您的表格布局显示它们。也使用内联样式，因为有时不支持 id 或类名。最好是安全...

按行排列的示例表格布局为：

|header image|
|side bar image(optional) | content (can use another table here) | side bar image|(optional)
|footer image|

这是一个温度..

<table style="font-size:10pt;background-color: #fff; width:600px;max-width:600px;overflow:hidden; margin: 0px auto; padding: 0px;border-collapse:collapse;border:0;">
    <tr>
        <td colspan="3" width="600px">
            <img src="yourHeader.png" alt="" style="vertical-align:bottom;" height="100%"
            width="100%" />
        </td>
    </tr>
    <tr>
        <td width="50px" style="vertical-align: top;background-color:#fff;">
            <img src="sideBars.png" alt="" height="100%" width="100%" />
        </td>
        <td width="500px" style="background-color:#fff;padding-left:20px;padding-right:20px;">PUT YOUR CONTENT HERE</td>
        <td width="50px" style="vertical-align: top;background-color:#333399;">
            <img src="sideBars.png" alt="right image" height="100%" width="100%" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="yourFooter.png" alt="Bottom banner image" style="vertical-align:top;"
            height="100%" width="100%" />
        </td>
    </tr>
</table>

一些进一步的阅读...

Outlook CSS 和标签支持 - http://msdn.microsoft.com/en-us/library/aa338201.aspx

一般 html 电子邮件提示 - http://www.verticalresponse.com/sites/www.verticalresponse.com/files/html_tips_for_email_guide.pdf

希望这可以帮助..

于 2013-02-22T01:08:47.853 回答