切换到宽版
  • 33332阅读
  • 63回复

[教程]HTML教程[用源代码插入背景音乐、背景图片] [复制链接]

上一主题 下一主题
离线yjyj122001

UID: 88

精华: 116
职务: 名誉总管
级别: 一代宗师
 

发帖
6670
金币
19620
道行
1500
原创
19
奖券
5
斑龄
31
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 7199(小时)
注册时间: 2005-08-11
最后登录: 2021-10-08
只看楼主 倒序阅读 使用道具 楼主  发表于: 2007-05-27
— 本帖被 長征 执行加亮操作(2009-12-20) —
载入音乐
基本语法:
<*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%}--> <
[ 此帖被yjyj122001在2009-02-28 20:37重新编辑 ]
山庄提示: 道行不够,道券不够?---☆点此充值☆
 
离线somebody777

UID: 198351

发帖
432
金币
612
道行
281
原创
0
奖券
1
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1098(小时)
注册时间: 2007-05-10
最后登录: 2013-10-23
只看该作者 沙发  发表于: 2007-05-28
很详细嘛!!!!
如何不发帖就快速得到金币道行
 
离线明天.

UID: 55

精华: 18
职务: 名誉总管
级别: 一代宗师

发帖
5614
金币
7569
道行
1027
原创
23
奖券
495
斑龄
14
道券
30
获奖
0
座驾
设备
摄影级
在线时间: 3772(小时)
注册时间: 2007-04-12
最后登录: 2014-10-26
只看该作者 板凳  发表于: 2007-05-28
好教材,够我学一阵子了。
如何不发帖就快速得到金币道行
 
离线cw797979

UID: 158144


发帖
1777
金币
56
道行
2128
原创
0
奖券
6
斑龄
0
道券
14
获奖
0
座驾
设备
摄影级
在线时间: 185(小时)
注册时间: 2007-02-11
最后登录: 2024-09-28
只看该作者 地板  发表于: 2007-05-30
好复杂啊,看的我眼睛都花了,看来要慢慢学习了。
如何不发帖就快速得到金币道行
 
离线denny1209

UID: 163

精华: 2
级别: 得道成仙

发帖
2256
金币
545
道行
2888
原创
0
奖券
564
斑龄
12
道券
11
获奖
0
座驾
设备
摄影级
在线时间: 2310(小时)
注册时间: 2005-11-12
最后登录: 2020-03-27
只看该作者 4楼 发表于: 2007-05-30
很好的教学帖,以前研究过,现在进一步学习了,谢谢!
如何不发帖就快速得到金币道行
 
离线maahp

UID: 64038


发帖
15626
金币
706
道行
5257
原创
8
奖券
12
斑龄
0
道券
82
获奖
0
座驾
设备
摄影级
在线时间: 4983(小时)
注册时间: 2006-06-01
最后登录: 2024-10-10
只看该作者 5楼 发表于: 2007-06-13
知识就是力量,
时代催人奋进;
网络日新月异,
值得快马加鞭。
如何不发帖就快速得到金币道行
 
琹人
离线cw797979

UID: 158144


发帖
1777
金币
56
道行
2128
原创
0
奖券
6
斑龄
0
道券
14
获奖
0
座驾
设备
摄影级
在线时间: 185(小时)
注册时间: 2007-02-11
最后登录: 2024-09-28
只看该作者 6楼 发表于: 2007-06-23
楼主,我有个小建议,就是能否请楼主你把每个示例作成现成的下载包供道友下载啊,因为我学了这么长的时间还没学会。希望楼主认真考虑啊,先谢了。
如何不发帖就快速得到金币道行
 
离线l_gq

UID: 241062

发帖
5652
金币
729
道行
527
原创
2
奖券
59
斑龄
0
道券
8
获奖
0
座驾
设备
摄影级
在线时间: 1067(小时)
注册时间: 2007-07-08
最后登录: 2019-02-12
只看该作者 7楼 发表于: 2007-07-08
这个学不会,很复杂,很难学
如何不发帖就快速得到金币道行
 
离线阿里参和

UID: 38827

精华: 17
级别: 武当道士

