您的位置：首页 > 百科管理 > 详情

html制作海报代码-PS淘宝海报切片怎么制作

原创：找图网 2023-05-04 09:24:27

淘宝上怎样用html代码实现图片轮播！

</marquee>

PS淘宝海报切片怎么制作

1、首先在PS里面保存文件,用切片工具(快捷键为C)切好图后,保存为Web格式(快捷键为CtrlAltShiftS),注意文件大小,太小了不清晰,不利于观看,太大了网页打开会很慢,根据文件大小自己调节,存储时选择“Html跟图像”

2、用记事本打开生成的HTML文件,去掉以及之前的所有代码,去掉最后面的,保留中间代码,以下图片中间代码跟你的不一样,但都保留下来。

3、接下来把你PS导出的图片上传淘宝后台的图片空间,淘宝首页―卖家中心――图片空间,图片位置随个人习惯,只要能找到就行。

4、接下来要把,html文件里面的图片地址替换为我们空间图片的地址,找到空间图片,在图片缩略图下面有一个“复制代码”的按钮,点击即可复制代码到剪切板。

替换图片:找到对应图片替换代码

5、打开淘宝自定义模块,自定义模块要先点击源码按钮,进入代码编辑页面,复制修改好的代码,粘贴到到淘宝自定义模块里面。

6、最后点击”确定“按钮,完成!

接下来说另一种方法,你要有Dreamweaver软件,这是专门做网页的,在上面做好第1步的时候,用Dreamweaver打开html文件,软件里面点击图片,在下面属性面板里面有图片地址,这次复制空间图片的“链接”就是“代码”前面的那个按钮,在软件里面替换原地址,全部替换之后同样粘贴到淘宝自定义模块里面,用软件做还可以减少出错率。

如何做邮件营销海报

营销海报都是一个html格式的邮件,也就是网页格式的

Edm邮件设计规范

1. 设计文件提供要求:

(1) 邮件设计稿的 Photoshop, Flash, Illustrator, CorelDraw,Freehand等未合层文件;

(2) 使用的字体文件DD.ttf文件;

(3) 其他需要使用到的图片文件DD.gif文件,.jpg文件或.tif文件。

2. 设计要求:

(1) 邮件的宽度:

邮件的标准宽度为575像素,最宽不宜超过778像素,否则必须经过修改。

(2) 邮件的高度:

邮件的高度没有具体要求,应以邮件内容多少而定,建议页面高度不宜过长而影响浏览,最长不要超过1200像素,即2.5屏,否则必须经过修改。

(3) 邮件的大小:

Ø email正文的html文件大小(不包含图片或者flash)控制在10k以内;

Ø 内含图片的邮件包括图片在内文件大小应控制在30k-120k以内;

Ø 内含flash或流媒体格式文件的邮件,包括flash或流媒体格式文件在内应控制在50k-250k以内,否则必须经过修改(特殊情况除外);

(4) 禁止使用脚本

Ø 邮件中不支持任何脚本语言:多数邮件客户端软件和webmail中默认不支持任何脚本语言;

Ø 邮件中不能使用分帧页面和I-frame。

(5) 包含Flash或流媒体格式文件的邮件设计要求:

需要同时设计一张与该flash或流媒体格式文件内容风格相同、同样尺寸的静态图片(.jpg或者.gif),并且设置为flash或流媒体格式文件所在的表格的背景图片,并提示用户:该部分设计为flash(或流媒体)格式,请点击邮件上端链接,观看在线版本。

(6) 禁止使用外联样式表。

(7) 客户应取得邮件当中所需使用的声音、图像以及其他内容的版权。

3. 设计建议:

(1) 对于页面中的图片,建议将超过15k的图片分割成小图片,以保证下载图片过程的顺畅;

(2) 图片个数不宜过多,建议在20个以内,Gif动画文件个数控制在3个以内;

(3) 建议尽量少使用背景图片,复杂的背景图片不利于文字内容的浏览;

(4) 能够使用系统文字应尽量避免使用图片文字以减少文件大小;

(5) 网页上使用的中文系统文字的最小字号应保证在12像素,并且使用系统默认的宋体或黑体,避免使用其它的中文字体;

(6) 使用音效时,音量应从小逐渐放大到正常音量;同时应设置简单、方便的打开/关闭按钮;

(7) 邮件的设计重点在上半部,以吸引阅读者的注意力;

(8) 带有故事情节的flash设计应以下载屏幕开始,以吸引阅读者等待下载;

