2007/05/18 | 插入背景音乐和背景图片设计详解
类别(网叶技术) | 评论(0) | 阅读(423) | 发表于 01:49
　　载入音乐

　　基本语法：

　　<*EMBED SRC="音乐文件地址">

　　常用属性如下：

　　SRC="FILENAME" 设定音乐文件的路径

　　AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE

　　LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。

　　STARTIME="分:秒" 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20

　　VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。

　　WIDTH HEIGHT 设定控制面板的大小

　　HIDDEN=TRUE 隐藏控制面板

　　CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子

　　例一：

　　<*EMBED SRC="midi.mid" autostart=true hidden=true loop=true>

　　作为背景音乐来播放，隐藏了播放器。

　　例二：

　　<*EMBED SRC="midi.mid" loop=true width=145 height=60>

　　出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

　　注明：mp3 rm ra ram asf mid等音乐都用这个播放器

　　IE中的的背景音乐

　　代码如下：

　　<bgsound src="音乐文件地址" loop=#>

　　#=循环数

　　注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐。

　　一拌格试如下：

　　播放器3

　　<*embed width="100" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">

　　大播放器不直接放

　　<*center><EMBED src=歌曲链接地址 volume="100" width=250 height=20 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton"></EMBED>

　　播放器直接放 中

　　<*embed width="426" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">

　　仿真播放器rm

　　<*embed src="歌曲链接地址" width="280，80%" height="60，80%" autostart="true"><embed>

　　视频点击播放

　　<*object id=videowindow1 width=480 height=330 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"><param name=URL value=歌曲链接地址><param name=AUTOSTART value=0></object><br />

　　使用的时候把*号去掉

　　说明：一般用来插入mp3 rm ra ram asf mid等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。

　　二：

　　<bgsound src="音乐文件地址" loop=3>

　　说明：一般用来插入wav wma mid等格试的音乐文件。

　　<EMBED src=http://www.lonelytebit.org/music/alone.wma volume="100" width=0 height=0 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton"></EMBED>

　　插入背景图片

　　原代码如下：

　　<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="100%"><TBODY><TR><TD>

　　帖子内容，文字或图片.....

　　</TD></TR></TBODY></TABLE>

　　<TABLE> 的参数设定（常用）：

　　<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

　　注解：

　　width="400"

　　表格宽度，接受绝对值（如 80）及相对值（如 80%）。

　　border="1"

　　表格边框的厚度，不同浏览器有不同的内定值，故请指明。

　　cellspacing="2"

　　表格格线的厚度

　　align="CENTER"

　　表格的摆放位置（水平），可选值为： left, right, center

　　valign="TOP".

　　表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。 　　

　　background="myweb.gif"

　　表格的背景图片，与 bgcolor 不要同用。

　　bgcolor="#0000FF"

　　表格的底色，与 background 不要同用

　　bordercolor="#CF0000"

　　表格边框颜色

　　bordercolorlight="#00FF00"

　　表格边框向光部分的颜色

　　bordercolordark="#00FFFF"

　　表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

　　cols="2"

　　表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

　　符：HTML基本语法教程

　　1，http://www.gzsums.edu.cn/webclass/html/html_design.html

　　2，http://www.shanxiwindow.net/teaching/htmlbook/

　　在线编辑器：

　　http://www.cn898.net/bg/mx/

　　二，帖图格式

　　帖图基本格式如下：

　　<IMG src="图片连接URL地址"><*IMG> 称图形标记，主要用来插入图形标记。

　　<IMG> 的一般参数设定：

　　　例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

　　src="logo.gif"

　　图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展， 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则 必须加上正确的路径，相对或绝对均可。

　　width=100 height=100

　　设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）

　　hspace=5 vspace=5

　　设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， 是设定图片上下的空间，高度采用 pixels 作单位。

　　border=2

　　图片边框厚度

　　align="top"

　　调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，

　　texttop 表示图片和文字依顶线对齐，

　　baseline 表示图片对齐到目前文字行底线值，

　　absmiddle 表示图片对齐到目前文字行绝对中央，

　　absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

　　alt="Logo of PenPal Garden"

　　这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字 将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

　　lowsrc="pre_logo.gif"

　　设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低 解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

　　例1：

　　原代码：

　　<IMG border=0 height=92 src="http://www.cn898.net/bbs/UploadFile/20045243172762519.gif" width=130>　普通插入

　　普通插入

　　例2：

　　<img src="http://www.cn898.net/bbs/UploadFile/20045243172762519.gif" width=130 height=92 border=0 hspace=10 vspace=20"> 设定上下左右空白位置

　　设定上下左右空白位置

　　例3：

　　<img src="http://www.cn898.net/bbs/UploadFile/20045243172762519.gif" width=130 height=92 border=4 align=middle>设定图片中间对齐，边框厚度为 4

　　设定图片中间对齐，边框厚度为 4

　　例4：

　　<img src="http://www.cn898.net/bbs/UploadFile/20045243172762519.gif" width=180 height=152 border=0> 放大了的图片

　　放大了的图片

　　例5：

　　<img src="http://www.cn898.net/bbs/UploadFile/20045243172762519.gif" width=130 height=92 border=0 align=right>设定图片靠右

　　文字设制

　　一，文字基本设制

　　基本代码如下：

　　<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>

　　align=center　表示字体居中，可选值为居右（right）居左（left）

　　color=颜色代码　具体颜色代码可参照：颜色选取＜＜点击查看

　　face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

　　size=字体大小，这里的最大值为7　取值越大文字就越大

　　二，大字体文字

　　代码：

　　<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

　　font:40pt　数值越大文字就越大。

　　三，移动文字设置：

　　基本代码1：

　　<marquee direction=移动方向 scrollamount=移动速度数值>插入文字</marquee>

　　说明：direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right)

　　基本代码2：

　　<marquee behavior=移动效果>插入文字</marquee>

　　说明：

　　behavior=scroll 一圈一圈绕着走　

　　behavior=slide

　　只走一次　behavior=alternate 来回走

　　停停走走：

　　代码如下：

　　<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

　　四，文字特效显示：

　　效果一、<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>

　　效果二、<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>

　　效果三、<CENTER><FONT color=#0099ff style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; LINE-HEIGHT: 150%; WIDTH: 450px">欢迎光临中年贴图</FONT></CENTER>

　　效果四：

　　原代码：

　　<MARQUEE behavior=alternate direction=up height=150 scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=460 <IMG src="http://www.east128.com/bbs/UploadFile/2003-9/20039251018214901.gif"><FONT color=red face=楷体_gb2312 size=7>欢迎光临中年贴图</FONT></MARQUEE></MARQUE></MARQUEE>

　　效果五：

　　原代码：

　　<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=240>欢迎你朋友</FONT></MARQUEE><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=240>友朋你迎欢</MARQUEE></FONT></FONT>

　　注明：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width的取值。
0

评论Comments

日志分类
首页[28]
心情日记[8]
视频音乐[0]
投资理财[0]
哲理故事[3]
网叶技术[13]
网络技术[4]