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

音乐心情