17.txt
在多层图框（套装）内贴图的方法


<TABLE style="BORDER-LEFT-COLOR: #fbd44c; BORDER-BOTTOM-COLOR: #fbd44c; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #fbd44c; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #fbd44c; BORDER-BOTTOM-STYLE: ridge" height=“100%” cellSpacing=1 cellPadding=0 width=770 border=14>
<TBODY>
<TR>
<TD bgColor=#000000>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD align=left width="20%"><IMG src="http://img.gw.com.cn/UploadFile/2005/7/21/916191.gif"></TD>
<TD align=middle width="60%"><INPUT type=image width=400 src="http://bener.51.net/img/bar.gif"><BR></TD>
<TD align=right width="20%"><IMG src="http://img.gw.com.cn/UploadFile/2005/7/21/3461867.gif"></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=20 width="100%" border=0>
<TR>
<TD>
<CENTER><FONT style="FONT-SIZE: 25pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>欢迎您！启步学代码。<BR>（16）</FONT><BR><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=#fff000>（游子编辑 供初学HTML代码的朋友参考） <BR><BR>
<BR><BR>
<h2>在图框内贴图或文字的位置设置方法。</h2>
<br><P align=LEFT>
　　根据插入的图片宽度和色彩选好图框。目前多数论坛对代码贴图的宽度限制在５００之内，所以图框包括边线宽度不能超过５００，插入的图片宽度
在４００以内，否则其超过部份就无法显示。如果图片很大，就要选宽度大于７００的图框，同时要设置全屏代码，才能完整显示。网络上有
很多漂亮的图框（套装），可以拿来套用。启步学习时，最好采用较简单的图框。<br>
<br>
<P align=center><img src="http://www.vicn.net/UploadFile/2004-5/2004539035959.gif"></P>
<br><P align=LEFT>
　　在一张图框或图片内如何插入文字和图片？<br>
　　要在表格的单元格&lt;TD>与&lt;/TD>中间插入。 例如：<br>
<br><h4>
<br><P align=LEFT>
&lt;TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg 
	border=18&gt;<br>
	&lt;TBODY&gt;<br>
	&lt;TR&gt;<br>
	&lt;TD &gt;<br>
	&lt;FONT style=&quot;FONT-SIZE: 25pt&quot; face=华文行楷 color=#fff000&gt;&lt;B&gt;<br>
	&lt;p align=CENTER&gt;插入文字或图片&lt;/P&gt;<br>
	&lt;p align=CENTER&gt;插入文字或图片&lt;/P&gt;<br>
	&lt;p align=CENTER&gt;插入文字或图片&lt;/P&gt;<br>
	&lt;/B&gt; &lt;/FONT&gt;<br>
	&lt;/TD&gt;&lt;/TR&gt;&lt;/TOBDY&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/CENTER&gt;</h4></P><br>
<br>
代码实例：
<br><h4>
<P align=LEFT>
&lt;TABLE width=500 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg 
	border=18&gt;<br>
	&lt;TBODY&gt;<br>
	&lt;TR&gt;<br>
	&lt;TD &gt;<br>
	&lt;FONT style=&quot;FONT-SIZE: 25pt&quot; face=华文行楷 color=#fff000&gt;&lt;B&gt;<br>
	&lt;br&gt;	
	&lt;p align=CENTER&gt;万紫千红总是春&lt;/P&gt;<br>
	&lt;p align=CENTER&gt;&lt;img src="http://www.coolhot.cn/680/duocai/11.gif"width=400 height=352 border=1&gt; <br>
&lt;/P&gt;<br>
	&lt;p align=CENTER&gt;图文：网络／编辑：网名&lt;/P&gt;<br>
	&lt;/B&gt; &lt;/FONT&gt;<br>
	&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/CENTER&gt;</h4><br>
