导航条淘宝店铺装修之制作全屏店招

淘宝基础版全屏教程1、首先需要准备的：dreamweaver软件，photoshop软件，1920*150（160）的店招，1920*X（任意高度的主页海报）2、在dreamweaver中新建html,在html的body之间粘贴淘宝图片空间的图片源代码（是源代码，不是图片的链接，源代码在图片空间的链接旁边）如图：3、在dreamweaver的设计栏中看是否显示图片（此图片是店招图片，尺寸750*150）；如果不显示，就把之前粘贴的源代码中https://的S去掉，变成http：//，这样看看设计里面能否正常显示图片。

4、能显示，然后在设计栏，对图片添加热点，热点的作用是加链接，点击链接能够跳转，在添加热点的时候注意的地方：热点的属性中地图栏填写ID001，是个名字啊；属性中的链接填写要跳转的地方，比如收藏的热点，链接就复制店铺的收藏链接；属性的目标填写：-blank；如图：5、将代码中BODY之间的代码复制粘贴到导航栏的源代码处如图：6、这个时候在导航栏就能显示图片，而且图片上的收藏，或者商品都能点击跳转了，但是图片不是全屏，接下来复制全屏代码此处的图片是店招背景图片，尺寸是1920*150；此处的代码放在分类里面，就是导航栏里面如图：然后发布预览，就实现了店招全屏了。

上面说的店招图片（前面的那个，做了热点的，尺寸750的，后面背景的1920的，都是带导航类目，就是分类）7、接下来做海报部分，就是产品展示部分和上面的一样，现在dreamweaver里面加需要在主页展示的产品图，然后在淘宝装修页面加自定义模块，在自定义模块粘贴代码这个时候粘贴过来的产品海报图不是全屏的，加入全屏代码把上面的代码复制粘贴在dreamweaver刚刚编辑的里面这个时候就实现了主页海报产品的全屏。

7、在最海报的时候注意事项：淘宝全屏海报的所有图片高加起来等于海报全屏代码中的数值，否则会出现最下面六空白或者无法显示。

所有问题全部讲解完了。

店招的制作
店铺招牌是旺铺所有版本通用模块。

所不同的是：
扶植版、标准版店招店招的高度可以调整，区间：100-150(px)相素。

宽度是950(px)相素。

拓展版、旗舰版店招的高度可以调整，区间：0-200(px)相素。

（拓展版、旗舰版店招可删。

用自定义区代替。

）
店招是店铺第一屏内容，是买家进入店铺看到的第一个模块，是打造店铺品牌的最好阵地，也是让买家瞬间记住店铺的最好阵地。

现在店铺的店招一般都是走两个路线，但比较好的店招都是和促销区呼应的，特别是风格、颜色。

第一个，就是传统性的店招，通过掌柜的用心装修而强调品牌，如下：
第二个，就是非传统性的店招，完全和促销区或者左侧栏融为一体，如下：
如何添加店招呢？
操作步骤如下：
点击“我是卖家”---“店铺装修”
在弹出的窗口中可以更换现有背景图，也可以直接点击“在线编辑”：
点击“在线编辑”后会自动跳转到banner maker 页面，挑选自己心仪的店招然后点击“开始制作”：
点击”预览/保存“按钮后便可以输出修改好的店招最后点击”应用到店招“：
页面会跳转到店铺装修后台，点击”发布“即可！。

如何用EXCEL和画图来制作淘宝店铺的导航条
现在有很多人注册成为了淘宝网的店家，然而装修的问题让这些新手店主十分头疼。

在装修设置导航条过程中，有很多不同的制作方法，有使用AdobeDreamWeaver和Photoshop的店主，但是大多数对这些软件不熟悉。

今天就介绍一种用EXCLE和画图软件来制作导航条的方法。

EXCLE和画图软件来制作导航条的方法：
1、导航条宽带和高度的设置：打开我的EXCEL，拖动鼠标，把格式调成我们自己需要的大小，注意单位是像素。

2、导航条栏数，颜色，内容编辑：我们都知道淘宝导航条的宽度必须是950像素。

所以我们所设的导航条的宽度和一点要是950像素。

3、把EXCEL中编辑好的导航条保存成图片格式
4、怎么把做好的导航条添加到店铺中：在我们装修页面店招下添加一个自定义模块，然后编辑此模块。

在插入图片中，按顺序插入我们之前做好的图片。

图片插入完成后，我们可以双击图片添加我们想要的链接，最后保存，预览，发布就可以看到我做的导航条了。

以上就是通过EXCLE和画图软件来制作导航条的方法了。