(9) 背景图片的td应加高宽限制,以避免部分客户端的图片显示出现异常;

(10) 邮件当中的所有点击应使用弹出新窗口。

如下就是一个我收到的标砖的邮件海报的样式,你可以选中一下的代码拷贝到一个txt的文档中,然后将后缀.txt改成.html,就是一个网页形式的邮件营销海报了,你可以看看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<title>无标题文档</title>

<style>

<!--

*{ margin:0; padding:0}

A:link {

COLOR: #000000; TEXT-DECORATION: none

}

A:visited {

COLOR: #000000; TEXT-DECORATION: none

}

A:hover {

COLOR: #000000; TEXT-DECORATION: underline

}

.content{ width:720px; height:888px; border:6px solid #9BD44F; border-top:none;}

.top ul{ list-style:none; margin-left:16px; margin-top:10px}

.top ul li{ display:inline; padding-right:8px}

.title1{ margin-left:16px;}

.products{ width:687px; height:517px; border:1px solid #9BD44F; border-top:none; margin-left:16px }

.every {}

.every UL {

TEXT-ALIGN: center; margin-left:15px; list-style:none;}

.every UL LI {

BORDER-RIGHT: #d1d1d1 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #d1d1d1 1px solid; PADDING-LEFT:2px; FLOAT: left; PADDING-BOTTOM: 8px; MARGIN: 8px 6px 0px 0px; BORDER-LEFT: #d1d1d1 1px solid; WIDTH: 150px; PADDING-TOP: 8px; BORDER-BOTTOM: #d1d1d1 1px solid; TEXT-ALIGN: center

}

.size14 {

FONT-SIZE: 12px;

}

.zc_grey {

FLOAT: left; MARGIN-LEFT: 10px; COLOR: #666666; TEXT-DECORATION: line-through; font-size:12px;

}

.zc_red{ color:#FF0000; font-size:12px}

.bolder {

FONT-WEIGHT: bolder;

}

.color {

COLOR: #009900

}

.margin_top {

MARGIN-TOP: 4px

}

.index_product3 {

MARGIN-TOP: -32px; DISPLAY: inline; Z-INDEX: 12; BACKGROUND: url(

) no-repeat; MARGIN-LEFT: 40px; WIDTH: 40px; COLOR: #fff; POSITION: absolute; HEIGHT: 40px; TEXT-ALIGN: center

}

.index_product4 {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; TEXT-ALIGN: center; font-size:12px

}

-->

</style>

</head>

<body>

<div class="logo"><a href="

"><img src="

/images/" border="0"/></a></div>

<div class="title"><img src="

/images/haibao_"/></div>

<ul>

<li><a href="

"><img src="

/images/haibao_" border="0"/></a></li>

<li><a href="

"><img src="

/images/haibai_" border="0"/></a></li>

<Li><a href="

"><img src="

/images/haibao_" border="0"/></a></Li>

</ul>

</div>

<div class="title1"><img src="

/images/haibao_"/></div>

<ul>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/548/original/7.gif" width=150

border=0></A></DIV>

5.6%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>chiffon and lace trimming </A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>时尚起义</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/517/original/4.gif" width=150

border=0></A></DIV>

8%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>Avene雅漾舒护活泉水 </A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>爱可美妆</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/545/original/4.gif" width=150

border=0></A></DIV>

0%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>我的成功可以复制 </A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>当当网上商城</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/543/original/2.gif" width=150

border=0></A></DIV>

0%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>番茄:新世界的魔幻美食

</A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>九九网上书城</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/556/original/" width=150

border=0></A></DIV>

35元</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>天语X90粉色手机 </A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>咪啦网</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/557/original/" width=150

border=0></A></DIV>

2.5%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>祺月--学步车XG6928B

</A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>乐友</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/432/original/" width=150

border=0></A></DIV>

8%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>福临门新植物甾醇玉米油

</A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>我买网</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

<LI>

<DIV style="Z-INDEX: 10"><A href="

target=_blank><IMG height=150 src="

/assets/products/568/original/" width=150

border=0></A></DIV>

10%</DIV>

</DIV>

<P class="size14 margin_top"><A href="

target=_blank>富培美木质地板保养精油

</A></P>

<P class="size14 margin_top">来自:<A

href="

/" target=_blank><SPAN

class=color>1号店网上超市</SPAN></A></P>

<P><A href="

/" target=_blank><IMG

src="

/images/every_" border=0></A></P>

</LI>

</ul>

</div>

</body>

</html>