[其它] 【教程】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>
 
 
效果图:
 
 
 
第二层
第三层
第四层
结束语

五、文字应用

 

文字应用

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

 

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=位移 上面的参数大家可以根据不同的情况自行调节。

添加透明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>


 

莫言辛苦了!致敬~
*-003 *-003 先回帖再仔细学习,谢谢莫班!*-003
borderColor=#8b008b height=375 cellSpacing=5 cellPadding=5 width=500 background=http://bbs.sm618.com/UploadFile/2005-8/20058162241790408.jpg border=10>

鹰击长空

12345678910... 20下一页
下一页 »
注册会员
快速回复 返回顶部 返回列表