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

【制图帮助】基本音画贴的制作（四 下） B.继续用div和style语句添加其他素材。 一个是花絮素材： 检测flash位置的几种方法： 1.IE，Edit - Select All。 2.画面上双击。 3.使用鼠标使劲拖过（划过）画面。 <DIV style="Z-INDEX: 1; LEFT: 100px; POSITION: absolute; TOP: 0px;"> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201210/09/1349829537.swf" width="600" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed> </DIV> 此处，左距设为100，花絮起始位置就离开帖子左边100px了。 帖子的width=图片的width都是700px，花絮的width为600，600+100=700，这样花絮素材的右边就和帖子的右边重叠了。 花絮的height和图片的height大致相同（420/400），顶距我们设为0。 这样在height这部分，花絮在所占的位置上，几乎充满了画面。 另一个是雨点素材： <DIV style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px;"> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201210/09/1349829689.swf" width="700" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed> </DIV> 雨点，自然需要铺满整个画面。 我们把雨点素材的width设置为700，height设置为400，画面的宽和高则分别是700和420， 由于素材和画面的宽高大致相同，因此，把雨点素材的LEFT和TOP都设置为0后，素材就从左到右，从上到下把画面填满了。 在添加素材时，要注意： 1.先更换素材链接地址，设定素材的大小，也就是宽和高。 2.考虑素材在帖子中的位置，通过调整LEFT/TOP后面的数值，在帖子上找到理想的位置。 3.增加或者减少素材时，一定以<div></div>为一个单元进行。 4.完整代码： 假设，我们这里把播放器放在画面右下角，那么该如何计算位置呢？ 图片宽700，播放器宽210，700-210=490。播放器的LEFT数值就应该是490，也就是距离左边490px。 图片高420，播放器高180，420-180=240。播放器的TOP数值就应该是240，也就是距离顶部240px。 播放器跑到右下角了吧。 把flash素材摆放到帖子什么位置上，484很容易计算出来呢？:)) 添加好播放器、flash素材的完整代码： <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: 490px; POSITION: absolute; TOP: 240px;"><!--用div添加播放器，左距是490，顶距是240--> <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 style="Z-INDEX: 1; LEFT: 100px; POSITION: absolute; TOP: 0px;"><!--用div添加素材，左距是100，顶距是0--> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201210/09/1349829537.swf" width="600" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed> </DIV> <DIV style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px;"><!--用div添加素材，左距是0，顶距是0--> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://space.wenxuecity.com/media/201210/09/1349829689.swf" width="700" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed> </DIV> </DIV><!--布局用的后置div--> </td></tr></table></center> 效果图： 展示的代码中有一个non-breaking space符号无法正常显示，下面提供完整代码附件给童鞋们下载使用： http://space.wenxuecity.com/media/201210/10/1349854046.xml 1.建议使用notepad++打开这份xml文件。 2.另存为，文档类型选html。

所有跟帖： 

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