0

最初のメールテンプレートを作成していますが、質問があります。メールテンプレートの本文には、画像と説明(取引)が記載されたセクションがあります。フレームのデザインを台無しにすることなく、このコードを複製して、必要な数の取引を行えるようにしたいと思います。私がフォトショップでデザインをしたとき、私は2つの取引のためにそれを作りました。しかし、同じコードをコピーして貼り付けて3番目のコードを作成すると、デザインが削除されます。使用しているフレームの高さに関係があることはわかっていますが、これを解決することはできませんでした。Photoshopは、追加のコード(htmlコードの最後)を含むspacer.gifを使用していくつかのスペースを生成しました。削除するとデザインが崩れてしまいます。私に何ができる?

ありがとうございました、

ファン。

これがhtmlコードの例です:

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" height="900" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="5">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="5">&nbsp;</td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
        <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>


    </tr>
    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>
4

1 に答える 1

0

実際に発生している問題は、使用している行スパン属性に起因します。

<tr>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

</tr>

<tr>
    <td width="12" height="590" rowspan="5">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="5">&nbsp;</td>

</tr>

どちらも、メールの中央の両側に、それぞれ11行と5行の青と白の1列のスペースを作成します。

リストした各ディールはテーブルの2行であるため、新しいディールを挿入するときに、テーブルにさらに2行を追加します。これらの2つの行の色と間隔を同じにしたいので、色間隔の行をさらに拡張するように指示する必要があります。

<tr>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>

</tr>

<tr>
    <td width="12" height="590" rowspan="7">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="7">&nbsp;</td>

</tr>

追加または削除する取引ごとに、rowspan属性の値を2ずつ増減します。

必要に応じて、取引を独自のテーブル内の大きなテーブルの1行に配置することで、行スパンを毎回変更することを回避できます。このような:

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="2">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="2">&nbsp;</td>

    </tr>

    <tr> 
    <td colspan="3">
    <table border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>
             <td width="630" height="130" colspan="3">
            <img src ="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>
        <tr>
            <td width="630" height="130" colspan="3">
            <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>

    </table>
    </td>
    </tr>

    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>

そうすれば、囲んでいるテーブルに関する限り、すべての高さが1行しかないため、行スパンを変更せずに、必要に応じて取引を複製できます。

于 2013-03-17T01:56:36.740 に答える