石頭製貼講座之一（HTML基礎及模版一號）

金班讓我搞做貼教學，簡直就是趕鴨子上架，俺那水平，咳咳，連菜鳥都算不上。每次做貼子總要請教師傅，感覺自己超級笨蛋。既然被趕上來了，就花點時間給大家介紹一下貼子該怎麽做。
看到很多大腕的精彩演唱，沒有好圖好貼子來配，也蠻可惜的。如果有個美貼，肯定是錦上添花。做貼子說難也很複雜，說簡單也不算太難。哎，羅裏羅唆的，就分幾個級別來介紹吧，大概有個十講八講的，我知道啥就說啥，老實交待。
首先今天給大家介紹一個最最簡單的模版，一個圖片加一個flash的，就那麽四句HTML語言，會做貼的高手們千萬別看，因為這是入門級別的，看了有害無益，哢哢。
以後呢我再介紹：
如何製圖
如何寫歌詞
如何“偷”code
如何做滾動歌詞
滾動圖片
多重flash定位
自己做flash動畫歌詞
歌詞歌曲同步顯示貼
。。。
天！真賣弄，感覺自己要當教授，趕緊向自己的師傅們求救先，哢哢。

這一貼很簡單，就當石頭模版一號，一個圖片加一個flash就搞定。
原料：一個圖，一個恰當的flash. 一個歌曲鏈接地址。
1）圖
可以說做貼子成功與否80%看圖選的好不好，恰當不恰當，這個很重要。網上的圖片多的不計其數，去百度圖片裏搜一下，按你的歌曲所要表現的主題去搜，然後選好圖放進自己的電腦裏。我是專門有一個圖片收藏夾，看到好的圖片就蕩下來存裏麵，做貼子時候去找。圖是不是好看和你的藝術品位很有關係哦。
圖片一般要找大圖，寬度600 到1024 的都可以。但是貼子要用600 到900之間寬度的。如果你找到的圖片是1024的大圖（一般用作壁紙），需要用軟件來resize, 去搜一下“光影魔術手”這個軟件，用它來resize和加邊框就很好。
大的貼子我一般用寬度是800的，一般的帖子用750或者700的，太寬了不好，會出現滾動條，看著不方便。
圖選好後，可以在圖片上寫上歌詞，寫歌詞有很多方法。簡單的可以用WINDOWS自帶的PAINT, POWERPOINT, 下載一些製圖軟件最好，比如PHOTOSHOP, 功能非常強大，我們平常所說的照片被PS過了，就是被這個軟件加工過的意思。也可以用其他的免費軟件，功能簡單一些，但作貼子足夠了。我現在用的是isee，搜一下又免費版。
字體很重要，如果你的電腦裏沒有裝各種好看的字體，那就寫不出花樣繁多的漂亮中文。去這個網站下載字體吧：http://font.knowsky.com/
字體庫非常浩瀚，什麽樣的漂亮字體都有，你就下載解壓成font文件，然後拷貝在C盤windows下麵的font文件夾裏就ok了！
我上麵的貼子就是這個圖：http://hiphotos.baidu.com/sttsyan/pic/item/d77cc137dbb0f0fda3cc2bd3.jpg
原圖大小是800X600
縮小後用isee軟件寫上歌詞：http://i44.tinypic.com/11j6uqo.jpg
我這個圖的最後大小是 700X525
圖要上載到網上，拿到圖片鏈接地址，最常用的是tinypic.com，非常好用。

2）FLASH
來看看這個鏈接：
http://web.wenxuecity.com/BBSView.php?SubID=ktv&MsgID=177749
我現在還在用這些FLASH, 鏈接不容易過期，調用方便，選擇很多。
去網上搜索一下，就會有很多FLASH資源。這個是自稱最大的FLASH集合網站：
http://flashline.cn/
在別的網站上找到的FLASH文件，有調用地址，但不一定有保證，鏈接很容易過期，這時候，可以把FLASH文件蕩下來，再上傳到文學城，得到文學城的FLASH鏈接地址，這樣就像上傳歌曲一樣，隻要文學城不出現問題，鏈接就能用。
FLASH用好了，錦上添花，不用也沒關係。

