制帖范例详解

实例一：
',1)">
人们说，雪是洁白的，
那是因为我们看到了她的无暇
人们说, 雪是温柔的，
那是因为我们感到了她的娇娜
可是 你知道吗?
雪也是可以听到的
如果你轻轻掀起紧盖的绒帽,
你会听到一声声的牵挂
如果你也有颗牵挂的心,
你会听到远方的心语沙沙
如果你也向她述说你的心语，
你会听到她讲的爱的童话
和她一起站在空空的田野，
你会听到她说生活的美好和天地的博大
和他一起走过涓涓小河，
你会听到她说生命的久远和真情的无涯
你那儿下雪了吗?
如果下了，去听我托她带去的问候;
还有，去接我托她稍去的琼花
',2)">
佚名的作品，是我们的作业，请批改作业！
[返回顶部]
小试验

发送悄悄话
我的群组
第2楼
2009-03-18 19:56:30
发表于: 2009-03-18 19:56:30 [引用]

实例一代码：

人们说，雪是洁白的， 那是因为我们看到了她的无暇 人们说, 雪是温柔的， 那是因为我们感到了她的娇娜 可是 你知道吗? 雪也是可以听到的 如果你轻轻掀起紧盖的绒帽, 你会听到一声声的牵挂 如果你也有颗牵挂的心, 你会听到远方的心语沙沙 如果你也向她述说你的心语， 你会听到她讲的爱的童话 和她一起站在空空的田野， 你会听到她说生活的美好和天地的博大 和他一起走过涓涓小河， 你会听到她说生命的久远和真情的无涯 你那儿下雪了吗? 如果下了，去听我托她带去的问候; 还有，去接我托她稍去的琼花 佚名的作品，是我们的作业，请批改作业！

[返回顶部]
小试验

发送悄悄话
我的群组
第3楼
2009-03-19 09:02:55
发表于: 2009-03-19 09:02:55 [引用]

实例一代码层次结构解析：
底色边框层: 可修改红色参数来指定最外层框架的宽高，背景色，边界颜色，宽度等

背景图片层: 可修改蓝色参数来指定背景图片的宽高，图片地址等 动画容器层：将坐标原点定位于图片左上角 动画层：可修改粉色参数来指定动画相对于容器层原点的起始坐标，动画尺寸，动画地址等 滚动文字层：可修改橙色参数来指定滚动文字相对于容器层原点的起始坐标，滚动速度，滚动窗口的尺寸，滚动文字的颜色,内容 等 人们说，雪是洁白的， 那是因为我们看到了她的无暇 人们说, 雪是温柔的， 那是因为我们感到了她的娇娜 可是 你知道吗? 雪也是可以听到的 如果你轻轻掀起紧盖的绒帽, 你会听到一声声的牵挂 如果你也有颗牵挂的心, 你会听到远方的心语沙沙 如果你也向她述说你的心语， 你会听到她讲的爱的童话 和她一起站在空空的田野， 你会听到她说生活的美好和天地的博大 和他一起走过涓涓小河， 你会听到她说生命的久远和真情的无涯 你那儿下雪了吗? 如果下了，去听我托她带去的问候; 还有，去接我托她稍去的琼花 播放器层：此时上面的背景图片层结束，相对起始原点移至图片层的左下方，此处的坐标将以新的原点为参照系。可修改绿色参数来指定播放器相对于新原点的起始坐标，音频文件地址，播放器的透明度，宽高等。 附加说明文字层： 佚名的作品，是我们的作业，请批改作业！

注：在群组发帖时，注意必须把代码中的回车换行全部删除，使所有的代码连成一片，否则文学城的编辑器会自动在代码内部的换行处加入
,从而破坏帖子的整体结构。
Flash 素材库：
http://www.wosowoso.com/flash/
http://blog.wenxuecity.com/blogview.php?date=200701&postID=601
http://blog.wenxuecity.com/blogview.php?date=200812&postID=19590
http://blog.wenxuecity.com/blogview.php?date=200904&postID=20006
http://web.wenxuecity.com/BBSView.php?SubID=ktv&MsgID=177749
HTML 颜色代码表：
http://www.geocities.com/SiliconValley/Network/2397/
[返回顶部]
小试验

