书城计算机网络从平凡到神奇
19447600000007

第7章 网络店铺个性化——看上去很美(2)

4.5 商品描述模板设计

商品描述是发布商品时,特别需要认真对待的部分。如今,好的商品描述不但要求内容能够全面概括商品的特点和优势,还需要配上图片,展示货真价实的商品。图片与文字互相配合,相得益彰,更具有说服力。但是在商品描述中插入图片,并非简单将图片保存到计算机,然后上传到淘宝网店铺就可以了,而是需要经过网络相册这个“图片中转库”。如果卖家自己设计商品描述模板,花费的工夫更多,还需要有一定的网页设计基础知识。

为了使新手卖家快速掌握美化商品描述的方法,本节主要介绍在PS中设计描述模板的操作步骤,然后再专门给卖家支招,教各位卖家如何制作闪光动画,以及如何利用免费的商品描述模板来发布商品。

4.5.1 在Photoshop中设计描述模板

(1)在PS中打开描述模板素材图片,在“矩形工具”图标上单击鼠标右键,在弹出的菜单中,单击“自定形状工具”选项,选择形状样式。

(2)找到菜单栏下方的“形状”下拉列表框,单击列表框旁的下拉三角按钮,单击选择需要的形状图形。单击工具窗口中的“横排文字工具”图标,输入商品描述文字,打开字符/段落窗口,在窗口中设置或调整相应参数,对文字进行编辑。

说明:单击菜单栏中的“窗口”标签,单击“字符”选项,打开字符/段落窗口。用户也可通过菜单栏下方的文字编辑栏来编辑输入的文字。

(3)输入文字完毕后,单击工具窗口中的“自定形状工具”图标,对整图作修饰处理,商品描述模板设计完成。

说明:为了防止模板意外丢失,应及时保存设计的模板。此外,PS中的工具有很多可以用于模板的制作,此处只简单介绍部分工具的使用,制作出来的模板相对不是很复杂。多做练习,并且积累足够的经验后,卖家一定能制作出更精美的模板。

4.5.2 使用ImageReady制作闪光动画

浏览淘宝网的店铺,不难发现很多店铺装修非常有动感,显示出活力十足的气派,这些效果的呈现都在于闪光动画元素的点缀。如今网络上有很多动画元素可以利用,但是真正符合店铺自身特色的动画,自然是卖家自己设计的闪光动画。

(1)在图层窗口中的“宝贝描述”文字图层上单击鼠标右键,在弹出的菜单中单击“复制图层”选项,弹出“复制图层”对话框。

(2)在“复制图层”对话框中,默认复制图层文件名为“宝贝描述副本”,确认后单击【好】按钮,“复制图层”对话框关闭,在图层窗口中显示所复制的图层。

(3)单击页面上方编辑栏中的“颜色”图标,弹出“拾色器”对话框,选择合适的颜色,单击【好】按钮,保存颜色设置。

(4)单击菜单栏中的“图层”标签,使鼠标指针停留在下拉菜单中的“图层样式”选项上,在次级菜单中单击“描边”选项,弹出“图层样式”对话框。

(5)在“图层样式”对话框中,“描边”复选框已经被勾选,在“描边”区域,设置大小、位置等参数,比如,将边的“大小”即边框设置为“8像素”,将描边的“位置”设置为“外部”。同样单击“颜色”图标,在“拾色器”对话框中选择合适的描边颜色,观察图片中宝贝描述文字的变化,确定后单击【好】按钮,保存设置。

(6)激活图层窗口,单击“宝贝描述”图层,将图层切换到“宝贝描述”文字图层。参考上述设置描边的方法,将“宝贝描述”图层中的文字描上不同颜色的边。

(7)单击工具窗口底部的“在ImageReady中编辑”图标,将图片转换到ImageReady中进行编辑。

(8)将图片导入到IR中。在IR程序主界面,参考制作店标动画的操作方法,设置“宝贝描述”文字图层的动画效果。

(9)单击菜单栏中的“文件”标签,在下拉菜单中,单击“将优化结果存储为”选项,选择将文件保存为gif格式,即动画形式。

4.5.3 使用免费的商品描述模板

