上期讲到促销栏的制作,提到准备把客服区改到左侧。那我们就开始做客服区吧!为了有拓展版的效果,在尺寸上和右侧的促销栏要统一。
打开ps新建图层190*410
调处标尺线,把图层分为上270 下140.
用文字工具写上‘客服中心service’ 和‘请按功能点击以下亮灯客服’。注意这里的字体和促销栏保持一致
写好文字,同样用混合选项做投影。右键点击相应的文字图层,在弹出的选项框了点混合选项
做好投影及其他相关选项后,点击“好”
再用矩形工具选个矩形框,并填上营业时间
下面我们再到网上搜索个关于“热卖”的图片并把他拖拽到我们需要制作的图片里,再写上热卖字样
也按上面的方法做混合选项,同时也给上半部分描边。这样是为了给人感觉这不是在一个图层里,更多的是为了能和右侧的自定义模块融为一体
好了,我们下一步就进入切片。就选定我们需要在里面输入信息的(也就是下面的切片3)其他的就由它自动生成,这里一共有5个切片
储存为web所用格式,
存储好后得到一个文件夹和html文件
打开DW
文件-打开
选择拆分
接下来我们上传这个文件夹里的所有切片到图片空间里
选择全选-上传
上传好后不要关闭,小化。因为接下来我们要用到这5个图片的网络地址
双击DW中的图片区域的切片1
弹出下面这个界面
在图片空间里找到对应切片的地址,填到URL地址栏并覆盖原有的地址
覆盖后点确定。同样的方法换掉所有切片,这里有5个。上期也讲到怎么样寻找对应的切片,这里就不多说了
5个切片都更换完成后,再单击这里。DW代码区相应的地址会蓝底显示,此时再单击蓝底代码前的<td>
点住td后DW的底部会弹出以下这个界面
此时需注意上面的3个红圈,填入宽和高 还有背景地址,这个背景地址就是这个切片的网络地址
填好后需要再次单击这个切片,并删除这个切片
现在代码区就变成这样显示
换好后,这个区域就成虚线框了。我们就可以在里面输入文字或图片
这里我们就要插入旺旺的头像了,怎么获得呢?
首先打开淘宝网首页
在淘宝首页的左侧会有这样一个页面,点击‘阿里旺旺’
单击它选择‘卖家专用版’
选旺遍天下
在红圈里输入你的账号名再点生成网页代码
这样我们就获得旺旺的头像和“和我联系”的代码,下面我们继续
点击插入的下拉菜单中的‘图像’
把URL地址改成刚才在旺遍天下获得的图片地址,点击确定
确定后就自动生成啦
同样的方法做多个旺旺头像
单击和我联系图片,底下会出现个链接框,在里面填上在旺遍天下获得的另一个代码
填好所有E客服的头像和链接后,这就算完成了。 关闭DW,在提示里选‘是’
用记事本的方式打开全部复制下来。
店铺装修-左侧添加自定义模块-编辑-选html-粘贴-保存-发布
大功告成
展示下综合效果
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源: 图解教程教你淘宝店铺左侧客服模块代码