发送悄悄话
我的群组
第4楼
2009-03-20 10:14:34
发表于: 2009-03-20 10:14:34 [引用]

实例二：
【天边】朗诵：费利/五七
天边有一对双星, 那是我梦中的眼睛。
山中有一片晨雾, 那是你昨夜的柔情。
我要登上 登上山顶 去寻觅雾中的身影。
我要跨上 跨上骏马 去追逐遥远的星星。
天边有一棵大树, 那是我心中的绿萌。
远方有一座高山, 那是你博大的胸襟。
我要到树下 树下采拮 去编织美丽的憧憬。
我要到山下 山下放牧 去追寻你的足印。
我愿与你策马同行，奔驰在草原的深处。
我愿与你展翅飞翔，遨游在蓝天的穹谷。
[返回顶部]
小试验

发送悄悄话
我的群组
第5楼
2009-03-20 10:17:56
发表于: 2009-03-20 10:17:56 [引用]

实例二代码：

【天边】朗诵：费利/五七 天边有一对双星, 那是我梦中的眼睛。 山中有一片晨雾, 那是你昨夜的柔情。 我要登上 登上山顶 去寻觅雾中的身影。 我要跨上 跨上骏马 去追逐遥远的星星。 天边有一棵大树, 那是我心中的绿萌。 远方有一座高山, 那是你博大的胸襟。 我要到树下 树下采拮 去编织美丽的憧憬。 我要到山下 山下放牧 去追寻你的足印。 我愿与你策马同行，奔驰在草原的深处。 我愿与你展翅飞翔，遨游在蓝天的穹谷。

[返回顶部]
小试验

发送悄悄话
我的群组
第6楼
2009-03-20 10:19:02
发表于: 2009-03-20 10:19:02 [引用]

实例二代码层次结构解析：
底色边框层: 可修改红色参数来指定最外层框架的边界颜色，宽度，与内层单元的间距等

背景图片层: 可修改蓝色参数来指定背景图片地址，宽高，边界颜色，宽度，与内层单元的间距等 动画容器层：将坐标原点定位于图片左上角 (由背景层的left/top对齐模式决定) 这个容器层可以包含任何内嵌式标题，动画，文本，滚动，播放器等各种元素层的组合，每个内嵌层的坐标都是相对于容器层的原点而言的，如果要使用滚动层marquee，在代码块中它必须放在所有其他内嵌层的最后。 标题层：可修改橙色参数来指定标题文字相对于容器层原点的起始坐标 【天边】朗诵：费利/五七 动画层1（闪亮的星）：可修改橙色参数来指定动画相对于容器层原点的起始坐标，动画尺寸，动画地址等 动画层2（飞鸟）：可修改橙色参数来指定动画相对于容器层原点的起始坐标，动画尺寸，动画地址等 文字层：可修改橙色参数来指定文字相对于容器层原点的起始坐标，文字效果，颜色等 天边有一对双星, 那是我梦中的眼睛。 山中有一片晨雾, 那是你昨夜的柔情。 我要登上 登上山顶 去寻觅雾中的身影。 我要跨上 跨上骏马 去追逐遥远的星星。 天边有一棵大树, 那是我心中的绿萌。 远方有一座高山, 那是你博大的胸襟。 我要到树下 树下采拮 去编织美丽的憧憬。 我要到山下 山下放牧 去追寻你的足印。 我愿与你策马同行，奔驰在草原的深处。 我愿与你展翅飞翔，遨游在蓝天的穹谷。 播放器层：可修改橙色参数来指定播放器相对于容器层原点的起始坐标，音频文件地址，播放器的透明度，宽高等。 滚动式动画层（从左到右的两匹奔马效果）：这里使用了把内嵌的两个动画层水平向右滚动的技巧来实现奔马效果，注意在marquee层内的两个div动画层前面一定要加一个 空格文本代码作为前导，用这样的方式可以实现任何面板的滚动。修改橙色参数可指定滚动内容相对于容器层原点的起始坐标，滚动速度，滚动窗口的尺寸等          滚动内嵌动画层1 （奔马1）: 动画宽度需使用两倍于滚动宽度的尺寸，坐标是相对于父层的。   滚动内嵌动画层2 （奔马2）：动画宽度需使用两倍于滚动宽度的尺寸，坐标是相对于父层的。

