[其它] 【教程】HTML代码贴图做帖通俗教程

莫言

      很多朋友对html贴图有着浓厚的兴趣，只是苦于无从下手，找不到要领，所以再给大家提供一个专题讲座让我们共同学习。

 

 

一：背景 原代码如下：

 

<TABLE borderColor=#841a00 cellSpacing=2 width=500 align=center background=背景图片网址 border=10>
<TBODY>
<TR>
<TD>帖子的文章加图片</TD></TR></TBODY></TABLE>

注意：前边用了多少<TABLE......><TBODY>
<TR>
<TD>

后面就要有多少</TD></TR></TBODY></TABLE>收尾。多收和少收都会使帖子出错哦

 

常用的参数设定及注解：width="400" 表格宽度，接受绝对值（如 500）及相对值（如 80%）。 border="10" 表格边框的厚度。 cellspacing="2" 表格格线的厚度 cellPadding=5　表格格线内厚度 align="CENTER" 表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center valign="TOP". 表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。 　　 background="背景图片网址" 表格的背景图片，与 bgcolor 不要同用。 bgcolor="#0000FF" 表格的底色，与 background 不要同用 bordercolor="#CF0000" 表格边框颜色 bordercolorlight="#00FF00" 表格边框向光部分的颜色 bordercolordark="#00FFFF" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效

 

 

 

 

 

 

帖子的文章加图片

 

 

 

相关学习帖：

 

【教程】漂亮的立体转动图片代码
http://bbs.qianlong.com/thread-1350920-1-1.html

 

【教程】HTML代码贴图做帖通俗教程
http://bbs.qianlong.com/thread-1349389-1-1.html

 

【教程】教你做播放列表
http://bbs.qianlong.com/thread-1351083-1-1.html

 

【教程】图片消隐代码
http://bbs.qianlong.com/thread-1350846-1-1.html

 

【教程】HTML文字特效代码学习
http://bbs.qianlong.com/thread-1350818-1-1.html

 

【教程】音画教程之-----文字、图片移动的巧用
http://bbs.qianlong.com/thread-1343836-1-1.html

 

【教程】图片处理 22种图片处理效果！
http://bbs.qianlong.com/thread-1350857-1-1.html

莫言

二.贴图

贴图 1.基本代码：

 

 

注意：设定图片大小，此宽度及高度一般采用 pixels （也就是像素）作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。 2.给图片加边框 基本代码：

<TABLE borderColor=#841a00 cellSpacing=2 cellPadding=1 border=6>
<TBODY>
<TR>
<TD><IMG height=375 src="图片地址" width=500></TD></TR></TBODY></TABLE>

 

 

 

 

说明：

 

border="6" 表格边框的厚度，如果你不想显示边框的边，你就把参数设置为“0”。 cellspacing="2" 表格格线的厚度 cellPadding=1　表格格线内厚度 borderColor=#841A00　边框色彩 为边框设置成了光感效果，用这样的代码： borderColorlight=#CD5C5C 表格边框向光部分的颜色 borderColordark=#841A00 表格边框背光部分的颜色 如果你的边框用了感光效果，bordercolor 就失效了，所以不能同时使用。 示例代码如下：

莫言

三、 多层边框的制作

 

3 多层边框的制作 有4层边框，也就是有4个背景图

 

第一层

 

<TABLE cellSpacing=0 cellPadding=15 width=600 background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%">第二层
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">第三层
<TABLE cellSpacing=0 cellPadding=10 width="100%" background=背景图片地址 border=1>
<TBODY>
<TR>
<TD width="100%">第四层
<TABLE cellSpacing=0 cellPadding=8 width="100%" background=背景图片地址 border=3>
<TBODY>
<TR>
<TD width="100%">结束语
<P></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

 

效果图：

 

 

 

第二层 第三层 第四层 结束语

莫言

添加透明flash

 

添加透明flash 代码如下：

 

<TD><EMBED align=center src=flash地址 width=400 type=application/x-shockwave-flash quality="high" wmode="transparent"><EMBED align=left src=flash地址 width=550 height=350 type=application/x-shockwave-flash quality="high" wmode="transparent"></TD>

 

 

说明：粉红字就是插入透明flash的代码，在这里我连续插入了两种flash特效。把FLASH放在图片里面，这样图片就必需作为背景才行，不足之处就在于图片往往较大，而论坛显示范围有限，作为背景的图片常常无法显示全图。所以建议大家在用这种格式的时候最好是选取一些较小的图，也或者自己用PS将图改小了再用。

莫言

插入音乐

 

插入音乐 我们通常在在帖子结束前插入音乐，其代码是:<EMBED src=“音乐地址”>

 

