第四章 网店的商品描述模板

关于网店的商品描述模板

制作商品描述模板的目的是为了展示店铺里的商品，它包括宝贝描述、贝展示、买家须知、联系我们与邮资说明等板块。

商品描述模板能对商品起到装饰与衬托作用，同时还可以提高店铺商品的人气。一般来说，商品描述模板有宽版与窄版两种形式。普通店铺通常采用的是宽版样式设计，而在旺铺中由于左侧有能够显示掌柜档案、店铺类别等隐藏/显示侧栏，所以店主要根据不同的默认设置来选择商品描述模板是用宽版还是窄版。通常而言，宽版商品描述模板宽度不得大于930像素，窄版商品描述模板宽度不得大于710像素，而高度都是没有限制的。

关于商品描述模板，有这样几条建议：

在制作商品描述模板前，可以先去看看其他卖家的模板，将好的借鉴到自己的店铺中来使用。

如果你的商品描述模板不适宜用在你的店铺中，就先不要使用模板。

为突出店铺中的商品图片，商品描述模板上其他的内容一定要简单明了，以免次要部分太过花哨而无法突显商品图。

商品描述里最基本的信息包括商品名称、具体的尺寸和价格等，也可以将优惠信息或是邮费信息加进去。如果有条件可找个服务器将图片上传，接着将图片的地址添加至商品描述中，买家看到实物图还有细节图会更有兴趣看下去，这样就能提高交易率了。

通常来说，制作商品描述模板包含下面几部分内容：

店铺公告，与普通店铺中的公告类似，一般以滚动字幕的方式显示。

新品推荐，把新商品的图片制作成滚动方式显示。

宝贝展示，用来展示当前商品的细节、大图等，图的数量可根据实际情况来定，可以是单图也可以是多图。令宝贝描述，对商品进行文字描述。令买家须知，可以在这里输入一些注意事项。

联系方式，可以显示手机号码、旺旺、MSN、QQ和电子邮件等联系方式。

邮资说明，也就是关于商品邮寄资费的说明。

制作宽版商品描述模板

宽版商品描述模板所包含的栏目信息比较多，如商品分类、店铺公告、最新推荐和更多推荐，以及最关键的商品描述、商品展示、联系方式、邮资说明和买家须知等内容。

下面以“随心饰品”为主题介绍宽版商品描述模板的设计与制作。

一、制作商品描述模板

在设计描述模板前要先在网络中搜集一些相关的素材图片，将其作为顶部背景与店铺公告装饰图片。在photoshop软件中设计商品描述模板，各个栏目之间要注意合理布局，具体操作步骤如下：

打开photoshop软件，选择菜单“文件”—“新建”命令，弹出“新建文档”对话框，设置宽度为930像素，高度为300像素，接着在工具栏中将前景颜色设置为“白色”，背景颜色设置为“淡紫色”。

在工具栏中单击“渐变工具”按钮，接着在“选项”面板中单击“点按可编辑渐变”按钮，打开“渐变编辑器”对话框，在“预设”区域中单击第1个选项。选择“图层”—“新建”—“图层”命令，创建一个新图层，然后在图片中从上至下填充渐变颜色。

打开素材图片，将其拖动至已创建的图片中，并使用“编辑”菜单中的“自由转换”命令，来调整图片尺寸，调整到合适大小后将图片移动到左侧。

打开另一幅素材图片，作为公告图片。因其背景为透明，所以可直接复制粘贴到“银质项链．psd”图片中，调整大小与位置。

在工具栏中单击“横排文字工具”按钮，在“选项”面板中将字体设置为“方正流行体简”，字体大小为“36点”，设置取消锯齿的方法为“浑厚”，设置文本颜色为“白色”。接着在图片中输入店铺名称“随心饰品”，并对文字进行描边样式设置。

在右侧顶部制作几个按钮，在工具栏中单击“圆角矩形工具”按钮，在“选项”面板中设置半径为“5px”，设置新图层样式为“无样式”，设置新图层颜色为“白色”。在图片中拖动鼠标绘制出一个圆角矩形框。在新增加的形状图层中，添加图层描边样式，设置2像素的淡紫色描边。