淘宝店铺招牌装修教程淘宝店铺招牌装修教程指的是如何打造一个引人注目、吸引潜在客户的淘宝店铺招牌。

在互联网时代，淘宝店铺已经成为了许多创业者的首选，但面对竞争激烈的市场环境，如何通过店铺招牌设计来吸引更多的用户，提高店铺的曝光度和销量，成为了摆在很多商家面前的难题。

首先，一个好的淘宝店铺招牌应具备独特性。

在巨大的淘宝店铺数量中，如何让自己的店铺与众不同，显得与众不同是十分关键的。

可以根据自己的店铺特色，选择一个独特的招牌形象来提高店铺的识别度。

比如，如果你的店铺主营宠物用品，可以采用可爱的动物形象作为店铺招牌，这样能够让顾客一眼就能找到你的店铺，产生好感，提高购买欲望。

其次，一个好的淘宝店铺招牌应顾名思义。

店铺名称是店铺招牌的核心元素，一般能够直接表达出店铺的特色与卖点，引起用户兴趣。

店铺名称应该简洁明了，容易被记住，并且与店铺的经营范围相关联。

比如，店铺主营女性服装，可以用诸如“时尚女装”、“潮流女装”等名称，直接表达出店铺特色，让用户一目了然。

再次，一个好的淘宝店铺招牌应注重视觉效果。

在淘宝店铺中，视觉效果是最直观的，好的店铺招牌设计可以让店铺在众多竞争者中脱颖而出。

通过设计一个美观、富有创意的招牌图案，激发用户的购买欲望。

可以使用鲜艳的色彩，吸引用户的关注。

同时，可以运用图案与文字相结合的方式，打造独一无二的店铺招牌。

最后，一个好的淘宝店铺招牌应强调店铺品牌形象。

在设计店铺招牌时，应突出自己店铺的特点与定位，让用户一眼就能记住你的店铺。

可以通过标志、口号等方式来传达店铺的品牌形象。

比如，如果你的店铺以卖场为特点，可以加入一些标志性的元素，如超市购物车，以彰显店铺的特色。

综上所述，一个好的淘宝店铺招牌装修教程需要考虑独特性、顾名思义、视觉效果和品牌形象等方面。

只有在这些方面做到精准定位，才能够吸引用户的关注，提高店铺的曝光度和销量。

希望以上的建议能够给正在经营淘宝店铺的商家提供一些帮助。

网店装修最最重要的部分就是制作店招。

买家一进店铺，首先看到的就是店招。

如何制作出醒目又个性的店招，是每个刚开店的卖家最需要考虑的。

iSee现在教大家制作醒目的网店店招。

（淘宝网对店招的限制：文件格式GIF、JPG、JPEG、PNG；文件大小100k以内；建议尺寸950PX*150PX。

）先看看醒目店招效果图：静态店招：动态店招：添加动效文字：添加动态涂鸦：制作网店店招的步骤：1. 打开iSee软件，选择“在线搜图”，搜到喜欢的素材图。

点击上方工具条—裁剪。

进入“裁剪”的处理界面。

选择“固定尺寸”---分辨率：950×150px。

用鼠标左键拖动虚线框，选取需要的部分做背景图。

选好后，点击“确定”。

2. 制作静态店招图片。

点击左侧工具条---文字。

进入“文字”处理界面。

在输入框中加入店铺名称、地址、旺旺号等。

选择好字体、大小、颜色、旋转角度。

用鼠标左键拖动虚线框，使字体移动到合适位置。

可以点击“添加文字”，再次添加文字。

（如：店铺地址。

）iSee有很多文字效果：描边、渐变字、纹理字、泼溅效果。

可以结合这些效果，做出好看的字。

文字输入、调整之后，点击“确定”。

静态店招就做好了。

注意：文字添加时，尽量让店招的左下方空出来。

店招左下方是放店铺的导航区的。

3.制作动态店招。

⑴．添加“动效文字”。

在“文字”的编辑界面的右下方，有个按钮“添加动效文字”。

点击进入“动效文字”的编辑界面。

点击喜欢的颜色和效果的闪闪字。

进入“闪闪字”的编辑界面。

在文本框里输入要加的内容。

点击“开始合成”。

然后选择字体、大小。

鼠标左键拖动闪闪字，可以使闪闪字移动到合适的位置。

最后点击“保存”，添加动效文字就成功了。

⑵．添加动画涂鸦。

静态店招做好之后，可以添加一些动画涂鸦，做成动态店招。

点击右侧工具条---动画涂鸦。

进入“动画涂鸦”的编辑界面。

点击“在线素材”—装饰品。

选择喜欢的动画涂鸦。

