注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

小乐作品--细品人生

品味生活-品味茶香-品味青春-品味我们的年代

 
 
 

日志

 
 
关于我

Hello,大家好,个性名:唐少,英文名:harry Tang《哈里.唐》,别名叫:happy king,网络达人名:唐家OPPA。我是一个活泼开朗且又风趣的大男生,超赞的个性一族哦~!最骄傲的就是自己长了一张人见人爱,佛见佛跪拜的娃娃脸,我来至于周恩来的故乡--淮安。本人博友已到上限,你们加我为好友吧!

网易考拉推荐

【转载】从零开始-HTML语言音画制做  

2016-09-30 12:43:39|  分类: 【博客专辑】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML的英语全称为Hyper Text Markup Language,中文意思是超文本标识语言(简称为:超文本语言)。

    

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

  

   初学者(包括偶)一打开HTML制式,看到的往往是一堆代码,即便不晕也是丈二和尚,往往会在这个时期放弃学习,实际上你只要摸上规律,找到窍门,它是很简单的,因为它的组成是有定律的、是固定的

下面我就从最基本的、最基础东西开始,和大家共切磋

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格式[也就是第一个格式screen.width-500)this.style.width=screen.width-500;"> Design]与HTML格式[screen.width-500)this.style.width=screen.width-500;"> HTML]之间来回打几次,系统就自动给你写好了,别泄密哦)

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

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

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">

常用特效

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/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=orange><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=Fuchsia><MARQUEE behavior=alternate direction=up height=300 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=olive><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/UploadFile/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播放一次即停止。

为让大家有个直观的认识,就我自己的一个成品帖子,做一下实例演示:

