回首页
当前位置: 主页 > 网店装修 >

淘宝学堂网店装修 手把手教你做宝贝描述页的尺寸表格

分享到:
时间:2013-06-02 01:52来源:未知 作者:admin 点击:

  对于服装淘宝店主,在宝贝描述中增加宝贝尺码表是很有必要的。但是,纯文字列举是不是有点粗糙呢,如果能在宝贝描述中插入表格就好了。今天我们就详细介绍下如何用DREAMWEAVER在宝贝描述中插入表格。

    普通的文字形式
 

宝贝描述插入表格

    这种形式应该是最原始的一种尺码数据列举方式,在这里,我们只需要在编辑宝贝描述时,直接用文字键入,方便易行。这种方式也是很多小卖家正在使用的方式。


    如果数据发生变化,我们可以随时进行修改,而不会增加任何操作,但这种形式对于我们店铺形象的推广没有多大的益处,毕竟不太美观。


    第二种形式,图片列举。如图2所示。
 

宝贝描述插入表格



    这种形式就是先用一些辅助软件,制作表格,并在表格当中填充数据,其次将这个表格处理成图片,然后把这个图片上传到自己的图片空间当中,最后在编辑宝贝描述时,直接将这个图片从空间当中插入就行了。


    这种形式可操作性不强,因为一旦我们的宝贝尺码数据发生变化,我们只能重新制作表格,生成图片,上传图片,最后编辑修改。如果店铺当中的宝贝数量多的话,那这种表格的制作任务就会令人望而生畏。这也是为什么有那么多的小卖家宁愿选择文字列举形式的一个非常重要的原因,毕竟店小,没有那么多的人手来处理这种事情,只有大卖家才会富余的人手来进行这种表格的处理。


    这种形式虽然麻烦一点,但从表现形式上看,这种方式显得很专业,至少在版面上很美观。并且利用这种方式,还可以根据自己的需要,创造性的设计出很精美的表格,从而能更好的美化自己的店铺。如图3所示。
 

宝贝描述插入表格

    对比一下,当然很明显,第三种的效果要美观大方。下面我们就一起来做一个吧。


     首先,打开DREAMWEAVER,新建一个基本的HTML文件。

 

宝贝描述插入表格

    在这里,我们要插入表格。如何插入呢?我们只需要点击上图红色方框所示位置,就可以找到表格的插入哦!大家可以自己试一试,不管是从那里插入表格,点击之后,都会出现如图8所示的界面。
 

宝贝描述插入表格

    在这里,根据设计,我们需要一个6行5列的表格,宽度为740像素,表格的宽度为1px。那么我们就如图8所示,对行、列、宽度及参数进行设置,其他的参数就不要调整,直接按图8所示就行。设置完毕之后,直接点击“确定”按钮即可。
点击之后,在Dw CS4的界面当中,就会出现如图9所示的表格了。

    这样一个表格的雏形就展现在我们面前了,我们下面将按照我们的设计将表格中的文字分别输入,并对表格作一下调整。这里的调整主要是将单元格的对齐方式都设置为水平和垂直居中,文字大小及颜色变化,最后一行单元格进行合并。
 

宝贝描述插入表格

    从这里,我们可以看到,一个表格的雏形已经被我们建立起来了,但总觉得有些美中不足,这个美中不足主要体现在三个地方。


    第一个地方就是表格的边框,我们在前面插入表格时,已经设定表格的宽度为1px,但现在展现在我们面前的边框宽度是2px的,怎么解决呢?


    造成这种现象的原因是单元格的之间有默认间距,为了处理这一点,我们就要把这个默认间距取消,取消的方法很简单,只需要我们在代码编辑窗口当中,将style="border-collapse:collapse;"这个代码放在表格的Table标签当中。

 

宝贝描述插入表格

    加完之后,保存一下,我们再用浏览器看一看效果。
 

    怎么样,是不是消除了呢?但又出现了一个问题,那就是表格的边框线的颜色是系统默认的浅灰色,显示时不是很明显,能不能把边框颜色加深一些呢?答案当然是肯定的。我们还是再次回到Dw CS4的代码编辑窗口当中,将鼠标定位到Table标签当中,按一下空格键,此时代码区就会自动弹出表格的属性选择框,我们在其中选择 “bordercolor”属性。
 

宝贝描述插入表格

    双击此属性,此时就会弹出边框颜色选择面板,在其中我们选择自己需要的颜色。
 

宝贝描述插入表格

    在这里,我们选择一种深灰色,选择之后,保存文件,再次在浏览器中预览,看看效果的变化。

 

宝贝描述插入表格

    表格的背景是单纯的白色,给人的感觉不是很好,是否可以处理掉表格的纯白背景呢?答案也是肯定的哦!接下来,我们就着手解决这个问题吧!

    在DW的设计窗口当中,用鼠标拖选一行。

 

宝贝描述插入表格

    选择之后,我们就可以在设计区看到实时效果了。
 

宝贝描述插入表格

    按照同样的方式,我们将其他各行的背景颜色全部设置完毕,并保存下来。最后我们再来预览一下,看看最后的效果吧。

 

宝贝描述插入表格
·新手想开女装、鞋子、化妆品网店可点此向双皇冠卖家咨询


------分隔线----------------------------


推荐内容
优秀装修模板