发帖
2378
金币
16981
道行
30
原创
11
奖券
58
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 412(小时)
注册时间: 2006-02-07
最后登录: 2008-05-11
只看该作者 8楼 发表于: 2007-07-12
我实在是太笨了,看不懂
如何不发帖就快速得到金币道行
 
离线xlht123

UID: 230591

发帖
450
金币
16789
道行
102
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 427(小时)
注册时间: 2007-06-27
最后登录: 2018-11-12
只看该作者 9楼 发表于: 2007-07-14
太复杂了,呵呵
如何不发帖就快速得到金币道行
 
离线lzy111111

UID: 204344

发帖
570
金币
2879
道行
9
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 61(小时)
注册时间: 2007-05-19
最后登录: 2012-01-12
只看该作者 10楼 发表于: 2007-07-19
看起来有点复杂啊,要化些时间学习了!
如何不发帖就快速得到金币道行
 
离线cuixiaoliang
武当宝贝-多多

UID: 109

精华: 10
职务: 山庄贵宾
级别: 一代宗师

发帖
10593
金币
3004
道行
954
原创
4
奖券
35
斑龄
26
道券
16
获奖
0
座驾
设备
摄影级
在线时间: 2854(小时)
注册时间: 2006-06-02
最后登录: 2011-07-18
只看该作者 11楼 发表于: 2007-07-26
看了半天,,没看懂,,,,我笨啊
如何不发帖就快速得到金币道行
 
离线ads132

UID: 168610

发帖
114
金币
261
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 6(小时)
注册时间: 2007-03-01
最后登录: 2012-11-30
只看该作者 12楼 发表于: 2007-08-01
看不懂!有视频教学就好了!
如何不发帖就快速得到金币道行
 
离线zhouly

UID: 233248

发帖
38
金币
347
道行
300
原创
0
奖券
17
斑龄
0
道券
8
获奖
0
座驾
和悦
设备
NEX6
摄影级
高级
在线时间: 843(小时)
注册时间: 2007-06-30
最后登录: 2023-11-04
只看该作者 13楼 发表于: 2007-08-20
谢老大发教学贴。
如何不发帖就快速得到金币道行
 
离线无色一叮

UID: 262859

发帖
67
金币
694
道行
3
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 57(小时)
注册时间: 2007-08-03
最后登录: 2016-12-24
只看该作者 14楼 发表于: 2007-08-28
正是学到老用到老,够我学一段时间了.努力学习天天向上!
如何不发帖就快速得到金币道行
 
离线老虾

UID: 281320

发帖
10
金币
16
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1(小时)
注册时间: 2007-08-24
最后登录: 2007-08-30
只看该作者 15楼 发表于: 2007-08-30
太复杂了,我看了半天也没看懂呀,
如何不发帖就快速得到金币道行
 
离线蝴蝶

UID: 99765

精华: 2
级别: 武当小道
发帖
96
金币
589
道行
10
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 66(小时)
注册时间: 2006-11-03
最后登录: 2015-08-20
只看该作者 16楼 发表于: 2007-09-25
为什么我用不了?
如何不发帖就快速得到金币道行
 
离线hrbxly

UID: 293398

发帖
618
金币
283
道行
501
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 827(小时)
注册时间: 2007-09-29
最后登录: 2014-09-02
只看该作者 17楼 发表于: 2007-10-02
教材很好,可惜我的基础太差,学了有点累,谢谢总管。
如何不发帖就快速得到金币道行
 
离线骏马

UID: 297082

发帖
142
金币
688
道行
11
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 61(小时)
注册时间: 2007-10-06
最后登录: 2012-05-19
只看该作者 18楼 发表于: 2007-10-07
真不简单!能学习到这些好东西!谢谢了
如何不发帖就快速得到金币道行
 
离线hrbxly

UID: 293398

发帖
618
金币
283
道行
501
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 827(小时)
注册时间: 2007-09-29
最后登录: 2014-09-02
只看该作者 19楼 发表于: 2007-10-18
SRC="FILENAME" 设定音乐文件的路径?

请问楼主:我下载了一个MP3和一个WMA歌曲在我电脑里,我这路径该怎么写?  谢谢!
如何不发帖就快速得到金币道行
 
快速回复
限120 字节
认真回复加分,灌水扣分~
 
上一个 下一个