HTML语言音画制作基础教程

快乐一游 · 发表于 2017-12-9 13:54

HTML的英语全称为Hyper Text Markup Language，中文意思是超文本标识语言（简称为：超文本语言）。
它是计算机语言的最基础、最简单的部分。我们知道计算机最基本的识别文字（也叫语言）就是26个英文字母+10个阿拉伯数字+部分标点符号。论坛上的HTML音画制做是不借助任何软件的，所以就必须使用HTML语言（部分网站及专业论坛是不开放HTML设置的）。

初学者（包括偶）一打开HTML制式，看到的往往是一堆代码，即便不晕也是丈二和尚，往往会在这个时期放弃学习，实际上你只要摸上规律，找到窍门，它是很简单的，因为它的组成是有定律的、是固定的。
准备工作：（了解最起码的html语法）
1.<p>.....</p>
<p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，<p>标志还可以使用align属性，
它用来说明对齐方式，语法是：<p align=center></p> align可以是Left(左对齐)、 Center(居中)和Right(右对齐)三个值中的任何一个。
</p>表示标志对中的文本使用居中的对齐方式。align 表示位置
2.<br>是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行.
3.<table>表格(我们可以把他理解为桌面或一个工作面)<table>开始，</table>结束
4. <tr>说明表格的一个行，表有多少行就有多少个<tr>(简单理解为横向)
5. <td>则填充(简单的理解为纵向)
6. cellpadding=文本与表框的距离用(使用数字)
7. <font></font>它可以对输出文本的字体大小、其语法通常由 size=字体大小号码) color =颜色常量名，face=选用的字体
8. <img>标志对的src属性赋值在图片中应用
9. <hr>标志是在Html文档中加入一条水平线，它可以直接使用
10. <body></body>是Html文档的主体部分
11. <bgcolor=...>背景颜色通常使用
<body bgcolor="....">就是主体背景颜色(通常我们说的大背景颜色)
12. <body text="....">设置主体文本颜色
<body link="...."> 设置链接颜色。
13. <border="边框大小">表示边框
14. <background=> 背景通常使用为背景图片的连接地址
17. <borderColorLight=#颜色>边框相临两边的颜色及内置相对两边的颜色(左相临及对应右相临)
18. <borderColorDark=#颜色>边框相临两边的颜色及内置相对两边的颜色
19. cellSpacing=边框与内置边框的宽度
20. width=宽度 height=高

幽园馨兰 · 发表于 2020-10-18 10:32

这个教程快乐一游老师写给大家的，由于一些朋友发帖子时代码老是会出现问题，于是写了这个教程，为了方便大家找到，作了置顶处理，如果大家遇到代码问题可以给快乐一游老师留言，他常在线，会帮助解决的。

快乐一游 · 发表于 2017-12-9 13:57

HTML语言音画最基本的构成就是四个部分：
边框
图片（内容）
音乐
FLASH

下面先讲边框：

边框可以设置任意N层，你想要几层就几层，网上很协调美观的边框大部分都是专业人士制做（有些网站可以专门下载），你不要一看见一个漂亮边框就认为楼主高不可攀，实际上大部分会员用的协调美观的边框都是共享的，所以我在这里可以这样说：网上的边框是共享的，大家完全可以心安理得地去借用和复制，不用脸红（但本坛支持原创）！哈哈，我是借用别人的边框从来不脸红的人。

下面是一个七层边框的实例介绍，图片可以任意换，只要你觉着好看就行：

<TABLE cellSpacing=0 borderColorDark=#001a1a cellPadding=10 width=500 borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 borderColorDark=#001a1a cellPadding=15 width=500 borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=3 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=15 width="100%" background= 图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=3 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=15 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=10 borderColorDark=#001a1a cellPadding=0 width="100%" borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>

<TD>（此处插入主文）</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>
蓝色部分是结尾，

（我偷偷的告诉你一个小窍门：做完边框和内容后，结尾部分不用自己写，在Design格式[也就是第一个格式 Design]与HTML格式[ HTML]之间来回打几次，系统就自动给你写好了，别泄密哦）

其中：border =边框粗细 width= 边框宽度 height =边框高度 cellspacing=单元格间距 cellpadding=边框间距 borderColor=边框颜色 background =插入的背景（这几个格式你可要背过了啊，如果也和我一样记忆力不好，可以复制到你的文件夹里）

快乐一游 · 发表于 2017-12-9 13:59

下面是帖子内容的基本格式（这些您可要记住了，如记忆力不好，可复制到文件夹里）

1、贴图片格式（支持jpg、gif等格式），红色代码是图片居中命令：

<P align=center> <IMG src="内容图片地址"></P>

2、贴普通字体格式，蓝色代码为字的颜色、红色代码为字的大小（最大为了7，最小为1），其他运动字体的格式，另行讲解：

<CENTER><FONT face=宋体 color=#e4dc9b size=4>理想音画</FONT></CENTER>

3、贴FLASH格式（红色代码分别是宽度与高度）：

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