[返回顶部]
小试验

发送悄悄话
我的群组
第7楼
2009-03-24 17:25:41
发表于: 2009-03-24 17:25:41 [引用]

范例三：
明净的天空
朗诵/制贴：五七
明净的天空  作者:逸野
总有人发问，当今的网络烟尘漫天，还会有净土吗？总有人感慨，现在网上的人大都浮躁虚荣，还能找到真实吗？那么，让我静静地看着你的眼睛，诚恳地对你说：“有！”
一路走来，我们经过了太多的成功与挫折；品味生活，我们咀嚼了太多的喜悦和忧伤。无论你是功成名就，还是壮志未酬；无论你是古稀老者，还是翩翩少年，你的内心，始终向往崇高，始终梦想不灭。我们常常追问：有没有一座桥梁，让我们抵达梦想的花园。
岁月蹉跎，流年似水，我们感受了生活的丰富多彩；阴晴圆缺，沧海桑田，我们领悟了生命的刚强和美好。满腔的豪情，如水的温情，向谁倾诉？壮怀激烈的澎湃，和风细雨的宁静，用什么抒发？我们常常困惑：有没有一艘航船，渡我们到理想的彼岸？
终于，我们拥抱了文学；终于，我们选择了朗诵！文学，就是梦想的翅膀，朗诵，就是渡往彼岸的航船。这条船上，撒满了鲜花；这条船上，有我们志同道合的兄弟姐妹。当我们一次次被真情所感动，当我们一番番为人生的美丽而泪流满面，头顶的天空，心灵的天空，都是那样的澄澈明净，鲜花盛开。
让我们携手，让我们拥抱，让我们在这片明净的天空下尽情地歌唱吧！
[返回顶部]
小试验

发送悄悄话
我的群组
第8楼
2009-03-24 17:28:14
发表于: 2009-03-24 17:28:14 [引用]

范例三代码：

明净的天空 朗诵/制贴：五七 明净的天空  作者:逸野 总有人发问，当今的网络烟尘漫天，还会有净土吗？总有人感慨，现在网上的人大都浮躁虚荣，还能找到真实吗？那么，让我静静地看着你的眼睛，诚恳地对你说：“有！” 一路走来，我们经过了太多的成功与挫折；品味生活，我们咀嚼了太多的喜悦和忧伤。无论你是功成名就，还是壮志未酬；无论你是古稀老者，还是翩翩少年，你的内心，始终向往崇高，始终梦想不灭。我们常常追问：有没有一座桥梁，让我们抵达梦想的花园。 岁月蹉跎，流年似水，我们感受了生活的丰富多彩；阴晴圆缺，沧海桑田，我们领悟了生命的刚强和美好。满腔的豪情，如水的温情，向谁倾诉？壮怀激烈的澎湃，和风细雨的宁静，用什么抒发？我们常常困惑：有没有一艘航船，渡我们到理想的彼岸？ 终于，我们拥抱了文学；终于，我们选择了朗诵！文学，就是梦想的翅膀，朗诵，就是渡往彼岸的航船。这条船上，撒满了鲜花；这条船上，有我们志同道合的兄弟姐妹。当我们一次次被真情所感动，当我们一番番为人生的美丽而泪流满面，头顶的天空，心灵的天空，都是那样的澄澈明净，鲜花盛开。 让我们携手，让我们拥抱，让我们在这片明净的天空下尽情地歌唱吧！

[返回顶部]
小试验

发送悄悄话
我的群组
第9楼
2009-03-26 13:05:29
发表于: 2009-03-26 13:05:29 [引用]

范例三代码层次结构解析:
花样边框层: 这里把最内层的Table纵向划分为三大格，第一格放背景图，第二格放分割线，第三格放朗诵文本