新手卖家学习设计商品描述模板比较容易上手,但是要将自己设计的模板应用到店铺中,必须先将模板转换为相应的网页应用格式,才能真正为装修所用,往往这个复杂的操作过程,让很多新手卖家望而却步。为了给越来越多的卖家提供便利,网络上有很多可供利用的免费网店装修模板,在收集素材的时候,可能也会接触到这些免费的模板。下面就讲解如何将免费的商品描述模板应用到自己的店铺中。在讲解之前,推荐一个受众多卖家欢迎的叫做“淘友吧”的店铺装修网站,网址是http://easy.taoyouba.com。以下就以从该网站获取的免费模板为例,讲解如何使免费的商品描述模板成为自己店铺的一部分。应用免费模板也是为卖家应用自己设计的模板打下基础,让大家在了解基本原理之后,更好地装修具有自身特色的店铺。

(1)在浏览器地址栏中输入“http://easy.taoyouba.com”,进入淘友吧首页,单击页面右上方的“注册”链接,进入注册信息填写页面。按照相关提示,填写注册信息后,登录陶友吧账户。

说明:注册的步骤比较简单,此处不再赘述。

(2)进入第一步“选模板”的操作。在“免费模板”标签下,选择喜欢的模板选项,单击该模板,进入“挑宝贝”步骤。

(3)单击“挑宝贝”图片按钮,弹出“淘友吧生成系统——网页对话框”。在方式一选框中,单击“店铺类型”中“淘宝店”单选框,也可添加旺旺号码,设置完毕后,单击【确定】按钮,对话框关闭,挑宝贝页面显示淘宝店铺中的所有宝贝。

说明:选择方式二,“直接填写宝贝地址”指的是宝贝主页面的链接地址,需要将链接地址复制粘贴到文本框中。该方式供除淘宝、拍拍、有啊之外的其他店铺卖家使用。

(4)选择相应的宝贝,单击该宝贝图片,进入第三步确定完成的操作。卖家可以单击前两步图片框中的【修改】按钮,返回进行修改选择,如不需要修改,则单击【完成】图片按钮,进入系统信息提示页面。

(5)系统提示宝贝模板已经生成,单击【复制代码】按钮,弹出对话框,提示模板代码已经复制,需要粘贴到“填写宝贝基本信息”页面“宝贝描述”编辑区中,单击【确定】按钮。

(6)新建一个记事本文件,使用“Ctrl+V”组合键,将复制的代码粘贴到文件中,保存该文件,防止代码丢失。

(7)进入“填写宝贝基本信息”页面的“宝贝描述”编辑区,单击编辑器中的“编辑源文件”链接,进入源文件编辑状态。

(8)返回记事本文件页面,按住鼠标左键不放,拖动鼠标,全部选中代码,然后单击鼠标右键,在弹出的菜单中,单击“复制”选项,将代码复制待用。

(9)返回“宝贝描述”编辑区,使用“Ctrl+V”组合键,将复制的代码粘贴到编辑区中,并替换掉原有的代码,单击左上角的“使用编辑器”选项,查看模板是否应用成功。

(10)编辑区显示宝贝描述模板图片,商品描述模板基本应用成功。

4.5.4 编辑并发布商品描述模板

免费的商品模板大体能够呈现在店铺中,但是也难免存在局部不足之处,这就需要卖家在复制了模板代码之后,查看模板效果图,然后根据需要,对局部进行微调,主要是插入或修改超级链接、修改图片、添加文字等操作。下面针对这些情况,详细介绍如何编辑并发布商品描述模板。

(1)插入了模板代码后,详细查看“宝贝描述”编辑区中的模板显示效果。单击需要修改的模块,如“公告”模块,模块四周显示矩形点框,然后单击编辑器中的“插入超级链接”图标,弹出“插入超级链接”对话框。

(2)在浏览器中打开超级链接的网页,选中地址栏中的网址,在选中的网址上单击鼠标右键,在弹出的菜单中,单击“复制”选项,复制超级链接地址。

(3)返回“插入超级链接”对话框,使用“Ctrl+V”组合键,将复制的超级链接地址粘贴到“地址”文本框中,单击【确定】按钮,对话框关闭。

