快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 如何用PS和DW让淘宝网店促销栏动起来

如何用PS和DW让淘宝网店促销栏动起来

放大字体  缩小字体 发布日期:2024-02-25 21:57:02  来源:电商联盟  作者:乐发网  浏览次数:22

如何用PS和DW让促销栏动起来,使您的店铺更生动!我们一起跟淘宝学堂来学习一下,这里附上制作步骤。

Photoshop(做图软件)和Dreamweaver(主要做代码)!大家应该很熟悉!为了照顾新新新手!我尽量写详细!别嫌我啰嗦哦!这次要介绍的是在促销模板上做滚动图片效果!PS做图过程我就文字简单说一下!

先发一张在PS理做好了的效果图,滚动图片的效果图可以到小店里看,因为懒得一张张宝贝图修改,为了避免嫌疑,这里就不粘贴出来了!

当然你需要展示多少个宝贝就制作多少张这样的效果图哦~

PS部分:

1、打开Photoshop做图软件,打开你需要展示的宝贝图片!(文件→打开即可)

2、新建一个文档,尺寸如下图参数(尺寸可随自己喜欢设定)

3、把宝贝图片拉到新建文档里,然后自由变换到适合大小(当然,需要比新建文档的边缘要小一点)

4、选择选框工具在文档上画一个大小与宝贝图片一样的框(画出来的是虚线),然后菜单上选编辑→描边(参数如下图)

5、最后在下面打上宝贝的名称和价格(字体颜色随自己喜欢),然后保存JPG格式,上传到网络相册里备用!

DW部分:

Ceci原本做了一个头尾接合无缝滚动,而且鼠标放上去图片就停下的那种效果代码,因为淘宝不支持脚本,所以最后只能放弃,就做了这个只能左右无限循环的效果代码!

首先,我们需要用到的滚动代码:

<table height=“300” cellspacing=“0” cellpadding=“0” width=“750” border=“0”>

<tbody>

<tr>

<td width=“750”>

<p><marquee style=“relative: ” scrollamount=“1” behavior=“alternate” width=“750” height=“300”><img height=“300” width=“220” border=“0” alt=“” src=“图片地址1” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址2” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址3” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址4” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址5” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址6” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址7” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址8” />

<img height=“300” width=“220” border=“0” alt=“” src=“图片地址9” />

</marquee></p>

</td>

</tr>

</tbody>

</table>

方法:

1、打开DW软件,新建一个HTML

2、点击左上角,拆分按钮,这时就会出现上面是代码,下面是效果图!

3、把滚动代码复制(ctrl+c),然后粘贴(ctrl+v)到上部分的代码区,把原有代码覆盖掉(或者先删掉原有代码)这时鼠标轻轻点一下下半部分就会出现很多个框框

4、点击第一个框框,上面代码部分就会显示同样位置的代码

5、把之前做好的宝贝图片传上的网络相册地址复制一下,然后粘贴到下方中间的源文件(图片地址1)的地方,图片就会显示出来,下面那个是填写你宝贝购买的地址(超链接)

6、后面的框子做法参照第5部。所有图片做好后,可以点击上方浏览效果,满意后直接把上面的代码复制到你的淘宝装修促销模板上就可以了!

这个图标是浏览效果的!

下面简单解释一下参数,大家可以根据自己的要求更改:

height 这个是高,数值填写的是之前做好图片的尺寸

width这个是宽,显示的750是放置在促销模板上的那个宽

scrollamount这个是图片滚动的速度,数值越大速度越快

behavior这个是滚动的方式,它的属性值有scroll、slide和alternate三个

scroll表示滚动内容向同一方向重复滚动,slide表示滚动内容从一端向另一端滚动并在另一端停止,alternate表示滚动内容在两端之间来回往复滚动!

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 如何用PS和DW让淘宝网店促销栏动起来

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝店铺,天猫店铺背景固定的方法。 淘宝装修子账号设置流程
淘宝店铺装修如何实现全屏轮播
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问