很多朋友对html贴图有着浓厚的兴趣，只是苦于无从下手，找不到要领，所以再给大家提供一个专题讲座，有部分内容以及贴图素材在此就不赘诉了，请参考固顶中的“贴图指导基础教程”，另外本帖是教学帖，谢绝回复，有疑问或试帖请到固顶帖中的“试帖练习”，在那里我尽力为你解惑答疑，让我们共同学习。
一：背景
一个完整的HTML帖子应该是：
美贴＝背景＋文章＋插图＋收尾
|
原代码如下：
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>
帖子的文章加图片</TD></TR></TBODY></TABLE>
注意：前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。多收和少收都会使帖子出错哦 ：）
常用的参数设定及注解：
<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">
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 将会失效。
贴图
1.基本代码：
<img src=图片网址 width=图片宽度 height=图片高度>
注意：设定图片大小，此宽度及高度一般采用 pixels （也就是像素）作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。
2.给图片加边框
基本代码：
<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><tbody><tr><td><img src=图片地址 width=500 height=375></td></tr></tbody></table>
说明：
border="6" 表格边框的厚度，如果你不想显示边框的边，你就把参数设置为“0”。
cellspacing="2" 表格格线的厚度
cellPadding=1 表格格线内厚度
borderColor=#841A00 边框色彩
比较一下，下图与上一个图有什么地方不同？
看出来了吗？这个边框设置成了光感效果，用了这样的代码：
borderColorlight=#CD5C5C 表格边框向光部分的颜色
borderColordark=#841A00 表格边框背光部分的颜色
如果你的边框用了感光效果，bordercolor 就失效了，所以不能同时使用。
上图的代码如下：
<table border=10 cellSpacing=2 cellPadding=1 borderColorlight=#CD5C5C borderColordark=#841A00><tbody><tr><td><img src=图片地址 width=500 height=375></td></tr></tbody></table>
多层边框的制作
上图共有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 普通插入
<IMG border=0 height=200 src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350>
border=0 图片的边框 height=200 图片的高度 width=350 图片的宽度
例2 设定上下左右空白位置
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=0 hspace=10 vspace=20>
设定上下左右空白位置
hspace=10 是设定图片左右的空间 vspace=20 是设定图片上下的空间
例3 设定图片中间对齐，边框厚度为 4
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=4 align=middle>
设定图片中间对齐，边框厚度为 4
align=middle 格内内容的对齐方式（垂直），可选值为： top (顶部） middle （中部） bottom （底部）
例4：设定图片靠右
<img src="http://bbs.sm618.com/UploadFile/2005-6/200563021431116601.jpg" width=350 height=200 border=0 align=right>
align=right 表格的摆放位置（水平），可选值为： left (左） right（右） center（中）
文字应用
注意：文字只能在背景图片上显示，所以如果你想在某一图片上写字，就须把图片设置为背景
1.文字基本设制
基本代码如下：
<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>
说明：
<font></font>这是一对输入文字的代码
<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。
face=字体 常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
size=字体大小，这里的最大值为7 取值越大文字就越大
另一种贴法：
<font style=font:40pt 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></TD></TR></TBODY></TABLE>
文字的移动
效果：
基本代码：
<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字</font></marquee>
说明：
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)
behavior=移动方式， scroll 一圈一圈绕着走， slide 只走一次， behavior=alternate 来回走
width=宽度 height=高度 scrolldelay=速度 scrollamount=位移
上面的参数大家可以根据不同的情况自行调节。
添加透明flash
代码如下：
<TABLE cellSpacing=35 cellPadding=0 width=460 background=边框图片地址1 border=3>
<TBODY>
<TR>
<TD><TABLE cellSpacing=20 cellPadding=0 width=100% background=边框图片地址2 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width=100% background=边框图片地址3 border=1>
<TBODY>
<TR>
<TD>
<TABLE height=550 cellSpacing=0 cellPadding=0 width=450 background=背景图片地址4 border=0>
<TBODY>
<TR>
<TD><EMBED align=center src=flash地址 width=400 type=application/x-shockwave-flash wmode="transparent" quality="high"><EMBED align=left src=flash地址 width=550 height=350 type=application/x-shockwave-flash wmode="transparent" quality="high"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
说明：粉红字就是插入透明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="音乐地址" autostart=true hidden=true loop=true>
作为背景音乐来播放，隐藏了播放器。
例二：
<EMBED SRC="音乐地址" loop=true width=145 height=60>
出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。
在论坛做帖常用格试如下：
一：
<embed src=音乐网址 type=audio/x-pn-realaudio-plugin （或者用 type=audio/mpeg）controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40></embed>
说明：一般用来插入mp3 rm ra ram asf mid 等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。
二：
<bgsound src="音乐文件地址" loop=3>
说明：一般用来插入wav wma mid mp3等格试的音乐文件。
三.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>
四.FLASH动画的方法与添加透明flash 相同。
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer align=center src=flash地址 width=400 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED>
[
本帖最后由 飞少 于 2007-7-26 17:03 编辑 ]
原创设计 · PhotoShop · AI/CD · Fireworks · AutoCAD · 3DMAX · Flash · 网页教学 · 高精图库 · 笔刷滤镜 · 矢量素材 · 图片素材 · 模板素材 · 会员相册
