c# 窗口响应第一个事件_您的第一个使用电子邮件基础的响应式电子邮件构建-CSDN博客

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">
    <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>