手把手教你做淘宝宝贝描述表格.doc

呵呵，经验畅谈居的同志真给力啊！刚刚申精不到十分钟，就加精了！ 我们作为淘宝卖家，特别是一些鞋帽服装类的卖家，由于经营产品的特殊性，经常要在自家宝贝描述当中为宝贝的实际尺寸列举出具体的数据，以方便各位买家朋友对更好的挑选到自己适合自己的尺码。根据我的观察，在淘宝店铺当中进行数据列举，主要有两种形式。我们先来看看几张在淘宝店铺当中找到的几个具有代表性的数据列举形式。第一种形式，是纯文字列举。如图1所示。图1这种形式应该是最原始的一种尺码数据列举方式，在这里，我们只需要在编辑宝贝描述时，直接用文字键入，方便易行。这种方式也是很多小卖家正在使用的方式。第二种形式，图片列举。如图2所示。 图2这种形式就是先用一些辅助软件，制作表格，并在表格当中填充数据，其次将这个表格处理成图片，然后把这个图片上传到自己的图片空间当中，最后在编辑宝贝描述时，直接将这个图片从空间当中插入就行了。这种形式虽然麻烦一点，但从表现形式上看，这种方式显得很专业，至少在版面上很美观。并且利用这种方式，还可以根据自己的需要，创造性的设计出很精美的表格，从而能更好的美化自己的店铺。如图3所示。 图3 当然，这里的创意是无限的，所制作的表格图片的样式也是无限的。这正是所谓只有想不到，没有做不到！但回过头来，我们再来审视一下这两种形式。第一种形式简单方便，如果数据发生变化，我们可以随时进行修改，而不会增加任何操作，但这种形式对于我们店铺形象的推广没有多大的益处，毕竟不太美观。第二种形式专业美观，不仅列举出了数据，还可以用丰富的表现形式来为自己店铺的形象增色不少，但这种形式可操作性不强，因为一旦我们的宝贝尺码数据发生变化，我们只能重新制作表格，生成图片，上传图片，最后编辑修改。如果店铺当中的宝贝数量多的话，那这种表格的制作任务就会令人望而生畏。这也是为什么有那么多的小卖家宁愿选择文字列举形式的一个非常重要的原因，毕竟店小，没有那么多的人手来处理这种事情，只有大卖家才会富余的人手来进行这种表格的处理。 那能不能把这两种数据列举方式的优点统一起来，让数据可以随时修改，并最大程度上以专业的形式呈现在我们面前，使鱼和熊掌两者兼得呢？ 我个人总是坚信，只要我们敢想，就一定可以做到。经过我的试验，我发现这种两者兼得的方式其实是存在的！ 在我家店铺当中目前正在使用经过我改良之后的数据列举方式，效果如图4和图5所示： 图4 图5 这是我店铺当中目前正在使用的两个数据列举形式，第一个是鞋子类的，第二个是服装类的。我把这两个数据列举表格都做成了模板，这样我在编辑宝贝时，直接将这些代码粘贴到宝贝描述当中该出现的位置，一个样式美观的表格就有了哦，然后直接在其中对表格中的数据进行修改，发布一下就完成了任务。简单易行！ 下面我们就来说一说这种表格模板的制作方法吧，希望更多的朋友能了解并加了使用。为了说明的方便，我们就以图6为例来看看具体的制作过程。 图6在这里，我们先祭出我们店铺装修的重量级工具，那就是Dreamweaver哦！关于Dreamweave的使用，我曾经在经验畅居发过一专门的帖子， Dreamweaver跟我学，装修达人就是您 这份帖子在发表之后，曾经在经验畅谈居的首页头条展示。如果大家对Dreamweaver的使用不是很熟的话，可以看看这个帖子。不过有一点，要说明，这个帖子当时是以Dreamweaver 8.0为基础进行撰写的。由于现在这个软件的升级，现在这个版本的用的比较少，不过原理都是一致的。现在我们制作这个模板，使用的是Dreamweaver CS4，关于Dreamweaver CS4的在淘宝店铺装修中的使用，有兴趣的话，可以看看我的新书视觉推广：赚钱淘宝店铺装修全攻略，在书中我对Dreamweaver CS4的使用做了比较详尽的说明。 言归正传，下面我们开始来制作吧！不过前提条件，你的电脑当中要安装用我们要使用的Dreamweaver CS4哦！首先，启动DW CS4，并新建一个基本的HTML文件。如图7所示。 图7在这里，我们要插入表格。如何插入呢？我们只需要点击上图红色方框所示位置，就可以找到表格的插入哦！大家可以自己试一试，不管是从那里插入表格，点击之后，都会出现如图8所示的界面。 图8在这里，根据设计，我们需要一个6行5列的表格，宽度为740像素，表格的宽度为1px。那么我们就如图8所示，对行、列、宽度及参数进行设置，其他的参数就不要调整，直接按图8所示就行。设置完毕之后，直接点击“确定”按钮即可。点击之后，在Dw CS4的界面当中，就会出现如图9所示的表格了。 图9这样一个表格的雏形就展现在我们面前了，我们下面将按照我们的设计将表格中的文字分别输入，并对表格作一下调整。这里的调整主要是将单元格的对齐方式都设置为水平和垂直居中，文字大小及颜色变化，最后一行单元格进行合并。最终处理结果如图10所示。 图10 我们在浏览器当中看一看这个表格的效果。如图11所示。 图11从这里，我们可以看到，一个表格的雏形已经被我们建立起来了，但总觉得有些美中不足，这个美中不足主要体现在三个地方。第一个地方就是表格的边框，我们在前面插入表格时，已经设定表格的宽度为1px，但现在展现在我们面前的边框宽度是2px的，怎么解决呢？造成这种现象的原因是单元格的之间有默认间距，为了处理这一点，我们就要把这个默认间距取消，取消的方法很简单，只需要我们在代码编辑窗口当中，将style=border-collapse:collapse;这个代码放在表格的Table标签当中。如图12所示。 图12 加完之后，保存一下，我们再用浏览器看一看效果。如图13所示。 图13怎么样，是不是消除了呢？但又出现了一个问题，那就是表格的边框线的颜色是系统默认的浅灰色，显示时不是很明显，能不能把边框颜色加深一些呢？答案当然是肯定的。我们还是再次回到Dw CS4的代码编辑窗口当中，将鼠标定位到Table标签当中，按一下空格键，此时代码区就会自动弹出表格的属性选择框，我们在其中选择“bordercolor”属性，如图14所示。 图14 双击此属性，此时就会弹出边框颜色选择面板，在其中我们选择自己需要的颜色。如图15所示。 图15 在这里，我们选择一种深灰色，选择之后，保存文件，再次在浏览器中预览，看看效果的变化。如图16所示。 图16 怎么样？现在的表格的边框是不是明显起来了。当然，你也可以选择你自己中意的其他颜色。 好，到现在我们已经解决了第一个不足。那么第二个不足体现在什么地方呢？就是表格的行高太小，整个表格给人的感觉很压抑。这主要是由于HTML中的表格的行高是自适应的，它会自动根据单元格中的内容来变化，这种功能对于单元格中输入大量的内容是很有帮助的，我们这里的单元格的内容输入的内容很少，不需要它自适应，只希望它能按我们的设计显示。下面我们就着手解决这个问题。在DW的代码编辑窗口当中，将光标定位到表格的第一行的TR标签当中，按一下空格键，此时代码区就会自动弹出行的属性选择框，我们在其中选择“height”属性，如图17所示。 图17 双击height属性，此时就可以让我们设置行高了。如图18所示，我们设置为35。 图18按照同样的方式，我们将所有的行高都设置为35，保存之后，再来预览。如图19所示。 图19 呵呵，表格的外格更进一步地改观了哦！ 第二个不足之处也被我们完美解决了。第三个不足之处，就是表格的背景是单纯的白色，给人的感觉不是很好，是否可以处理掉表格的纯白背景呢？答案也是肯定的哦！接下来，我们就着手解决这个问题吧！在DW的设计窗口当中，用鼠标拖选一行。如图20所示。 图20 单击图20红色方框中的背景颜色选择面板，在弹出的面板当中选中中意的颜色。图21 选择之后，我们就可以在设计区看到实时效果了。如图22所示。 图22按照同样的方式，我们将其他各行的背景颜色全部设置完毕，并保存下来。最后我们再来预览一下，看看最后的效果吧！如图23所示。 图23怎