整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
的朋友T圣诞前几天找到我，问是否能帮忙制作一个圣诞贺卡邮件发送给客户。
我赶紧在脑海中遍历一遍如何制作贺卡邮件，发现没有答案，于是赶脚去谷歌了一下，竟然意外发现了个大宝藏。
传统的邮件
与国外客户打交道，避免不了邮件的往来，尤其是节假日，可能要发一点祝贺等邮件，祝贺一下圣诞快乐或者新年快乐的，普通的邮件可能就是一段文字的祝福，或者直接在邮件客户端插入一张图片。
不过你有没有想过把邮件做的更好看一点呢？像下图这样：
如果你也想做成这样的邮件，那么这篇文章你就不要错过了，接下来就跟着我一步一步如何制作一个这样的邮件吧！
如何制作漂亮的邮件
漂亮的邮件不仅在排版布局上吸引用户的点击，而且还能体现你的与众不同，增加你的品牌记忆。
我订阅了很多国外的博客邮件，其中印象最深刻的就是Shopify的邮件
这是shopify日常的博文邮件，几乎每天都在推送，相对于其他普通的邮件的话，我更愿意看这种邮件中的文章。
这种邮件呢有个专业术语，叫HTML邮件，那什么是HTML呢？
HTML是Hyper Text Markup Language的简写，翻译成中文就是超文本语言，通俗来说就是能让图片、文字和视频排版好看的语言，通常它长这个样子：
第一次看有可能密集恐惧症会发作！
难道做一个漂亮的邮件必须要接触这些天书似的HTML吗？
当然不用，这里我找到了完全避免手工制作HTML邮件的方法，那就是可视化编辑制作HTML邮件。
可视化编辑看到字面意思我们就知道，只需拖拽编辑。
我们只用拖拽对应的元素到编辑器中即可实现想要的效果，比如要插入图片，拖一张图片元素进来，要添加一个按钮，拖一个按钮元素进来。
可视化编辑是未来制作网页和邮件的大趋势，这种方法只要你会移动鼠标就能制作内容的方法，当然能极大的提高你的办公效率。
那么有什么工具能够可视化编辑HTML邮件呢？不着急，打起精神来，接下来我将带领你一步一步的实操。
如何寻找好用的在线工具
当我想找新的使用工具的时候，会使用英文去谷歌搜索，因为国外的邮件使用场景毕竟会更多一点，选择的余地也会更多一点。
不过在搜索的时候我遇到了一个难敌，可视化编辑的英文是什么？
没关系，我们使用最简单描述法，我们要找的是邮件编辑器，邮件编辑器英文我会，就是email builder，ok，那就在谷歌里面输入入best email builder的时候，不着急回车，我们查看下拉框看看有没有什么惊喜，果然找到了一个核心关键词best drag and drop email builder-最好的拖拽邮件编辑器，这个词和可视化邮件编辑器的意思基本一致了，搜之。
通过这个搜索方法我们能快速定位自己想要找的工具，先输入简单的描述单词，然后在下拉框中寻找更详细的描述，因为谷歌会在下拉框中推送全球人民最关心的问题！
通过上面的方法我们找到了一大堆的邮件编辑工具，以下是我搜集到的网址，当然你也可以试试，也许能找到更多惊喜：
•beefree.io/bee-free•stripo.email/templates•freeemaileditor.com•mosaico.io•chamaileon.io•litmus.com/email-builder
经过多轮筛选测试，我选择了beefree.io来制作HTML邮件。
最好用的在线HTML邮件编辑器
beefree.io/templates/ 的官网告诉我，它们目前有200+个邮件模板，当我看到这些模板时，口水都流了一地，而当我知道大部分都不用注册免费使用的时候，赶紧点开一个邮件查看起来：
制作邮件贺卡的主题是圣诞节，所以我选择了一个相关的主题，点开看之:
##编辑邮件 这款圣诞主题的邮件里面有个bling bling的彩灯，看起来节日气氛就不错，就选它了，初步分析素材，我需要准备5张图片，包括：
•logo一张•主产品一张•其他产品三张
上图的第3部分我暂时不需要，就删除了，那么剩下的主要就是图片与文案的准备了，先来看看图片如何设置。
首先我来替换一下主产品图，由于主产品图片要一张PNG，PNG格式的图片背景必须是透明色，所以我要扣一下图。
这时我选择在线抠图工具remove.bg，只需上传一张图片即可完成抠图，建议纯色底抠图更干净。
嗯，抠的完美！
回到beefree，在左边点击选中主图，然后右侧出现的Change image点击一下：
然后点击一个文件夹进入，接着点击Upload，即可上传刚才抠好的图片，最后点击图片insert即可。
点击植入之后可以在右侧调整图片大小，位置，都是很方便的，drag&drop 很NICE！
特别注意，图片下面的alertnate text一定要填写，这个部分当图片无法加载出来时，alertnate text会告诉用户该图片讲的是什么
这一栏属于自我介绍或者公司介绍部分，暂时不需要直接删除
然后依次把剩下的几张产品图片上传，修改标题添加按钮链接等操作
然后把其他的社交链接都加上
这里要特别注意，由于我们使用的是免费操作，我们只能下载zip压缩包到本地
如果你已经购买付费版，那么无需接下来的操作，付费版可以直接转化为html或者导入mailchimp edm系统中直接发送邮件。
beefree的价格是月15美金，价格适中，长期制作的话建议购买付费版。
免费版的额外操作
由于没有使用付费套餐，我们只能下载一个压缩包，在解压之后可以看到两个文件：
我们点击这个.html结尾的文件，即可在浏览器中看到我们的邮件主体了：
但是这个邮件只能在自己的电脑上看到，该如何将弄到邮件里面去呢？
接着操作！以下手法比较hacker，请仔细操作。
压缩文件夹中的图片
想要把文件弄到在线的邮件里面，首先我们要做的就是把图片上传到在线。想了半天，图片应该放到在线哪里呢？我总结了一下，你可以把图片上传到：
•网站后台媒体库•mailchimp媒体库•其他图床
那么我就示范一下图片上传到自己的网站后台吧，不过在上传图片之前我建议大家将图片进行无损压缩一下。
电脑本地的图片都在image文件夹中
这里的图片格式有gif/jpg/png，jpg和png我们可以使用tinypng.com进行无损压缩
gif图片比较特殊，是一种动态图片，我们也可以使用另外一个在线工具压缩：https://www.iloveimg.com/zh-cn/compress-image/compress-gif 不过gif压缩可能会导致较小的gif变成png，请额外注意一下。
压缩图片是为了邮件加载速度更快一点
然后我们整理一下压缩过后的图片，千万注意，图片名称不要更改。
将图片上传至我们的网站后台，这里以wordpress网站演示：
然后打开图片，复制一下图片的链接：
图片链接格式一般是：
https://keentalking.com/wp-content/uploads/2020/01/Excavator1.jpg
我们删除后面的图片名称，只保留前面的部分，后面要用到：
https://keentalking.com/wp-content/uploads/2020/01/
使用subline text批量替换图片链接
这里用到的最好一个工具是subline text，官网是sublimetext.com/3，这是一款代码编辑工具，我们利用它来批量替换HTML文件中的图片链接。
首先下载subline text，官网下载的有个人免费版，安装好之后打开html文件：
然后用快捷键ctrl+f或者command+f
1.打开查找2.下方搜索框内输入"images/"3.点击find All
这时候你会发现所有包含"images/"的选项全部选中了：
接着按一下键盘上的左方向键，选中的文字变成了光标，然后按几下键盘的右方向键，移动光标到"images/"后面，点击Delete键，向前全部删除"images/" 。说起来比较复杂，但做起来很简单，请看动图操作演示
最后一步，粘贴我们之前的链接
https://keentalking.com/wp-content/uploads/2020/01/
我们发现所有的图片链接都换成了自己的官网图片链接
点击快捷键ctrl+s或command+s保存。
验证图片是否替换成功
我们验证一下这些图片是否都替换成功了。
这里我推荐使用qq邮箱来检测一下。
打开qq邮箱，写信创建一个空白邮件，然后点击“格式”，出现的工具栏中点击""
全选subline text中的所有代码：
并粘贴到qq邮箱空白邮件处，粘贴完毕点击返回可视化编辑：
出现完整的HTML即表示成功！
接下来发送给自己的工作邮箱，然后转发给用户等等都是轻车熟路啦！或者你可以直接把代码放入mailchimp等EDM发信系统也是可以的。
（来源：理清外贸）
以上内容属作者个人观点，不代表雨果网立场！本文经原作者独家授权供稿，转载需经雨果网授权同意。
上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！
友谊卡》教案
学生课前准备https://www.shimengyuan.com/nianji/716.html
一、卡纸、剪刀、胶水、彩笔等用具。
二、课前查阅有关贺卡来历和意义的资料，摘抄记录一些有关祝福的语句。
教学目标
1、通过活动，让学生了解贺卡的意义，明确赠送的对象，掌握制作步骤，做成精美的贺卡。
2、通过欣赏、制作、书写贺词、评比等研究性学习活动，培养学生探究性学习的方法及创新意识和创新能力，人际交往能力。
3、通过活动开展对学生渗透感恩教育。
教学过程https://www.renjiaoshe.com/jiaocai/381.html
1．激情导入（展示贺卡，帮助学生了解）。
（1）、同学们，你收到或者送过贺卡吗？当你收到贺卡或赠送给别人贺卡时有什么样的感受？
（2）、学生交流讨论，了解贺卡的内容和意义等。
（3）、同学们，我们应该用自己的双手和诚心，自己动手制作礼物送给我们敬爱的人。我提议我们今天每人做一张贺卡，来作为礼物送给自己敬爱的人，大家说好吗？
2．学做贺卡。
（1）介绍制作贺卡的程序和手法制作程序。
a、构思起稿，确定主题内容
b、设计形式，安排图形文字
c、动手制作，选用材料，进行描绘，配色、制作手法a、绘画法b、剪贴法
①讨论：仔细观察老师展示的贺卡，认真观察包括什么内容。
②指导：同学们，老师的这几张贺卡，精美吗？要想做张式样好的贺卡，就得多花心思，仔细揣摩。可以把卡纸对折，也可以经过剪、裁、贴制作一张更为特别的贺卡。
（2）学生试制贺卡 请同学们按照老师介绍的方法，自己试着做一张贺卡。
①教师巡视指导。
②出示学生做的贺卡，评价激励。
（3）学写贺词。
a、所写贺词，力求情真意切。蕴含着对敬爱的人的感激和爱戴的优美语句。
b、学生试说。 ①指名学生说说。 ②学习小组互说，老师巡回指导。
（4）、同学们，今天你们亲手做了一张贺卡，送给你们所敬爱的人。我想当他们收到你们的贺卡时，一定非常的高兴，为你们自豪，回家后就让我们行动起来吧！把你们的贺卡尽快送到朋友们的手中，好不好？课外延伸 其实，贺卡的内容很广泛，我们回去后也可以动手做做贺年卡、圣诞卡、生日卡等。你们有信心做好吗？那么我们就试试吧。
教学注意事项
1、让学生把方法写出来比较耗时，可以改成口头交流，比较省时，效果也应该会不错。
2、低年级学生制作花了大量的时间，是否可以寻找更好的方法。
们在开发各种管理系统的时候，不免需要将一些报表导出为PDF，这使用率应该来说是还相当广的，今天，小编将给大家推荐一个HTML转PDF的利器，神器，有了他，如虎添翼。
什么html2pdf,pdflib,FPDF这些可能也有不少人用过，但，我推荐的不是这个，也是我们的：wkhtmltopdf
wkhtmltopdf并且wkhtmltoimage是开源的（LGPLv3）命令行工具来渲染HTML到使用Qt WebKit渲染引擎PDF和各种图像格式。这些运行完全“无头”，不需要显示或显示服务。
还有一个C库，如果你是这样的事情。
我如何使用它？
下载预编译的二进制文件或从源代码构建
创建您想要转换为PDF（或图像）的HTML文档
通过该工具运行您的HTML文档。
例如，如果我真的很喜欢Google今天对他们的徽标所做的处理，并希望以PDF形式永久捕获它：
wkhtmltopdf http://google.com google.pdf
其他选项
这很好，我一直想把Google的主页变成PDF，但是我也想要一个目录。
有很多命令行选项。查看自动生成的wkhtmltopdf手册。
获取核心
命令行工具很棒，但我想要一个C库。
没问题。检查图书馆的文件。
真实世界的例子？
正如我们所说，如果您今天真的很喜欢Google的主页，并且希望将其保存为PDF，则可以使用wkhtmltopdf。
说真的，你可以用它来生成发票，生成生日贺卡，或其他各种有趣的事情。只是用你的想象力！
wkhtmltopdf，wkhtmltopdf可以直接把任何一个可以在浏览器中浏览的网页直接转换成一个pdf，首先说明一下它不是一个C#类 其他语类的方法封装，而是一个把html页面转换成pdf的一个软件（需要安装在服务器上），但是它并不是一个简单的桌面软件，而且它直接cmd批处理的，我们可以很简便的调用它。
今天我通过一个asp .net core mvc的例子给大家介绍下他的使用方法：
首先，我们先在https://wkhtmltopdf.org/downloads.html 下载相应的服务器系统 wkhtmltopdf软件
当然，在https://github.com/wkhtmltopdf/wkhtmltopdf 我们也可以查到一些具体的应用例子
我在先nuget添加了：https://github.com/cp79shark/Shark.PdfConvert，这个封装了.net core调用wkhtmltopdf的常用操作方法，可以直接快速引用。
什么是Shark.PdfConvert？
Shark.PdfConvert是WkHtmlToPdf工具的一个简单的.NET Core（也是目标net451）包装器。大多数选项通过PdfConversionSettings对象公开，其他可以通过使用自定义覆盖来指定所需的配置区域。
转换设置默认值是为Windows环境设置的，并假定您已安装WkHTMLToPDF（x64）工具。您可以通过重写PdfConversionSettings来覆盖工具的路径。PdfToolPath。
您将需要安装/下载WkHtmlToPdf，它不嵌入在NuGet包中
示例1：静态HTML内容
PdfConvert.Convert(new PdfConversionSettings{
Title = "My Static Content",
Content = @"<h1>Lorem ipsum dolor sit amet consectetuer adipiscing elit
I SHOULD BE RED BY JAVASCRIPT</h1>
<script>document.querySelector('h1').style.color = 'rgb(128,0,0)';</script>",
OutputPath = @"C:\temp\temp.pdf"});示例2：从URL获取内容
PdfConvert.Convert(new PdfConversionSettings{
Title = "My Static Content from URL",
ContentUrl = "http://www.lipsum.com/",
OutputPath = @"C:\temp\temp-url.pdf"});示例3：使用流进行输出和输入
PdfConversionSettings config = new PdfConversionSettings{
Title = "Streaming my HTML to PDF"};using (var fileStream = new FileStream(Path.GetTempFileName() + ".pdf", FileMode.Create)){
var task = new System.Net.Http.HttpClient().GetStreamAsync("http://www.google.com");
task.Wait();
using (var inputStream = task.Result)
{
PdfConvert.Convert(config, fileStream, inputStream);
}}样品4：混合和匹配
PdfConversionSettings config = new PdfConversionSettings{
Title = "A little bit of Everything",
GenerateToc = true,
TocHeaderText = "Table of MY Contents",
PageCoverUrl = "https://blackrockdigital.github.io/startbootstrap-landing-page/",
ContentUrl = "http://www.lipsum.com/",
PageHeaderHtml = @"
<!DOCTYPE html>
<html><body>
<div style=""background-color: red; color: white; text-align: center; width: 100vw;"">SECRET SAUCE</div>
</body></html>"};using (var fileStream = new FileStream(Path.GetTempFileName() + ".pdf", FileMode.Create)){
PdfConvert.Convert(config, fileStream);}示例5：MVC控制器操作中的用法
public IActionResult ConvertToPdf([FromBody] PdfConversionSettings model) {
// TAKE CARE WHEN Accepting the Conversion Settings from user land, it would be best
// to just NOT DO it, accept your own custom model and map the parameters as needed.
// If you insist, then you could do something like the following to prevent malicious code execution
// in my testing the Custom*Args members are not a valid attack vector, PdfToolPath certainly is, never* trust
// the client#if DEBUG
// set path to executable, UNSAFE DEBUG USE ONLY FOR TESTING
model.PdfToolPath = model.PdfToolPath ?? _host.ContentRootPath + @"\wkhtmltopdf.exe";#else
// set path to executable
model.PdfToolPath = _host.ContentRootPath + @"\wkhtmltopdf.exe";#endif
if (model.OutputFilename.EndsWith(".pdf") == false) model.OutputFilename = model.OutputFilename + ".pdf";
var memoryStream = new MemoryStream();
PdfConvert.Convert(model, memoryStream);
return new FileContentResult(memoryStream.ToArray(), MimeTypes.Pdf)
{
FileDownloadName = model.OutputFileName
};}在Controller中的
[HttpPost]
public async Task<IActionResult> ExportPdf(PdfConversionSettings model)
{
var saveFilePath = "/upload/"+ model.Title + ".pdf";
model.PdfToolPath = FileHelper.MapPath("wkhtmltox/wkhtmltopdf.exe");
model.OutputPath = FileHelper.MapPath(saveFilePath);
FileHelper.DeleteFile(saveFilePath);
var ms= new MemoryStream();
var head = @"
<!DOCTYPE html><head><meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
<meta name=""viewport"" content=""width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"">
<meta name=""apple-mobile-web-app-capable"" content=""yes"" />
<title></title>
<link rel=""stylesheet"" type=""text/css"" href=""/lib/art-dialog/css/dialog.css"" />
<link rel=""stylesheet"" type=""text/css"" href=""/admin/skin/icon/iconfont.css"" />
<link rel=""stylesheet"" type=""text/css"" href=""/admin/skin/default/style.css"" />
<style type=""text/css"">
h1{line-height:70px;margin-top:20px;font-size:40px;font-weight:bold;text-align:center;}
body,div,p {line-height:50px; font-family: 'Microsoft YaHei';font-size:25px;}
img{text-align:center;width:120%;height:400px;}
table,tr,td{height:40px;}
</style></head><body>";
model.PageWidth = 210;
model.PageHeight = 297;
//model.Margins = new PdfPageMargins { Top = 100, Left = 20 };
//model.Size = PdfPageSize.A4;
model.Content = head + model.Content + "</body></html>";
PdfConvert.Convert(model, ms);
FileStream fileStream = null;
try
{
fileStream = new FileStream(model.OutputPath, FileMode.Create);
ms.WriteTo(fileStream);
}
catch(Exception ex)
{
return Json(new
{
status = 0,
message = "导出PDF出错！" + ex.Message
});
}
finally
{
ms.Close();
fileStream.Close();
}
return Json(new
{
status = 1,
message = "PDF导出成功！",
url = Request.Scheme + "://" + Request.Host.ToUriComponent() + "/" + saveFilePath
});
}
这就是我的具体生成实现方法。
导出PDF界面
导出后的PDF
*请认真填写需求信息，我们会在24小时内与您取得联系。