第一格（图片格） 第二格（分割线）   第三格（文本格）   背景图片层： 动画容器层： 标题文本层：   明净的天空 朗诵/制贴：五七 花瓣动画层：   小船动画层： 播放器层：   文本层： 明净的天空  作者:逸野 总有人发问，当今的网络烟尘漫天，还会有净土吗？总有人感慨，现在网上的人大都浮躁虚荣，还能找到真实吗？那么，让我静静地看着你的眼睛，诚恳地对你说：“有！”/> 一路走来，我们经过了太多的成功与挫折；品味生活，我们咀嚼了太多的喜悦和忧伤。无论你是功成名就，还是壮志未酬；无论你是古稀老者，还是翩翩少年，你的内心，始终向往崇高，始终梦想不灭。我们常常追问：有没有一座桥梁，让我们抵达梦想的花园。 岁月蹉跎，流年似水，我们感受了生活的丰富多彩；阴晴圆缺，沧海桑田，我们领悟了生命的刚强和美好。满腔的豪情，如水的温情，向谁倾诉？壮怀激烈的澎湃，和风细雨的宁静，用什么抒发？我们常常困惑：有没有一艘航船，渡我们到理想的彼岸？ 终于，我们拥抱了文学；终于，我们选择了朗诵！文学，就是梦想的翅膀，朗诵，就是渡往彼岸的航船。这条船上，撒满了鲜花；这条船上，有我们志同道合的兄弟姐妹。当我们一次次被真情所感动，当我们一番番为人生的美丽而泪流满面，头顶的天空，心灵的天空，都是那样的澄澈明净，鲜花盛开。 让我们携手，让我们拥抱，让我们在这片明净的天空下尽情地歌唱吧！

[返回顶部]
小试验

发送悄悄话
我的群组
第10楼
2009-03-26 13:06:42
发表于: 2009-03-26 13:06:42 [引用]

范例四：
轻 轻 的 我 走 了，
正 如 我 轻 轻 的 来；
我 轻 轻 的 招 手，
作 别 西 天 的 云 彩。
那 河 畔 的 金 柳，
是 夕 阳 中 的 新 娘；
波 光 里 的 艳 影，
在 我 的 心 头 荡 漾。
软 泥 上 的 青 荇，
油 油 的 在 水 底 招 摇；
在 康 河 的 柔 波 里，
我 甘 心 做 一 条 水 草！
那 榆 荫 下 的 一 潭，
不 是 清 泉，
是 天 上 虹；
揉 碎 在 浮 藻 间，
沉 淀 着 彩 虹 似 的 梦。
寻 梦 ？ 撑 一 支 长 篙，
向 青 草 更 青 处 漫 溯；
满 载 一 船 星 辉，
在 星 辉 斑 斓 里 放 歌。
但 我 不 能 放 歌，
悄 悄 是 别 离 的 笙 箫；
夏 虫 也 为 我 沉 默，
沉 默 是 今 晚 的 康 桥！
悄 悄 的 我 走 了，
正 如 我 悄 悄 的 来；
我 挥 一 挥 衣 袖，
不 带 走 一 片 云 彩。
[返回顶部]
小试验

发送悄悄话
我的群组
第11楼
2009-03-26 13:09:17
发表于: 2009-03-26 13:09:17 [引用]

范例四代码：

轻 轻 的 我 走 了， 正 如 我 轻 轻 的 来； 我 轻 轻 的 招 手， 作 别 西 天 的 云 彩。 那 河 畔 的 金 柳， 是 夕 阳 中 的 新 娘； 波 光 里 的 艳 影， 在 我 的 心 头 荡 漾。 软 泥 上 的 青 荇， 油 油 的 在 水 底 招 摇； 在 康 河 的 柔 波 里， 我 甘 心 做 一 条 水 草！ 那 榆 荫 下 的 一 潭， 不 是 清 泉， 是 天 上 虹； 揉 碎 在 浮 藻 间， 沉 淀 着 彩 虹 似 的 梦。 寻 梦 ？ 撑 一 支 长 篙， 向 青 草 更 青 处 漫 溯； 满 载 一 船 星 辉， 在 星 辉 斑 斓 里 放 歌。 但 我 不 能 放 歌， 悄 悄 是 别 离 的 笙 箫； 夏 虫 也 为 我 沉 默， 沉 默 是 今 晚 的 康 桥！ 悄 悄 的 我 走 了， 正 如 我 悄 悄 的 来； 我 挥 一 挥 衣 袖， 不 带 走 一 片 云 彩。