另外为大家介绍三种flash 的代码

代码1（普通的flash的插入代码）

<EMBED height=170 pluginspage=http://www.macromedia.com/go/getflashplayer src=地址 type=application/x-shockwave-flash width=330 wmode="transparent" quality="high"></EMBED>
代码2（无限制的flash的代码）

<EMBED style="LEFT: 250px; WIDTH: 400px; POSITION: absolute; TOP: 900px; HEIGHT: 300px" align=right src=地址 width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

代码3（大型flash )

<TR><TD><EMBED style="LEFT: 50px; WIDTH: 850px; POSITION: absolute; TOP: 10px; HEIGHT: 1500px" align=right src=地址 width=500 height=1500 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED></TD>

代码4（双层flash的代码）

<EMBED align=right src=地址 width=420 height=350 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=地址 width=420 height=350 type=application/octet-stream wmode="transparent" quality="high">

快乐一游 · 发表于 2017-12-9 13:59

常用特效
1。透明

style="FILTER: Alpha(opacity=100,style=2)"
2。倒影

<P align=center><FONT style="FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px"><IMG src="图片地址"><FONT id=ew style="FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px"><IMG src="图片地址"></P></FONT></FONT>
3蝴蝶飞舞

<MARQUEE behavior=alternate direction=up height=300 width=110><img src=http://bbs.mz99.com/attachments/dvbbs/2004-6/20046733350553.gif></MARQUEE><FONT color=orange><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/attachments/dvbbs/2004-6/20046733350553.gif></MARQUEE><FONT color=Fuchsia><MARQUEE behavior=alternate direction=up height=300 width=110><img src=http://bbs.mz99.com/attachments/dvbbs/2004-6/20046733350553.gif></MARQUEE><FONT color=olive><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/attachments/dvbbs/2004-6/20046733350553.gif></MARQUEE>
发贴前别忘了把自动修正的小勾除掉自动修正

图片加透明FDLASH格式：

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

发贴前别忘了把自动修正的小勾除掉自动修正

贴音乐格式（红色部分为播放器的大小，设置为0就隐藏了播放器）：

1.背景音乐（适合　mid wma等格式）
<bgsound src=音乐网址 Loop=-1>

2.音频（适合MP3 WMA RM等很多格式）
<embed src=网址 AutoStart=true Loop=true width=400 height=40>

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

说明：AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true

Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。
加入图片代码：

一、单纯的一张图片
<P align=center><IMG src=http://www.citychinese.com/bbs/showimg.asp?BoardID=48&filename=2005-1/2005123222611331.jpg></P>
二、加框有一层FLASH的图片
<P align=center>
<TABLE height=450 cellSpacing=0 cellPadding=0 width=500 background=http://www.mypcera.com/photo/hua/26/12.jpg border=2 bortercolor="000000"><TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://imgfree.21cn.com/free/flash/6.swf width=500 height=400 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
加框用两层FLASH的图片
<P align=center>
<TABLE height=450 cellSpacing=0 cellPadding=0 width=500 background=http://www.mypcera.com/photo/hua/26/12.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED align=right src=http://hlm.nease.net/swf/red/liu.swf width=500 height=250 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <BR><BR><EMBED align=right src=http://imgfree.21cn.com/free/flash/6.swf width=500 height=450 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <BR></P></TD></TR></TBODY></TABLE>

三、两个FLASH上下排列的图片：
<TABLE cellSpacing=0 cellPadding=0 width=400 height=300 background=http://www.xiangfan.org/htdocs/dvbbs/attachments/dvbbs/2004-6/200462095452492.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/fh/3/1.swf width=400 height=150 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"> <BR><BR><EMBED src=http://www.cn898.net/bg/9.swf width=400 height=150 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></P></TD></TR></TBODY></TABLE>
四、下上移动的图片们：
<center><MARQUEE scrollAmount=3 scrollDelay=150 direction=up width=450 height=500 borderColor="#000000" border="1">
<P align=center><IMG src="http://www.citychinese.com/bbs/showimg.asp?BoardID=48&filename=2005-1/2005123223220885.jpg"></P>
<P align=center><IMG src="http://www.citychinese.com/bbs/showimg.asp?BoardID=48&filename=2005-1/2005123222341671.jpg"></P>
<P align=center><IMG src="http://www.citychinese.com/bbs/showimg.asp?BoardID=48&filename=2005-1/200512322407387.jpg"></P>
</MARQUEE></center>
五、左右移动的图片们：（要有个背景哟）
<CENTER>
<MARQUEE scrollAmount=1 direction=right behavior=alternate width="100%">
<CENTER>
<TABLE cellSpacing=0 width=400 background=http://pugongyingw.51.net/image/xiantiao/d/14.gif border=0 cellpading="0">
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/bihe.jpg___2004511215822101.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/by.jpg___2004511215822766.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/htys.jpg___2004511215822890.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/hyxq.jpg___2004511215822564.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/lty.jpg___2004511215822316.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/zyh.jpg___2004511215916227.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/yannian.jpg___200451121591787.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/xbh.jpg___2004511215917981.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/mdqg.jpg___20045112203661.jpg"></P>
<P align=center><IMG src="http://bbs.esong.cn/attachments/dvbbs/2004-5/mlsx.jpg___20045112203201.jpg"></P></TD></TR></TBODY></TABLE></CENTER></MARQUEE></CENTER>
六：图片雾化效果：
(使用时必须去掉"HTML"旁边"自动修正"的钩.)
<center><TABLE cellSpacing=0 cellPadding=0 width=450 background=http://www.cn898.net/bbs/attachments/dvbbs/20044244514090780.jpg border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" width=400 background=http://xjli.zj05.com/attachments/dvbbs/2004-9/2004969311654.jpg height=320><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.nygyfs.com/tmswf/37.swf width=400 height=320 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE>

