音乐代码帖傻瓜教程,不懂代码也可以做帖子.(随时更新)
[align=center][size=5][b][color=royalblue]索引[/color][/b][/size]
[b][font=楷体_GB2312][size=3][color=royalblue]如何用现成边框和在线工具制作代码贴
如何使用全屏代码
如何上传和引用代码贴
文字特效实例
播放器特效实例
透明FLASH修饰及使用方法
图片特效实例[/color][/size][/font][/b][/align][b][font=楷体_GB2312][size=3][color=#4169e1][/color][/size][/font][align=left]
[/b]
[font=仿宋_GB2312][size=2]对于新手来说,从HTML代码基础知识开始学习制作很枯燥,也不容易掌握,毕竟我们的目的是发帖子而非网页制作.其实,借助一些工具和一些基本的标准代码,不懂代码的朋友也可以快速掌握代码贴技巧.
所谓代码音乐贴,无外乎几张图片,一个边框套装,一些特效文字,一个比较漂亮的播放器,一些修饰性的透明FLASH,外加一点小小的创意.如果你是PS高手,做出的效果会更精彩.
下面老冬将分类介绍制作代码贴的几个基本步骤,由于现在对打字很不感冒,一次写不了太多,想学的朋友请不要着急,我会陆续更新.
[/size][/font][size=2][font=仿宋_GB2312][b]一,关于边框
[/b]
边框大家都不陌生,自己制作边框很费力也不一定好看,其实网络上有很多现成的素材,而且都是非常精彩的.这里就不提供素材连接了,大家可以在百度输入"现成边框""网页套装"等词语自己搜索,资源巨多.
找到自己喜欢的边框后,就可以使用一些小工具来制作帖子了,下面介绍第一款制作工具:HTML代码在线编辑器
[/font][/size][url=http://www.doryuen.net/article/editor/editor.asp][b][font=仿宋_GB2312][size=2][color=blue]点击进入[/color][/size][/font][/b][/url]
[font=仿宋_GB2312][size=2]打开这个工具,把你找到的边框整体复制,粘贴到编辑器的面版中来,按京华论坛的可视化编辑方法来直接粘贴图片,文字,超级连接等,用工具自带的功能加入音乐,一个基本的代码贴就做成了.如果你想在边框中加入图片特效,文字特效,特效播放器,则可选取现成的特效代码,在下边这个工具中打开,然后复制特效效果,直接粘贴到HTML代码在线编辑器的边框中来.制作完成后,点选编辑器的源代码模式,复制代码拿到论坛来发表,OK鸟.
[/size][/font][url=http://aspx.blogdriver.com/aspx/223269.html][b][font=仿宋_GB2312][size=2][color=blue]点击进入[/color][/size][/font][/b][/url]
[font=仿宋_GB2312][size=2]现成的特效代码,我会在下面提供一部分,你也可以到一些素材网站上寻找.至于这两款工具,你也可以自己在百度上搜索"HTML代码编辑器",很多.[/size][/font][/align] [font=仿宋_GB2312][b][size=2]二,关于全屏显示[/size][/b]
[/font][size=2][font=仿宋_GB2312]在论坛里,发现很多朋友发的宽屏代码帖被左右边条掩盖,不能完全显示,实际上大家不必关闭广告边条,也用不着换宽屏显示器,一段代码就完全解决了,说明:这个全屏显示代码是可以完全套用的,不必在原贴代码中费力修改,呵呵.
代码:
第一种方法：
<TABLE id=table1 style="[color=red]LEFT: -180px[/color]; [color=red]WIDTH: 800[/color]px; POSITION: relative; [color=red]TOP: 0px[/color]" cellSpacing=10 align=center background=http://cry.shidabbs.com/home/bbsjc/images/jcbj01.jpg border=0><TR><TD>
[b]这里插入帖子内容。[/b]
</td></tr></table>
第二种方法：（这种适用与内嵌页面）
<DIV style="[color=red]LEFT: -180px[/color]; [color=red]WIDTH: 800px[/color]; POSITION: relative; [color=red]TOP: 90px[/color]">
[/font][font=仿宋_GB2312][b]在这里插入整个帖子内容
[/b]</div>
红色部分需要自己来根据情况修改,主要是使帖子更美观.
（LEFT: -180px 左距，数值越大与左边距离越大。WIDTH: 800px 帖子宽度，一般全屏都是800像素。TOP: 90px" 上距 数值越大与IE上面的距离越大。其中数值都可以自行修改。）[/font][/size] [size=2][font=仿宋_GB2312][b]三,关于帖子上传
[/b]代码帖子做好后,你可以把代码直接发到论坛来,也可以保存成一个网页文件,上传后再引用到论坛来,这样做的好处在于,与朋友分享的时候可以直接给他网页帖子地址而不必给论坛主题地址,省去很多麻烦.另外几乎所有论坛出于安全考虑都屏蔽了一些特殊脚本,如果直接发代码,很多特效都不能显示,上传后引用过来就不存在这个问题了.
帖子的保存与上传
帖子做好后,把整个代码复制,打开记事本,保存为一个后缀为.html的网页文件,去旧帖中心或者新手上路开贴上传(千龙只有这两个版可以上传此类格式的文件),上传完毕后点击该文件,复制浏览器地址栏中的地址(不要在文件属性中获取地址,因为那个地址只能在本论坛显示,千龙上传的附件是有保护的,拿到其他论坛或空间博客就不能显示了),用以下代码发表到论坛来就可以了.
<DIV style="LEFT: -75px; WIDTH: 850px; POSITION: relative; TOP: 0px"><IFRAME marginWidth=0 marginHeight=0 src="[color=red]http://bbsimg.qianlong.com/attachments/day_080404/20080404_672c4ba52d0df8730b23BTMztCWhaT6S.attach[/color]" frameBorder=0 width=1024 scrolling=no height=780></IFRAME></DIV>
或者
<A href="[color=red]http://bbsimg.qianlong.com/attachments/day_080404/20080404_672c4ba52d0df8730b23BTMztCWhaT6S.attach[/color]" target=_blank><FONT color=royalblue size=5><STRONG>全屏欣赏</STRONG></FONT></A>
<DIV style="LEFT: -75px; WIDTH: 850px; POSITION: relative; TOP: 0px"><IFRAME marginWidth=0 marginHeight=0 src="[color=red]http://bbsimg.qianlong.com/attachments/day_080404/20080404_672c4ba52d0df8730b23BTMztCWhaT6S.attach[/color]" frameBorder=0 width=1024 scrolling=no height=780></IFRAME></DIV>
[/font][/size][font=仿宋_GB2312][size=2]红色部分为上传帖子的地址,直接替换一下就OK鸟.
对于文件的保存,如果你不想在千龙上传,也可以保存为.txt格式,或者gif,jpg等格式,上传后同样可以显示.在千龙上传的好处是,连接保存的时间长,有保证.[/size][/font] 四,关于文字特效<BR>
文字特效多种多样,本节只介绍一些可以套用的特效实例<BR>
1,打字效果:<BR>
<script language="JavaScript1.2">
var it=0
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
document.all.typing.style.visibility="visible"
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.onload=initialize
</script>
<table width="100%" border="10">
<tr>
<td><span id="typing" style="visibility:hidden" align="left">
欢迎光临养眼贴图,这里是你我共同的网上家园!
</span>
</td>
</tr>
</table><BR>
特效代码:<BR>**** Hidden Message ***** 2,彩色字体
<P align=center><STRONG><FONT size=5><FONT face=华文新魏><FONT color=#ff0000>衣</FONT><FONT color=#ff8900>带</FONT><FONT color=#92c000>渐</FONT><FONT color=#00c024>宽</FONT><FONT color=#00c0da>终</FONT><FONT color=#0053ff>不</FONT><FONT color=#4800ff>悔</FONT><FONT color=#ff00ff>，</FONT><FONT color=#ff00ff>为</FONT><FONT color=#4900ff>伊</FONT><FONT color=#0052ff>消</FONT><FONT color=#00c0db>得</FONT><FONT color=#00c025>人</FONT><FONT color=#91c000>憔</FONT><FONT color=#ff8a00>悴</FONT><FONT color=#ff0000>。</FONT></FONT></FONT></STRONG></P>
特效代码**** Hidden Message ***** 3,阴影字体
[img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_585b13d6509fb485ff17OlWGr2Gv7u7d.jpg[/img]
代码:
**** Hidden Message ***** 4,圈边字体
[img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_900d5da61b5473ee9a14VuEwK6RPEUxZ.jpg[/img]
代码:
**** Hidden Message ***** 5,投影字体
[img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_211617839ecbfa737883s8NVCxgtiwyg.jpg[/img]
代码:
**** Hidden Message ***** 6,抛射字体
[img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_955841ce4fb1a00b6c12jzh5DdTGKfPb.jpg[/img]
代码:
**** Hidden Message ***** 7,带背景的闪光字体（背景图片可以换）
<P align=center><BR>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://sese.blog.enorth.com.cn/attachment/pic/314765.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=http://sese.blog.enorth.com.cn/attachment/pic/314766.gif>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699><B>养眼贴图 心灵的港湾</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
代码:
**** Hidden Message ***** 七、向上移动的文字
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8 direction=up>
<P align=center><FONT face=隶书 color=#ff0000 size=6><B>养眼贴图欢迎您</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
代码:
**** Hidden Message ***** 9,向下移动的文字
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8 direction=down>
<P align=center><FONT face=隶书 color=#ff0000 size=6><B>养眼贴图欢迎您</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
代码
**** Hidden Message ***** 11,向左移动的文字
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>养眼贴图欢迎您</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
代码:
**** Hidden Message ***** 12,向右移动的文字
<P align=center><BR></P>
<P align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=10 direction=right>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>养眼贴图欢迎您</B></FONT></P></MARQUEE></P>
代码:
**** Hidden Message ***** 12,由中间向两边移动的文字和图像
<P align=center> </P>
<P align=center><FONT face=华文彩云 color=#ee110e size=7>
<MARQUEE width=200 height=50><IMG onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick=javascript:window.open(this.src); src="http://freequick.myrice.com/rw/ts/43.gif" onload="javascript:if(this.width>screen.width-320)this.style.width=screen.width-320;">养眼贴图</FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=7><FONT face=华文彩云 color=#ee1111 size=7>
<MARQUEE direction=right width=200 height=50>养眼贴图<IMG onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick=javascript:window.open(this.src); src="http://freequick.myrice.com/rw/ts/23.gif" onload="javascript:if(this.width>screen.width-320)this.style.width=screen.width-320;"></FONT></MARQUEE></FONT></FONT></P></FONT>
**** Hidden Message ***** 13.由上下向中间移动的字体
<P align=center> </P>
<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=7><B>养眼贴图</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=7><B>养眼贴图</FONT></CENTER></B></MARQUEE></CENTER></CENTER>
代码:
**** Hidden Message ***** 14,文字来回走
<P align=center> </P>
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE scrollAmount=8 behavior=alternate WIDTH: 397px; HEIGHT: 200px;>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>养眼贴图欢迎您</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
代码:
**** Hidden Message ***** 15.文字波浪式移动
<P align=center> </P>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=460 <IMG src="http://bbs.qianlong.com/customavatars/1014734.jpg">
<DIV align=center><FONT face=隶书 color=red size=7>养眼欢迎您</FONT></DIV></MARQUEE></DIV></MARQUE></MARQUEE>
代码:
**** Hidden Message ***** 17,倒影字
[img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_e38eeb61bc225e5f47c7Ng82YiMJsSZE.jpg[/img]
代码:
**** Hidden Message ***** [img]http://bbsimg.qianlong.com/attachments/day_080530/20080530_6d67bf3a977dde8e790bjex2yLSadYoy.jpg[/img]
代码:
**** Hidden Message *****