開始使用 CSS
開始使用電子郵件 Foundation 的 CSS 版本。
電子郵件 Foundation 可透過提供一組強大、經過測試的現成元件，消除開發 HTML 電子郵件的痛苦。這包括完全回應式的網格、按鈕、標題、選單等。
在此入門指南中，我們將下載電子郵件 Foundation，建構基本網格，然後將電子郵件內嵌，以便進行測試。
安裝
如果您尚未下載電子郵件 Foundation 的入門檔案，請下載。它們包括電子郵件所需的樣板 HTML，以及 Foundation 的所有 CSS。
解壓縮資料夾，並在您選擇的文字編輯器中開啟它。
檔案結構
以下是您取得的資料夾中檔案的細目
css/foundation-emails.css：電子郵件 Foundation CSS。index.html：空白樣板，供您開始使用。templates/：一組預先製作的範本，遵循常見的電子郵件版面。
我們將從頭開始撰寫版面，因此開啟 index.html。
樣板
在 index.html 內，您可以看到讓 HTML 電子郵件運作所需的樣板，並附有說明各個功能的註解。
<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!-- The character set should be utf-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<!-- Link to the email's CSS, which will be inlined into the email -->
<link rel="stylesheet" href="assets/css/foundation-emails.css">
<style>
<!-- Your CSS to inline should be added here -->
</style>
</head>
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<!-- The content of your email goes here. -->
</center>
</td>
</tr>
</table>
</body>
</html>網格基礎
Foundation for Emails 包含製作 HTML 電子郵件所需的許多常見元素：網格、字體樣式、按鈕、標示等。
建立可在所有電子郵件用戶端運作的 HTML 電子郵件所需的標記很複雜，而且需要撰寫許多表格。不過，Foundation 的所有元件都已在每個主要的電子郵件用戶端中徹底測試過，包括 Outlook 等有問題的用戶端。嚴格的結構確保您的設計在任何電子郵件用戶端中看起來都不會失真。
讓我們從建立基本網格開始。為此，我們需要三個部分：一個容器、一個列，然後是一些欄。
容器
大部分 Foundation for Emails 元件都是完整的表格，包括容器。在 index.html 的 <center> 標籤中，新增此表格程式碼
<table class="container">
<tr>
<td></td>
</tr>
</table>容器會包裝您整個電子郵件的內文。它會套用最大寬度到電子郵件的內文。每封電子郵件都需要這一點樣板。
列
接下來，讓我們建立網格本身，從列開始。列將欄分組到一個單位中。在您的容器中，新增此表格
<table class="row">
<tr>
<th></th>
</tr>
</table>欄
欄將您的版面分成水平區段，並排放置。在小螢幕上，這些欄會堆疊在彼此上方以節省空間，除非您將它們設定為在小螢幕上保持其版面。
在您的列中（最內層的 <tr>），使用此程式碼新增一欄
<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>在上述範例中，我們使用 .small-12 和 .large-6 類別來定義欄的大小，分別適用於小電子郵件用戶端和大型電子郵件用戶端。Foundation 使用 12 欄網格，因此在行動裝置用戶端上，欄會延伸到頁面的整個寬度，而在桌上型電腦用戶端上，欄會是列寬度的一半。
由於這個第一欄是半寬的，因此我們需要第二欄與它搭配。在第一欄的 <th>之後，新增第二欄的程式碼
<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>您可能已注意到欄上的 .first 和 .last 類別。列中的第一欄需要 .first 類別，而列中的最後一欄需要 .last 類別。網格文件中的第一和最後類別區段有更詳細的說明。
那是很多 HTML！讓我們看看它在高階層級中是什麼
<!-- Container -->
<!-- Row -->
<!-- Column One -->
<!-- Column Two -->CSS 類別通常在最外層的表格元素上，因此這是識別組件開始位置的簡單方法。容器從具有 .container 類別的表格開始，列從具有 .row 類別的表格開始，依此類推。
內嵌
現在我們有了基本電子郵件，在我們可以寄出電子郵件之前，我們需要做的最後一件事就是內嵌它。這是將電子郵件的所有 CSS 注入 HTML 的程序，以便它作為一個獨立檔案運作。
像 Gmail 和 Outlook 等電子郵件用戶端會從 <head> 中移除 <style> 標籤，而 Gmail 也會從電子郵件的 <body> 中移除它。最好在標記中內嵌撰寫 CSS。在樣式標籤中手動內嵌所有 CSS 會很痛苦，而且會花很多時間。
我們的 網路內嵌器 會自動執行這個程序。要使用它，請將 index.html 的內容貼到 HTML 欄位中，將 css/foundation-emails.css 的內容貼到 CSS 欄位中，然後按一下「內嵌！」。完成後，您將看到一大堆 HTML，也就是您的內嵌電子郵件。
您的電子郵件 CSS 將包含媒體查詢以進行回應式樣式，內嵌工具會將其移到 <body> 中，以便保留它們。
測試
現在您有了內嵌電子郵件，您需要在實際電子郵件用戶端中測試它，以驗證它看起來是否正確。Foundation 的所有內建組件都已在每個主要的電子郵件用戶端中測試過，因此我們已經為您做了很多工作。但是，您會希望在寄給大眾之前測試您的電子郵件。
測試電子郵件最流行的工具是 Litmus。您所要做的就是貼上電子郵件的 HTML，您就可以在任何您想要的電子郵件用戶端中獲得即時預覽。
由您決定哪些電子郵件用戶端對於測試很重要，但您可以 查看我們的相容性清單 以獲得建議。
後續步驟
您已成功安裝 Foundation for Emails，並撰寫、內嵌和測試您的第一封電子郵件！若要繼續使用此架構，您可以查看其他架構元件的文件，包括 按鈕、標示、選單。
如果您有興趣深入了解 Foundation 團隊的架構，查看我們關於 Foundation for Emails 的大師課程，這是一系列隨選視訊，探討電子郵件設計工作流程的各個面向。
