IT家园 - Powered by Discuz! Board

标题: 做音乐帖简明教程（为思雨1234制作高手莫入） [打印本页]

作者: wzyh 时间: 2007-12-20 19:40 标题: 做音乐帖简明教程（为思雨1234制作高手莫入）

这是制作教程的边框：

加入内容

这是边框代码：

<TABLE cellSpacing=25 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/2004122517350623.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=15 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041225173521566.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041225172949648.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041225172949648.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041130223049305.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#f0ffff size=5><STRONG><EM>加入内容</EM></STRONG></FONT></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></TD></TR></TBODY></TABLE>

以下是教程

不懂代码也同样可以做精美的音画帖

在Discuz!代码模式下做边框

1.在论坛发帖处或回复处（不是快速回复）点击Discuz! 代码模式

2.勾选“启用HTML代码禁用 Smilies

3.复制粘贴上面的边框代码

4.点击”所见即所得模式“，就看见边框了！

现在，就可以进行下面的操作啦！

在所见所即所得模式下添加文字


1、用鼠标点表格的中间处，你看到光标在闪动，这时你就能写入文字了，也可以复制粘贴文字。

2、编辑表格中的文字

将鼠标放到表格中文字的最前面，点击，然后横拖鼠标选中，你看到字的背景颜色是蓝色时你就可以操作了。

3、编辑文字

居中：点居中图标

字体：选择你喜欢的字体，有很多选项

字号：论坛中的编辑器是数字越大字也就越大，论坛最大为7号字。

以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在<font>标签里用以下代码替换纯HTML原来的元素即可。

代码：

<font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font>
改变font-size: 100pt的数字即可改变文字的大小。

字体颜色：点开A自由选色，满意为止）

在所见所即所得模式下添加你喜欢的图片

1.选找到你喜欢的图片，按住鼠标从上往下拉，图片变黑，右击，点复制。

2.用鼠标点击你要在边框中添加图片处，你看到光标在闪动，就可粘贴你喜欢的图片了。

3.调整图片的位置

按住鼠标左键从图片上面往下拉，待图片变黑，就可进行下面的操作：

居左：点居左图标

居中：点居中图标

居右：点居右图标

还可对图片的位置进行微调：

在图片的上部点击，光标闪动，按确认键，可向下调。

在图片的左则点击，光标闪动，敲空格键，可向右调。

在所见即所得模式Discuz! 模式下添加FLSH

1.选好插入flash的代码和flash 如：

<EMBED height=400 pluginspage=http://www.macromedia.com/go/getflashplayer src=地址 type=application/x-shockwave-flash width=200 quality="high"></EMBED>

http://bbs1.hnol.net/200504/tianshi/yinhua/dnzsjch/e.swf

2.在所见即所得模式下，在你要添加的地方输入几个文字，我输入的是”添加FLASH“。

3.点击“Discuz! 模式”，在代码中找到“添加FLASH”几个文字，用左键抹黑，粘贴前面复制的代码即可。

在所见所即所得模式和Discuz! 下添加播放器和音乐

1.选好播放器代码（<EMBED style="FILTER: Xray" src=音乐地址width=300 height=40 type=audio/mpeg loop="-1" autostart="true" volume="0"></EMBED>，复制到记事本上。

2.找好你要添加的音乐（http://www.73cq.net/ad/女儿情.mp3），把音乐地址代入播放器的代码中。

3.在边框中要添加播放器的地方输入几个字（如：添加音乐）。

4.点" Discuz!代码模式"，复制播放器代码，抹黑刚添加的几个字（添加音乐），粘贴播放器代码到抹黑处。

这下你就可以点发新话题，发表自己的帖子啦！一切OK！

署名：某某制作

[ 本帖最后由 wzyh 于 2007-12-21 09:23 编辑 ]

作者: wzyh 时间: 2007-12-20 19:45

建议开两个浏览器窗口，一步一步照着做！我想你一定会的…！祝你成功！

作者: wzyh 时间: 2007-12-20 19:49

点歌代码：

当前播放曲目：十五的月亮

十五的月亮

爱的奉献-韦唯

边疆处处赛江南

红星闪闪

阿拉伯风格绮想曲

[ 本帖最后由 wzyh 于 2007-12-22 23:00 编辑 ]

作者: wzyh 时间: 2007-12-20 19:50

<p align="center">
<EMBED style="FILTER: invert()" id=mp3Player src=http://www.dabaoku.com/bjyinyue/mid/1.mid width=400 height=66 type=audio/mpeg AutoStart="1" EnableContextMenu="-1" loop="1" ShowControls="-1" ShowStatusBar="-1" ShowDisplay="0">
<br><br><br>

<table width="400" height="50" border="0" cellspacing="0" cellpadding="0" align="center" bordercolor=#000000>
<tr>
<td>
当前播放曲目：
</td>
<td><font style='CURSOR: hand; width:220px; color: #FF00ff; FONT-FAMILY: 华文新魏; FONT-SIZE: 19pt;' id=titleid>十五的月亮</font><br><br>
<font style='CURSOR: hand;color: #00FF00;' onclick="mp3Player.FileName=this.value;titleid.innerText='十五的月亮'" value=http://www.dabaoku.com/bjyinyue/mid/1.mid>
</font>
</td>
<td><img src=http://www.sqkz.com/yyy/tb/gb.gif>
</td></tr></table>

<br>

<table width="300" height="20" border="0" cellspacing="0" cellpadding="0" align="center" bordercolor=#000000>

<tr><td>
<font style='CURSOR: hand;color: #00FF00;' onclick=mp3Player.FileName=this.value;titleid.innerText='十五的月亮' value=http://www.dabaoku.com/bjyinyue/mid/1.mid>
十五的月亮
</font>
</td></tr>

<tr><td>
<font style='CURSOR: hand;color: #00FF00;' onclick=mp3Player.FileName=this.value;titleid.innerText='爱的奉献-韦唯' value=http://www.dabaoku.com/bjyinyue/mid/10.mid>
爱的奉献-韦唯
</font>
</td></tr>

<tr><td>
<font style='CURSOR: hand;color: #00FF00;' onclick=mp3Player.FileName=this.value;titleid.innerText='边疆处处赛江南' value=http://www.dabaoku.com/bjyinyue/mid/57.mid>
边疆处处赛江南
</font>
</td></tr>

<tr><td>
<font style='CURSOR: hand;color: #00FF00;' onclick=mp3Player.FileName=this.value;titleid.innerText='红星闪闪' value=http://www.dabaoku.com/bjyinyue/mid/196.mid>
红星闪闪
</font>
</td></tr>

<tr><td>
<font style='CURSOR: hand;color: #00FF00;' onclick=mp3Player.FileName=this.value;titleid.innerText='阿拉伯风格绮想曲' value=http://www.dabaoku.com/bjyinyue/mid/5.mid>
阿拉伯风格绮想曲
</font>
</td></tr>

</table>

按需要复制蓝色代码,换掉歌曲名和地址.
粉红色是开始播放曲.

可去掉表格,按需要各部分随便放.
但标题前面有"当前播放曲目"等字样,最好做表格,因为歌名长短不一时他会跟着走.

[ 本帖最后由 wzyh 于 2007-12-20 19:53 编辑 ]

作者: 云佛纳 时间: 2007-12-20 19:57

有福同享

顶起来!

作者: wzyh 时间: 2007-12-20 20:01

