查看完整版本: [-- HTML教程[用源代码插入背景音乐、背景图片] --]

武当休闲山庄 -> 新手教程 -> HTML教程[用源代码插入背景音乐、背景图片] [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

<<   1   2  >>  Pages: ( 2 total )

yjyj122001 2007-05-27 18:24
载入音乐
基本语法:
<*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中的的背景音乐
代码如下:

#=循环数
注明:这种背景音乐格式,只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐。
一拌格试如下:
播放器3
<*embed width="100" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" c src="歌曲链接地址">
大播放器不直接放
<*center> 
播放器直接放 中
<*embed width="426" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" c src="歌曲链接地址">
仿真播放器rm
<*embed src="歌曲链接地址" width="280,80%" height="60,80%" autostart="true">
视频点击播放
<*object id=videowindow1 width=480 height=330 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6">

使用的时候把*号去掉

说明:一般用来插入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" c></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 behavīor=移动效果>插入文字</marquee>
说明:
behavīor=scroll 一圈一圈绕着走 
behavīor=slide
只走一次 behavīor=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 behavīor=alternate direction=up height=150 scrollAmount=5><MARQUEE behavīor=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的取值。

在线音乐播放器代码
<IFRAME marginWidth=0 marginHeight=0 src="http://ztx_sinr.go.nease.net/index2.htm" frameBorder=0 width=620 height=20></IFRAME>

在线MTV欣赏代码:

<IFRAME marginWidth=0 marginHeight=0 src="http://ztxsinr.02835.com/mymtv.htm" frameBorder=0 width=800 height=600></IFRAME>
网络电视台代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://ztxsinr.02835.com/tv.htm" frameBorder=0 width=310 height=340></IFRAME>
在线电台代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://free2.e-168.cn/zhangtx/radio.htm" frameBorder=0 width=310 height=266></IFRAME>
12星座精美代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://free2.e-168.cn/zhangtx/star/star.htm" frameBorder=0 width=730 height=340></IFRAME> 
通用全页引用代码:

<IFRAME marginWidth=0 marginHeight=0 src="你要引用的网址" frameBorder=0 width=300 height=120></IFRAME>
游动的金鱼代码!
</SPAN><EMBED style="LEFT: 10px; POSITION: absolute; TOP: 0px; absolute: " align=right src=http://chaozsq.home.sunbo.net/xfile.php?xname=13GI401&fname=yu.swf width=800 height=768 type=application/x-shockwave-flash ;; quality="high" wmode="transparent"></TD> 
背景图片加文字代码
方法一:文章编辑的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了

也可以用代码:
<TABLE height=600 width=600 background=你的背景图片地址 border=0>
<TBODY>
<TR>
<TD>你的背景图片地址</TD></TR></TBODY></TABLE>

方法二:
<body background=你的背景图片地址>

方法三:

使图片始终位于页面的中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面的内容一起滚动。如果你觉得照片位于页面的正中间不满意,只需要调整以下代码中的“background-position"的值就可以了。代码如下:


<STYLE type=text/css><!--body {background-image:url(你的背景图片地址);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--> <

somebody777 2007-05-28 09:19
很详细嘛!!!!

明天. 2007-05-28 21:23
好教材,够我学一阵子了。

cw797979 2007-05-30 21:21
好复杂啊,看的我眼睛都花了,看来要慢慢学习了。

denny1209 2007-05-30 21:26
很好的教学帖,以前研究过,现在进一步学习了,谢谢!

maahp 2007-06-13 00:26
知识就是力量,
时代催人奋进;
网络日新月异,
值得快马加鞭。

cw797979 2007-06-23 15:27
楼主,我有个小建议,就是能否请楼主你把每个示例作成现成的下载包供道友下载啊,因为我学了这么长的时间还没学会。希望楼主认真考虑啊,先谢了。

l_gq 2007-07-08 18:23
这个学不会,很复杂,很难学

阿里参和 2007-07-12 19:21
我实在是太笨了,看不懂

xlht123 2007-07-14 10:44
太复杂了,呵呵

lzy111111 2007-07-19 08:49
看起来有点复杂啊,要化些时间学习了!

cuixiaoliang 2007-07-26 13:39
看了半天,,没看懂,,,,我笨啊

ads132 2007-08-01 19:07
看不懂!有视频教学就好了!

zhouly 2007-08-20 00:43
谢老大发教学贴。

无色一叮 2007-08-28 21:12
正是学到老用到老,够我学一段时间了.努力学习天天向上!

老虾 2007-08-30 19:40
太复杂了,我看了半天也没看懂呀,

蝴蝶 2007-09-25 18:21
为什么我用不了?

hrbxly 2007-10-02 16:05
教材很好,可惜我的基础太差,学了有点累,谢谢总管。

骏马 2007-10-07 15:14
真不简单!能学习到这些好东西!谢谢了

hrbxly 2007-10-18 22:01
SRC="FILENAME" 设定音乐文件的路径?

请问楼主:我下载了一个MP3和一个WMA歌曲在我电脑里,我这路径该怎么写?  谢谢!

山庄守卫瓜 2007-10-29 16:59
到现在才懂,我是猪……

克利斯 2007-11-09 16:22
教程内容较多,得花上一段时间去学了,慢慢来吧。

yd19760909 2007-11-26 01:37
果真高手,向你学习,顶一下.

xu70168 2007-12-21 21:23
看来,要下功夫学习一下了!自己加油!

wowoni 2007-12-24 19:28
那么多太难学了...

sunlyman 2008-01-01 23:24
还是没看明白啊,有点复杂,慢慢学,呵呵!

hhh3h 2008-01-16 14:02
谢谢!我好好学习学习!

lzq890803 2008-01-21 16:45
感觉太烦了!!!!!!!!!!

小w 2008-02-03 17:53
据说貌似可能非常好的帖子  但是我看不懂  呵~ 人笨

threew 2008-02-14 16:23
够我学习两天了

郭平南宁 2008-03-02 00:51
进来学习一下。

林翔宽医师 2008-03-02 01:51
我只想知道那个亮晶晶的背景代码是什么

glolia 2008-03-09 08:43
.........哦哦

xianrenji1 2008-03-16 13:40
是怎么发帖的?

qwe-a 2008-03-17 16:46
论坛提示  HTML 代码不可用  ,那该怎么做呀,麻烦总管提示一下吧,谢谢了。

cengfen9 2008-03-30 15:25
看的我眼睛都花了,看来要慢慢学习了。

wuidnamh 2008-04-04 17:34
这都是什么啊 没头没尾  看不明白

怀旧123 2008-05-02 13:25
我是新手,学起来有点困难呀!-

collins 2008-06-02 16:47
非常好的帖子,很多东西还没学会!

市政公司 2008-06-18 06:43
怎么我的代码HTML 代码显示不可以用呢

cityboycom13 2008-07-04 02:30
新手进来学习学习

263382605 2008-07-11 09:16
有没有简单一点的方法啊,这个把我看傻了,发新帖时候那里不是有一个插入音乐的功能吗?(不太会)

无聊中的极品 2008-08-10 01:49
这个只要会"HTML语言"就一点也不难 不过对于不会的可能会有一些难度
不过楼主讲得很清楚 仔细一点也不难懂的

386584 2008-08-28 00:14
我实在是太笨看不懂

ujmujmhhhh 2008-09-08 22:28
很好的教学帖,教材很好,谢谢!

wyterry 2008-09-12 20:07
用户被禁言,该主题自动屏蔽!

流浪小兵 2008-09-18 18:37
慢慢学习吧,我也不懂

ynthyxt 2008-09-18 22:43
看得好难,but谢了

yshl 2008-09-28 18:00
终于明白了,多谢!!

xihuan2008 2008-09-30 07:47
EMBED SRC="midi.mid" autostart=true hidden=true loop=true
试试看,好使吗?


查看完整版本: [-- HTML教程[用源代码插入背景音乐、背景图片] --] [-- top --]


Powered by www.wdsz.net v8.7.1 Code ©2005-2018www.wdsz.net
Gzip enabled


沪ICP备:05041533号