调节好动效涂鸦的大小。

用鼠标左键移动到合适位置。

淘宝全屏装修教程淘宝全屏装修是一种能够充分展示产品和品牌形象的装饰方式。

在淘宝店铺中，通过设置全屏装修，可以提升店铺的视觉效果，吸引更多的购买者。

接下来，我将为您介绍淘宝全屏装修的教程。

首先，我们需要进入淘宝店铺的后台管理页面。

在页面左侧导航栏中找到并点击“店铺装修”选项。

然后，选择“全屏装修”模块，点击“开始装修”按钮。

接着，我们进入了全屏装修的编辑页面。

在编辑页面的左侧，有各种不同的装修组件可供选择，比如图片轮播、商品推荐等。

我们只需要按需选择装修组件，然后将其拖拽到合适的位置即可。

在拖拽组件到页面上后，我们可以对其进行进一步的设置和编辑。

例如，可以修改组件的尺寸、样式和内容。

如果需要添加图片，可以点击组件中的“上传图片”按钮，然后选择本地的图片文件进行上传。

同时，我们还可以对页面的整体布局进行调整。

通过选取不同的模板风格和调整页面的背景颜色，可以打造出符合自己店铺风格的全屏装修效果。

在进行装修时，建议保持页面的简洁明了，不要过分拥挤和花哨，以免影响用户体验和加载速度。

同时，也要注意图片的质量和大小，保证在不同屏幕分辨率下的显示效果。

完成装修后，一定要点击页面右上角的“保存”按钮，将装修效果应用到店铺的前台页面上。

此外，还可以在“预览”按钮下查看装修效果，确保页面的显示效果和操作流程符合预期。

总而言之，淘宝全屏装修是提升店铺形象和吸引购买者注意力的重要手段。

通过掌握全屏装修的编辑技巧和注意事项，我们可以打造出独特而专业的店铺页面，提升店铺的竞争力和销售额。

希望以上教程能对您有所帮助！。

图6-49 设置渐变填充步骤 03 返回工作界面，从左向右在选区上拖动鼠标，创建渐变填充颜色的效果，如图
6-50所示。

图6-50 渐变填充形状步骤 04 选择“横排文字工具”，设置字
体格式为“方正兰亭粗黑_GBK 、36”，设
页头背景
导航栏
常规店招
图6-47 通栏店招 ▪
页头背景：页头背景位于店招的左右两侧，页面背景可以纯色填充，也可以是图片。

其方法为：进入卖家中心页面中的店铺装修页面，在左侧单击“页头”分类链接，进入页头设置界面，可设置相应的页头效果。

耳机产品素材与文案，最后使用图形和线条修饰画面使其更加美观，其具体操作如下。

设计常规店招，绘制矩形后，使用“直
接选择工具”编辑锚点也可得到步骤中的图形。

充工具”编辑器”对话框，设置渐变填充色分别为
击按钮。