学习音画的一点体会在我第一次见到优美的音画帖时,内心很激动,怎么还有这么美的东西,一心想把它保存下来,可是怎么都做不到,在一次寻问高手后才得知,音画帖是用代码做的,是无法保存在本地来欣赏（其实是可以保存的）,从此我才知道还有代码一说,同时朋友告诉我学习音画的一些技巧:
1.找教程看.(但初次接触到代码往往都是头发晕,好象在看天书)看多了您就可以从中发现代码的一些规律来,虽说有很多代码我至今也不知他是什么意思,不过也不要紧,因为那都是定式,你也不用去管他,留待以后慢慢去熟悉.
2.在转帖中学习.这是很关键的,每当你看到一幅好音画作品时,你要研究他的代码组成,(如何找到它的代码呢?你可以采用以下的步骤:

方法一:

查看源代码,复制保存下来,你会发现代码是很有规律性的:

(第一层:也就是背景底层,该层决定画面距左边距离LEFT: -160px;负数越大越往左, 宽度:WIDTH: 850px; 通常不大于1024全屏,及离顶部距离TOP: 80px,一般在50-200之间,这些基本数据都在此层调整)

<TABLE id=table1 style="LEFT: -160px; WIDTH: 850px; POSITION: relative; TOP: 80px" cellSpacing=50 borderColorDark=#007500 cellPadding=0 borderColorLight=#ff8533 background=(背景图地址)border=0>

(第二层:边框)
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE borderColor=#424200 cellSpacing=5 borderColorDark=#000000 cellPadding=0 width="93%" background=http://www.sunjelly.com/sucai/yumao/J2.jpg border=1>

(第三层:边框)
<TBODY>
<TR>
<TD width="100%">
<TABLE borderColor=#424200 cellSpacing=25 borderColorDark=#000000 cellPadding=0 width="100%" background=http://www.sunjelly.com/sucai/hua/harunouta6a.jpg border=1>

(第四层:边框,视情况可以继续增加边框层)
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE borderColor= #424200 cellSpacing=5 borderColorDark=#000000 cellPadding=0 width="100%" background=http://www.sunjelly.com/sucai/zb/5/d01_1_050620.jpg border=1>

(标题文字...你希望文字在哪出现就放在哪里)
<TBODY>
<TR>
<TD align=middle>
<p align=center> 注:<p align="#"> 代表文字(同时也适用于图片)在画面中的对齐方式,#号可为 left左对齐; center中对齐; right右对齐;
<FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#FFFFFF);WIDTH: 100%; COLOR: #00BB00; LINE-HEIGHT: 150%; FONT-FAMILY: 方正行书"><B>精美溶图欣赏</B></FONT></P><BR><BR>

(主题图片:图片可以是单幅也可以是多幅)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564 background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_79f334cd8a32c26.jpg height=846></TD></TR></TBODY></TABLE> <BR>
(在该图片上加FLASH)
<EMBED style="LEFT: 80px; WIDTH: 600px; POSITION: absolute; TOP: 100px; HEIGHT: 846px" align=right src=http://imgfree.21cn.com/free/flash/9.swf width=600 height=846 type=application/octet-stream wmode="transparent" quality="high" ;;>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564 height=846 background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_128003aafbe1237.jpg height=502></TD></TR></TBODY></TABLE><BR>
(在该图片上加FLASH)
<EMBED style="LEFT: 60px; WIDTH: 500px; POSITION: absolute; TOP: 750px; HEIGHT: 846px" align=center src=http://imgfree.21cn.com/free/flash/45.swf width=600 height=846 type=application/octet-stream wmode="transparent" quality="high" ;;>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564 background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_242e9cdf09c174f.jpg height=846></TD></TR></TBODY></TABLE><BR>
(在该图片上加FLASH)
<EMBED style="LEFT: 50px; WIDTH:600px; POSITION: absolute; TOP: 1050px; HEIGHT: 846px" align=right src=http://imgfree.21cn.com/free/flash/9.swf width=600 height=846 type=application/octet-stream wmode="transparent" quality="high" ;;>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=846 height=564 background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_63b30a5193ba855.jpg height=864></TD></TR></TBODY></TABLE><BR>
(在该图片上加FLASH)
<EMBED style="LEFT: 80px; WIDTH:600px; POSITION: absolute; TOP: 1300px; HEIGHT: 846px" align=right src=http://imgfree.21cn.com/free/flash/9.swf width=600 height=846 type=application/octet-stream wmode="transparent" quality="high" ;;>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564
background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_07e6012b520b046.jpg height=846></TD></TR></TBODY></TABLE><BR>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564
background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_973eaf75b556b59.jpg height=846></TD></TR></TBODY></TABLE><BR>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=768
background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_0b6f0895b1c1c7b.jpg height=585></TD></TR></TBODY></TABLE><BR>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564
background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_8fead7c13751ea7.jpg height=846></TD></TR></TBODY></TABLE><BR>

(主题图片)
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle width=564
background=http://i.topzj.com/u/Mon_0701/Day_4/195550_4255_bbb8d996ad6d2ee.jpg height=846></TD></TR></TBODY></TABLE><BR>

(落款文字)
<p align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#FFFFFF); WIDTH: 100%; COLOR: #82D900; LINE-HEIGHT: 150%; FONT-FAMILY: 方正行楷"><B>编辑:逍遥公子<BR>07.12.20</B></FONT></P>

(音乐)
<EMBED src=http://www.greengra.com/Marc%20Anthony%20-%20Dimelo%20-%2001%20-%20Track%20%201.mp3 width=0 height=0 hidden=true type=audio/x-pn-realaudio-plugin autostart="true" loop="true"
<DIV></DIV><BR></DIV>
这里的width(宽)=0 height(高)=0意思是播放器不可见,如要想可见请设置宽高即可

(代码结束语)
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
<DIV><BR>
<DIV></DIV><BR></DIV>
</TD></TR></TBODY></TABLE>
<DIV></DIV><BR></DIV>

(代码结尾空行字符)
<BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>

每一个循环就代表一张图片,一幅音画会有很多图片组成,所以他有规律性.你可以把代码中的连接地址复制到浏览器中看看是音画中的哪张图片,从而领悟出音画帖的结构.

方法二:

在音画帖页面点右键,查看源代码或点查看/源文件,在打开的记事本中找出该帖的代码,一般音画帖都是以:<TABLE id=table1 style="LEFT: -160px; WIDTH: 850px; POSITION: relative; TOP: 80px".......字符开头,以这些字符结尾:</TD></TR></TBODY></TABLE>
<DIV></DIV><BR></DIV>
<BR><BR><BR><BR>

把你找到的代码保存起来慢慢领会,这是很关键的,当你对代码有所领悟后,就可以试着发帖,但一定不要心急,不要想着一次就会成功,高手也很难保证一次就OK,也需要不停地调整数据才行.

特别注意:边框是从第一层的背景层开始,一层一层往内收缩,一层压一层,视内容可以做很多的边框层,每增加一层边框相应增加一组代码.

Quote:

友情提示:学习音画最有效的捷径就是在转帖中学习,这是个非常重要的方法.

作者: 我的森林 时间: 2007-12-20 20:08

我才跟着试了一下,那边框基本就是这个吗?
或者是改一下边框的顏色之类的,那应该怎么弄呢?

作者: wzyh 时间: 2007-12-20 20:08

歌词同步代码测试代码：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>歌词同步测试代码</title>
<STYLE type=text/css>
TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; }
BODY{
FONT-SIZE: 9pt;
LINE-HEIGHT: 17px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}
#lrcoll td { color:#0080C0; cursor: default; }
#lrcbox { color:#00FF00 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#FFFF33 }
</STYLE>
</head>
<script language="JavaScript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"></span>
<center>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240">
<param name="url" value="http://www.whx.gov.cn/forumimages/200781017311743.wma">
<param name="volume" value="100">
<param name="enablecontextmenu" value="0">
<param name="enableerrordialogs" value="0">
</object>
<div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" >
<tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr>
<tr><td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr>
<tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -20px"><td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr>
<tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr>
</table>
</div>
</center>
<script language="JavaScript">
var lrc0;
var lrc1;
var min;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr = [];
this.min = [];
this.oTime = 0;
this.dts = -1;
this.dte = -1;
this.dlt = -1;
this.ddh;
this.fjh;
lrcbc.style.width = 0;
if(/\[offset\:(\-?\d+)\]/i.test(tt))
this.oTime = RegExp.$1/1000;
tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");
tt = tt.replace(/\[[^\[\]\:]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");
while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))
{
tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
var zzzt = RegExp.$1;
/^(.+\])([^\]]*)$/.exec(zzzt);
var ltxt = RegExp.$2;
var eft = RegExp.$1.slice(1,-1).split("][");
for(var ii=0; ii<eft.length; ii++)
{
var sf = eft[ii].split(":");
var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);
var sso = { t:[] , w:[] , n:ltxt }
sso.t[0] = tse-this.oTime;
this.inr[this.inr.length] = sso;
}
}
this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );
for(var ii=0; ii<this.inr.length; ii++)
{
while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))
{
this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");
var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);
this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;
}
lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>";
var fall = lrcbc.getElementsByTagName("font");
for(var wi=0; wi<fall.length; wi++)
this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
this.inr[ii].n = lrcbc.innerText;
}
for(var ii=0; ii<this.inr.length-1; ii++)
this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);
this.min.sort(function(a,b){return a-b});
min = this.min[0]/2;
this.run = function(tme)
{
if(tme<this.dts || tme>=this.dte)
{
var ii;
for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
if(ii<0) return;
this.ddh = this.inr[ii].t;
this.fjh = this.inr[ii].w;
this.dts = this.inr[ii].t[0];
this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;
lrcwt1.innerText = this.retxt(ii-7);
lrcwt2.innerText = this.retxt(ii-6);
lrcwt3.innerText = this.retxt(ii-5);
lrcwt4.innerText = this.retxt(ii-4);
lrcwt5.innerText = this.retxt(ii-3);
lrcwt6.innerText = this.retxt(ii-2);
lrcwt7.innerText = this.retxt(ii-1);
lrcfilter.innerText = this.retxt(ii-1);
lrcwt8.innerText = this.retxt(ii+1);
lrcwt9.innerText = this.retxt(ii+2);
lrcwt10.innerText = this.retxt(ii+3);
lrcwt11.innerText = this.retxt(ii+4);
lrcwt12.innerText = this.retxt(ii+5);
lrcwt13.innerText = this.retxt(ii+6);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(lrc0);
if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;
golrcoll(0);
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 100;
golrcolor(0);
}
else if(parseInt(lrcoll.style.top)!=-20)
{
clearTimeout(lrc0);
lrcoll.style.top = -20;
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 0;
}
this.dlt = ii;
}
var bbw = 0;
var ki;
for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)
bbw += this.fjh[ki];
var kt = ki-1;
var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];
var tc = tme - this.ddh[kt];
bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];
if(bbw>lrcbox.offsetWidth)
bbw = lrcbox.offsetWidth;
lrcbc.style.width = Math.round(bbw);
}
this.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr.n;
}
this.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}
this.print("欢迎光临—逍遥");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt7.innerText = "";
lrcfilter.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition);
}
if(arguments.length==0) setTimeout("lrcrun()",10);
}
function golrcoll(s)
{
lrcoll.style.top = -(s++)*2;
if(s<=9)
lrc0 = setTimeout("golrcoll("+s+")",min*10);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 110-(t++)*10;
if(t<=10)
lrc1 = setTimeout("golrcolor("+t+")",min*10);
}
window.onerror = function()
{return true;}
lrcrun();
</script>
</body>
</html>
复制粘贴到http://www.17zm.net/tools/DIY.htm运行“HTML”即可测试！
播放代码
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:26px;v-text-align:left}
</style>
<body>
<xmp id=xLyric style=display:none>
[ti:青春日记]
[ar:沙宝亮]
[al:逍遥公子欢迎你]
[00:01.25]青春日记(逍遥记录编辑)
[00:07.03]作词：谭克媛作曲：侯均
[00:14.94]编曲：孟可
[00:20.73]演唱：沙宝亮
[00:26.41]我在青春的日记里流浪
[00:31.61]迷惘的脚步一行一行
[00:37.43]走过欢喜走过忧伤
[00:42.50]走过那些莫名的惆怅
[02:19.52][00:48.10]还有那初次动情的地方
[02:24.93][00:53.42]当年龄在记忆里成长
[02:30.65][00:59.00]我的目光我的歌唱
[02:35.77][01:04.24]每一天都在这里珍藏
[02:41.48][01:09.81]我对你谈起的那些梦想
[02:46.82][01:15.48]还有我的年少轻狂
[02:52.38][01:20.87]青春的日记应该充满阳光
[02:57.79][01:26.16]照亮了每一页年轻的时光
[03:29.38][03:03.24][01:31.67]积蓄温暖积蓄力量
[03:34.73][03:08.68][01:37.09]因为我和我的梦正奔跑在路上
[03:40.10][03:14.07][01:42.45]来不及叹息来不及思量来不及回头望
[03:50.72][03:24.40][01:53.17]因为青春正长
</xmp>
</body>
</html>
<script>
window.onerror=function(){return false}
start()
function start(){
browser_ini()
timer_ini()
emv_ini()
lrc.setData(oo("xLyric").innerHTML)
lrc.write("歌曲载入中，请耐心等待...","l")
emv.play("http://www.whx.gov.cn/forumimages/200781017311743.wma")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:100;top:200;width:600;height:460>"
l+="<div style=position:absolute;left:0;top:0;width:600;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:19;top:26;width:560;height:360;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=250 height=200 style=display:none></object>"
insHtm(document.body,l)
emv.play=function(url){oo("mplayer").FileName=url;oo("mplayer").Play()}
emv.time=function(){
  var mPos=mplayer.CurrentPosition,n=lrc.i
  var n1,o,len,w,per,n0,n1
  n1=n<lrc.arr.length-1?lrc.arr[n+1].slice(0,"|")*1:9999
  if(n1<mPos){
lrc.i++
n++
if(n==0)
lrc.write(lrc.arr[n].slice("|"),"l")
if(n<lrc.arr.length-1)
lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
  }
  if(n>=0){
n0=lrc.arr[n].slice(0,"|")
n1=lrc.arr.length>n+1?lrc.arr[n+1].slice(0,"|"):4
o=oo("bxCaption_"+(n%2==0?"l":"r")+"_cover")
len=o.time!=""?o.time*1:n1-n0
per=(mPos-n0)/len
for(i=0.001;i<1;i+=0.001){
per1=lrc.getRealPos(o,i)
if(per1>=per)
   break
}
o.style.width=o.width*i
  }
}
timer.add("emv.time()")
}
function lrc_ini(){
window.lrc={}
lrc.wordPer=function(str,pos){
  return str.slice(0,pos).replace(/[^\x00-\xff]/g,"  ").length/str.replace(/[^\x00-\xff]/g,"  ").length
}
lrc.setData=function(str){
  var l,a,i,ad,n,j
  str=str.replace(/\|/g,"").replace(/\r\n/g,"\n")
  str=str.replace(/\[(\d\d)\:(\d\d)\.(\d\d)\]/g,function($0,$1,$2,$3){return ($1*60+$2*1+$3/100)+"|"})
  a=str.split("\n")
  lrc.arr=new Array()
  for(i=0;i<a.length;i++){
ad=a.split("|")
for(j=1;j<ad.length;j++){
lrc.arr.add(ad[j-1]+"|"+ad[ad.length-1])
}
  }
  lrc.i=-1
  sortIndex=0
  sortDir=1
  lrc.arr.sort(sortFoo)
}
lrc.getRealPos=function(obj,pos){
  var a=obj.path,zoom=obj.zoom,pos1=pos*zoom
  var a,i,ad
  for(i=0;i<a.length;i++){
ad=a
if(pos<=ad[0])
continue
if(pos>ad[0]&&pos<=ad[1])
pos1+=(zoom*ad[2]-zoom)*(pos-ad[0])
else{
pos1+=(zoom*ad[2]-zoom)*(ad[1]-ad[0])
}

  }
  return pos1
}
lrc.write=function(str,pos){
  var word=str,style=""
  var x,y,l,w,w1,o,a,i,ad
  if(/^\<.+\>/.test(str)){
word=str.slice(">")
style=str.slice(1).slice(0,">")
  }
  w=word.replace(/[^\x00-\xff]/g,"  ").length*13+2
  if(pos=="l"){
x=40
y=285
  }
  else{
x=520-w
y=315
  }
  l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:32;overflow:hidden'>"
  l+="<v:curve to=800,1 strokecolor=black strokeweight=3 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="<v:curve to=800,1 strokecolor=white fillcolor=white strokeweight=1 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="</div>"
  l+="<div id=bxCaption_"+pos+"_cover width="+w+" style=position:absolute;left:"+x+";top:"+y+";width:0;height:32;overflow:hidden>"
  l+="<v:curve to=800,1 strokecolor=white strokeweight=3 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="<v:curve to=800,1 strokecolor=blue fillcolor=blue strokeweight=1 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="</div>"
  odel("bxCaption_"+pos)
  odel("bxCaption_"+pos+"_cover")
  insHtm("bxEmvScreen",l)
  o=oo("bxCaption_"+pos+"_cover")
  o.time=style.get("time")
  o.path=new Array()
  len1=1
  a=style.split(";")
  for(i=0;i<a.length;i++){
if(!/(\d+):(\d+)/.test(a))
continue
if(/(\d+)-(\d+):(\d+)/.test(a)){
ad=/(\d+)-(\d+):(\d+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[2]*1)
ad[2]=ad[3]
}
else{
ad=/(\d+):(.+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[1]*1)
}
len1+=(ad[1]-ad[0])*(ad[2]-1)
o.path.add(ad)
  }
  o.zoom=1/len1
}
}
function browser_ini(){
window.isIE=navigator.userAgent.indexOf("IE")>0
window.isIE5=navigator.userAgent.indexOf("IE 5.0")>0
String.prototype.trim=function(){return this.replace(/(^[\s]*)|([\s]*$)/g,"")}
String.prototype.inc=function(s1,s2){if(s2==null){s2=","};return (s2+this+s2).indexOf(s2+s1+s2)>-1?true:false}
String.prototype._slice="".slice
String.prototype.slice=function(n1,n2){var v,b1=typeof(n1)=="number",b2=typeof(n2)=="number";if(!b1||typeof(n2)=="string"){v=eval("this._slice("+(b1?n1:this.indexOf(n1)+(n2==null?1:0)+(this.indexOf(n1)==-1?this.length:0))+(n2==null?"":(b2?n2:(this.indexOf(n2)==-1?"":","+this.indexOf(n2))))+")")}else{v=isIE5&&n1<0&&n2==null?this._slice(this.length-1):eval("this._slice(n1"+(n2==null?"":","+n2)+")")}return v}
String.prototype.get=function(str,def){if(this.inc(str,";"))return 1;var a=this.match(new RegExp("(^|;)"+str+":[^;]*"));return a==null||str==""?(def==null?"":def):a[0].replace(";","").slice(str.length+1)}
Array.prototype.add=function(key){this[this.length]=key}
window.oo=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.insHtm=function(op,html,inEnd){op=oo(op);if(isIE){op.insertAdjacentHTML(inEnd==null?"beforeend":"afterbegin",html)}else{var r=op.ownerDocument.createRange();r.setStartBefore(op);eval("op."+(inEnd==null?"appendChild":"insertBefore")+"(r.createContextualFragment(html),op.firstChild)");}}
window.odel=function(obj){if(oo(obj)!=null){oo(obj).parentNode.removeChild(oo(obj))}}
if(!isIE){
   HTMLElement.prototype.contains=function(node){if(!node)return false;do if(node==this){return true}while(node=node.parentNode){return false}}
  Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
  Event.prototype.__defineGetter__("toElement",function(){return this.relatedTarget})
}
}
function timer_ini(){
window.timer={}
timer.handle=null
timer.queue=""
timer.i=0
timer.add=function(key){if(!timer.queue.inc(key,";")){timer.queue+=key+";"}}
timer.del=function(key){timer.queue=move.queue.replace(key+";","")}
timer.inv=function(){
  window.clearTimeout(timer.handle)
  eval(timer.queue)
  timer.i++
  timer.handle=window.setTimeout("timer.inv()",10)
}
timer.inv()
}
function sortFoo(v1,v2){
var s1=v1.split("|")[sortIndex],s2=v2.split("|")[sortIndex]
if(!isNaN(s1)&&!isNaN(s2)){
  s1*=1
  s2*=1
}
return (s1==s2?0:(s1>s2?1:-1))*sortDir
}
</script>

