|
欢迎您！启步学代码
（原创制作者:游子。供初学HTML代码的朋友参考）
如何在图框内插入图片或文字。
学习和掌握了HTML代码两大基本功即文字设置和表格设置
之后，就可以制作一些多姿多彩的代码贴了。
我们可以在一张用图片或颜色作背景的表格单元格内
（单层或多层图框内），插入多段文字的和图片．
根据插入的图片宽度和色彩选好图框。有些论坛对代码
贴图的宽度限制在５００之内，所以图框包括边线宽度不能
超过５００，插入的图片宽度在４００以内，否则其超过部
份就无法显示。如果论坛对代码贴宽度不限制,插入的图片就
可宽限些．由于插入的图片加图框的宽很大，所以必须设置
全屏代码，才能完整显示。网络上有很多漂亮的图框（套装）
，可以拿来套用。启步学习时，最好采用较简单的图框。
在一张图框或图片内如何插入文字和图片？
要在表格的单元格<TD>与</TD>中间插入。例如：
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B><p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>
说明：
●width=480＝图框宽度；
●height=350＝图框高度；
●bordercolor=oliv＝边框颜色；
●border=8＝边框线粗度．
●background=背景图片地址．
| |
显示结果：
代码实例：
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TABLE width=480 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B>
<br> <p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_7.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_8.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_9.jpg"width=400 border=1>
</P>
<p align=CENTER>图文：网络／编辑：游子</P>
</B> </FONT>
</TD></TR>;</TABLE></CENTER>
| |
 显示结果：
把上面窄幅代码贴的图框和图片宽度各加大200,代码如下:
<TABLE width=680 height=350 bordercolor=olive background=http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_15.gif border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#0000ff><B>
<br> <p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_7.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_8.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://image49.360doc.com/DownloadImg/2012/02/2215/21722927_9.jpg"width=600 border=1>
</P>
<p align=CENTER>图文：网络／编辑：游子</P>
</B> </FONT>
</TD></TR></TABLE></CENTER>
| |
显示结果：
像这样的宽幅代码贴,就必须加设全屏代码:
在代码的第一行前面加以下代码：
<DIV id=table1 style="LEFT: -220px; WIDTH:
800px;POSITION: relative; TOP: 40px">
在代码最后一行加以下代码：
</DIV><br><br><br><br>
不设置全屏代码时，贴子右边有一部份不能显示。
（待续）
编辑：游子
（为了让更多网友学用html代码贴图制作网页，本贴欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！） | 
