宝贝描述模板表格制作.docx

一、一级布局表格制作。    由于我们的宝贝描述模板宽度是750像素，所以应在新网页中插入一个宽750像素、六行一列的表格。    具体操作步骤如图，第一步：点击工具栏中的“插入表格工具”，在弹出的对话框中输入六行一列，宽度750像素，然后点击确定，如图1.1-1.2。    第二步，点击已经插入的表格，在属性面板的对齐属性中选择“居中”，这样是为了让普通宝贝模板的表格可以在淘宝页面中居中显示，如图1.3。    通过这两部，一级布局表格就制作完成了。 二、顶部图片推荐位的二级表格制作。    顶部图片推荐位是一个一行三列的二级表格里面嵌套两个三级表格，制作方法和上面一样简单，具体步骤如下：    1.点击布局表格顶部的单元格，点击工具栏中的“插入表格工具”，在弹出的对话框中输入一行三列，宽度100%，如图2.1。    2.点击刚才插入的二级表格的第二列单元格，插入一个两行一列、宽度100%的表格，再在二级表格的第三列插入一个四行一列、宽度100%的表格，方法和第一点相同。 三、在表格中插入图片。    顶部图片推荐位的三个表格已经准备就绪，只要将已经准备好的图片插入到相应的单元格就算完成了。左侧的大图直接插入到二级表格最左边的单元格即可，中间和右侧的小图分别插入到三级表格中。具体方法如下：    1.点击二级单元格的左侧列，再点击工具栏中的“插入图像工具”，如图3.1。    2.在弹出的对话框中选择图片文件，选好后点击确定，如图3.2。    3.点击已插入的图片，在属性面板中填写图片的链接，并填写替换文本和选择“目标”为_blank，如图3.3。    4.如法炮制，将剩下的图片全部插入到表格中。    经过以上三大步骤，一级整体布局表格和顶部图片推荐位的制作就大功告成了。一、二级表格制作    点击一级表格的第二行，单击插入表格工具，在插入表格对话框中填入两行一列、宽度100%，如图1所示。上面一行用作表格栏，下面一行留给主要内容。 二、标题栏制作    1.在制作标题栏前，先准备一张标题栏的背景图，如图二所示，其高度为30像素，宽730像素。    2.点击新插入表格的第一行单元格，用上面相同方法插入一个一行两列的表格，宽度730像素，如图三所示。    3.选中新插入的表格，在属性面板中定义表格高度为30像素，对齐方式为居中，背景图像选择预先保存好的背景图。    4.点击标题表格的第一个单元格，定义其宽度为100像素，对齐方式为居中，然后在单元格内输入标题文字。    经过这四步，标题栏就制作完成了，如果您觉得标题字体不好看，可以换乘其它字体，或者干脆用图片代替它。 三、插入内容    在宝贝模板图片的第二项是产品特点的内容，在页面中可以用两种方法制作，一种是插入文字，但为了达到效果需要定义一些CSS，比较麻烦；另一种方法是直接插入一张图片，使用起来更简单。    我采取了第二种方法，直接裁切一张图片插入到表格中。 四、其它二级表格制作    在上篇文章中我也说到过，在宝贝模板的设计图中2-6区域的格式是大体相似的，都是由一个标题栏和一块主要内容组成的。既然通过前几个步骤已经将标题栏和主要内容区域的表格制作好，下面的步骤就更加简单了。只需要将两行一列和标题栏一起的二级表格复制到一级表格的其它单元格即可。具体方法如下：    1.点击选中两行一列的二级表格，按Ctrl+C复制内容。    2.分别点击一级单元格下的各单元格，按Ctrl+V键将刚才复制的内容粘贴到各单元格中。    3.修改标题名称，并将各部分的主要内容插入到表格中。    其中，详细参数主要内容表格中需要再插入一个十二行两列的表格用来填写更像参数；    图片展示处需要插入一个两行两列的表格；1.点击“其它宝贝推荐”所属的那个两行一列的表格中下面的单元格，然后按Ctrl+T键，在小窗口中输入以下Html代码，如图一所示： <div style="width:730px;height:160px;margin:10px auto;overflow:hidden;"></div>    这个步骤是为滚动效果制作一个宽730像素、高160像素、并水平居中的容器，并让宽于730像素的内容隐藏。    2.将鼠标点击在刚插入的div中，然后插入一个三行八列表格，宽度可为空，如图二所示，这个表格是滚动效果的内容区域。    3.在刚刚插入的表格中选中所有的第一行单元格，在属性面板的宽度中输入135，高度130，并在水平选项中选择居中，如图三所示。    4.用同样方法，选中第二行和第三行单元格，使其水平对齐为居中。    5.点击第一行单元格，插入宝贝图片并给图片加上链接，点击第二行单元格填入宝贝名称并加上连接，点击第三行单元格填入宝贝价格，直到把八个宝贝位置填满为止，效果如图四所示。    虽然表格有些被撑开变形，但无关紧要，不影响预览效果。    6.选中滚动效果内容区域的表格，切换到代码视图，在刚才步骤一插入div的代码下方加入以下Html代码： <marquee scrollamount="3" width="730" height="160px" bgcolor="#EFEFEF">    然后在下面找到此div的结束符</div>，在其前面加上滚动效果的结束代码</marquee>。    7.以上代码加好，按F12键预览一下，滚动效果应该已经完成了。如果还有问题，再向上查看一下哪个步骤出现了错误，或者提问题给我。从设计图中看出，目前的其它宝贝推荐栏目只能推荐五个宝贝，显然是好的空间没有得到很好的利用，为了让它容纳更多内容，我们可以想想办法，比如图片滚动效果。 关于滚动效果制作方法，我曾经写过一篇文章，可以先预习一下滚动文字效果的制作方法。 下面接着上篇文章普通店铺宝贝描述模板第四步_表格制作2继续制作带有滚动效果的其它宝贝推荐栏目的表格，详细方法如下： 1.点击“其它宝贝推荐”所属的那个两行一列的表格中下面的单元格，然后按Ctrl+T键，在小窗口中输入以下Html代码，如图一所示： <div style="width:730px;height:160px;margin:10px auto;overflow:hidden;"></div> 这个步骤是为滚动效果制作一个宽730像素、高160像素、并水平居中的容器，并让宽于730像素的内容隐藏。 2.将鼠标点击在刚插入的div中，然后插入一个三行八列表格，宽度可为空，如图二所示，这个表格是滚动效果的内容区域。 3.在刚刚插入的表格中选中所有的第一行单元格，在属性面板的宽度中输入135，高度130，并在水平选项中选择居中，如图三所示。 4.用同样方法，选中第二行和第三行单元格，使其水平对齐为居中。 5.点击第一行单元格，插入宝贝图片并给图片加上链接，点击第二行单元格填入宝贝名称并加上连接，点击第三行单元格填入宝贝价格，直到把八个宝贝位置填满为止，效果如图四所示。 虽然表格有些被撑开变形，但无关紧要，不影响预览效果。 6.选中滚动效果内容区域的表格，切换到代码视图，在刚才步骤一插入div的代码下方加入以下Html代码： <marquee scrollamount="3" width="730" height="160px" bgcolor="#EFEFEF"> 然后在下面找到此div的结束符</div>，在其前面加上滚动效果的结束代码</marquee>。 7.以上代码加好，按F12键预览一下，滚动效果应该已经完成了。如果还有问题，再向上查看一下哪个步骤出现了错误，或者提问题给我。