在“图层”面板中再复制3个形状图层，然后使用键盘上的箭头按钮将4个按钮移动至水平位置。利用素材图像在每一个按钮前添加一只蝴蝶图案进行装饰，要注意统一位置。键盘上的箭头按钮一次只能移动1像素，而使用箭头按钮则可一次移动10像素，这样能够快速把图层移动到相应的位置。这里使用箭头按钮进行移动图层，而不用鼠标进行直接拖动图层元素，是为保证移动对象能够水平对齐。

在工具栏中单击“横排文字工具”按钮，然后分别在4个按钮中输入文字“我的店铺、信用评价、个人空间和加入收藏”，在打开的“字符”面板中设置字体为“方正黑体简体”，字体大小为“14点”，设置消除锯齿的方法为“浑厚”，设置文本颜色为“紫色”，设置字间距为70。

在按钮文字下方制作“最新推荐”栏目，首先输入文字“最新推荐”，并设置相关字体、颜色、描边等样式。然后使用前面介绍的圆角矩形工具，绘制出一个白色背景、粉红色沟边的矩形区域。在其中将制作滚动图片的效果。

选择菜单“图像”—“画布大小”命令，弹出“画布大小”对话框，在其中将高度修改为1060像素，然后在“定位”中单击第1排中间的方块。单击“确定”按钮，图片的高度变为1060像素。

接下来对画布扩展后的图片的下半部分进行设计与制作，具体操作步骤如下：

单击“矩形选框工具”按钮，在图片下半部分拖出一个矩形区域，并采用淡紫色进行填充。

在工具栏中单击“圆角矩形工具”按钮，分别在填充的淡紫色区域中绘制出左右两个背景为白色的矩形框。在左侧制作“商品分类、更多推荐”栏目，在右侧制作“宝贝展示、宝贝描述、买家须知、邮资说明和联系方式”栏目。

需要在左侧区域制作两个栏目按钮“商品分类”与“更多推荐”，单击“圆角矩形工具”按钮，在左侧区域中拖出一个圆角矩形框，这时的矩形框采用了前景颜色填充。复制圆角矩形框并移动到下方，分别输入两个按钮的名称。

在右侧制作其他相关栏目，这里可运用一些恰当的花边进行装饰，并在中间输入标题名称。

根据同样的方法，再将其他几个栏目的标题名称制作出来，由于它们是并列一起的，可以统一风格，只需修改标题文字即可。

“银质项链．psd”商品描述模板图片制作完成后，将其直接保存。

二、制作闪光动画

在前一节中制作完成的商品描述模板，只是静态的，还不够美观，而若想生成的网页更加绚烂，就需增加一些动画效果。给模板制作闪光动画的具体操作步骤如下：

打开photoshop软件，打开上一节中保存的图片“银质项链．psd”。

绘制一个闪光的图案。新建一个图层，在工具栏中单击“椭圆选框工具”按钮，在任意位置拖出一个椭圆形选框。选择菜单“编辑”—“填充”命令，使用深紫色进行填充。

在工具栏中单击“移动工具”按钮，按下alt键后拖动鼠标复制一个相同的深紫色椭圆形。选择菜单“编辑”—“自由变换”命令，对图形进行位置调整，将其移至与第1个椭圆形相交的位置。

按下回车键确定完成调整。接着在“图层”面板中选中这两个图层，并单击右上角的箭头按钮，在弹出的菜单中选择“合并图层”命令。

选择菜单“编辑”—“自由变换”命令，按住shift键进行等比例缩小闪光图形至合适的大小，最终设计成小星星的形状。

将闪光点复制到所有希望看到闪动的位置，然后根据实际情况调整它们的大小、角度等。如可在“最新推荐”的旁边复制一些，店名旁复制一些等。

选择菜单“窗口”—“动画”命令，打开“动画”面板。单击“复制当前帧”按钮，就能在“动画”面板中显示一个新的帧。

在“动画”面板中选中第2帧，然后在“图层”面板中分别选中每1个闪光图案所在的图层，将它们的透明度分别设置为50%。

完成设置后，选中两个帧，将延迟时间都设置为0.2秒。单击“播放/停止动画”按钮就能显示制作完成的动画效果。最后将图片保存成gif动画格式即可。

三、裁剪和保存描述模板

怎样将制作好的图片裁切成适合制作网页的元素做一个介绍，具体操作步骤如下：

