军旅同心聊天室登录口﹦﹦﹦﹦》》》   昵称:       密码: 


  共有8797人关注过本帖树形打印复制链接

主题:[转帖]起步学代码(申请区固顶):)

美女呀,离线,留言给我吧!
黄脸婆
  21楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/16 15:21:00 [只看该作者]

图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(15)

(游子编辑 供初学HTML代码的朋友参考)



如何在图框套装内贴图片和文字。

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

图片点击可在新窗口打开查看
几种常用贴图代码。

第一种:
<img src="图片地址">
第二种:
<img src=“图片地址” width='80'height='280' border='10'>
第三种:


<CENTER>
<TABLE borderColor=0000ff cellSpacing=10 cellpadding=20 background=“图片地址”width=400 height=300 border=10>
<TBODY>
<TR>
<TD>
<br>
<br>
</TD></TR></TBODY></TABLE></CENTER>

图片点击可在新窗口打开查看

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

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

<CENTER>
<img src="http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg">
</CENTER>

显示结果:

图片点击可在新窗口打开查看

图片点击可在新窗口打开查看

第二种简易使用的图片可定大小有黑色边框的贴图代码。
<CENTER>
<img src=http://photo.southcn.com/upload/F202922004.11.4.22.24.422.jpg width=620 height=380 border='10'>
</CENTER>


显示结果:
图片点击可在新窗口打开查看


图片点击可在新窗口打开查看

第三种用表格属性内容的贴图代码。
<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>
 


显示结果:



图片点击可在新窗口打开查看
(待续)

图片点击可在新窗口打开查看


编辑:游子



