有一點我需要你特別注意：圖像非常適合電子郵件，只要它們是 a：尺寸小並且 b：有一個很好地描述它們的 alt 標籤。 我相信您知道，為了在電子郵件中顯示圖像，該電子郵件的收件人必須允許圖像顯示。 如果他們不這樣做，就沒有什麼可以告訴他們應該期待什麼。 如果您不為盲人用戶提供描述，這也是一個可訪問性問題。 然而，那是另一回事了。 所以，教訓是：總是使用帶有 alt 標籤的小圖片！
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>
內聯樣式
我們要做的最後一件事是為這個 HTML 電子郵件模板提供內聯 CSS 樣式。 這就是使電子郵件出現的原因，正如您到目前為止看到的那樣，這封電子郵件看起來一點也不漂亮。 我會將這部分分成小塊，這樣它就不會變得過於龐大。
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>
第四排
這是迄今為止此 HTML 電子郵件模板中最程式化的部分。 正如您在下面的代碼中所看到的，發生了很多事情。 首先，整行都獲得了新的背景顏色和文本顏色，以確保文本可見——就像在標題中一樣。 第一個和第二個單元格及其內容都進行了完全相同的樣式更改。 首先，單元格本身獲得了新的背景和文本顏色。 然後，其標題中的鏈接變為黃色。 最後，最後一段被加了下劃線，為了增加一些分隔，也添加了邊距。 正如我所說，第二個單元格及其內容得到了完全相同的樣式化。
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
最後，頁腳。 這裡發生的事情很少； 通過填充只是一些間距，就是這樣！
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
最後的話
本教程有點冗長，但我希望您現在了解從頭開始創建 HTML 電子郵件模板需要什麼。 這不是一個複雜的概念，但它可能很乏味。 現在，輪到您開始製作外觀精美的高端電子郵件了！ 您可以結合多種技術來創建電子郵件模板，使其更加獨特。
