欢迎您!启步学代码。
(14)

(原创制作者:游子。 供初学HTML代码的朋友参考)

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


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


原创制作者:游子。





  在一张图框或图片内如何插入文字和图片?
  要在表格的单元格<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代码贴图制作网页,本贴 欢迎转载,但是,转载时请不要把原创编辑游子的名字改掉。谢谢!)