[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  22楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/18 15:06:00 [只看该作者]

图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(16)

(游子编辑 供初学HTML代码的朋友参考)



在图框内贴图或文字的位置设置方法。


  根据插入的图片宽度和色彩选好图框。目前多数论坛对代码贴图的宽度限制在500之内,所以图框包括边线宽度不能超过500,插入的图片宽度在400以内,否则其超过部份就无法显示。如果图片很大,就要选宽度大于700的图框,同时要设置全屏代码,才能完整显示。网络上有很多漂亮的图框(套装),可以拿来套用。启步学习时,最好采用较简单的图框。

图片点击可在新窗口打开查看


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


<TABLE width=480 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#fff000><B>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
</B> </FONT>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>



代码实例:

<TABLE width=500 height=350 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<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=352 border=1>
</P>
<p align=CENTER>图文:网络/编辑:网名</P>
</B> </FONT>
</TD></TR></TBODY></TABLE></CENTER>

显示结果:



显示结果:

万紫千红总是春

图片点击可在新窗口打开查看

图文:网络/编辑:网名


图片点击可在新窗口打开查看


  

定位设置一些语句。

align(水平方向)
水平方向有左中右:
left(左对齐)
center(居中)
RIGHT(右对齐)

水平方向位置设置代码:

<P align=LEFT>内容左对齐</P>
<P align=center>内容居中</P>
<P align=RIGHT>内容右对齐</P>
显示结果:

内容左对齐

内容居中

内容右对齐

图片点击可在新窗口打开查看


valign(垂直方向)

垂直方向有靠顶和靠底.
top(靠顶),bottom(靠底)
垂直方向与水平方向相结合可以设置6个不同位置的指令如下:

<P align=LEFT valign=top>居左靠顶</P>
<P align=center valign=top>居中靠顶</P>
<P align=RIGHT valign=top>居右靠顶</P>

<P align=LEFT valign=bottom>居左靠底</P>
<P align=center valign=bottom>居右靠底</P>
<P align=RIGHT valign=bottom>居右靠底</P>


在图框内插入图片和文字位置的代码:

<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>


显示结果:

居左靠顶

图片文字插入位置示例
居中


居右靠底


  图片文字插入位置控制还有其他方法,比如利用表格的行(<TR>)和列(<TD >)设置多行多列等,以及坐标绝对定位等等。


图片点击可在新窗口打开查看
(待续)

图片点击可在新窗口打开查看


编辑:游子

图片点击可在新窗口打开查看


  

定位设置一些语句。

align(水平方向)
水平方向有左中右:
left(左对齐)
center(居中)
RIGHT(右对齐)

水平方向位置设置代码:

<P align=LEFT>内容左对齐</P>
<P align=center>内容居中</P>
<P align=RIGHT>内容右对齐</P>
显示结果:

内容左对齐

内容居中

内容右对齐

图片点击可在新窗口打开查看


valign(垂直方向)

垂直方向有靠顶和靠底.
top(靠顶),bottom(靠底)
垂直方向与水平方向相结合可以设置6个不同位置的指令如下:

<P align=LEFT valign=top>居左靠顶</P>
<P align=center valign=top>居中靠顶</P>
<P align=RIGHT valign=top>居右靠顶</P>

<P align=LEFT valign=bottom>居左靠底</P>
<P align=center valign=bottom>居右靠底</P>
<P align=RIGHT valign=bottom>居右靠底</P>


在图框内插入图片和文字位置的代码:

<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>


显示结果:

居左靠顶

图片文字插入位置示例
居中


居右靠底


  图片文字插入位置控制还有其他方法,比如利用表格的行(<TR>)和列(<TD >)设置多行多列等,以及坐标绝对定位等等。


图片点击可在新窗口打开查看
(待续)

图片点击可在新窗口打开查看


编辑:游子


[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  23楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/18 15:08:00 [只看该作者]





图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(17)

(游子编辑 供初学HTML代码的朋友参考)


  

在多层图框(套装)内贴图的方法。


  学会文字设置和表格设置之后,就要学做有图片,文字和背景音乐的完整贴图了 。单层图框内插入图片文字内容,应该在表格的单元格(<td></td>)中间,多层图框内贴图也必须是这样。下面是一张六层图框贴图代码及其分段说明。




<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335253784815.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335254658568.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
<P align=LEFT>  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。</P>
<BR>
松鼠图
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/b_songshu.jpg" type=image width=470></P>
<BR>
猫扑蝶
<P align=center>
<INPUT src="http://www.688999.com/picture_of_products_big/33.JPG" type=image width=470></P>
<BR>
荷花、鸳鸯、小鸟、牡丹
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/x1.JPG" type=image width=470></P>
<BR>
中华瑰宝
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_jufu/rn02.jpg" type=image width=470></P>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>


****************************************************************
代码及其分段说明。

第一段是6组六层边框(表格)代码的始标筌。

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
...............
..............
................
. ..............
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
这里是第六层图框(表格)的单元格,开始插入内容。

*******************


第二段是插入图片文字和背景音乐的区域。

<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
............................
...........................
.................................
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">

*******************


第三段是6组六层边框(表格)代码的尾标筌。

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



<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335253784815.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335254658568.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
<P align=LEFT>  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。</P>
<BR>
松鼠图
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/b_songshu.jpg" type=image width=470></P>
<BR>
猫扑蝶
<P align=center>
<INPUT src="http://www.688999.com/picture_of_products_big/33.JPG" type=image width=470></P>
<BR>
荷花、鸳鸯、小鸟、牡丹
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/x1.JPG" type=image width=470></P>
<BR>
中华瑰宝
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_jufu/rn02.jpg" type=image width=470></P>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>


****************************************************************
代码及其分段说明。

第一段是6组六层边框(表格)代码的始标筌。

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
...............
..............
................
. ..............
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
这里是第六层图框(表格)的单元格,开始插入内容。

*******************


第二段是插入图片文字和背景音乐的区域。

<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
............................
...........................
.................................
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">

*******************


第三段是6组六层边框(表格)代码的尾标筌。

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



<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335253784815.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=20 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335254658568.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
<P align=LEFT>  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。</P>
<BR>
松鼠图
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/b_songshu.jpg" type=image width=470></P>
<BR>
猫扑蝶
<P align=center>
<INPUT src="http://www.688999.com/picture_of_products_big/33.JPG" type=image width=470></P>
<BR>
荷花、鸳鸯、小鸟、牡丹
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_products_big/x1.JPG" type=image width=470></P>
<BR>
中华瑰宝
<BR>
<P align=center><INPUT src="http://www.688999.com/picture_of_jufu/rn02.jpg" type=image width=470></P>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>


****************************************************************
代码及其分段说明。

第一段是6组六层边框(表格)代码的始标筌。

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="680" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243753811.jpg border=1>
<TBODY>
<TR>
<TD>
...............
..............
................
. ..............
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.gw.com.cn/UploadFile/2006-3/2006335243084013.jpg border=1>
<TBODY>
<TR>
<TD>
这里是第六层图框(表格)的单元格,开始插入内容。

*******************


第二段是插入图片文字和背景音乐的区域。

<CENTER>
<BR>
<IMG src="http://bbs.gw.com.cn/UploadFile/2006-3/200633522233660.jpg">
<font style=font:20pt face=隶书 color=00ff00>
<FONT style="FONT-SIZE: 17pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #fff000; LINE-HEIGHT: 150%" face=隶书>
<h1>小李庄立体画欣赏</h1>
............................
...........................
.................................
<BR>
<H2>图文:网络/编辑:游子</H2></B></FONT></CENTER>
<EMBED src=http://www.minzuyinyue.com/xinshang/125.mp3 width=0 height=0 type=audio/x-pn-realaudio-plugin loop="true" autostart="true" controls="controlpanel,statusbar">

*******************


第三段是6组六层边框(表格)代码的尾标筌。

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




六层图框贴图代码显示结果:


图片点击可在新窗口打开查看
                                     

小李庄立体画欣赏

  小李庄立体画是以草本植物的茎类为原料,利用其自然光泽、纹理和质感,借助现代技术把这一传统工艺推陈出新。


松鼠图


猫扑蝶


荷花、鸳鸯、小鸟、牡丹


中华瑰宝


图片点击可在新窗口打开查看
                                       

图文:网络/编辑:游子


                                     

                                   



(待续)

图片点击可在新窗口打开查看


编辑:游子




[此贴子已经被作者于2006-8-18 15:18:07编辑过]


[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  24楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/18 15:21:00 [只看该作者]

图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(18)

(游子编辑 供初学HTML代码的朋友参考)


  

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

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

  设置一个规定范围的表格(图框),代码如下:

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 550px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TR>
<TD>
插入图文
</TD></TR></TABLE>


  表格化的绝对定位代码:

<TABLE id=table1 style="ridge; LEFT: 10px; WIDTH: 220px; ridge; POSITION: absolute; TOP: 0px; HEIGHT: 120px">
<TR>
<TD>
文字设置代码:
<FONT style="FONT-SIZE: 25pt; FILTER: shadow color=apar); WIDTH: 150%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>
文字内容
</FONT>
或插入图片贴图代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image height=160 width=140 src="图片地址">
</TD></TR></TABLE>

  代码语句说明:

LEFT: 10px; WIDTH: 220px;插入内容与左边的距离和宽度的范围。

TOP: 0px; HEIGHT: 400px插入内容与顶部的距离和高度的范围。


表格化的绝对定位代码实例:

图片点击可在新窗口打开查看击点表格化的绝对定位代码实例


(待续)

图片点击可在新窗口打开查看


编辑:游子






[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  25楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/23 15:28:00 [只看该作者]

图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(19)

(游子编辑 供初学HTML代码的朋友参考)

介绍几种立体边框的代码


1,立体边框





1,立体边框的代码:

立体边框-1代码如下:


<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=3 cellPadding=0 width=480 border=14>
<TBODY>
<TR>
<TD bgColor=#000000>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD>
<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 480px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 350px" background=http://bbs.guqu.net/UploadFile/2004-12/20041230144914462.jpg border=0>
<TR>
<TD>
</TD></TR></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>



2,凸出框



2,凸出框的代码:
凸出框的代码如下:


<table width=680 height=470 style="border:25 outset #ff88ff">
<tr><td>
<TABLE>
<TBODY>
<TR>
<TD width=620 background=http://xymusic.bbs.topzj.com/attachments//16/2/162/day_050226/2_drYYm44DCHjZ.jpg height=470 border=0></TD></TR></TOBDY></TBODY></TABLE>
</td></tr></table>



3,凹进框


凹进框的代码:


凹进框的代码如下:


<table width=680 height=470 style="border:25 inset #ff88ff">
<tr>
<td>
<TABLE>
<TBODY>
<TR>
<TD width=620 background=http://xymusic.bbs.topzj.com/attachments//16/2/162/day_050226/2_drYYm44DCHjZ.jpg height=470 border=0>
</TD></TR></TOBDY></TBODY>
</TABLE></td></tr></table>



4,凹槽框



凹槽框的代码:

凹进框的代码如下:
<table width=680 height=470 style="border:25 groove green" border="0">
<tr>
<td>
<TABLE>
<TBODY>
<TR>
<TD width=620 background=http://xymusic.bbs.topzj.com/attachments//16/2/162/day_050226/2_drYYm44DCHjZ.jpg height=470 border=0>
</TD></TR></TOBDY></TBODY>
</TABLE></td></tr></table>



5,双线框




双线框的代码:

双线框的代码如下:
<table width=640 height=470 style="border:5 double green">
<tr>
<td>
<TABLE>
<TBODY>
<TR>
<TD width=620 background=http://xymusic.bbs.topzj.com/attachments//16/2/162/day_050226/2_drYYm44DCHjZ.jpg height=470 border=0>
</TD></TR></TOBDY></TBODY>
</TABLE></td></tr></table>



6,邮票框





邮票框的代码:

邮票框的代码如下:

<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tr>
<td bgcolor="#aeffae" width=600 height=450 style="border:25 groove green" border="0">
<INPUT src="http://xymusic.bbs.topzj.com/attachments//16/2/162/day_050226/2_drYYm44DCHjZ.jpg" type=image width=600> </td></tr></table><br>







(待续)
编辑:游子








[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  26楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/8/23 15:57:00 [只看该作者]





图片点击可在新窗口打开查看< type=image width=400 src="http://bener.51.net/img/bar.gif">
图片点击可在新窗口打开查看
欢迎您!启步学代码。

(游子编辑 供初学HTML代码的朋友参考)

如何在图片上加叠Flash?


  通常要在图片上加叠Flash动画,必须先设置一张表格,图片作为背景,再在单元内插入Flash,两者的宽高一搬要求一致,可以加插一个或者多个Flash。先看在一张图片上加叠一个Flash,


一张图片上加叠一个Flash的代码:


<TABLE cellSpacing=0 cellPadding=0 width=500 height=330 bordercolor=000000 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=28>
<TBODY>
<TR>
<TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;>

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

(白色部份是加叠Flash的代码。) 

<TABLE cellSpacing=0 cellPadding=0 width=500 height=330 bordercolor=000000 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=28>
<TBODY>
<TR>
<TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;>

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

(白色部份是加叠Flash的代码。) 

<TABLE cellSpacing=0 cellPadding=0 width=500 height=330 bordercolor=000000 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=28>
<TBODY>
<TR>
<TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;>

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

(白色部份是加叠Flash的代码。) 



显示效果:

                

一张图片上加叠三个Flash的代码:


  <TABLE cellSpacing=0 cellPadding=0 width=500 height=400 bordercolor=000000 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=28>
<TBODY>
<TR>
<TD>
<EMBED align=right src=http://imgfree.21cn.com/free/flash/59.swf width=500 height=400 type=application/octet-stream wmode="transparent" quality="high" ;;>

<EMBED align=right src=http://imgfree.21cn.com/free/flash/105.swf width=500 height=400 type=application/octet-stream wmode="transparent" quality="high" ;;>

<EMBED align=right src=http://mouse520.51.net/flash/36.swf width=500 height=400 type=application/octet-stream wmode="transparent" quality="high" ;;>

</TD></TR></TBODY></TABLE>
 
(白色部份是加叠Flash的代码。) 

(白色部份是加叠Flash的代码。) 




显示效果:

                  
                  
                 



(待续)

图片点击可在新窗口打开查看


编辑:游子




[此贴子已经被作者于2006-8-23 16:07:44编辑过]


[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
黄脸婆
  27楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信
等级:版主 帖子:1536 积分:13035 威望:20 精华:3 注册:2004/5/28 12:52:00
  发帖心情 Post By:2006/9/9 10:31:00 [只看该作者]

图片点击可在新窗口打开查看图片点击可在新窗口打开查看
图片点击可在新窗口打开查看
欢迎您!启步学代码。
(20)

(游子编辑 供初学HTML代码的朋友参考)

做全屏贴的方法。


    我们用代码编辑音画贴,幅宽比较大(700-800),如果没有设置全屏代码,由于论坛系统限制规定,发表时往往右边有一部份不能显示。要全部显示,就必须加设全屏代码。全屏代码:

<DIV id=table1 style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px">

  注:LEFT: -220px 左距,数值越大与左边距离越大。
    WIDTH: 800px 帖子宽度,一般全屏都是800像素。
    TOP: 40px" 上距 数值越大与IE上面的距离越大。
    各项数值都可以自行修改。
    这组全屏代码是放在最前一行的。
    要注意在最前和最后各设置几个断行代码(<br>)。以免复盖个人资料。


下面是一张宽720的代码贴源代码:


<CENTER>
<TABLE width=720 height=420 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br><br>
<FONT style="FONT-SIZE: 35pt" face=华文行楷 color=#fff000><B>做全屏贴的方法。</B> </FONT><br>
<br><br><br><br>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>
 



因为没有设置全屏代码发表后显示结果如下:



做全屏贴的方法。








加设全屏代码



<CENTER>
<DIV id=table1 style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px">
<TABLE width=720 height=420 bordercolor=olive background=http://blog.lanyue.com/upload/user/58/386410_22232948.jpg border=18>
<TBODY>
<TR>
<td align=center valign=top><br><br>
<FONT style="FONT-SIZE: 35pt" face=华文行楷 color=#fff000><B>做全屏贴的方法。</B> </FONT><br>
<br><br><br><br>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>
 





加设全屏代码后显示结果期:



做全屏贴的方法。






    ◆  ◆  ◆  ◆  ◆  ◆  ◆


 有些论坛不能发表全屏贴,我们可以用超连接的方法来发表贴子。
就是:把有加设全屏代码的文件复制到空白记事本上,随便用英文字
命名后辍为txt的文件,如wn01.txt  。再进入论坛在自己任何一个
贴子用回复的方法上传这个贴子,发表显示出来就是空间贴,复制地
址备用。另外贴一张宽度500,高300的图片。作为超连接之用。

上面有加设全屏代码的贴子, 上传后取得的空间贴地址如下:


一张可以用来按排超连接的图片的代码:



<br><br>
<CENTER>
<TABLE width=500 height=330 bordercolor=fff000 background=http://park7.wakwak.com/~choukan/sozai/4-aki/aki-22.jpg border=12>
<TBODY>
<TR>
<TD>
<br><br><CENTER>
<a class='hei' href='http://bbs.gw.com.cn/UploadFile/2006-8/200682817153516073.txt'><font style=font:20pt face=华文行楷 color=00ff00>[做全屏贴的方法]</font></a>
<br><br>
</TD></TR></TOBDY></TBODY></TABLE></CENTER>
<br><br>
 



一张可以用来按排超连接的图片:



[做全屏贴的方法]





图片点击可在新窗口打开查看
编辑:游子








[IMG]http://www.f81.net/dv6/UploadFile/2008-6/20086290184218005.jpg[/IMG]

 回到顶部
美女呀,离线,留言给我吧!
一帘秋梦
  28楼 | 信息 | 搜索 | 邮箱 | 主页 | UC
更多


加好友 发短信 寻梦者
等级:版主 帖子:6747 积分:40857 威望:0 精华:1 注册:2008/6/7 23:22:00
  发帖心情 Post By:2009/3/12 12:33:00 [只看该作者]

用户已被锁定


晒几日寂寞雪御寒\喝半口开心醋寻欢
 回到顶部