作者: 我的森林 时间: 2007-12-20 20:10

说实在的这代码看得我眼花!!

作者: wzyh 时间: 2007-12-20 20:12 标题: 回复 #7 我的森林的帖子

网上现成的边框很多，平时注意收集，随用随取。也可自己制作。边框的制作另发。

作者: wzyh 时间: 2007-12-20 20:13 标题: 回复 #9 我的森林的帖子

先学简单的制作！

作者: 思雨1234 时间: 2007-12-20 20:18

谢谢老师!!!

太美了!
我要感动的

作者: wzyh 时间: 2007-12-20 20:18

中国人
http://www.wangziwenzhai.com/images/bg.mp3
[00:00.00]歌手：刘德华
[00:00.00]歌名：中国人
[00:00.00]逍遥记录编制
[00:18.00] 曲: 陈耀川  词: 李安修  编: 涂惠元/江港生
[01:35.00][00:25.00] 五千年的风和雨啊  藏了多少梦
[01:40.00][00:30.00] 黄色的脸黑色的眼  不变是笑容
[01:47.00][00:37.00] 八千里山川河岳  像是一首歌
[01:52.00][00:42.00] 不论你来自何方  将去向何处
[02:47.00][01:59.00][00:49.00] 一样的泪  一样的痛
[02:53.00][02:05.00][00:55.00] 曾经的苦难  我们留在心中
[02:59.00][02:11.00][01:00.00] 一样的血  一样的种
[03:05.00][02:17.00][01:07.00] 未来还有梦  我们一起开拓
[03:25.00][03:13.00][01:12.00] 手牵着手不分你我  昂首向前走
[03:31.00][03:19.00][01:18.00] 让世界知道我们都是中国人
[02:42.00]欢迎光临

作者: wzyh 时间: 2007-12-20 20:26

照葫芦画瓢,适合新手入门学习制作音画帖

很多朋友想学做音画作品，虽然做帖子的教材很多，但对初学者来说刚接触代码就感到很烦喔，也摸不着头绪，不知从何着手，为了提高大家学音画的兴趣，作了一个简单的代码帖供初学音画的朋友照葫芦画瓢，只要你把这些代码复制下去，照葫芦画瓢你就会掌握做帖子的方法与技巧，而且可以对照代码更换你自已喜欢的背景、图片，还有加文字，换音乐等，我想当你欣赏到这些漂亮的音画作品时，它一定会带给你天天好心情，祝大家开心快乐！

　

帖子标题

文字　

文字

文字

文字

加入播放器

编辑制作[落款]

[ 本帖最后由 wzyh 于 2007-12-20 20:48 编辑 ]

作者: 憧憬人生 时间: 2007-12-20 20:38

好全面的知识，我也来学习了！

作者: wzyh 时间: 2007-12-20 20:40

14楼代码：
<TABLE id=table1 style="LEFT: -170px; WIDTH: 1000px; POSITION: relative; TOP: 40px"

cellSpacing=25 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041130221616791.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=15 borderColorDark=#344228 cellPadding=0 width="100%" align=center borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/2004111418562989949.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041225173447935.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041114959024242.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 borderColorDark=#344228 cellPadding=0 width="100%" borderColorLight=#7ea063 background=http://xz1.2000y.net/348114/uploadpic/20041225173447935.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://xz1.2000y.net/348114/uploadpic/20041130223136635.jpg border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#f0ffff size=5><STRONG><EM></P><SPAN class=tpc_content>
<CENTER>
<TABLE borderColor=#6c9100 cellPadding=2 width=620 background=http://www.lmbe.seu.edu.cn/blog/user1/99/upload/200512287444.jpg border=9>
<TBODY>
<TR>
<TD>
<P align=center>　
<P align=center><FONT face=华文彩云 color=#6c9100><FONT face=华文新魏 color=#6c9100><FONT size=6><IMG src="http://www.zxtx.org/user/yiyi/yiyijch/06/b8.jpg"></FONT></P>
<P align=center><SPAN class=tpc_content><FONT size=6></FONT></SPAN></P>
<P><FONT size=6></FONT> </P>
<P align=center><FONT color=red size=6><STRONG>帖子标题</STRONG></FONT></P>
<P align=center><FONT size=6></FONT> </P>
<P align=center><A href="http://www.haotuku.com/fengjing/guonei/gugong/html/057ce.html" target=_top><FONT size=6><IMG src="http://www.haotuku.com/fengjing/guonei/gugong/057ce.jpg" align=top border=0></FONT></A><BR></P>
<P align=center><FONT color=red size=6><STRONG>文字　</STRONG></FONT></P>
<P align=center><STRONG><FONT color=#ff0000 size=6></FONT></STRONG> </P>
<P align=center><A href="http://www.webtp.cn/Article/gg/3124.htm" target=_top><FONT size=6><IMG src="http://www.webtp.cn/Article/UploadFiles/200701/2007110134025870.jpg" align=top border=0></FONT></A><BR></P>
<P align=center><FONT color=red size=6><STRONG>文字</STRONG></FONT></P>
<P align=center><FONT color=#ff0000 size=6></FONT> </P>
<P align=center><A href="http://www.webtp.cn/Article/gg/3148.htm" target=_top><FONT size=6><IMG src="http://www.webtp.cn/Article/UploadFiles/200701/2007110134051636.jpg" align=top border=0></FONT></A><BR></P>
<P align=center><FONT size=6></FONT> </P>
<P align=center><FONT color=red size=6><STRONG>文字</STRONG></FONT></P>
<P align=center><STRONG><FONT color=#ff0000 size=6></FONT></STRONG> </P>
<P align=center><A href="http://www.haotuku.com/fengjing/guonei/gugong/html/057ce.html" target=_top><FONT size=6><IMG src="http://www.haotuku.com/fengjing/guonei/gugong/057ce.jpg" align=top border=0></FONT></A><BR></P>
<P align=center><FONT size=6></FONT> </P>
<P align=center><FONT color=red size=6><STRONG>文字</STRONG></FONT></P>
<P align=center><FONT size=6><BR></FONT></P>
<P align=center>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><A href="http://www.snzjw.com/page/200501.htm" target=_top><FONT size=6><IMG src="http://www.snzjw.com/time/0805054a.jpg" align=top border=0></FONT></A><BR></TD></TR></TBODY></TABLE></P>
<P align=center><FONT color=red size=6><STRONG>加入播放器</STRONG></FONT></FONT></FONT></P>
<P align=center><FONT size=6><STRONG></STRONG></FONT> </P>
<P align=center><FONT color=red size=6>编辑制作[落款]</FONT> </P></TD></TR></TBODY></TABLE></CENTER></SPAN></FONT></EM></STRONG></TD></TR></EM></STRONG></FONT>
<P></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></TD></TR></TBODY></TABLE>

