班门弄斧，也谈音乐图文帖子的制作

2009/2/13重新整理

        因为在无期限放假，所以最近总是有很多闲散的时间来学一些专业之外自己感兴趣的东西。不顾正业的我学作图的时间远大于写论文的时间，所以本末倒置，在这方面的心得和灵感反倒多一些。也罢，什么“得”不是“得”啊，写出来供自己消遣，供大家交流！（台下观众：废话少说，再啰嗦派你砖头！)

        呵呵~网易部落的平台实在是好，使用html编辑，可以让自己的心情立体化起来，整点文字，作点图片，在配上点小曲，老有感觉了！有这么好的资源不善加利用，那太暴殄天物了！真地！！！（台下：疯了！这家伙！必须得用武力对付她了）

        呵呵~啊~~~~~~~~嗯~~~~~~~（0兰厚着脸皮继续发言！）

        广告时间已过，下面进入正题：

        如果你和我一样，在某段一时间比较空闲并且也喜欢全方位、立体式的表达自己的心情，那么建议你在开工前准备以下几样工具，并在适当的时间稍微学习以下。

班门弄斧一：工具篇

        1、网页制作三剑客

        Macromedia Dreamweaver 8 ——网页制作软件。对于编辑帖子来说，稍微学习一点就足够了。可以完全在窗口设计状态下进行编辑，对于莱鸟来说不用抓狂的编辑代码就可以轻松制作复杂表格。前提:必须要明白基本代码的意义和作用，不然更抓狂！

        Macromedia Fireworks 8——图形编辑制作软件。非常好的软件，可以用它来制作一些动画和按钮等等。

        Macromedia Flash 8——作FLASH的，比较难，感兴趣的可以深入学习一下。

        2、Photoshop——制图

        呵呵，这就不用说了，很好的制图软件，可以让图片产生很多奇妙的效果。

        3、其他替补软件（建议不想费功夫学习的朋友们使用）

        我形我素和卡丽莱——都是友立出品的照片编辑软件，完全傻瓜式的编辑图片和文字，非常好用，效果也很好。我经常用它给照片调光，很省事！

        Flash SlideShow Builder——可以生成swf格式的照片编辑器，能将多幅画面做成幻灯片切换效果，还可以加入音乐，特别好的软件。我的幽灵公主那款帖子（不小心在整理的时候被我删掉，没有存档，我哭.........）就是用他弄出来的。（http://w-lan.blog.163.com/blog/static/2687392006865448846/感兴趣的可以去看一下效果，效果为另一贴夜幕下的哈尔滨）

       呵呵~上述软件网上都有下在，感兴趣的用迅雷一搜，好多！（注：不是广告，迅雷确实挺好用的！！！啊~~~~~~~~~~谁又打我？？

班门弄斧——空间篇

        一切准备就绪了，就轮到上传你的音乐、flash和图片的时间了。

       如果有上传音乐需求的请参考：http://www2.blog.163.com/article/-7yZ8-zFKyx3.html，这是一个可以探测地址的提供500M免费空间的稳定的地方（一口气，说这么长的话，好累！已经失效，现在空间很多，大家自己寻找吧）

       有上传FLASH需求的请点击进入：http://up.qzone.net.cn/index.php，这是一个免费上传FLASH的空间，截止修改日有效。

       重点到了，图片空间不用说了，当然是为我们提供优质服务的网易相册了！当然这是我们都知道的。呵呵~~好说正题。大家都遇到过自己的硬盘里没有适合表达自己心境的图片的时侯吧，这时候相册搜索就派上用场了。建议大家用相册搜索试一下，数以百万计的相册用户和数以亿计的图库，还不能满足你一个人的服务需求了？？用完人家辛苦收藏的图片，别忘了给人家留言表示感谢就是了！个人认为网易相册用户的收藏品味都比较高，完全可以找到你需要的东西，在这方面，百度的图片搜索就是毛毛雨了，呵呵！

        空间问题，以上！

