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

  • A+
所属分类:业务类实战  新鲜出炉

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

 

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

 

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


 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

得到一个HTML的源代码:

 

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

 

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

 

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

 

这是一种,还有一种:

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

 

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

 

Foxmail下也可以编辑:

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

 

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

 

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

 

图片出现了。

 

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

 

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

 

这样一封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/

 

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

 

新书上架通知:《JAC写给外贸公司老板的企管书》京东,当当,亚马逊均有售。《JAC外贸谈判手记》和《JAC外贸工具书》已经加印,已铺货! 
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:20   其中:访客  20   博主  0

    • avatar 清露 9

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

        • avatar lvchaing 9

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

        • avatar Dushiya620 9

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

            • avatar Dushiya620 9

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

            • avatar Martin 9

              邮件扫盲的链接坏掉了

              • avatar 湘水莲语 9

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

                  • avatar 湘水莲语 9

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

                      • avatar jackuser 9

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

                          • avatar Jacindustry 9

                            @jackuser 最好是能截图发上来

                            • avatar 雯雯 9

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

                            • avatar 唐果 9

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

                          • avatar 跨境电商 9

                            学习了,努力实践

                            • avatar 十三 9

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

                                • avatar Jacindustry 9

                                  @十三 是的,哈哈

                                    • avatar 十三 9

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

                                  • avatar timbin 9

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

                                      • avatar jac 9

                                        @timbin 截图上来

                                          • avatar timbin 9

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

                                              • avatar timbin 9

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

                                                  • avatar Jacindustry 9

                                                    @timbin 看不到你的截图,html邮件总计有三篇,尤其是最后一篇,你去看一下