您好,欢迎来到行行出状元 登录 免费注册

店铺装修:如何告别纯图片

来源:http://info.hhczy.com 编辑:Kogee 2014-01-11 | 标签: 店铺装修 视觉策划 |
浏览:971

淘宝网服装类目的宝贝描述规则从3月1日起有部分调整,淘宝官方给的建议是不要有太多的关联推荐,别放置太多与宝贝无关的信息。

如果这个规则开始在淘宝全网实施,那就意味着淘宝将会用程序来检查卖家的宝贝描述是否合乎规则要求,而图片内容是不易被程序识别的。因此对于在宝贝描述中仅使用图片,或大部分使用图片对宝贝进行说明的卖家来说,减少纯图片,转而用图文混排的方法,将更符合淘宝对宝贝描述的要求。

图文混排的宝贝详情页:图文结合的宝贝详情页,能用文字的部分便用文字,图片作为辅助信息,不将文字介绍转化为图片。

纯图片的宝贝详情页:详情页绝大多数内容均为图片,甚至连文字说明也做成图片。

名词解释

div是网页中经常用来进行网页布局的一个标签,它本身就是一个容器,可以用来放置其它的元素。

CSS是用来进行网页风格设计的,可以使人更能有效地控制网页外观,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。

图文混排的思路

把图片做为div的背景,然后用CSS控制文字在DIV中的位置,从而来实现图文混排。

使用div+CSS进行图文混排的好处

使代码量比使用表格实现的图文混排更少,便于一淘搜索引擎和其它搜索引擎顺利收录宝贝描述的内容,对后期修改宝贝描述、进行SEO优化都有很在大的好处。

注意事项

设计效果图时,尽管使文字区域为矩形。如果把文字整体排成圆形,那么将来纯文本将很难用CSS。

矩形文字区块示意

处理图片

在进行混排之前需要用大部分卖家都会选用的图像加工软件AdobePhotoshop对图片进行处理,将需要进行混排的图片导出为JPG格式,便于混排时候的编辑。如果卖家有别的工具能够将需要处理的图像生成JPG格式,也可以选用其他工具。

第一步:使用PS的切片工具对需要导出的图形进行切片。

第二步:正式导出之前,点击图层前的小眼图标,取消选中,将文字层隐藏,只留下需要处理的图片层。

第三步:使用Ctrl+shift+alt+S的快捷键,或者点击“文件?存储为web格式”打开“存储为web格式”,选中切片后导出,将图片格式设置为JPG,然后存储切片。

将图片插入网页

在进行图文混排前,先将进行图文混排的JPG图片上传到淘宝后台的图片空间,然后再进入宝贝描述的编辑页面。

第一步:在宝贝描述中插入div标签,并加入样式。在宝贝描述编辑框中点选第一个“源码”按钮,输入div标签。div这个标签是成对出现,且放在符号“<>”中,结尾的标签要在“<>”中加入“/”,来表示标签结束。如一对div标签,写法就是<div>…</div>(…是指div中具体的内容)。

第二步:用CSS设置div的高度和宽度为图片的宽度和高度,高度和宽度的样式放在div中格式为“style=”你的样式””,并以空格隔开。如图片像素为750px*406px,则格式为“width:750px,height:406px”,代码会变为“<divstyle=”width:750px;height:406px”></div>”。

第三步:用CSS设置div的背景为刚刚上传到空间的图片,格式为“background:(图片的地址)”。

设置完了之后,回到正常视图可以看到设置后的效果。

加入文本并定位

图片设置好后,便需要将文字排入网页。

第一步:在<div>和</div>之间插入p标签,p标签在HTML中是指段落,用它来放置属于同一个段落的文本。同div类似,它的写法是“<p>…</p>”。

第二步:在<p>和</p>之间插入文本内容。如果需要换行,可以将</br>放置在需要换行的文字中间来实现。</br>在HTML中表示换行,不同于div和p标签,它不是成对出现的。

第三步:在p标签中加入文字后,默认情况下这些文字是对齐左上角的,而在设计稿中这些文字是偏右的,这时需要用CSS样式中的padding属性将文本的定位到右边。Padding是用来控制标签内部的空白空间的一个样式,它的写法是:“”padding:toprightbottomleft;””top、right、bottom和left分别代表当前标签的上右下左四个方向的留白大小,将这些文字的留白大小定为上80px,右和下为0px,左为380px会比较合适。

第四步:文字的字体、字号、颜色等样式,可返回编辑视图直接用文字工具来设置。

完成的效果

最后:保存已经编辑好的宝贝。如有其它需要做图文混排的地方,以上步骤。

重点提示:

不过用div+CSS它也有它的不足之处,那就是在网页中的字体受消费者所用PC系统中的安装字体限制。因此建议卖家在进行宝贝描述编辑时选用大部分消费者电脑中都安装的字体,比如WindowsXP的系统自带常用字体是宋体、黑体、仿宋、楷体和隶书,而WindowsVista、Windows7和Windows8中,系统自带常用字体多了一个微软雅黑。



【版权声明】行行出状元平台欢迎各方(自)媒体、机构转载、引用我们原创内容,但要严格注明来源:;同时,我们倡导尊重与保护知识产权,如发现本站内容存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至service@hhczy.com,我们将及时沟通与处理。

热门文章

  • 1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?
    1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?

    1688运营解答贴:店铺不够50个宝贝有影响吗?店铺权重怎么查看?

    经常有用户在社群中询问“问产品是优化到七星好,还是主图带营销文案比较好?”、“产品突然被大批量下架是什么原因?”……大泽收集了一些常见问题,希望能给商友一些启发~

  • 1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?
    1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?

    1688生意参谋市场洞察在哪里看?如何查找蓝海关键词?

    1688生意参谋市场洞察在哪里查看?很多1688卖家不知道市场洞察在哪里查看。订购付费版生意参谋后,进入生意参谋后台,如图所示点击“市场竞争”就可以看到市场洞察的各项数据了。

  • 超级物种将关闭除福州外的所有店铺?永辉超市回应了
    超级物种将关闭除福州外的所有店铺?永辉超市回应了

    超级物种将关闭除福州外的所有店铺?永辉超市回应了

    2月26日消息,日前,有消息称,超级物种将关闭全国除福州外的所有店铺,具体关闭时间暂未确定。对此,永辉超市官方否认了这一消息,并回应称,超级物种的部分闭店属于正常的业态调整。

  • 苏宁易购股权即将变更,股票已停牌
    苏宁易购股权即将变更,股票已停牌

    苏宁易购股权即将变更,股票已停牌

    2月26日消息,日前,苏宁易购发布公告称,公司实际控制人、 控股股东张近东以及股东苏宁电器集团有限公司拟筹划转让股份,预计转让比例20%-25%,可能涉及公司控制权变化。苏宁易购股票自2月25日起停牌,预计停牌时间不超过5个交易日。

  • 数字人民币再试点,成都将发放4000万元红包
    数字人民币再试点,成都将发放4000万元红包

    数字人民币再试点,成都将发放4000万元红包

    2月24日消息,日前,成都发布微信公众号消息,成都“数字人民币 红包迎新春”活动将于2021年2月24日正式开启。此次活动向在蓉个人发放总额4000万元的数字人民币消费红包,红包数量约20万个,中签个人可获得178元或238元金额红包。

  • 小米要造车?已拥有多项相关专利
    小米要造车?已拥有多项相关专利

    小米要造车?已拥有多项相关专利

    2月21日消息,近期,有媒体透露,已从多个渠道获悉小米确认要造车,并视其为战略级决策,公司创始人雷军或将亲自带队。

  • 苹果被曝开启6G研发:正在招聘工程师
    苹果被曝开启6G研发:正在招聘工程师

    苹果被曝开启6G研发:正在招聘工程师

    2月21日消息,据彭博社相关消息透露,苹果公司在最近发布了一则招聘广告,旨在为下一代移动网络招募无线系统研发工程师,即6G网络。据悉,此次苹果要招募岗位的工作地点位于硅谷和圣地亚哥。

人物观点

更多 >
  • 卢捷:创新创业要考虑自身造血赚钱
    卢捷:创新创业要考虑自身造血赚钱

    卢捷,厦门创客猫网络科技有限公司创始人,热衷创新创业,是一位名副其实的有为创业青年,主要从事互联网相关行业,自双创热潮出现后,投身于为互联网活动、创新创业活动的主办方做线下活动的图文直播、现场采访、媒体报道等这样的一个现场媒体服务。

  • 林超:平行进口车为汽车市场添活力
    林超:平行进口车为汽车市场添活力

    恒基瑞驰科技创始人,美国天马迅达快递副董事长。2007年赴美留学,进修工商管理硕士。2010年5月创立了美国迅达快递,致力于为海外华人和国内海淘用户提供优质的物流服务。2014年5月份联合创立了美国天马迅达快递。在全美30多个州开设了100多家加盟店,服务于全美华人,电商以及海淘客户。2016年开始投资创立“恒基瑞驰供应链管理平台”,全面服务于平行进口车的各个贸易商与经销商。

人物最强打工人:苹果CEO库克获8亿年终奖!
人物马斯克资产缩水近千亿,不再是全球最富有的人
人物福布斯公布中国杰出商界女性榜:董明珠第五
人物罗永浩回应坚果手机被放弃:嗯,好事
人物马云近3个月来首露面,阿里股价强势反弹!

推荐专题

更多 >

合作协会

  • 福建电子商务协会
  • 德化县电子商务协会