打印

[转帖] 启步学代码(11~18)

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

主题大中小发表于 2007-10-8 01:36 AM 只看该作者

启步学代码(11~18)

欢迎您！启步学代码。
（11）

（原创编辑者:游子。供初学HTML代码的朋友参考）

用各种图片素材做边框套装

用金黄色图片作边框的代码：

用金黄色图片作边框的代码：

<CENTER>
<TABLE borderColor=660000 cellSpacing=10 cellpadding=20 background=http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg width=400 height=300 border=10>
<TBODY>
<TR>
<TD bgcolor=#AAAAFF>
<br>
<br>
</CENTER></TD></TR></TBODY></TABLE>

说明：

<TABLE borderColor=660000<br...>--边框颜色

<TD bgcolor=#AAAAFF>--图框内单元格背景颜色。

原创编者:游子。
　

显示结果：

原创编辑者:游子。

用图片作边框的六层图框套装代码；

<TABLE cellSpacing=10 align=center bgColor=green WIDTH: 800px; border=0>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=3 width="95%" background="http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=8 width="100%" background="http://bbs.xxjy.net/UploadFile/2004-10/20041028356173.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=3 width="100%" background="http://www.dabaoku.com/sucai/shejilei/bj/pic/0410.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=15 width="100%" background="http://img.gw.com.cn/UploadFile/2004/9/3/3436397.jpg" border=5>
<TBODY><TR><TD>
<TABLE borderColor=#111111 cellSpacing=0 width="100%" bgColor=green border=1>
<TBODY>
<TR>
<TD>
< src="./images/smilies/default/titter.gif" border=0 smilieid="9"> align=center><TABLE border=0><TBODY><TR>
<TD style="FILTER:Alpha(opacity=100,style=2)"width=350 height=202 background="http://sucai.heima.com/sucai/news/xhtp/08.jpg">
</TD></TR></TBODY></TABLE></P>
<CENTER>
<DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 500px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 35pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=003300>
插入标题文字
<br><br>
<h2>图文：网络<br>编辑：游子</h2></FONT></DIV>
< src="./images/smilies/default/titter.gif" border=0 smilieid="9"> align=center>　</P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</CENTER>

　　【说明】
　　引用这个套装代码时，必须在代码的第一行前面加设全屏代码，才能完整显示。
　　全屏代码：
<DIV id=table1 style="LEFT: -210px; WIDTH: 800px; POSITION: relative; TOP: 40px">

原创编辑者:游子。

显示结果：

插入标题文字

图文：网络
编辑：游子

原创编辑者:游子。

用图片作边框的10层图框套装代码；

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=680 borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313595718.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131404918.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=11 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813141196.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135611790.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<IMG alt="" src="http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313555870.jpg">
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; HEIGHT: 45px">
漂亮的多层套装</FONT><BR>
<font style=font:20pt face=隶书 color=fff000>
插入内容<BR>
。。。。。。<BR>
。。。。。。<BR>
<BR><BR>
图片:网络/编辑:游子<BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<BR><BR><BR></DIV>

　　【说明】
　　引用这个套装代码时，必须在代码的第一行前面加设全屏代码，才能完整显示。
　　全屏代码：
<DIV id=table1 style="LEFT: -210px; WIDTH: 800px; POSITION: relative; TOP: 40px">

原创编辑者:游子。

用图片作边框的10层图框套装显示结果：

漂亮的多层套装
插入内容
。。。。。。
。。。。。。

图片:网络/编辑:游子

[ 本帖最后由 kaixin 于 2007-10-8 02:10 AM 编辑 ]

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

回复1 大中小发表于 2007-10-8 01:42 AM 只看该作者

欢迎您！启步学代码。
（12）

原创编辑者:游子。供初学HTML代码的朋友参考）

如何用HTML代码贴图。

