|
人要脸面，店要门面，那么本篇跟大家说说装修的问题吧，内容涵盖：
950通栏，950轮播，950宝贝展示，固定悬停，滚动，团购，套餐，关联宝贝等等，只有想不到，没有做不到，
只花精力，不花财力，八门全开！突破模块尺寸极限，精心打造自己的个性店铺。
基本布局尺寸
中间10px的缝隙是笔者心中永远的痛，如果背景是白色，还可以蒙混过关，如果是彩色，那就..大煞风景了
笔者忍痛负重，经过惨绝人寰，丧尽天良...(此处省略3587个字，我知道你们不喜欢看)的研究
终于发现了惊天秘密，不但突破了极限尺寸做出了真正的通栏，还想到了可以做固定悬浮模块。
好了，下面进入本文精华部分，各位看官别眨眼哦。
图片和代码比较多，笔者力求排版美观，请耐心看，一定能看懂。
950通栏大图
(店招的箭头是动态的 关于图片制作将在下一篇详细说明哦)
你没有看错，无缝！看看怎么实现的吧
进入装修页面，左栏底部添加自定义内容区，移到顶部，编辑点击源码页面
将代码复制进去，再对图片链接进行修改。
通过精华部分的代码让这个模块成为幻灯片，从而凌驾于所有页面之上！这样右边的页面会被挡住。
所以在右栏添加一个空白的自定义内容，<DIV style="HEIGHT: 300px"></DIV>高度和左边一致。
扶植版的朋友看这边：在右栏自定义输入以上代码，图片高度属性后面添加" ;RIGHT:200px ”
两个属性之间一定要用半角分号隔开，这段的意义就是让整个页面左移200个像素，这样就刚好居中了，
唯一的缺点是会把左栏的内容挡住，解决的方法是：
在左栏添加同等高度的没用的模块，或者上传等高的空白的分类图片。
是不是很简单？记得要预览才能看到实际效果哦！
这样950通栏大图就完成了，同样在其他页面顶部和尾部添加通栏，就可以实现页头和页尾的效果啦
唯独宝贝详情页的头部不能添加自定义，这是笔者心中永远的痛，即使笔者忍痛负重，
经过惨绝人寰，丧尽天良...(此处省略3587个字)的研究，还是摆脱不了这种痛。
950轮播大图
13张大图轮播，霸气十足啊！当然实际数量可以自己调整哦，同样是在左侧添加自定义，
width是图片宽度，height是图片高度，fade是渐隐轮播的意思，
如果要改成上下滚动轮播的话，把上一个fade改成scrolly，下一个fade改成scroll就可以啦
如果有一点英文基础的话，看起来是很轻松的哦。
<ul></ul>是列表的意思，需要几个元素就插入几个<li></li>
可以像上图一样插入图片，也可以插入文字，文字也能轮播，然后右侧添加同高度的空白就可以了哦。
当然也可以做右侧750的轮播，只要把尺寸改一下就可以了哦。
扶植版的通栏轮播方法同大图，也是在图片高度属性后面添加" ;RIGHT:200px ”，左边再用空白填补。
950通栏宝贝展示
这本来是拓展版的招牌模块，现在只要是个“版”都可以实现...唉...这让拓展版情何以堪！
尽情地设计950宝贝图片吧，一行4个宝贝？5个宝贝？随心所欲！
不用再考虑缝隙，不用再考虑背景色，爱怎么切就怎么切。
(如何设计？在下面集中介绍)
将切片好的代码复制进去，然后在最上方的Table的尖括号内加入红下划线的代码就可以了。
扶植版的朋友再加蓝下划线的代码，表示向左移动200像素。
固定悬停
只截了左侧，“返回顶部”已经霸气外露了！|
代码部分即是红条所示的一张宽度为1350的图片。
做法和950大图相同，注意尺寸就可以了，比如图片本身是150，想距离边框50
那固定悬停的图片就是图片150+50+通栏950+50+图片150=1350
实际图片就是一张左右各150中间有1050空白的图片，图片也可以是动态的哦
在左栏自定义输入上面介绍的大图代码，图片地址替换成这张宽1350的图片
然后高度属性后面添加" ;RIGHT:200px ”就可以了，
扶植版在右栏自定义，那就左移400像素。
这里顺便分享一个返回顶部的代码，很简单：
<A href="#top"><img src="图片地址"></A>
也可以是文字
<A href="#top">返回顶部</A>
团购(实时动态倒计时)
团购是最近兴起的店内促销手段，对销量大的卖家来说，效果很好哦，虽然我们规模小，也不妨看看。
团购最难做的就是倒计时部分了，设计师的模板或者旗舰店都可以自定义JS代码，这样就可以实现实时倒计时了。
有些店铺里面，几个倒计时全都一样，而且一刷新，又从头开始算了。笔者觉得很不舒服...
所以这里介绍一个大致实现实时倒计时的方法。
非旗舰版要想实现真实动态只有一个办法就是链接到一个动态的地址。
团购的代码实在太长了，所以只贴出4个关键点，其他的都可以通过下文提到的Dreamwaver来设计。 上图2011-09-05为自己设置的团购到期时间，D,H,M对别对应天，时，分
系统会自动计算服务器当前时间距离设置时间还剩多少，然后返回一张数字图片。
http://asset./gp.aspx?dt=2011-09-05&i=M
复制到浏览器看看，过一分钟刷新一下，是不是很神奇？！
“秒”的处理：因为返回数据要刷新，一秒时间太短，刷新没意义了
所以做了两张GIF动态图片，还有一张more图片，这里贡献一下，需要的朋友图片另存为就好了
大的数字包含了60张图片！小的数字包含了10张图片
下篇将会介绍用UGA制作这种简单的动态图片
下面有个Num=12 是团购人数的基数
后面有个ID=10878***931，这个相当于宝贝的身份证号码，只要宝贝被创建，这个ID号就一辈子跟着它。
打开欲做团购活动的宝贝链接
用后面的ID替换代码里面的ID就可以了，
这串代码的意义就是可以自动计算购买该宝贝的人数，并返回一张数字图片。
在实际运用中，只需将上面的4种代码当做35*30的图片放入相应的切片单元格中就可以了
唯一的缺点就是重新打开页面才会更新数字，但总比一成不变，千篇一律，还会重头算起的好吧。
再结合通栏的方法，可以做一个950大团购，也可以把950平均分成多份，随便你了
滚动(图片或者文字)
还记得普通店铺的那个滚动公告嘛，那就试试上面的代码吧
width宽，height高，尺寸很重要，外框要大于图片尺寸。
direction是滚动方向，可选有left,right,up,down
behavior是滚动方式，可选的有scroll循环滚动，slide滚一次，alternate来回滚动。
scrollamount是滚动速度，数值越大越快
scrolldelay是滚动延迟，就是每一帧停留的时间，数值越小滚得越流畅。
滚动结束后有一段空白，不是很好看，可以把要滚动的内容多复制两三遍，这样就连贯了。
要滚的东西可以是图片也可以是文字，如何加图片现在大家都会了吧。
代码展示完了，下面介绍一下代码的制作
套餐，团购，关联宝贝，伪通栏都可以用下面的方法制作，设计过程也相似。
伪通栏就是通过左右自定义调整相同高度，并用白色背景融入10px缝隙，达到视觉上的通栏。
主要利用到的工具有Photoshop和Dreamwaver。新手跟我一步步来。
先从简单的开始，以关联宝贝为例，要知道搜索的第一入口是宝贝详情页，其次才是首页。
先打开PS，新建宽度750，高度500左右，单位像素。
选择切片工具
在顶部拉出一个长框，留作写一些广告语和关键词
在下面空白的地方点右键，划分切片，水平2，垂直4，这样就可以放8个宝贝。
把做好的宝贝图片一一放入格子内，然后点文件菜单
点存储
一定要选择HTML和图像及所有图片，保存后，会在保存路径发现两个文件
images里面装的是刚才切好的九张图片，把他们传送到图片空间
然后对html文件点右键用记事本打开
就会看到刚才自己设计好的代码啦，把里面整齐的图片地址替换为自己空间上的地址。
把标题栏图片的代码<TD colSpan=4><img alt="" src="images/未标题-1_01.png" width=750 height=72></TD>
修改为<TD colSpan=4 background=images/未标题-1_01.png>这里留空写字</TD>
就是图片地址放到前面的background后面，就是将这张图片做为标题栏的背景，这样才可以在上面写字。
然后打开Dreamwaver进行二次加工，新建一个html工作区，把替换后的代码复制到代码区。
然后再点到设计区，就能看到图片了
Dreamwaver的界面还是非常清爽的，上面的文字自由发挥吧，下面的属性，字体，大小，颜色应有尽有，
写好了之后别忘了给每一个词，每一张图片添加链接哦。旺旺的和我联系代码在旺遍天下里有，
编辑完，把代码复制到自定义就大功告成啦。
等熟练了以后，就可以尝试更复杂的切片，比如
其实方法都一样，最终效果也很漂亮哦
写在后面的话
原本还在犹豫是否要把这些东西分享出来，在担心是否会损害到一部分人的利益，后来发现自己真是渺小了，
毕竟拓展版还是有很多无法取代的功能，笔者只是将扶植版和标准版的功能发挥到极致罢了。
古老的中国有句话“授人以鱼，不如授人以渔”
我分享更多的是方法和思想，希望大家借鉴举一反三，这样我就高兴了。
篇幅有限，只能20000字，需要代码的朋友可以直接和我旺旺联系，我都会无偿分享的。
如果没有人来帮助你，那么你就去帮助别人。
英国有句谚语“The fragrance of the rose lingers on the hand that casts it.”（赠人玫瑰，手有余香）
只要笔者的分享对你们有帮助，我是打心眼里高兴，你们的支持是我继续分享的动力！
有人说痛苦是用来独自承受的，快乐才是用来分享的
在这里也要说一下，那些天天复制粘贴广告，被管理员删了，还乐此不彼的朋友们
别再做无用功了，停下脚步，好好想想，做点有意义的事情吧(唉，他们是看不到我这句话的)
其他的朋友呢，真心希望你们认真地回复，手打的四个字“谢谢分享”也要比Ctrl+V粘贴一段话来得有意义，
这是一种对工作，对生活的态度，你说是么？
如果你要回复“看不懂”，那也请你停笔，我宁愿你回复的时间拿来多看一会儿，
当你回复“终于看懂了”，这样我要高兴得多。
最后申明一下，代码和文字都是笔者原创或者二次加工的，如有转载请注明出处，
尊重作者劳动果实，希望国人的版权意识能够慢慢好起来，让大家乐于分享。
|
