HTML音乐帖子

∮单调的？∮ · 发表于 2006-5-17 19:59

我想学HTML音乐帖子
不知道会的人,能不能出一个教程,
跪谢....

微笑鱼 · 发表于 2006-5-18 10:33

直接找版主啦

跑龙套的 · 发表于 2006-5-18 18:44

本论坛暂时不支持HTML代码，只支持YBB代码，详情请参阅本论坛的『帮助』。
但，您可以在其他支持HTML代码的论坛编辑代码并成型后，直接将成型的帖子复制到本论坛来，这种方法本论坛是支持的。

anyang · 发表于 2006-5-18 18:50

么的教程只有代码网上去找一大堆

跑龙套的 · 发表于 2006-5-18 18:56

对，想学HTML代码的朋友，可以去网上搜索关于此类的网页，应该会有所收获～

∮单调的？∮ · 发表于 2006-5-18 19:50

[blockquote]引用：

原文由 [B]跑龙套的[/B] 发表于 [I]2006-5-18 18:56:00[/I] :
对，想学HTML代码的朋友，可以去网上搜索关于此类的网页，应该会有所收获～

[/blockquote]不KI,人苯了

蕃茄锅巴 · 发表于 2006-5-18 19:53

会一点点呢！！要不要我。。。
呵呵！~~~

anyang · 发表于 2006-5-18 21:06

你要教程网上什么教程都有

∮单调的？∮ · 发表于 2006-5-18 21:11

[blockquote]引用：

原文由 [B]anyang[/B] 发表于 [I]2006-5-18 21:06:46[/I] :
你要教程网上什么教程都有

[/blockquote]

我要做像农歌别人做的贴子的教程.
这个是什么教程哦.

anyang · 发表于 2006-5-18 21:17