用HTML代码贴图，图片必须是网络上的图片绝对地址（URL）。如果是本机硬盘的图片，应先上传到较隐定的空间（免费相册或可上传图片的论坛），取得图片的地址和图片的尺寸大小。新学习者最好选择一些较简单的图框来贴图。由于各论坛系统对贴子宽度有不同的限制，因此图框的宽最好不要超过500，图片宽度则在400左右。

原创编辑者:游子。

几种常用贴图代码。

第一种：
<img src="图片地址">
第二种：
<img src=“图片地址” width='80'height='280' border='10'>
第三种：)(图片可调大小)
<INPUT src="图片地址" type=image width=500>

第四种：(用图片作表格背景的贴图方法)

原创编辑者:游子。

第一种最简易使用的贴图代码。

　　　　　　　<img src="图片地址">
用网络上的图片绝对地址（URL）粘贴上去就可以了。但这种方法贴的图片，各论坛对图片宽度显示有不同的限制，有时不是原图片的尺寸，更不是你想要多大就多大。
这里有一张图片地址：http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg
把它粘贴在上面代码中的“图片地址”如下：

显示结果：

原创编辑者:游子。

第二种简易使用的图片可定大小有黑色边框的贴图代码:

显示结果：

原创编辑者:游子。

第三种：图片可调大小的代码:

有一张图片原尺寸宽1024,高768.图片地址:
http://www.5pk.cn/infoPic/pic85/pic85961c1.jpg

把图片地址套入下面代码,同时设置不同宽度,图片就可变大或峦小。
<INPUT src="图片地址" type=image width=500>

◆代码1:

<INPUT src="http://www.5pk.cn/infoPic/pic85/pic85961c1.jpg" type=image width=300>

◆代码2:

<INPUT src="http://www.5pk.cn/infoPic/pic85/pic85961c1.jpg" type=image width=500>

显示结果：

◆代码3:

<INPUT src="http://www.5pk.cn/infoPic/pic85/pic85961c1.jpg" type=image width=650>

显示结果：

原创制作者:游子。
　

第四种;用表格的贴图代码。

●说明：用图片作表格背景必须注意图片素材原尺寸和图框宽度设置要一致。如果图片小而图框大，会显示部份重影，多出一部份图像。相反如果图片大而图框小则只显示图像的一部份。

原创编辑者:游子。

第四种;用表格贴图代码实例

<CENTER>
<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=660 height=380 border=15>
<TBODY>
<TR>
<TD><br>
</TD></TR></TBODY></TABLE></CENTER>

原创编辑者:游子。
　

显示结果：

（待续）
编辑：游子

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

回复2 大中小发表于 2007-10-8 01:44 AM 只看该作者

欢迎您！启步学代码。
（13）

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

图片雾化的贴图方法。

图片雾化或叫羽化效果，就是一张图片只突出显示中心的主要图像，周边朦胧淡化。方法有通常使用的代码和简化的代码．

二种雾化代码模式:

　　　图片雾化通常使用的代码和简化的代码:

通常使用的代码：

<TABLE border=0>
<TR>
<TD style="FILTER:Alpha(opacity=100,style=2)" width=450 height=600 background=图片地址 >
</TD></TR></TABLE>
<br><br>

简化的代码：

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width=450 src="图片地址"INPUT>

原创制作者:游子。

下面是一张美女图片和图片地址：

http://pic.yesky.com/picupload1/20050725/162238/4019006.jpg

原创制作者:游子。

图片雾化通常使用的代码:

　　　图片雾化通常使用的代码:

原创制作者:游子。

通常使用的代码显示结果：

原创制作者:游子。

简化的图片雾化代码:

简化的图片雾化代码:

<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width=450 src="http://pic.yesky.com/picupload1/20050725/162238/4019006.jpg"INPUT>

【说明】
　　　这种代码可非常方便的调整图片的大小，即把代码宽度参数（width=450）改变了就行。

原创制作者:游子。

简化的代码显示结果：

原创制作者:游子。

