淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15609|回复: 20
收起左侧

【平哥分享】店铺页头通栏制作教程,店招和导航是一张图

[复制链接]
  • TA的每日心情
    加油
    2016-10-17 17:39
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    44

    主题

    401

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23425

    QQ
    发表于 2015-2-27 20:33:50 | 显示全部楼层 |阅读模式
    店铺页头通栏制作(店招和导航是一张图片)
    旺铺专业版默认的店招就是通栏的,店招高度默认是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,定期发布装修干货教程!


    评分

    参与人数 1美工币 +10 收起 理由
    哫跡 + 10 很给力!

    查看全部评分

    平哥,淘宝大学讲师,公众微信号:taoour
    官方旗舰店:http://zp350.taobao.com

    该用户从未签到

    0

    主题

    1

    帖子

    866

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    866

    发表于 2015-5-17 23:33:32 | 显示全部楼层
    学习了谢谢老师

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    加油
    2016-10-17 17:39
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    44

    主题

    401

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23425

    QQ
     楼主| 发表于 2015-2-27 20:34:48 | 显示全部楼层
    这几天发的教程,都是给零基础入门级的小白店主看的,高手绕道吧
    平哥,淘宝大学讲师,公众微信号:taoour
    官方旗舰店:http://zp350.taobao.com
  • TA的每日心情
    抱抱
    2016-11-20 18:17
  • 签到天数: 454 天

    连续签到: 1 天

    [LV.9]已臻大成

    10

    主题

    1246

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    http://www.zcool.com.cn/u/12978141

    Rank: 8Rank: 8

    积分
    111128

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-2-28 09:17:50 | 显示全部楼层
    前来围观  不错
    http://www.zcool.com.cn/u/12978141
  • TA的每日心情
    抱抱
    7 小时前
  • 签到天数: 678 天

    连续签到: 5 天

    [LV.9]已臻大成

    26

    主题

    2632

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    185681

    最佳新人热心会员活跃会员灌水之王

    QQ
    发表于 2015-2-28 10:47:05 | 显示全部楼层
    感谢分享收藏了
    QQ交流群  107102001
  • TA的每日心情
    心跳
    2015-11-16 10:41
  • 签到天数: 18 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    15

    帖子

    3331

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3331

    发表于 2015-2-28 11:30:20 | 显示全部楼层
    感谢分享                             

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-7-25 07:05
  • 签到天数: 950 天

    连续签到: 3 天

    [LV.10]功行圆满

    0

    主题

    466

    帖子

    15万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    156301

    发表于 2015-2-28 11:37:01 | 显示全部楼层
    感谢分享,讲的很清楚。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-10-17 17:39
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    44

    主题

    401

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23425

    QQ
     楼主| 发表于 2015-3-2 13:40:14 | 显示全部楼层
    竹韵之乡 发表于 2015-2-28 11:37
    感谢分享,讲的很清楚。

    有帮助就好!

    平哥,淘宝大学讲师,公众微信号:taoour
    官方旗舰店:http://zp350.taobao.com
  • TA的每日心情
    抱抱
    2015-2-8 00:28
  • 签到天数: 67 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    66

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    20115

    QQ
    发表于 2015-3-2 15:55:22 | 显示全部楼层
    很详尽的教程,感谢楼主分享!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2015-5-29 19:19
  • 签到天数: 19 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    93

    帖子

    2931

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2931

    发表于 2015-3-2 16:25:30 | 显示全部楼层
    感谢分享。@!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-8 16:01 , Processed in 0.161110 second(s), 36 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表