[color=#F7D75A);][B]童话[/B]

忘了有多久
再没听到
你对我说你最爱的故事

我想了很久
我开始慌了
是不是我又做错了什么

你哭着对我说
童话里都是骗人的
我不可能是你的王子

也许你不会懂
从你说爱我以后
我的天空星星都亮了

我愿变会变成童话里
你爱的那个天使
张开双手变成翅膀守护你

你要相信
相信我们会象童话故事里
幸福和快乐是结局

我会变会变成童话里
你爱的那个天使
一起写我们的结局

音乐:童话/光良

编缉:雪夜寒星

anyang · 发表于 2006-5-18 21:17

就拿这个帖子来说吧
以上是效果

anyang · 发表于 2006-5-18 21:18

◇ 源码 (注释):
<html><head><title>童话</title><bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3></head>
<body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg">
<TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff"><BR><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line1.gif" width="343" height="77" border="0"><BR><BR><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童话</B></FONT><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line2.gif" width="240" height="54" border="0"><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD> <IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE> <br><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font> <br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic01.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我想了很久<br>我开始慌了<br>是不是我又做错了什么 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic02.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>你哭着对我说<br>童话里都是骗人的<br>我不可能是你的王子</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic03.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>也许你不会懂<br>从你说爱我以后<br>我的天空星星都亮了</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic04.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>我愿变会变成童话里<br>你爱的那个天使<br>张开双手变成翅膀守护你</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic05.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>你要相信<br>相信我们会象童话故事里<br>幸福和快乐是结局 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic06.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我会变会变成童话里<br>你爱的那个天使<br>一起写我们的结局</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic07.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100"><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font> </TD><TD><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_moon2.jpg" width="202" height="189" border="0"></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</BODY> </HTML>

anyang · 发表于 2006-5-18 21:18

　◇ 制作步骤:
　◆ 1>准备工作: 先将做帖所需的图片和素材上传到有效空间(比如论坛),所需的文字用记事本保存到电脑文件夹中,以及音乐找到有效的连接地址.

　◆ 2>用记事本编写代码: 首先请大家直接复制上面源码注释部分的代码到发帖栏点击预览看看是什么效果？那么，大家按照注释改变相应的图片或者文字再预览看看有什么不同了(编写代码时注释部分可以不要）。编写相应的代码并不是叫你一个一个符号的打出来,大家可以直接复制图片、文字等相应的HTML格式语法套入自己所用的图片和文字就可以了。再在电脑中新建一个记事本用来编写代码,把编写好的代码保存为文件名.html或者文件名.htm格式，在电脑中可以直接点击该文件查看效果(在效果页面上点击右键选择查看源文件就可以打开该页面的源码记事本)。之所以让大家用记事本编辑代码是由于网页中ENTER的换行不会影响最终效果，把各段代码间格开来大家看起来比较清晰，也方便编辑，而且保存到电脑里作为备份以免因为失误造成丢失。注明：编写代码请用英文打字法（大小写不限），文字部分就转换为中文（智能ABC、五笔或其它）打字法。

　◆ 3>论坛发表帖子: 全选（Ctrl+A）记事本里的源码复制（Ctrl+C）,粘帖（Ctrl+V）到论坛的发帖栏里。再把所有的空行和空格删除，以保持所有的代码连在一起（也就是不能有因敲击Enter回车键而造成的断行或空行）。写上主题，预览查看效果，如果没有问题就可以发表了。

anyang · 发表于 2006-5-18 21:19

　◇ 源码解析:（这里只是针对论坛做帖）
　◆ 1>背景
<body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg">内容部分</BODY> <BODY> 常用参数解说：
background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。
bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。
text="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black"

anyang · 发表于 2006-5-18 21:19

◆ 2>表格

背景使用的表格: <TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff">内容部分</TD></TR></TBODY></TABLE>
图片边框使用的表格: <TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD>内容部分</TD></TR></TBODY></TABLE>
落款部分使用的表格: <TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100">文字格</TD><TD>图片格</TD></TR></TBODY></TABLE>>
<TABLE>相关参数解说：
<TR>
指表格列数
<TD>
指表格行数
align="center"
表格的摆放位置（水平），可选值为： left, right, center
background="kos_bg5.jpg"
表格的背景，与 bgcolor 不要同用。可以在<td>中与<TABLE>中分别使用。
border="1"
表格边框厚度，不同浏览器有不同的内定值，故请指明。
cellpadding="0"
文字与格线的距离
cellspacing="60"
表格格线厚度
bordercolordark="#D66D31"
表格边框背光部分的颜色。（效果帖中背景边框粉红色线部分）
bordercolorlight="#EF82BD"
表格边框向光部分的颜色。（效果帖中背景边框桔红色部分）
width="520"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。可以在<td>中与<TABLE>中分别使用。
bgcolor="#Ffffff"
表格底色，与 background 不要同用。可以在<td>中与<TABLE>中分别使用
bordercolor="#F7D75A"
表格边框颜色
注明：有些参数在<TABLE>与<TD>中可以同用，产生不同效果。

◆ 3>文字

主题文字: <FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童话</B></FONT>
相关参数解说：
COLOR: #EF598C 文字颜色
FILTER: glow(color=#F7D75A) 发光颜色
FONT-FAMILY: 华文彩云文字字体
FONT-SIZE: 40pt 文字大小
LINE-HEIGHT: 150% 区域的高度
WIDTH: 100% 文字区域的宽度
注明：主题文字是用CSS滤镜实现的发光字效果与css语法和html语法的编写上有所区别，有关CSS滤镜效果将在以后的教程中作详细的说明。

<font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font>
<font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font>
相关参数解说：
face=宋体　字体
size=2　文字大小
color=#DE3C73　文字颜色

◆ 4>图片

实例中，分隔线、图片和装饰图都是应用的图片标签（废话，都是图片当然用图片标签），下面以内容图片做参照说明：
<IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0">
相关参数解说：
src="pic00.jpg"　图片连接地址
width="260"　图片宽
height="377"　图片高

◆ 5>音乐

<bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3> <BGSOUND> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。
相关参数解说：
src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。
autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。

◆ 6>总结

　　除以上所说明的代码以外实例还用到了一个排版标记<br>，该标记称为换行标记。作用：令字、画、表格等显示于下一行。

　　关与注释部分，大家可以先编缉设定好一张图片和所配文字的代码，由于其它图片和文字所用到的效果相同，所以只用复制粘帖多次，把相应的图片和文字进行更换就可以了。

账号		自动登录	找回密码
密码			立即注册