如何快速制作图文并茂的网页邮.pptx

如何自设计图文并茂的 网页式电子邮件,肯为旎DIY ,PART 1 简述 INTRODUCTION,什么是网页式电子邮件？,顾名思义，就是网页形式的电子邮件，它由HTML代码编写而成。 图文并茂，更能夺人眼球 有文字、有图片，信息量大 有链接，点击后能跳转到自己的网站 投递速度快、且可个性化定制 成本低，广告效果好,PART 2 准备资料 DATA PREPARATION,1. 登录 LOGIN,打开浏览器，在地址栏中输入： 用自己的用户名和密码登录（如果没有，可以免费注册）,2. 邮件资料的准备 DATA PREPARATION,1)选择模板样式 点击菜单栏“模板 TEMPLATE”，打开模板样式列表，请选择一个适合自己的模板。点击缩略图可查看邮件结构布局。 2)文字资料的准备 依据选定的模板缩略图或具体的模板来提前准备自己的邮件所需要的文字内容，以方便您在设计邮件时能直接复制文字，以加快定制速度。保存为文本文件即可。 3)邮件图片的准备 依据模板来提前准备邮件需要的图片，并将其上传到互联网上（需要公共查看权限），并获取和记录图片的URL地址到上面的文本文件中，以备定制时使用。,PART 3 设计与制作 DESIGN & DIY,自设计步骤 STEPS,只需三步，就能制作出专业级别的图文邮件，操作简单： 1、选择模板 点击菜单栏“模板 TEMPLATE”，选择一个适合自己的模板。 2、设计或编辑邮件 包括编辑文字、更换或插入图片、更换或添加链接、修改颜色、复制区块、上下移动区块、调整区块间距等等。 3、生成邮件代码 点击右侧模板区的“生成代码 Coding”按钮，然后再点击“复制到剪贴板 Clipboard ”，会复制所设计的代码。 温馨提示：后面将会逐一进行演示,1.选择模板 SELECT TEMPLATE,选择模板 点击菜单栏“模板 TEMPLATE”，选择一个适合自己的模板 使用模板 点击模板后面的“定制 Customize”，将其插入到编辑区。,2.1 编辑文字 EDIT TEXT,选中文字&更换 在编辑区用鼠标选中相应 的文字后，直接更换成自 己的文字内容。 定位&添加文字 在编辑区用鼠标定位位置， 直接输入或Ctrl+V粘贴自 己的内容。 温馨提示：建议使用Firefox即火狐浏览器，功能强大，不会出现无法操作等问题。,2.2 更换文字颜色 CHANGE COLOR,更换文字颜色 首先，选中文字，然后在左侧颜色区选中“文本颜色 Text color”选项，最后在取色器上拖动鼠标即可动态更换颜色。 更换文字背景 首先，选中文字，然后在左侧颜色区选中 “文本背景色 Text background”选项 ，最后在取色器上拖动鼠标来动态更换颜色。 温馨提示：更换完成后一定记得切换回“无操作”选项，以避免影响后续操作。,文本颜色更改效果图,2.3 更换图片 CHANGE PICTURE,打开图片属性 双击图片会打开图片属性。 更换图片地址 修改URL输入框中的图片地址为自己图片的URL地址，就会换为自己的图片。 更改图片大小 修改宽度和高度输入框的数值，就会修改图像大小。也可以使用简单的“拖拽法”，即在编辑区直接用鼠标拖拽图片到合适大小即可，高效直观。 添加边框 修改“边框大小”中的数值，比如1，图片就会出现边框。 添加链接 点击“链接”标签，在URL输入框中输入您自己的网站地址，在目标窗口中选择“新窗口 (_blank)”，确定。在有人点击时会转到您的网站。 温馨提示：必须设置图片的宽度和高度，否则在兼容性不高的客户端就会错位。,更换图片操作示意图,2.4 插入新图片 INSERT PICTURE,定位图片位置 在编辑区中用鼠标点击需要添加图片的位置。 点击插入图片按钮 在编辑区上方的工具栏中用鼠标点击插入图片的按钮，会打开图像信息的属性窗口 输入图片地址 请按照上面的更换图片(2.)的方法输入图片URL和修改属性即可，此处不再赘述。 温馨提示：必须设置图片的宽度和高度，否则在兼容性不高的客户端就会错位。,2.5 更换区块背景色 CHANGE BLOCK BACKGROUND,选中区块 在编辑区用鼠标选中某个区块的手柄（手握状）。 选中区块背景色类型 在左栏颜色区选中“区块背景色 Block background” ， 或者，在左栏颜色区选中“内容区背景 Content background”。 更换区块背景色或内容区背景颜色。 再在取色器上拖动鼠标即可动态更换区块背景颜色或内容区背景颜色。 温馨提示：更换完成后一定记得切换回“无操作”选项，以避免影响后续操作。,修改区块背景色操作示意图,2.6 复制区块 COPY BLOCK,复制区块 将鼠标移动到编辑区的某个区块上，然后点击“士”或“干”图标，就会在下方或上方新复制一个区块。 移动区块 点击手柄选中区块，然后点击右侧的模板区上的上下箭头（即移动按钮），即可移动所选中的区块。 删除区块 点击“X”图标按钮，即可将此区块删除。 另外，您也可以点击区块手柄，选中区块，然后，再点击右侧的模板区上点击“删除”按钮，也可将此区块删除。 温馨提示：您可对所添加的区块进行编辑，方法同上，不再赘述。,2.7 添加元素（可选项，视设计需求定）,定位插入位置 在编辑区用鼠标选中某个区块的手柄，以确定在哪个区块下插入。 插入元素(区块) 点击右侧模板区的元素(Element)标签，然后再点击宽度值单选按钮，会列出可供选择的区块元素，选择一个适合自己的元素，点击缩略图，会将此区块插入到编辑区中您所选中的区块下方。 编辑操作 您可以对所添加的元素进行诸如编辑文字、更改图片、插入新图片、修改颜色等操作，方法同上，不再赘述。 温馨提示：此法添加的区块源于不同的模板，可能与现在的模板存在兼容性问题，尽量不使用。,2.8 临时保存进度 TEMPORARILY SAVE,如果您想临时保存编辑进度，以备明日接着设计邮件，方法如下： 打开保存按钮 请点击“文件”标签下的“临时保存 Tmp Save”按钮，会出现提示，点击“知道了 I see!”（相当于下一步的提示），才会出现“继续保存 Continue and Save”按钮。 保存内容 再次点击“继续保存 Continue and Save”按钮，这样才真正进行了保存。 特别提示： 如果您将图片上传到了“肯为旎DIY”网站上，需要进行同样的保存操作后才能将您上传的图片真正保存，否则上传的临时图片会自动清除。 别忘记了上传到“肯为旎DIY”的图片只能保存一次，请在第一次保存前，一次性上传本邮件所有图片。需要注意的是，即使保存了图片，图片也只会保留几天。,2.9 使用进度 LOAD SAVED,如果您想使用曾经保存的进度，继续制作上次未完成的邮件，方法如下： 打开保存列表 请点击“文件”标签下的“使用进度 Load Saved”按钮，会出现进度列表。 使用进度 在列表中选择某一个进度，并次点击其缩略图，就会载入这个保存的进度，就可以接续这个进度，继续进行邮件的制作。 特别提示： 在使用进度时，编辑区必须没有任何内容。 如果编辑区有内容，“进度内容”会自动插入到光标（或选定区块）处，可能会造成现有内容错位或无法使用，请一定注意这一点，以避免工作损失（可尝试回退操作，恢复后，另行保存当前工作进度）。,3.生成邮件代码 GENERATE CODE,预览 点击工具栏上方的预览，查看效果（同时检查邮件内容、错误、遗漏）。 生成代码 点击右侧模板区的“生成代码 Coding”按钮，会出现相应的提示和按钮。点击“知道了 I see!”，进入下一步。 复制代码并自行保存 点击“复制到剪贴板 Clipboard ”，会复制所设计的代码（或手动复制左侧的全部代码），将其粘贴到记事本中保存即可。 温馨提示1：我们并没有保存您设计的代码，关闭页面后所有信息均会丢失，请一定要记得在自己的计算机中自行保存自己所设计的代码。 温馨提示2：临时进度（包括上传的图片）只会保留几天，过期将会自动删除，请周知。,关闭遮罩 CLOSE THE MASK,在插入操作、保存及使用进度、生成代码时会出现遮罩不自动关闭的情况发生，无法进行任何操作。 解决方法：点击最上部的空白区域，即可关闭遮罩（取消编辑区变灰）。 温馨提示1：千万不要点击最上部的任何链接，只能点击空白区域，否则页面会跳转，造成所有工作丢失，无法找回。 温馨提示2：遮罩实际上会自动关闭，只是时间较长，如果您乐意，可以等待。,PART 4 发送邮件 SEND MAIL,如何发送所设计的邮件,发送操作与常规的邮件发送没有多大的区别，唯一不同就是内容输入框转换为代码输入方式。 打开邮箱，点击写邮件 输入收件人、标题 输入邮件内容。 将内容输入框切换为代码输入方式 用记事本打开前面所定制保存的邮件代码，全选并复制代码。 将代码粘贴到已经转换为代码输入方式的内容输入框中 发送邮件,PART 5 高级操作 ADVANCED OPERATIONS,1、 添加超链接 ADD HYPERLINK,选中文字或图片 在编辑区中用鼠标选中需要添加链接的文字或图片。 添加链接 点击工具栏上的超链接图标打开属性； 在超链接类型中选：地址； 在URL输入框中输入需要跳转的网址； 在目标窗口中选择“新窗口 (_blank)”； 点击确定。 温馨提示：文字超链接和图片超链接稍有不同。,2、 修改超链接颜色 HYPERLINK COLOR,打开超链接属性 双击超链接，打开属性窗口。 设置超链接样式 点击“高级”标签； 在“行内样式”输入框中输入： color: #0061aa;text-decoration:none; 点击确定。 说明：color: #0061aa;的作用是设置文字颜色为兰色，当然您可将0061aa颜色值更换您想使用的任何值；而text-decoration:none;的作用是超链接不显示下划线。,3. 更改文字大小 CHANGE FONT SIZE,1）选中文字 在编辑区中用鼠标选中需要变更字体的文字。 2）更换字号 在编辑区上方的工具栏中用鼠标点击“大小”的下拉列表，选择合适的字号即可。 温馨提示：您还可以加粗字体、变更为斜体、更改字体等等，方法大同小异，参照操作即可。另外，需要注意的是字体等设置可能会存在不兼容现象，需要自行测试发送和查看效果。,4. 创建或编辑DIV容器 CREATE AND EDIT DIV,1）创建DIV容器 创建DIV容器的目的是添加段落控制代码，见下面的编辑DIV容器。 在编辑区中用鼠标选中需要用DIV容器包括的文字。 在编辑区上方工具栏中用鼠标点击“创建DIV容器”，点击确定。 温馨提示：如果使用下面的“编辑DIV容器”方法，无法编辑这个新创建的DIV时，可尝试再创建一次DIV，即（嵌套）创建两次。 2）编辑DIV容器 用鼠标点击文字区域，右键，点击“编辑DIV”再点击“高级”标签，在“行内样式”输入控制代码，比如: 行高 line-height:30px; 文字颜色 color: #5B3A7E; 高度 height:100px; 背景颜色 background: #F0EFEA; 字体 font-family: 微软雅黑, Arial; 文字大小 font-size:50px; 温馨提示1：更多控制代码（CSS样式）请上网百度搜索。 温馨提示2：部分客户端可能不兼容DIV而造成格式丢失，请自行测试。 温馨提示：您还可以加粗字体、变更为斜体、更改字体等等，方法大同小异，参照操作即可。另外，需要注意的是字体等设置可能会存在不兼容现象，需要自行测试发送和查看效果。,5. 表格操作 MANIPULATE TABLE,1）打开表格属性 用鼠标点击定位表格，右键单击出现右键菜单，左键单击表格属性。 2）边框宽度 在边框输入框中输入边框的宽度，比如1，点击确定按钮，表格就会出现边框。 3）表格对齐方式 在对齐方式中选择 比如：右对齐 4）表格宽度高度 在宽度和高度中 输入数值即可。 温馨提示：您还可以在右键菜单中删除表格。,6. 表格行、列操作 ADD OR DELETE ROW,1）打开表格行、列选项 用鼠标定位表格行， 右键单击出现右键菜单。 2）添加或删除行 插入行。 左键单击右键菜单上的“行”的在上(下)方插入行，可插入新行。 删除行。 左键单击右键菜单上的“行”的删除行，即可删除所在行。 3）添加或删除列 操作类似于“行”操作，不再赘述。,7. 单元格操作 CELL PROPERTIES,1）打开单元格属性 用鼠标定位单元格，右键单 击，然后点击单元格属性。 2）单元格宽度或高度 在宽度或高度中输入数值即可。 3）单元格对齐 在水平对齐或垂直对齐选项中根据需要选择，比如，“居中”。 3）单元格背景颜色 在背景颜色输入框中输入颜色值即可。当然也可点击选择按钮进行选择。 温馨提示：边框颜色操作类似，不再赘述。 温馨提示：合并单元格不能兼容所有邮箱，少用为妙，尽量使用table嵌套解决。,8. 区块间距设置 BLOCK SPACING,区块与区块的间距是使用“行”来进行调整的，具体方法有： 1）方法一：添加或删除行法 用鼠标定位表格行，右键单击出现右键菜单。 左键单击右键菜单上的“行”的在上(下)方插入行或删除行。 通过增加或删除行的数量来控制区块与区块间的间距。 2）方法二：单元格高度法 如果已经有空白行，可用鼠标定位此行，右键，打开单元格属性。 在高度输入框中输入合适的数值，即可调整行的高度，从而使区块间距得到了调整。,9 获取区块背景色 GET BLOCK BACKGROUND,选中区块 在编辑区用鼠标选中某个区块的手柄（手握状）。 选中区块背景色类型 在左侧栏的颜色区选中“区块背景色 Block background”。 或者，在左侧栏的颜色区选中“内容区背景 Content background”。 获取区块背景色或内容区背景色 再点击左栏中部的“获取背景色 Get Background”按钮，即可获取背景颜色（区块背景色或内容区背景色），并记录到上方的输入框中。 温馨提示：如果您的区块没有颜色值，就会提示：“获取颜色失败! Get color failed!”,10.重命名自己的模板名 RENAME YOUR FILE,哪些用户需要此操作 如果您想创建自己的专属模板或想使用保存图片服务，可以在保存代码前重新命名自己的模板名，让模板名称更有意义。除此之目的外，无须进行此项操作。 操作方法 点击“文件”标签下的“显示标题 Show title”，然后在编辑区上方的标题输入框中输入有意义的标题，这样，您就可以在保存模板时使用了自己的有意义的标题，而不是系统生成的标题。,PART 6 图片上传 IMAGE UPLOAD,1. 上传图片及URL获取 IMAGE UPLOAD,图片必须上传到网络上 要想让图片在邮件中正确显示，必须把图片上传到互联网上，不同的网站操作可能不尽相同，大家可根据自己的情况进行操作。 我们以免费图片空间为例来进行操作和演示（参见视频）。 另，如果没有网站，我们建议将图片上传到贴图库: 获取图片的URL地址 图片上传到互联网后，必须获取其URL地址，比如： /images/logo.png 温馨提示： 网页邮件中的图片实际上仅仅是一个网络URL地址而已，并不是传统意义上的图片文件，理解了这一点，就能避免