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文件夹。在此文件夹中,您将找到:
assets,风格和图像
layouts,包装布局
pages,基本HTML代码
partials,可重用的HTML部分
索引页面可以在这里找到: src/pages/index.html
基金会使用十二列网格。值得注意的是,电子邮件中的水平空间通常很窄,特别是当很多电子邮件移动到移动设备时,因此建议仅使用一列或两列。
电子邮件基金会使用Inky,它自己的新模板语言,旨在消除表格不可避免地导致的复杂标记。这些是帮助我们标记网格的Inky标记:
<container>:包装元素
<row>:行的包装器
<columns>:实际内容的列元素
我们还可以使用属性small和指定网格的大小 large。
这是一栏专栏。
1 2 3 4 五 | <container> <row> <columns small="12" large="12">Column One</columns> </row> </container> |
编译时,这个简单的标记给出了以下内容:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 | <table class="container"> <tbody> <tr> <td> <table class="row"> <tbody> <tr> <th class="small-12 large-12 columns first last"> <table> <tr> <th>Column One</th> <th class="expander"></th> </tr> </table> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> |
这个单独的示例是一个两列的行(每个列在小断点处折叠为12宽,对于大的断点保持6宽)。
1 2 3 4 五 6 | <container> <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:
1 2 3 | --- subject: Cake Poker Summer Tournament --- |
为了插入徽标图像,我们<img>在a中使用标准HTML 标记<column>。徽标图像的路径与资产文件夹中的文档相关。我还通过在另一个开槽加入上面的图片的空线<row>与空<column>:
1 2 3 4 五 6 7 8 9 | <row> <columns small="12" large="12"> </columns> </row> <row> <columns small="12" large="12"> <img src="../assets/img/logo.png" alt="Cake Poker logo"> </columns> </row> |
然后我在其中添加了另外几行<container>,包括一些介绍文本,欢迎和大奖内容。
01 02 03 04 05 06 07 08 09 10 | <row> <columns small="12" large="12"> <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> <columns small="12" large="12"> <p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p> </columns> </row> |
我再次添加了关于比赛城市的图像,相对于文档。
1 2 3 4 五 6 7 | <row> <columns small="12" large="12"> <center> <img src="../assets/img/london.jpg" alt="London picture"> </center> </columns> </row> |
请注意,<img>标记包含在<center>标记中。这触发了Inky的一个对齐类,使我们的图像居中,而我们不必担心它。
详细信息部分涉及更多,提供有关该事件的更多信息。对于本节,我每行使用两列,每列代表一个特定部分。同样,每一半都在移动屏幕上折叠成一列。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 | <row> <columns small="12" large="12"> <p>Details about the tournament</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>London, Royal Hall of Gamblers</em></p> </columns> <columns small="12" large="6"> <p>The perfect place for a modern poker championship.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Markuee Hotel</em></p> </columns> <columns small="12" large="6"> <p>Nearby four star **** accomodation with full service and great food.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Massage</em></p> </columns> <columns small="12" large="6"> <p>A free service for all tournament players.</p> </columns> </row> <row> <columns small="12" large="6"> <p><em>Buy-in</em></p> </columns> <columns small="12" large="6"> <p>500 + 50 GBP</p> </columns> </row> |
最后,我添加了一个注册按钮进行注册。我使用提供的<button>组件,将其与<center>标签对齐。
01 02 03 04 05 06 07 08 09 10 11 | <row> <columns small="12" large="12"> <center> <button href="http://webdesign.tutsplus.com">Register</button> </center> </columns> </row> <row> <columns small="12" large="12"> </columns> </row> |
在构建和更改内容时,您的项目将在浏览器中不断刷新。编译后的代码可以在项目的dist目录中找到,主要文件是 index.html和css / app.css。
当我们对所拥有的内容感到满意时,我们可以使用此命令来使用样式内联代码并压缩整个代码:
1 | npm run build |
在构建过程之后,你在dist文件夹中找到的是一个缩小的,准备好的版本,适合生产,但肯定不适合任何编辑!
您已完成第一个会话,使用Foundation for Emails框架制作响应式HTML电子邮件!我们做了一个简单的布局,最后有一行和两行列,图像,富文本和一个注册按钮。
北京网站设计
热门分享
最新文章
2019.08.24
北京建站:整洁的着陆页更好的设计和更高的转化率
2019.08.16
北京高端建站:如何在Web设计项目中使用淡色
2019.08.16
北京企业网站开发:移动设备和响应式设计模式
2019.08.16
北京网站建设:分析材料设计组件的经验教训
2019.08.16
北京网页设计:使用Hero Header充分利用您的设计
2019.08.16
北京网站建设:WordPress的六个最佳备份插件
2019.08.15
北京做网站:编写转换的博客文章的7个技巧
2019.08.15
北京网站开发:降低跳出率并提升转化率的12个技巧
2019.08.15
北京网站优化:您的电子商务转换率如此之低的20个原因
2019.08.15
北京网站设计:2019年有效访客博客策略的终极指南
随机推荐
2019.07.09
北京网站建设:如何清理你的WordPress网站?
2019.08.15
北京网站开发:降低跳出率并提升转化率的12个技巧
2019.08.13
北京网站设计:在网页设计中融入幽默
2019.08.16
北京网站建设:分析材料设计组件的经验教训
2019.08.13
北京企业网站建设:如何使用隐私设计框架保护您的用户
2019.05.22
北京做网站:10个WordPress任务,您可以使用Zapier自动完成
2019.08.15
北京网站优化:您的电子商务转换率如此之低的20个原因
2019.05.22
北京网页设计:域名生成器帮助您找到完美的域名
2019.07.11
北京网站设计:PHP和RubyonRails有什么区别?
2019.05.21
北京公司网站制作:将“由WordPress驱动”链接从您的站点中删除