这里可以设置广告或签名,请到【首页】用户名旁边-【设置】-【个人资料】-【个人信息】-【个人签名】设置
|
店铺装修首页中的轮播海报已经不是什么新鲜的事情了,那么你知道店铺店招里面的小轮播是怎么插入进去的吗?
! n3 y2 v4 E+ P3 Z7 E/ C2 s双十一就快到了,今天手把手教大家在任意位置插入小轮播,让店铺动起来,希望大家双十一大卖。2 K- T$ ]6 z8 |8 D$ v
学会它可以在任意图片位置插入轮播模块,而且不限制轮播数量,不限制轮播尺寸,真的很实用。+ j$ ?) {" r2 o$ \3 d
* ~$ ^ g; |& n- o" V: Z下面以店招插入轮播为例给大家讲解+ j- N( q3 J( n9 @& D+ B. I
首先,我们需要根据具体要实现的效果,做设计图,用ps将设计好的图片切片,注意将箭头也分别切出来;
# o9 g; J/ I. }& I7 B9 p$ W
# u: o4 ?' [2 L% p7 w O# c4 h' m
. A- t8 \6 a3 t( ~9 Q切片之后保存的时候我们选择保存为【html和图像】,即网页代码和图片。
* B% |0 g _' t$ E/ E, [
4 T' y/ l4 Y8 B( i/ [! o
3 k4 \. T' d( l' V+ h: @4 {
6 E; ? k' I8 U7 K保存完,出现一个图片文件,和一个网页文件,网页文件就是我们需要的代码。可以打开网页文件,点击下,看下效果。
0 T% K( ]/ t) U8 O7 O同时我们将所有图片上传到淘宝图片空间方便后面使用。; L L( S" D: ]$ B% s' r8 E
0 v" }3 W7 V/ n( d: J2 _/ D G% r o1 \; H
接下来我们用DW(Dreamweaver)工具打开我们导出的html文件:
3 ]7 t: @8 [) y/ C/ i: }在DW设计模式下可以预览效果:0 ?; i' ]# j- c% I8 O \
j% ]3 i$ {$ c! I( ^) R( y
9 m, M+ E7 o/ C' F. j' p f下面的步骤很重要,别掉队哦~
7 O; }9 |2 t+ A) p: m, s& G* L接下来我们要在dw中讲设计的轮播部分删除,具体的方法是选中轮播部分按 delete 或者删除键都可以:
5 f B9 ~2 ^7 G# _- ~" Z8 i- H
3 _, z2 @- I( ` x3 a
& j) A Q# Q, e删除之后我们选择单元格,合并单元格,方便我们以后插入代码,方法是按键盘上的Ctrl同时选中三个单元格,
; e$ ~- J+ l& J* R% B% P. l右键:" v7 w: n6 k0 X2 ]1 Y, i
! D5 Z3 g' S3 F8 N- c, w/ a! W% ?) M
; O/ C1 p3 F% y: v; u合并完成之后只有一个单元格如图:" q- X; e+ Y0 n9 i% e3 E( \
" H: U4 C3 B+ g6 R& T' E9 u
& v6 f5 _' `- Y8 o: \9 p接下来我们开始制作轮播,代码将制作好的轮播代码插入到这个布局中即可,这里我们需要利用一款装修代码生成器。他可以一键生成我们需要的轮播代码,而且可以自定义轮播图片数量,不限制轮播图片大小。同时可以将生成的轮播代码插入到任意的模块里面。
" Y/ c% P7 ?6 D+ }, y& Q7 W2 M$ X
/ q- _) K5 w) X/ q- [+ u) ?2 R/ l7 u) l7 o2 p( j2 C9 n) S/ k
打开软件找到【工具】――【高级工具】――【箭头轮播】:
6 Z* v6 b# W3 X, W( W( ^0 q
0 C2 e! a9 g9 k" Y- `* M/ R2 T
/ S( C, |' D% [
+ @/ C8 g) I- W9 Q* @) j$ q这里就是我们需要配置的轮播参数,几乎是可视化的编辑界面:上面填写我们设计好的轮播模块的尺寸,下面输入我们在淘宝空间中上传好的轮播图片地址,左侧的组是根据我们设计的轮播图片数量添加的,如果我们设置的三张图片轮播,那么这里就添加三个组,同时右边就可以输入三个轮播图片的地址,并且三个图片可以插入不同的宝贝链接。 ' z- e! G9 N- Y* b' R% S
这里填写参数问题应该不大,做过店铺装修的朋友都知道,插入图片地址即可, 填写完成之后 我们直接点击右下角的 【生成并复制】按钮。" l; {, h1 [* b( y# e
当软件提交复制代码成功,此时我们要去dw软件中 插入我们生成好的轮播代码:7 W0 b J- M2 x& |
\3 N! `" t, ?% N1 A8 s
! T# b7 o# C; r. n1 Q% s L- C A6 C9 Q ?& f
注意,这里要删除默认的尖括号,再粘贴我们软件生成的代码即可。一定要删除尖括号哦。 粘贴完成之后再空白处点击一下:$ s! d4 h: h, K# z( ?4 Y* n) a
我可以看到预先设置好的效果了:
* j3 I/ `; V% F" h; W7 u
: _) v9 V: e# {( a. U+ |% m0 v/ g5 u: S& Q: {# H2 S
此时我们的轮播代码已经插入到了店招中,别忘了,除了轮播模块内的图片我们已经替换为图片空间的图片地址了,其他的图片还是我们本地的哦,所以我们需要将其他图片的地址也替换为图片空间的图片地址,如果图片不多的话直接复制图片空间的图片地址在dw中替换即可,如果图片多可以使用【淘宝美工助理】――【工具】――【批量换图】:
0 X. m+ c, T! ~! [0 J3 j
" i$ Z' g9 @ U- H8 U* e9 K" F8 N) L" C7 O/ P3 t
这个功能可以将本地的图片一次批量替换为图片空间的图片,很方便。具体的操作大家有软件的话 可以看软件里面的教程,这里不做过多赘述。
- T1 l, G0 D( |0 f& P+ e2 _至此,所有的步骤我们都完成了,最后只需要将dw中设计好的代码全选复制之后粘贴到淘宝店招里面即可:3 h" T! p/ m& y( |; | `
) I5 ~/ g6 _5 I. O9 P: ?% l2 V8 N9 b& z& `- x! t
利用此方法,可以在任意位置,任意的模块里面插入轮播模块,比如店招,首页海报等图片中都可以,有兴趣的卖家朋友可以亲自尝试;
. Q$ G# H& @; H& h) n8 v" _7 m5 @: f7 [# q8 F0 @$ O
* i9 V! i; D% f( ?; X/ N* c/ M1 A3 B9 L
|
评分
-
查看全部评分
|