(4)如果需要修改商品图片,则选中原来的商品图片,图片四周显示矩形点框,单击编辑器中的“插入图片”图标,出现“修改图片”对话框。将新的图片链接地址填入“地址”文本框,单击【确定】按钮,商品图片修改成功。

说明:查看图片链接地址的方法在4.4节有介绍,或者应用网上图片,或者上传图片到网络相册中,再获取图片链接地址,此处不再赘述。

(5)添加必要的文字信息。商品描述模板中有相应的信息栏,如果原来的宝贝描述没有提供相关内容,则在模板的相应位置会提示“点这里添加××××”。比如,在“买家须知”模块有提示“点这里添加买家须知”,如果要添加相关信息,则直接输入相关的买家须知内容,替换掉“点这里添加买家须知”文字即可。对于其他模块的操作也一样,都是可以直接添加文字的区域。

(6)确定模板修改完善后,单击【保存】按钮,保存商品描述信息,免费商品模板被成功应用到店铺中。

4.6 使用HTML美化页面

HTML是一门语言,有了这门语言,才可以在因特网上展示和浏览信息。日常上网所看到的网页,是浏览器对HTML进行解释的结果。如果需要查看一个网页的HTML代码,只需要在浏览器菜单栏上单击“查看”标签,然后在弹出的下拉菜单中单击“源文件”选项即可。

在装修店铺的过程中,上传图片或模板到公告栏、商品描述模块的时候,需要使用HTML编辑器,即将图片链接代码输入编辑区,才能在店铺页面中显示出来。这个过程的原理,就是将网页的HTML代码源文件,复制粘贴到编辑区中,然后保存,淘宝网编辑后台将代码转换为可以显示和浏览的图片等信息,完成了HTML代码到图片等信息转换的过程。

4.6.1 HTML编辑器的基本功能

淘宝网开发的HTML功能是一项非常实用的功能,它应用于淘宝网宝贝描述、店铺公告发布、个人空间撰文等,可以使商品描述、店铺公告等变得更加引人入胜。在前面内容的讲解中,已经使用到HTML编辑器。此处以“填写宝贝基本信息”页面中的HTML编辑器为例,系统介绍淘宝网的HTML编辑器的使用及代码转换的操作。

“填写宝贝基本信息”页面中的HTML编辑器。

在编辑宝贝描述的时候,如果要对描述内容的代码进行编辑,需要单击编辑器中“编辑源文件”链接,页面转换到源文件编辑页面。

在源文件编辑页面中,原来的描述文字变成了代码,即通过单击“编辑源文件”链接,将原本的描述文字转换成为了网页代码,编辑代码同样也可以编辑宝贝描述的文字,但前提是必须要懂得代码知识。因此,对于新手卖家来说,只有在利用现成代码编辑宝贝描述的时候,才会利用该页面,将现成代码粘贴到编辑区中,在查看效果的时候,单击“使用编辑器”链接,页面返回到利用HTML编辑器页面,这一过程,即实现代码到图片或文字的转变。

综上所述,淘宝网HTML编辑器的基本功能是实现图文—代码的转换,这个转换过程是可逆的。对于新手卖家来说,只需要掌握和了解这一点,并且在美化店铺页面的时候,利用好这一工具,打造出精致的网络店铺。

4.6.2 个性鼠标指针的生成

个性鼠标指针不同于Windows操作系统中默认的标准鼠标指针,主要表现在鼠标指针的个性化。生成个性鼠标指针,可以使原本普通的鼠标指针变成各种各样的动画或图片,让浏览店铺的买家感到新奇,在附有娱乐性的同时,潜移默化感染买家,并且留住买家。

1.利用搜索引擎寻找鼠标指针

(1)在浏览器地址栏中输入“http://www.google.com”,进入Google搜索引擎首页,在搜索文本框中输入“鼠标指针代码”关键词,单击【Google Search】按钮,进入搜索结果列表页面。

说明:用户可以在地址栏中输入“http://www.google.cn”,进入谷歌中文搜索引擎首页。

(2)选择列表中合适的结果项,比如,选择第一项结果“多种可爱鼠标指针代码”,单击该链接,进入结果项的主页面。

