摘要：
　　经过一个月的奋斗，淘宝装修免费代码在线生成已升级到了v0.5，无论是在功能还是在用户体验还是在代码方面，都付出了大量的时间、心血及精力。下面我们来看下在线生成v0.5版都有哪些改动，以及一些工具如何使用吧......

一、前言

历时一个月的艰辛研发(2016-06-23号开始)，在线生成v0.5即将以全新的面貌及超强的功能回馈给各位给看官！目前，新版界面及主要功能已快开发完毕，剩下的就是对每款软件进行重新编写了(这个工作量又得1个来月......)。下面，让我们一起来看下这个v0.5版到底增加了什么功能、又增加了哪些微妙的用户体验？

二、v0.5版界面

在软件的顶部，新增了悬浮导航栏。主要的按钮及帮助及软件相关内容会放导航中，这样比较方便使用。配图一张：　

导航下面就是视图区了，这里依然保留了时时更新的特点。即：看官修改尺寸或更换图片时，此区域会及时发生变化，更直观的让看官看到时时效果。除此之外，视图区中新增了一些悬浮功能面板，这些面板提供了不同的软件中的不同功能。来张配图吧：　

再下面就是正常评论区了，有问题、有好的建议都可以在此发表。但是，如果不按要求发表无意义的内容，是会受惩罚的哦！所以，请发表前看清注意事项。

上面把界面说完了，是不是感觉也没什么呀，不过不要着急，牛逼的地方都在后面呢！下面开始了。

三、v0.5版如何节省看官的宝贵时间？

举个例子：在旧版软件中，某看官看中了一个特效。然后花了3分钟完成了效果，然后小兴奋的安装到店铺中。老板看到后提出了表扬，然后奖励了xx元RMB给这位看官。一个星期后，老板说这个要修改了，然后这位看官就又来使用这款软件，然后又花费了3分钟重新制作了一个特效。然后又一个星期后，又花了3分钟做这个特效。......

虽然说上面的例子不太科学，但万一看文章的看官你就这么科学一下呢？那结果是不是很......

所以，艺灵在v0.5版新增了导出模板功能和导入模板功能，有了这个功能，接着上次的编辑，那都不是事儿！

3.1、导出模板功能如何使用

看官注意了，艺灵的这个导出模板跟其他网站中的不太一样，有些网站把正常的生成代码功能命名为导出，所以看官在使用的时候，千万别混淆了！

当看官在制作完一个效果后，如果觉得日后这个效果可能还需要进行修改，那就请您点击下这个导出模板，稍等片刻后，系统会自动生成当前软件的模板代码，然后您把生成的代码保存到本地就行了。配图一张：　

导出前，所有必填项都要填写，否则无法导出模板。建议看官在完成最终效果后再使用导出模板功能。

3.2、导入模板功能如何使用

当您想接着上次的代码进行编辑的时候，点击导航上的导入模板按钮，然后粘贴上次导出模板代码进来，然后点击确定就可以接着上次的编辑了。是不很赞！！！配图一张：　

1、导入的代码必须是本站的代码；
2、导入的代码需要与软件相匹配。比如：导出时的软件是全屏海报，导入时就要到全屏海报这个软件中导入，不能到其它软件中导入。

四、v0.5版新增了哪些小功能？

4.1、身份选择

在右侧主面板的最上面，有一个身份选择的地方。配图：　不同的身份有着不同的权限，身份级别越高，权限也就越高。当然了，这里指的权限是免费的哦！！！但不要高兴的太早了，虽然艺灵说这个权限是免费的，但看官未必能享用。

屌丝身份，对应的是最底层的服务，软件会给你自动关闭掉一些不需要操作，看官也可以理解为：此时是阉割版的软件。
小资身份，权限比屌丝稍微高一些，会让开放一些基本的操作给看官使用，如果觉得麻烦，请切换身份。
神壕身份，最高权限，软件中的基本功能都会开放，但付出的代价就是：太多的编辑框，编辑起来有点累。神壕还有一个功能，那就是：软件会自动生成一些必要的css效果，比如说：鼠标滑过效果等。配图：　

关于css一事，艺灵真不想再提了，但总有那些些看官从来都不看字！！！

1、京东、阿里巴巴、蘑菇街等店铺暂时是免费开放css的，所以你可以使用艺灵软件生成一些带css的效果；
2、淘宝、天猫店铺中的css已被抽成一个名叫旺铺css的服务，费用是2400每年，所以你在选择css的时候，请先看清你到底有没有权限！别折腾了很久最后是瞎忙活一场！；
3、艺灵提供破解css权限的服务，费用是50元，如果淘宝不屏蔽，永久使用。屏蔽了就认了，全当碰运气吧。有需要的找我。

4.2、功能面板

如果觉得面板太多，影响了看官的编辑操作，切换成关闭状态即可。配图：　

4.3、拖拽功能

为了更好的让看官编辑，视图区默认开启了拖拽功能。即：按住主图后可以拖拽位置，编辑过程中会用到。如果不想使用，也进行关闭。配图：　

4.4、视图提醒

