淘宝网店装修的作用不仅仅是为了追求美感,还要对淘宝搜索优化有帮助。只有对宝贝优化有帮助才能让买家进入首页或详情页。
淘宝网服装类目的宝贝描述规则从3月1日起有部分调整,淘宝官方给的建议是不要有太多的关联推荐,别放置太多与宝贝无关的信息。
如果这个规则开始在淘宝全网实施,那就意味着淘宝将会用程序来检查卖家的宝贝描述是否合乎规则要求,而图片内容是不易被程序识别的。因此对于在宝贝描述中仅使用图片,或大部分使用图片对宝贝进行说明的卖家来说,减少纯图片,转而用图文混排的方法,将更符合淘宝对宝贝描述的要求。
图文混排的宝贝详情页:图文结合的宝贝详情页,能用文字的部分便用文字,图片作为辅助信息,不将文字介绍转化为图片。
纯图片的宝贝详情页:详情页绝大多数内容均为图片,甚至连文字说明也做成图片
名词解释
div是网页中经常用来进行网页布局的一个标签,它本身就是一个容器,可以用来放置其它的元素。
CSS是用来进行网页风格设计的,可以使人更能有效地控制网页外观,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
图文混排的思路
把图片做为div的背景,然后用CSS控制文字在DIV中的位置,从而来实现图文混排。
使用div+CSS进行图文混排的好处
使代码量比使用表格实现的图文混排更少,便于一淘搜索引擎和其它搜索引擎顺利收录宝贝描述的内容,对后期修改宝贝描述、进行SEO优化都有很在大的好处。
注意事项
设计效果图时,尽管使文字区域为矩形。如果把文字整体排成圆形,那么将来纯文本将很难用CSS。
矩形文字区块示意处理图片
在进行混排之前需要用大部分卖家都会选用的图像加工软件AdobePhotoshop对图片进行处理,将需要进行混排的图片导出为JPG格式,便于混排时候的编辑。如果卖家有别的工具能够将需要处理的图像生成JPG格式,也可以选用其他工具。
第一步:使用PS的切片工具对需要导出的图形进行切片。
第二步:正式导出之前,点击图层前的小眼图标,取消选中,将文字层隐藏,只留下需要处理的图片层。4
第三步:使用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中,系统自带常用字体多了一个微软雅黑。
网店装修千万不可忽视,好的网店装修在无形中就能帮你推广网店。所以每个淘宝卖家还是多想想如何装修网店吧。
相关文章
-
网店装修如何用好div+css设计美观店铺
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。,将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。,14.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面,这也是为什么我会强烈推荐使用div+css,要知道单靠图片拼接出来的页面加载速度过慢,会使客户失去等待的耐心,从而转到其它卖家那里。
2024-03-21 10:26 -
如何修改淘宝滚动代码为来回左右滚动呢?
淘宝卖家:请问小编,我在店铺里做了一个简单的滚动效果,用来做店铺公告。,这个是我的店铺公告条的截图:我想实现文字运动到左边时自动回到右边,当文字到右边时,自动到左边。,只要在<MARQUEE里添加一个来滚动方式的参数“behavior=alternate”即可。
2024-03-21 10:02 -
来论坛不久,写点我对图片代码的一点认识与大家交流,望大家不吝赐教,多多扔砖。
由于我写代码标签使用<>尖括号发现论坛会解析出错,所以我用了《》书名号代替,实际复制代码去使用请在文档软件中将《》书名号查找替换为<>尖括号。,此外可加入的还有轮播代码内,实现一个位置多图轮播,以及加入走码灯代码中实现多图横排或竖排依次左右或上下游动。,高度上因为自定义区不限高,所以不管多高都完全显示。
2024-03-21 09:27 -
粉色可爱童装淘宝店铺一键安装装修模板
模板为一键安装永久使用的模板,并且拥有全屏海报图、九宫格轮播代码、高级SDK特效模块。,【购买说明】此模板为付费模板单个模板30元,全集模板90元(网站260多套模板都可以随意切换使用,包括以后更新的模板)【使用教程】淘宝一键安装模板使用教程【模块试用】装修宅精仿了这套350超级模板中的750宽淘宝宝贝促销代码模板(如下图),大家可以下载这个特效代码模板,放在店铺装修的自定义模块中测试效果。,代码
2024-03-20 13:22 -
淘宝海报下雪效果怎么实现?步骤分享
今天小编跟大家重点介绍一下具体的操作步骤是什么!,第三部,新建一个图层,填充黑色,然后点击“滤镜-像素化”数值参考图片。,第五步,调下亮度对比度(根据自己情况),然后回到图层一,用白色画笔把远处的山模糊一下,”透明度30,流量50“根据情况可在其他地方涂抹,制造雾气和雪的效果。
2024-03-20 10:55 -
【抖音文案】伤感的人生哲理句子(伤感人生哲理的句子说说心情)
微笑地去寻找一个不可能出现的你!,13.死亡教会人一切,如同考试之后公布的结果?,15.男人在结婚前觉得适合自己的女人很少,结婚后觉得适合自己的女人很多 16.于千万人之中,遇见你所遇见的人;于千万年之中,时间的无涯荒野里,没有早一步,也没有晚一步,刚巧赶上了 17.每个人都有潜在的能量,只是很容易:被习惯所掩盖,被时间所迷离,被惰性所消磨。
2024-03-17 22:02 -
【抖音文案】感悟人生哲理句子美文(感悟人生伤感哲理句子)
这人说:“观音菩萨,普度一下众生吧,带我一段如何?,”观音说:“你在雨中,我也在雨中,我不被淋,因为有伞;你被雨淋,因为无伞。,第二天,这人遇到了难事,便去寺庙里求观音。
2024-03-17 21:42
热门标签
-
如何装修出你想要的网店风格
2024-03-21 09:52
-
开网店如何用PS快速抠图
2024-03-21 09:52
-
如何处理才能让图片显得真实、立体
2024-03-21 09:52
-
宝贝详情页这样设计才能有交易
2024-03-21 09:52
-
网店装修之宝贝详情页的布局
2024-03-21 09:52
-
如何避免拍出模糊、偏色宝贝图片
2024-03-21 09:52
-
网店活动推广时如何设计宝贝详情页
2024-03-21 09:52
-
网店装修要既漂亮又实用
2024-03-21 09:52
-
从里到外对网店进行视觉设计装修
2024-03-21 09:52
-
开淘装修网教你拍出白底照片
2024-03-21 09:52
-
如何用标尺做规整的淘宝装修模板
2024-03-21 09:52
-
怎样装修网店才能专业、漂亮
2024-03-21 09:52
-
如何做宝贝描述让宝贝自己会说话
2024-03-21 09:52
-
如何在宝贝详情页批量添加图片
2024-03-21 09:52
-
如何让QQ秀为你试穿宝贝
2024-03-21 09:53
-
宝贝详情页描述如何设计才有吸引力
2024-03-21 09:53
-
宝贝描述先确定思路然后再操作
2024-03-21 09:53
-
宝贝详情页该如何设计
2024-03-21 09:53
-
图片去文字和水印六招技巧
2024-03-21 09:53
-
让宝贝图片精致的拍摄技巧
2024-03-21 09:53