动感都市首页 | 店长论坛 | 设为首页 | 加入收藏
全部文章 淘宝店铺装修常识 淘宝店铺装修素材 淘宝店铺流行人 网站建设小知识 淘宝问答 淘宝交易常识 您的当前位置 首页 > 淘宝店铺 装修小教程图片滚动的应用

淘宝店铺 装修小教程图片滚动的应用

2010/8/7 来源: 作者: 点击数:6580 进入评论

哈哈各位新手大家好,其实我也是个新手,淘宝上的新手,在淘宝上潜水了几天,可了不少前辈的教程,但关于“滚动图片的帖子”感觉写的太笼统,不懂HTML代码的很难看明白,我就在这里献丑,写个更详细的来让大家明白

明白。当然会用或者已经懂的可以不用看下去了。好废话不多说制作方法开始。

先看效果(由于只是介绍制作方法,我就不美化图片或者格局了,只是个简单的效果)

这里咱们先了解下要使用到的代码“marquee”

"marquee"就是控制一组图片或字体上下左右或者交叉移动的HTML代码,不知道各位计算机上面装的有“dreamweaver”

这个软件,要有请运行它,要没有继续望下看。象此类效果要用到的表格肯定不能少,因表格能起到很好的布局作用。

1、先制作一个表格

打开“dreamweaver”没有的打开“记事本”先写如下代码,要注意格式。

<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>

我来简单拆分代码解释下

table width="480" height="120" 表示建立一个表格的宽度为480象素 高度为120象素

这段代码是控制图片滚动的在你店铺里面显示的位置,位置控制好后就要加入图片了哈哈

<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>我们要加入图片的位置就在这里</td>
</tr>
</table>

现在看看加入图片的代码怎么写(红色部分是新写的代码)

<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
<td width="120" height="120"></td>
</tr>
</table>
</td>
</tr>
</table>

再看看红色的部分代码拆分的意思,值得注意的是红色部分我们建立了5个单元格(红色部分有5个<tdwidth="120"

height="120"></td>竖着排列),也就是你可以插入5个图片来相互滚动,要是想要6个图片的话就用6个“

<tdwidth="120" height="120"></td>竖着排列”以此类推。现在我们来插入图片,图片的方法插入相对简单我们

只要在红色部分的<td></td>
中间插入<img src="这里为你的图片地址">图片的大小一定要提前设置好了,因为我们的表格是宽600分成5个单元格

所以单个图片的宽度就是120像素,表格的高度是120像素,所以图片高也是120像素。分匹一个一个的把图片插入到

对应单元格里面 代码如下

<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
</tr>
</table></td>
</tr>
</table>

 

最后就是竣工阶段了,为图片设置滚动。在你有图片的表格前后写上“marquee”写这个代码的位置如下红色部分

 

<table width="480" height="120" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><marquee scrollamount="1" scrolldelay="3" behavior="alternate"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
<td width="120" height="120"><img src="这里为你的图片地址"></td>
</tr>
</table></marquee></td>
</tr>
</table>

 

到此滚动效果已经完成,只要装修到你店铺自定义区里,点下“编辑源文件”把代码复制进去就好了。

如果还有什么不明白的就Q我吧。其实装修店铺不是很难,一些银冠级店铺装的花枝招展的,最终都离不开表格和DIV去布局

淘宝只支持HTML所以只能用表格,然表格是最简单易学的,你只要半天就能把表格代码掌握。哈哈通过上面的效果。我

们可以举一反三,制作相互滚动,或滚动交叉的高级效果。赶快行动把滚动效果实现到你店铺里去吧。初次发帖,有

做的不周到的地方大家多提意见,关于什么店铺音乐之类的我就不说了,以前有人问过我,就是一段代码就搞定。

这里我再说下现在淘宝已支持图片轮播了,但是只给了个编辑模块,也就是说无法实现轮换在你规定的位置,只要掌握好布局和css内联样式就可实现图片轮换的定位了。

还有就是不建议在店铺应用图片太多,这个客户打开你的网站速度可是很慢的哦。所以尽量减少太多太大的图片出现在你店铺,也就等同与减少了客户浏览你网站的等待时间。


更多

Tags:店铺装修   淘宝店铺代码   淘宝模版  
编辑:m-dushi
  • 上一篇:
  • 下一篇:
  • 最新图文信息
    最新文章列表
    最新模版列表
    赞助商广告
    赞助商广告
    赞助商广告
    赞助商广告