常用的代码： AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。 width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。 VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。 HIDDEN=TRUE 隐藏控制面板 STARTTIME="分:秒" 设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 ALIGN="center" 设定控制面板和旁边文字或图片的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子 CONTROLS="smallconsole" 设定控制面板的外观。预设值是 console。 console 一般正常面板 　　 smallconsole 较小的面板 　　 playbutton 只显示播放按钮 　　 pausecutton 只显示暂停按钮 　　 stopbutton 只显示停止按钮 　　 volumelever 只显示音量调节按钮

 

 

例一：

 

 

代码：<EMBED src=音乐地址 hidden=true loop="true" autostart="true">

作为背景音乐来播放，隐藏了播放器。

 

例二：

 

 

 

<EMBED src=音乐地址width=145 height=60 loop="true">

 

 

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

 

在论坛做帖常用格试如下：

 

一： <EMBED src=音乐网址 width=400 height=40 type=audio/x-pn-realaudio-plugin Loop="true" AutoStart="true" ></EMBED> 说明：一般用来插入mp3 rm ra ram asf mid 等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。

 

二： <BGSOUND src="音乐文件地址" loop=3>说明：一般用来插入wav wma mid mp3等格试的音乐文件。

 

三.视频 <EMBED src=视频网址 width=400 height=400 type=audio/x-pn-realaudio-plugin Loop="true" AutoStart="true" controls="imagewindow,ControlPanel,StatusBar">

 

四.FLASH动画的方法与添加透明flash 相同。

 

 

莫言

谨以此贴献给 共和国最可爱的人 ; 军 歌 嘹 亮 在烈日烤炙下，哨兵们汗流满脸，却身板挺直，纹丝不动 一队出操的军人擦肩而过，“一二三四”喊得气势磅礴 当洪水肆虐、烈火熊熊、歹徒逞凶、人们的生命财产受到威胁时 人民子弟兵召之即来，来之能战，战之能胜 以血肉之躯维护着祖国和人民的安宁 这就是共和国最可爱的人 中华人民共和国国歌 当兵为什么 咱当兵的人 说句心里话 为了谁 一二三四歌 中华人民共和国军歌 听歌请点以上链接 千龙莫言编辑/图乐:网络 文:山月

一个完整图文帖子代码：

 

 

 

