如何使用 HTML 和 CSS 創建電子郵件模板？
已發表: 2020-02-10作為設計師和開發人員，有一天您的客戶會要求您為他們的各種時事通訊提供電子郵件模板。 我必須說，電子郵件模板並沒有那麼令人興奮，僅僅是因為對 HTML 和 CSS 的支持存在很大差距。 您可能會認為，在我們正在推進 HTML5 和 CSS3 的當今時代，情況並非如此。 但是，我很遺憾地說，在呈現電子郵件時，情況並非如此。
創建 HTML 電子郵件模板時要記住的第一件事是，所有 CSS 樣式都應該內聯完成。 在任何其他情況下，這是一個非常大的禁忌。 但是，因為對外部 CSS 甚至頭部 CSS 的支持很少，所以內聯是實現它的方式。 此外——我相信你以前聽說過這個——模板必須用 TABLEs 創建，而不是 DIVs。 再一次，這是不幸的，但這是要走的路。 鑑於電子郵件總體上沒有那麼大，設計和創建它們並不難——與網絡或移動設計相比，它只是乏味。
- 該設計
- 結構
- 樣式
- 內容
- 內聯樣式
- 身體
- 桌子
- 第一行 - 標題
- 第二排
- 第三排
- 第四排
- 第五行 - 頁腳
- 最後的話
該設計
為您推薦：如何使用現代 CSS 框架加速您的設計過程？
結構
在 HTML 頁面的正文中，粘貼以下代碼。 只需查看代碼，您就可以看出這封電子郵件的結構並不多。 這實際上是一件非常好的事情，因為電子郵件永遠不應該是複雜的。 到目前為止，還有少量的樣式只指定了表格的總寬度並且表格的單元格之間沒有任何內容。
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>樣式
好的，現在我們要在文檔內容中添加一些 CSS。 只是重置和鏈接顏色和样式定義，這根本沒有什麼花哨的。 我會非常小心你放在這裡的 CSS，因為它經常被電子郵件客戶端忽略。
<style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>內容
是時候用內容填滿表格了。 您可以在上面為您提供的文件中找到圖像 - 在本教程的開頭。 現在您應該填寫此電子郵件中的所有文本和圖像。 請注意，在本教程中，您不必將超鏈接實際鏈接到任何內容，您也可以自由使用自己的圖像。 到目前為止，在代碼中，我已經定義了所有三個圖像的寬度，只是為了確保它們的大小已設置。
我需要你非常注意一些事情：圖像非常適合電子郵件，只要它們是 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 樣式。 正如您所看到的，這就是電子郵件外觀的原因，到目前為止，這封電子郵件看起來一點也不漂亮。 我會把這部分分成小塊，這樣它就不會變得過於龐大。
您可能還喜歡： 7 個使您的電子郵件主題行更易於點擊的有用提示。
身體
首先，讓我們設置整個電子郵件頁面的背景顏色以及默認的字體大小和字體顏色。
<body bgcolor="#f7d973" ></body>桌子
接下來要做的是將電子郵件內容居中並為其提供自己的背景顏色，以便脫穎而出。
第一行 - 標題
第一行的單元格中發生了很多事情。 請注意，內聯樣式在 <td> 而不是 <tr> 上。 我們在這裡所做的是與徽標相匹配的新背景顏色。 此外，還有一些填充和對齊。 現在，我將文本的顏色更改為白色，因為替代文本默認為黑色。 您將無法在此背景上看到它，因此我確保您可以通過更改文本的顏色來查看它。 這對您來說似乎沒用，但就像我說的，這對於默認情況下不允許使用圖像的人來說非常重要。
<tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>第二排
在該行中，再次只有一個跨兩列的單元格。 這個單元格通過添加一些填充和底部的分隔線來將其內容與下面的行分開來稍微操作。 我們也有一個大標題，它通過利潤獲得了一些空間。 而且，這就是這一行。
<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> <prsws_divider"><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> <prsws_divider">第五行 - 頁腳
最後是頁腳。 這裡幾乎沒有發生什麼。 只是通過填充一些間距，就是這樣！
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>最後的話
本教程有點長，但我希望您現在了解從頭開始創建 HTML 電子郵件模板需要什麼。 這不是一個複雜的概念，但它可能很乏味。 現在，輪到您開始製作外觀精美的高端電子郵件了！ 您可以結合使用多種技術來創建電子郵件模板，使其更加獨特。
本文由漢娜巴特勒撰寫。 她是一名網絡開發人員和設計師。 此外，她喜歡以文章的形式分享她的經驗。 在這種情況下，她在 WriteMyPaper4Me.co 網站上有自己的部分。 未來，她將開始寫博客，向他人介紹她的工作方法。