石頭製貼講座之二（Flash定位及模版二號）

自從第一次講座發出後，同學們反響強烈，尤其讓本班高興的是已經有同學開始使用模版一號，製作的貼子像摸像樣，非常棒！希望大家繼續努力。
也有的同學反映講座內容深奧看不懂，無奈本班水平實在有限，自我感覺已經用了最通俗易懂的語言來解釋HTML語法了。如果還是看著費勁，就拷貝模版code再換成你自己的圖片什麽的就行了，別的也不用多研究。

今天的這一講非常的重要，請同學們做好筆記哈。為什麽呢，因為不但俺的很多貼子都是用這個模版做的，還有很多的大腕的貼子也是這個版。這個模版可謂是放之四海而皆準的毛選級別的模版，就作為模版石頭二號（其實也是從師傅那裏偷來的，嘿嘿）。會用了這個版，你以後就所向無敵了。
本貼子歌曲錄音的時候話筒有問題，所以很難聽又沒有時間重錄了，希望大家把上麵貼子的音樂播放器關掉，專心學習。

貼子的構思：
首先根據歌詞內容找了一張這樣的照片，有些網友也曾經用過這個圖。一大輪金黃圓月，有神秘的河流和山川，就像夢境。正體現了歌詞裏描寫的意境。
同樣寫好歌詞，調整大小，上傳得到圖片鏈接。注意寫歌詞的時候要讓歌詞清楚一些，不然看著費勁。這個圖片的大小是750X563
圖片地址：http://i42.tinypic.com/2cr3dkp.jpg

寫好歌詞後，我想再加上以下flash來強調主題：
1） 霧蒙蒙的飄動的雲霧，進一步體現夢幻效果。
http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf
2） 天空比較單薄，加上了一顆伴月星閃亮。
http://www.leiyu668.com/flash/transparent1/starlight/014.swf
3） 河灣的流水要體現動感，我以後會單獨講水波紋的製作，但現在就靠這個flash來體現：
http://imgfree.21cn.com/free/flash/137.swf
原料都有了就可以做了，顯然把這幾個flash定位在自己想要的位置非常重要。所以就需要一些定位語句來給flash模塊定位。首先第一句開頭是這樣的：


center: 就是要把貼子放在中間位置顯示，這上次講了
table: 現在要開始一個表單來做貼子，和上次不同的是這次要嵌套表單，後麵還會再有一個表單套在這一層裏。
tr: 開始表單內的行
td: 開始行的內容
div 的概念說起來會很複雜，你隻要記住它的意思是開是一個模塊就行了，模塊是什麽呢，它可以是一個圖片，歌曲播放器，flash，或什麽別的東西。隻要定義在div和/div之內的東西都屬於這一個模塊。
這第一句的div一句非常重要，有時候會看到一些網友的貼子，flash的位置不對，不在貼子裏麵。有的貼子在IE裏看得好好的，到了firefox看就不對了。或者flash不對或者播放器位置不對，都是因為位置沒搞好。這句話就是說以下的這一個模塊都相對於最左上角的0X0這個位置而定，後邊的所有flash都要“絕對”的定位於這個模塊之內。這樣就不會出現位置差錯了。不管是瀏覽器是IE也好還是firefox,都不會位置不對。另外你還可以靠Z-INDEX來實現flash模塊的層疊顯示，這個以後再講。


你看又一個table開始了，是嵌套在前麵的表單裏的。這句話定義了整個貼子的大小，因為我的圖片像素是750X563的，所以簡單起見貼子的高度寬度也設置成同樣大小。
邊框顏色寬度我第一課已經講過了。
cellpadding是30，就是說下一個模塊（播放器）到邊框的距離是30，這個距離可以調整任意大小。



這句話定義了播放器的格式和位置
上節課講過valign和align, 所以可以看出來，播放器是被放在了下麵靠左的位置，但是會留出離邊框30像素的距離（由前麵的padding決定）。
style="FILTER: Xray" 定義的是播放器的外觀，顧名思義x射線就是把播放器顯示成黑色透明狀的，就像醫院裏照出來的X光透視片的感覺。但是這個命令在不同版本的瀏覽器裏看效果是不同的。
播放格式是mpeg，是一種比較普通的播放格式，IE和firefox都能聽得見。注意這個播放格式和第一節課的realplayer播放格式不一樣。
loop播放循環是1，就是說放一次，如果是loop="true" 就是無限循環，不停的放。
至此大table裏的小table就結束了，所以要加上/td/tr/table.



這個單元是定義第一個flash動畫：雲霧效果
在開始的style的地方，我就定位了flash的具體位置，我讓它在最左邊5個像素開始，上麵也留下5個像素的空間。為什麽呢，因為我不想讓這個雲霧飄到邊框上去，讓flash控製在貼子範圍之內。注意position是絕對absolute，不是相對，是讓本單元顯示的內容把位置定位於第二句的開始點。
flash的寬度和高度是740x500，740=圖寬度750-邊框5X2=750-10=740
500的高度是讓雲霧能覆蓋畫麵大部分地方。


這個單元是定義伴月星的flash, 我想讓這個星星顯示在貼子右上方天空處。它的位置是從上麵數負50，隻有是負數才能讓這個flash顯示在比較靠上的位置。



這個單元是定義水波紋的動畫效果。它的位置大小也是通過這四個數值來設定的（左右寬高）。變量就是這個四個數字和flash鏈接。



又一個同樣的水波紋，隻不過大一些400X400 放在河道寬的地方。
貼子快做完了，注意這些flash動畫的單元都是一個模式，隻是更換4個變量來改變他們的大小和位置，所以理論上你可以想放多少個flash都可以，多了隻不過顯示起來會慢一些。


結尾句：

對應開始第一句，這樣就結束了這個貼子。

掌握了這個模版，會自如運用了，你就差不多可以畢業了。以後的一些技巧都可以在這個基礎上加。
還是那句話，HTML語言隻是工具，貼子做得好不好取決於選圖flash是不是恰當，好看，字體做的是不是漂亮，等等。所以大家應該多在選圖作圖上下功夫。
<center><table><tr><td><div style="LEFT: 0px; POSITION: relative; TOP: 0px"><table height="563" cellspacing="0" bordercolor="#5151A2" cellpadding="30" width="750" background="http://i42.tinypic.com/2cr3dkp.jpg" border="5"><tr><td valign="bottom" align="left"><embed style="FILTER: Xray" onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1243917150.mp3" width="80" height="30" type="audio/mpeg" autostart="true" loop="1" /></embed /></td></tr></table><div style="LEFT: 5px; POSITION: absolute; TOP: 5px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf" width="740" height="500" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></embed /></div> <div style="LEFT: 550px; POSITION: absolute; TOP: -50px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://www.leiyu668.com/flash/transparent1/starlight/014.swf" width="200" height="200" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></embed /></div><div style="LEFT: 50px; POSITION: absolute; TOP: 290px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="300" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></div><div style="LEFT: 300px; POSITION: absolute; TOP: 280px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/137.swf" width="400" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></div></div></td></tr></table></center>