感谢小声音的热情帮助和寒江雪的耐心指导。欢迎大家多提意见！

[返回顶部]
小试验

发送悄悄话
我的群组
第12楼
2009-03-26 13:44:11
发表于: 2009-03-26 13:44:11 [引用]

范例四文字特效实现:
轻 轻 的 我 走 了，
正 如 我 轻 轻 的 来；
我 轻 轻 的 招 手，
作 别 西 天 的 云 彩。
那 河 畔 的 金 柳，
是 夕 阳 中 的 新 娘；
波 光 里 的 艳 影，
在 我 的 心 头 荡 漾。
软 泥 上 的 青 荇，
油 油 的 在 水 底 招 摇；
在 康 河 的 柔 波 里，
我 甘 心 做 一 条 水 草！
那 榆 荫 下 的 一 潭，
不 是 清 泉，
是 天 上 虹；
揉 碎 在 浮 藻 间，
沉 淀 着 彩 虹 似 的 梦。
寻 梦 ？ 撑 一 支 长 篙，
向 青 草 更 青 处 漫 溯；
满 载 一 船 星 辉，
在 星 辉 斑 斓 里 放 歌。
但 我 不 能 放 歌，
悄 悄 是 别 离 的 笙 箫；
夏 虫 也 为 我 沉 默，
沉 默 是 今 晚 的 康 桥！
悄 悄 的 我 走 了，
正 如 我 悄 悄 的 来；
我 挥 一 挥 衣 袖，
不 带 走 一 片 云 彩。
代码:

[返回顶部]
小试验

发送悄悄话
我的群组
第13楼
2009-04-13 19:27:18
发表于: 2009-04-13 19:27:18 [引用]

范例五（在图片上用Photoshop挖透明空洞并嵌入YouTube视频）：
[返回顶部]
小试验

发送悄悄话
我的群组
第14楼
2009-04-13 19:30:19
发表于: 2009-04-13 19:30:19 [引用]

范例五代码：

[返回顶部]
小试验

发送悄悄话
我的群组
第15楼
2009-04-13 19:31:57
发表于: 2009-04-13 19:31:57 [引用]

范例五代码结构分析:
底色边框层1
cellspacing="4" cellpadding="0" border="10" bordercolor="#003399" >

底色边框层2: 这里没有用背景图，我们将在后面把它覆盖在video上

动画容器层：将坐标原点定位于框架左上角 YouTube视频层：坐标一定要和背景图上用PS挖的透明洞位置相符，注意黑体的参数必须按原样设置，因为video会被透明图片盖住，接收不到鼠标的消息，无法点击开始播放，所以必须要用自动循环播放的参数，就是Video代码中的粗体部分。 图片层：这个png是用PS处理过的中间有透明空洞的图片，把它的起始坐标设为(0,0)，从而全部覆盖整个框架，而下层的video则恰好可以通过透明空洞看到。png和gif都能做透明图，但是在色彩上png更加逼真，而gif只有256色，所以选择png的格式保存比较好。 浮云动画层：云层的起始坐标为(0,0)，它漂浮在所有画面之上。

[返回顶部]
小试验

发送悄悄话
我的群组
第16楼
2009-04-14 20:11:02
发表于: 2009-04-14 20:11:02 [引用]

更多Youtube嵌入范例请参考:
http://groups.wenxuecity.com/discussion.php?gid=727&pid=23642
[返回顶部]
小试验

发送悄悄话
我的群组
第17楼
2009-04-19 23:22:58
发表于: 2009-04-19 23:22:58 [引用]