[ 本帖最后由 wzyh 于 2007-12-20 20:49 编辑 ]

作者: 憧憬人生 时间: 2007-12-20 20:40

楼主说得对，＂我想当你欣赏到这些漂亮的音画作品时，它一定会带给你天天好心情，祝大家开心快乐＂！
有时欣赏别人的作品时都会有好心情，但更多的是欣赏、崇拜和羡慕！

作者: wzyh 时间: 2007-12-20 20:44

HTML做帖教程〓〓载入音乐

Quote:

CODE: [Copy to clipboard]

A：在线播放MP3，WMA，WMV，RM...等音乐格式的代码是:

<EMBED src=http://...........mp3 width=300 height=40 type=audio/x-pn-realaudio-plugin controls="ControlPanel" loop="true" autostart="true" volume="100">

发表时，复制此代码，替换音乐地址。即可！

------------------------------------------------------------------------------------------

Quote:

CODE: [Copy to clipboard]

B：在线播放视频音乐格式的代码是:

<EMBED src=http://...............mp3 width=300 height=300 type=audio/x-pn-realaudio-plugin controls="ControlPanel" loop="true" autostart="true" volume="100">

发表时，复制此代码，替换音乐地址。即可！

------------------------------------------------------------------------------------------

Quote:

CODE: [Copy to clipboard]

C.插入背景音乐代码是:

<bgsound src=http://..........mid loop="-1">

发表时，复制此代码，替换音乐地址。即可！

------------------------------------------------------------------------------------------

作者: wzyh 时间: 2007-12-20 20:47

HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

　　通过HTML可以表现出丰富多彩的设计风格

　　　　　图片调用：<IMG SRC="文件名">
　　　　　文字格式：<FONT SIZE="+5 " COLOR="#FF0066">文字</FONT>

效果如下:

文字

通过HTML可以实现页面之间的跳转

　　　　　页面跳转：〈A HREF="文件路径/文件名"></A>

　　通过HTML可以展现多媒体的效果
声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>

你可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<table></table>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。

从代码结构来看，HTML帖子实际上就是一个去头去尾的Web页面,换句话说用HTML代码编辑的帖子

其实质就是网页编辑的一个小内容.因此要想学精通是比较困难的,可是千万别怕!!!我们都不是从事网页设计的,只想编个漂亮的帖子而已,那就简单的多了.大家只要记熟一些常用的代码,了解这些代码的含义就完全够了,我们可以采取套用(简单的复制粘贴),转贴后修改等方法来达到目的,多则半个月,少则一个星期,应该就能制作HTML代码帖子了,套用多了,自然就熟悉了,有兴趣的话可以进一步求精了.

[ 本帖最后由 wzyh 于 2007-12-20 20:50 编辑 ]

作者: wzyh 时间: 2007-12-20 20:52

论坛HTML帖子常用代码

一、文字标记

基本代码如下：

<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>

align=center　表示字体居中，可选值为居右（right）居左（left）

color=颜色代码
face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

size=字体大小，这里的最大值为6　取值越大文字就越大

1.字体变化 <font>..........</font>
a.字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大
b.指定字型 <font face="字体名称">..........</font>
c.文字颜色 <font color=#rrggbb>..........</font>
rr：表红色（red）色码
gg：表绿色（green）色码
bb：表蓝色（blue）色码
rrggbb也可用6位颜色代码数字

2.粗体字 <b>..........</b>
3 字体加粗<STRONG>..........</STRONG>和<b>标签差不多的效果
4.换行（也称回车） <br>

5.分段标记 <p>

文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.<p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

6.区隔标记 <DIV>

<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。
<DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性。。
以 <DIV align="center"> 为例：

align="center"
可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
<DIV align="center"> 的作用和居中标记 <CENTER>一样。。
注：其实常用跟<p>标签的效果差不多，但是功能比<p>相对强一些。。。
7.分隔线 <hr>
a.分隔线的粗细 <hr size=点数>
b.分隔线的宽度 <hr size=点数或百分比>
c.分隔线对齐方向 <hr align="#">
#号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
d.分隔线的颜色 <hr color=#rrggbb>
e.实心分隔线 <hr noshade>

8.居中对齐 <center>..........</center> 跟<p align="center">........</p>,<DIV align="center">........<DIV>效果基本是一样的。。。

9.文字移动标记<MARQUEE>..........</MARQUEE>

<marquee 属性＝属性值> 滚动内容 </marquee>

移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。
字符移动每步的延时:scrolldelay=# 属性值为数字， #最小为1，数值越大速度越大，反之亦然。
移动方向指令是：direction=# up向上、down向下、left向左、right向右。
移动方式:behavior 属性值为scroll：文字单向移动，side：移动到边界停止，alternate：到边界后反向移动；
align，对齐方式，其属性值为center，left，right，top, middle, bottom，分别表示居中，左对齐，右对齐，对齐上沿、中间、下沿；
bgcolor，移动字符的背景色，属性值为颜色代码，可以是rrggbb 16 进制数码，r=red，g=green， b=blue，也就是色彩中的三原色，也可是预定义色彩；
loop，移动字符的循环次数，属性值为数字，若未指定则循环不止(infinite)；
width及height，文字高度和宽度，以象素为单位，属性值为数字；
hspace字符左右留白长度，属性值为数字；
vspace字符上下留白长度，属性值为数字；
scrollamount字符的移动速度，属性值为数字，数值越大速度越大，反之亦然；

作者: wzyh 时间: 2007-12-20 20:55

如何突破7号字的大小我们需要以嵌套方式调用CSS样式来定义字体，这种方法可以让我们最大限度地设置字号大小，实现方法也很简单，只需在[size=+0]标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果：

流浪者家园

<font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">流浪者家园</font>

[ 本帖最后由 wzyh 于 2007-12-20 21:00 编辑 ]

作者: wzyh 时间: 2007-12-20 21:04

以上是部分最常用的代码,HTML代码还有很多,全都列举出来会让初学者头皮发麻的,因此不想一下子全部列举.我想在实际的运用中结合实例再详细讲解,大家的印象会更深,也更容易理解.

以前面的文字移动标记<MARQUEE>..........</MARQUEE>为例,我们用实际来讲解

在论坛默认的编辑状态下，我们可以通过UBB语法的move和fly语句让对象动起来，但功能很简单，只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果：向左、向右、向上、向下。再嵌套使用marquee语句，效果就更加丰富了。

marquee的基本语法：<marquee> ... </marquee>

说明：与大多数HTML语法元素一样，它也是成双出现的，被修饰对象就放在起始符和终止符之间。请看如下例子：

<marquee> 流浪者家园</marquee>

流浪者家园

瞧，简单吧？不过，以上例子只是使用了marquee的默认用法。我们加入相应的参数，它的移动方法就有所不同了。

参数一：behavior。移动方式。值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

例：<marquee direction=left behavior=alternate>哈哈，我来回走！</marquee>

哈哈，我来回走！

参数二：scrollamount。移动速度。值取正整数。数值越大，速度越快。例：

看，我走多快！

参数三：scrolldelay

延时。数值。例：

我走一走，停一停

参数四：bgcolor

底色。例：

看到了吧？我有底色

#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

参数五范围：width和height。就是移动的宽度与高度了。例：

<marquee width=200 height=200 bgcolor=pink direction=down>在我的地盘里移动！</marquee>

在我的地盘里移动！

参数6:外观(Layout)设置

1.对齐方式(Align) <align=#> #=top, middle, bottom

<marquee align=top width=400>我在上面移动</marquee>

<marquee align=middle width=400>我在中间移动</marquee>

<marquee align=bottom width=400>我在下面移动</marquee>

对齐上沿、中间、下沿。

我在上面移动对齐上沿我在中间移动对齐中间我在下面移动对齐下沿参数7:空白<Margins><hspace=# vspace=#> ********************************************<br>你好 <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>版主来了</marquee> 大家好！<br> ******************************************** ******************************************** 你好版主来了大家好！ ********************************************

作者: wzyh 时间: 2007-12-20 21:08

欢迎光临流浪者家园

代码：

<DIV align=center>
<DIV style="FILTER: shadow(color=#c299ff, strength=60); WIDTH: 480px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>欢迎光临流浪者家园</FONT> </DIV></DIV>

作者: wzyh 时间: 2007-12-20 21:13

欢迎光临流浪者家园

代码：

作者: wzyh 时间: 2007-12-20 21:15

流浪者家园 原来这么简单 我只要会套用

代码

<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>流浪者家园</B></FONT>

代码

<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>原来这么简单</B></FONT>

代码

<FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>我只要会套用</B></FONT>

作者: wzyh 时间: 2007-12-20 21:18

<FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>BBS.liulanghome.com</B></FONT>

BBS.liulanghome.com

<FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 50px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 500px; POSITION: relative" color=#ff00ff>你会套用吗？</FONT>

你会套用吗？

作者: wzyh 时间: 2007-12-20 21:19

<FONT style="FONT-SIZE: 20pt; FILTER: glow(color=#DAA520,strength=6); WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">不懂代码也能玩特效<BR></FONT>

不懂代码也能玩特效

<DIV style="FONT-SIZE: 50pt; FILTER: dropshadow(color=000000, offx=10, offy=10, positive=10); WIDTH:500px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">不懂代码我不怕

不懂代码我不怕

作者: wzyh 时间: 2007-12-20 21:20

想歪就歪

变化万千

作者: wzyh 时间: 2007-12-20 21:23

<DIV style="FONT-SIZE: 52pt; FILTER: dropshadow(color=000000, offx=3, offy=3, positive=1); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">大家改变颜色和数字试试</DIV>

大家改变颜色和数字试试

<FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>在来个滤镜效果的</B></FONT>
注：wave此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。

再来个滤镜效果的

作者: wzyh 时间: 2007-12-20 21:24

代码：

<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友，欢迎您的到来~~~~</B></FONT></CENTER></MARQUEE></CENTER>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友，欢迎您的到来~~~~</B></FONT></CENTER></MARQUEE></CENTER>

朋友，欢迎您的到来~~~~ 朋友，欢迎您的到来~~~~

作者: wzyh 时间: 2007-12-20 21:25

代码：

<MARQUEE width=250 height=50><FONT face=隶书 color=#ff0000 size=6>欢迎大家光临</FONT></MARQUEE>
<MARQUEE direction=right width=250 height=50><FONT face=隶书 color=#ff0000 size=6>欢迎大家光临</FONT></MARQUEE>

欢迎大家光临欢迎大家光临

作者: wzyh 时间: 2007-12-20 21:26

代码：

<TABLE cellSpacing=0 cellPadding=0 align=center background=http://bbs.680.cn/UploadFile/2005-7/200579103213764.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=red>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷 color=#336699>回复是一种美德!</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

回复是一种美德!

作者: wzyh 时间: 2007-12-20 21:29

代码:

<TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3>
<TBODY>
<TR>
<TD background=http://www.jiahuism.com/bbs/UploadFile/2004-9/200496102712413.gif>
<p align=center>
<MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="图片地址"><FONT color=#ff0000 size=6><B>流浪者家园</B><IMG alt=""src="图片地址"></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

看了这个实例大家是否意识到了什么??呵呵,原来图片和文字一样,在代码<MARQUEE中的变化是完全一样的包括属性,所不同的是文字由<FONT>...</FONT>控制,而图片则由<img>....</img>控制。本例中蓝色部分是边框的背景图，绿色部分是定义文字，而玫瑰色当然就是移动的图片了。

