JAC外贸实战:教你从零开始写一封HTML邮件

事先声明:我没有能力自己从头到尾编写一封HTML的邮件,我只能借助已有的模板,进行相关的修改,如果你是高手,可以从零开始给大家培训HTML语言!

 

之前有一个文章是写html邮件扫盲的,有兴趣的可以进去看一下:HTML邮件扫盲

 

图片较多较大,如果不显示,可以刷新此页面!


 

前面说了,设计一封HTML邮件并不需要HTML基础,因为网上可以找到大量的免费HTML邮件的模板,我们只需要下载这些模板就好了。

 

例如:http://www.benchmarkemail.com/cn/resources/Free-HTML-Email-Templates ,这个网址下的很多免费模板。当然只要你愿意找,去google一下,发现有大把的免费资源,ok,选择你中意的下载。

 

例如,我随便下载了一个模板解压缩,得到了文件夹,下面有一个HTML网页文件,一个文件夹:

 

html0000

 

这是HTML的标准配置,我们双击HTML网页:

 

html000

 

这是这封HTML邮件的基本格式和元素。我们就利用这个模板进行我们自己邮件的修改。

 

右键点击图中的mailer(html网页文件),选择用记事本打开:

 

 

得到一个HTML的源代码:

 

html2

 

全选,复制,打开我们的邮件编辑器,包括电脑的客户端都可以,可以选择代码的编辑模式,当然代码的编辑模式有很多种切换方法,例如:

 

 

这是一种,还有一种:

html002

 

 

Foxmail下也可以编辑:

 

htmlfoxmail

 

切换到代码模式,或者HTML模式,将复制好的代码粘贴到编辑框内,然后我们切换到可见视图模式,可以看到一个基本的HTML邮件已经形成:

 

 

跟前面正式的邮件模板相比,有两个图片没有显示出来。因为模板下载之后,图片元素存在于images这个文件夹内,HTML通过命令调取文件夹中的图片。但是我们复制过来之后无法调取本地图片,所以,无法显示图片。

 

 

看上图,调用的是本地文件夹images中的图片。

 

现在无法调用了,怎么办呢,很简单,调用网络上的图片就可以了。所以,我们要把我们需要用的图片上传到某个网站或者空间。

 

问题来了,使用什么网站呢?

 

要知道我们是做外贸,google在国内虽然被封,在国外速度还是所有网站中最快的,那么我们就把图片上传到google下的plus就好,如图:

 html8

 

你可以选择分享的对象,可以选择不公开,这样只有自己能够看到上传的元素,上传后,获取图片的链接地址。

 

然后这个时候我们就要去找调用命令,让命令来调用我们的在线图片:

 

html9

 

 

 此时,我们返回可见模式:

 

html10

 

图片出现了。

 

ok,上面的文字,在可见模式下可以直接编辑,很容易搞定:

 

html11

 

这样一封HTML邮件设计完了,其他的模板也是同样,愿意研究的可以寻找更多的复杂,美观的模板。 

提供几个收集到的免费HTML邮件模板地址:

 

http://www.weidea.net/post/8488

 

http://www.weidea.net/post/4923

 

http://www.webmax.com.cn/articles/articles_0120_1.html

 

http://freemailtemplates.com/

 

 嫌不够,就自己动手吧,丰衣足食!

 

0 0 投票数
文章评分
订阅评论
提醒

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

20 评论
内联反馈
查看所有评论
8 年 前

除了Google+,还有别的推荐的吗?

lvchaing
回复给  清露
8 年 前

请问google+上链接插入哪里呀 不知道了呢

Dushiya620
8 年 前

那个图片链接具体应该复制在哪个位置哦

Dushiya620
回复给  Dushiya620
8 年 前

看了后面一篇已经解决,谢谢

Martin
8 年 前

邮件扫盲的链接坏掉了

8 年 前

上传后,获取图片的链接地址。 我按照操作上传到谷歌plus了,在哪里获取链接呢?发现目前获取的都不是以PNG结尾的图片格式

回复给  湘水莲语
8 年 前

刚一个同事教会我了,上传之后,点击F12或者鼠标右键审查元素,点击左下角放大镜图标,鼠标定位到要获取的图片上面左击,就自动弹出了图片链接,左键打开图片,右键就可以复制以PNG结尾的图片链接啦。特意写出来以防自己忘记,也给跟我一样的菜鸟支个招,村长勿怪哈。

jackuser
回复给  湘水莲语
6 年 前

你好,按你的方法去操作,还是不行呢。鼠标定位图片后,不能自动弹出图片链接啊,右键复制的图片链接也不是以png结尾的。
求指导

雯雯
回复给  jackuser
6 年 前

定位在这里,右键并不是以jpg结尾的呀为啥不能直接上传截图呢?

回复给  湘水莲语
6 年 前

太感谢了,试了好久都不明白,看了你这一条,终于成功了

7 年 前

学习了,努力实践

7 年 前

我突然想到,最近在学dreamweaver, 就是网页制作的,那我不是可以自己做HTML 邮件了?

回复给  Chinajac
7 年 前

太感谢了版主,让我看到这篇文章,以后做推广图和开发信就更精美漂亮了。 还有些细节我要慢慢学和修改,这文章主要打开了我的思路,很好!

timbin
7 年 前

hello 楼主 HTML 已经制作完成类 是在企业邮箱做的 图片文字连接都可以用 但是我发到我自己的gmail测试 发现图片都不见了 这是什么情况 ? 望指教一二!

jac
回复给  timbin
7 年 前

截图上来

timbin
回复给  jac
7 年 前

这里我好像贴不上来 我把两张截图上传到google + 了 https://plus.google.com/u/0/112364648112869495826/posts/4PdChspoFCN
如果不方便看 我在用别的方法传一下 按步骤做的
第一张是我企业邮箱的发件箱 第二张是我gmail的收件箱 图片不见了

timbin
回复给  timbin
7 年 前

亲爱的楼主可以看到我的截图么 ? 万分感谢,今天又试了一下还是这个 样子的 。。。

加速
20
0
希望看到您的想法,请您发表评论x