概 况：


据我所知,制作这样加背景及边框的音乐图文帖,有三种方法:


1. 使用全代码制作.


2. 使用一些软件制作.(比如:FrontPage2003等)


3. 使用论坛的一些基本功能(主要是表格功能)制作.(但局限于7.0或者7.1版本的论坛.)


现在只是用下面两种方法来制作帖子.而今天要教大家的是第三种方法,也就是--- 3.使用论坛的一些基本功能制作.

第一步: 熟 悉 设 置


既然要使用论坛的一些基本功能, 就一定要先熟悉一些常用的设置:


我们点击"发表话题"按钮,进入发帖区.


制作音乐图文帖,我们主要使用的就是这个插入表格按钮.


下面有一组设置,我们也要了解一下: "Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态.


我们一般是在"Design"设计状态下发帖.

第二步: 准 备 材 料


窗儿以自己的一帖<你是我今生的红色恋人>为例:


一. 图文内容:


我曾经是风中, 
随风飘落的一片叶子， 
飞舞在城市寂寞的风景里， 
总有着淡淡的古典忧伤情怀， 
有淡淡的哀，有淡淡的怨， 
有淡淡的愁，有着忧郁的文字， 
淡漠的眼神，敏感的神经， 
行走在那条忧伤的小路上， 
岁月的惆怅越走越浓。




和着徐徐的晚风， 
悠然的，含蓄的，无言的， 
停留在我小屋的冬夜浅唱低吟， 
你给我默默的一刻凝注， 
是那样深远悠长， 
一切的语言都显得那样苍白无力， 
那一刻凝注， 
我听见花开的声音， 
融入温熙的风中， 
飘逸在每一个角落， 
惊醒了我千年的期盼。




是谁在寂寞的夜晚， 
陪我畅谈唐诗宋词的温婉， 
汉女歌舞起柳风的婆娑， 
陪我坐谈英雄人物， 
天南地北人文地理， 
闲话儿女， 
红尘情长一系又一系。




是谁在我黯然神伤的时候， 
轻轻的语重心长的, 
轻叩着我心灵的钥匙， 
如春日的阳光， 
温柔的飘落我窗前， 
让我们越品越醉， 
沉醉在你温柔的指尖， 
感动在你痴迷的眼神.




你不在我身边的日子， 
无数星月难眠的夜晚诗音绕怀， 
相思是茂盛的长青藤， 
在一个劲的往上攀， 
每一次电话， 
把心潭搅出漩涡， 
许多许多的话难以沉淀。




心中有一条铺着淡淡月光的小路， 
弯弯曲曲， 
它是那样缠绵，那样执著， 
通向你的心房，我拥着你， 
因为， 
我真怕有一天你会离我而去。




漫步在岁月的旅程中， 
我曾经怀疑过爱情真的很奢侈， 
而这份爱恋啊，纵然相隔了一世， 
纵然相距了千山万水，依然真切， 
依然如此狂热执着， 
这痴迷，这执着，这坚贞， 
不为别的，只为了这美丽的爱情。 
亲爱的，爱你，我无怨无悔！ 
牵你的手，朝朝暮暮，牵你的手， 
走过今生，牵你的手，生生世世， 
你是我今生相拥的爱人。




二. 分割线及装饰图片:










三. 背景图片素材:




   


四. 背景音乐:


http://www.aqlife.com/uploadfile/wma/2005-5/200552585318958.wma




 

============================

友情提醒，这些资料大家可以放在记事本里。方便。

：

第三步: 编 辑 制　作

好了，准备工作做好了，我们开始实际操作了:

先点击"发表话题"按钮，进入发帖区，注意，你现在就进入了"Design"设计状态了。在编辑帖子前，要记得先填好上面你要编辑的帖子的标题。这很重要，因为窗儿常会把自己做好的帖子弄丢了，问题就出在这最小也最重要的一步。

(一) 加 边 框

1. 点击插入表格按钮，弹出一个对话框，点确定，就出现这样的一层边框:

2. 因为是多层边框，所以，我们再复制几层这样的边框:

鼠标放在这个边框的边缘处，(出现一个十字标记)，右击--复制,然后在边框外空的地方点一下，再把鼠标放进表格内最*左边的位置，(鼠标进去后，可以用退格键试试，把多余的空格退掉，免得边框内有空格，边框会变高。)右击---粘贴，就出现双层边框。重复这样的操作，做成一个七层边框如下:

(为了大家看清几个层次，我把几个边框的颜色设置成黑色，而大家自己在操作时看到的应该是几层淡灰色的边框。)

(二) 加 背 景 图 片

刚才的边框设计是在"Design"状态下进行的，现在的背景图片是要在代码状态下进行.

1. 点击下面的"HTML"按钮，进入代码状态，出现的是这样的一段代码:

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>&nbsp;</TD></TR></TBODY></TABLE>

2. 在这里,我们可以知道一些简单的代码知识:

边框的颜色----borderColor=#cccccc

单元间距----cellSpacing=2

单元边距----cellPadding=3

表格宽度----width="100%"