范例六：
朗诵：丁香结 无鸣
世界上最远的距离
泰戈尔
世界上最远的距离
不是 生与死的距离
而是 我站在你面前
你不知道我爱你
世界上最远的距离
不是 我站在你面前
你不知道我爱你
而是 爱到痴迷
却不能说我爱你
世界上最远的距离
不是 我不能说我爱你
而是 想你痛彻心脾
却只能深埋心底
世界上最远的距离
不是 我不能说我想你
而是 彼此相爱
却不能够在一起
世界上最远的距离
不是 彼此相爱
却不能够在一起
而是明知道真爱无敌
却装作毫不在意
世界上最远的距离
不是 树与树的距离
而是 同根生长的树枝
却无法在风中相依
世界上最远的距离
不是 树枝无法相依
而是 相互了望的星星
却没有交汇的轨迹
世界上最远的距离
不是 星星之间的轨迹
而是 纵然轨迹交汇
却在转瞬间无处寻觅
世界上最远的距离
不是 瞬间便无处寻觅
而是 尚未相遇
便注定无法相聚
世界上　最远的距离
是鱼与飞鸟的距离
一个在天,
一个　却深潜　海底
[返回顶部]
小试验

发送悄悄话
我的群组
第18楼
2009-04-19 23:24:41
发表于: 2009-04-19 23:24:41 [引用]

范例六代码：

朗诵：丁香结 无鸣 世界上最远的距离 泰戈尔

世界上最远的距离 不是 生与死的距离 而是 我站在你面前 你不知道我爱你 世界上最远的距离 不是 我站在你面前 你不知道我爱你 而是 爱到痴迷 却不能说我爱你 世界上最远的距离 不是 我不能说我爱你 而是 想你痛彻心脾 却只能深埋心底 世界上最远的距离 不是 我不能说我想你 而是 彼此相爱 却不能够在一起 世界上最远的距离 不是 彼此相爱 却不能够在一起 而是明知道真爱无敌 却装作毫不在意 世界上最远的距离 不是 树与树的距离 而是 同根生长的树枝 却无法在风中相依 世界上最远的距离 不是 树枝无法相依 而是 相互了望的星星 却没有交汇的轨迹 世界上最远的距离 不是 星星之间的轨迹 而是 纵然轨迹交汇 却在转瞬间无处寻觅 世界上最远的距离 不是 瞬间便无处寻觅 而是 尚未相遇 便注定无法相聚 世界上　最远的距离 是鱼与飞鸟的距离 一个在天,　 一个　却深潜　海底

[返回顶部]
小试验

发送悄悄话
我的群组
第19楼
2009-04-19 23:25:34
发表于: 2009-04-19 23:25:34 [引用]

范例六代码结构分析：
底色边框表: 这里我们把最外层的table划分为三行，第一行里套了一个背景图的table，里面又嵌了一个云彩的Flash； 第二行是播放器，朗诵者和标题； 第三行是诗文，而其格式又是由一个内嵌的一行两列的table来控制的。

第一行:背景图

第二行:播放器+标题

 
第三行:双排诗文
下套了两个

背景图片层: 动画层：

朗诵：丁香结 无鸣 世界上最远的距离 泰戈尔

双排诗文表格：双排诗文是通过一个一行两列的表格实现的，就是一个

，每一列占总宽度的50%，总宽度可以设置一个适当的值来控制整体的紧密。 第一列：定义左侧诗文,这里的左侧padding使得该列文字向中间靠拢 第二列：定义右侧诗文，这里的左侧padding使得该列文字向右偏移，可以适当调整这些参数来控制整体的居中和紧凑度 世界上最远的距离 不是 生与死的距离 而是 我站在你面前 你不知道我爱你 世界上最远的距离 不是 我站在你面前 你不知道我爱你 而是 爱到痴迷 却不能说我爱你 世界上最远的距离 不是 我不能说我爱你 而是 想你痛彻心脾 却只能深埋心底 世界上最远的距离 不是 我不能说我想你 而是 彼此相爱 却不能够在一起 世界上最远的距离 不是 彼此相爱 却不能够在一起 而是明知道真爱无敌 却装作毫不在意 世界上最远的距离 不是 树与树的距离 而是 同根生长的树枝 却无法在风中相依 世界上最远的距离 不是 树枝无法相依 而是 相互了望的星星 却没有交汇的轨迹 世界上最远的距离 不是 星星之间的轨迹 而是 纵然轨迹交汇 却在转瞬间无处寻觅 世界上最远的距离 不是 瞬间便无处寻觅 而是 尚未相遇 便注定无法相聚 世界上　最远的距离 是鱼与飞鸟的距离 一个在天,　 一个　却深潜　海底

