| 文章簡介：從頭開始構建一個HTML電子郵件模板. |
demodownload
最好的理解方式就是從頭開始自己動手實施的過程。今天，我們要做的只是用於電子郵件設計，從頭開始構建一個HTML電子郵件模板。
正如我們前面的教程中討論的一樣，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>
接下來我們可以開始構建其餘的結構。
如果屬性存在於HTML，可以用來替代CSS的樣式。
現在在表格容器內放置一個600px寬度的表格，並且讓他置中。600px是一個安全的最大寬度，使用你的郵件在案頭和Web郵件用戶端在大多數的螢幕解析度下顯示的最舒服。
使用寬度的屬性替代CSS來設定這個寬度。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 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> Hello! </td> </tr> </table> </td> </tr> </table>
我們已經添加了一個內聯樣式，設定border-collapse的屬性值為collapse。如果我們不這樣做，新版本的Outlook將會給我們的表格與邊框之間添加一個小的空間距。
現在根據設計給他們設定顏色。bgcolor是有效HTML 屬性，我們使用這個屬性來替代CSS的background-color屬性來設定背景顏色。永遠記住要使用完整的6個完整的十六進位編碼，如果使用三個簡寫字元，不總是有效。
<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)，然後插入我們需要的映像。
還請注意，在td標籤上使用padding還算是安全的，但在div或p標籤上，他們表現得更加不可預測。
因此，我們將使用一些行內CSS給儲存格添加內距padding。然後，我們將插入我們的圖片，添加alt屬性文本和style="display:block;"，這個是一個常用來修複一些電子郵件用戶端圖片下面空白間距。我們通過在td標記中添加align="center"將映像置中顯示。我們還將添加一個重要的alt標籤，因為我們郵件載入之後，在多數情況下，圖片是關閉的。
注意：如果你的頭部的內容很重要，在頭部中不要僅僅使用一個映像。記住，大多數郵件用戶端把映像關閉，所以，要是你的電子郵件很重要，不要使用圖片載入進來。在這個例子中，我們的頭部是非常多餘的。
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> <img src=http://www.webjx.com/css/"images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> </td>
現在我們給主內容添加一個三行的表格——一行是頭部，一行是內容介紹和包含兩列的一行。我們把表格的寬度設計為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=http://www.webjx.com/css/"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=http://www.webjx.com/css/"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;覆蓋映像的像素值，我們可以通過添加一個類來這樣做。當我們設定寬度為百分比，我們不需要重新覆寫。因為越少的東西需要覆蓋，越更好。
在這個儲存格這，我們將嵌套一個兩列的表格。
<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=http://www.webjx.com/css/"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=http://www.webjx.com/css/"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>
到此，我們的整個布都完成了。
接下來我們通過Litmus來進行測試，以確保我們的電子郵件能正常工作。下面是我測試的總結：
我也會給其他儲存格添加內聯樣式，來美化文本：
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
接下來我們需要給頁尾文本寫樣式，交且我們也將會整理我們的退訂連結。我們同時使用CSS樣式和HTML的<font>標籤來修飾退訂連結。使用這兩種方式是最好的，確保你的連結從不出現預設的藍色。
<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;">
就是這樣的！你只需要做最後的測試了。
譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載，煩請註明出處：
英文原文：http://dev.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770
中文譯文：http://www.w3cplus.com/css/build-an-html-email-template-from-scratch.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
