欢迎您！启步学代码。
（16）
（原创编辑者:游子。 供初学HTML代码的朋友参考）

如何在三合一图框中贴图


　　三合一花边图框这是一种由三张图片组成的图框。它与套装图框不一样，套装图框是由几张表格图片叠成的， 三合一图框则是由三张图片组成的。看下面这个图框好像是一张完整的图框。





原创编辑者:游子。



其实这是由下面三张图片合成的。


第一张图片：



第一张图片的代码：



<br><br>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01001_9TliiiYtmh6h.jpg>
<TR>
<TD>
</TD></TR></TABLE>
< 　



原创编辑者:游子。

　



原创编辑者:游子。




第二张图片：



第二张图片的代码：




<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01002_LYPmuEraic5B.jpg >
<TR>
<TD>
</TD></TR></TABLE>
　



原创编辑者:游子。

　





原创编辑者:游子。




第三张图片：


第三张图片的代码：


<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01003_2sij2ONPvtrn.jpg>
<TR>
<TD>
</TD></TR></TABLE>
　



原创编辑者:游子。



原创编辑者:游子。



　　把上述三张图片的代码顺序合成一起，就成为一张漂亮的三合一花边图框了。




<br><br>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01001_9TliiiYtmh6h.jpg>
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01002_LYPmuEraic5B.jpg >
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=700 height=160 align=center background=http://bbs.e-yu.cn/attachments/month_0509/01003_2sij2ONPvtrn.jpg>
<TR>
<TD>
</TD></TR></TABLE>
<BR><BR>


　　◇请您把这个代码完整的复制起来，让后粘贴到下面编辑器，再击运行代码就可看效果了。


原创编辑者:游子。



原创编辑者:游子。



　　要在三合一花边框内插入图文等内容是非常方便的，就是先在第二张图框表格的单元格中插入所有内容， 再在最前面插入第一张图框，在最后面插入第三张图框，就面为一个完整的花边图框贴了。使用时注意几个问题：

　　◆花边图片一定要用原来的宽和高的尺寸。如果要调整，必须用图像软件处理。
　　◆三张花边图框的宽度要一致。
　　◆第一、三张图框的高度，一定要用原来的尺寸，第二张图框的高度不限。
　　◆花边图框表格的首尾标签，不能有空格、空行等。否则会产生断层现象。


　　三合一花边图框贴图代码模式：



<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第一张图框的图片地址>
<TR>
<TD>
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第二张图框的图片地址 >
<TR>
<TD>
这里是第二张图框的单元格，可以开始插入内容。
</TD></TR></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=宽度 height=高度 align=center background=第三张图框的图片地址>
<TR>
<TD>
</TD></TR></TABLE> <br>

　【说明】
　◇黄色字体是第一张图框的代码。
　◇白色字体是第二张图框的代码，
　◇绿色字体是第三张图框的代码。


原创编辑者:游子。



原创编辑者:游子。




编辑：游子
（待续）

（为了让更多网友学用html代码贴图制作网页，本贴 欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）








下面提供几个不同花边图框样式及图片地址尺寸给大家欣赏和练习.

1


http://image.10jqka.com.cn/2006/12/1/1164922994_42ce8ee7c3c5e53f50b4491f9c46e297.jpg
784*22
http://image.10jqka.com.cn/2006/12/1/1164923010_5633a82c842f6320acb413e4867751cf.jpg
784*822
http://image.10jqka.com.cn/2006/12/1/1164923027_fa53aa6fbf365bc7d4dfbbde60a0cdfd.jpg
784*22


原创编辑者:游子。



1


http://bbs.nxnews.net/forum/UploadFile/2005-5/20055212019258.jpg
865*173
http://bbs.nxnews.net/forum/UploadFile/2005-5/20055212030771.jpg
865*173
http://bbs.nxnews.net/forum/UploadFile/2005-5/20055212019408.jpg
865*173


原创编辑者:游子。







http://www.xzlife.com/bbs/UploadFile/2006-7/200671116473392928.jpg
700*160
http://www.xzlife.com/bbs/UploadFile/2006-7/200671116473379862.jpg
700*178
http://www.xzlife.com/bbs/UploadFile/2006-7/200671116473360039.gif
700*164


原创编辑者:游子。



　



　
　
.

http://bbs.gw.com.cn/UploadFile/2006-12/200612299561860418.gif
778*21
http://bbs.gw.com.cn/UploadFile/2006-12/200612299572497844.gif
778*400
http://bbs.gw.com.cn/UploadFile/2006-12/200612299573889550.gif
778*24




原创编辑者:游子。