現在再來講解xml多曲列表和它的 Flash Media Player。
這次我以麗班的【馬頭琴專輯】[我從草原來]為例。一來你已搬回你自己的田裏開花了,有一定的體驗;二來,麗班已把她的代碼
登出來了:
http://web.wenxuecity.com/BBSView.php?SubID=music&MsgID=524980,省我不少碼字的工夫。
下麵就是麗麗的這段代碼,我重新整理了一下以方便閱讀:
|
上述代碼可劃分為五部分。第五部分的專輯簡介文字說明在此就忽略不講了。第一部分用深灰背景標出,這段代碼用來說明整個頁麵的風格樣式。其中,是風格樣式標簽,作用是統一整個頁麵的風格。其中,代碼td和body用來控製表格中和不在表格中的文字表現形式。font-size定義了文字大小,而line-height用於控製行距。以A開頭的幾句控製鏈接文字的風格:使其在鏈接、正在被點擊過程和點擊後都呈現不同的樣式,更主要的是消除了鏈接文字的下劃線,效果試試就知道啦。另外,在color後的顏色也可用black、blue、white限定詞等來代替顏色的16進製碼,例如可寫成color:blue的形式。
第二部分用粉色背景標出,這一塊是作者(麗麗)的主要(Flash)畫麵。它標明了Flash畫麵的尺寸和Flash畫麵的源:
http://space.wenxuecity.com/media/1263939407.swf。
第三部分用綠色背景標出,這段代碼是說明下麵的Flash Media播放器的相對/絕對位置和尺寸。這個位置是相對當前位置而言,"LEFT: -150px; POSITION: relative; TOP: -470px;"是指播放器的左邊界從當前位置向左150pixels,播放器上邊界向上470pixels。後同此理。屏幕的左上角是絕對坐標(0,0)。最終的位置還得根據自己的預覽作調整。在麗班的此例中,Flash MP3 播放器是設在了主畫麵的左下角上,也就是深綠的草地上。
第四部分緊接著第三部分下麵,即所包含部分。這也就是真正的Flash MP3播放器說明部分。它定義了播放器的顯示尺寸(Width and Height in pixels);它定義了Flash MP3播放器的源,即src="
http://space.wenxuecity.com/media/1234581326.swf"(你可以直接套用這個源,也可Mouse右擊另存至Local,然後再上傳取得一新的路徑);它還定義了此播放器所需的配置文件(Config xml file): config=http://space.wenxuecity.com/media/1234580943.xml(可Mouse右擊另存至Local)。麗班在此運用了淺色,因為背景是深綠的草地。如果你想選用其它顏色,你可修改你的Local copy。注意,你隻需修改其中COLOR有關的部分,如下所示:
其中,0x後麵的6個數字或字母是HTML色彩十六進製編碼,可參考
http://html-color-codes.info/。修改完畢後,再上傳至WXC的UPLOAD SITE,用你的QQH中得到的URL地址替換上述代碼中的CONFIG部分,即config=....xml部分。實在想偷懶,也可直接替換成別人已上傳的CONFIG xml,如我的:
http://space.wenxuecity.com/media/1260390027.xml(深藍為主色調)。
好,現在再講最關鍵的部分,即xml的歌曲列表(xml playlist)。它在上述代碼中用藍色背景標出:file=
http://space.wenxuecity.com/media/1263865013.xml(可Mouse右擊另存至Local)。這個FILE的內容如下(隻列出2首曲目,其餘忽略,可類推):
/>
/>
...
/>
/>
不難看出,每一首曲目由開始,用/>結束。在
最後,在你的LOCAL,或你的博客中測試、調整。將最滿意的結果發帖、灌水! You got it!! Good luck!!!