开启后，视图区用红色虚线边框显示，注意自己的代码要在此区域内，超过后会被隐藏！如果不想使用，也进行关闭。配图：　

4.5、序号提醒

每一张视图都用序号进行了标识，便于看官清楚的知道自己编辑的是哪一张图片。如果不想使用，也进行关闭。配图：　

4.6、漏填提醒

有一些选项是必填的，比如：图片地址、链接地址、尺寸大小等。开启后，这些必填的地方如果没有填写，就会用加粗红框标出，利于看官修正错误。如果不想使用，也进行关闭。配图：　

4.7、防盗功能

开启后再生成代码，别人直接在你的图片上右键就复制不了图片地址，可以简单的起来防盗图作用。如果不想使用，也进行关闭。配图：　

4.8、画布高度

可视区均在画布范围内，如果发现可视区显示不完整，请修改画布的高度。配图：　

4.9、快速清空

如果需要清空一个文本框中的内容，鼠标放到文本框上面，然后点击右侧的扫帚图标即可快速清空。如果看官不使用这种方法，可以使用Ctrl+A先全选，然后再按Delete键进行清空内容。配图：　

4.10、跳过必填项

默认情况下，必填功能都是必要的，必须要填写。如果看官想跳过，也是有方法的。鼠标放到必填项上面，点击右侧的方格图标即可。此时必填项中会用默认内容替代，然后就可以跳过了。配图：　

4.11、查看功能

想看完整的链接地址？想看图片地址对应的图片长什么样？那就鼠标放框框上面，然后点击右侧的查看图标即可。配图：　

4.12、可用工具

这个是一个非必要的功能，但总有些奇葩的看官需要各种各样的功能，所以呢，这里就有了这样一个工具箱，根据自己需求进行添加即可。工具箱在后期还会进行新增很多功能。目前已有工具配图：　

4.13、高级工具

这个一般用不上，但在某些情况下可以用上。比如：给每张动态的轮播图添加多个链接。具体使用方法：
1、选中开启；
2、鼠标放到想要添加的工具上面，此时在右侧会有一个小弹框，在序号那个框中填写序号(ps:每张图片都有一上序号，这个应该不用教了。如果不知道序号是什么，建议向上拉看相关的解释)；
3、然后再去单击一个工具即可。
如果序号不存在或选择了静态框架，此时相当于关闭了高级工具！配图：

五、v0.5版做了哪些潜在的优化

5.1、重新编写软件

所有软件的源码均重新编辑，功能也会进行适当增删。这个工作量非常庞大，所以软件会一个个更新到新版。在未更新成新版前，旧版软件仍然可以使用。

5.2、生成代码

点击生成代码后，如果系统检测到有未填写的必填项，会进行智能提醒：强制生成还是返回修改。至于后果，提示中已讲的很明白了，这里不再啰嗦。

5.3、预览代码在哪里

怎么找不到预览代码的按钮了？看官别急。当您生成代码后，就可以看到预览的按钮了，然后点击就可以预览最终的效果了。配图：　

5.4、代码容量提醒

有些看官也不知道怎么搞的，在淘宝或天猫后台提交内容的时候被提醒超过50kb无法保存。所以呢，艺灵的软件对每次生成的代码会进行一个预估，看官注意哦。配图：　如果您想添加超过50k的内容到店铺，可以到艺灵店铺拍相应的宝贝来开通这一权限。

5.5、提示功能

不管是添加工具还是删除工具，操作后都会进行智能提示，注意看字哦~~~

下面再来说下关于工具箱使用的问题。

六、v0.5版可用工具如何使用

6.1、如何添加工具箱中的工具

记好了：鼠标放到想要添加的功能前，单击即可添加。配图：　

6.2、添加的工具在什么地方

添加的工具均在视图上，如果看到不到，请向右拖拽主视图。因为工具是从左上角开始添加的。配图：　

6.3、如何编辑已添加的工具

鼠标放到视图区中的工具上面，双击即可编辑。配图：　

6.4、如何删除已添加的工具

双击想要删除的那个工具，向下拉，点击删除按钮即可。配图：　

6.5、编辑的工具没有效果是怎么回事

那是因为你编辑后没有点击确定按钮！！！。配图：　

6.6、点击确定后提示必填项什么的是怎么回事

看字啊！必填项不能为空，把加红框的地方填写对应的内容就行了。配图：　

有关工具箱中各工具的使用，请看下面的例子。只要会一个，基本上都会了。

七、工具箱中各功能用途及名词解释

7.1、商品

最终的效果配图：　下面开始讲如何编辑一件商品。

双击视图区中的商品图标后会显示编辑框，配图：　这里默认显示了4个不同的功能设置，如果把弹出功能开启的话，此时会再多出一个图标设置的功能。建议非神壕身份的看官不要开启弹出功能，毕竟是有css的，玩不起就走大众路线也挺好的。点击不同的设置，可以进行伸展或收缩选项，如果出现滚动条，说明向下拉还有内容。

如果看官没有div+css基础，不建议向下看。虽然没基础，但不影响工具的使用。看官先将身份切换成屌丝，然后再来编辑工具就会发现非常简单！记住，没基础的就使用屌丝身份，要不然，你懂的......
下面的教程将是以神壕身份的权限来进行全面讲解。

