【制图帮助】基本音画贴的制作（四 上）

【制图帮助】基本音画贴的制作（四 上） 上一节讲的是透明播放器，貌似复杂，其实只要抓住三大宝：播放器swf、第一个xml播放器设定文件、第二个曲目列表xml文件。 1.播放器swf，记住俺顺来的swf链接，一宝在手，保证你在这城里畅通无阻，没有烦恼。 2.第一个xml文件，俺有时也犯懒，就认定非黑即白这个死理，只用黑色或者白色那两款。第二宝就到手了。 3.唯一要动手的就是第二个xml文件，这涉及到播放的曲子和曲子名称，非改不行。 有了这三大宝后，如何把透明播放器放入帖子里，以及如何添加flash素材等等，就需要进一步深入探讨和研究了。 1.搭好戏台，建好背景。 演戏要先搭好台子，要给帖子添加播放器和flash素材，就得先有个场地，有个背景。 这里我们就用图片，放在background里，把帖子的背景设计出来。 代码如下： <br /><center> <table cellspacing=0 cellpadding=0 border=0><tr> <td background="http://i46.tinypic.com/wisnio.jpg" width="700px" height="420px"> <!--此处放置、替换图片，并设置宽、高--> <tr><td> </td></tr> <!--这句很关键!--> </td></tr></table></center> 效果图： 附注：html用<!--这句很关键!-->表示提示，而//则用于js和as。提示语句是不会在页面或者帖子里出现的。 有了图片作为背景之后，下面就可以添置素材了。 2.使用div和style语句谋篇布局。 给页面或者帖子添加素材，可以有很多方法。 这里介绍使用div标识符和style语句。 简单来说，div是用来谋篇布局的，style则是对所添加的音乐播放器、图片、文字、swf档等，做更细微的调整。 使用div可以任意在页面或者帖子里任何地方，随意添加任何素材。 第一个div语句，起到谋篇布局的作用，为后面添加进来的各种素材，订定了方位。 <DIV style="LEFT: 0px; POSITION: relative; TOP: 0px;"> （这中间添加代码，引入各种素材，包括播放器、flash素材、文字等。 每一个素材都由前置<div>开始，以后置</div>结束，且一次添加一个素材。） </DIV> 这里，把图片或者帖子左边起始设置为0，顶边起始也设置为0。 这一设置非常重要，这就如同，为背景定下x,y坐标，把（0，0）定在图片的左上角。 （补充的话：三年前俺发现并使用这个设置时，x,y(0,0)坐标是在图片的左下角，这次改变或许是由于wxc改版的缘故吧。） 有图为例： 横向的x坐标，从左到右，数字依次增大，这和数学里讲的x坐标相似。 而纵向的y坐标，从顶部向下，数字依次增大，这一点倒是和ps和flash相似。 由于图片的左边和顶部起始值都为0，要计算所添加的各种素材的位置时，就变得异常方便了。 3.再用div和style语句为帖子添加素材。 布好局之后，就是添加各类素材了。 A.添加透明flash播放器。 <DIV style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px;"><!--左边起始设置为0，顶边起始也设置为0--> <embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201208/27/1346120689.swf" width="210" height="180" type="application/x-shockwave-flash" menu="false" quality="high" flashvars="&config=http://space.wenxuecity.com/media/201208/27/1346120644.xml&file=http://space.wenxuecity.com/media/201209/29/1348929725.xml" wmode="transparent" border="0"></embed> </DIV> 刚才布局用的第一个div，已经为我们设定了图片的x、y（0，0）是在左上角。 添加播放器和各种素材时，我们再用div和style语句来设置播放器或者素材在帖子上的方位。 先用div来添加播放器时。 我们把播放器左边起始也设置为0，顶部起始设置为0，看看这播放器是否会和图片背景，在帖子左上角交汇在一起呢？ 在下面的效果图中，我们看到了透明播放器出现在了帖子的左上角的位置上，也就是左距为0，顶距也为0。 如何检测呢？灰常简单，IE menu 选Edit - Select All，这时播放器所在的蓝色块被highlight起来了。 童鞋们做练习的时候，可以对LEFT和TOP的数值做不同的调整，查看播放器位置的变化。 可以先只调LEFT，TOP数值不动，查看效果。赋予LEFT的数值越大，播放器离帖子或者图片左边越远。 然后不动LEFT，只调TOP数值，查看效果。赋予TOP的数值越大，播放器也越远离顶部。 做不同设置时要注意的是：播放器本身的width和height。 代码： <br /><center> <table cellspacing=0 cellpadding=0 border=0> <tr><td background="http://i46.tinypic.com/wisnio.jpg" width="700px" height="420px"> <!--这里替换图片，并设置宽、高--> <tr><td> </td></tr> <!--这句很关键!--> <DIV style="LEFT: 0px; POSITION: relative; TOP: 0px;"> <!--布局用的div，定下x,y坐标，把（0，0）定在图片的左上角。--> <DIV style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px;"><!--使用div添加播放器，左距是0，顶距也是0--> <embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201208/27/1346120689.swf" width="210" height="180" type="application/x-shockwave-flash" menu="false" quality="high" flashvars="&config=http://space.wenxuecity.com/media/201208/27/1346120644.xml&file=http://space.wenxuecity.com/media/201209/29/1348929725.xml" wmode="transparent" border="0"></embed> </DIV> </DIV> </td></tr></table></center> 注：style语句中Z-INDEX是用来表示图层关系的，后面的数值越大，表示图层越在帖子上部，图层大的素材，盖过图层小的。 因为这里使用的都是透明素材，包括flash档、播放器等等，没有相互遮盖的问题，所以表示图层数的数值都是1。也可以设置为其他数值。

所有跟帖： 

• ******收入论坛帮助“教你如何制作音乐贴子的程序。。。” -yy888- ♀ (0 bytes) () 10/10/2012 postreply 10:28:10