圆形雾化效果和矩形雾化效果代码是一样的，不同之处是：
把圆形雾化效果　style=2 改为:
矩形雾化效果　style=3
通常使用的是圆形雾化效果　style=2 .

（待续）
编辑：游子

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

回复3 大中小发表于 2007-10-8 01:47 AM 只看该作者

欢迎您！启步学代码。
（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>

不设置全屏代码时，贴子右边有一部份不能显示。

（待续）
编辑：游子

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

回复4 大中小发表于 2007-10-8 01:48 AM 只看该作者

欢迎您！启步学代码。
（15）

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

学习图框内多位置插入图文。

（一）运用表格设置多位置插入内容。

　　要在一张图片或网页的多个位置上插入图文,可以用表格定位插入的方法。先设置一张空表格，再根据须要编辑一些大小不同的单元格，用来插入内容。为了正确使用表格设置，重温学习一下表格标签代码有关语句；

　　　一张用淡黄色作表格背景图案的图框代码：

<TABLE cellspcing=0 cellpadding=12 width=500 height=350 bordercolor=olive bgColor=#FFFFf3 border=8>
<TR>
<TD >
一张用淡黄色作表格背景图案的图框
</TD></TR></TABLE></CENTER>

　　【说明】

　　●第一段； <TABLE　－－标签名你：表格），标签属性内容：
cellspcing=0 单元格间距。
cellpadding=12 单元格衬距。插入的图片或文字与边线的距离。
width=500－－表格宽度．
height=300 －－表格高度．
bordercolor=olive －－表格边框的颜色．
bgColor=#000000 －－表格背景颜色．
border=8－－表格边框宽度。

　　●第二段；<TR>－－表格的第一行。
　　●第三段；<TD>－－表格的第一列。
　　●第四段；</TD></TR></TABLE>--这一组表格的尾标签.
　　●注意学习代码中行和列的语句。即：
　　　行：<TR>－－</TR>
　　　列：<TD>－－</TD>
　　●插入图片或文字,如果没有设置定位指令时,会自动在中部居左显示。要在别的位置显示，必须用一些位置设置代码。

原创制作者:游子。
　

显示结果：

一张用淡黄色作表格背景图案的图框

原创制作者:游子。

一张多行表格的代码：

<table border="1" width="500" cellspacing="1" bgcolor="#FFFFF3" height="350" id="table2">
<tr>
<td height="20">第1行　
</td></tr>
<tr>
<td height="40">第2行　
</td></tr>
<tr>
<td height="240"第3行　
</td></tr>
<tr>
<td height="50">第4行　
</TD></TR></TABLE>
　

【说明】

●第2至第4段构成一个单元格，设高度为２０．

<tr>
<td height="20">第1行
</td></tr>

●第4至第7段构成第二个单元格，设高度为40．

<tr>
<td height="40">第2行　
</td></tr>

●第8至第10段构成第三个单元格，设高度为240．

<tr>
<td height="240">第3行　
</td></tr>
<tr>
●第12至第13段构成第4个单元格，设高度为50．

<tr>
<td height="50">第4行　

●每一个单元格都必须有一对始标签和尾标签，不可多也不可少．
●每一行的高度可以设定，但插入内容的高度，只能小于设定，
　如果大于设定，高度会顺延变大。
　设定行的高度的代码：<td height="240"
●如果行与行之间不要有隔线。可以把表格边框宽度设置为零。如：
　border=8　改为：border=0

原创制作者:游子。
　

显示结果：

第1行　

第2行　

第3行　

第4行　

原创制作者:游子。

一张多列表格的代码：

<table border="1" width="500" cellspacing="0" bgcolor="#FFFFF3" height="350" id="table2">
<tr>
<td width="50">1
</td>
<td width="50">2
</td>
<td width="300">3
</td>
<td width="100">4
</td></tr></table>

原创制作者:游子。
　

显示结果：

