切换到宽版
  • 35024阅读
  • 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重新编辑 ]
山庄提示: 道行不够,道券不够?---☆点此充值☆
 
离线caixi89

UID: 1242650

发帖
9
金币
77
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 7(小时)
注册时间: 2011-06-03
最后登录: 2014-05-02
只看该作者 63楼 发表于: 2011-06-04
传说中的技术贴~~
如何不发帖就快速得到金币道行
 
离线yuiuooo

UID: 817853

发帖
5
金币
20
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 2(小时)
注册时间: 2010-02-18
最后登录: 2010-02-18
只看该作者 62楼 发表于: 2010-02-18
学习,感谢
如何不发帖就快速得到金币道行
 
离线aaazzz123

UID: 789853

发帖
54
金币
0
道行
1
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3(小时)
注册时间: 2009-12-20
最后登录: 2016-12-28
只看该作者 61楼 发表于: 2009-12-27
继续~再次看完回复,遵守规定~~~
如何不发帖就快速得到金币道行
 
离线aaazzz123

UID: 789853

发帖
54
金币
0
道行
1
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 3(小时)
注册时间: 2009-12-20
最后登录: 2016-12-28
只看该作者 60楼 发表于: 2009-12-27
看完回复,遵守规定~~~
如何不发帖就快速得到金币道行
 
离线olino

UID: 472494

发帖
63
金币
300
道行
8
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 11(小时)
注册时间: 2008-06-29
最后登录: 2010-07-30
只看该作者 59楼 发表于: 2009-09-06
我想知道在那里出入HTML代码啊?
离线12345ll

UID: 285576

发帖
55
金币
16
道行
5
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 28(小时)
注册时间: 2007-08-29
最后登录: 2013-01-07
只看该作者 58楼 发表于: 2009-07-10
谢谢分享,好像挺不错
如何不发帖就快速得到金币道行
 
离线6913500

UID: 412026

发帖
2
金币
14
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 0(小时)
注册时间: 2008-04-04
最后登录: 2016-11-26
只看该作者 57楼 发表于: 2009-07-02
— (lxm3830) 请认真回复,不要灌水! (2009-07-10 13:16) —
hahahahahaha
如何不发帖就快速得到金币道行
 
离线cupidkiller

UID: 679069

精华: 1
级别: 武当老道
发帖
191
金币
76
道行
61
原创
7
奖券
15
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 67(小时)
注册时间: 2009-05-30
最后登录: 2011-03-27
只看该作者 56楼 发表于: 2009-05-30
简单多了,让小弟毛色炖开
如何不发帖就快速得到金币道行
 
离线xxf

UID: 335581

发帖
320
金币
223
道行
115
原创
0
奖券
0
斑龄
0
道券
45
获奖
0
座驾
设备
摄影级
在线时间: 296(小时)
注册时间: 2007-12-10
最后登录: 2025-03-01
只看该作者 55楼 发表于: 2009-05-22
看了半天没能明白过来呢
如何不发帖就快速得到金币道行
 
离线bscway

UID: 671314

发帖
571
金币
169
道行
138
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 583(小时)
注册时间: 2009-05-12
最后登录: 2025-01-01
只看该作者 54楼 发表于: 2009-05-14
用户被禁言,该主题自动屏蔽!
如何不发帖就快速得到金币道行
 
离线涛声依旧
沧海一声笑

UID: 445333

精华: 9
职务: 山庄英杰
级别: 一代宗师

发帖
11182
金币
28563
道行
1003
原创
236
奖券
48
斑龄
5
道券
80
获奖
0
座驾
设备
摄影级
在线时间: 4222(小时)
注册时间: 2008-05-24
最后登录: 2019-10-04
只看该作者 53楼 发表于: 2009-02-09
Re:支持!!好帖!
引用第53楼怡社倩于2009-02-09 01:15发表的 支持!!好帖! :
来论坛看看
          进来回个帖~
.......

欢迎您的到来,期待你更加精彩!!!
1条评分
hongshaorou 金币 +3 签名,你自己新做的啊 2009-02-09
如何不发帖就快速得到金币道行
 
离线eyes_001

UID: 537688

精华: 4
级别: 武当天尊

发帖
1400
金币
224
道行
413
原创
378
奖券
0
斑龄
5
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 862(小时)
注册时间: 2008-09-12
最后登录: 2016-01-29
只看该作者 52楼 发表于: 2008-10-14
来回研究了好几次,还是觉得像在看天书
如何不发帖就快速得到金币道行
 
离线borrypan

UID: 465656

发帖
56
金币
1040
道行
7
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 24(小时)
注册时间: 2008-06-21
最后登录: 2010-03-30
只看该作者 51楼 发表于: 2008-10-02
恩。。。好的。。。不错。。。。
如何不发帖就快速得到金币道行
 
离线mmttaa

UID: 550373

发帖
7
金币
63
道行
1
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 2(小时)
注册时间: 2008-09-29
最后登录: 2008-10-07
只看该作者 50楼 发表于: 2008-09-30
很好!但要慢慢消化,看来还要多做几次。
如何不发帖就快速得到金币道行
 
离线xihuan2008

UID: 546176

发帖
15
金币
38
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 1(小时)
注册时间: 2008-09-23
最后登录: 2008-09-30
只看该作者 49楼 发表于: 2008-09-30
EMBED SRC="midi.mid" autostart=true hidden=true loop=true
试试看,好使吗?
如何不发帖就快速得到金币道行
 
离线yshl

UID: 279283

发帖
143
金币
40
道行
5
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 12(小时)
注册时间: 2007-08-22
最后登录: 2009-08-19
只看该作者 48楼 发表于: 2008-09-28
终于明白了,多谢!!
如何不发帖就快速得到金币道行
 
离线ynthyxt

UID: 500208

精华: *
级别: *
发帖
*
金币
*
道行
*
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: (小时)
注册时间: *
最后登录: *
只看该作者 47楼 发表于: 2008-09-18
看得好难,but谢了
如何不发帖就快速得到金币道行
 
离线流浪小兵

UID: 541645

发帖
52
金币
99
道行
0
原创
0
奖券
0
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 131(小时)
注册时间: 2008-09-17
最后登录: 2018-04-08
只看该作者 46楼 发表于: 2008-09-18
慢慢学习吧,我也不懂
如何不发帖就快速得到金币道行
 
离线wyterry

UID: 535944

发帖
130
金币
145
道行
50
原创
0
奖券
3
斑龄
0
道券
0
获奖
0
座驾
设备
摄影级
在线时间: 117(小时)
注册时间: 2008-09-09
最后登录: 2017-08-22
只看该作者 45楼 发表于: 2008-09-12
用户被禁言,该主题自动屏蔽!
如何不发帖就快速得到金币道行
 
快速回复
限120 字节
认真回复加分,灌水扣分~
 
上一个 下一个