快乐一游 · 发表于 2017-12-9 14:00

七：图片倒影效果：
(使用时必须去掉"HTML"旁边"自动修正"的钩.)
<P align=center><FONT style="FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px"><IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"><FONT id=ew style="FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px"><IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"></P></FONT></FONT><BR><BR>
八：图片向左右相反的方向移动的效果：
<MARQUEE width=200 height=50><IMG src="http://www.mtxsnow.net/attachments/dvbbs/2004361972445799.gif"><IMG src="http://www.snsn.net/user/zn/attachments/dvbbs/2004-6/2004615135733903.gif"><IMG src="http://www.mtxsnow.net/attachments/dvbbs/2004361972445799.gif"></MARQUEE>
<MARQUEE direction=right width=200 height=50><IMG src="http://851.vicp.net/bbs/attachments/dvbbs/2004-4/20044895834296.gif"><IMG src="http://www.snsn.net/user/zn/attachments/dvbbs/2004-6/200461612563116.gif"><IMG src="http://851.vicp.net/bbs/attachments/dvbbs/2004-4/20044895834296.gif"></MARQUEE><BR><BR>

加入背景音乐代码：
<EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED>

所用元素：<EMBED></EMBED>
参数：
src：音乐文件的URL；
hidden：=true为不可见，=false反之；
type：指定音频类型；
LOOP：是否循环播放，注意其值置于小角双引号中；
AUTOSTART：是否自动播放，其值同上。

快乐一游 · 发表于 2017-12-9 14:01

插入单张ＦＬＡＳＨ：

<P align=center><EMBED align=center src=http://flash.crcstar.com/upload/20044161110320.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ></P>

使用举例说明步骤:
一.选边框.
现选两层的边框,代码如下:;
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table>

二.选内容.现边框有一层FLASH图片,代码如下:
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/attachments/dvbbs/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
三.把边框里加入内容这四个字删掉,换成图片代码.
为了明显,我用蓝色表示边框,用绿色表示图片内容部分:
<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD><TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/attachments/dvbbs/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.forshine.net/flash/32.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
</td></tr></tbody></table></td></tr></tbody></table>

四、实际使用可没有颜色的,就是默认黑色..
就是:<P ALIGN=CENTER>
<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<P align=center><TBODY><TR><TD><TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/attachments/dvbbs/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>
</td></tr></tbody></table></td></tr></tbody></table>
五.把你整合好的代码,复制下来,点发言框下方的HTML模式,(如果你是跟贴的话,先点贴子最上方的回复贴子,就可以看到HTML了 ),把代码复制到发言框内,点发表.

六.修饰你的代码:这些贴子的图和边框宽度,一定不合你的意,怎么办?就把边框（宽度width=480)（高度height=300)改大或小一点,(提示：论坛宽度在450以内，如果超过，会削掉右边部分）直到你满意为止,图片地址可以换上你喜欢的那个图片.怎么样,不错吧.

七.想一想,既然可以加入图片,那么是不是也可以用同样的方法加入文字?加入音乐?呵呵,对了,就都放在内容部分,在边框代码<td></td>之间,即可.动手试看看吧~~

快乐一游 · 发表于 2017-12-9 14:06

本帖最后由快乐一游于 2017-12-9 14:07 编辑

我看了中画的代码发贴的格式要求和说明，用HTML发贴都说的很清楚了，这是我在其他论坛的一个代码教程，可能对用代码发贴有帮助。HTML是一种语言工具，明白了，用代码发贴就不会弄错了。

幽园馨兰 · 发表于 2017-12-9 18:02

问好快乐一游，辛苦了

幽园馨兰 · 发表于 2017-12-9 18:03

这么精彩的基础教程，感谢分享，老师辛苦了，掌声，鲜花

幽园馨兰 · 发表于 2017-12-9 18:03

一季诗意的时光，一杯香茗，一缕飘逸的墨香，一曲悠扬的琴声，美！感谢精彩分享，遥祝安好！

账号		自动登录	找回密码
密码			中文注册

HTML语言音画制作基础教程

评分

点评