关闭→
当前位置:趣知常识网>游戏数码>电脑>淘宝装修店铺搜索功能教程代码装修教程天驭设计

淘宝装修店铺搜索功能教程代码装修教程天驭设计

趣知常识网 人气:1.43W

店铺搜索功能是重要的淘宝引流工具,装修好了此页面,可以提高转化率。
希望大家通过本教程学习可以学会 如何对淘宝搜索功能 进行代码装修。

操作方法

(01)在装修之前首先需要我们先安装好两个软件Adobe Dreamweaver以及Adobe Photoshop。这两个软件我会共享在qq群里面,大家需要的话加群下载。

淘宝装修店铺搜索功能教程代码装修教程天驭设计

(02)下面我们开始学习如何装修店铺搜索功能。1.我们将已经准备好的店招图片用PS软件打开。将店招切成两个部分, 左边是店招,右边是搜索框内容。

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第2张

(03)我们会把搜索框的图层关闭掉,如图:

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第3张

(04)选择店招的图层,选择左边的店招,再如下图所示点击,将左边店招的效果拷贝下来。再新建一个文件,将刚刚拷贝下来的内容粘贴上去。

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第4张

(05)选择店招的图层,选择左边的店招,再如下图所示点击,将左边店招的效果拷贝下来。再新建一个文件,将刚刚拷贝下来的内容粘贴上去。

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第5张

(06)粘贴好了之后再将效果图存储下来,注意,保存的时候可以起个名字,以免混乱。如:店招招左边。

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第6张

(07)点击菜单栏中的“文件”“打开”,打开之后选择这个代码一

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第7张

(08)打开代码之后我们再新建一个文档,如图:

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第8张

(09)打开淘宝图片空间,把上传的店招左边图代码复制下来,粘贴在刚刚新建文档的双“body”之间,如图:

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第9张

(10)将代码粘贴好了之后,这一步我们是要给店招加上链接,我们先点击到设计页面,看一下图片是否显示正常。然后选择软件左下方的热点工具。对需要添加链接的绘制热点,绘制完成如图:

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第10张

(11)然后进入淘宝复制链接贴入相对应的板块当中。当我们把所有的模块链接都添加好了之后,把两个“body”之间的代码拷贝下来。再打开刚刚的“搜索功能代码”。将拷贝下来的代码粘贴在两个“店招内容之间”。

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第11张

(12)所有的链接都贴好了之后,再次把两个“body”之间的代码拷贝下来,再打开淘宝店铺装修后台,在店招的位置双击。再按照下图操作:

淘宝装修店铺搜索功能教程代码装修教程天驭设计 第12张

(13)编辑好了之后我们再发布出去,那么我们今天学习的淘宝装修搜索功能就完成啦。后面还有第二种效果图,由于图文解说有限,更多的详情就请观看上方视频。

特别提示

注意代码下载

如有不懂可以看上面视频教程

TAG标签:#装修 #天驭 #淘宝 #店铺 #代码 #