1

2

3

4

原创制作者:游子。

一张多行多列表格代码：

<p align="center">
<table border="1" width="500" cellspacing="1" bgcolor="#00FF00" height="360" id="table3">
<tr>
<td height="80" colspan="3">　</td>
</tr>
<tr>
<td height="20" colspan="3">　</td>
</tr>
<tr>
<td height="240" width="120">　</td>
<td height="240" width="350">　</td>
<td height="240" width="30">　</td>
</tr>
<tr>
<td height="20" colspan="3">　</td>
</tr>
</table>
</p><BR>

原创制作者:游子。
　

显示结果：

原创制作者:游子。

　　要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．代码如下：

<INPUT src="http://sucai.heima.com/sucai/news/zrfg/images/2_2.jpg" type=image width=480 height=80>
</CENTER>
</td></tr>
<tr>
<td height="20" colspan="3">
<marquee>　
<FONT face=仿宋_GB2312 color=0000ff size=4><B>
要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．
</B></form></marquee>

</td></tr>
<tr>
<td height="240" width="100">
<CENTER>
<INPUT src="http://img.gw.com.cn/uploadFace/20052225222271591.gif" type=image width=100 height=80>
<INPUT src="http://homediy.myrice.com/gif/cat/cat004.gif"type=image width=100 height=120>
</CENTER>
</td>
<td width="320">　
<CENTER>
<INPUT src="http://bbs.chinazhuyi.com/UploadFile/2004-10/200410621959118.jpg" type=image width=320 height=240>
</CENTER>
<BR>
</td>
<td width="60">
　<CENTER>
<font style=font:20pt face=隶书 color=ff0000>
不<BR>同<BR>位<BR>置<BR>插<BR>入<BR>内<BR>容
</font></CENTER>
</CENTER>
</td></tr>
<tr>
<td height="20" colspan="3">　
<CENTER>
<embed src="http://www.oldkids.com.cn/main/media/music/sqyy/xyh.mp3" type="audio/x-pn-realaudio-plugin" controls="controlpanel,statusbar" height=50 width=480 autostart="true" loop="true">
</CENTER>
</td></tr></table>

欢迎您！启步学代码。
原创编辑：游子
　

显示结果:


要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．
		不同位置插入内容

（待续）
编辑：游子

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

6^# 大中小发表于 2007-10-8 01:51 AM 只看该作者

欢迎您！启步学代码。
（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>

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

原创编辑者:游子。

原创编辑者:游子。

编辑：游子
（待续）

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

7^# 大中小发表于 2007-10-8 01:59 AM 只看该作者

欢迎您！启步学代码。
（17）

（原创编辑:游子。供初学HTML代码的朋友参考）

图片加叠像框的方法

　　一张普通的jpg图片(风景、人物、鲜花等相片)，再加叠上漂亮的相框就更美丽了。相片加叠像框有各种方法：有用软件处理的方法，也有用CSS语言层的方法，还有套用相框素材代码贴图的方法。三种方法各有优缺点，本来用CSS语言层的方法最好，可是有些论坛不能运行。用hyml代码编辑相片加叠相框有很多模式,效果都不是十分理想。
　　通常用代码编辑相片加叠相框，须要用２－３层表格，而且要按相框原有的尺寸，大小不能调整。操作比较困难。为了寻找一种相片加相框好办法，我试设置二种加叠法模式，提供大家参考。
　　具体的操作方法：
　　相框有两种类形，一种是相框内径空洞的，没有颜色背景，另一种是内径非空洞有颜色作底的，所以必须根据相框的类形，使用不同的加叠方法：
　　１，相框内径有颜色作底的，要先贴相框，后贴图片，相片才不会被相框复盖掉。
　　２，相框内径是圆形或花边图案的,空洞的，一定要先贴图片后加叠相框。

　　第一种模式是“相框背景加叠法”。