这些代码都可以通过改变字体,图片地址,等等,来为己所用.当我们随后学了表格的相关内容后,大家就会对这些代码一目了然,慢慢来!!!

流浪者家园

[ 本帖最后由 wzyh 于 2007-12-20 21:31 编辑 ]

作者: wzyh 时间: 2007-12-20 21:32

代码：

哎呀呀乐乐
乐要
快乐要
开心不高兴我好烦我好闷我好笨

作者: wzyh 时间: 2007-12-20 21:34

<TABLE borderColor=#000000 cellSpacing=0 cellPadding=5 bgColor=#6699ff border=1>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=1 scrollDelay=30 direction=up width=200 height=150>
<H2 align=center><FONT face=黑体 color=#ffffff>偶然</FONT></H2>
<p align=right>
<p><BR>我是天空里的一片云，<BR>偶尔投影在你的波心—— <BR>你不必讶异, <BR>更无须欢喜—— <BR>在转瞬间消灭了踪影。<BR><BR>你我相逢在黑暗的海上，<BR>你有你的，我有我的，方向；<BR>你记得也好， <BR>最好你忘掉， <BR>在这交会时互放的光亮！ </P></MARQUEE></TD></TR></TBODY></TABLE>

偶然

我是天空里的一片云，
偶尔投影在你的波心——
你不必讶异,
更无须欢喜——
在转瞬间消灭了踪影。

你我相逢在黑暗的海上，
你有你的，我有我的，方向；
你记得也好，
最好你忘掉，
在这交会时互放的光亮！

作者: wzyh 时间: 2007-12-20 21:36

<TABLE bgColor=yellow>
<TBODY>
<TR>
<TD vAlign=top width=1>
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=60>
<MARQUEE scrollAmount=4 direction=right behavior=alternate width=468>流浪者家园</MARQUEE></MARQUEE></TD>
<TD width=468>
<MARQUEE scrollAmount=1 direction=up behavior=alternate height=60>
<MARQUEE scrollAmount=4 behavior=alternate width=468><FONT color=#3333cc size=4>欢迎大家</FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

流浪者家园

欢迎大家

[ 本帖最后由 wzyh 于 2007-12-20 21:37 编辑 ]

作者: wzyh 时间: 2007-12-20 21:38

<MARQUEE direction=up width=400 bgColor=#ffffff height=300>
<MARQUEE width="100%" height=35><FONT style="FONT-SIZE: 40px; COLOR: #ff0000">让大家都会用代码</FONT></MARQUEE></MARQUEE>

让大家都会用代码

作者: wzyh 时间: 2007-12-20 21:43

图片的基本格式

