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

如何在图框内插入图片或文字。


　　学习和掌握了HTML代码两大基本功即文字设置和表格设置之后，就可以制作一些多姿多彩的代码贴了。
　　我们可以在一张用图片或颜色作背景的表格单元格内（单层或多层图框内），插入多段文字的和图片．
　　根据插入的图片宽度和色彩选好图框。有些论坛对代码贴图的宽度限制在５００之内，所以图框包括边线宽度不能超过５００，插入的图片宽度 在４００以内，否则其超过部份就无法显示。如果论坛对代码贴宽度不限制,插入的图片就可宽限些．由于插入的图片加图框的宽很大，所以必须设置全屏代码，才能完整显示。网络上有 很多漂亮的图框（套装），可以拿来套用。启步学习时，最好采用较简单的图框。


原创制作者:游子。




　　在一张图框或图片内如何插入文字和图片？
　　要在表格的单元格<TD>与</TD>中间插入。 例如：


<TABLE width=480 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.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://sucai.heima.com/sucai/news/bg/23.gif border=18>
<TABLE width=480 height=350 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/23.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://sucai.heima.com/sucai/news/xhtp/03.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/08.jpg"width=400 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/19.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://sucai.heima.com/sucai/news/bg/23.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://sucai.heima.com/sucai/news/xhtp/03.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/08.jpg"width=600 border=1>
</P>
<p align=CENTER><img src="http://sucai.heima.com/sucai/news/xhtp/19.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代码贴图制作网页，本贴 欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）