(帖子地址:http://www.maoge.com.cn/bbs/dispbbs.asp?boardID=2&ID=32&page=1

1、红色部分是边框;

2、蓝色部分是内容;

3、黑色部分是结尾

4、紫色部分是音乐

<TABLE cellSpacing=15 cellPadding=0 width=570 background=http://222.186.123.12/yueming/UploadFile/2004-11/2004111720481551.jpg border=0>

<TBODY>

<TR>

<TD width=520>

<TABLE cellSpacing=10 cellPadding=0 width=520 background=http://gb.qjinfo.com/userfilepath/xiaotan/xiaotan007/cancaoparatifundo1.jpg border=0>

<TBODY>

<TR>

<TD width=520>

<TABLE cellSpacing=4 cellPadding=0 width=520 background=http://life121888.512j.com/index/GardenOfGoldstrip[1].jpg___200494123055106.jpg border=0>

<TBODY>

<TR>

<TD width=520>

<TABLE cellSpacing=10 cellPadding=0 background=http://gb.qjinfo.com/userfilepath/xiaotan/xiaotan007/cancaoparatifundo1.jpg border=0>

<TBODY>

<TR>

<TD width=520>

<TABLE cellSpacing=10 borderColorDark=#990000 cellPadding=0 width=520 borderColorLight=#cc0000 background=http://222.186.123.12/yueming/UploadFile/2004-11/2004111720481551.jpg border=1>

<TBODY>

<TR>

<TD width=520>

<TABLE cellSpacing=4 cellPadding=10 width=520 background=http://sbr0912.vicp.net/dvbbs/UploadFile/2004-12/2004123103319481.jpg border=0>

<TBODY>

<TR>

<TD width=520 background=http://gb.qjinfo.com/userfilepath/xiaotan/xiaotan007/cancaoparatifundo1.jpg></TD>

<TR>

<TD width=520>

<TABLE cellSpacing=0 cellPadding=0 width=520 background="" border=0>

<TBODY>

<TR>

<TD>

<P align=center><IMG src="http://www.616bbs.com/picture/xx9/ss2/373.gif"></P>

<P align=center><IMG src="http://www.mtvbbs.com/UploadFile/2004-12/200412618938565.gif"></P>

<P align=center><IMG src="http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0025.gif"></P>

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=http://www.mtvbbs.com/UploadFile/2004-12/2004126172826197.jpg border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=http://mtv.vicn.com/upload/2004482345353317.swf width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"></TD></TR></TBODY></TABLE>

<P align=center><IMG src="http://sbr0912.vicp.net/dvbbs/UploadFile/2004-12/2004122145722665.gif"></P>

<P align=center>

<TABLE borderColor=#d2b48c height=400 cellSpacing=3 width=540 background=http://www.mtvbbs.com/UploadFile/2004-12/2004126172728883.jpg border=1>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=http://favorites2003.vicp.net/picture/cl/2.swf width=540 height=400 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></TD></TR></TBODY></TABLE>

<P align=center><IMG src="http://sbr0912.vicp.net/dvbbs/UploadFile/2004-12/2004122145722665.gif"></P>

<P align=center></P>

<TABLE borderColor=#d2b48c height=400 cellSpacing=3 width=540 align=center background=http://www.mtvbbs.com/UploadFile/2004-12/2004126172712268.jpg border=8>

<TBODY>

<TR>

<TD align=middle width="95%"><EMBED src=http://imgfree.21cn.com/free/flash/4.swf width=540 height=400 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"></TD></TR></TBODY></TABLE>

<P align=center><IMG src="http://sbr0912.vicp.net/dvbbs/UploadFile/2004-12/2004122145722665.gif"></P>

<P align=center></P>

<TABLE borderColor=#d2b48c height=210 cellSpacing=3 width=540 align=center background=http://www.mtvbbs.com/UploadFile/2004-12/200412617271816.jpg border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=http://imgfree.21cn.com/free/flash/4.swf width=540 height=210 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"></TD></TR></TBODY></TABLE>

<P align=center><IMG src="http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0025.gif"></P>

<P align=center><IMG src="http://www.maoge.com.cn/bbs/UploadFile/2004-12/2004126164838195.gif"></P>

<P align=center><IMG src="http://www.616bbs.com/picture/xx9/ss2/373.gif"></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><EMBED src=http://mp3.baidu.com/u?u=http://www.mckxx.com/shaoxiandui/media/YWMJBPDg~wP0I-zm7wPwMuos6xxd9g3~K1sz.MP3 width=0 height=0 type=audio/mpeg Loop="true" AutoStart="true">

1、红色边框部分:

<TABLE cellSpacing=15 cellPadding=0 width=570 background=http://222.186.123.12/yueming/UploadFile/2004-11/2004111720481551.jpg border=0>

A、<TABLE  =开始  <TABLE> =结尾 (这两个是绝对格式,否则就成乱码了)

B、cellSpacing=15  =单元格间距(可以任意设置宽度)

C、cellPadding=0 =边框间距

D、width=570   =边框宽度

E、background =插入的背景格式

F、*http://222.186.123.12/yueming/UploadFile/2004-11/2004111720481551.jpg*  =背景图片

G、border=0> = 边框粗细

2、蓝色内容部分:

<TBODY>

<TR>

<TD>

<P align=center><IMG src="http://www.616bbs.com/picture/xx9/ss2/373.gif"></P>

<P align=center><IMG src="http://www.mtvbbs.com/UploadFile/2004-12/200412618938565.gif"></P>

<P align=center><IMG src="http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0025.gif"></P>

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=http://www.mtvbbs.com/UploadFile/2004-12/2004126172826197.jpg border=8>

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=http://mtv.vicn.com/upload/2004482345353317.swf width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"></TD></TR></TBODY></TABLE>

A、(过渡指令码,我们就这么叫吧)

<TBODY>

<TR>

<TD>

B、(分隔线图片、GIF图片)

<P align=center><IMG src="http://www.616bbs.com/picture/xx9/ss2/373.gif"></P>

<P align=center><IMG src="http://www.mtvbbs.com/UploadFile/2004-12/200412618938565.gif"></P>

C、背景图片

<TABLE borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=http://www.mtvbbs.com/UploadFile/2004-12/2004126172826197.jpg border=8>

D、单层FLASH

<TBODY>

<TR>

<TD align=middle width="93%"><EMBED src=http://mtv.vicn.com/upload/2004482345353317.swf width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false"

E、本单元结尾

</TD></TR></TBODY></TABLE>

3、黑色结尾部分(略,可系统自动结尾)

</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>

4、紫色音乐部分:

<EMBED src=http://mp3.baidu.com/u?u=http://www.mckxx.com/shaoxiandui/media/YWMJBPDg~wP0I-zm7wPwMuos6xxd9g3~K1sz.MP3 width=0 height=0 type=audio/mpeg Loop="true" AutoStart="true">

A、<EMBED src= =开始

B、音乐地址:

http://mp3.baidu.com/u?u=http://www.mckxx.com/shaoxiandui/media/YWMJBPDg~wP0I-zm7wPwMuos6xxd9g3~K1sz.MP3

C、播放器大小(隐藏格式)

width=0 height=0

D、自动重复播放格式

type=audio/mpeg Loop="true" AutoStart="true">

引用依森《从零开始-HTML语言音画制做》
  评论这张
 
阅读(9)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017