【製圖幫助】基本音畫貼的製作（四 下）

【製圖幫助】基本音畫貼的製作（四 下） 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