<br>
显示结果：
<br>
<CENTER>
<TABLE width=500 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=8>
<TBODY>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<br>
<p align=CENTER>万紫千红总是春</P>
<p align=CENTER><img src="http://www.coolhot.cn/680/duocai/11.gif"width=400 height=382 border=1> 
</P>
<p align=CENTER>图文：网络／编辑：网名</P>
</B> </FONT>
</TD></TR></TBODY></TABLE></CENTER></CENTER>
<br>
<P align=center><img src="http://www.vicn.net/UploadFile/2004-5/2004539035959.gif"></P>
<br>
　　<h2>定位设置一些语句。</h2>
align（水平方向）<br>
水平方向有左中右：<br>
left（左对齐）<br>
center（居中）<br>
RIGHT（右对齐）<br>
<br>
水平方向位置设置代码：<br>
<br>
&lt;P align=LEFT>内容左对齐&lt;/P><br>
&lt;P align=center>内容居中&lt;/P><br>
&lt;P align=RIGHT>内容右对齐&lt;/P><br>
显示结果：<br>
<br>
<P align=LEFT>内容左对齐</P>
<P align=center>内容居中</P>
<P align=RIGHT>内容右对齐</P>
<P align=center><img src="http://www.vicn.net/UploadFile/2004-5/2004539035959.gif"></P>
<BR>
<h2>valign（垂直方向）</h2>
垂直方向有靠顶和靠底.<br>
top（靠顶）,bottom（靠底）<br>
垂直方向与水平方向相结合可以设置6个不同位置的指令如下：<br>
<br><P ali gn=LEFT>
&lt;P align=LEFT valign=top>居左靠顶&lt;/P><br>
&lt;P align=center valign=top>居中靠顶&lt;/P><br>
&lt;P align=RIGHT valign=top>居右靠顶&lt;/P><br>
<br>
&lt;P align=LEFT valign=bottom>居左靠底&lt;/P><br>
&lt;P align=center valign=bottom>居右靠底&lt;/P><br>
&lt;P align=RIGHT valign=bottom>居右靠底&lt;/P><br>
<br><br>
在图框内插入图片和文字位置的代码：<br>
<br><h4>
<p gn="LEFT">&lt;CENTER&gt;<br>
	&lt;TABLE width=480 height=380 bordercolor=olive 
	background=http://www1.yunbbs.com/yaoyao/7/000.01.jpg border=10&gt;<br>
	&lt;TBODY&gt;<br>
	&lt;TR&gt;<br>
	&lt;td&gt;<br>
	&lt;FONT style=&quot;FONT-SIZE: 18pt&quot; face=华文行楷 color=#fff000&gt;&lt;B&gt;<br>
	&lt;p align=left&gt;居左靠顶&lt;br&gt;<br>
	&lt;INPUT src=&quot;http://lolipop.jp/common/img/obj_ojisan_01.gif&quot; type=image 
	width=100&gt;<br>
	&lt;/P&gt;<br>
	&lt;p align=CENTER&gt;图片文字插入位置示例&lt;br&gt;居中&lt;/P&gt;<br>
	&lt;p align=RIGHT&gt;<br>
	&lt;INPUT src=&quot;http://wangjiang.home4u.china.com/mls.gif&quot; type=image width=100&gt;<br>
	&lt;br&gt;<br>
	居右靠底&lt;/P&gt;<br>
	&lt;/B&gt; &lt;/FONT&gt;<br>
	&lt;/TD&gt;&lt;/TR&gt;&lt;/TOBDY&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/CENTER&gt;</h4><br>
</p></form>
<CENTER>
显示结果：
<br><br>
<CENTER>
<TABLE width=480 height=380 bordercolor=olive background=http://www1.yunbbs.com/yaoyao/7/000.01.jpg border=10>
<TBODY>
<TR>
<td>
<FONT style="FONT-SIZE: 18pt" face=华文行楷 color=#fff000><B>
<p align=left>居左靠顶<br>
<INPUT src="http://lolipop.jp/common/img/obj_ojisan_01.gif" type=image width=100>
</P>
<p align=CENTER>图片文字插入位置示例<br>居中</P>
<p align=RIGHT>
<INPUT src="http://wangjiang.home4u.china.com/mls.gif" type=image width=100>
<br>
居右靠底</P>
</B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER></P></P>
<br><P ali gn=LEFT>
　　图片文字插入位置控制还有其他方法，比如利用表格的行（&lt;TR&gt;）和列（&lt;TD &gt;）设置多行多列等，以及坐标绝对定位等等。
<br> 
<br><br>
<CENTER><img src="http://www.vicn.net/UploadFile/2004-5/2004539035959.gif"></CENTER>
（待续）
<P align=center><IMG src="http://bbs.xxjy.net/UploadFile/2004-11/2004113183920955.gif"></P><BR><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=隶书 color=#00ff00>编辑：游子
<h3>
（为了传播 HTML 代码知识，让更多网友学用代码贴图制作网页，本贴欢迎转载，
但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）</h3></FONT></CENTER></FONT>
</FONT></TD></TR></TABLE></TD></TR></TABLE><BR>
<P></P>