c# 窗口响应第一个事件
在本教程中,我们将首先了解ZURB的电子邮件基础框架。 我们将对其进行设置,解释软件包中的内容,然后为自己构建一个简单的响应式电子邮件。
无论您是刚刚入门还是想探索更高级的主题,我们都构建了全面的指南来帮助您学习Foundation,请参阅 Learn Foundation 。
构架
在过去的半年中,我熟悉了一些用于创建HTML电子邮件的框架和样板 。 在使用这些工具之前,实际的开发总是很难测试和修复的,更不用说使电子邮件具有响应能力了。
与创建普通网页相比,对HTML电子邮件进行编码是一种截然不同的动物。 这就像回到1999年一样。我们需要使用基于表的布局,内联样式,并容纳诸如桌面应用程序(Thunderbird,Outlook)和网络邮件(Gmail,Yahoo)之类的客户端。
为了解决这个难题并获得可靠的结果,我们有两种选择:
- 关注Nicole Merlin的任何教程
- 选择现代HTML电子邮件框架,例如Foundation for Emails
出于本教程的目的,我们显然将选择第二个选项。
盒子里装了什么?
ZURB电子邮件堆栈提供了用于创建电子邮件的多合一软件包解决方案。
它包括:
- Gulp :用于自动化工作流程的构建系统
- 墨黑HTML :用于将简单代码转换为表格
- Sass :流行CSS预处理器
- 内衬 :用于内联样式
- BrowserSync :用于重新加载的测试服务器
- 图像压缩 :用于自动压缩图像
电子邮件基金会将在您进行编码,编译,内联然后最小化可用于生产的结果时进行监视。 它已经在许多台式机和移动应用程序中进行了广泛的测试; 有关受支持内容的完整列表,请查看兼容性部分 。 在开始使用框架时,您可能还需要参考官方指南 。
设置项目
对于整个过程,我使用Windows 10(64位版本)。 如果您使用其他系统,则仍然可以继续。
该堆栈可与Node.js及其程序包管理器npm一起使用 。 要安装电子邮件基础,我们打开终端,然后使用以下命令:
npm install --global foundation-cli
然后,使用cd [project folder path]
将目录更改为项目文件夹(无论您要在何处运行此项目)。 在项目目录中,下一个命令应为:
foundation new --framework emails
您将被问到“这个项目叫什么名字? (无空格)”,此时您输入项目名称,按Enter键,然后在安装项目依赖项时坐一会儿。
启动引擎
现在,我们使用所有项目文件进行设置,安装了Node模块,并安装了Bower组件。 要启动框架和服务器,请转到项目文件夹并使用以下命令:
foundation watch
默认网址(通常为http:// localhost:3000 / )将在您浏览器中直接打开。 您会看到一个全新的电子邮件模板,可以开始使用:
Src
在项目文件夹中,您将找到src文件夹。 在此文件夹中,您将找到:
-
assets
,样式和图像 -
layouts
,包装器布局 -
pages
,基本HTML代码 -
partials
,可重用HTML部分
索引页可以在这里找到: src/pages/index.html
格网
电子邮件基金会使用了Inky ,它是自己的新模板语言,旨在消除表不可避免地引起的复杂标记。 这些是Inky标记,可帮助我们标记网格:
-
<container>
:包装器元素 -
<row>
:行的包装器 -
<columns>
:实际内容的列元素
我们还可以使用属性small
和large
来指定网格的大小。
这是一栏的部分。
<container>
<row>
<columns small="12" large="12">Column One</columns>
</row>
</container>
编译后,该简单标记为我们提供了以下内容:
<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宽)。
<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,则可能熟悉这种形式的“前务”:
---
subject: Cake Poker Summer Tournament
---
徽标区
为了插入徽标图像,我们在<column>
使用标准HTML <img>
标记。 徽标图像的路径是相对于资产文件夹中的文档的。 我还通过在另一个<row>
插入了一个空的<column>
在图片上方添加了一条空行:
<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>
添加了另外两行,并带有一些介绍性文字,欢迎词和大奖内容。
<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>
更多图片
我又添加了一张关于比赛城市的图像,再次与文档有关。
<row>
<columns small="12" large="12">
<center>
<img src="../assets/img/london.jpg" alt="London picture">
</center>
</columns>
</row>
注意<img>
标签包裹在<center>
标签中。 这触发了Inky的对齐类之一 ,使我们的图像居中,而我们不必担心。
细节
详细信息部分涉及更多,提供有关事件的更多信息。 在本节中,我每行使用两列,每列解释一个特定部分。 同样,每一半都折叠成移动屏幕上的一列。
<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>
标记<center>
。
<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 。
构建完成的电子邮件
当我们对已有的东西感到满意时,可以使用以下命令以样式内联代码并压缩整个内容:
npm run build
完成构建过程后,您将在dist文件夹中找到的是已精简版,适合生产,但肯定不适合任何编辑!
结论
您已经完成了第一个会话,并使用Foundation for Emails框架制作了响应式HTML电子邮件! 我们制作了一个简单的布局,一排和两排,图像,富文本和最后一个注册按钮。
为了获得启发,请查看Envato市场上的“ 电子邮件模板”类别。 也许设计,构建然后提交自己的!
c# 窗口响应第一个事件