湖心寺寓的单图音画《春天的记忆》及其代码分解

网海淘沙 2015-08-31

展开全文

姹紫、嫣红，是春天的印记，
梦想、爱情，是青春的回忆。
把春天和花季永远珍藏，
我们的人生更加美丽！
—湖心寺语

一音画《春天的记忆》代码：

<DIV align=center>
<DIV style="BORDER-TOP: #671b13 10pt double; BORDER-RIGHT: #671b13 10pt double; BORDER-BOTTOM: #671b13 10pt double; BORDER-LEFT: #671b13 10pt double; WIDTH: 960px">
<TABLE id=table1 style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 960px" height=639 cellSpacing=0 cellPadding=0 background="http://userimage6.360doc.com/15/0831/00/5587937_201508310024290517423908.jpg" border=0>
<TBODY>
<TR>
<TD width=960>
<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 430px; TOP: 0px"><EMBED type=application/x-shockwave-flash height=300 width=600 src=http://www./fla/bb/hc/136.swf wmode="transparent"></DIV>
<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 520px; TOP: 460px">
<MARQUEE direction=up height=120 width=280 scrollAmount=1><FONT color=#ffffff size=4 font>
<DIV align=left>姹紫、嫣红，是春天的印记，<BR>梦想、爱情，是青春的回忆。<BR>把春天和花季永远珍藏，<BR>我们的人生更加美丽！<BR> —湖心寺语<BR></FONT></DIV></MARQUEE></DIV>
<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 200px; TOP: 480px"><EMBED type=application/x-shockwave-flash height=150 width=300 src=http://dashan./bfq/hcbfq-dg.swf FLASHVARS="bh=27&mp3=http://link.hhtjim.com/163/302294.mp3 &s=1" WMODE="transparent" QUALITY="high"></EMBED></DIV>
<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 0px; TOP: 140px; WIDTH: 960px">
<MARQUEE scrollAmount=3><IMG src="http://userimage6.360doc.com/15/0829/03/5587937_201508290331340392477650.png" width=296 height=500 ></MARQUEE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV>

二分解代码：

<TABLE id=table1 style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 960px" height=639 cellSpacing=0 cellPadding=0 background="http://userimage6.360doc.com/15/0831/00/5587937_201508310024290517423908.jpg" border=0>
<TBODY>
<TR>
<TD width=960> （这一段是绝对定位代码及背景图片）

<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 430px; TOP: 0px"><EMBED type=application/x-shockwave-flash height=300 width=600 src=http://www./fla/bb/hc/136.swf wmode="transparent"></DIV>
（这一段是添加的flash代码。如果需要再另加flash，可以复制、粘贴这段代码，改变其中的flash和有关尺寸。）

<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 520px; TOP: 460px">
<MARQUEE direction=up height=120 width=280 scrollAmount=1><FONT color=#ffffff size=4 font>
<DIV align=left>姹紫、嫣红，是春天的印记，<BR>梦想、爱情，是青春的回忆。<BR>把春天和花季永远珍藏，<BR>我们的人生更加美丽！<BR> —湖心寺语<BR></FONT></DIV></MARQUEE></DIV>（这是此音画添加的纵向移动文字代码。如果把文字直接写在背景图片上，此段代码可省略。）

<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 200px; TOP: 480px"><EMBED type=application/x-shockwave-flash height=150 width=300 src=http://dashan./bfq/hcbfq-dg.swf FLASHVARS="bh=27&mp3=http://link.hhtjim.com/163/302294.mp3 &s=1" WMODE="transparent" QUALITY="high"></EMBED></DIV>（小音乐播放器代码。可以换成其它形式的播放器。）

<DIV class=divBorderStyle style="POSITION: absolute; LEFT: 0px; TOP: 140px; WIDTH: 960px">
<MARQUEE scrollAmount=3><IMG src="http://userimage6.360doc.com/15/0829/03/5587937_201508290331340392477650.png" width=296 height=500 > </MARQUEE></DIV>（移动图片代码。如不需移动，去掉<MARQUEE scrollAmount=3>和</MARQUEE>）

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV>（表格结尾。）

代码中，一幅音画的基本元素—— 图、文、歌曲及动态装饰图都有了，这就是一幅单图音画。制作单图音画并不难，实际只有四、五段代码。试着选择不同的图片、人物、文字、歌曲及flash并设置相应的尺寸，就可以制作单图音画了。选配的文字、歌曲及flash要与主题相符，flash可以加1、2、3个，但不要太多。

三推荐一点资料：

1 音画制作：

dllc1234老师谈《如何创造音画作品？》

2 几个很方便的找歌方法：

彩云归《歌曲汇集》（欣赏歌曲同时得到歌词及MP3地址）

《彩云归歌曲网址搜索》