快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 如何制作精美网店导航条教程

如何制作精美网店导航条教程

放大字体  缩小字体 发布日期:2024-04-01 07:38:23  来源:电商联盟  作者:乐发网  浏览次数:22

  店铺导航是网店的一个关键部分,谁都想让店铺导航有特色,那么这就需要自己设计,自己制作了,今天我们就来介绍下如何自己制作店铺导航。


  一、我们现在去找一张图片,就是要做成底图的图片,宽度建议为1500以上,因为现在很多电脑都是宽屏的,如果太小了,两边会出现背景的填充了,我找到的是下面这张图片!这张图片命名为1


  二、以下是PS处理,懂的可以了解下,不懂的可以跳过!


  1、用PS打开这张图片


  2、然后新建一个图层,画一个950PX*150PX的矩形!并靠顶部居中!


  3、用裁剪工具剪下上面部分


  4、裁剪好的图片尺寸是1500*150的,然后将那块红色的矩形隐藏(不要删除,后面还有用),保存图片就得到了下面这个图片,你将它命名为2


  5、接下来将隐藏的矩形显示,之后按照矩形的大小裁剪,裁剪出950*150的效果图


  6、裁剪好的图片效果就是下面这张了!将其命名为3


  7、现在就按照自己的意思去设计自己喜欢的导航咯,内容自己选,你不喜欢首页按钮,不做就可以了,你如果需要联系QQ的按钮也都可以自己加进去的,我现在做了的分别有(首页、宝贝分类、关于我们、店铺动态、友情链接和收藏)


  效果如下


  7.1、以上效果做的过程为,先画一个矩形,用编辑→变形→倾斜效果将其做成倾斜的,透明度为44%,阴影颜色跟前色相同,达到以下效果


  7.2、在加上斜线和文字就完成效果了!


  8、接下来就是最重要的步骤了,想学的要耐心看下去哦!利用PS的切片工具将导航中的每一块按钮都分别切开,切好效果如下


  9、接下来我们就保存它,选择PS菜单栏上的文件→储存为Web所用格式(快捷键:shift+ctrl+aly+s),在弹出的窗口中,格式选为jpeg 品质为最高100!


  


  10、单击下面的“储存”,在弹出的窗口中,将格式选为“HTML 和图像”然后再保存!


  11、保存下来有一个images文件夹,还有一个网页文件!


  12、images文件夹里面就是切开的图片!


  13、我们用记事本工具打开3.html文件(网页文件)


  14、我们可以看到一切代码,看到这些先别头疼,其实很简单的,按照我说的做就可以了!

  14.1、先删除……这部分以上的内容,也就是删除前面7行代码!


  14.2、后面以后的内容也删除掉,也就是最后的3行代码!


  14.3、剩下的就是我们需要的代码!


  14.4、现在先将images文件夹里的图片上传到淘宝的图片空间里!名字不要改!


  14.5、将代码中红线标出的本地图片连接换成刚刚上传上去的图片连接!


  14.6、换的时候只要对应的名字去换就不会错了,比如images/3_01.jpg就换成图片空间里3_01的图片,全部换好后的效果如下


  15、这样我们PS中要做的事情就全部做好了,接下来就要到自己的店铺里去装修了!先打开装修页面


  16、我们先设置店招,选为“自定义招牌”,然后按下工具栏中的“源码”按钮,之后将刚刚我们修改好的代码全部复制到编辑框内!还有将高度设置为“150”!


  18、然后在点店铺编辑,选中“首页”图片


  19、再按下工具栏中的“插入连接”,输入你的店铺地址,按确定!


  20、这样做好之后,首页按钮就起作用了,其它分类都是这样添加就可以了!,找连接的方式很简单,只要你在原来的店铺中单击相应的按钮,打开页面后复制那个地址就对了!,比如 “宝贝分类”,你单击一下宝贝分类之后就会进入宝贝分类的页面,然后复制地址栏里的连接,拿来做超链接就可以了!

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 如何制作精美网店导航条教程

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝店铺装修如何实现全屏轮播 淘宝店铺,天猫店铺背景固定的方法。
淘宝装修子账号设置流程 7个步骤打造史上最牛详情页
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问