(3)选择喜欢的鼠标指针,复制指针所对应的链接地址,将链接地址粘贴到新建的记事本文件中或其他文本文件中待用。

说明:选择不同的搜索结果项,进入的主页面不同,但是目的都是为了找到鼠标指针的链接地址,以便将鼠标指针的链接地址加入源文件代码的相应位置,以在店铺主页面中的商品描述位置显示个性鼠标指针。

2.生成个性鼠标指针

(1)登录淘宝网账户,单击淘宝网首页“我要卖”链接,发布商品,填写商品信息。

(2)在“宝贝描述”编辑区,单击“编辑源文件”链接,在编辑区生成原有描述文字的代码。

(3)在编辑代码之前需要强调,个性鼠标指针代码格式如下:<DIV style="CURSOR:url('鼠标指针的链接地址')">。卖家在原有代码的前面插入该代码格式,然后用复制的个性鼠标指针链接地址替换掉代码格式中的中文字“鼠标指针的链接地址”,插入鼠标指针代码完成。

说明:在使用了商品描述模板的情况下,需要先找到以“table”开头的代码,然后在该代码之后插入style="CURSOR:url('鼠标指针的链接地址')",用实际的个性鼠标指针链接地址替换掉代码格式中的中文字“鼠标指针的链接地址”,保存编辑结果即可。

(4)编辑完代码之后,单击“预览”链接,在新窗口中显示预览效果,可以看到个性鼠标指针已经生成。回到编辑页面,单击【保存】按钮,保存设置。

4.6.3 插入图片

在商品描述中插入图片,可以使原本呆板的页面变得生动活泼。但是在发布商品的时候,保存在计算机中的素材图片,并非可以直接插入到“宝贝描述”编辑区当中,而需要先将素材图片上传到网络相册中,获取图片链接地址,才能在店铺相应的页面显示。

在实际应用中,除了将素材图片上传到网络相册后,再插入“宝贝描述”编辑区当中外,还有一种快捷的方法,就是直接粘贴网上的图片链接地址,将其他网站上的图片应用到自己的店铺中。这种方法的应用比较广,但是有一个致命的缺点,就是当其他网站上的图片被删除或链接地址发生变动的时候,应用了该图片的店铺页面就无法显示该图片,会影响整个店铺的美观。

下面将两种方法都作详细介绍,卖家可以根据需要,选择应用。

1.直接利用网上图片

(1)在素材图片所在的网站页面,在该素材图片上单击鼠标右键,在弹出的菜单中,单击“属性”选项,弹出“属性”对话框。

(2)查看“属性”对话框中的图片链接地址,使用“Ctrl+C”组合键复制该链接地址,单击【确定】按钮,关闭“属性”对话框。

(3)发布商品或编辑商品信息时,在“宝贝描述”编辑区中,单击工具栏中的“插入图片”工具图标,弹出“插入图片”对话框。使用“Ctrl+V”组合键,将复制的图片链接地址粘贴到“地址”文本框中,单击【确定】按钮,关闭“插入图片”对话框。

(4)在“宝贝描述”编辑区显示素材图片,成功插入网上素材图片,保存编辑结果。

2.插入网络相册图片

插入网络相册图片的操作比较简单,在前面也有讲述。简单来看,就是将网络相册图片的链接地址复制下来,粘贴到“插入图片”对话框的地址文本框中即可,具体操作步骤如下:

(1)将图片上传到网络相册中,在相册中打开查看需要插入的图片,在该图片上单击鼠标右键,在弹出的菜单中单击“属性”选项,弹出“属性”对话框,参考上述操作步骤,复制对话框中的图片链接地址。

(2)在“宝贝描述”编辑区,同样单击“插入图片”工具图标,在“插入图片”对话框中,粘贴网络相册图片的链接地址,单击【确定】按钮,关闭“插入图片”对话框。(3)在“宝贝描述”编辑区出现插入的图片,成功插入网络相册图片,保存编辑结果。

