店铺页头通栏制作（店招和导航是一张图片）

旺铺专业版默认的店招就是通栏的，店招高度默认是120px，导航高度默认是30px，整个页头高度默认是150像素。今天给大家介绍店铺页头店招和导航是一个图片的通栏装修方法(1920px*150px整个页头,包含了店招和导航)。

先看效果图：http://zp350.taobao.com

一丶前期准备工作：

首先来认识一下什么叫做店铺页头，店铺页头包含两个部分：店招和导航栏，店铺页头通栏背景。

1丶首先设计整个页头通栏（1920*150像素）

2丶店铺招牌 导航：新旺铺中默认的店铺招牌区域尺寸：950PX宽*120PX高（新旺铺专业版中间模块都是统一的950PX宽），导航高度默认为30PX，我们把上面整个页头背景的居中950部分裁剪保存作为店招和导航，尺寸为950*150px，如下图所示：

Ps：裁剪店招 导航为页头1920*150的居中950部分，需要建立两条垂直参考线，

第一条垂直参考线为：（1920-950）/2=485像素

第二条垂直参考线为：（1920-950）/2 950=1435像素

如果你设计的并且1920全屏的，只需要修改对应的1920部分数值就行了，比如是1440的，那么全部把1920替换为1440像素

二丶装修店招通栏步骤

1丶点击进入店铺装修（可以通过多个渠道进入装修后台，一是点击千牛右下角，进入店铺装修，二是登录淘宝，进入卖家中心，左侧店铺管理，店铺装修，三是进入自己淘宝店首页，点击右上角装修此页面）

2丶更换店招

第一步：在网店装修状态，点击店招区域编辑按钮

第二步：选择自定义招牌

第三步：插入设计好的店招，并且将默认店招高度120px修改为150px

第四步：插入成功，保存

店招高度设置为150px以后，导航栏就被顶下去了，发布后就看不到的，不过如果安装固定背景代码，还是可以继续放在默认的导航栏里面的。

第五步：店招 导航安装成功

这样只是一张图片，点击不了链接，可以通过加热点链接来完成。

3丶店招和导航添加热点链接（介绍两种工具，一种是dreamweaver，一种是在线添加热点工具）

方法一：添加热点链接可以使用dreamweaver添加，方法很简单，步骤如下：

第一步：进入淘宝图片空间或者装修后台店招位置切换到代码状态，把店招和导航（950*150px）的图片地址复制出来

第二步：在dreamweaver中插入店招 导航（950*150px）图片

第三步：插入图片，在视图编辑状态下，点击一下图片，左下角会出现矩形热点工具，直接在需要加链接的位置画框

第四步：需要加链接的热点画好以后，选择左下角指针热点工具，然后点击对应的热点区域进行位置调整和加入链接地址

第五步：把生成的代码全部复制

第六步：进入店铺装修后台，店招区域，把之前插入的店招 导航（950*150）图片代码全部删除，然后把DW中做好的代码粘帖进来（要切换到源码状态）

第七步：保存完成

方法二：在线生成热点代码

第一步：打开在线布局工具：http://www.taoour.com/zx.htm

第二步：复制店招加导航的图片链接到在线布局的主图背景，并且修改尺寸为950*150

第三步：右侧工具集，找到第一个热点层，点击添加到画布中，移动和修改大小

第四步：点击需要添加链接的热点层，加入对应链接

第五步：生成代码，选择生成集市店自定义代码，然后全选复制代码

第六步：进入店铺装修后台，店招区域，把在线生成的代码粘帖进来（要切换到源码状态）

4丶更换通栏背景图片

第一步：点击装修二级菜单样式管理

第二步：点击背景设置

第三步：选择更换图片（选择的是整个页头背景1920*150的这张，注意大小不超过200K，如果超过了，可以把居中950的部分给删除）

第四步：更换背景并保存（设置的页面默认也是所有页面，背景显示不平铺，背景对齐居中，页头下边距一般选择关闭，因为不关就有10PX的间隙）

第五步发布查看，大功搞成！

总结：这种方式可以装修整个店铺为一张整体的图片的效果。

关注微信公众帐号：taoour，定期发布装修干货教程！