3）歌曲鏈接
這個大家都會，這裏是文學城上傳文件的鏈接：http://web.wenxuecity.com/upload.php
選好自己的歌曲UPLOAD上去，一個連接地址就送到你的悄悄話裏了。
有了這三個原料就可以做貼了。

首先在HTML語言裏，一個貼子就是一個table, 所有的話要擴上尖刻號“<>”才能起作用。所以第一句要定義一個table, 也就是表單。
第一句話就是定義表單的大小了。在括號裏寫上：
table height="你圖片的高度" width="你圖片的寬度"
cellspacing是表格裏單元格之間的距離;
cellpadding是表格裏單元格內的空白部分;
俗稱就是外補丁和內補丁，也就是表格裏麵的東西距離邊框的寬度距離。在本模版裏麵我都設置成0，這樣圖片到邊框之間就沒有距離了。
border="編框寬度" 一般呢用5號寬度就行了，3也行，如果作圖的時候已經有了邊筐，不想要了就用0
bordercolor="顏色代碼"，如果有邊框，你就可選擇合適顏色來定義你的邊框了，顏色代碼的選擇看這個網址：http://www.citymao.com/n4863c37.aspx
另外你還可以定義四個邊框分別有不同的顏色，那就要用這句話：
style="border-right: 顏色寬度虛實 border-top:顏色寬度虛實 border-left: 顏色寬度虛實border-bottom:顏色寬度虛實"
比如說 BORDER-RIGHT: rgb(153,153,153) 3px solid; 那就是右邊線顏色是 rgb(153,153,153) （銀灰色）；寬度是3個pixel, 實線，（虛線就是dotted) 但一般不用那麽複雜，可以不寫這句。
說到這裏第一句話就說完了，就可以把這句話用括號括起來了。貌似很複雜，用慣了就快了，別忘了咱們現在在講最簡單的貼子模版，後麵還有複雜的，準備好。

第一句範例：（上麵我的歌貼）

說完了第一句話，表單定義好了，就開始寫表單裏麵的內容了。表單裏有什麽呢，包括上麵提到的三個原料：圖片，flash，歌曲
三個原料都要是網頁鏈接形式的，比如：
圖片地址：http://i44.tinypic.com/11j6uqo.jpg
flash地址：http://imgfree.21cn.com/free/flash/92.swf
歌曲地址：http://space.wenxuecity.com/media/1241932876.mp3
首先來個尖括號，尖括號裏麵寫上：tbody
意思就是說，我現在要寫表格裏麵的內容了。
然後又一個括號，裏麵寫上: tr
tr 是什麽呢？就是table row的縮寫，就是這一塊東西我要寫什麽了。
然後又一個括號，寫上td （表中的一個單元格）以及下內容：
valign="bottom" 縱向對齊的定義句，這樣flash和歌曲播放器就能放在貼子的最下麵了。
align="center" 水平對齊的定義，這樣flash和歌曲播放器就能在中央了。
width="圖片寬度"
background="圖片地址"
注意隻能用background來定義的圖片在博客裏麵才不會被強製縮小，否則其他形式顯實的圖片到了博客裏麵會被強製減小到寬度450。
第二句話說完了，括起來。

第二句範例：（上麵我的歌貼）

第三句話定義flash
又是一個括號，裏麵寫上
embed 是用來插入多媒體的命令。
src等於"flash調用地址" 就是讓它顯示這個flash, 至於位置嘛，前麵第二句裏麵都定義好了，向下中看齊。
width="flash寬度" 在本模版為了簡單就選擇圖片寬度了，700，這樣flash就可以覆蓋整個圖片。當然你要選窄一點也可以。
height="圖片高度減去20" 在這個例子裏麵是525-20=505，為什麽短了20呢？就是留20的空間來放音樂播放器。否則歌曲播放器就掉出貼子了，不好看。
type="application/x-shockwave-flash" 定義flash類型，加上就行了
wmode="transparent" / 定義flash是透明的，能顯示背景圖片
第三句就寫完了。括起來。

第三句範例：（上麵我的歌貼）