　　◆设置一张表格，用相框作表格的背景图片。
　　◆在这张表格的单元格内用“图片大小可调的代码”插入相片。
　　◆表格的宽和高的尺寸，要按相框原有的尺寸。
　　◆相片的宽和高大小可适当调整。
　　◆这个模式适合：相框内径方形或长方形的相框；相框内径有背底的。

　　第二种模式是“绝对定位加叠法”。

　　◆先编辑一张有控制定位的空白表格，确保相片和相框在页面的指定位置上显示。
　　◆再编辑一张有控制定位的空白表格，用于插入相片加叠相框。
　　◆插入相片加叠相框也都要有绝对定位的指令。
　　◆插入相片和相框都是用“图片大小可调整的贴图代码。
　　◆先贴相片后贴相框，适合相框内径是圆形或有花边图案的。
　　◆选择相片和相框时，两者的宽高大小基本要接近。

原创编辑者:游子。

　　“相框背景加叠法”的代码模式。

原创编辑:游子。
　

原创编辑者:游子。

“相框背景加叠法”参考实例-1。

一张相框图片及其宽高大小尺寸：

http://files2.61.fm/image/3/biankuang206.JPG
530*360

一张风景图片及其地址尺寸:

http://bbs.scuec.edu.cn/attachment/Mon_0512/19_37931.jpg
388*270

“相框背景加叠法”参考实例-1的代码:

原创编辑:游子。
　

“相框背景加叠法”参考实例-1的效果：

原创编辑者:游子。

“相框背景加叠法”参考实例-2。

一张相框图片及其宽高大小尺寸：

http://bbs.gw.com.cn/UploadFile/2007-4/20074412244498083.gif
600*500

一张风景图片及其地址尺寸:

http://gb.cri.cn/mmsource/images/2007/03/22/nc070322007.jpg
390*455

“相框背景加叠法”参考实例-2的代码:

原创编辑:游子。
　

“相框背景加叠法”参考实例-2的效果：

原创编辑者:游子。

绝对定位加叠法的代码模式：

<TABLE id=table style=" ridge; LEFT: 0px; WIDTH: 550px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 670px" border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<CENTER>
<INPUT src="图片地址" type=image width=480></DIV>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<INPUT src="图片地" type=image width=550>
</DIV>
</TD></TR></TABLE>
</TD></TR></TABLE>

　　【说明】

　◆这个模式有二张表格，二个贴图代码，四个都有位置控制代码。
　◆第一张表格是控制加叠图片在页面的位置．LEFT: -0px或LEFT: -220px。
　◆第二张表格是控制二张插入图片的位置，根据图片大小而定。
　◆插入图片都是用＂图片大小可调整＂的代码。
　◆要使相片和相框完美吻合，还可用空格、空行进行调整。
　◆位置控制句：
　　LEFT: 0px; WIDTH 300px 前面的参数是调整水平（左右）的位置，数值小偏左，数值大偏右。后面的参数是位置的宽度。
　　TOP: 0px; HEIGHT 400px 前面的参数是调整垂直（上下）的位置，数值小偏顶，数值大偏底，后面的参数是位置的高度。

原创编辑:游子。
　

绝对定位加叠法参考实例-1。

一张相片及其宽高大小尺寸：

http://img.gw.com.cn/UploadFile/2005/12/28/5339486.gif
310*420

一张相框图片及其宽高大小尺寸：

http://img.gw.com.cn/UploadFile/2005/6/21/2856837.gif
4500*550

相片加叠相框的代码：

原创编辑:游子。
　

参考实例-1相片加叠相框后的效果：

原创编辑者:游子。

绝对定位加叠法参考实例-2

一张印度美女相片及其宽度尺寸：

http://img.gw.com.cn/UploadFile/2004/12/18/2648325.jpg
400

一张相框内径圆形的图片及其宽高大小尺寸：

http://img011.photo.wangyou.com/2004/10/25/25981/200511176998990.gif
500*500

