石頭製貼講座之二（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" 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" 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" 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" 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" 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>
              </div>
              <script type="text/javascript">
	function forumSelected() {
		var forumId = $("#forumId").val();
		if(forumId == null || '' == forumId) {
		  alert('請選擇論壇.');
		} else {
		  
		}
	}
</script>
<div id="postManageBar" class="post_manage_bar">
  <div class="manage_option">
    [ <a href="/blog/frontend.php?act=articlePrint&blogId=27718&date=200906&postId=6663" target="_blank">打印</a> ]
  </div>
  <div class="manage_option">
    [ <a href="//www.wenxuecity.com/bookmark/script/add.php?title=%5B%E5%8D%9A%E5%AE%A2%5D%E8%B4%B4%E5%BF%83%E5%AE%9D%E8%B4%9D%3A%E7%9F%B3%E5%A4%B4%E5%88%B6%E8%B4%B4%E8%AE%B2%E5%BA%A7%E4%B9%8B%E4%BA%8C%EF%BC%88Flash%E5%AE%9A%E4%BD%8D%E5%8F%8A%E6%A8%A1%E7%89%88%E4%BA%8C%E5%8F%B7%EF%BC%89&link=http%3A%2F%2Fzh.wenxuecity.com%2Fblog%2Ffrontend.php%3Fact%3Darticle%26blogId%3D27718%26date%3D200906%26postId%3D6663&category=blog&itemType=200906&itemID=6663" target="_blank">加入書簽</a> ]
  </div>
    <style>
    #wechatshare{background:#000;position:fixed;z-index:0;width:100%;height:100%;left:0;top:0;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6}
    #panelbox{position:relative;text-align:center;background:#fff;width:580px;height:320px;padding-top:40px;left:35%;top:25%;position:fixed;z-index:2;border-radius:15px}
    #panelbox h3{font-size:15px;color:#44753c}
    #panelbox h3 img{width:21px;vertical-align:middle;padding:0 3px}
    #panelbox center{padding-top:10px}
    #panelbox center img{width:200px}
  </style>
  <script type="text/javascript">
    function showQRCode(imgurl){
      if(!document.getElementById('qrbox')){
        var layer = document.createElement("DIV");
        layer.id="qrbox";
        
        var html="";
        html+='<div id="wechatshare" onclick="hideQRCode();">';
        html+='</div>';
        html+='<div id="panelbox">';
        html+='    <h3>打開微信<img src="/news/images/icon_qrcode.gif" />掃一掃[Scan QR Code]，打開網頁後點擊屏幕右上角分享按鈕</h3>';
        html+='    <center><img alt="右鍵另存為下載到本地" src="'+imgurl+'"></center>';
        html+='</div>';
        
        layer.innerHTML = html;
        var body = document.getElementById("wxc_blog").parentNode;
        body.appendChild(layer);
      }else{
        $("#qrbox").css("display","inline");
      }
    }
    
    function hideQRCode(){
    	$("#qrbox").css("display","none");
    }
  </script>
  <div class="manage_option">
    <a target="_self" href="#" onclick="showQRCode('https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fm.wenxuecity.com%2Fmyblog%2F27718%2F200906%2F6663.html%3Famp%3D1');return false;"><img src="/news/images/btn_sharewechat.gif" style="width:auto;height:auto"></a>
  </div>
    
    </div>        <div class="tagMore">
          <div class="tag BLK_txtc">
            <a id="" target="_blank" href="/myblog/27718/200906/6663.html">
              閱讀
            </a>
            <em>(<script language="JavaScript" type="text/javascript" src="//count.wenxuecity.com/service/count/script/do.php?clear=1&type=27718&id=6663&refresh=true"></script>)</em>
            ┆
            <a id="" href="/myblog/27718/200906/6663.html?#comments" target="_blank">評論</a>
            <em>(5)</em>
          </div>
        </div>
            
              
        <div id="comments" class="comments">
          <div class="commentsTitle">
            <div class="commentsLabel">
              <strong>評論</strong>
            </div>
          </div>
                    
                                              <div id="comment_12158" class="comment">
              <div class="comment-l">
                <img onerror="this.src='/blog/images/def_head.jpg'" src="//passport.wenxuecity.com/members/script/blogAvatar.php?uid=553330" style="width: 80px; border: 1px solid #D3D7D4;"/>
              </div>
              <div class="comment-r">
                <span class="comment_username">
                                    <a href="/myblog/28460/" target="_blank">lijiafan</a>
                                  </span>
                <span class="comment_dateline">
                  <em class="BLK_txtc">2009-06-09 15:01:26</em>
                </span>
                                                <span class="comment_reply" username="lijiafan">
                  <a href="#addComment">回複</a>
                </span>
                <span class="comment_reply">
                  <a href="//www.wenxuecity.com/qqh/index.php?act=write&cid=lijiafan">悄悄話</a>
                </span>
                                <span class="comment_msgbody" style="font-size: 16px;line-height: 24px">
                  是我沒寫清楚，我是指"希望大家把上麵貼子的音樂播放器關掉，專心學習"而已，歌好聽，不舍得關掉，所以學不了了。
                </span>
              </div>
            </div>
            <div class="BLK_j_linedot1"></div>
                        <div id="comment_11727" class="comment">
              <div class="comment-l">
                <img onerror="this.src='/blog/images/def_head.jpg'" src="//passport.wenxuecity.com/members/script/blogAvatar.php?uid=514298" style="width: 80px; border: 1px solid #D3D7D4;"/>
              </div>
              <div class="comment-r">
                <span class="comment_username">
                                    <a href="/myblog/27718/" target="_blank">貼心寶貝</a>
                                  </span>
                <span class="comment_dateline">
                  <em class="BLK_txtc">2009-06-09 08:53:41</em>
                </span>
                                                <span class="comment_reply" username="貼心寶貝">
                  <a href="#addComment">回複</a>
                </span>
                <span class="comment_reply">
                  <a href="//www.wenxuecity.com/qqh/index.php?act=write&cid=%E8%B4%B4%E5%BF%83%E5%AE%9D%E8%B4%9D">悄悄話</a>
                </span>
                                <span class="comment_msgbody" style="font-size: 16px;line-height: 24px">
                  四哥也是一位後期製作的活雷鋒啊。