说明:利用该方法,虽然多了一个上传图片到网络相册的步骤,但是这一步增加了图片显示的稳定性,即图片链接地址不会改变,店铺装修效果有保证。结合这两种方法,将网上素材图片先保存在计算机中,然后上传到网络相册中,再插入到商品描述中,既可以省去制作图片的麻烦,又可以保持图片链接地址的稳定性,给店铺装修带来很大便利。

4.6.4 插入超级链接

淘宝网开发的HTML功能还有很多,下面将要介绍的是其中的超级链接功能。插入超级链接的操作比较简单,具体操作步骤如下。

(1)发布商品或编辑商品信息时,在“宝贝描述”编辑区,选中需要添加超级链接的文字,单击工具栏中的“插入超级链接”图标,弹出“插入超级链接”对话框。

(2)打开要链接到的网页,选定地址栏中的网址,在该网址上单击鼠标右键,在弹出的菜单中,单击“复制”选项,复制超级链接地址待用。

说明:淘宝网只支持站内的地址,不支持外部链接,即插入的超级链接地址必须来自淘宝网相关页面。

(3)返回“插入超级链接”对话框,使用“Ctrl+V”组合键,将复制的超级链接地址粘贴到“地址”文本框中,确定后单击【确定】按钮,对话框关闭。

(4)被选择添加超级链接的文字颜色改变,并且出现了下画线。如果需要取消超级链接,则选中该文字,单击工具栏中的“取消超级链接”图标,超级链接被取消。

4.6.5 添加网店挂件

网店挂件实际上是一组装饰性的小图片,被放到模板上起装饰作用,卖家可以根据个人喜好添加。添加网店挂件需要利用源代码编辑,同时,添加网店挂件还需要记住特定的代码字符串。下面详细介绍添加网店挂件的操作步骤。

(1)利用谷歌或百度搜索引擎,检索“网店挂件”关键词。

(2)在搜索结果列表页面,打开某一结果项的主页面,选择喜欢的挂件装饰,在挂件图片上单击鼠标右键,在弹出的菜单栏中,单击“属性”选项,弹出“属性”对话框。

(3)复制“属性”对话框中的URL地址,将该链接地址粘贴到记事本文本或其他文本文件中待用,单击【确定】按钮,关闭“属性”对话框。

(4)在添加网店挂件前,必须注意,挂件代码格式如下:<img alt="1"height="250"src="挂件的链接地址"style="position:relative;bottom:0px;right:0px;"width="100"/>。进入“我的淘宝”会员个人信息页面,打开“店铺公告设置”页面,单击编辑工具栏中的“编辑源文件”图标,进入编辑源文件状态。

(5)在公告编辑区域插入挂件代码格式,然后用复制的挂件链接地址替换掉代码格式中的中文字“挂件的链接地址”,插入并编辑挂件代码完成。

(6)单击“编辑源文件”图标,预览挂件是否添加成功,确定添加正确后,单击【保存】按钮,挂件添加完毕。

4.6.6 插入背景音乐

背景音乐在店铺装修中其实可有可无。但是在店铺装修过程中,将优美的背景音乐放到模板上,不但可以体现卖家品味,还可以引起买家共鸣。插入背景音乐同样需要利用源代码编辑,以及记住特定的代码字符串。下面详细介绍插入背景音乐的操作步骤。

(1)使用百度“MP3”搜索引擎,检索喜爱歌曲的名称,进入检索结果列表页面。单击其中一个结果项,进入歌曲链接页面。

说明:出于节省网络带宽和加快网页显示的考虑,建议选择WAV格式的音乐,或者较小的MP3格式的音乐。

(2)在歌曲链接页面,复制歌曲链接地址,以备编辑代码之用。

(3)在插入背景音乐前,必须注意,背景音乐代码格式如下:<bgsound loop="infinite"src="音乐的链接地址"*><*/bgsound>。进入“我的淘宝”会员个人信息页面,打开“店铺公告设置”页面,单击编辑工具栏中的“编辑源文件”图标,进入编辑源文件状态。

(4)在公告编辑区域插入背景音乐代码格式,然后用复制的歌曲链接地址替换掉代码格式中的中文字“音乐的链接地址”,背景音乐代码编辑完成。

(5)确定插入背景音乐成功后,单击【保存】按钮,插入网店背景音乐完毕。