> 淘宝店铺装修之制作全屏店招
淘宝店铺装修之制作全屏店招
&亲，小弟又来了。最近都在忙着，突然想到，可以把自己的知识也拿出来和大家分享一下!所以就来咯!
　　话不多 说了，今天我是要给大家说说店招的装修。
　　你有没发现，自己免费在线编辑的店招是不是导航很不协调，感觉很想改掉?但是又改不了?就像下图：
　　那我们不用它系统的店招，我们自己有自定义做店招。看我一步一步慢慢教你。只要你按照我的步骤，保证你可以做出自己的店招。首先你要先确认你有安装PHOTOSHOP和DREAMWEAVER这两个软件。没有没关系，去网上下载一个。然后，自己先去网上找一张自己喜欢的，又比较适合自己店铺的背景图片，尽量大一点的。宽度至少也要1200以上的。这里呢，我就不去网上找了，我直接自己用画笔工具的笔刷画一副国画。
　　1.打开PS，新建文件，我是设置600宽度。注意了，后面单位是像素(源码有限。比较简单的我就不截图了，不会的留言问我)2.选择画笔工具
，利用笔刷来绘图。(笔刷可以去网上下载，这里我就不多做介绍了)
　　3.选择矩形选框工具，如下图，圈选一条横条出来
　　4.注意，这时要新建一个图层，再把选区填充黑色。再加入我们的导航的文字。注意，文字尽量往中间靠。
　　5.选择文本工具，写上自己的点名“XX专卖店”，复制一个图层，对副本图层进行"编辑&变换&垂直翻转"，再往下拉，把不透明度调低。这样就做出了倒影的效果。
　　6.右击图像文件的标题栏，调整一下图像的画布大小。
　　7.新建一个图层，全部填充白色，放在最底层。
　　然后，选中那张有中国画的图层，新建图层蒙板
　　选择渐变工具，选中蒙板，渐变就选择第一个的线性渐变。从下往上拉，多试几次，满意了就好。
　　8.把图片做好的先保存一张JPG格式的。等下有用。就是那个4000高度的那个。等下做背景。
　　注意，要控制在100Kb以内。不然背景上传不上去。“文件&存储为WEB和设备所用格式”,点存储，
　　然后，把优化值设置小一点。大小不要超过100KB。
　　9.选择切片工具，对刚刚我们做好的图进行切片。下面是第一张切片，注意看X和Y 还有W(宽度)H(高度)
　　由于我的宽度是1600，中间的一定要950，所以旁边2个都是325.
　　记住，中间的宽度是950。要注意你前面一张宽度是多大，这一张的X轴就从哪里开始。
　　我是按照下图这样切的，注意，下面的导航(首页那一行)加上上面的(XX专卖店)那行的高度刚好是150
　　10.全部切片完了以后，要保存。
　　“文件&存储为WEB和设备所用格式”,点存储，选择”所有用户切片“
　　然后，这些全部切片都保存在你刚刚保存文件夹里的一个”image“文件夹里。还有在“IMAGE”文件夹外还有一个.html的文件，你可以把这些图片先上传到你的帐号的图片空间。
　　接下来我们开始用Dreamweare 来编辑网页的页面。
　　1.打开Dreamweare，打开刚刚保存的那个.HTML的文件。
　　DW就很简单了，2步完成!!!!
　　2.然后点击代码或者拆分。把所以的图片链接都改成我们在图片空间同样的图片。然后我们把代码之间的全部代码都复制到的自定义模版的代码里。
　　复制在下面的链接，把先前的链接替换掉。。。。
　　记住，要把全部的图片都改了。
　　全部替换完了。然后，复制之间的全部代码，到页面的自定义模块代码里面进去。
　　这样，我们的店招就做好了，但是还没设置背景。
　　3.在装修页面，点击左上方的“模版”，进入背景设置。
　　只要设置页头就可以了，浏览文件，就我们刚刚保存出来的不超过100Kb的4000高的图片。
　　“背景设置”-“显示背景图打勾”“不平铺”“居中对齐”“应用到模版” 这些都要选
　　页面背景就不要设置了。最后，点保存。OK了。发布出来看看吧。
现在还等什么?开始行动吧。不懂的顶帖留言，我会一一回复的。查看: 15276|回复: 5
基础班怎么弄全屏的店招， 店招背景怎么添加
TA的每日心情心跳 13:28签到天数: 259 天连续签到: 1 天[LV.8]自成一派主题帖子积分
阅读权限: 30
中级会员, 积分 50950, 距离下一级还需 49050 积分
中级会员, 积分 50950, 距离下一级还需 49050 积分
店招背景怎么添加 基础版淘宝店铺
截图.jpg (120.27 KB, 下载次数: 14)
15:47 上传
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情抱抱 09:10签到天数: 71 天连续签到: 1 天[LV.6]渐入佳境主题帖子积分
阅读权限: 30
中级会员, 积分 44327, 距离下一级还需 55673 积分
中级会员, 积分 44327, 距离下一级还需 55673 积分
样式编辑-背景设置-页头背景
有一个人对着大海讲笑话，然后被海浪冲走了，因为————————海啸(笑)了
TA的每日心情委屈 07:04签到天数: 33 天连续签到: 1 天[LV.5]略有小成主题帖子积分
阅读权限: 20
注册会员, 积分 9259, 距离下一级还需 741 积分
注册会员, 积分 9259, 距离下一级还需 741 积分
可以去我店铺看看 （基础全屏）
请问您这是升钻之后设置的吗？&
TA的每日心情求抱抱 15:30签到天数: 196 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 33450, 距离下一级还需 66550 积分
中级会员, 积分 33450, 距离下一级还需 66550 积分
本帖最后由 jin 于
16:50 编辑
要么全屏店招，要么用全屏海报可以添充。我就是基础版的。
2楼是全屏店招body{background:url(/imgextra/i3//T2d2gKXz0XXXXXXXXX-.jpg) center 114px no-}复制代码
114px是位置调节&&图片自己换就可以了。
全屏海报也有
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
TA的每日心情委屈 12:32签到天数: 122 天连续签到: 1 天[LV.7]炉火纯青主题帖子积分
阅读权限: 30
中级会员, 积分 98923, 距离下一级还需 1077 积分
中级会员, 积分 98923, 距离下一级还需 1077 积分
可以去我店铺看看 （基础全屏）
宝贝页也能全屏&&好屌！求分享
淘宝美工论坛－汇聚淘宝美工高端人才，建设淘宝美工人才基地。请认准论坛唯一网址：
注册账号后积极发帖的会员
经常帮助其他会员答疑
任职天猫商城美工! 注意：申请此勋章，需先通过淘宝美工认证！
积极宣传本站，为本站带来更多的用户访问量
Powered by1.淘宝基础版全屏海报旺铺基础版是左右两栏的布局，那我们就把左栏的模块全部删掉，在右栏建立自己的自定义模块，在自定义模块中加入以下代码，产生的效果就是通栏效果。在&加入自己的自定义内容&这句话这里插入自定义代码比如全屏不轮播代码等。&div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'taobaoux'}" data-widget-type="Tabs" style="height:580overflow:"&
&div class="taobaoux"&
&div class="footer-more-trigger" style="border-bottom:border-left:padding-bottom:0padding-left:0width:950padding-right:0height:580border-top:top:border-right:padding-top:0left:50%;"&
&div class="footer-more-trigger" style="border-bottom:border-left:padding-bottom:0padding-left:0width:950padding-right:0height:580border-top:border-right:padding-top:0left:-575"&
&font color="#ff0000"&加入自己的自定义内容&/font&
2.淘宝基础版实现页面背景色
第一步：进入你淘宝店的装修页面，定位到&首页&下的&页面编辑&
第二步：指向导航栏，单击最右侧的&编辑&。
第三步：切换到&显示设置&中，复制以下CSS编辑框内，再&确定&即可：
body{background-color:#990326;
#990326是你要设置的背景色。
3.淘宝基础版实现全屏店招第一步：把页头背景色设置为不显示第二步：做一张的店招图片，切成两张图。一张图为中间店招部分尺寸为950*120，剩余的为第二张图，就是全屏店招的背景图，把图传到图片空间。第三步：在导航栏编辑显示设置里嵌入以下代码就实现淘宝基础版全屏店招的效果了body{background-image:url(括号里面替换成你自己的全屏店招背景图片地址);background-repeat:no-background-position:center 110background-attachment:}
1、页中插入一个Flash动画的代码　　&embed src="/动画地址" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="550" height="400"&
2、背景音乐代码　&bgsound loop="-1" src="/音乐地址"&&/bgsound&
3、在图片里附加音乐&img border=0 src="/图片地址" dynsrc=音乐地址&
4、浮动图片代码&/td&&/tr&&/table&;&img alt="1" height="150" src="/图片地址"
5、添加QQ在线&a class='qqa' target=blank href=/msgrd?V=1&Uin=&Site=在线咨询&Menu=no' title='在线即时交谈'&&img src=/qqimages/QQonline.gif border=0 align=middle&&/a&
6、一定区域内文字上滚 &scrollamount=&可改变速度&font size=3 color=ff0000&&b&&center&&marquee width=150 height=100 direction=up scrollamount=2&文字&/marquee&&/font&&/b&&/center&　　&script language=javascript&var seo=1874;&/script&　　&script language=javascript src="/code//xf5.js"&&/script&
7、插入-FLASxxx&embed src="/source/55095/mingzzd" width="400"height="290"&&/embed&
8、让文字左右来回流动&marquee behavior="alternate"&我淘心情你淘宝贝&/marquee&
9、让文字由左向右流动&marquee direction="right"&你淘宝贝&/marquee&
10、让文字滚动&marquee&我淘心情你淘宝贝&/marquee&
11、背景音乐代码&bgsound src="/音乐地址" loop="2"&。前面的是音乐地址，一般都以mid或者mp3的形式结尾后面的数字是播放次数
12、店招-导航-背景图容为一体这种效果可以做到的，要用到PS 和DW两个软件。具体方法是先将整体图片在PS中做好，然后，用切片工具将图片分割为店招部分和全屏部分，保存为WEB所用格式，将切片产生的图片上传到自己的图片空间中。将生成的网页文件，放入DW中，图片更换为空间中的图片，再建立热点连接。最后，将网页代码放入自定义模块中。保存，发布。
13、导航栏背景色/* 导航条背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #FFFFFF;}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{border-right:1px #006205}
/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .title{color: #9F5F9F}
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #FF00FF;}
/*所有分类右边线*/
.all-cats .link{border-right:1px #8C7853}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color: #FFFF00}
阅读(...) 评论()}