石头制贴讲座之二（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%2Fblog.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>

音乐心情