使用Inline HTML发送电子邮件给没有CSS的页面（调整大小/表零件/可单击的图像问题）

发布于 2025-02-13 12:34:43 字数 3760 浏览 1 评论 0原文

我正在尝试从特定的背景设计中制作电子邮件页脚，但仅使用Inline HTML而不使用CSS样式。找到了一个解决方案，您可以编辑Outlook在这种情况下使用的.htm文件（位于C：\ Users [user] \ AppData \ Roaming \ Microsoft \ Signatures）和粘贴其他代码。背景图像是在CS6 Photoshop中制作的，其中更改了电子邮件/电话信息并导出。设计无法更改，因为它已经从上面接受了，因此我必须处理我得到的东西...上面的图像包含4个图标，以适用于必须是链接的适当社交媒体。另一方面，如果您在电话上看到一条消息，则必须很大。

我尝试过：

切碎所有图像并将它们正确地放在一个使用TR/TD的URL背景图像的桌子上，并使用边距/padding = 0 = 0，但是当我将其发送到例如Gmail时，它看起来还不错，例如Gmail完全崩溃了。。
**第一列是rowspan =“ 3”，对应于图像中提供基本信息的图片[零件：1] **上部为colspan =“ 6”，以提供一个具有信息值的大空间[部分：2] **中间部分是5次＆lt; a href =“ [link]”可点击图标[零件：3-6] **下面使用的colspan =“ 6”，用辅助信息值[零件：7]

带有标记零件的图像。 image_parts

页脚应该看起来像这样： footer_one_image

代码

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border: 1px solid black;
}
table { 
        background: url("https://i.postimg.cc/xCr58mYc/przyk-adowa-stopka.jpg") no-repeat;
        width: 1200px;
        height: 400px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td rowspan="4" width="332"></td>
    <td colspan="6" height="250"></td>
  </tr>
  <tr>
    <td width="10">
      <a href="https://google.com"></a>
    </td>
    <td width="63" height="50">
      <a href="https://www.facebook.com/"></a>
    </td>
    <td width="63" height="50">
      <a href="https://www.youtube.com/">
    </td>
    <td width="80" height="50">
      <a href="https://www.instagram.com/"></a>
    </td>
    <td width="63" height="50"></td>
    <td colspan="2" height="50"></td>
  </tr>
  <tr>
    <td colspan="6"></td>
  </tr>
</table>

</body>
</html>

我尝试用于上图的从photoshop生成的作为.htm文件（我删除链接），但是当放置在Outlook中时，我将其发送到任何其他邮件网络服务时崩溃。

<html>
<head>
<title>stopka 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (stopka 1.psd) -->
<table id="Tabela_01" width="1200" height="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3">
            <img src="" width="339" height="400" alt=""></td>
        <td colspan="4">
            <img src="" width="861" height="250" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="">
                <img src="" width="86" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="67" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="89" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="619" height="78" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="" width="861" height="72" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

我如何在我有点失败的地方写这篇文章。感谢您提供的任何建议/信息。祝你今天过得愉快。

原文

I'm trying to make an email footer from a specific background design but using only inline HTML without using CSS styles. Found a solution that You can edit the .htm file used by Outlook in this case (located in C:\Users[user]\AppData\Roaming\Microsoft\Signatures) and paste other code. Background image is made in CS6 Photoshop where email/phone information is changed there and exported. The design cannot be changed cause it has been accepted from above so I have to work with this what I got... Above image contains 4 icons to proper social media which have to be links. On the other hand, it has to be sizeable if You see a message for example on phone.

I tried:

to chop every image and place them properly on one table with background-image from url using tr/td and using margin/padding=0 but while it looks ok on Outlook when I send it to for example Gmail it completely shatters...
making one image with the above options as well and adding colspan/rowspan to merge cells for example 3x6 table where:
** first column is rowspan="3" corresponding to this vertical line in an image where basic informations are provided [part: 1]
** upper part as colspan="6" to make one big space with information values [part: 2]
** middle part is 5 times <a href="[link]" for clickable icons [part: 3-6]
** below part used once more colspan="6" to make big space with secondary information values [part: 7]

Image with marked parts.
Image_parts

Footer should looks like this:
Footer_One_Image

Code which I tried to use for above image:

<!DOCTYPE html>
<html>
<head>
<style>
th, td {
  border: 1px solid black;
}
table { 
        background: url("https://i.postimg.cc/xCr58mYc/przyk-adowa-stopka.jpg") no-repeat;
        width: 1200px;
        height: 400px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td rowspan="4" width="332"></td>
    <td colspan="6" height="250"></td>
  </tr>
  <tr>
    <td width="10">
      <a href="https://google.com"></a>
    </td>
    <td width="63" height="50">
      <a href="https://www.facebook.com/"></a>
    </td>
    <td width="63" height="50">
      <a href="https://www.youtube.com/">
    </td>
    <td width="80" height="50">
      <a href="https://www.instagram.com/"></a>
    </td>
    <td width="63" height="50"></td>
    <td colspan="2" height="50"></td>
  </tr>
  <tr>
    <td colspan="6"></td>
  </tr>
</table>

</body>
</html>

Also I tried using this one which chopped images generated from photoshop as a .htm file (I deleted links) but when placed in outlook looks fine - while I send it to any other mail webservice it collapses.

<html>
<head>
<title>stopka 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (stopka 1.psd) -->
<table id="Tabela_01" width="1200" height="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3">
            <img src="" width="339" height="400" alt=""></td>
        <td colspan="4">
            <img src="" width="861" height="250" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="">
                <img src="" width="86" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="67" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="89" height="78" border="0" alt=""></a></td>
        <td>
            <a href="">
                <img src="" width="619" height="78" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="" width="861" height="72" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

How I can manage to write this where I'm kinda pretty much failing. Thank You for any advice/information. Have a nice day.

分享到QQ

分享到微博