我们先来编辑商品设置，一共有8处填写项，配图：　链接地址：可以放淘宝允许的超链接，比如宝贝链接、收藏链接、活动页面链接、优惠券链接等。
链接类型：默认都是新窗口打开链接，看官可以进行选择。
图片地址：就是一张图片的路径，去自已的图片空间选择一张图片即可，注意别复制错了。
默认边距：如果想让图片与其它内容章保持一定的距离，可以在此处设置。这里只有两个框，第一个框表示上边距，第二个表示下边距，左右不用设置，软件已设置为默认。
图片圆角：4个值依次表示左上角，右上角，右下角，左下角。默认是10，自己可进行修改，但值必须不能为负。最后一个下拉框是单位。
图片缩放：第一个框表示x轴，第二个是y轴。
动画时间：鼠标滑过的时候有过渡的时间，单位是秒。
动画效果：6种效果随便选。最后一种可自己设置成带弹性的效果。

价格设置中一共有9处填写项，配图：　价格功能：关闭后，此处设置的内容不会显示出来。
价格、字号字体、加粗、行高、对齐、颜色这些都比较简单，如果不会修改，建议去温习下div+css基础，快捷通道→→轻松学会div+css13字体font-family属性讲解
滑过颜色：鼠标滑过的时候显示的颜色。鼠标放此框上，会显示颜色库和透明色，自己可进行选择。

标题设置中一共有14处填写项，基本上和前面的价格设置一样，配图：　

弹出设置中一共有11处填写项，配图：　

其实，弹出功能还是比较复杂的，如果开启弹出功能以后，图标设置就会显示，之前默认显示的内容区就示显示了。只有当鼠标滑过图标的时候才会进行显示。配图：

图标设置中一共有5处填写项，配图：　

填写或修改完成后，点击确定即可看到效果。

如果看官会使用商品功能的话，剩下的工具操作都是一个套路。

7.2、视频

视频中新增了一个非常牛b的功能，那就是视频外观，也可以理解为改变播放器的外观。曾经有看官需要隐藏视频下面那块黑色的进度条，现在终于可以实现了哦！而且目前为止，艺灵应该是全网第一家免费提供了这个牛b的功能的网站，哈哈。配图：　视频外观：提供几种不同的外观供选择，可隐藏进度条哦！配图：　自动播放：该功能只支持淘宝视频，外界视频不支持。

7.3、热区

该功能可以给一张图片添加n个不同的超链接！右下方的红点表示：按住后移动鼠标位置就可以调整热区大小。配图：　

八、其它一些问题

8.1、使用全屏海报工具时，如何再添加或删除一张海报

添加功能：鼠标放到面板中的上面，点击一次添加一张图片，支持无限添加。
删除功能：鼠标放到面板中的上面，点击一次删除一张图片。删除时，注意看清删除的序号，别删除错了。配图：　

8.2、链接地址是什么

就是超链接的意思，看官可以填写某款销量好的宝贝或收藏链接或优惠券链接等等。

8.3、如何获取我想要的链接

通常情况下，鼠标放超链接上面右键--复制链接地址即可。配图：　但有些链接是通过javascript实现的，此时这种方法就不行了，需要用其它方法。比如：审查元素等。

8.4、图片地址是什么

说白了，一张图片的路径。例如：看官本机c盘x文件夹下的图片，而这个c盘x文件夹就是路径。但对于网络而言，如果需要让别人看到这张图片，看官直接把这个c盘x文件夹的地址发过去是没有用的。艺灵知道，也许看官曾经就这么干过类似的事情。那怎么办呢？使用网络(可访问的服务器)路径。

8.5、如何获取图片地址

如果是复制别人的图片地址，看官可以参考上面8.3的方法。当然，这种方法有时也不行，因为图片做了背景，所以要用审查元素。来截图一张吧：　如果看官需要复制自己图片空间的某张图片，请看下图：　

关于工具中的一些功能，其实我觉得有时越讲反倒越让看官不能理解，看官可凭自己的经验理解，只要看官觉得达到效果了就行了。下面再说几个其它的问题。

8.6、中彩蛋是什么鬼

一般情况下不会中彩蛋，既然看官能中彩蛋，那就稍微休息一下，别点的那么快、那么频繁嘛。配图：　

8.7、如何区分是否可拖拽

1、拖拽的地方都以淡绿色表示出来了，按住即可拖拽。
2、工具箱中的工具添加后，看字就行，别不看字。
2、鼠标放到元素上面，注意观察鼠标的形状。配图：　

8.8、关于手势

1、拖拽的地方都以淡绿色表示出来了，按住即可拖拽。
2、工具箱中的工具添加后，看字就行，别不看字。
2、鼠标放到元素上面，注意观察鼠标的形状。配图：　

好了，基本上，在线生成v0.5版中的一些新功能、优化项、技巧等都已回答完毕。如果看官在日后使用过程中遇到问题了，请先仔细地、一个字一个字的看错误提示，然后对着提示进行修改就好了。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2016-07-23/423.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。