第四句定義聲音播放器。
括號，再embed 然後 src等於號"音樂地址"
width="播放器寬度" 任意寬度，隻要不比圖片寬就行了，我這裏是270。
height="20" 上麵說了，給播放器就留了20的位置
播放器向下向中對齊，上麵定義完了。
type="audio/x-pn-realaudio-plugin" 這個是播放器的播放格式，決定使用哪個軟件播放，這裏是用real player播放，你也可以選擇其他的。我這個realplayer的格式在IE和Firefox裏麵都能聽，有的播放器在某些瀏覽器裏麵放不出來，要注意。
autostart="true" 播放自動開始，如果是false的話，看貼的時候還要按播放鍵才能放音樂。
loop="true" / 自動循環，沒完沒了的放。你也可以選次數，比如loop="1"，就是隻放一次就停。
第四句就結束了。
結束語：
HTML語言要有頭有尾才完整，比如前麵的tr，後麵就要有/tr，才能成一對。
這樣就有下麵幾個括號，裏麵分別是：
/div 結束模塊
/tr 結束
/td 結束單元
/tbody 結束表體內容
/table 結束表單
第四句和結尾句範例：（上麵我的歌貼）

最後整個貼子就寫完了，最後別忘了，我們想讓貼子放在顯示屏的中間才好看，不是靠左。所以貼子最前麵要加上尖括號，裏麵寫center
最後麵也要相應的加上尖括號斜杠center: /center

全貼代碼的範例：（抱歉這個忘了加center）

現在就可以看看貼子效果了，把這些code拷貝並粘貼到這裏:
http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
點擊“預覽“就能在下麵看到效果了。
如果覺得滿意就可以放到博客裏去欣賞，在博客裏發的時候要注意，一定要點擊那個轉換鍵，轉成HTML編輯格式，再複製到裏麵就行了。
http://blog.wenxuecity.com/help/images//blog-help-11-a.gif
這就是最簡單的一個模版了，我掰開了揉碎了講的細了點，為了讓大家有點基礎HTML語言的常識，以後再介紹複雜的就不那麽多廢話了，還是那句話，貼子好看與否關鍵是看圖片選擇的好壞。
這裏是我的“石頭模版一號“範例全部code，你可以拿回去，換上自己的圖片，flash和歌曲地址就是你的了。

還要注意下麵code裏麵有兩句onload="javascript:if(this.width>450) this.width=450" 這個是帖子發博客的時候被強行加上去的，是廢話，完全沒用，要刪掉。

<center><table height="525" width="700" cellspacing="0" cellpadding="0" border="5"  bordercolor="#949449">
<tbody><tr><td valign="bottom" align="center" width="700" background="http://i44.tinypic.com/11j6uqo.jpg">
<embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/92.swf" width=700 height=505 type="application/x-shockwave-flash" wmode="transparent">
<embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1241932876.mp3" width="270" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" loop="true" /></embed /></td></tr></tbody></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=200905&postId=32218" 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%B8%80%EF%BC%88HTML%E5%9F%BA%E7%A1%80%E5%8F%8A%E6%A8%A1%E7%89%88%E4%B8%80%E5%8F%B7%EF%BC%89&link=http%3A%2F%2Fzh.wenxuecity.com%2Fblog%2Ffrontend.php%3Fact%3Darticle%26blogId%3D27718%26date%3D200905%26postId%3D32218&category=blog&itemType=200905&itemID=32218" 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%2F200905%2F32218.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/200905/32218.html">
              閱讀
            </a>
            <em>(<script language="JavaScript" type="text/javascript" src="//count.wenxuecity.com/service/count/script/do.php?clear=1&type=27718&id=32218&refresh=true"></script>)</em>
            ┆
            <a id="" href="/myblog/27718/200905/32218.html?#comments" target="_blank">評論</a>
            <em>(0)</em>
          </div>
        </div>
            
              
        <div id="comments" class="comments">
          <div class="commentsTitle">
            <div class="commentsLabel">
              <strong>評論</strong>
            </div>
          </div>
                    
                                  <div class="non-comments">目前還沒有任何評論</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>

音樂心情