前三节课我们学习了表格制作和代码的识别,今天我们来学习在表格中如何添加图片代码制作精美的网页(边框)。每个学员必须亲手制作10个不同的边框.

首先我们找来制作边框素材:

3、转换为HTML模式，边框变为代码如下：

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

4、修改边框和背景颜色代码:

http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=169

代码如下:

<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 width="100%" bgColor=#FF82AB border=1>
<TBODY>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

5、添加图片代码background=“图片地址”

代码如下：

<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 width="100%" bgColor=#FF82AB 此处添加 border=1>
<TBODY>
<TR>
<TD>添加内容</TD></TR></TBODY></TABLE>

6、把代码稍微修改一下

换上代码background= 及图片地址，把border=1改为border=0 ，cellSpacing=2 把2修改得大一点，比如20 ，数越大，边框越宽

7、添加图片代码与图片地址

<TABLE borderColor=#EE7600 cellSpacing=2 cellPadding=3 width="100%" bgColor=#FF82AB background=http://bbs.muwen.com/fileuploaddir/4B398177485.jpg border=1>
<TBODY>
<TR>
<TD>添加内容</TD></TR></TBODY></TABLE>

8、这是第一层，转换为DESIGN模式，看一下效果

第一层的全代码：

1。把第一层的上半部分复制，

<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.sucaiw.com/UploadFile/2004159451140157.jpg border=0>
<TBODY>
<TR>
<TD>

我们将图片地址修改一下  

2、然后稍作修改就可以了 。
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" background=http://tietu.znrsw.com/UploadFile/2005-8/20058823572712184.jpg border=0>
<TBODY>
<TR>
<TD>

cellSpacing=1 把原来的20改为了1。

这是第二层 。看效果了：（要记得转换一下模式）

前两层的全代码：

<TABLE borderColor=#EE7600   cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398177485.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#EE7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=0>
<TBODY>
<TR>
<TD>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

同样的方法做第三层

第三层的代码是

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398168300.jpg border=0>
<TBODY>
<TR>
<TD>  

不用发出，你转换一下模式就可以看出效果了

前三层全代码如下：

<TABLE borderColor=##EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398177485.jpg   border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#EE7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398168300.jpg border=0>
<TBODY>
<TR>
<TD>  

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

七层边框：

第四层跟第二层一样 ，第五层跟第一层一样 ，第六层跟第二层还一样 ，把原来的代码依次复制过来就可以了。（还可以自由组合）

都复制过来看看效果：

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE>

我们做八层边框，再复制一层代码过来，然后换上背景地址就OK了。

最后一层代码如下：

<TABLE borderColor=##EE7600 cellSpacing=1 cellPadding=0 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398168300.jpg border=0>
<TBODY>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

让我们一起看看八层边框组成的效果吧：

<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398177485.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398168300.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398383131.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398177485.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#0e7600 cellSpacing=1 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B314681902.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ee7600 cellSpacing=10 cellPadding=0 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398174931.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#dd226d size=6><STRONG>
<TABLE borderColor=#ee7600 cellSpacing=20 cellPadding=3 width="100%" background=http://bbs.muwen.com/fileuploaddir/4B398168300.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

你看下面边框是不是跟上面的不一样,你发现了吗?想知道语音室告诉你.

找边框素材

代码

<TABLE cellPadding=39 width="100%" background=http://tietu.znrsw.com/UploadFile/2005-8/20058823555682535.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">

代码

<TABLE cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2005-8/20058823572712184.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">

代码*

<TABLE cellSpacing=15 cellPadding=6 width="100%" background=http://tietu.znrsw.com/UploadFile/2005-8/20058823573650796.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">

透明边框

代码:

<TABLE cellSpacing=15 borderColorDark=#721e38 cellPadding=0 width="50%" borderColorLight=#c46683 border=1>
<TBODY>
<TR>
<TD align=middle width="100%"></FONT></TD></TR></TBODY></TABLE>

现在我们来自由组合

透明边框的效果

１层

代码：

<TABLE borderColor=#fa886b cellSpacing=0 cellPadding=30 width="100%" bgColor=#ffffff background=http://tietu.znrsw.com/UploadFile/2005-6/200561213553261951.jpg border=0>
<TBODY>
<TR>
<TD></TR></TBODY></TABLE>

第２层

代码：

<TABLE borderColor=#5f1807 cellSpacing=5 cellPadding=0 width="100%" bgColor=#ffffff background=http://bbs.xxjy.net/UploadFile/2004-8/2004832055338.jpg border=1>
<TBODY>
<TR>
<TD></TR></TBODY></TABLE>

代码

<TABLE borderColor=#5f1807 cellSpacing=5 cellPadding=0 width="100%" bgColor=#ffffff background=http://www.znrsw.com/bbs/UploadFile/2004-8/20048161220783.gif border=1>
<TBODY>
<TR>
<TD></TR></TBODY></TABLE>

代码

<TABLE borderColor=#121276 cellSpacing=0 cellPadding=0 width="100%" bgColor=#ffffff background=http://bbs.muwen.com/fileuploaddir/4B277673005.gif border=1>
<TBODY>
<TR>
<TD></TR></TBODY></TABLE>

２层组合效果

三层组合效果

４层效果

５层效果

修改后的边框

代码

<TABLE borderColor=#fa886b cellSpacing=20 cellPadding=0 width="60%" bgColor=#ffffff background=http://tietu.znrsw.com/UploadFile/2005-6/200561213553261951.jpg border=1>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

代码

<TABLE height=480 cellSpacing=15 cellPadding=0 width=380 background=http://www.dxs.cn/bbs/uploadfile02/20047139182411346.jpg border=1>
<TBODY>
<TR>
<TD width=380 height=300>
<P align=center></P></TD></TR></TBODY></TABLE>

狂笑风云 网络情缘欢迎您光临指导 谢谢欣赏!

<TABLE cellSpacing=5 borderColorDark=#12150a cellPadding=20 width="98%" borderColorLight=#628a64 background=http://www.vigevano.net/pianzoline/fotoset04/014/leafgreenstrip.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#12150a cellPadding=0 width="95%" borderColorLight=#628a64 background=http://www.vigevano.net/pianzoline/fotoset04/014/leafgreenstrip.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://www.vigevano.net/pianzoline/fotoset04/014/leaftile.jpg border=0>
<TBODY>
<TR>
<TD width="100%"><FONT color=#22dd22 size=7>
<P align=center>
<TABLE cellSpacing=5 borderColorDark=#12150a cellPadding=0 width="65%" borderColorLight=#628a64 background=http://www.vigevano.net/pianzoline/fotoset04/014/leafgreenstrip.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center><IMG src="http://www.hsq.gov.cn/uploadfile/200571015125828.jpg" border=0> </DIV></TD></TR></TBODY></TABLE></P>
<P align=center>
<TABLE cellSpacing=5 borderColorDark=#12150a cellPadding=0 width="65%" borderColorLight=#628a64 background=http://www.vigevano.net/pianzoline/fotoset04/014/leafgreenstrip.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center><IMG src="http://www.hsq.gov.cn/uploadfile/200571015125828.jpg" border=0> </DIV></TD></TR></TBODY></TABLE></P></FONT></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

空心边框的制作

Shadow阴影strength:15浓度direction:145方向color:888888颜色image 图象transform 转换,

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:888888,direction:145,strength:15)" cellSpacing=2 cellPadding=18 border=2>
<TBODY>
<TR>
<TD>
<P align=center>