班门弄斧——基本网页代码及特效介绍

        其实，这一项完全没有必要介绍，因为有需求的人只要在网上搜搜，数以N的N次方的博客、论坛和相关网站，都有很好的介绍。

        告诉大家一条捷径——看到好的帖子，就无情的对她进行右键——查看源代码！截取你需要的部分，编辑一下就是你的东西了。呵呵~~学习嘛，不学别人的你怎样进步啊！

       当然了，如果你全然不知道什么TR、BR是什么意思，那就让我献丑，拿我的一篇帖子为例给大家简单讲一堂课吧！

      博客教程初级篇帖子地址：http://w-lan.blog.163.com/blog/static/2687392007116113459658/

       （一）关于表格：

      哎呀，0兰一时也不知道怎么说，我看这个人说的挺好的，大家不妨参考一下，只要明白意思就行，具体操作建议用软件，做出他这种效果其实非常简单。只是一个基础问题。

一：背景

一个好贴=好图+音乐

原代码如下： <TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>
一个好贴=图片+音乐
</TD></TR></TBODY></TABLE>
注意：前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。多收和少收都会使帖子出错哦　：）
常用的参数设定及注解：
比如这段代码：

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

详解如下：

width="400" 表格宽度，接受绝对值（如 500）及相对值（如 80%）。 border="10" 表格边框的厚度。 cellspacing="2" 表格格线的厚度 cellPadding=5　表格格线内厚度 align="CENTER" 表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center valign="TOP"。表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。 　　 background="背景图片网址" 表格的背景图片，与 bgcolor 不要同用。 bgcolor="#0000FF" 表格的底色，与 background 不要同用；bordercolor="#CF0000" 表格边框颜色；bordercolorlight="#00FF00" 表格边框向光部分的颜色；bordercolordark="#00FFFF" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor  将会失效。

二.文字应用
1.文字基本设制
基本代码如下：
<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>
<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。
face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7　取值越大文字就越大 另一种贴法： <font style=font:40pt face=新宋体 color=#ff0000>插入文字</font> font:40pt　数值越大文字就越大。 color=颜色代码。

三.贴图
1.基本代码：
<img src=图片网址 width=图片宽度 height=图片长度>
注意：设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）。图片的居中，居左，居右上面已经介绍了，这里不再重复。。。。。
2.给图片加边框
基本代码：
<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>
说明：
border="6" 表格边框的厚度，不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1　表格格线内厚度
borderColor=#841A00　边框色彩
3.图片朦胧
A.圆形效果
代码：　<IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">

B.方形效果
代码：　<IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">

四.透明FLAH的应用
1.常用代码如下：
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>
注意：长和宽的设定要根据图片的实际大小来设定效果

     

（二）关于表格内嵌滚动条

<DIV style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 350px; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 550px"></DIV>这是我帖子里的源代码，大家把他放到<TD>里就行。

我也懒得说了。http://sucai.heima.com/sucai/teach/jd/bar.htm这是一个滚动条生成器，大家可以去看一下。

（三）关于播放器：

      参见http://w-lan.blog.163.com/blog/static/268739200679123230/

实在不明白的给我留言或纸条，我单独告诉大家，要说太多了，0兰比较懒！

                              班门弄斧——作图篇

        这是最主要的部分，大家要是想好好学作图，给大家一个地址：

http://www.cntuw.com/index.php 中华图网论坛，那里的人才是高手，0兰也是在那里学了两手。呵呵~ 。当然以后有时间0兰也会发一些自创的教程，供大家交流！！！

                               结束语

        总之，思想无疆，创意无限，每个人都有表达自己的独特的方式。我们在制作音乐图文帖子的时侯，不要盲目的模仿别人，那样思想会僵化。基本的东西都是一样的，关键在于自己的发挥，你的想象是永无止境的，不要荒废了他。谁说图文帖子就只能是方块的，谁说图片就只能是不会动的？放飞你的想象力，一定能将自己的心境完美的立体化！！！

        呵呵~就到这里吧，休息一会，啃个苹果，愿所写会对大家有帮助！

       最后，献丑了~~~~

 

 

 

        更多晋级内容，请访问水阁杂果铺——CSS、FLASH教程汇总

更多请访问水阁雜貨鋪 ←点击圆形图标进入