<br/>jk謝石頭好了，咱們一快學吧。
<br/>回嘉凡大師：將你喜歡的音樂上載到http://web.wenxuecity.com/upload.php,然後你就會手到一個悄悄話，運用編輯助手，將歌貼到博客裏就行了。等著聽你的歌了～
                </span>
              </div>
            </div>
            <div class="BLK_j_linedot1"></div>
                        <div id="comment_9819" class="comment">
              <div class="comment-l">
                <img onerror="this.src='/blog/images/def_head.jpg'" src="//passport.wenxuecity.com/members/script/blogAvatar.php?uid=553330" style="width: 80px; border: 1px solid #D3D7D4;"/>
              </div>
              <div class="comment-r">
                <span class="comment_username">
                                    <a href="/myblog/28460/" target="_blank">lijiafan</a>
                                  </span>
                <span class="comment_dateline">
                  <em class="BLK_txtc">2009-06-08 05:25:50</em>
                </span>
                                                <span class="comment_reply" username="lijiafan">
                  <a href="#addComment">回複</a>
                </span>
                <span class="comment_reply">
                  <a href="//www.wenxuecity.com/qqh/index.php?act=write&cid=lijiafan">悄悄話</a>
                </span>
                                <span class="comment_msgbody" style="font-size: 16px;line-height: 24px">
                  播放好聽音樂，我怎麽學啊？:)))
                </span>
              </div>
            </div>
            <div class="BLK_j_linedot1"></div>
                        <div id="comment_8329" class="comment">
              <div class="comment-l">
                <img onerror="this.src='/blog/images/def_head.jpg'" src="//passport.wenxuecity.com/members/script/blogAvatar.php?uid=426722" style="width: 80px; border: 1px solid #D3D7D4;"/>
              </div>
              <div class="comment-r">
                <span class="comment_username">
                                    <a href="/myblog/10324/" target="_blank">jk</a>
                                  </span>
                <span class="comment_dateline">
                  <em class="BLK_txtc">2009-06-06 22:10:01</em>
                </span>
                                                <span class="comment_reply" username="jk">
                  <a href="#addComment">回複</a>
                </span>
                <span class="comment_reply">
                  <a href="//www.wenxuecity.com/qqh/index.php?act=write&cid=jk">悄悄話</a>
                </span>
                                <span class="comment_msgbody" style="font-size: 16px;line-height: 24px">
                  多謝石頭,多謝寶貝
                </span>
              </div>
            </div>
            <div class="BLK_j_linedot1"></div>
                        <div id="comment_8143" class="comment">
              <div class="comment-l">
                <img onerror="this.src='/blog/images/def_head.jpg'" src="//passport.wenxuecity.com/members/script/blogAvatar.php?uid=512812" style="width: 80px; border: 1px solid #D3D7D4;"/>
              </div>
              <div class="comment-r">
                <span class="comment_username">
                                    <a href="/myblog/22742/" target="_blank">fourshadow</a>
                                  </span>
                <span class="comment_dateline">
                  <em class="BLK_txtc">2009-06-06 19:28:05</em>
                </span>
                                                <span class="comment_reply" username="fourshadow">
                  <a href="#addComment">回複</a>
                </span>
                <span class="comment_reply">
                  <a href="//www.wenxuecity.com/qqh/index.php?act=write&cid=fourshadow">悄悄話</a>
                </span>
                                <span class="comment_msgbody" style="font-size: 16px;line-height: 24px">
                  石頭是活雷鋒。
                </span>
              </div>
            </div>
            <div class="BLK_j_linedot1"></div>
                        <script>
              $(".comment").each(function() {
                $(this).css("min-height", $(this).children(".comment-r").height());
              });
            </script>
            <div class="comments-paging">
                          </div>
             
           
          
                    <div id="addComment" class="addComment">
                        <div class="non-comments">
              <a href="">登錄</a>後才可評論.
            </div>
                      </div>
           
          
        </div>
        
          </div>
    <div class="BLK_containerFoot"></div>
  </div>
</div>      </div>
    </div>
    
    <img src="//pixel.wenxuecity.com/images/pixel.gif?refe=none" style="display: none" height="1" width="1"/>
    
  </div>

</body>
</html>

音樂心情