参考实例-2 相片加叠相框的代码：

原创编辑:游子。
　

参考实例-2 相片加叠相框的效果：

绝对定位加叠法参考实例-3。

一张儿童相片及其宽度尺寸：

http://img.gw.com.cn/UploadFile/2004/12/18/2648325.jpg
330*480

一张相框内径圆形的图片及其宽高大小尺寸：

http://img011.photo.wangyou.com/2004/10/25/25981/200511176998990.gif
400*520

参考实例-3 相片加叠相框的代码：

原创编辑:游子。
　

参考实例-3 相片加叠相框的效果：

绝对定位加叠法参考实例-4

一张风景图片及其地址尺寸:

http://gb.cri.cn/mmsource/images/2007/03/22/nc070322018.jpg
500*460

一张相框图片及其宽高大小尺寸：

http://bbs.gw.com.cn/UploadFile/2007-4/20074412251450216.gif
500

参考实例-3 相片加叠相框的代码：

原创编辑:游子。
　

参考实例-3 相片加叠相框的效果：

编辑：游子
（待续）

TOP

kaixin

超级版主

Rank: 8 Rank: 8

Medal No.8

8^# 大中小发表于 2007-10-8 02:02 AM 只看该作者

欢迎您！启步学代码。
（18）

（原创编辑者:游子。供初学HTML代码的朋友参考）
　　

坐标控制绝对定位贴图的方法。

　　在学用代码贴图中，有几个间题较难处理：（１）绝对定位外部挂贴，要插入的内容往往不是在自已的贴子里。（２）在背景图片加叠Flash后，要再加文字或图片很困难。（３）在背景图同一区域中的多个位置上，要插入图文，虽然有靠左居顶等指令，但仍不是很好的办法。近曰在整理学习笔记时，觉得有一种代码指令可以解决这些问题，提供大家参考探讨。

原创编辑者:游子。

　　设置一个规定范围的表格，代码如下：

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>
<TR>
<TD>

</TD></TR></TABLE>
</TD></TR></TABLE>

原创编辑者:游子。
　

显示结果:

原创编辑者:游子。

在这个图框中加叠一组动画图片．代码如下：

<CENTER>
<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
</TD></TR></TABLE>
</TD></TR></TABLE></CENTER>

　　【说明】
　　◇这里插入５个后辍为 .swf的Flash图片。
　　◇插入Flash的代码如下：
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

　
原创编辑者:游子。
　

显示结果:

原创编辑者:游子。

我们还可再加叠图片和文字，代码如下：

<CENTER>
<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=3>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=480 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://imgfree.21cn.com/free/flash//17.swf width=450 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=350 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<EMBED align=right src=http://my.e-yu.cn/cxq/sc/005shuizhu_1.swf width=500 height=330 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">
<TR>
<TD>
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://www.tyfo.com/10399/tyfo/ent/27_images/entwl060808t2.jpg">
</TD></TR></TABLE>
<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">
<TR><TD>
<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
金<br>鲤<br>鱼
</FONT>
</TD></TR></TABLE>
<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">
<TR><TD>
<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>
坐标控制绝对定位贴图</FONT>
</TD></TR></TABLE>
</TD></TR></TABLE></TD></TR></TABLE>

　　【说明】

　　◇用绝对定位加叠图片，竖排文字和横排文字等三个内容。
　　◇加叠羽化图片的代码：

<TABLE id=table2 style="LEFT: 350px; ridge; WIDTH: 180px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">
<TR>
<TD>
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=180 width=180 src="http://www.tyfo.com/10399/tyfo/ent/27_images/entwl060808t2.jpg">
</TD></TR></TABLE>

　　◇加叠竖排文字的代码：

<TABLE id=table2 style="LEFT: 10px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 50px; HEIGHT: 100px">
<TR><TD>
<FONT style="FONT-SIZE: 30pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
金<br>鲤<br>鱼
</FONT>
</TD></TR></TABLE>