背景颜色----bgColor=#ffffff

边框粗细----border=1

3. 我们先要设置的是背景图片,所以,我们把原来代码里第一组中的"bgColor=#ffffff "删去,改为"background=".记得这地址后面要留有一个空格,否则图片将无法显示.

这里的"background"就是背景图片地址的意思,后面的 ,就是我要加的最外层的背景图片地址.

(背景图片1)

4. 接下来,把代码里第二组中的""bgColor=#ffffff "删去,改为"background=".

这是加上第二层边框的背景图片:

(背景图片2)

5. 以同样的方法加上其他几层边框的背景图片:

(3) (4) (5) (6) (7)

6. 好了,背景图片设置好了,接下来就是设置边框的大小了.如果你对我刚才介绍的几个代码熟悉的话,可以在代码状态里把这些数字按照你自己的意思稍作修改就行.如果觉得不是很清楚的话,我们就回到"Design"设计状态里去修改.

7. 点击Design,选中最外层的边框,(鼠标放在这一层边框的边缘部分,点击左键),边框外就出现九个小方块,然后点击按钮,弹出一个表格设置的对话框,我们把它设置为:"边框粗细=0","单元间距=30","单元边距=30","对齐方式=默认",然后点确定.

同样的方法选中第二层边框,设置这一层的边框为:"边框粗细=0","单元间距=8","单元边距=8","对齐方式=右对齐",然后点确定.

第三层边框的设置为:"边框粗细=0","单元间距=10","单元边距=10","对齐方式=右对齐","背景颜色=黑色",然后点确定.

第四层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第五层边框的设置为:"边框粗细=0","单元间距=8","单元边距=8","对齐方式=右对齐",然后点确定.

第六层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

第七层边框的设置为:"边框粗细=0","单元间距=2","单元边距=2","对齐方式=右对齐",然后点确定.

好了,边框的设置到此结束.我们现在见到的,就是下面这样一个多层边框(如果不满意它的宽度的话,可以按照自己的意思再选中边框修改):

(三) 加 图 文 内 容

漂亮的外框做好了（如果你想速成的话，可以直接借用别人的整套边框素材，这样可以省却上面几步操作；但如果你想自己创作，自己来制作边框的话，就必须得这样一步步去完成）。下面就简单了，我们只要把自己准备的原始资料复制进去就可以了。如果文字和里面的图片大小不合适的话，你都可以选中之后，再进行文字和图片的编辑。

（另：如果引用图片时留下蓝色线条的话，可以选中图片，点击 去掉超级链接，就能把这蓝色线条去掉）

你是我今生的红色恋人 我曾经是风中, 随风飘落的一片叶子， 飞舞在城市寂寞的风景里， 总有着淡淡的古典忧伤情怀， 有淡淡的哀，有淡淡的怨， 有淡淡的愁，有着忧郁的文字， 淡漠的眼神，敏感的神经， 行走在那条忧伤的小路上， 岁月的惆怅越走越浓。 和着徐徐的晚风， 悠然的，含蓄的，无言的， 停留在我小屋的冬夜浅唱低吟， 你给我默默的一刻凝注， 是那样深远悠长， 一切的语言都显得那样苍白无力， 那一刻凝注， 我听见花开的声音， 融入温熙的风中， 飘逸在每一个角落， 惊醒了我千年的期盼。 是谁在寂寞的夜晚， 陪我畅谈唐诗宋词的温婉， 汉女歌舞起柳风的婆娑， 陪我坐谈英雄人物， 天南地北人文地理， 闲话儿女， 红尘情长一系又一系。 是谁在我黯然神伤的时候， 轻轻的语重心长的, 轻叩着我心灵的钥匙， 如春日的阳光， 温柔的飘落我窗前， 让我们越品越醉， 沉醉在你温柔的指尖， 感动在你痴迷的眼神. 你不在我身边的日子， 无数星月难眠的夜晚诗音绕怀， 相思是茂盛的长青藤， 在一个劲的往上攀， 每一次电话， 把心潭搅出漩涡， 许多许多的话难以沉淀。 心中有一条铺着淡淡月光的小路， 弯弯曲曲， 它是那样缠绵，那样执著， 通向你的心房，我拥着你， 因为， 我真怕有一天你会离我而去。 漫步在岁月的旅程中， 我曾经怀疑过爱情真的很奢侈， 而这份爱恋啊，纵然相隔了一世， 纵然相距了千山万水，依然真切， 依然如此狂热执着， 这痴迷，这执着，这坚贞， 不为别的，只为了这美丽的爱情。 亲爱的，爱你，我无怨无悔！ 牵你的手，朝朝暮暮，牵你的手， 走过今生，牵你的手，生生世世， 你是我今生相拥的爱人。

对了，可别忘了给帖子配上一段合适的曲子哦~~~

方法一：用这个按钮，在放mp3、wma、asf 等格式的音乐时，把文件宽度和高度设置为0，这样就能把播放器隐藏起来，帖子更完美。

方法二：在帖子代码最后加上一段：

<EMBED src=音乐属性地址 width=0 height=0 type="audio/x-pn-realaudio-&#13;plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">

