最近淘宝天猫后台装修大改版，之前的750尺寸和自由的切图都改变了
新版手机端装修修改了哪些？设计又该如何处理？可以查看我之前写的这篇文章
https://mp.weixin.qq.com/s?__biz=Mzg2OTYxODMzMw==&mid=2247483678&idx=1&sn=5417adbfa33d3d47cc9e595dda3e8d11&chksm=ce9b06ecf9ec8ffab743099d04db2d714251bede15676b612d80999d723dca399d1cfa0f9314&token=1184019484&lang=zh_CN#rd
那么对于刚入行的小白，没接触过淘宝天猫后台，需要注意一下几点
这里我们分为 PC/电脑端 和 手机/无线端，现在的重点是手机端
1.开通智能版店铺装修 99元/月
只有开通了智能版，才能使用美颜切图等功能，虽然新版首页不使用美颜切图了，但是活动承接页（二级页）还是用的750px尺寸的老版本（px是像素的意思，店铺所有尺寸数字的单位都是px），其实也挺离谱的，相当于设计得记2种思路...当然如果只是普通的直接切好图放进去，那就只用做一种即可，PS直接改下尺寸就好
基础版的尺寸为640px，长短也短了一些，而且只能加一个链接跳转，非常不方便，尽量让老板购买智能版
我之前的一家公司，因为前期产品很少，大概就几个，就没有买智能版，在使用上就各种难受，但是老板不买也没办法，凑合着使用把...
因为现在店里都是开的智能版，也不知道更新后的版本基础版是怎样的，不过按照淘宝的套路，好用的工具都是要收费的...
2.PC/电脑端
这里就要讲到DW软件这个软件了
招聘信息里写的，要求会DW，对于小白真是摸不着头脑，当初我也是...
其实DW指Adobe Dreamweaver，一款用来做网页代码的软件，用在PC电脑端后台上
要使用DW，需要在PS里对图片进行切片，后面再讲如何在PS里切片（新版的手机端和PC端都要切片），如何使用DW和代码（其实很简单）
新版PC后台（PC/电脑端）
如果顶部没有店招，从左侧拖到顶部位置即可↓
【店招区域】，双击可弹出，直接插入图片，尺寸为950*120px，如果不想要系统自带的导航栏，可以把尺寸加宽到150px，把自己设计的导航栏图片，做成切片再加入链接即可（尽量不用搞麻烦的，毕竟没啥人看）
【导航栏】
这里的颜色、字体、宽度什么都可以用代码一键生成
（代码生成网站 https://www.yymoban.com/tool/daohang/）
我直接百度到的 这种网站都差不多 自己百度一下关键词“淘宝店铺代码一键生成” 即可
像是【页面部分】，我一般使用自定义模块，加入全屏代码即可，尺寸1920*1080
这里分享一串全屏代码，公众号后台回复：PC端DW全屏代码
有时候模块放不进去，可能是布局管理出问题了↓
【其他】
装修好了首页，其他也要稍微弄一下，统一即可
【侧边栏】
有些页头/页面显示颜色不对，在这边修改
最后一个CSS就是花钱的了，可以随意写代码，一年2400
一般店铺基本都不做PC端了，但是有些老板也会要求稍微弄一下
如想要花俏一些的，可以使用各类代码生成，我在使用DW的时候，只使用了全屏直接展示，没搞啥花里胡哨的，什么悬浮、弹出、各种特效，毕竟现在99%都使用无线端下单了
也有直接使用各类生成代码的软件，如：
后台里面还有个服务装修市场，里面有做好的模板，按月收费几块到几百不等
https://zx.taobao.com/
3.新版手机/无线端
这里可以查看之前写的文章
有些店铺首页有视频，动效，基本就是买的插件了，那天运营看了一下几万一年吧....
【二级页/活动页】
也有可能使用倒数第4个 大促承接页，看运营或者活动报名里面写的要求
一般弄店铺上线/折扣活动/会员专区等，都可以使用
使用老版尺寸750*335-2500，基本上我都使用的美颜切图模块
美颜切图就很简单了，里面可以随便加热区链接，相当于你的产品可以随便摆放，没有限制
定时发布功能 说是上线了 但是没看到...
4.DW使用方法（PC端）
以我分享的代码为例
在PS新建1920*1080尺寸，分辨率72（网页72够用）
使用切片工具，给图片划出想要的尺寸大小（如果是多图，一排高度最好要保持一致，不然代码容易错乱）
划完之后，会显示橘黄色框框，划一片就是单独一个图，如果多图，可以先啦参考线在划，会准确一些
这里一定要选择HTML和图片格式
桌面出现一个文件夹
打开后台 图片空间，新建一个文件夹放图片，不然到时候很乱
上传文件夹里的图片
打开DW，把文件夹里的HTML文件拖入
回到图片空间，复制图片链接，把代码里的部分替换为图片链接
多个图就有多个img src=images开头的位置，顺序替换就行了，记得保存
打开分享的代码，复制
打开店铺装修的自定义区域，把代码粘贴进去
再把DW里的从 title到body 复制进去，确定即可
点击右上角预览，看下效果，有没有居中对齐
有点歪，调整代码里的数值，-1000我改为-950
这里的长度，改为图片长度，你图有多长就改多长，一般首图海报为一版，优惠券之类的一版，产品一般或者多版，即可（不过当比较长的时候，代码容易出错，可能会出现反复改的情况，实在不行就都放在一版里）
总结：
1.PC虽然基本没啥用，但是不排除有些老板要弄
分享一串全屏代码，公众号后台回复：PC端DW全屏代码
【导航栏】代码生成网站 https://www.yymoban.com/tool/daohang/
【页面部分】小语言http://www.zxtb.net/temp/
2.主要精力放在手机端上，注意新版的各种变化
查看之前写的文章
3.活动页使用老版尺寸750
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
猫眼C
全部评论()
还没人评论，赶紧抢占沙发