1、 HTML的一般图片格式(不改变大小）

代码：<IMG SRC=图片网址>

举例：代码：
<p align=center><IMG SRC=图片地址></p>

显示效果(保持原图一样）：

补充术语解释：
代码：
<p align=center>图片网址</p>：表示图片居中。

2、有缩小和放大功能的图片格式

代码：
<IMG height=高度 src=图片网址 width=宽度 ;>

1）缩小图片

代码：
<IMG height=100 src=图片地址 ;>

显示效果：

2）放大图片

代码：
<IMG height=250 src=图片地址 ;>

显示效果：

<IMG> 的一般参数设定：

　　例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，

width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）

hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，vspace 是设定图片上下的空间，高度采用 pixels 作单位。

border=2
图片边框厚度

align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

　例如

Logo of PenPals Garden

[ 本帖最后由 wzyh 于 2007-12-20 21:44 编辑 ]

作者: wzyh 时间: 2007-12-20 21:46

代码：

作者: wzyh 时间: 2007-12-20 21:47

代码

作者: wzyh 时间: 2007-12-20 21:48

作者: wzyh 时间: 2007-12-20 21:50

作者: wzyh 时间: 2007-12-20 21:52

一.表格初步

表格是在论坛做帖的重要武器。这原因是，论坛里提供给用户操作的区域是非常有限的，用户只能在论坛程序框架好的body区域里的某个区域施展身手，不能修改body的背景色，更不能介入head的定义，因此，诸如让自己的帖子有底色、底图之类的修饰，用户只能通过表格来实现。表格是一个可自定义的容器，因而它就是我们用以实现帖子构设的利器。

把表格称作容器缘于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格，知道表格有表头、表体、单元格、行、列等等概念，它们并不难理解。而在HTML里，我们对表格的理解和运用可能会增加一些概念，但并非复杂，在学习本教程的过程中，通过领会和实践，相信是很容易掌握的。

表格不仅仅只能装载数据，它还被广泛地应用于网页的布局，这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行，现在仍然深受欢迎，它在论坛做帖也起到不可估量的作用，帖子的页面布局将因使用了表格而可以随心所欲地排版。

现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架，为了能够一目了然，各元素尚未引入它们的属性：

说明：

<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。

<tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。必须有结尾符，放在</table>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。

<tr>：tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

</td>、</tr>、</tbody>、</table>：这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。

从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。

二.表格属性设置

本节所指的表格属性设置其概念等同于在本论坛"即见即所得"编辑器的表格属性设置，在“即见即所得”模式下，通过点击位于工具栏上的图标，可以方便地设置表格的属性，只是，它没有通过代码设置来的的灵活多变。

我们先看看<table>标签里都有哪些需要设置的属性。

border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。

cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。

width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。

height：表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。

bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格<td>也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。

background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。

bordercolor：表格的边框颜色，当border值不为0时设置此值有效。取值同bgcolor。

bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

bordercolordark：暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性，强烈建议使用它来规定表格的对齐方式，尽量不要使用<p align=?>表格</p>、<div align=?>表格</div>和<center>表格</center>之类的标签来规定表格的位置，因为这么做将导致论坛添加许多废码！此外，当表格的宽度设置为100%，或者，表格的宽度设置成了占满它所在的容器的宽度，没有必要定义align属性。

表格标签的属性较多，使得本节有一定的难度，需要悉心领会并一一记住。

下面给出一个表格式样和代码，表格中有一些简单的说明。

本表格的属性设置：
边框大小：border=1
边框颜色：bordercolor=#ff0000
背景色：bgcolor=#cc9968
表格宽度：width=400
单元格间距：cellspcing=16
单元格衬距：cellpadding=8
表格的对齐方式（居中）：align=center

注：其他属性未设置。

代码：

<table border=1 cellpadding=8 cellspacing=16 bgcolor=#cc9968 bordercolor=#ff0000 width=400 align=center>
<tbody>
    <tr>
      <td>表格里的内容写在这里面</td>
    </tr>
</tbody>
</table>

三.单元格属性设置

在上一节对表格属性设置的介绍中，我们提到，有一些属于表格的属性单元格也有，比如，背景色、宽度和高度等等。本节我们学习单元格的属性设置，但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。

从表格的整体外观上看，单元格是表格的基本构成单元，一张表格至少要有一个单元格。单元格由<tr><td></td></tr>共同组成，但在一组tr里，可以拥有多组td，我们前面说过，有多少组td该表格就有多少列；同样，一张表格可以拥有多组tr，表格有多少组tr就有多少行。显而易见，构成表格最小单元的td，它的属性设置是不可忽视的。

单元格的属性设置主要体现在<td>里，除了我们在上一节学到的bgcolor等之外，还有许多属性需要掌握，令人高兴的是，很多属性的设置方法都是和<table>属性设置一样的，如width、height、bordercolor等。关于width，我们在此着重讨论一下。好的习惯是，如果是一个单元格的表格，假设我们在<table>里设置了其宽度，那么，就不必再设置<td>的宽度了，因为这是多余的，且这么设置：<td width="100%">，显然只是增加了帖子的代码量，它没有任何作用——当有了表格宽度，单元格的宽度会自动占满表格的宽度。但是，在多列表格里，<td>的宽度就应该设置，如若不设置，系统会自动按各单元格里的内容的占位情况自行分配宽度，效果是可想而知的。

单元格的bordercolor设置有些讲究，主要用于实现单像素的表格边框——要实现这种效果，要求表格的border为1，且<table>里设置了bordercolor颜色值，cellpadding和cellspacing都设置为0，然后将<td>的bordercolor颜色值设置为与<td>的背景色相一致。

单元格的最为重要的属性应该为align和valign，align规范单元格里的内容的水平对齐方式，valign则规定垂直方向的对齐方式——请特别注意：它们规定的对齐方式是单元格里面的内容，而不象表格里的align那样定义自身的位置！align取值方法和前面介绍的一样，valign的取值方法主要有：left（左对齐）、middle（居中）、top（靠顶）、bottom（靠底）等。

作者: wzyh 时间: 2007-12-20 21:54

四.表格组合

表格组合不是一个轻而易举的技术，所以，我们极少见到论坛各种精美的帖子会用到它，但表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，如果你觉得不需要，可以跳过这一节。

表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。

要顺利地实现N张表格的纵向组合，至少有三种方法：一是，令参与排列的表格都居中（即在<table>里加入align=center），上例就是；二是，不定义表格的对齐属性，即<table>里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以用论坛的表格设置功能试试）

表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格和其他元素的混排情形下更应该严格考虑。

一个好的习惯是，还是用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格通通设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。

本节从某个角度分析了表格的组合问题，它是一个主要用于排版的技术，要求计算精确，并不十分适用于论坛。只是起个抛砖引玉的作用。

五.多单元格表格

在页面布局方面，比起表格组合，多单元格更能灵活和方便地进行控制，为此，使用多单元格布局帖子是一个不错的习惯。

我们前面提过，表格代码里，有多少组<tr>...</tr>，表格就有多少行，有多少组<td>...</td>，表格就有多少列。为此，在代码里，我们将根据需要利用表格代码里的<tr><td>...</td></tr>来创建单元格。我们先来制作一个1×3即一行三列的表格。

代码：

效果：（1×3表格）

单元格一（即列1）单元格二（即列2）单元格三（即列3）

在上述示例里，只有一组<tr>，故而表格只有一行，<tr>...</tr>里有三组td，因此，表格有三列，这就是所谓的1×3表格。现在我们把代码扩展一下，即增加一组tr，请看代码和效果：

代码：

效果：（2×3表格）

单元格一（即列1）单元格二（即列2）单元格三（即列3）

单元格四（即列4）单元格五（即列5）单元格六（即列6）

我们可以定义<td>里的宽度和高度值，从而让表格以我们的预设在其所在区域进行布局，以便达到有效的排版目的。在多行多列的表格里，当某一列的第一个单元格已经定义了宽度，那么，往下各单元格的宽度将跟它一致，如果同一列的所有单元格都设置了宽度，该列的最终宽度以width值最大的那个单元格为标准，——可见，我们只需设置某列的第一个单元格的宽度即可，其他同列的<td>不必给出width属性，这样一可以节省代码,二不会出现无效设置；表格的行的高度情形也是一样：当定义了某一行头一个单元格的高度之后，该行其他单元格会自动得到相同的高度值，不必再一一设置<td>的height属性。尽量减少代码量总是一个好习惯，一来可以节省空间，二来打开速度也会得到改善——代码越多，系统处理代码的时间就越长，同时也更耗可贵的系统资源。

我们还应该注意的是，如果不设置<td>的width和height属性，表格各单元格将根据里面的内容的占位情况拓宽自己，表格给各单元格的宽度分配将由系统自动进行，这样就容易出现不合理的情况，因此，应该根据需要设置单元格的高度和宽度。

多单元格表格里一个有趣的问题是单元格合并，其概念与Excel的合并单元格是一致的，只是实现方法不同。在HTML代码里，我们用colspan属性合并左右单元格，记作：colspan=数值，“数值”即为需要合并的单元格总数；而rowspan属性则合并上下单元格，记作：rowspan=数值。

让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——

代码：

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
    <tr>
      <td align=center colspan=2>1，2单元格合并了</td>
      <td align=center>3</td>
    </tr>
    <tr>
      <td align=center>4</td>
      <td align=center>5</td>
      <td align=center>6</td>
    </tr>
</tbody>
</table>

效果：

1，2单元格合并了 3

4 5 6

下面是表格的上下单元格合并——

代码：

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center>
<tbody>
    <tr>
      <td align=center rowspan=2>1,4单元格合并了</td>
      <td align=center>2</td>
      <td align=center>3</td>
    </tr>
    <tr>
      <td align=center>5</td>
      <td align=center>6</td>
    </tr>
</tbody>
</table>

效果：

1,4单元格合并了 2 3

5 6

通过HTML代码实现单元格的合并略显抽象一些，你可以研究本示例代码和第二组代码（2×3表格）的区别并比较两组表格的样式来慢慢领会，要完全掌握这一技术，你还需要亲自做些尝试。最后顺便提一下：有些论坛可能不支持表格单元格的合并。

六.表格嵌套

论坛所有精美的帖子，几乎无一例外地都用到表格的嵌套技术，其中的原因，如前所述，论坛中给用户提供施展身手的余地十分有限，只有通过表格的修饰，帖子才能既成为独立的显示单位，又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色，兼管帖子的布局的同时还承载着表达帖子信息元素的重任。

作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。不论是哪种形式的嵌套，理论上嵌套的层可以是无穷尽的，但现实中并不会这么做，我们总是根据需要有限制地使用嵌套，不会没完没了。

表格嵌套其实也不复杂。如果你能够独立用代码做一张表格（强烈建议练出这样的本事），那么，你就可以做一个两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的<td>和</td>之间（亦即在“和”的位置）。试看以下代码和两个表格的嵌套效果：

表一

表二

从上面的表格效果上看，如果我们把文字“表一”删除掉，表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框，帖子的外框就这么搞掂了。当然，这是一个细活，你需要做反复的尝试，直到效果满意为止。或许你还需要更多层的嵌套，这就看你的想象力了——实现手段是不难的，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。

现在我们来看看多单元格表格中，在单元格是嵌入表格的示例。先看代码：

<table border=1 cellpadding=0 cellspacing=0 width=450 align=center><tbody>
<tr>
<td class=red>单元格一：无表格嵌套</td>
<td>
   <table border=1 bgcolor=#ccc1cc width="100%"><tbody>
    <tr><td class=red>我嵌套在单元格二里</td>
   </tr></tbody></table>
</td>
</tr>
</tbody></table>

以下是效果：

单元格一：无表格嵌套

我嵌套在单元格二里

上面的两个例子里，都将处于外层的表格（即外表）的宽度设置为450个像素，这是由于本页面的限制。在实际制作中，我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值，因为，你的帖子里边的内容宽度非常可能是绝对的，譬如图片有着自己固定的宽度， Flash影片也是使用绝对的width值，为了不让正文四周出现太多的空余，采用绝对值规范外表的宽度是有必要的。当然，还有一个好的做法，那就是，根本不用规定外表的宽度，而是让里边的内容自行撑宽外表，这么做至少要求我们注意两个方法的问题：一是，利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景，二是，外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙，不是用语言能够一一道明的，只有在不断地实践中才能逐一领悟和掌握。

当今用户的的显示器分辨率有两大标准：800×600和1024×768，这两种分辨率下，用户发帖后帖子可显示的区域宽度是有区别的。为此，你需要通过尝试获知具体宽度，从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子，比如超过510个像素的宽度，分辨率设置为800×600的浏览者将看不到帖子右边的内容，而太小的宽度，又可能令帖子显得小里小气，也不理想。

深入学习表格

表格还有一些重要的内容需要彻底弄懂。实际上，这些内容，前面几节我们已经接触过，但我们还需要进一步去探讨一下。

我们先来做个实验。

下面给出一条长度为450个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450个像素：

border=1
cesllpadding=15
cellspacing=8
width=450

现在，我们看到，表格的总宽度仍然是450个像素（它没有超越分隔线），因此，我们可以得出这样的结论：表格的border、cellpadding和cellspacing虽然都是占位元素，但它们不会使得表格变得更宽，换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。

第二个实验：设定表格的宽度为400个像素，然后在里面放置一个可视元素，令其宽度为450，看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。

本表格设定宽度为400个像素，但因表格里的分隔线宽度为450个像素，表格的实际显示宽度发生了变化。

现在我们看到，虽然在<table>标签里设定了width=400,但表格的总宽度并不是400个像素，而是被表格里面的那条分隔线的实际宽度（450个像素）撑宽了。你可能会觉得奇怪：为什么表格总宽度超过了450个像素呢？道理是这样：表格设置了cellpadding值为10，cellpadding区域是不可放进任何可视内容的。细心比较一下，你将发现，表格宽出的部分正是留空的部分，即表格的单元格衬距。

可见，表格里面的内容会影响到表格的宽度。实际上，如果我们设置好表格里面的内容的宽度，表格的width值是完全可以不设置的，但这不是一个好的习惯，我们通常仍然需要合理地设置表格的宽度，但必须留意一个问题：表格的总体宽度是否超过了可显示的范围。

实验三：设定一个450个像素宽度的表格，表格的边框、单元格间距和衬距都为实值，该表格有三个单元格，每个单元格设定宽度为150（加起来恰好的450个像素），看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照

width=150 width=150 width=150

上面的表格，我们设置border=1，cellpadding=10，cellspacing=6，三个单元格的宽度均为150个像素，结果是：表格的总体宽度未发生变化。由此我们得出结论：多单元格表格里，只要各单元格的宽度相加起来不超过<table>里的宽度赋值，它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。

本节通过实验的方式，从表格的宽度角度剖析了表格的一些深层特征，估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象，加上用分隔线做对照标准和实例的讲解，悉心阅读和比较后，你会很容易掌握的。

作者: wzyh 时间: 2007-12-20 21:55

框(表格)的制作

表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容.
主要讲边框做法,背景图处理方法和内容的排列要点.

一.表格的基本语法.

先看一个最简单的表格:

文字和图片

代码为:
<table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td>文字和图片</td></tr></table>

代码里的:
<table.........><tr><td>文字和图片</td></tr></table>
就组成表格的基本语法:开始标签,内容,结束标签.

这三个标记<table><tr><td>是定义表格的最重要的标记，可以说只学这三个己足够了.

先看懂这个代码:
table
这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里,
tr
描述列的元素.
td
描述格的元素.
列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内.

它的属性常用的有:
width=
表格宽度，接受绝对值（如180）及相对值（如 80%,相对可显示的宽度）
height=
表格高度，接受绝对值（如 180）
border=
表格框的厚度.
cellspacing=
表格格线离边框距离
cellpadding=
文字图片离格线的距离.
align=
表格的摆放位置（水平），可选值为： left, right,center(左，右，中心)
valign=
表格内字画等的摆放贴位置（垂直）可选值为： top, middle, bottom。(顶，中间，底部 )
background=
表格的背景图，与 bgcolor 不要同用。
bgcolor=
表格背景颜色，与background 不要同用.
bordercolor=
表格边框颜色.
bordercolorlight=
表格边框向光部分的颜色.
bordercolordark=
表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

作者: wzyh 时间: 2007-12-20 22:14

二.边框的制作.

1.颜色框:

简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.据此写一个代码:

<table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>

显示效果为:

文字和图片

这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的.

下面讲几个有关框的常识问题.

居中:将位置属性align=center放到开始标签里,这个框就居中了:

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>

显示效果为:

文字和图片

定好尺寸的框仍会被撑大:框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片:

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>
<img src=http://img.tomgame.com/news/1000009053/2005109155734143.jpg width=500>
</td></tr></table>

显示效果为:

这个原理要注意两点:
a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.
b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写width=360 height=250效果是一样的)

作者: wzyh 时间: 2007-12-20 23:12

2.素材框:

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.
边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.
要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,
在http://www.3lian.com/gif/more/03/0301.html选了几款:

用第一张做背景图:
<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td>图与文字</td></tr></table>

用第一张做背景图:

图与文字

说明:
代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,
表格宽用了相对值90%,相对可显页面的90%.

下面把第二张做背景图,将格线设为5,width="100%".
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td>图与文字</td></tr></table>

将它放到前一张里:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>

图与文字

同理再将第三张放进去(格线为2):

图与文字

再将第四张放进去(格线为6):

图与文字

放一张图片进去看看效果:

[ 本帖最后由 wzyh 于 2007-12-20 23:15 编辑 ]

作者: wzyh 时间: 2007-12-20 23:18

代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://img4.3lian.com/sucai2/bj/110.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://img4.3lian.com/sucai2/bj/124.gif"><tr><td> <img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=460>

</td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table>

注:对应的颜色就是表格对应的开始标签和收尾标签.

[ 本帖最后由 wzyh 于 2007-12-20 23:27 编辑 ]

作者: wzyh 时间: 2007-12-20 23:38

三.背景图的特点及处理方法.

这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等.

用表格做的背景图,它的显示特点是:
当表格尺寸大于背景图原始尺寸时,会复制背景图.
当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.
为了看清楚效果,选一张人物图片做背景图:

(原始尺寸为120X120)

注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了.

将它做背景图以后的效果:

代码：

代码：

作者: wzyh 时间: 2007-12-20 23:41

处理背景图的方法:

1.选择花纹素材,如:

做背景后效果:

这样的图做背景被复制后不会变样.
素材库里这种类型的素材是很多的.

2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢?

根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.
而且放进去内容的大小必须小于他,以免撑大.

如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下:

这张图的原始尺寸是 800X600 ,要把它改小.

先下载到自己电脑的图片收藏夹里,
找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了.
结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif.
下面是按55%缩小后的大小(440X330):

用它做背景图,放一张图和几个字上去，表格也设为:（ width=440 height=330)

   祝:
 思雨1234万事如意 吉祥幸福

代码
<TABLE borderColor=#00ff00 height=330 cellSpacing=6 width=440 align=center background=http://up1.googletounion.com/data/aa/71/97/7/a/07/51/20071221_41d077f4e1f6cb5000ebU70GpQyaXKUl.jpg border=9>
<TBODY>
<TR>
<TD>
<P align=center> </P>
<P align=center><IMG src="http://club.lywww.com/attachments/day_070809/16O4ow==_hGCrnDOdE1yx.jpg" width=160> ></P><BR><BR><BR><BR>
<P align=center><FONT style="FONT-SIZE: 20pt" color=#b22222><B><PRE> <FONT color=red> 祝:
思雨1234万事如意吉祥幸福</FONT></PRE></B></FONT></TD></TR></TBODY></TABLE>

[ 本帖最后由 wzyh 于 2007-12-21 00:28 编辑 ]

作者: wzyh 时间: 2007-12-21 00:30

四.图和文字放进框里的方法及注意点:

<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里.
代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高.
凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<br>,到满意为止,
也可用分段标签<p>......</P>,不够再加<br>,

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边.
再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点.
图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了:
<table ......><tr><td align=center>内容</td></tr></table>

五.做表格最容易犯的错误

<table ......><tr><td>内容</td></tr></table>

音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾</td></tr></table>,使得整个帖变形.
所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.

[ 本帖最后由 wzyh 于 2007-12-21 00:31 编辑 ]

作者: wzyh 时间: 2007-12-21 00:33

用工具做代码贴

用一个实例讲一下利用FrontPage做贴的过程

实例:

一生的守侯

盼着天快黑　在梦里和你相对
没有那流言　没有那是非
爱变得纯粹

