铃儿响叮铛 - 风铃妹
知足者常乐
正文
非常感谢石头弟弟制贴讲座，给了俺们初学者很大滴帮助，石头弟弟歌唱滴好帖也做滴漂亮，很欣赏和敬佩，俺就慢慢学习了。
石头制贴讲座之一（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) 但一般不用那么复杂，可以不写这句。说到这里第一句话就说完了，就可以把这句话用括号括起来了。貌似很复杂，用惯了就快了，别忘了咱们现在在讲最简单的贴子模版，后面还有复杂的，准备好。
第一句范例：（上面我的歌贴）
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0" border="5" bordercolor="#949449"*>
说完了第一句话，表单定义好了，就开始写表单里面的内容了。表单里有什么呢，包括上面提到的三个原料：图片，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。第二句话说完了，括起来。
第二句范例：（上面我的歌贴）
<*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*>
第三句话定义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 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 然后 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 结束表单
第四句和结尾句范例：（上面我的歌贴）
<*embed 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 最后面也要相应的加上尖括号斜杠center: /center 全贴代码的范例
（抱歉这个忘了加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*>
现在就可以看看贴子效果了，把这些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*>
##################################################################################################
石头制贴讲座之二（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 style="LEFT: 0px; POSITION: relative; TOP: 0px"*>
center: 就是要把贴子放在中间位置显示，这上次讲了 table: 现在要开始一个表单来做贴子，和上次不同的是这次要嵌套表单，后面还会再有一个表单套在这一层里。 tr: 开始表单内的行 td: 开始行的内容 div 的概念说起来会很复杂，你只要记住它的意思是开是一个模块就行了，模块是什么呢，它可以是一个图片，歌曲播放器，flash，或什么别的东西。只要定义在div和/div之内的东西都属于这一个模块。这第一句的div一句非常重要，有时候会看到一些网友的贴子，flash的位置不对，不在贴子里面。有的贴子在IE里看得好好的，到了firefox看就不对了。或者flash不对或者播放器位置不对，都是因为位置没搞好。这句话就是说以下的这一个模块都相对于最左上角的0X0这个位置而定，后边的所有flash都要“绝对”的定位于这个模块之内。这样就不会出现位置差错了。不管是浏览器是IE也好还是firefox,都不会位置不对。另外你还可以靠Z-INDEX来实现flash模块的层叠显示，这个以后再讲。
<*table height="563"cellspacing="0"bordercolor="#5151A2"cellpadding="30"width="750"
background="http://i42.tinypic.com/2cr3dkp.jpg"border="5"*>
你看又一个table开始了，是嵌套在前面的表单里的。这句话定义了整个贴子的大小，因为我的图片像素是750X563的，所以简单起见贴子的高度宽度也设置成同样大小。边框颜色宽度我第一课已经讲过了。 cellpadding是30，就是说下一个模块（播放器）到边框的距离是30，这个距离可以调整任意大小。
<*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*>
这句话定义了播放器的格式和位置上节课讲过valign和align, 所以可以看出来，播放器是被放在了下面靠左的位置，但是会留出离边框30像素的距离（由前面的padding决定）。 style="FILTER: Xray" 定义的是播放器的外观，顾名思义x射线就是把播放器显示成黑色透明状的，就像医院里照出来的X光透视片的感觉。但是这个命令在不同版本的浏览器里看效果是不同的。播放格式是mpeg，是一种比较普通的播放格式，IE和firefox都能听得见。注意这个播放格式和第一节课的realplayer播放格式不一样。 loop播放循环是1，就是说放一次，如果是loop="true" 就是无限循环，不停的放。至此大table里的小table就结束了，所以要加上/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*>
这个单元是定义第一个flash动画：云雾效果在开始的style的地方，我就定位了flash的具体位置，我让它在最左边5个像素开始，上面也留下5个像素的空间。为什么呢，因为我不想让这个云雾飘到边框上去，让flash控制在贴子范围之内。注意position是绝对absolute，不是相对，是让本单元显示的内容把位置定位于第二句的开始点。 flash的宽度和高度是740x500，740=图宽度750-边框5X2=750-10=740 500的高度是让云雾能覆盖画面大部分地方。
<*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*>
这个单元是定义伴月星的flash, 我想让这个星星显示在贴子右上方天空处。它的位置是从上面数负50，只有是负数才能让这个flash显示在比较靠上的位置。 <*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*> 这个单元是定义水波纹的动画效果。它的位置大小也是通过这四个数值来设定的（左右宽高）。变量就是这个四个数字和flash链接。
<*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*>
又一个同样的水波纹，只不过大一些400X400 放在河道宽的地方。贴子快做完了，注意这些flash动画的单元都是一个模式，只是更换4个变量来改变他们的大小和位置，所以理论上你可以想放多少个flash都可以，多了只不过显示起来会慢一些。 结尾句： <*/div*><*/td*><*/tr*><*/table*><*/center*> 对应开始第一句，这样就结束了这个贴子。 掌握了这个模版，会自如运用了，你就差不多可以毕业了。以后的一些技巧都可以在这个基础上加。还是那句话，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*><*/body*> <*/html*>
########################################################################################################
石头制贴讲座之三（边框底图和滚动图片/字幕）
叮呤呤，上课了。看看这个豪华贴子，貌似很复杂，其实很简单。我没有使用一个flash, 但是很有动感，所有的东西都在动，今天要给同学们介绍一个很重要的html语句：Marquee还是一句一句的讲，讲到哪里就说那里吧。
第一句：定义边框和底图
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*>
这句话定义了边框和底图。可以看到这个边框是两道浅蓝色的框框加了一条闪闪星星的带子。这不是从谁家抄袭来的，是俺的原创，大家可以发挥改成不同的颜色不同的图。两个浅蓝色边框是两个嵌套的table, 所以这句话里重复出现了两次table,tbody, tr和td。但是注意要把内补丁设置成为8不能是0，这样才能显示出来星星闪的夹层，也就是cellpadding=8星星闪是怎么出来的呢，实际上就是一个小gif图片： 图片地址是：http://i42.tinypic.com/6tedmw.gif 我只要在第一个table里面把这个图片设置成底图就行了。 background=http://i42.tinypic.com/6tedmw.gif 第二个table的底图是另外一个小图片： 图片地址是：http://www.sucai123.com/sucai/img4/639/b057.gif 第二个table覆盖了第一个table的大部分，只露一个8像素的边边，所以就能看到星星闪闪的一条带子了。另外注意这两个table, 我定义的宽度是100%， 不是实际的多少pixel, 而是一个百分数，意思就是你给我多大的宽度我就占多大的宽度好了，所以发贴时候会看着宽一些，再博客里看会窄一些，取决于网页给了贴子多大的宽度了。这个边框大家可以任意发挥，你可以用不同颜色，两个框框分别是用不同颜色也好看，可以用三个边框，四个边框，可以调节宽度，让它窄一点也行，底图可以换成不同的图片。图片可以在网上找，搜索一下网页素材，就一大堆一大堆的图。
第二句：歌曲标题来回动
<*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"*><*B*><*marquee behavior=alternate*>不想让你哭<*/marquee*><*/B*><*/FONT*><*br*><*br*>
现在就要介绍这个Marquee, 基本语法就是marquee你想要动的东西/marquee marquee有很多参数可以设定，就定了你要动的东西怎么动，往哪个方向动，来回循环还是就一次，运动的速度等等。这里我想让这个“不想让你哭”动起来，来回动，那我就设置marquee的behavior是alternate就好了。另外还有scroll, slide两种属性，scroll, 就是一圈一圈的走，slide就是像幻灯片一样走一次就完了，你可以自己尝试一下看看效果。在这句里面我还定义了字体的显示，font这个句法是来定义字体的，在它的style定义句中，我把自号定为40号，另外我加上了影子，影子的效果是灰色的, shadow(color=gray)，要注意用firefox是看不出来这个阴影效果的。宽度是50%显示，这样子就在table内部中央50%的宽度内来回走了，字体本身的颜色是和边框相同的颜色，你也可以用其它颜色。lineheight就是行间句，150%就是空行1.5，但因为“不想让你哭“就一行，所以没用。字体我定义的是华文彩云，但是如果你的电脑是英文系统有没有安装中文字体，你是看不出来空心的华文彩云字体的。
第三句：图片slide show
<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"><*img onload="javascript:i(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*>
还是这个marquee, 让这些图片动起来形成slideshow效果，注意高度要定义成图片高度，宽度是80%,也就是要显示在表格中央80%的宽度区域内。方向是向左，loop是控制它无限次的运转，scrollamount控制速度，数字越小越动的慢，可以自己调试，我这里用的是3。注意图片是提前找好的，并且改成了统一大小并上传的。图片的显示用img src就行了。
第四句： 滚动歌词
<*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:华文行楷"*>总想对你有些话要说<*br*>可不知道该说些什么<*br*>总想给你带来些欢乐<*br*>可不知道你喜欢什么<*br*>过了一夜又多了一天<*br*>时间让人变得好心烦<*br*>不知何时又才能见面<*br*>难道就这样天各一边<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>谁的眼泪随风飘向了远处<*br*>那也是我在为你祝福<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>如果爱情就是 我这场的赌注<*br*>输了你也就等于 输了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*> 接下来是滚动歌词了，还是依旧使用marquee来使文字运动起来，只不过是向上滚动显示，速度是1。行间距是两倍，对字体的定义和歌名的定义有几处不同，字号要小，阴影效果变成了闪光效果，还是灰色，但是是在字的周围包了一层灰色，firefox还是看不到的。字体定义成为华文行楷。自体本身的颜色我设成了红色：crimson 我这里有一个英文颜色名称对照表，你可以参考： http://school.21tx.com/2005/08/15/12819.html
第五句：播放器
<*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types*>
哈哈，偷懒啦，到文学城发新贴的地方去搞个自动生成的code就行了。链接：http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
第六句：下载链接和结束
<*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下载链接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*>
提供一个歌曲文件超级链接，以供听不到音乐的人下载收听。结束句就是结束第一句里面的两个table，现在table里面东西就都写完了。 整个贴字没有使用一个flash, 没有使用一个div模块，纯靠html语言来搞效果，也不错。
-----用的时候必须把*号全部去掉
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*><*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background=http://www.sucai123.com/sucai/img4/639/b057.gif*><*TBODY*><*TR*><*TD*><*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"*><*B*><*marquee behavior=alternate*>不想让你哭<*/marquee*><*/B*><*/FONT*><*br*><*br>*<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/5e6bf6f7948db403730eec2d.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/756ab04a21796a0208f7ef23.jpg"*><*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/764ee295e2a62e297af4802c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/896b68dd929e81155882dd20.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/9a4aa5af1cd967dafaed5024.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*><*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:华文行楷"*>总想对你有些话要说<*br*>可不知道该说些什么<*br*>总想给你带来些欢乐<*br*>可不知道你喜欢什么<*br*>过了一夜又多了一天<*br*>时间让人变得好心烦<*br*>不知何时又才能见面<*br*>难道就这样天各一边<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>谁的眼泪随风飘向了远处<*br*>那也是我在为你祝福<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>如果爱情就是 我这场的赌注<*br*>输了你也就等于 输了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types *><*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下载链接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*><*/body*> <*/html*>
##########################################################################################################
石头制贴讲座之四（闪字和水波纹的制作）
这首《蓝色的故乡》还是上次红卡请我一起合唱的，很好听的一首歌。但是当时伴奏有问题，怎么也搞不定，只能换别的歌。现在伴奏终于好了，但是感觉唱得很雷人，象催眠曲。大家凑活听。今天要讲的是闪字和水波纹的制作，从这堂课起，就不再讲基础知识了，开始传授高级课程。
1）闪字的制作漂亮的歌名闪闪发亮，其实是一个小的GIF图片，制作非常简单。去百度搜索一下“闪字制作“，就会有好多网站出来了，随便选一个。 http://www.shanziba.com/ 在这些网站输入你想要制作的字，选中你想要的样子，点击“生成闪字”或“效果预览”，漂亮的闪字就出来了，就这么简单。然后把做好的字存在你的电脑硬盘里面，以后再上传到tinypic等网站就可以调用了。使用的时候就是用一般的贴图语句就好了，比如〈img〉等。这就是我做好的标题：
2）水波纹的制作这种歌唱自然景色的歌曲很适合来个带水面的景色图片，而动感逼真的水波纹需要一个软件来制作。到这里下载：点击这里下载！ Sqirlz Water Reflections软件是专门用来给图片做动态美工的软件，用该软件做出来的flash水波纹效果极棒 ，另外它还可以制作下雨的动画和水滴入水的波澜。水波纹提供了5种动画类型，其参数也相当丰富，如水波幅度、波纹方向、亮度、透视、透明度及涟漪特性等。各参数的配合、调整可以使你得到极其丰富的波纹效果，能够满足自然界各种波纹景象，SWR的使用也很简单，如果你只考虑缺省效果，那么产生一个作品只需载入图片、选定区域、保存swf文件这三步。选区的操作除了移动，还有平滑和“组合”选区（比如可以组合出一个类似“马蹄形”的选区）等。 除了可以保存为SWF文件，它还能为AVI视频动画添加波纹，当然还有静 态的水波效果 安装好以后，就可以打开使用了。
首先要把图搞好，我找了这么一幅图： 里面有一半的内容全是水面，可以用水波纹把水面动起来。
第一步：首先打开软件，然后点击绿色folder打开你想要制作的图片。
第二步：用左边第一个工具（蓝箭头所指）来选定你想要变成波纹的区域，下图虚线范围之内的东西都要被变成波纹。
第三步：选择波纹频率也就是动的快慢，我选了10，你可以多尝试些数字。
第四步：波纹的形势有5种不同的波纹，你可以挨个试试，哪个好看用哪个。但要注意选择100%透明。
第五步：保存flash文件选择这个只保存波纹，不用保存全图，否则文件太大。在按这个导出swf文件：选择图像质量，越高的质量文件越大：确定并导出：
第六步：导出完毕一定要记录下swf文件的尺寸，以后有用 这是最后成品，一个flash文件，上传到文学城空间拿到link备用，使用的时候就像调用其他的flash一样，放到恰当的位置就行了。大小就是最后告诉你的大小。到此制贴讲座已经有四讲了，现在要求同鞋们赶紧交作业，否则我可要考试了！
石头制贴讲座之一（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) 但一般不用那么复杂，可以不写这句。说到这里第一句话就说完了，就可以把这句话用括号括起来了。貌似很复杂，用惯了就快了，别忘了咱们现在在讲最简单的贴子模版，后面还有复杂的，准备好。
第一句范例：（上面我的歌贴）
<*center*><*table height="525" width="700" cellspacing="0" cellpadding="0" border="5" bordercolor="#949449"*>
说完了第一句话，表单定义好了，就开始写表单里面的内容了。表单里有什么呢，包括上面提到的三个原料：图片，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。第二句话说完了，括起来。
第二句范例：（上面我的歌贴）
<*tbody*><*tr*><*td valign="bottom" align="center" width="700"background="http://i44.tinypic.com/11j6uqo.jpg"*>
第三句话定义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 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 然后 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 结束表单
第四句和结尾句范例：（上面我的歌贴）
<*embed 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 最后面也要相应的加上尖括号斜杠center: /center 全贴代码的范例
（抱歉这个忘了加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*>
现在就可以看看贴子效果了，把这些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*>
##################################################################################################
石头制贴讲座之二（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 style="LEFT: 0px; POSITION: relative; TOP: 0px"*>
center: 就是要把贴子放在中间位置显示，这上次讲了 table: 现在要开始一个表单来做贴子，和上次不同的是这次要嵌套表单，后面还会再有一个表单套在这一层里。 tr: 开始表单内的行 td: 开始行的内容 div 的概念说起来会很复杂，你只要记住它的意思是开是一个模块就行了，模块是什么呢，它可以是一个图片，歌曲播放器，flash，或什么别的东西。只要定义在div和/div之内的东西都属于这一个模块。这第一句的div一句非常重要，有时候会看到一些网友的贴子，flash的位置不对，不在贴子里面。有的贴子在IE里看得好好的，到了firefox看就不对了。或者flash不对或者播放器位置不对，都是因为位置没搞好。这句话就是说以下的这一个模块都相对于最左上角的0X0这个位置而定，后边的所有flash都要“绝对”的定位于这个模块之内。这样就不会出现位置差错了。不管是浏览器是IE也好还是firefox,都不会位置不对。另外你还可以靠Z-INDEX来实现flash模块的层叠显示，这个以后再讲。
<*table height="563"cellspacing="0"bordercolor="#5151A2"cellpadding="30"width="750"
background="http://i42.tinypic.com/2cr3dkp.jpg"border="5"*>
你看又一个table开始了，是嵌套在前面的表单里的。这句话定义了整个贴子的大小，因为我的图片像素是750X563的，所以简单起见贴子的高度宽度也设置成同样大小。边框颜色宽度我第一课已经讲过了。 cellpadding是30，就是说下一个模块（播放器）到边框的距离是30，这个距离可以调整任意大小。
<*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*>
这句话定义了播放器的格式和位置上节课讲过valign和align, 所以可以看出来，播放器是被放在了下面靠左的位置，但是会留出离边框30像素的距离（由前面的padding决定）。 style="FILTER: Xray" 定义的是播放器的外观，顾名思义x射线就是把播放器显示成黑色透明状的，就像医院里照出来的X光透视片的感觉。但是这个命令在不同版本的浏览器里看效果是不同的。播放格式是mpeg，是一种比较普通的播放格式，IE和firefox都能听得见。注意这个播放格式和第一节课的realplayer播放格式不一样。 loop播放循环是1，就是说放一次，如果是loop="true" 就是无限循环，不停的放。至此大table里的小table就结束了，所以要加上/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*>
这个单元是定义第一个flash动画：云雾效果在开始的style的地方，我就定位了flash的具体位置，我让它在最左边5个像素开始，上面也留下5个像素的空间。为什么呢，因为我不想让这个云雾飘到边框上去，让flash控制在贴子范围之内。注意position是绝对absolute，不是相对，是让本单元显示的内容把位置定位于第二句的开始点。 flash的宽度和高度是740x500，740=图宽度750-边框5X2=750-10=740 500的高度是让云雾能覆盖画面大部分地方。
<*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*>
这个单元是定义伴月星的flash, 我想让这个星星显示在贴子右上方天空处。它的位置是从上面数负50，只有是负数才能让这个flash显示在比较靠上的位置。 <*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*> 这个单元是定义水波纹的动画效果。它的位置大小也是通过这四个数值来设定的（左右宽高）。变量就是这个四个数字和flash链接。
<*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*>
又一个同样的水波纹，只不过大一些400X400 放在河道宽的地方。贴子快做完了，注意这些flash动画的单元都是一个模式，只是更换4个变量来改变他们的大小和位置，所以理论上你可以想放多少个flash都可以，多了只不过显示起来会慢一些。 结尾句： <*/div*><*/td*><*/tr*><*/table*><*/center*> 对应开始第一句，这样就结束了这个贴子。 掌握了这个模版，会自如运用了，你就差不多可以毕业了。以后的一些技巧都可以在这个基础上加。还是那句话，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*><*/body*> <*/html*>
########################################################################################################
石头制贴讲座之三（边框底图和滚动图片/字幕）
叮呤呤，上课了。看看这个豪华贴子，貌似很复杂，其实很简单。我没有使用一个flash, 但是很有动感，所有的东西都在动，今天要给同学们介绍一个很重要的html语句：Marquee还是一句一句的讲，讲到哪里就说那里吧。
第一句：定义边框和底图
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*>
这句话定义了边框和底图。可以看到这个边框是两道浅蓝色的框框加了一条闪闪星星的带子。这不是从谁家抄袭来的，是俺的原创，大家可以发挥改成不同的颜色不同的图。两个浅蓝色边框是两个嵌套的table, 所以这句话里重复出现了两次table,tbody, tr和td。但是注意要把内补丁设置成为8不能是0，这样才能显示出来星星闪的夹层，也就是cellpadding=8星星闪是怎么出来的呢，实际上就是一个小gif图片： 图片地址是：http://i42.tinypic.com/6tedmw.gif 我只要在第一个table里面把这个图片设置成底图就行了。 background=http://i42.tinypic.com/6tedmw.gif 第二个table的底图是另外一个小图片： 图片地址是：http://www.sucai123.com/sucai/img4/639/b057.gif 第二个table覆盖了第一个table的大部分，只露一个8像素的边边，所以就能看到星星闪闪的一条带子了。另外注意这两个table, 我定义的宽度是100%， 不是实际的多少pixel, 而是一个百分数，意思就是你给我多大的宽度我就占多大的宽度好了，所以发贴时候会看着宽一些，再博客里看会窄一些，取决于网页给了贴子多大的宽度了。这个边框大家可以任意发挥，你可以用不同颜色，两个框框分别是用不同颜色也好看，可以用三个边框，四个边框，可以调节宽度，让它窄一点也行，底图可以换成不同的图片。图片可以在网上找，搜索一下网页素材，就一大堆一大堆的图。
第二句：歌曲标题来回动
<*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"*><*B*><*marquee behavior=alternate*>不想让你哭<*/marquee*><*/B*><*/FONT*><*br*><*br*>
现在就要介绍这个Marquee, 基本语法就是marquee你想要动的东西/marquee marquee有很多参数可以设定，就定了你要动的东西怎么动，往哪个方向动，来回循环还是就一次，运动的速度等等。这里我想让这个“不想让你哭”动起来，来回动，那我就设置marquee的behavior是alternate就好了。另外还有scroll, slide两种属性，scroll, 就是一圈一圈的走，slide就是像幻灯片一样走一次就完了，你可以自己尝试一下看看效果。在这句里面我还定义了字体的显示，font这个句法是来定义字体的，在它的style定义句中，我把自号定为40号，另外我加上了影子，影子的效果是灰色的, shadow(color=gray)，要注意用firefox是看不出来这个阴影效果的。宽度是50%显示，这样子就在table内部中央50%的宽度内来回走了，字体本身的颜色是和边框相同的颜色，你也可以用其它颜色。lineheight就是行间句，150%就是空行1.5，但因为“不想让你哭“就一行，所以没用。字体我定义的是华文彩云，但是如果你的电脑是英文系统有没有安装中文字体，你是看不出来空心的华文彩云字体的。
第三句：图片slide show
<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"><*img onload="javascript:i(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*>
还是这个marquee, 让这些图片动起来形成slideshow效果，注意高度要定义成图片高度，宽度是80%,也就是要显示在表格中央80%的宽度区域内。方向是向左，loop是控制它无限次的运转，scrollamount控制速度，数字越小越动的慢，可以自己调试，我这里用的是3。注意图片是提前找好的，并且改成了统一大小并上传的。图片的显示用img src就行了。
第四句： 滚动歌词
<*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:华文行楷"*>总想对你有些话要说<*br*>可不知道该说些什么<*br*>总想给你带来些欢乐<*br*>可不知道你喜欢什么<*br*>过了一夜又多了一天<*br*>时间让人变得好心烦<*br*>不知何时又才能见面<*br*>难道就这样天各一边<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>谁的眼泪随风飘向了远处<*br*>那也是我在为你祝福<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>如果爱情就是 我这场的赌注<*br*>输了你也就等于 输了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*> 接下来是滚动歌词了，还是依旧使用marquee来使文字运动起来，只不过是向上滚动显示，速度是1。行间距是两倍，对字体的定义和歌名的定义有几处不同，字号要小，阴影效果变成了闪光效果，还是灰色，但是是在字的周围包了一层灰色，firefox还是看不到的。字体定义成为华文行楷。自体本身的颜色我设成了红色：crimson 我这里有一个英文颜色名称对照表，你可以参考： http://school.21tx.com/2005/08/15/12819.html
第五句：播放器
<*embed onload="javascript:if(this.width>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types*>
哈哈，偷懒啦，到文学城发新贴的地方去搞个自动生成的code就行了。链接：http://web.wenxuecity.com/BBSAdd.php?SubID=ktv
第六句：下载链接和结束
<*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下载链接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*>
提供一个歌曲文件超级链接，以供听不到音乐的人下载收听。结束句就是结束第一句里面的两个table，现在table里面东西就都写完了。 整个贴字没有使用一个flash, 没有使用一个div模块，纯靠html语言来搞效果，也不错。
-----用的时候必须把*号全部去掉
<*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background="http://i42.tinypic.com/6tedmw.gif"*><*TBODY*><*TR*><*TD*><*TABLE borderColor=#97CBFF cellpadding="8" width="100%" border=8 background=http://www.sucai123.com/sucai/img4/639/b057.gif*><*TBODY*><*TR*><*TD*><*center*><*FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=gray); WIDTH: 50%; COLOR: #97CBFF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"*><*B*><*marquee behavior=alternate*>不想让你哭<*/marquee*><*/B*><*/FONT*><*br*><*br>*<*marquee height="338" width=80% deplay="0" loop="infinite" direction='left'scrollamount="3"*> <*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/4e066d58bdd79fff9d82042c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/5e6bf6f7948db403730eec2d.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/756ab04a21796a0208f7ef23.jpg"*><*img onload="javascript:if(this.width>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/764ee295e2a62e297af4802c.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/896b68dd929e81155882dd20.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/9a4aa5af1cd967dafaed5024.jpg"*><*img onload="javascript:if(this.width*>450) this.width=450" src="http://i363.photobucket.com/albums/oo71/shitoudidi/d1a2eace160cf918b700c82d.jpg"*><*/marquee*><*br*><*br*><*marquee direction=up scrollamount=1*><*center*><*FONT style="FONT-SIZE:18pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:crimson;LINE-HEIGHT:200%;FONT-FAMILY:华文行楷"*>总想对你有些话要说<*br*>可不知道该说些什么<*br*>总想给你带来些欢乐<*br*>可不知道你喜欢什么<*br*>过了一夜又多了一天<*br*>时间让人变得好心烦<*br*>不知何时又才能见面<*br*>难道就这样天各一边<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>谁的眼泪随风飘向了远处<*br*>那也是我在为你祝福<*br*>我不想让你哭 我也不想认输<*br*>只想用我的爱 再次把你留住<*br*>如果爱情就是 我这场的赌注<*br*>输了你也就等于 输了全部 <*br*><*/font*><*/center*><*/marquee*><*center*><*br*><*br*><*embed onload="javascript:if(this.width*>450) this.width=450" src="http://space.wenxuecity.com/media/1245569215.mp3" width=300 height=40 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types *><*br*><*a href="http://space.wenxuecity.com/media/1245569215.mp3" target="_blank"*>下载链接<*/a*><*center*><*/TD*><*/TR*><*/TBODY*><*/TABLE*><*/TD*><*/TR*><*/TBODY*><*/table*><*/body*> <*/html*>
##########################################################################################################
石头制贴讲座之四（闪字和水波纹的制作）
这首《蓝色的故乡》还是上次红卡请我一起合唱的，很好听的一首歌。但是当时伴奏有问题，怎么也搞不定，只能换别的歌。现在伴奏终于好了，但是感觉唱得很雷人，象催眠曲。大家凑活听。今天要讲的是闪字和水波纹的制作，从这堂课起，就不再讲基础知识了，开始传授高级课程。
1）闪字的制作漂亮的歌名闪闪发亮，其实是一个小的GIF图片，制作非常简单。去百度搜索一下“闪字制作“，就会有好多网站出来了，随便选一个。 http://www.shanziba.com/ 在这些网站输入你想要制作的字，选中你想要的样子，点击“生成闪字”或“效果预览”，漂亮的闪字就出来了，就这么简单。然后把做好的字存在你的电脑硬盘里面，以后再上传到tinypic等网站就可以调用了。使用的时候就是用一般的贴图语句就好了，比如〈img〉等。这就是我做好的标题：
2）水波纹的制作这种歌唱自然景色的歌曲很适合来个带水面的景色图片，而动感逼真的水波纹需要一个软件来制作。到这里下载：点击这里下载！ Sqirlz Water Reflections软件是专门用来给图片做动态美工的软件，用该软件做出来的flash水波纹效果极棒 ，另外它还可以制作下雨的动画和水滴入水的波澜。水波纹提供了5种动画类型，其参数也相当丰富，如水波幅度、波纹方向、亮度、透视、透明度及涟漪特性等。各参数的配合、调整可以使你得到极其丰富的波纹效果，能够满足自然界各种波纹景象，SWR的使用也很简单，如果你只考虑缺省效果，那么产生一个作品只需载入图片、选定区域、保存swf文件这三步。选区的操作除了移动，还有平滑和“组合”选区（比如可以组合出一个类似“马蹄形”的选区）等。 除了可以保存为SWF文件，它还能为AVI视频动画添加波纹，当然还有静 态的水波效果 安装好以后，就可以打开使用了。
首先要把图搞好，我找了这么一幅图： 里面有一半的内容全是水面，可以用水波纹把水面动起来。
第一步：首先打开软件，然后点击绿色folder打开你想要制作的图片。
第二步：用左边第一个工具（蓝箭头所指）来选定你想要变成波纹的区域，下图虚线范围之内的东西都要被变成波纹。
第三步：选择波纹频率也就是动的快慢，我选了10，你可以多尝试些数字。
第四步：波纹的形势有5种不同的波纹，你可以挨个试试，哪个好看用哪个。但要注意选择100%透明。
第五步：保存flash文件选择这个只保存波纹，不用保存全图，否则文件太大。在按这个导出swf文件：选择图像质量，越高的质量文件越大：确定并导出：
第六步：导出完毕一定要记录下swf文件的尺寸，以后有用 这是最后成品，一个flash文件，上传到文学城空间拿到link备用，使用的时候就像调用其他的flash一样，放到恰当的位置就行了。大小就是最后告诉你的大小。到此制贴讲座已经有四讲了，现在要求同鞋们赶紧交作业，否则我可要考试了！
评论
目前还没有任何评论
登录后才可评论.
