1

テンプレートを使用して、会社の HTML ニュースレターを作成しました。私はプログラミング言語の知識がほとんどないため、テンプレートから始めました。仕事用のメール アドレス (Outlook 2010) と個人用のメール アドレス (gmail) にいくつかのテストを送信しました。私のGmailでは見栄えがしますが、見通しでは、ニュースレターのタイトルを「フォーカス」という単語の下に「ニュース」という単語を少しずらして、実際には左下に少しずらして配置することにしました。私の言いたいことを理解するには、この画像を見てください:画像
コードを変更して、Gmail で表示されるのと同じように Outlook で表示されるようにする方法を知りたいのですが、すべて 1 行で表示されますか?

また、以下に示したコードが多すぎるかどうかもわかりません。または十分ではない、私が知っているのはタイトル部分がそこにあるということだけです、完全な初心者のための助けは大いに感謝されます

<div id="SpeBkDiv" style="background-color: #ffffff;">
<!--100% body table-->
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody>
         <tr>
             <td>
             <!--email container-->
             <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                 <tbody>
                     <tr>
                         <td>
                         <!--header-->
                         <table border="0" cellpadding="0" cellspacing="0" width="600">
                             <tbody>
                                 <tr>
                                     <td valign="top">
                                     <img src="image url here" alt="" height="12" width="600" />
                                     <!--top links-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="52" width="600">
                                         <tbody>
                                             <tr>
                                                 <td valign="middle" width="221">
                                                 <p style="font-size: 10px; font-family: Times New Roman; color: #333; margin: 0px;" align="center"><br />
                                                 </p>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                     <!--/top links-->
                                     <!--line break-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="14" width="600">
                                         <tbody>
                                             <tr>
                                                 <td valign="top" width="600">
                                                 <p>
                                                 <img src="image url here" alt="" height="10" width="600" />
                                                 </p>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                     <!--/line break-->
                                     <!--header content-->
                                     <table border="0" cellpadding="0" cellspacing="0" height="168" width="600">
                                         <tbody>
                                             <tr>
                                                 <td>
                                                 <h1 style="color: #333 !important; margin: 0px; font-weight: normal; font-size: 30px; font-family: Verdana" align="center">
                                                 <span style="font-size: 50pt; color: #808080;">
                                                 <a title="image name" href="image url here">
                                                 <img style="text-align: left; float: left;" alt="" src="image url here" align="left" height="79" width="103" />
                                                 </a>
                                                 </span>
                                                 </h1>
                                                 <h1 style="color: #333 !important; margin: 0px; font-weight: normal; font-size: 30px; font-family: Verdana;" align="center">
                                                 <span style="font-size: 45pt; color: #808080;">
                                                 <c>
                                                 <span style="font-family: Verdana; font-size: 40pt;">Focus News</span>
                                                 </c>
                                                 </span>
                                                 <span style="font-size: 50pt; color: #808080;">
                                                 </span>
                                                 <currentmonthname style="font-size: 36pt; color: #333333;">
                                                 <currentyear>
                                                 </currentyear>
                                                 </currentmonthname>
                                                 </h1>
                                                 </td>
                                                 <td id="issue" style="background-image: url('images/issue-no.jpg'); background-color: #98AFC7; background-repeat: no-repeat; background-position: top; width: 109px; height: 109px;" bgcolor="#98AFC7" valign="top">
                                                 <!--number-->
                                                 <table border="0" cellpadding="2" cellspacing="2" height="81" width="126">
                                                     <tbody>
                                                         <tr>
                                                             <td>
                                                             <div align="center">
                                                             <h4>
                                                             <span style="color: #ffffff; font-family: Verdana;">Issue no.7</span>
                                                             </h4>
                                                             </div>
                                                             <div align="center">
                                                             <h4>
                                                             <span style="color: #ffffff; font-family: Verdana;">July</span>
                                                             <span style="color: #ffffff; font-family: Verdana;">2012</span>
                                                             </h4>
                                                             </div>
                                                             </td>
                                                         </tr>
                                                     </tbody>
                                                 </table>
                                                 <!--/number-->
                                                 <br />
                                                 </td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
     </tbody>
  </table>
4

2 に答える 2

0

最初に試みることは、html を検証することです。http://validator.w3.org/checkにアクセスして、コードを貼り付けるか、html ファイルを参照してアップロードしてみてください。

于 2012-10-11T19:59:28.647 に答える
0

私はあなたのコードをテストし、Outlook2007 (私は最新バージョンを持っていません) でうまく動作します。私が見ることができるのは、Focus News の周りにタグが付いていることです。それらはおそらく Outlook によって誤って解釈され、行の先頭に余分なスペースが追加されます。また、ネストされた 2 つのスパンも奇妙に見えます。したがって、私の提案はこれらの行を変換することです:

 <span style="font-size: 45pt; color: #808080;">
    <c>
        <span style="font-family: Verdana; font-size: 40pt;">Focus News</span>
    </c>
 </span>

これに

<span style="font-family: Verdana; font-size: 40pt;">Focus News</span>

PSニュースレターは1999年にさかのぼる標準を使用しているため、前の回答で示唆されているように、コードを検証することはおそらく無意味です. .com/css/ )

于 2013-06-19T10:34:36.953 に答える