[返回顶部]
小试验

发送悄悄话
我的群组
第20楼
2009-04-26 20:09:53
发表于: 2009-04-26 20:09:53 [引用]

范例七：
[返回顶部]
小试验

发送悄悄话
我的群组
第21楼
2009-04-26 20:38:21
发表于: 2009-04-26 20:38:21 [引用]

范例七代码：

[返回顶部]
小试验

发送悄悄话
我的群组
第22楼
2009-04-26 23:55:52
发表于: 2009-04-26 23:55:52 [引用]

范例七代码层次结构解析：
这个帖子的基本原理是：把所有的缩略图和每张缩略图对应的显示内容层都并列地放在容器层中，而内容层在初始状态是隐藏的，只有当用户点击缩略图时，其对应的内容层才会显示在预先定义好的位置上。
程序控制前导代码段：这部分是本模板必需的控制代码，只要原样复制就可以了，唯一可能修改的地方是代码中的黑体部分，这是用来指定缩略图大小的，这个例子用了１５０ｘ１００的缩略图。另外，要注意在群组发帖时必须把所有的代码连成一行，也就是要把这里的换行全部删除，否则代码会被ＷＸＣ编辑器篡改，而不能正确执行。


背景图片层: 这是最外层的背景，这里用了div,大家也可以用熟悉的table代码

动画容器层: 定位原点，所有内容都会放置于容器层中

缩略图1：
这里红色的代码是必须原样复制的，每个缩略图都要定义class="thumb"，它对应了前导ＣＳＳ代码中的相应定义。
黑色的粗体部分用来指定缩略图的位置和地址，这里我们的缩略图都制作成了１５０ｘ１００的小图片。
当鼠标点击缩略图时，会触发onClick事件代码，调用playContent函数，这里必须指定两个参数（蓝色部分）：
第一个参数是要显示的内容板块的ｉｄ，每个缩略图对应的内容ｉｄ都是不同的，内容板块的ｄｉｖ我们将在后面定义。
第二个参数是对应的音频文件地址，这里我们必须使用统一的全局播放控制程序，所以在每张帖子上不要加载播放器，而只要把文件地址放在这个函数的参数里就可以了。

缩略图2：

缩略图3：

缩略图4：

内容显示层１：
这里红色的代码是必须原样复制的，每个内容板块都要定义class="hideContent"，它在初始状态是隐藏的，只有当对应的缩略图被点击时，才会显示在正确的位置上。
蓝色的部分就是我们前面定义缩略图的playContent函数调用时需要传入的ｉｄ参数，这样就把缩略图与相应的内容联系在一起。
黑色的粗体部分用来指定显示内容的位置和大小，根据缩略图的排列和整体布局，在这个例子中我们为内容板块预留了800x600的空间，这里显示内容的宽高可以根据帖子的具体情况任意指定，只要不超过800x600就不会破坏整体布局。下面的四个显示层我用了宽度800左右为基准值，而高度则根据图片的比例每张帖子都有所不同。

帖子1的代码（这里可以嵌任何代码，注意不要带播放器，因为音频播放已经由全局代码控制）
这张帖子只有一个Flash

 
内容显示层2：

帖子2的代码（这里可以嵌任何代码，注意不要带播放器，因为音频播放已经由全局代码控制）
这张帖子用了我们熟悉的模板，table里嵌了两个动画。我们以前的范例都是在动画外面包一层div做定位，为了简化代码，对单一元件的定位我们可以直接把style属性加入要定位的tag中，在这里就直接把style加入了embed中，来控制其位置。

 
内容显示层3：

帖子3的代码（这里可以嵌任何代码，注意不要带播放器，因为音频播放已经由全局代码控制 ）

 
内容显示层4：

帖子4的代码（这里可以嵌任何代码，注意不要带播放器，因为音频播放已经由全局代码控制 ）

 

最后这句代码要原样复制的，这是控制声音播放的程序所必需的。