你吻着我的嘴　眼里留下的泪
滋润了玫瑰　爱的花蕊
咸的爱情不会虚伪

等到天亮后　梦破碎
难把你找回
恨自己为何不能爱你到绝对

好想陪你到白头　一生和你永相守
害怕梦醒后　你飞走
不明白相爱的人还是要分手

好想厮守到白头　永远相偎不分手
今生来世放弃所有
不愿错过爱的人　一生守候

	下载
	编辑:

一、打开FrontPage ，选择设计模式，如图1

二、表格——插入——表格，出现下图对话框，修改大小，布局等，如图2，点确定，出现图3模式

三、重复第2步，再插入个表格，如图4设置（注意指定高度和宽度为即将插入图片的高与宽），点确定后出现两表格如图5

四、光标位于小表格中，插入——图片——来自文件（选择你要放入的图片），如图6

五、光标位于大表格中，上下添加文字，字体，字号，字色的更改如图7，添加完毕如图8

Click here to open new window
CTRL+Mouse wheel to zoom in/out

六、光标位于文字下，表格——插入——表格（设置如图9，关键是1行2列），点确定，出现图10式样

七、右键点击右边的那列——插入单元格，设置如图11，点确定出现图12

八、光标位于左边那列，点击最下端的代码，如图13，这时出现大片代码，别急，在这片代码中找到光标的位置，直接插入<*EMBED src= http://www.ts49z.com/grzy/zl/wodeyinyue/陈淑桦-一生守侯.MP3 width=191 height=30 type=audio/x-pn-realaudio-plugin controls="ControlPanel" autostart="1">，这是试听代码（使用时去＊）。

九、回到设计模式，光标点击位于右边的上列，再点击代码格式，用样在大片代码当中找到光标的位置，插入<*A href=" http://www.ts49z.com/grzy/zl/wodeyinyue/陈淑桦-一生守侯.MP3" target=_blank><*FONT face="华文行楷" color="#33CCCC" size="4" >下载<*/FONT><*/A> 这是下载链接代码（使用时去＊），如图14

十、再次回到设计模式，在右边的下列，添加文字

十一、现在你就可以点击代码模式，把那些令你头痛的代码复制粘贴到论坛，就ok啦。

作者: wzyh 时间: 2007-12-21 00:51

各式各样的播放器

提醒各位兄弟注意!!!复制代码试贴时一定要将播放器设为手动!!!否则

一旦播放器多了会产生一片嘈杂的声音,而且延缓网页打开的速度,切记!!!

几款最常用的播放器效果与代码

代码如下
<EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0">

代码如下
<EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true">

代码如下
<EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0">

代码如下
<EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0">

重要提示：

1 .WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整。
2. AUTOSTART="TRUE" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放。

作者: wzyh 时间: 2007-12-21 00:52

装饰美化你的播放器

有了基本的款式后，我们就可以根据自己的想象力，巧用HTML的表格，根据自己的图片素材，装饰美化自己的播放器啦。只要你有足够的创意，调整代码，就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。

首先我们可以为黑色播放器加上一个边缘
(中间红色的部分为原黑色播放器代码)

　

作者: wzyh 时间: 2007-12-21 00:54

代码如下
　

作者: wzyh 时间: 2007-12-21 00:55

还可以将播放器置于一个单独的表格里，并加上表格的透明特效，播放器上的花纹就是表格的底图。

　

代码如下:
<TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<p align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>

作者: wzyh 时间: 2007-12-21 00:56

还可以利用动态的GIF背景做成动态播放器

作者: wzyh 时间: 2007-12-21 01:02

一.歌曲的标记:

<EMBED SRC="音乐文件地址">

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

<EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="FALSE" volume="0">

二.说明：

1. 手动播放:
<EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="FALSE" volume="0">

2. 打开页面自动播放:

<EMBED src="歌曲地址" width=300 height=40 type=audio/mpeg loop="-1" autostart="TRUE" volume="0">

三:常用属性如下：

src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。

autostart=true
是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。

loop="true"
是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。

HIDDEN="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。

STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

VOLUME="0-100"
设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定

WIDTH="整数" 和 HEIGHT="整数"
设定控制面板的高度和宽度。

ALIGN="center"

设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom >

CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调节按钮

例一：

<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>

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

例二：

<EMBED SRC="midi.mid" loop=true width=280 height=40>

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

注明：可用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支持。

IE中的的背景音乐

代码如下：

<bgsound src="音乐文件地址" loop=#>

#=循环数

注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid mp3等格试的音乐。

发个音乐要了解那么多？呵呵，大家大可不必，想知道的可以了解一下，其实把上面代码复制过去换一下歌曲地址就ok了。。。
同时注意根据需要将手动播放"FALSE"改为自动播放"TRUE"

三.REAL MEDIA播放器
1,代码

<EMBED src="音乐文件地址" width=500 height=400 type=audio/x-pn-realaudio-plugin autostart="FALSE" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED>

2.代码:

简约型代码

<EMBED align=middle src=音乐文件地址 width=39 height=18 type=audio/x-pn-realaudio-plugin loop="infinite" volume="100" controls="PlayButton" autostart="FALSE">

[ 本帖最后由 wzyh 于 2007-12-21 21:46 编辑 ]

作者: 憧憬人生 时间: 2007-12-21 11:54

一晚上发了这么多，楼主辛苦！

作者: wzyh 时间: 2007-12-21 21:51

代码

代码:

作者: wzyh 时间: 2007-12-21 21:54

飘动的播放器代码

作者: wzyh 时间: 2007-12-21 21:56

代码:

<TABLE id=table1 border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" align=middle width=240 <p><FONT color=#00ffcc><STRONG><EMBED style="FILTER: xray(); WIDTH: 240px; HEIGHT: 25px" src=http://grm.cdn.hinet.net/xuite/e/2/d/0/14926373/blog_301366/dv/6561138/6561138.mp3 type=audio/mpeg volume="0" loop="-1" autostart="false"></EMBED></STRONG></FONT></TD></TR></TBODY></TABLE><BR><BR>

作者: wzyh 时间: 2007-12-21 21:58

代码:

<p align=center><BR><BR>
<TABLE id=table8 cellSpacing=0 cellPadding=0 border=0 WIDTH: 300px; HEIGHT: 46px? BACKGROUND-COLOR: #e9e98e?>
<TBODY>
<TR>
<TD><EMBED style="FILTER: invert alpha(opacity=60) WIDTH: 295px; HEIGHT: 46px" src=http://media2.91vc.com/Space/2006/07/03/aoyang/1518156_20060809233941.mp3 type=video/x-ms-asf volume="0" loop="1" autostart="false"><?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /><t:animateColor id=color1 attributeName = "background-color" calcMode = "paced" targetElement = "table8" values = "fuchsia;red;blue;green;darkviolet" autoReverse = "true" begin = "0;b4.click" dur = "10" repeatCount = "111"></t:animateColor></TD></TR></TBODY></TABLE></P>

作者: wzyh 时间: 2007-12-21 22:02

加入文字

代码:　

加入文字

代码:

作者: wzyh 时间: 2007-12-21 22:07

加入内容

代码:　

加入内容

　代码

作者: wzyh 时间: 2007-12-21 22:10

加入内容

加入内容

<TABLE style="WIDTH: 599px; HEIGHT: 113px" borderColor=#6495ed cellSpacing=2 cellPadding=3 width=599 background=http://www.ream.ais.ne.jp/~meme/b-panji.JPG border=8>
<TBODY>
<TR>
<TD><FONT color=#ddf1ff size=5><FONT size=3><FONT color=#000000><FONT size=4>
<CENTER>
<CENTER>加入内容</CENTER></CENTER><A title=点击图片看全图 href="http://cool.jschina.com.cn/discuz/attachments/pp1_lxyOzKa9ktFj.gif" target=_blank></A></FONT></FONT></FONT></FONT></TD></TR></TBODY></TABLE>

作者: wzyh 时间: 2007-12-21 22:15

加入内容

加入内容

作者: wzyh 时间: 2007-12-21 22:17

加入内容

作者: wzyh 时间: 2007-12-21 22:19

加入内容

作者: wzyh 时间: 2007-12-22 14:24

加入内容

作者: wzyh 时间: 2007-12-22 14:26

加入内容

作者: wzyh 时间: 2007-12-22 14:28

添加内容

作者: wzyh 时间: 2007-12-22 14:30

加入内容

代码:

代码:

<TABLE id=table1 style="LEFT: -220px; WIDTH: 970px; POSITION: relative; TOP: 80px" cellSpacing=40 align=center bgColor=#b6b4b2 background=http://www.616bbs.com/picture/xx9/bj/bj7/5.gif>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#515151 cellPadding=0 width="95%" borderColorLight=#9b9b9b background=http://www.616bbs.com/picture/xx9/bj/bj7/6.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#828282 cellPadding=0 width="100%" borderColorLight=#b4b4b4 background=http://www.616bbs.com/picture/xx9/bj/bj7/7.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#9b9b9b cellPadding=0 width="100%" borderColorLight=#e6e6e6 background=http://www.616bbs.com/picture/xx9/bj/bj7/6.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#9b9b9b cellPadding=0 width="100%" borderColorLight=#e6e6e6 background=http://www.616bbs.com/picture/xx9/bj/bj7/7.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<p align=center><FONT face=仿宋_GB2312 size=7><B>加入内容</B></FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE><BR><BR>

作者: wzyh 时间: 2007-12-22 14:31

你的内容

代码:

<TABLE id=table1 style="LEFT: -80px; WIDTH: 970px; POSITION: relative; TOP: 80px" cellSpacing=55 align=center background=http://serenity2designs.org/partybgtile.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE cellSpacing=20 borderColorDark=#8d6da3 cellPadding=3 width="100%" borderColorLight=#b6a4c4 background=http://serenity2designs.org/partystrip.jpg border=1>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://serenity2designs.org/partystrip2.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=20 cellPadding=0 width="100%" background=http://serenity2designs.org/partytile.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://serenity2designs.org/partystrip2.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=20 cellPadding=0 width="100%" background=http://serenity2designs.org/partystrip.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://serenity2designs.org/partystrip2.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://serenity2designs.org/partytile.jpg border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<DIV align=center><IMG src="http://serenity2designs.org/partytitlea.jpg"> <BR>
<DIV align=center><IMG src="http://serenity2designs.org/partybar.jpg"> <BR>
<CENTER><FONT style="FONT-SIZE: 45pt; FILTER: glow(color=#CC33AE); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
<p><B>你的内容</B></P></FONT></CENTER>
<DIV><IMG src="http://serenity2designs.org/partytitlea.jpg"></DIV></DIV></DIV>
<DIV></DIV>
<DIV></DIV></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></DIV></TD></TR></TBODY></TABLE>
<DIV></DIV><BR><BR><BR><BR><BR><BR><BR>

作者: wzyh 时间: 2007-12-22 14:34

你的内容

代码:

<TABLE style="LEFT: -80px; WIDTH: 750px; POSITION: relative; TOP: 20px" cellSpacing=50 cellPadding=0 background=http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248523348648.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=186 cellSpacing=0 cellPadding=0 width=800 background=http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248512357002.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<DIV align=center>
<TABLE height=98 cellSpacing=0 cellPadding=0 width=800 background=http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248512381354.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=430 cellSpacing=0 cellPadding=0 width=500 background=http://bbs.nxnews.net/forum/UploadFile/2005-6/20056241014857224.jpg border=0>
<TBODY>
<TR>
<TD>
<p align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://bbs.soft163.com/UploadFile/2004-8/200481713821542.swf width=490 height=190 type=application/x-shockwave-flash wmode="transparent" quality="high"> <BR><BR>
<CENTER></CENTER></TD></TR></TBODY></TABLE></DIV>
<p align=center><IMG src="http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248512384283.jpg"></P>
<p align=center>
<CENTER><FONT style="FONT-SIZE: 55pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>你的内容</B></FONT></CENTER>
<p align=center><IMG src="http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248512384283.jpg">
<CENTER>
<TABLE height=173 cellSpacing=0 cellPadding=0 width=800 background=http://bbs.nxnews.net/forum/UploadFile/2005-6/20056248512353430.jpg border=0><EMBED src=http://www.go81.net/upmusic/2005102158864.mp3 width=0 height=0 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></CENTER></B>
<CENTER></CENTER></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR><BR>

作者: wzyh 时间: 2007-12-22 14:35

加入内容

作者: wzyh 时间: 2007-12-22 14:38

加入内容

作者: wzyh 时间: 2007-12-22 14:39

《专辑名称》

代码

作者: wzyh 时间: 2007-12-22 15:06

作者: wzyh 时间: 2007-12-22 15:09

作者: wzyh 时间: 2007-12-22 15:18

有些宽幅的图片加入边框后会只显示一半,如下图所示:

加入内容

那么可以在它最外层的边框中<TABLE 后插入一段代码:

id=table1 style="LEFT: -170px; WIDTH: 1000px; POSITION: relative; TOP: 40px"

(数据可按需调整)

LEFT: -170px; 左边脱出框的距离

WIDTH: 1000px; 边框宽度

TOP: 40px" 从上面往下调整空隔

实例如下(红色部分为加入的内容):

加入内容

作者: wzyh 时间: 2007-12-22 17:41

利用Frontpage最简单的制帖方法

用Frontpage制帖方法

HTML语言是制帖用的最完善的方法,但由于代码多,指令繁琐,易错,给初学者带来很多不便.其实我们用Frontpage做也可以，这样对于不懂代码的朋友来说简直就是捷径，嘿嘿~~

那么我们就开始吧

第一步
打开Microsoft office2000中的Frontpage（office2000自带的）

先找好下面要用的素材（网络上很多）
从外向里看，最外层是

第二层

第三层

第四层

然后我们添加一个图片

好了先用这些些吧
我们把这些图片另存
打开Frontpage
一，我们先学习创建一个表格，然后是表格套表格
我们先把上面的图片另存到你的电脑上，最外层的是第一，依次类推

二，我们把套好的表格内插入您需要的图片

三，我们在这里找到您需要的代码，很简单是不是啊，嘿嘿~~~

记得把代码中的地址改为网络地址，要不然就是×了

四，把这些代码复制到你的帖子里就OK了，哈哈，其实就是那么的简单：）

http://download.pchome.net/php/dl.php?sid=4519

Office 2003 Service Pack 2 简体中文版

作者: wzyh 时间: 2007-12-22 17:43

做代码帖的小窍门告诉大家一个小窍门：做完边框和内容后，结尾部分不用自己写，在Design代码模式[也就是第一个格式 Design]与[所见即所得模式]之间来回打几次，系统就自动给你写好了。

作者: wzyh 时间: 2007-12-22 17:48 标题: 教你用电脑自带的画图程序在图片上写字

在一幅图片上写字，可以通过软件来编辑文字，也可以不用软件。这里给大家介绍一种简单而且不需要任何软件的方法，那就是利用你电脑里的画图程序直接进行编辑。

下面我们在这张图片上写文字。

附件

首先在你电脑的“开始菜单”里找到“程序”下面“附件”里的“画图”。点击“画图 ”。出现如下面的画图程序界面。然后你就可以点击左上角的“文件”---“打开”。找到你需要的图片（存在你电脑硬盘里的图片）。这样就可以在图片上编辑文字了。

附件

画图程序界面：

附件

点击[文件]，选择[打开]，在出现的窗口里找到电脑里要处理的图片，再按[打开]即可。

附件

如图点击[A]图标，进入文字编辑。

附件

1、鼠标左键在要写字的地方拖出文字输入区域；（箭号1所示）
2、在文字输入区域，点鼠标右键，选择“文字工具栏”（箭号2所示），出现工具栏（箭号3所示）设定字体、字号、粗细等。
3、如果要写漂亮的立体感的字体，请记住起始坐标的位置。（箭号4所示）。

附件

重要更正：
上图箭号4标错，坐标应该为图片最底行的7,17

1、选择透明覆盖，否则图片区域将被文字编辑时打开的框所遮盖，造成图片信息丢失。
2、选择所喜欢的字体颜色。注意要与底色不同。否则写的字显示不出。

附件

在这幅图里，我选择字体----华文新魏，字号---48，加粗，颜色---红色，

输入文字“逍遥公子”。输入完毕，鼠标在文字输入区域外点击即可。

附件

为了显示文字的重影效果再次重复上面的步骤。主要是两次拖出文字输入区域时，坐标值的变化（可往右往下各移5）。把字的颜色设为浅蓝色，其他不变。

附件

作者: wzyh 时间: 2007-12-22 19:54

这些flash有些地址失效，但大多都能用，自己选用吧

透明FLASH素材

作者: wzyh 时间: 2007-12-22 19:54

http://imgfree.21cn.com/free/flash/51.swf三只飞舞的蜻蜓、闪闪的星光
 http://imgfree.21cn.com/free/flash/52.swf黑色背景飘落的红叶
 http://imgfree.21cn.com/free/flash/53.swf雪糕降落
 http://imgfree.21cn.com/free/flash/54.swf绿色的心和I love you垂直降落

作者: wzyh 时间: 2007-12-22 20:19

结束语

首先，如果你不是一开始就打开这个结束语，那么，我非常想知道你到底学的怎么样——当你看完一个教程，如果什么都没学到，作者会非常失望的，我也是如此。教程总是有用的，我学习电脑和网络，都从教程学起，有常规书籍，有电子书籍，有HTML教程。我不敢说每一个教程都学透，但可以肯定的是，每一个教程都对我有一定的帮助。
在论坛做HTML帖子是一项颇具挑战性的创作活动。比起建立一个HTML页面而言，做帖的受限性更大，我们可以认为，做帖子与戴着脚镣跳舞没什么两样。在局限太多的环境下以完美的形式艺术地将你的思想和意志展现出来，没有一定的功底是难以完成的。为此，本教程更大程度上着重于对HTML语法的介绍和技术的剖析，读者在阅读每一节的时候应该能够感受到这一点，同时也极可能觉得教程的趣味性程度不够，有点枯燥——这是没办法的，语法和技术，开始接触时就这样，只有当你掌握了，你才领略到其中的味道。或许你需要再次阅读其中的某些内容（我常这样对待教程），你会发现还有意外的收获。
这个教程并非完美，但对于抱着做好论坛帖子这一目的的读者来说，它应该是很难找得到的，我也希望贵论坛长期在这里保留这个教程。各位如果觉得教程有需要修正或补充、增加的地方，请给我留言，我将视情况作些必要的修改。
本教程在编写过程中参考过诸多资料，因过于零散，不便一一罗列出来，在此，谨向这些资料的作者表示感谢！

附言：

受思雨1234热情邀请，再次（我在2007-7-12已在此注过册，这以前也注册过，帐号已遗忘)来到《流浪者家园》，为不负思雨的期望，结合在其他论坛发表的教程，赶做了这个不称其为教程的教程，如释重负。当然，此教程难免挂一漏万，如有疏漏，敬请批评指正。

完成了思雨的托负，我也要做我自己的事。不瞒说，我自己也有几个作测试的各种版本的论坛，也在很多论坛作贵宾和超版，这些都是我要应付的琐务。故今后不能常来贵论坛，望大家，尤其是思雨1234（至今不知是男是女，年龄大小，念在思雨的诚心和热情上才来此）多多谅解！谢谢对我的信任和抬爱！谢谢给我的诚心和热情！

谢谢大家！

[ 本帖最后由 wzyh 于 2007-12-22 22:55 编辑 ]

作者: wzyh 时间: 2007-12-22 23:26

送些在线工具给大家做帖用：

[ 本帖最后由 wzyh 于 2007-12-22 23:29 编辑 ]

作者: 憧憬人生 时间: 2007-12-24 14:18

Frontpage？没用过这个

作者: 憧憬人生 时间: 2007-12-24 14:22

谢谢wzyh的耐心指导，想学的朋友看了你发表的这些教材，相信会有所收获！有空的时候欢迎常来！

作者: liuxj 时间: 2007-12-24 23:24

感谢wzyh带来的好教材，辛苦了。

作者: wzyh 时间: 2007-12-28 11:07

<TABLE style="LEFT: 0px; WIDTH: 1000px; POSITION: relative; TOP: 80px" cellSpacing=0 cellPadding=10 width="100%">
<TBODY>
<TR>
<TD width="100%">
<DIV align=center><IFRAME marginWidth=0 marginHeight=0 src="http://n.99081.com/zhyh/ceshi/syx.txt" frameBorder=0 width=1000 scrolling=no height=2400></IFRAME></DIV></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR> [ 本帖最后由 wzyh 于 2007-12-28 11:08 编辑 ]

作者: 我的森林 时间: 2007-12-28 11:13

今天又发东西上来了!!!

作者: 风雪米 时间: 2008-5-9 00:18

好教程啊
谢谢老师!

作者: 海洋 时间: 2009-2-3 23:43

我也是看的眼花缭乱啊！

作者: 澜光萍 时间: 2009-2-28 12:58 标题: 世上最具创意的广告图

01好性感的肉PP，T字裤那里别着什么东东，手里提着什么东东，你们能猜出来这是什么呢？

02 这个东东很神奇的，居然能倒出一颗树，太牛了，这是什么呢？

03 下面这张图片有点恐怖，为什么那个瘦弱的男人光着脚丫子，左手还拿着一把匕首，边上还有一把枪，再看旁边还有一串小孩儿的骷髅头。背后还有一个探着半边脸偷窥这个男人的蒙面人，估计是女人。这又是什么东东呢？

04 这个好像很有寓意，我都不知道说什么，你们知道这是什么东东吗？

05 这个是用袜子捂住那个保安的鼻子，好像很凶的样子，朋友们说说这是什么东东？

06 这个图片挺搞笑滴，这个警察用脚丫子在查看敌情，你说他脚丫子就这么神奇啊？呵呵！大家说说这是什么东东呢？

07 这个好像是个男人在地铁里，护栏怎么是举重的杠铃啊？这又是什么东东呢？

08 这个太神奇了，很有创意，看看上面的英文，what fire burned is not just firewood
‘烈火’燃掉的不只是‘干柴’！这个又是什么东东呢？

09 这个好像很酷了，www.wmgjba.cn那个绿色的叶藤貌似伸向窗台上去了呢！这是为了什么呢？有谁知道？谁在诱惑这它伸向那边呢？

10 这个挺酷，我喜欢，好像是个土豆吧？上面居然有键盘，不过有点太明显了，我就不多说了，因为我喜欢，就弄上来了啊！(*^__^*) 嘻嘻……

赤壁外挂
 剑侠世界外挂
 完美国际私服
 热血江湖外挂
 天龙八部外挂

欢迎光临 IT家园 (http://bbs.it998.com/)

单元格一（即列1）	单元格二（即列2）	单元格三（即列3）
单元格四（即列4）	单元格五（即列5）	单元格六（即列6）

参数6:外观(Layout)设置

偶 然

附件

附件

附件

附件

附件

附件

附件

附件

附件

偶然