北京网站设计：您的第一个响应式电子邮件构建与电子邮件基础

2019.08.02 mf_web

114

在本教程中，我们将首先了解ZURB的电子邮件基础框架。我们将对其进行设置，解释包中的内容，然后构建一个简单的响应式电子邮件。

北京网站设计已经建立了一个全面的指南，以帮助您学习基础，无论您是刚开始，还是想要探索更高级的主题，请查看学习基础。

构架

在过去的半年里，我结识了一些用于创建HTML电子邮件的框架和样板。在这些工具之前，实际开发总是很难测试和修复，更不用说使电子邮件响应。

与创建普通网页相比，编码HTML电子邮件是一种非常不同的动物。这就像回到1999年。我们需要使用基于表格的布局，内联样式以及适用于桌面应用程序（Thunderbird，Outlook）和网络邮件（Gmail，Yahoo）等客户端。

为了解决这个难题并获得可靠的结果，我们有两个选择：

按照Nicole Merlin的任何教程进行操作
选择像电子邮件基金会这样的现代HTML电子邮件框架

出于本教程的目的，我们显然会选择第二种方法。

盒子里装了什么？

ZURB电子邮件堆栈提供了一个用于创建电子邮件的一体化软件包解决方案。

它包括：

Gulp：用于自动化工作流程的构建系统
Inky HTML：用于将简单代码转换为表格
Sass：流行的CSS预处理器
Inliner：用于内联样式
BrowserSync：用于重新加载的测试服务器
图像压缩：用于自动压缩图像

电子邮件基金会在您编码，编译，内联，然后缩小准备生产的结果时进行监视。它已在许多桌面和移动应用程序中得到广泛测试; 有关支持的完整列表，您可以查看兼容性部分。在开始使用框架时，您可能还需要参考官方指南。

设置项目

对于整个过程，我使用64位版本的Windows 10。如果您使用其他系统，您仍然可以继续使用。

该堆栈与Node.js及其包管理器 npm一起使用。要安装Foundation for Emails，我们打开终端，然后使用命令：

1	npm install --global foundation-cli

然后我们使用将目录更改为项目文件夹（无论您要在何处运行此项目）cd [project folder path]。在项目目录中，下一个命令应该是：

1	foundation new --framework emails

你会被问到“这个项目叫什么？（没有空格）“，此时您输入项目名称，按Enter键，然后在安装项目依赖项时稍等片刻。

启动你的引擎

现在我们安装了所有项目文件，安装了Node模块，并安装了Bower组件。要启动框架和服务器，请转到项目文件夹并使用以下命令：

1	foundation watch

默认网址（通常为 http：// localhost：3000 /）将在您的浏览器中直接打开。你会看到一个全新的电子邮件模板，准备好了：

SRC

在您的项目文件夹中，您将找到（除其他外）一个src文件夹。在此文件夹中，您将找到：

assets，风格和图像
layouts，包装布局
pages，基本HTML代码
partials，可重用的HTML部分

索引页面可以在这里找到： src/pages/index.html

网格

基金会使用十二列网格。值得注意的是，电子邮件中的水平空间通常很窄，特别是当很多电子邮件移动到移动设备时，因此建议仅使用一列或两列。

电子邮件基金会使用Inky，它自己的新模板语言，旨在消除表格不可避免地导致的复杂标记。这些是帮助我们标记网格的Inky标记：

<container>：包装元素
<row>：行的包装器
<columns>：实际内容的列元素

我们还可以使用属性small和指定网格的大小 large。

这是一栏专栏。

五

<row>

<columns small="12" large="12">Column One</columns>

</row>

</container>

编译时，这个简单的标记给出了以下内容：

<tbody>

<tr>

<td>

<tbody>

<tr>

<table>

<tr>

<th>Column One</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

这个单独的示例是一个两列的行（每个列在小断点处折叠为12宽，对于大的断点保持6宽）。

五

<row>

<columns small="12" large="6">Column One</columns>

<columns small="12" large="6">Column Two</columns>

</row>

</container>

从本质上讲，我们将使用一个<container>元素，一系列<row> 和<column> 元素来构建我们的结构。

建立电子邮件

现在我们了解Inky的基本用法，让我们改变电子邮件主题。在pages/index.html我们可以在头改变了以下详细信息的文档，你可能熟悉这种形式的“前页”如果你曾经使用过YAML：

---

subject: Cake Poker Summer Tournament

---

徽标区

为了插入徽标图像，我们<img>在a中使用标准HTML 标记<column>。徽标图像的路径与资产文件夹中的文档相关。我还通过在另一个开槽加入上面的图片的空线<row>与空<column>：

五

<row>

</columns>

</row>

<row>

</columns>

</row>

文字介绍

然后我在其中添加了另外几行<container>，包括一些介绍文本，欢迎和大奖内容。

<row>

<p><strong>Our Dear Poker fan!</strong> We got news for you: the summer championship is coming soon. If you want to participate, please register your place before the 5th of June!</p>

</columns>

</row>

<row>

<p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p>

</columns>

</row>

细节

详细信息部分涉及更多，提供有关该事件的更多信息。对于本节，我每行使用两列，每列代表一个特定部分。同样，每一半都在移动屏幕上折叠成一列。

三十

<row>

<p>Details about the tournament</p>

</columns>

</row>

<row>

<p><em>London, Royal Hall of Gamblers</em></p>

</columns>

<p>The perfect place for a modern poker championship.</p>

</columns>

</row>

<row>

<p><em>Markuee Hotel</em></p>

</columns>

<p>Nearby four star **** accomodation with full service and great food.</p>

</columns>

</row>

<row>

<p><em>Massage</em></p>

</columns>

<p>A free service for all tournament players.</p>

</columns>

</row>

<row>

</columns>

</columns>

</row>

按键

最后，我添加了一个注册按钮进行注册。我使用提供的<button>组件，将其与<center>标签对齐。

<row>

<button href="http://webdesign.tutsplus.com">Register</button>

</center>

</columns>

</row>

<row>

</columns>

</row>

编译版

在构建和更改内容时，您的项目将在浏览器中不断刷新。编译后的代码可以在项目的dist目录中找到，主要文件是 index.html和css / app.css。

构建完成的电子邮件

当我们对所拥有的内容感到满意时，我们可以使用此命令来使用样式内联代码并压缩整个代码：

1	npm run build

在构建过程之后，你在dist文件夹中找到的是一个缩小的，准备好的版本，适合生产，但肯定不适合任何编辑！

结论

您已完成第一个会话，使用Foundation for Emails框架制作响应式HTML电子邮件！我们做了一个简单的布局，最后有一行和两行列，图像，富文本和一个注册按钮。

北京网站设计

北京网站设计：您的第一个响应式电子邮件构建与电子邮件基础

构架

盒子里装了什么？

设置项目

启动你的引擎

SRC

网格

建立电子邮件

徽标区

文字介绍

更多图片

细节

按键

编译版

构建完成的电子邮件

结论

相关推荐