打开photoshop软件，打开上小节设计好的描述模板图片，选择菜单“视图”—“标尺”命令，显示图片标尺，并保证“视图”—“显示”—“参考线”为选中状态，接着从标尺的位置拖出参考线。

根据上面的方法再拖出几条参考线。参考线的作用是标注裁切成最终图片的位置，因而要注意尽量将有动画效果的部分放置在一个区域里，这样存储成一个gif格式的动画即可。另外，还要注意裁切的图片尽可能保持高度相同，不然会给图片拼接造成麻烦。在拖出参考线时，如果看不清楚具体的位置，可将图片放大显示，这样能让参考线的位置更加准确。像关联性不是太强的按钮以及最新推荐等标题，可不用参考线来定位，直接裁切后保存成图片就行了。

在工具栏中单击“裁切工具”按钮，拖动鼠标选中左侧的一列。这列中没有动画效果，因而可将其制成一张图片。在选中区域双击鼠标左键，完成图片裁剪。

选择菜单“文件”—“存储为Web和设备所用格式”命令，弹出“存储为和设备所用格式”对话框，单击“四联”按钮，图片显示四联，分别显示了不同颜色状态下图片保存后的大小，在不失真的情况下可以选择第3个。

单击“存储”按钮，弹出“将优化结果存储为”对话框，在对话框中选择要保持的文件夹，将文件命名为“top—1.gif”，单击“保存”按钮，完成图片保存。

选择菜单“窗口”—“历史记录”命令，打开“历史记录”面板，在历史记录列表中选择“裁剪”的前一条记录，图片将返回裁剪前的状态。

单击“裁剪工具”按钮，拖动鼠标选中相应区域。

根据前面同样的方法单击"四联”按钮，在其中选中32颜色选项的图片，将其存储为“top—2.gif”。

继续按照上面的方法裁切保存其余未裁剪的gif图片动画，左侧上半部分的图片被切割成以下几个部分。

接下来开始裁剪右侧上半部分的按钮和最新推荐等内容。从标尺中拖出一些参考线用来划分按钮，这里不再赘述裁剪方法。相对而言，保存下半部分的图片元素比较简单，只需把圆角区域与按钮都保存成单独的图片就可以了。

四、制作宽版描述模板网页

在运用描述模板前，要先将其生成HTML代码，然后才可以应用到网上店铺中。

可使用Dreamweaver软件将描述模板生成HTML（文本标记语言）代码。在Dreamweaver软件中，主要是采用层“DIV”，或表格来控制文字与图片元素，对于不熟练的人来说采用表格布局会更简便些。使用Dreamweaver软件生成网页代码的具体操作步骤如下：

打开Dreamweaver软件，在快捷菜单“新建”列表中选择HTML选项。打开一个空白的网页，选择菜单“文件”—“保存”命令，在弹出的“另存为”对话框中选择前面已保存的HTML文件夹，并输入文件名“miaoshu.html”。

单击“保存”按钮后返回网页编辑窗口。选择菜单“插入”—“表格”命令在弹出的“表格”对话框中设置行数为4，列数为5，表格宽度为“930”像素，边框粗细、单元格边距和单元格间距都设为0。

单击“确定”按钮，在网页中插入4行5列，宽度为“930”像素的表格。

将光标放在第1列第1行，拖动鼠标选中第1列在“属性”面板中单击“合并所选单元格”按钮，将第1列的4个单元格合并。接着，在合并后的单元格中单击，将光标插入在单元格中。

选择菜单“插入”—“图像”命令，在弹出的“选择图像源文件”对话框中先打开“images”文件夹，然后选中要在该单元格中插入的图像文件“top—1.gif”。

弹出“图像标签辅助功能属性”对话框，可在“替换文本”文本框中输入图片的说明文字。单击“确定”按钮，将图片插入到光标所在单元格中。

把光标移到第2列第1行单元格中，根据上面的方法选择需要插入的图像文件“top—2.gif”。在第2列第2行单元格中插入图像文件“top—3.gif”。拖动鼠标选中第2列后两行单元格，在“属性”面板中单击“合并所选单元格”按钮，将其合并，然后在单元格中插入图像文件“top—4.gif”。