淘宝店铺导航栏样式1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！4.字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}5.字里：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}字外+字里=全部！1.导航背景色代码（除所有分类）如下：.menu-list .link{background:#000000;}2.导航栏文字（除所有分类）如下：.menu-list .menu .title{color:#颜色代码;font-size:字号px;}3.“所有分类”的背景色代码如下：.all-cats .link{background:#000000;}4.“所有分类”的文字代码如下：.all-cats .link .title{color:#颜色代码;font-size:字号px;}5.二级分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}6.二级分类背景代码如下：.popup-content{background:#000000;}7.三级分类文字代码（除去“所有宝贝”分类）如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}9.三级分类背景代码：.popup-content .cats-tree .snd-pop-inner{background:#000000;}.popup-content .cats-tree .snd-pop-inner{background:#000;opacity:0.3;filter:alpha(opacity=30);}透明10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：.menu-list .menu{border-color:#000000;}11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .link{border-color:#000000;}12.一级导航分类的宽度修改代码如下：.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}13.鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list .menu-hover .link{background:#000000;}14.鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}16.鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}17.鼠标滑过三级分类导航文字变换背景色代码如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}19.修改“所有宝贝”右边小图标代码如下：.all-cats .link .popup-icon{background:url(图片连接);}20.修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}22.在三级分类前加上小块白色代码如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}再接着安装店招部分回到装修页面双击店招模块选择上传图片空间的店招然后保这样全屏店招就安装好了第2步：全屏海报以及导航栏的无缝拼接部分同样PS制作或者找一张宽度1920px高度随你定我这里是650的海报因为店招的高度150px直接安装上会被店招掩盖掉，所以要在海报上方加个150px画布把海报顶下来在PS里面点击→图像→画布大小或者快捷键（Alt+Ctrl+C)在高度里→输入800px 然后点击→定位框里面的向下箭头↓接着在画布扩展颜色选择白色然后→确定好了以后新建参考线快捷件（Alt+V+E）选择→垂直位置输入→485确定拉出第2条同样选择→垂直位置输入→1435还没完噢。

店宝宝网店培训课程——淘宝店铺装修以及店招怎么设置具体步骤非常多的店宝宝学员们问及淘宝店铺店招怎么操作，当然了店宝宝已经有几百套装修模板可供学员们选择，但是技多压身嘛，想要自己学习怎么装修店铺那是非常好的，那么今天店宝宝小编应大家的要求在这里简单说下店铺如何装修附加了具体的步骤哦，希望对学员们以及想要开网店的朋友们能有所帮助！现在店宝宝小编带你进去今天的主题一、大家知道现在店铺装修分电脑端跟手机端，那么学员们按照步骤进入【卖家中心】-【店铺装修】选择手机端和电脑端找到使用的页面进入装修页面，下面先看下电脑端的位置：1.电脑端店招设置方式：在“布局管理”中将左侧店铺招牌模块拖动到右侧模块中，再回到“页面编辑”将鼠标移到店铺招牌模块上会出现“编辑”按钮，进入编辑页面，可选择“默认招牌”在此处上传图片做背景，也可选择自定义模式插入图片；提醒：高度不超过120像素2.无线端店招设置方式：鼠标点击店铺招牌进入设置页面，再点击上传店招进行图片上传，最后点击发布；提醒：图片尺寸750*580，大小在400K左右，支持jpg和png格式二、那么接下来再讲讲店铺装修位置及步骤店铺装修导航栏请进入【卖家中心】-【店铺装修】可选择手机端和PC端进行装修导航，方式如下：1.电脑端：鼠标移到导航，点击“编辑”，对导航栏中的宝贝分类进行设置后保存，再发布2.手机端：进入手机端装修页，点击店招的编辑，可对店招图片和搜索栏进行编辑，编辑后保存发布以上店宝宝小编把店宝宝经典的网店教程分享给大家希望对大家能有所帮助，俗话说“有记性不如烂笔头”纵然你有过目不忘的本事，但是操作起来没有那么容易，需要更多的耐心，更多不懂的开网店问题可以随时联系店宝宝官网在线客服，我们竭诚为您服务！可能还有很多人不了解店宝宝软件具体是什么？它的功能作用有哪些？对于即将到来的6.18也好，双十一，双十二，元旦等等淘宝大型活动节，你不来参与以下以下能算个淘宝卖家吗？所以不少淘宝商家也会有一些促销活动，那么2018淘宝接下来的活动策划方案怎么做？店宝宝专业网店培训专家给小伙伴们分享9个最实用的淘宝活动策划方案，新老卖家们注意看了。

教你如何制作全屏店招全屏店招显得高大上，现在大部分店铺都在使用，今天给大家制作一个详细的教程，每一步都有配图，希望大家能够用上。

使用软件：Photoshop cc（简称ps）、Dreamweaver cc（简称dw）一、用ps打开制作好的店招和导航（尺寸是1920px宽，150高）（为了没有广告嫌疑，打了马赛克，哈哈！）二、文件菜单?导出?存储为web所用格式三、选择jpg格式，质量设置80以上，点击存储四、选择保存的文件夹，命名店招背景六、新建两条参考线：1、视图菜单?新建参考线，设置垂直485px2、视图菜单?新建参考线，设置垂直1435px（解释：店招的默认尺寸是宽950px，总长度是1920px，通过参考线可以得到中间的店招的部分）七、确定中间部分后，使用裁剪工具，框选中间部分，右上角打勾八、同“店招背景”的存储方法存储店招加导航部分九、把输出的两张图片上传到淘宝图片空间（打开淘宝网?登陆?卖家中心?打开图片空间?上传）十、打开DW_Dreamweaver软件（可以百度搜Dreamweaver绿色版下载软件），文件菜单?新建?html文件十一、文件菜单?插入?图像，选择“店招加导航”图片导入到dw，十二、回到浏览器图片空间的界面，点击图像下方链接按钮复制图片链接十三、回到dreamweaver软件，点中图片，把复制的链接黏贴到软件下方图片地址位置十四、接下来就可以给图片上加链接啦！从卖家中心找到查看淘宝店铺，复制链接，回到d w，点中图片，使用左下角添加热区工具框选“首页更精彩”，把链接黏贴到下方链接处，其他链接同样做法。

十五、点击代码按钮，全部框选，复制所有代码十六、回到浏览器，在卖家中心点开店铺装修，在店招右上角点击编辑十七、选择自定义招牌的源码按钮，把代码黏贴到文本框，高度设置为150px，点击保存即可，店招就加上去了。

十八、店招已经加上去了，接下来添加背景：点击左边页头?更换图片?页头背景，设置不平铺、居中、应用到所有页面。

在线制作免费店招（扫盲版）莫要着急，现在给大家show一下效果截图喔！快看那是神马，旺旺哦。

小宝：哇！点击收藏，图片轮播都是可以加入的吗？呵呵，当然同时还有许多功能，主要体现得简洁一点所以这一次没有加入那么多功能。

------------------------------------------------------------------------------------------------------------------正文：开始制作了大家要擦亮眼睛哦。

1.首先进入后台——点击店铺装修——编辑店招——在上传店招页面点击“在线编辑”（相信大家有许多买过、做过店招的朋友，可是还有和我一样的新手）如图：-------------------------------------------------------------------------------------------------------------------2.快看传说中的右上角，有传说中的免费店招哦。

快看闪闪发亮呢。

我点我点。

-----------------------------------------------------------------------------------------------------------------------3.点免费店招之后就到了选择免费店招页面了，点击开始制作，（因为此风格不一定与我们自己店铺的风格相同所以我们要勤动手，自己做）这样就到了制作页面了左边是一层一层的东西，估计是文字图片各种各样效果等，可以都删掉，因为我们要重新做。

上边是一些工具，最重要的就是几个工具了，今天也是简单的介绍下几个实用的工具。

右边就是与工具相对应的，一些具体的东西，包括图片的更改、链接的加入等。

-------------------------------------------------------------------------------------------------------------------4.正式开始制作：首先删掉一些原有的图等等没用的东西。

如何设置店铺导航条
现在有很多人注册成为了淘宝网的店家，然而装修的问题让这些新手店主十分头疼。

在装修过程中该如何设置导航条呢?下面就让大家好好学习一下吧。

设置导航条的方法：
1、进入我是卖家-店铺装修-导航条位于图片所示部分，一般位于靠近顶端的位置，鼠标悬浮可显示编辑按钮，点击编辑按钮进入导航条自定义
2、点击添加可将你的店铺宝贝分类添加至首页导航，相当于为你的宝贝进行分类，在店铺顶端显示宝贝的所属类目并提供点击跳转
3、点击自定义链接可为你的店铺添加友情链接或你想让用户跳转到的链接，或者直接把店铺首页的链接添加至自定义链接，让用户更深记住你的店铺
4、店铺链接可以前往店铺装修-页面属性-复制链接地址
5、如果你懂CSS代码编写，可以自行编写网页CSS代码来设计更加精美的首页导航，还能做到Wordpress那样的二级三级目录显示，小编不懂这里就不说明
6、教程非常简单，主要是简单让没有接触过首页导航条的朋友知道导航条包括哪些内容，成功修改导航条后的效果大致如图，红圈处就会显示你所添加的分类或信息，可进行点击跳转
以上就是设置导航条的方法。

第一种方法及步骤：
1、找一张大图（宽1920，高460以上）
2、利用PS切片工具进行切片（列：485、1435、行：120、150、160）
3、用切片选择工具选取店招和海报部分，然后单独保存后用PS设计好店招和海报，再上传到图片空间内
4、对原图片删除切片，裁切和填充颜色，以适应尺寸和图片大小（200K以内）
5、注意有10像素的空隙
6、装修页面进行上传背景图片，选择居中和不平铺，然后发布即可
第二种方法及步骤：
1、选择一个大图海报（宽1920，高不限）
2、利用PS切片工具进行切片（列：485、1435）
3、用切片选择工具选取海报部分（950），然后单独保存后用PS设计好海报，再上传到图片空间内
4、在上方增加画布大小（加160）
5、然后填充和店招一致的颜色（可以用吸管工具吸取）
（可以直接做成1920的店招，背景一致，再进行辅助线裁切）
6、对原图片删除切片，裁切和填充颜色，以适应尺寸和图片大小（200K以内）
7、装修页面进行上传背景图片，选择居中和不平铺，然后发布即可
第三种方法及步骤（仅全屏海报制作）
1、找好一张大图（1920）
2、新建画布（高加上150），然后把海报移到新画布上面
3、保存图片时对图片大小进行处理（200K以内）
4、装修页面进行上传背景图片，选择居中
5、新建一张和海报尺寸一样的透明图片，保存PNG格式
6、上传PNG格式透明图片之图片空间
7、自定义模块插入图片，并对该图片加上链接，最后发布。