A-A+

淘宝设计师在线工具箱——代码小白必备

2015年01月05日 电脑网络

如果你有了自己的淘宝小店,那么店铺装修是必不可少的一项工作。可是作为代码小白的你,其中的许多需要代码才能实现的效果,或者通过代码能够极大地提高工作效率的技巧,都让你羡慕不已。那么今天三好公民就为您推荐一套简单易用、功能丰富的淘宝设计师在线工具箱——自己-设计师工具,让你也能轻松玩转淘宝代码。

淘宝设计师在线工具箱——代码小白必备

正如你在上图中看到的,现在这套淘宝设计师在线工具箱有九大功能,下面是作者对这些功能所做的简介:

1. 弹出层代码生成:这个本来有很多参数的,不过我只做了一部分的自定义设置,默认左上角对齐(兼容最好),无偏移。什么,听不懂?那你当作鼠标滑过图片翻转的效果用就行了,这种情况保持两张图片大小一致效果比较好;

2. 宽屏海报代码生成:就是大通栏,反正就是突破淘宝的默认宽度限制,首页有效。默认宽度 1920px ,反正我只用这个宽度;

3. 宽屏轮播代码:跟上边的功能差不多,但是是轮播形式;

4. 商品格子代码生成器:这是给那些连建立表格都头疼的小白用的,其实蛮简单,N 张图片往里一填写就出来表格,嗯嗯,该注意什么你自己猜。反正图片做的规范真的挺好用;

5. 布局计算器:其实不是计算器,就是很直观的把一些常用辅助线尺寸整理了一下,默认 1920px 宽度布局;

6 链接地址提取工具:有的时候拿到别人的代码,想知道那几十张图片链接到了哪里,然后要把他们放到自己的设计中,难道要一个个复制粘贴?这个可以把代码中所有链接的地址提取出来。当然要是对方代码不规范也可能挺坑的,记得校对一下好了;

7. 链接地址批量添加工具: 往自己的代码中批量添加链接,对于切片代码挺好用的,但是要注意顺序,否则效果就很呵呵了。

8. 淘宝图片空间图片地址提取器:这个功能……你在淘宝图片空间后台用 Chrome 浏览器的“审核元素”查看代码,然后把代码复制出来(全部代码,或者只是在 <body…… 节点上右键 COPY ,或者……你要是看得懂代码就不用我说了),然后粘到工具里,自动提取本页所有图片(我是只本页显示的淘宝图片空间里的图片,不是指所有网页图片)的图片地址就都被提取出来了,做什么都很方便哦。

9. 切片图片批量替换工具:跟上边的工具联合用效果超群,可以把上面的图片地址自动替换进 Photoshop 切片后生成的代码中。

单看上面的文字描述,你会觉得有些不好理解。但是点击每个工具下面的“点击进入”打开该在线工具页面后,你就能很直观地看出来是怎么一回事了。稍加试验,你就能很快上手,然后得心应手地为您的淘宝店铺服务了。

在这里感谢作者 @自己 为代码小白的淘宝掌柜们开发了这么一款好用的淘宝设计师在线工具箱,也希望这个工具箱的功能越来越完善、越来越强大。

淘宝设计师在线工具箱地址:主站 || 镜像

给我留言