拖动鼠标选中第3列与第4列第1行的两个单元格，在“属性”面板中单击“合并所选单元格”按钮将其合并，在合并后的单元格中插入图像文件“top—5.gif”。然后将光标移至第3列的第2行，根据前面介绍过的方法插入背景图像“top—bg.gif”，单击“确定”按钮，插入背景。

选择第3列的第3行与第4行单元格，在“属性”面板中单击“合并所选单元格”按钮将其合并，在合并后的单元格中插入图像文件“top—8.gif”。随后，在第4列下面单元格中分别插入其他相应的图片。

接下去要在Dreamweaver软件中制作图片右上部分的内容，具体操作步骤如下：

在第5列第1行单元格中单击鼠标，选择菜单“插入”—“表格”命令，并设置表格的行数为1，列数为4，宽度为534像素。

单击“确定”按钮，在单元格中插入1行4列的嵌套表格。

将光标分别移动到嵌套表格的每一个单元格中，并分别插入相应的按钮图片。

拖动鼠标选中第5列剩下的3个单元格，并将其合并。在合并后的单元格中插入3行1列，宽度为534像素的嵌套表格，在嵌套表格的第1行单元格中插入“最新推荐”，标题图片top—14.gif。在第2行单元格中再插入1行3列，宽度为534像素的嵌套表格。在两侧的单元格中分别插入相应图片。

在嵌套表格的第3行中插入图像文件“top—17.gif”，完成后上半部分的效果就出来了。

接下来开始制作图片下半部分的内容，具体操作步骤如下：

使用鼠标在上半部分表格的右侧单击，按下回车键。然后，选择“插入”—“表格”命令，插入3行5列，宽度为930像素的表格。拖动鼠标光标选中第1列的3个单元格，将它们合并，并在“属性”面板中设置单元格宽度为10，背景颜色为“淡紫色”。

在第2列第1行和第3行单元格中分别插入图像文件“bottom—1.gif”和“bottom—4.gif”，并设置该列单元格宽度为174像素。然后合并第3列单元格，设置宽度为10，单元格背景色为“淡紫色”。

合并第4列和第5列的第1行单元格，并插入图像文件“bottom—5.gif”。同样方法合并第4列和第5列的第3行单元格，并插入图像“bottom—6.gif”。然后，设置第4列第2行单元格宽度为730像素，第5列第2行单元格宽度为6像素，单元格背景颜色为“淡紫色”。

将光标移动到左侧空白单元格中，单击“表格”按钮，插入4行1列，表格宽度为957像素的表格，单击“确定”按钮插入嵌套表格。单击嵌套表格边框，选中嵌套表格后，在“属性”面板“对齐”下拉菜单中选择“居中对齐”选项。然后分别在第1行和第3行中插入“商品分类”和“更多推荐”的标题图片。

将光标移动到右侧空白单元格中，插入8行1列，表格宽度为95%的嵌套表格，并设置表格“居中对齐”。分别在1、3、5、7单元格中插入相应的标题图片。将光标移动到公告栏单元格中，在其中输入公告信息。然后在“文档”面板中单击“拆分”按钮，将在编辑窗口左半部分显示代码视图，右半部分显示设计视图。

在代码视图中公告信息文字的前面输入以下代码：<marqueedirection=“up”scrollamo unt=“1”scrolldelay=“0”height=“80”onmoustover=this.stop（）nomouseout=this.start（）><fo ntcolor=“#f2ba23”><fontsize=2><pstyle=“line—height:2; ”>，并在公告信息文字的结尾处输入以下代码：</p></font></font></marquee>

代码添加完成后，公告栏的信息已变为2号橘黄色文字。而滚动字幕的效果只有在浏览器中才能显示，如果想查看可按下F12键，在浏览器中打开网页查看。

根据最新推荐区域内的高度要求，制作好相关商品图片。将光标移动到最新推荐下面的空白单元格中，单击“表格”按钮插入1行4列，表格宽度100%，单元格边距为3的表格。单击“确定”按钮，在空白单元格中插入嵌套表格。然后在每个单元格中分别插入4幅商品图片。

在代码视图中<table>…</table>外侧添加如下代码：<marqueedirection=“left”scroll amount=“2”scrolldelay=“0”onmouseover=this.stop（）onmouseout=this.start（）><table></table></marquee>