淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5828|回复: 11
收起左侧

任意模块全屏化!切片和热点的选择!热点失效!去除间隙

[复制链接]
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

    发表于 2015-3-20 17:58:32 | 显示全部楼层 |阅读模式
    2015全新淘宝旺铺装修攻略
    1.8.1 淘宝装修任意模块全屏化!
    1.8.2关于切片or热点的正确选择!
    1.8.3关于解决热点有时候没有效果解决方案!
    1.8.4关于处理模块和模块间缝隙的方案!
    号外~号外:一篇帖子里面可以学到这么多有用的玩意儿楼主也是醉了!
    楼主会为只要回复了这篇帖子的好人些默默点赞的,也会默默的躲在漆黑的小被窝发自肺腑的祝福你们好人一生平安,真的哈,不骗你们....
    -------------------------------------------------------------------------------
    今天就来和大家扯扯关于那一年,我们一起设计淘宝全屏大图的那些蛋
    那是在:啊~~啊·~~2002的第一场......一个伸手不见五指的....风雨交加,电闪雷鸣......
    (路人甲:你丫的,不说正事,赶紧滚蛋)
    (楼主:这人好讨厌哦,人家刚想起以前做设计的时候,就情不自禁feeling起来了嘛~~连个自我抒发感情的时间都不给我,你好讨厌哦~~~)
    >>>>>>>>>>>>哈哈,少扯蛋,多做事我们进入主题>>>>>>>>>>>
    1.8.1:淘宝模块任意全屏化
    大家都喜欢全屏的感觉吧!那是肯定必须的高大上,那么肯定想过把首页每个地方都变成全屏的对吧,包括我们可能做的一些特色模块,对吧?
    那么肿么才能实现每个模块都全屏化呢?
    1.首先我们得搞出1920的全屏大图才行
    2.然后不管是切片还是热点,都在DW里面弄好,包括链接
    3.最后再在复制出我们所需要的代码
    4.(第四步是啥?-------肯定就是通过全屏代码把“它们”包装起来)
    那么代码就是:
    1. <div class="tanchudiv" style="height:500px;">
    2.         <div class="footer-more-trigger" style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;">
    3.             <div class="footer-more-trigger" style="width:1920px;height:500px;padding:0px;border:none;left:-50%;">
    4.             <div style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;">
    5.         <font color="#0000ff"><!--这个里面就插入我们做好的带有热点或者切片,还有链接的全屏图片代码咯(蓝色的这句话删掉后再插入你们的代码)--></font>
    6.            </div></div></div>
    复制代码
    1.就是根据你们的图片高度,把我提供给大家的代码的里面的所有的500全部变成你们图片就可以了!(妈蛋,这句话很拗口!反正就是上面代码中所有的500变成你们图片的高度就可以了)2.---------------那第六步是啥?(你们问我?我问谁?------当然就是拿去淘宝自定义模块生成出来咯,同学,还要记得把图片地址换了哈~~~)总结:同学这个方法适合所有C店旺铺的首页950自定义模块哦,包括带有一些特效的代码模块哦~~~记得说好的五星好评哈~~~ 1.8.2:关于切片和热点的选择对于任何一张图,打算添加链接的时候,大家肯定会遇到: 到底是选择切片好呢?还是直接加热点好呢?这里楼主先说说两者的优缺点把:一.对于切片优点:可以把一张图片分成几个小部分,减少一张图片打开的预览缓冲时间!缺点:新手朋友可能会遇到生成代码无故出现空格符使得图片错位!(这个缺点很多朋友应该遇到过)二.对于热点优点:超级方便就能利用DW的热点工具添加热点!缺点:一般图片可能过大,会增加图片出现的缓冲时间!问题:那么有木有一种即缓冲快捷,图片制作链接又灰常快速的办法呢?(PS:要是楼主说没有,估计你们会把楼主打死的,所以我要大声告诉你们有!真有哈!千真万确的有!) 方法:还是通过DW直接加热点的办法哦!只是如果遇到大点的图片,大家需要把这个图片裁成两三个小部分这是楼主的店铺:http://gbjddd.taobao.com大家可以进去看到我的店铺的中下方的大致预览图: 1.8关于全屏,热点,切片和间隙问题1843.png 大家可以感受到:东东用的都是1920全屏大图哦!在图片里面也有相关的各种链接,那么东东是对 这种类似王大娘的裹脚布又臭又长啰嗦型 大图是个怎么添加热点并且切分图片呢?1.这么长的图片先分成N个部分(可以用切片,也可以直接拖出辅助线裁剪)假如我是切片的话(直接随便切,为的就是分成几个小部分)如图: 1.8关于全屏,热点,切片和间隙问题1994.png (PS : 妈蛋,果然不出意外扯蛋了!由于楼主图片过长,造成了保存web图片时候出现的内存不足----就会造成系统会不经过大爷同意自动把图片尺寸缩小的严重性后果)你们别笑我,你们一个二个绝对遇到不少,特别是做详情页的时候!别以为楼主我不知道!哼~~~既然这样太长太大的图片普通切片容易扯着蛋,那么我换种方法“切”它丫的!方法:“直接裁剪”(需要利用PS里面的ctrl+R的辅助线哦)如下图: 1.8关于全屏,热点,切片和间隙问题2195.png 这个方法超级适用哦,为毛呢?因为很多时候在设计详情页的时候,详情页太长直接选择正常切片保存的话,那么系统有时候会弹出非正常的内存不足的扯蛋对话框!我们的图片就不能被愉快的保存为正常尺寸的大小啦!是不是好讨厌哦! 所以我们就用”辅助线裁剪“的笨办法去征服它!但是这样一张一张保存图片后,有的同学就不知道怎么弄进DW啦!是不是呀?好啦,这里给大家说说DW那货色怎么插入我们的各种分好的图片素材吧! 1.进入DW建立一个HTML文档2.然后点击左上角的”拆分“(为了让我们区分代码区,和元素区,方便看的)3.让鼠标的光标闪烁在DW的元素区(也就是非代码区!)插入一个表格如图: 1.8关于全屏,热点,切片和间隙问题2484.png 大家看到估计会问(为毛设置是7行1列,为毛下面是三个0)(PS:因为我图片太长我分成了7个部分,所以是7行啦,三个0是因为我不想让我插入的表格的边框被显示出来)1.然后就一张一张图片按照顺序一个一个插入到所对应的表格里面就OK啦,当然记得加上热点哈(别问我DW怎么插图,怎么加热点哈,楼主相信既然你们都看到了这个帖子那么肯定你们都会的....嘿嘿)2.-------别问我第五步干啥?当然是拿去嵌套全屏代码,修改掉图片地址,拿去自己的店铺赶紧展示出来塞! 1.8.3:关于加了热点的图片有时候在淘宝没有效果的问题 这种问题比较棘手,在装修过程中,可能我们第一次使用这种“一张图多个链接的代码”还能够成功,但是如果一个店铺出现多处使用这种代码的话,可能大多数都不能按照预计那样正常连接!这是为啥呢? 例如上面过程中我粘贴复制的代码如图: 1.8关于全屏,热点,切片和间隙问题2856.png 如果在代码中那三处红线的地方我分别改为如图: 1.8关于全屏,热点,切片和间隙问题2885.png
    QQ截图20150320175655.png
    1.8.4:去掉模块和模块之间的间隙的方法大家都看了楼主的网店,知道了店主的网店下半部分最主要的还是无缝的全屏展示模块,肯定没有模块和模块之间的缝隙,这个是怎么做到的呢?大家还记不记的在1.8.1中提供的代码:<div class="tanchudiv" style="height:500px;">        <div class="footer-more-trigger" style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;">            <div class="footer-more-trigger" style="width:1920px;height:500px;padding:0px;border:none;left:-50%;">            <div style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;">         <!--这个里面就插入我们做好的带有热点或者切片,还有链接的全屏图片代码咯(蓝色的这句话删掉后再插入你们的代码)-->           </div></div></div> (大家需要特别注意代码中红色代码那两处!!没看清楚的,我给你20秒看清楚,嘿嘿)对于C店旺铺去除缝隙好说,把”500“变成”480“,把”auto变成-20px“(PS:为毛是500改成480?因为这是你的全屏海报图总高度减去20的数值!举个例子:你的总高度是800px 那么最上面的那个500的地方应该是780哦!其他的500还是必须得800哈)好好去琢磨我括号里面的话吧!可能个别已经知道的同学会对我的帖子嗤之以鼻,但是我相信一些基础不怎么好的,或者刚进入淘宝美工界的朋友对你们的帮助还是很大的哦!! 有朋友喜欢这种深井冰风格的帖子就收藏,或者顶一个哦!这不仅仅是东东的第一篇教程贴哦~~想要知道更多劲爆漏点内容就在论坛关注东东吧,也可以去东东的店铺:http://gbjddd.taobao.com 给东东留言,或者加我QQ给他鼓励,或者帮助他一把!(因为楼主想做实物,实在不知道卖什么好,也不知道哪有好的货源!小伙伴们,东东的未来就全靠你们咯) 记住:就算没有美工,你的店铺也可以狂拽酷炫!我是东东,你隔壁家的东东...


    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-20 17:59:32 | 显示全部楼层
    一楼沙发被楼主抢咯 嘿嘿

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    6 天前
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2015-3-20 19:15:42 | 显示全部楼层
    额 难道你想逆天了
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    大哭
    2016-8-30 09:56
  • 签到天数: 210 天

    连续签到: 1 天

    [LV.7]炉火纯青

    6

    主题

    294

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    55373

    发表于 2015-3-20 20:59:42 | 显示全部楼层
    感谢分析。。。。。。。。。。。。。。。
    http://yunyingyong.sinaapp.com/dh.htm
    http://www.fevte.com/
    http://brushes8.com/
    http://www.imooc.com/course/list
    方便后人
  • TA的每日心情
    心跳
    2016-9-29 08:21
  • 签到天数: 204 天

    连续签到: 1 天

    [LV.7]炉火纯青

    1

    主题

    39

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    40026

    发表于 2015-3-22 07:52:35 | 显示全部楼层
    路过→_→
    来自安卓客户端来自安卓客户端
  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-22 14:27:10 | 显示全部楼层
    隔壁家的东东 发表于 2015-3-20 17:59
    一楼沙发被楼主抢咯 嘿嘿

    这篇帖子,最好问我要!!因为手残!文字格式 你们看了 很蛋疼!!!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    思考
    2016-5-12 22:40
  • 签到天数: 254 天

    连续签到: 1 天

    [LV.8]自成一派

    13

    主题

    1000

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    66767

    最佳新人热心会员宣传达人

    发表于 2015-3-27 16:40:10 | 显示全部楼层
    出这个视频吧

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2015-3-20 02:26
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    8

    主题

    54

    帖子

    3434

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3434

     楼主| 发表于 2015-3-27 18:39:47 | 显示全部楼层

    好像真有 嘿嘿!!!

    就算没有美工,你的网店也可以狂拽炫酷
    东东的网店:http://gbjddd.taobao.com
  • TA的每日心情
    思考
    昨天 16:27
  • 签到天数: 409 天

    连续签到: 1 天

    [LV.9]已臻大成

    0

    主题

    42

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    80014

    发表于 2015-3-29 12:19:55 | 显示全部楼层
    谢谢楼主的分享   论坛有你真的很精彩.

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    前天 12:29
  • 签到天数: 128 天

    连续签到: 1 天

    [LV.7]炉火纯青

    5

    主题

    324

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    18350

    发表于 2015-4-1 13:41:05 | 显示全部楼层
    超级好的东东哦,100个赞

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-7 16:44 , Processed in 0.131369 second(s), 24 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表