最后一步：点"发表"就ok了。如果你不是很放心的话，可以先点"预览"，或者"VIEW"先看看效果。满意了再发表也不迟

(四) 给 图 片 加 边 框

现在，我们讲讲怎样给帖子里的图片加上外框，使其统一化，有个整体感。还是以上面的帖子为例：

1.先做好一个帖子的边框如下：

1.先做好一个帖子的边框如下：

在表格设置时，把"指定表格宽度"前的钩子去掉。宽度就随图片宽度而变，与图片吻合。

（这个图片框可以按照自己的需要设置为1-2层，我这个帖子是一层。）

2。复制你所需的图片框，粘贴进帖子里，然后，把一组图片分别帖进这些图框里。

你是我今生的红色恋人 我曾经是风中, 随风飘落的一片叶子， 飞舞在城市寂寞的风景里， 总有着淡淡的古典忧伤情怀， 有淡淡的哀，有淡淡的怨， 有淡淡的愁，有着忧郁的文字， 淡漠的眼神，敏感的神经， 行走在那条忧伤的小路上， 岁月的惆怅越走越浓。 和着徐徐的晚风， 悠然的，含蓄的，无言的， 停留在我小屋的冬夜浅唱低吟， 你给我默默的一刻凝注， 是那样深远悠长， 一切的语言都显得那样苍白无力， 那一刻凝注， 我听见花开的声音， 融入温熙的风中， 飘逸在每一个角落， 惊醒了我千年的期盼。 是谁在寂寞的夜晚， 陪我畅谈唐诗宋词的温婉， 汉女歌舞起柳风的婆娑， 陪我坐谈英雄人物， 天南地北人文地理， 闲话儿女， 红尘情长一系又一系。 是谁在我黯然神伤的时候， 轻轻的语重心长的, 轻叩着我心灵的钥匙， 如春日的阳光， 温柔的飘落我窗前， 让我们越品越醉， 沉醉在你温柔的指尖， 感动在你痴迷的眼神. 你不在我身边的日子， 无数星月难眠的夜晚诗音绕怀， 相思是茂盛的长青藤， 在一个劲的往上攀，每一次电话， 把心潭搅出漩涡， 许多许多的话难以沉淀。 心中有一条铺着淡淡月光的小路， 弯弯曲曲， 它是那样缠绵，那样执著， 通向你的心房，我拥着你， 因为， 我真怕有一天你会离我而去。 漫步在岁月的旅程中， 我曾经怀疑过爱情真的很奢侈， 而这份爱恋啊，纵然相隔了一世， 纵然相距了千山万水，依然真切， 依然如此狂热执着， 这痴迷，这执着，这坚贞， 不为别的，只为了这美丽的爱情。 亲爱的，爱你，我无怨无悔！ 牵你的手，朝朝暮暮，牵你的手， 走过今生，牵你的手，生生世世， 你是我今生相拥的爱人。

(五) 添 加 透 明 flash

等到你对代码有一定的基础之后，可以给它加一些特效。 比如图片上加透明动画，文字也可以加一些效果进去.。在图片上加透明flash时，必须把里面的图片设置为背景才可以.。

1. 还是上面的帖子，以这样一幅图片为例（它的宽度和高度分别是452×452，透明动画和表格的设置都应与这组数据完全一致。）

我们在代码状态下，找到图片所在的位置，添加这样一段代码：

<P align=center>
<TABLE height=452 cellSpacing=0 cellPadding=0 width=452 align=center background= border=0>
<TBODY>
<TR>
<TD><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.616bbs.com/picture/ls/chuanger/yinhua/2/2.swf width=452 height=452 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE></P>

加上特效以后，必须在发表前，把下面"自动修正"前的钩子去掉,否则，特效就无法显示。

=========================

(六). 如 何 发 全 屏

如果你想发全屏帖的话，可以使用以下方法：

在帖子"HTML"状态下，找到自己帖子的第一层边框代码。

如:

<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=30 width="100%" background=http://www.zhenshui.com/UploadFile/200633019345374017.gif border=0>

只要在这一层代码里加上这样一段(里面的数据可以根据帖子的实际情况作适当调整):

id=table1 style="LEFT: -220px; WIDTH: 970px; POSITION: relative; TOP: 70px"

这样，你的第一层边框代码如下:

<TABLE id=table1 style="LEFT: -220px; WIDTH: 970px; POSITION: relative; TOP: 70px" borderColor=#cccccc cellSpacing=30 cellPadding=30 width="100%" background=http://www.zhenshui.com/UploadFile/200633019345374017.gif border=0>

最后发帖前,在帖子代码前加上几组<BR>，以防帖子太高，把自己头像下的积分处挡住。(我一般用5组<BR>).

在帖子代码结尾处最好也加几组<BR>，以防帖子太长，盖住编辑和加精处。

好。。。好厉害啊LZ。 偶全部接下了。。 拷贝回去学习了。。。 嘿嘿，偶要让这里每一处都有我的脚印~ 让斑竹擦去。。~~:D: