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

【製圖幫助】基本音畫貼的製作（四 上） 上一節講的是透明播放器，貌似複雜，其實隻要抓住三大寶：播放器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