<TABLE borderColor=#cc0066 cellSpacing=8 borderColorDark=#cc0066 cellPadding=8 width="100%" borderColorLight=#cc0066 background=http://www.53520.com/bbs/tp/1/4B26166568.7.gif border=4>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#cc0066 cellPadding=5 width="100%" borderColorLight=#cc0066 background=http://www.53520.com/bbs/tp/1/4B26166568.7.gif border=8>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#cc0066 cellPadding=5 width="100%" borderColorLight=#cc0066 background=http://www.53520.com/bbs/tp/1/4B26188034.3.gif border=5>
<TBODY>
<TR>
<TD>
<P align=center><B>
<CENTER></B><BR><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 100%" face=汉鼎繁随意 size=6><BR>谨以此贴献给<BR>共和国最可爱的人</FONT><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #ff00ff; LINE-HEIGHT: 100%; FONT-FAMILY: 汉鼎繁中变" size=6></FONT><FONT color=#ff00ff> </FONT>
<DIV></DIV>
<P></P>
<P align=center><IMG src="http://www.huayucity.com/bbs/UploadFile/2004-11/2004114193273.gif">;</P></CENTER><BR>
<CENTER><FONT face=隶书 color=red size=15>
<MARQUEE direction=up behavior=alternate width=60 height=120>军</MARQUEE><FONT color=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=80>歌</MARQUEE><FONT color=brown>
<MARQUEE direction=up behavior=alternate width=60 height=120>嘹</MARQUEE><FONT color=green>
<MARQUEE direction=up behavior=alternate width=60 height=80>亮</MARQUEE><FONT color=orange><FONT color=yellow><FONT color=orange></FONT></B></MARQUEE></FONT></CENTER></FONT></FONT></FONT></FONT></FONT></FONT><BR>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>在烈日烤炙下，哨兵们汗流满脸，却身板挺直，纹丝不动</STRONG></FONT></P>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>一队出操的军人擦肩而过，“一二三四”喊得气势磅礴</STRONG></FONT></P>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>当洪水肆虐、烈火熊熊、歹徒逞凶、人们的生命财产受到威胁时</STRONG></FONT></P>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>人民子弟兵召之即来，来之能战，战之能胜</STRONG></FONT></P>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>以血肉之躯维护着祖国和人民的安宁</STRONG></FONT></P>
<P align=center><FONT face=幼圆 color=#a9134e size=4><STRONG>这就是共和国最可爱的人</STRONG></FONT></P>
<P align=center><IMG height=480 src="http://bbs.tdrit.com/UploadFile/2005-6/2005616123425753.jpg" width=640 border=0></P>
<P align=center><IMG height=321 src="http://bbs.xyhc.com/attachments/month_0511/pb051031072_EOsLVbE7lX1i.jpg" width=450 border=0></P>
<P align=center><IMG height=555 src="http://photo.sohu.com/2004/05/24/92/Img220229283.jpg" width=388 border=0></P>
<P align=center></P>
<P align=center><IMG height=380 src="http://www.fsou.com/forum/UploadFile/2005-7/20057297479556.jpg" width=550 border=0></P>
<P align=center></P>
<P align=center><IMG height=367 src="http://photo.sohu.com/2004/05/24/92/Img220229274.jpg" width=555 border=0></P>
<P align=center></P>
<P align=center><IMG height=455 src="http://www.fsou.com/forum/UploadFile/2005-7/20057297479492.jpg" width=555 border=0></P>
<P align=center></P>
<P align=center><IMG height=385 src="http://photo.sohu.com/2004/05/24/93/Img220229304.jpg" width=555 border=0></P>
<CENTER><BR><A onclick=player.filename=this.value; href="#" value="http://www.baoci98.net/art/image/3--nj-sh/lesson61/sounds/a1.mp3">中华人民共和国国歌</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://www.go81.net/upmusic/2005112124420.mp3">当兵为什么</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://www.zmdz.com/402/music/031.mp3">咱当兵的人</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://canjun.com/upmusic/2005112326892.wma">说句心里话</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://bar.xcom.cn/wkhh/gh/jkedr/82.mp3">为了谁</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://81ok.5281.net/UpLoadFile/200541753369673.mp3">一二三四歌</A><BR><BR><A onclick=player.filename=this.value; href="#" value="http://web.nt100m.com/reeven/song/军队歌曲/中国人民解放军军歌（合唱）.wma">中华人民共和国军歌</A><BR></CENTER>
<P align=center><FONT color=#9611ee size=5><STRONG>听歌请点以上链接</STRONG></FONT></P>
<P align=center><FONT color=#9611ee size=5><STRONG>千龙莫言编辑/图乐:网络 文:山月</STRONG></FONT></P></FONT></B>
<P align=center><FONT face=方正舒体 color=#ffff00 size=6><A href="http://kxly88.2000y.net/"></A></FONT></P>
<P>　 </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<DIV>
<TABLE borderColor=#4f3256 background=image/wmpimg/wmp_01.jpg border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=50,style=3)">
<SCRIPT language=JavaScript src="http://bbs.abcbit.com/plugins/object.php?wmp,http://bbs.abcbit.com/plugins/musicautoplay.php,300,45,player,1,0,0,1"></SCRIPT>
</TD></TR></TBODY></TABLE></DIV></DIV></DIV>

 

莫言

五、文字应用

 

文字应用

注意：文字只能在背景图片上显示，所以如果你想在某一图片上写字，就须把图片设置为背景

 

1.文字基本设制

 

基本代码如下：<P align=center><FONT face=华文行楷 color=#cfcf88 size=5>插入文字</FONT></P>

 

说明： <FONT size=+0></FONT>这是一对输入文字的代码。<P align=center>表示居中，
<P align=left>表示居左，
<P align=right>表示居右。 face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7　取值越大文字就越大 另一种贴法： <FONT face=新宋体 color=#ff0000>插入文字</FONT> font:40pt　数值越大文字就越大。 color=颜色代码

 

 

插入文字

 

 

 

 

示例代码：

 

 

 

鹰击长空

 

代码如下：

 

<TABLE borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=华文行楷 color=red size=6><B>鹰击长空</B></FOND></P></FONT></TD></TR></TBODY></TABLE>

示例代码： <TABLE borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10> </P></DIV></DIV></TR>
<TBODY>
<TR>
<TD>
<P align=left>
<MARQUEE scrollAmount=2 scrollDelay=80 direction=up height=140><FONT face=华文行楷 color=red size=6><B>鹰击长空</B></FOND></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

 

鹰击长空

教程延伸：

 

滚动文字示例代码：

<TABLE> borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10> </P></DIV></DIV></TR>
<TBODY>
<TR>
<TD>
<P align=left>
<MARQUEE scrollAmount=2 scrollDelay=80 direction=up height=140><FONT face=华文行楷 color=red size=6><B>鹰击长空</B></FOND></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

 

 

 

附文字滚动代码使用说明：

 

说明： direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right) behavior=移动方式，　scroll 一圈一圈绕着走，　slide 只走一次，　behavior=alternate 来回走 width=宽度　　height=高度　　scrolldelay=速度　　scrollamount=位移 上面的参数大家可以根据不同的情况自行调节。

qianlong

莫言辛苦了！致敬~

发如云

先回帖再仔细学习，谢谢莫班！

发如云

borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10>

鹰击长空