ホームページ >ウェブフロントエンド >htmlチュートリアル >Scratch_html/css_WEB-ITnose から HTML メール テンプレートを構築する
Scratch_html/css_WEB-ITnose から HTML メール テンプレートを構築する
- WBOYオリジナル
- 2016-06-21 09:15:535379ブラウズ
理解する最良の方法は、自分で最初から実装するプロセスです。今日は、メール デザイン用の HTML メール テンプレートを最初から作成するだけです。
この方法に従って会社の HTML メール テンプレートを作成しました。個人的にテストしましたが、非常に優れており、安定しています。 0 0!
何かをしました
まず、私が使用したリソースのいくつかについて言及する価値があります。
かわいい 2D アイコンは、Dribbble の Pierre Borodin によって提供されています。 使用されているフォントは、Oil Can、Source Sans Pro、および Mission Script によって提供されています。 ソーシャル メディア アイコンは、Metrize Icons によって提供されています。前のチュートリアルで説明したように、HTML メールには XHTML ドキュメント タイプが必要です。
<!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>Demystifying Email Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> </html>
次に、残りの構造の構築を開始できます。
本文と本文テーブルの作成
まず、6c04bd5ca3fcae76e30b72ad730ca86d タグから始まる一般的な構造をメールに追加します。予期しないスペースを避けるために、6c04bd5ca3fcae76e30b72ad730ca86d タグのマージンとパディングを 0 に設定します。
幅100%のテーブルも追加します。 6c04bd5ca3fcae76e30b72ad730ca86d タグは完全にはサポートされていないため、これはメールの実際の本文です。電子メールの本文に背景色を追加する場合は、本文タグではなく、大きなテーブル タグに背景色を適用する必要があります。
不必要なスペースを避けるために、セルのパディングとセルの間隔を 0 に設定します。
注: フレームのレイアウトを確認できるように、テーブルに border="1" を設定します。最後に、検索と置換を使用してそれらを削除します。
<body style="margin: 0; padding: 0;"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Hello! </td> </tr> </table> </body>
属性が HTML に存在する場合、それを使用して CSS スタイルを置き換えることができます。
次に、幅 600 ピクセルのテーブルを テーブル コンテナ 内に配置し、中央に配置します。 600 ピクセルは、デスクトップおよび Web 電子メール クライアントを使用するほとんどの画面解像度で電子メールを最も快適に表示できる安全な最大幅です。
幅を設定するには、CSS の代わりに width 属性を使用します。 HTML メール開発の黄金律は次のとおりです: HTML に属性が存在する場合は、CSS スタイルではなくタグ属性を必ず使用してください 。
このテーブルを使用してタイトル「Hello!」を置き換えます:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table>
これは少し混乱するかもしれませんが、最初のテーブルのタイトル「Hello!」を置き換えるには上のテーブルを使用してください
全体的なコードは次のとおりです:
| <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Hello! </td> </tr> </table> |
インライン スタイルを追加し、border-collapse 属性値を Collapse に設定しました。これを行わないと、新しいバージョンの Outlook では表と枠線の間に小さなスペースが追加されてしまいます。
構造とヘッダーの作成
このデザインでは、電子メールが 3 つの論理部分に分割されていることがわかります。そのため、各部分に行を作成します。
合計行数が 3 行になるように行を繰り返し複製してみましょう。各行をより簡単に識別できるように、行内のテキストを変更しました。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table> </td> </tr> </table>
次に、デザインに従って色を設定します。 bgcolor は有効な HTML 属性です。背景色を設定するには、CSS の背景色属性の代わりにこの属性を使用します。 常に 6 進数の完全な 16 進エンコーディングを使用することを忘れないでください。3 つの短縮文字を使用する場合、常に機能するとは限りません。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> <tr> <td bgcolor="#70bbd9"> Row 1 </td> </tr> <tr> <td bgcolor="#ffffff"> Row 2 </td> </tr> <tr> <td bgcolor="#ee4c50"> Row 3 </td> </tr> </table> </td> </tr> </table>
さて、最初の行に注目しましょう。セルのパディングを調整し、必要な画像を挿入します。
パディングの使用
電子メールでパディングを使用する場合は、常に各値 (上、右、下、左) を指定する必要があります。そうしないと、予期しない結果が生じる可能性があります。例:padding:10px 10px 8px 5px のように省略表現を引き続き使用できることがわかりましたが、問題がある場合は、たとえば:padding-top:10px;padding-right:10px;padding- のように個別に記述する必要があります。下:8px;パディング-左:5px;。
パディングの使用にさらに問題がある場合 (たとえば、電子メールの送信先のプラットフォームがすべての CSS スタイルを削除している場合)、パディングを使用しないでください。空のセルを使用して空のスペースを作成するだけです。セルに空の gif ファイルを使用する必要はありません。セルにインライン スタイル style="line-height:0;font-size:0" を追加し、セルに を入力してください。明示的な高さまたは幅を設定します。以下に例を示します:
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>
また、td タグでのパディングの使用はかなり安全ですが、div または p タグではより予測不可能な動作をすることに注意してください。
そこで、インライン CSS を使用してセルにパディングを追加します。次に、画像を挿入し、alt 属性テキストと style="display:block;" を追加します。これは、一部の電子メール クライアントで画像の下の空白を修正する一般的な方法です。 td タグに align="center" を追加して画像を中央に配置します。ほとんどの場合、メールの読み込み後に画像が閉じられるため、重要な alt タグも追加します。
注意：如果你的头部的内容很重要，在头部中不要仅仅使用一个图像。记住，大多数邮件客户端把图像关闭，所以，要是你的电子邮件很重要，不要使用图片加载进来。在这个例子中，我们的头部是非常多余的。
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
创建内容区域
首先，我们将会在中间的单元格中添加一些内距padding，按照我们的设计，表格周围有一些空间。
现在我们给主内容添加一个三行的表格??一行是头部，一行是内容介绍和包含两列的一行。我们把表格的宽度设计为100%而不是使用一个固定的像素值。因为这有助于我们实现一个响应式的电子邮件。如果你总是给每个东西的宽度设置具体的像素，你就需要要媒体查询中覆盖更多的样式。如果你嵌套的表格的宽度是基于百分比，当你调整父元素的宽度，一切都将相应的会调整。
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> <td> Row 3 </td> </tr> </table> </td>
现在，我们将添加内容，并给中间的单元格添加一些内距(padding)。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td style="padding: 20px 0 30px 0;"> Lorem ipsum dolor sit amet ... </td> </tr> <tr> <td> Row 3 </td> </tr> </table>
现在，我们要在第三行中添加两列内容。因为我们想要在两个单元格之间设置一个margin，但大家都知道表格是不支持margin，我们需要创建一个三列的表格，将一个空的单元格放在两列之间。
尽管我非常喜欢坚持使用百分比，但当你有一个特定大小的内容时，很难将它转换成一个百分比(在这个例子中，列设置为48.1%可能会混淆)。因为这个原因，我们有两个260px宽的图像，我们将创建260px的列，并在两列中间创建一个20px宽的空单元格。(总计是540px，这是因为我们总宽度是600px，减去两边填充的30px内距)。确保在间距的单元格中设置你的字体(font-size)和行高(line-height)为０和插入空白字符 。
我们还将给这两个单元格添加valign="top"，让内容垂直方向在顶部对齐。单元格垂直方向的默认值是middle。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> Column 1 </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td width="260" valign="top"> Column 2 </td> </tr> </table>
现在给这些列添加图像和内容。我们需要嵌套一个多行的表格，因为我们不能使用任何的colspan或rowspan标签。我们将给图像和内容之间添加一些内距，并将他们复制到另一列。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="260" valign="top"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> </td> </tr> <tr> <td style="padding: 25px 0 0 0;"> Lorem ipsum dolor sit amet... </td> </tr> </table> </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td width="260" valign="top"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> </td> </tr> <tr> <td style="padding: 25px 0 0 0;"> Lorem ipsum dolor sit amet, ... </td> </tr> </table> </td> </tr> </table>
这里我们使用HTML的width属性给图像设置宽度为列宽的100%。再次地，同样如此，如果我们的邮件是响应式，我们只需要使用媒体查询来改变父元素的宽度。我们将不得不用像素得写图像的高度，因为使用style="height:auto;"，目前并没有所有邮件客户端都支持(如Outlook)。因此我们把它们设置固定的像素值。这也意味着，我们必须在媒体查询中使用heihgt:auto !important;覆盖图像的像素值，我们可以通过添加一个类来这样做。当我们设置宽度为百分比，我们不需要重新覆写。因为越少的东西需要覆盖，越更好。
脚部
现在我们给脚部的行添加内距。
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> Row 3 </td>
在这个单元格这，我们将嵌套一个两列的表格。
<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </table>
接下来为社交媒体图标创建另一个小表格。设置他的父元素单元格align="right"。确保这些链接图片设置了border="0"(为了避免链接的蓝色边框)和不要忘记了给图片添加display:block;。
<td align="right"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://www.twitter.com/"> <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> </a> </td> <td style="font-size: 0; line-height: 0;" width="20"> </td> <td> <a href="http://www.twitter.com/"> <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> </a> </td> </tr> </table> </td>
现在我们添加文本和给这个单元格设置宽度，尽管他们之前有很多空白，但为了安全起见，将这个单元设置一个宽度为75%，其他的为25%。
<td width="75%"> ® Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>
到此，我们的整个布都完成了。
验证
我们通过W3C验证器进行验证，确保我们的代码没有问题。如果你代码没有问题，它会说，你已通过验证。
接下来我们通过Litmus来进行测试，以确保我们的电子邮件能正常工作。下面是我测试的总结：
文本样式
我们的第一行是一个标题，我们将使用a4b561c25d9afb9ac8dc4d70affff419标签来创建加粗文本，因为大家都知道，HTML属性能解决的样式决不使用CSS样式。
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> <b>Lorem ipsum dolor sit amet!</b> </td>
我也会给其他单元格添加内联样式，来美化文本：
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
接下来我们需要给页脚文本写样式，交且我们也将会整理我们的退订链接。我们同时使用CSS样式和HTML的240cb830ca84ebaabbd07850110b414d标签来修饰退订链接。使用这两种方式是最好的，确保你的链接从不出现默认的蓝色。
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> ® Someone, somewhere 2013<br/> <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly </td>
到此一切都有了，也是时间清除边框，让他看起来更漂亮。通过编辑器的“查找/替换”功能将border="1"替找成border="0"。
这样看上去它好像漂浮在白色的空间上，比较难看，所以我们去给第一个设置600px的表格添加：
style="border: 1px solid #cccccc;"
现在看上去不漂移了。最后，我给第一个单元格添加了底部为30px的内距，防止我们的邮件在某些邮箱客户端(如Apple Mail)突然停止了，另外添加10px的顶部内距，让我们的页头顶部有点空间。
<td style="padding: 20px 0 30px 0;">
就是这样的！你只需要做最后的测试了。
总结一下
到今天为止，如果你有使用任何评论，请摆脱他们。使用评论，一些电子邮件客户端会让你窒息，所以最明智的做法就是没有必要的代码不要出现在你文件的任何地方。
现在可以最后的测试，然后，你的HTML电子邮件就可以准备发送！
demo download