　　◇加叠横排文字的代码：

<TABLE id=table2 style="LEFT: 100px; ridge; WIDTH: 400px; ridge; POSITION: absolute; TOP: 300px; HEIGHT: 100px">
<TR><TD>
<FONT style="FONT-SIZE: 20pt; FILTER: shadow color=apar); WIDTH: 200%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>
坐标控制绝对定位贴图</FONT>
</TD></TR></TABLE>

原创编辑者:游子。

显示结果:

金
鲤
鱼

坐标控制绝对定位贴图

原创编辑者:游子。

坐标控制绝对定位贴图参考实例代码：

<DIV style="LEFT: -10px; WIDTH: 760px; POSITION: relative; TOP: 0px">
<TABLE style="BORDER-LEFT-COLOR: #8c8c00; BORDER-BOTTOM-COLOR: #8c8c00; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #8c8c00; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #8c8c00; BORDER-BOTTOM-STYLE: ridge" height=580 cellSpacing=0 cellPadding=0 width="100%" background=http://banbridge.vip.myrice.com/wallpapers/Bashang.JPG border=22>
<TBODY>
<TR>
<TD>
</p></TD></TR></TBODY></TABLE><BR><BR><BR><BR>
<EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 10px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<EMBED style="LEFT: 250px; WIDTH: 480px; POSITION: absolute; TOP: 200px; HEIGHT: 200px" align=center src=http://youngcolor.com.ne.kr/swf1/24.swf width=180 height=100 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<EMBED style="LEFT: 50px; WIDTH: 600px; POSITION: absolute; TOP: 260px; HEIGHT: 400px" align=center src=http://youngcolor.com.ne.kr/swf1/24.swf width=650 height=400 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<EMBED style="LEFT: 200px; WIDTH: 700px; POSITION: absolute; TOP: 200px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/51.swf width=700 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <BR><BR>
<TABLE id=table2 style="LEFT: 80px; ridge; WIDTH: 120px; ridge; POSITION: absolute; TOP: 20px; HEIGHT: 100px">
<TR><TD>
<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>牧埸</B></FONT>
</FONT>
</TD></TR></TABLE>
<TABLE id=table2 style="LEFT: 180px; ridge; WIDTH: 520px; ridge; POSITION: absolute; TOP:500px; HEIGHT:60px">
<TR><TD>
< align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=silvergreen); WIDTH: 100%; COLOR:00ff00; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
图文：网络/编辑：游子
</FONT></P></TD></TR></TABLE>

【说明】

　①绿色字体的代码是一张有绝对定位的图框（草地背景）。
　②黄色字体的代码是加叠在图片的四组Flash图片。
　③白色字体的代码是二组再加叠在Flash的文字。
　④Flash 加叠文字，必须用定位表格加叠才能成功。

　

原创编辑者:游子。
　

显示结果:

牧埸

图文：网络/编辑：游子

原创编辑者:游子。

编辑：游子
（待续）

TOP

[转帖] 启步学代码(11~18)

启步学代码(11~18)

图文：网络编辑：游子

●说明： 用图片作表格背景必须注意图片素材原尺寸和图框宽度设置要一致。 如果图片小而图框大，会显示部份重影，多出一部份图像。相反如果图片大而图框小则 只显示图像的一部份。 原创编辑者:游子。

图片雾化的贴图方法。

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

学习图框内多位置插入图文。

图片加叠像框的方法

绝对定位加叠法的代码模式：

绝对定位加叠法参考实例-4

坐标控制绝对定位贴图的方法。

坐标控制绝对定位贴图参考实例代码：

图文：网络
编辑：游子

●说明：用图片作表格背景必须注意图片素材原尺寸和图框宽度设置要一致。如果图片小而图框大，会显示部份重影，多出一部份图像。相反如果图片大而图框小则只显示图像的一部份。

原创编辑者:游子。