电商设计第五式-实战篇（品牌店铺后台代码装修实操）
时间：2022-08-03 05:45:02 | 来源：网站运营
时间：2022-08-03 05:45:02 来源：网站运营
大伙们的DW准备好了么？这一式池子要给你们放实操大招。用最少操作步骤带来最优效果的方式，小板凳坐好，小本本拿好，操练起来。
前面的理论讲解一个页面制作出来后，实际想要上到店铺后台实现使用效果，就要使用代码工具，一般都使用DW，或者醉语言，六月设计等相关代码装修工具，我这里就讲最基础的使用工具，其余工具原理一模一样，很多人看到代码都头疼，其实简直不要太简单，因为电商店铺代码不用自己去写，基本都有现成的代码直接套用，只要记住粘贴复制的位置就行。这么一说，你还害怕么？
使用代码工具之前，需要先熟悉天猫官方装修配套的【图片空间】，自己设计保存好的页面图片通常都是直接上传到这里来的，才会有图片链接和代码生成，有了链接和代码后，才能使用接下来要讲解的DW，老规矩，上图！！！
看图片位置，点击进入就可以了。
出现图片空间界面了，
上传图片到图片空间，这个步骤玩过QQ空间相册的人都知道。（是不是暴露年龄了？嘿嘿嘿）
等到图片上传完成后，每个图片底下会有如图所示的标示，选择你要做链接效果的图片，点击第三个按钮（复制代码）就可以有复制到的代码到DW里了（任何图片都是这个原则，
一定要记清楚）
打开DW，出现如下界面，鼠标双击新建HTML
会看到以下界面，刚才是不是在图片空间里头已经点击复制代码按钮了？那么现在请粘贴到如图所示的位置（一般我们在复制粘贴代码的时候直接放在<body>后面就可以了）
池子这里复制了一段第三方全屏代码，仔细看我复制到的位置，
如果不想记位置的，还有一个简单粗暴的方式，直接全选新建HTML模板里头的所有代码，然后删除，在空白的模板里头直接粘贴复制自己要做的第三方代码就行。
代码复制进来后，我们要开始进行编辑，继续看，点击途中红框【设计】位置，
就会看到此界面，看截图红框位置显示有【地图】【链接】【目标】以及底下的黑箭头鼠标，咱们一个个讲解，
第一步【黑箭头】
这个就是点选热点区域的（热点区域就是专门用来做链接的，最终的展示效果就是你用鼠标点击画面，就会有新的页面跳出来），右边还有矩形 圆形 异形之类的图案，就是画热点选区使用的，根据设计的页面内容来看，最常用的就是矩形和圆形啦，鼠标随便点击一个形状选区，然后在画面中央拖动画你想要做的点击区域，然后松开鼠标，画面就会出现
点击确定，那么你想要做的一个热点选区就做好了，
第二步【地图】
开始建立地图名称，默认的名称会导致热区做好放入页面装修模板里头鼠标点击后弹出的页面都是紊乱或者点击没反应的现象，所以地图名称一定要固定使用，相当于给链接做个固定标签，名称命名原则一般都是单个字母+任意数字的组合就行了，看图中示意。
第三步【链接】
可以添加你想要让这个鼠标点击后蹦出的新画面链接，添加的位置在此，直接粘贴复制你想要添加的页面链接到这里就行了，记住一定要把默认的#字删除
第四步，【目标】
常用的直接选取_blank就行了，这个代表点击页面后，会有弹出新窗口的效果，其余的效果使用较少，所以一般不做太多考虑。
完成以上4步后，一个完整的页面链接就做好了，这个时候回到【代码】界面中去把所有做好的代码复制，如图，
画红框的就是需要复制的部分了，记住从<body>这一行的位置开始选取复制
然后把复制的所有代码粘贴到店铺后台【自定义区域】模块就可以了 （还记得么？）
就是这个界面，复制进去后点击确定，
一个完整的页面链接就做好了
然后点击【预览】,用鼠标点击下是否链接出现错误，最后点击发布站点就完成了。
以上，便是店铺PC端后台基础装修的所有流程，有些同学可能就会疑问了，手机端的装修流程呢？那个实在是太过简单，就跟玩QQ空间一样，对后台不熟悉的小伙伴们，请往回看上一篇，手机端装修的入口界面就在里头，然后让你们的老板一定要记得买“美切智能模块”，这样可以省去不少设计上的麻烦，现在基本每个店铺必备，（我前几个月接一店铺的时候居然发现店铺老板没有买这个模块，都9012了……）
熟练掌握好，争做老板的一块宝，哈哈。心动的赶紧操练吧。
接下来的招式也会逐步加大难度， 池子会加快进程更新。最近有不少私信池子的童鞋们，其中有直接跟池子要设计教程的，池子要明确说明一下，池子这里是解答设计疑难杂症共同交流的地方，你没有说明自己的设计疑问，就直接要教学教程，好比病人没有说明自己生的啥病就跟医生直接要药方一样的性质，池子是不会直接给的，怕你自己练习的走火入魔。要的话请各位明确说明自己现有的疑问和实际水平，池子肯定热心解答。
还有任何后台装修疑问的，也可以直接私信池子，本站一般都看。
在线咨询
