音画制作详解

有了以上代码使用的基本常识，现在我们可以开始正式学习代码音画的制作了。

音画贴中有很多元素，这些元素的定位或者背景的定义都需要通过表格来实现，这和网页设计的表格布局方法是一样的。当然音画贴没有那么复杂，只需要掌握基本表格的使用方法即可。下面我们直接用编辑器的按纽来插入一张一行一列的表格。

表格

转到HTML状态下，来看看它的代码

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>表格</TD></TR></TBODY></TABLE>

<TABLE></TABLE>定义了一张表格

<TBODY></TBODY>定义了一个表格体

<TR></TR>定义了一行

<TD></TD>定义了一列

可见，如果我们想在表格中再加上一行或一列，只需要增加<TR></TR>或<TD></TD>代码对即可。

再看一个二行三列的表格，大家比较一下。

表格	表格	表格
表格	表格	表格

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>表格</TD>
<TD>表格</TD>
<TD>表格</TD></TR>
<TR>
<TD>表格</TD>
<TD>表格</TD>
<TD>表格</TD></TR></TBODY></TABLE>

我用红色标出的，其实就是表格中一行的代码，这一行里面有三列。怎么样？表格行列代码清楚了吧？在表格行列代码中，还有一个高级应用，就是合并单元格。

栏位垂直合并 -- rowspan <td rowspan=欲合并栏位数>

栏位横向合并 -- colspan <td colspan=欲合并栏位数>

比如在以上代码中，我要垂直合并2个单元格，现在我把这个代码加进去。因为第一行垂直合并了单元格，所以第二行不能用三列，只能改为2列，以保持表格外观对称。

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD rowSpan=2>表格</TD>
<TD>表格</TD>
<TD>表格</TD></TR>
<TR>
<TD>表格</TD>
<TD>表格</TD></TR></TBODY></TABLE>

表格	表格	表格
	表格	表格

这里我们来学习一下表格代码<table>里的参数。还是插入一行一列的表格为例。值得注意的是，在插入表格里，系统会自动为表格中填入空格。做音画贴时，要删除这个空格。

例表

代码：

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

borderColor=#cccccc 表示表格边框的颜色，等于号后面的是颜色代码。在编辑器中选取颜色时，调色板上会自动显示该颜色的代码，查起来也很方便。

cellSpacing=2 定义表格中单元格之间的距离(=0时，则表格成为粗单线条)。

cellPadding=3 定义单元格内容与单元格边框之间的距离，属性值是数字。

bgColor=#ffffff 定义表格的背景颜色，属性值是各种颜色代码。

border=1 定义表格的边框宽度，属性值是数字。

width="100%" 定义表格的宽度，属性值是数字，也可能用百分比例表示。

以上是这个“例表”中所涉及的表格代码参数，大家可以试着修改定义值，看看效果，熟悉一下这些代码。比如下面的：

<TABLE borderColor=#ff6600 cellSpacing=5 cellPadding=10 width="60%" bgColor=#ffff00 border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表

除了上面的基本表格参数，还有一些常用的参数。

height 定义表格的高度，属性值是数字（像数）

width 定义表格的宽度，属性值是数字（像数）

这两个参数可以确定表格的大小。有时我们做整图背景时，要设定好表格的大小，以便能让背景图全部显示出来。

<TABLE borderColor=#ff6600 height=300 cellSpacing=5 cellPadding=10 width=400 bgColor=#ffff00 border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表

align 定义表格的对齐方式，有三个属性值center（居中），left（左对齐），right（右对齐），下面的代码加上了一个让表格居中的参数：align=center

对齐参数还有另一个，垂直对齐，valign=top（顶部）middle（中部） bottom（底部），一般用在<TD>代码中。

<TABLE borderColor=#ff6600 height=300 cellSpacing=5 cellPadding=10 width=400 align=center bgColor=#ffff00 border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表

background 定义表格的背景图案，属性值为图片的地址

例如：background=http://img./UploadFile/2007-11/200711611495077512.jpg 把这个参数加入到上面的表格代码中

<TABLE borderColor=#ff6600 height=300 cellSpacing=5 cellPadding=10 width=400 align=center bgColor=#ffff00 background=http://img./UploadFile/2007-11/200711611495077512.jpg border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表

 

这个图片是320*400像素大小的，我们也要相应调整表格的大小。

<TABLE borderColor=#ff6600 height=400 cellSpacing=5 cellPadding=10 width=320 align=center bgColor=#ffff00 background=http://img./UploadFile/2007-11/200711611495077512.jpg border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表

 

当然，如果使用了背景图片参数代码，那么背景颜色的代码参数 bgcolor=#ffff00 就可以删掉了

补充说明：

因为这个表格的线宽不是很宽 border=5，所以表格与图片大小设为相同时，对背景图片没有太大影响。但如果表格线宽超过15以上时，背景图片看起来就有被削边的感觉。这时我们就要把表格大小加上两边的边框宽度。

以本图为例，图片是320*400，边线宽 5，那么表格的大小就要设为330*410，最为精确。代码如下：

<TABLE borderColor=#ff6600 height=410 cellSpacing=5 cellPadding=10 width=330 align=center background=http://img./UploadFile/2007-11/200711611495077512.jpg border=5>
<TBODY>
<TR>
<TD>例表</TD></TR></TBODY></TABLE>

例表