宝树知识
育儿问答 育儿知识大全
宝树社区
同龄 同城 圈子 晒吧
生活消费
母婴产品 试用
我的小家
日记 照片 游戏
我的关注
新鲜事 薇博

登录  |  注册

积分兑换 | 活动

个性定制 | 试用

年龄导航
准备怀孕
怀孕期
0-1岁
1-3岁
3-6岁

宝树社区

宝树小家装饰

主题:增加主页效果讲座 精华

收藏(34)   浏览:2308  回复:92  

文文跳跳

发表于 2010-06-24 12:16:29 | 只看楼主

楼主

为了更好地装饰小家,使主页更加丰富多彩,声情并茂,有声有色。本楼主从今天开始陆续推出《增强主页效果讲座》,希望对想装饰小家的朋友们有所帮助。有什么问题请在这里跟贴,我会及时帮你解决。

先介绍一款在线工具:HTML编辑浏览器,地址:http://www.53199.com/bbs/UploadFile/2008-11/20081195282430382.txt

把上面地址复制到网页地址栏中,敲回车,打开HTML编辑浏览器,把这个网页收藏到收藏夹中,我们以后还要经常用到它。

增加主页效果讲座-1

“欢迎光临”声音代码:

<EMBED style="FILTER: alpha(opacity=0,style=3)" src="http://www.trueme.net/bb_midi/welcome.wav" width=0 height=0 type="audio/mpeg" loop="0" auto_old="true" showstatusbar="1" volume="0"></EMBEDv>

把上面代码复制到HTML编辑浏览器 中点击运行代码按钮,先查看效果。

使用方法:先复制上面代码,然后到自己的主页,点击右上角的编辑主页内容按钮,在打开的页面中点击小黑板右下角的HTML代码按钮,在打开的页面中全是代码,把上面的代码粘贴在这些代码的开头或者是结尾都可以,最后一定要点击下面的保存查看主页效果按钮。OK!

以后每次打开主页都有个小女孩的声音“欢迎光临”。
 

文文跳跳

发表于2010-06-24 21:06:04

应zhansheng的要求,在这里插入主页加背景音乐的方法。具体加入歌曲或者音乐的方法以后还要专讲。
代码:<EMBED src= http://xiaobao.cau.edu.cn/media/user/2008-12-25/data/music/_bg_.mp3 width=600 height=45 type=audio/mpeg autostart="1" loop="-1"></EMBED>
这是一款普通播放器代码,蓝色部分是音乐(歌曲)地址,红色部分是播放器的宽度和高度。这个播放器的宽度为600像素,高为45像素。若把播放器的宽和高都设置为0,则播放器隐藏。在网上找音乐(歌曲)方法见小龙女的《怎样找歌曲(音乐)的网址》。地址:http://www.babytree.com/group/topic_198326
放到主页中的方法和上面的“欢迎光临”的方法一样。

文文跳跳

发表于2010-06-25 08:43:37

增加主页效果讲座-2

七款欢迎光临代码
第一款代码:

 

第二款代码:

 

 

第三款代码:

 

 

第四款代码:

 

 

第五款代码:

 

文文跳跳

发表于2010-06-25 08:45:03

第六款代码:

 

 
 
第七款代码:


代码:

第一款代码:
<P align=center><EMBED src=http://www.xcwhw.cn/fla/fh/7.swf width=700 height=200 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" ALLOWNETWORKING="internal" auto_old="0" ></EMBED>&nbsp;<WBR></P>
第二款代码:
<P align=center><EMBED src=http://www.xcwhw.cn/fla/fh/8.swf width=700 height=200 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" ALLOWNETWORKING="internal" auto_old="0" ></EMBED>&nbsp;<WBR></P>
<P align=center>&nbsp;<WBR></P>
第三款代码:
<P align=center><EMBED src=http://www.xcwhw.cn/fla/fh/9.swf width=725 height=200 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" ALLOWNETWORKING="internal" auto_old="0" ></EMBED>&nbsp;<WBR></P>
<P align=center>&nbsp;<WBR></P>
第四款代码:
<P align=center><EMBED src=http://www.xcwhw.cn/fla/fh/10.swf width=725 height=200 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" ALLOWNETWORKING="internal" auto_old="0" ></EMBED>&nbsp;<WBR></P>
<P align=center>&nbsp;<WBR></P>
第五款代码:
<P align=center><FONT color=#3162d2><EMBED src=http://www.xcwhw.cn/fla/fh/11.swf width=725 height=300 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" ALLOWNETWORKING="internal" auto_old="0" ></FONT></P><WBR>
<DIV align=center>&nbsp;<WBR>
<P>&nbsp;<WBR></P>
第六款代码:
<P>&nbsp;<WBR></P>
<DIV align=center><A href="http://www.xcwhw.cn/fla/fh/12.swf"><STRONG><FONT style="FONT-SIZE: 18px" color=#ff0000></FONT></STRONG></A>&nbsp;</DIV>
<DIV align=center><FONT color=#3162d2><EMBED src=http://www.xcwhw.cn/fla/fh/12.swf width=725 height=200 type=application/x-shockwave-flash WMODE="transparent" QUALITY="high" ALLOWNETWORKING="internal" auto_old="0" ></FONT></DIV></DIV>
<P>&nbsp;<WBR></P>
<DIV align=center><FONT color=#3162d2></EMBED></FONT></DIV>
第七款代码:
<P align=center><FONT color=#3162d2><EMBED src=http://www.xcwhw.cn/fla/fh/13.swf width=725 height=300 type=application/x-shockwave-flash WMODE="transparent" QUALITY="high" ALLOWNETWORKING="internal" auto_old="0" ></EMBED></FONT></P>
<P align=center>&nbsp;<WBR></P>
<P><STRONG><FONT style="FONT-SIZE: 20px" color=#0000ff></FONT></STRONG>&nbsp;</P></DIV>

 

文文跳跳

发表于2010-06-26 13:20:56

增加主页效果讲座-3
多张图片来回移动
效果:

多做图片来回移动代码:

<P style="TEXT-INDENT: 2em">
<MARQUEE scrollAmount=2 scrollDelay=30 behavior=alternate TURESPEED="true" BORDER="0"><IMG src="图片地址" border=0><IMG src="图片地址" border=0><IMG src="图片地址" border=0><IMG src="图片地址" border=0><IMG src="图片地址" border=0></MARQUEE></P>

注意:图片地址是指网上的地址,最好是你自己宝树相册中的图片地址;图片高度高度要一致,图片可多可少。

文文跳跳

发表于2010-06-27 21:46:50

增加主页效果讲座-4
图片逐渐打开(由上至下)
效果图



代码:
<MARQUEE scrollAmount=3 direction=down behavior=slide height=475>
<MARQUEE scrollAmount=3 direction=up behavior=slide height=475>
<DIV align=center><IMG src="http://pic03.babytreeimg.com/foto/photos/82/95/47/5f62a532fb6726cc6996_b.jpg">
</DIV></MARQUEE></MARQUEE>
其中红色部分是图片的地址,粉色部分是图片的高度,这里没有图片的宽度。

文文跳跳

发表于2010-06-27 21:55:17

再试一试这组代码的效果,看看这两组代码有什么不同?
代码2:
<MARQUEE scrollAmount=3 direction=down behavior=slide height=475>
<DIV align=center><IMG src="http://pic03.babytreeimg.com/foto/photos/82/95/47/5f62a532fb6726cc6996_b.jpg">
</DIV></MARQUEE></MARQUEE>
代码3:
<MARQUEE scrollAmount=3 direction=up behavior=slide height=475>
<DIV align=center><IMG src="http://pic03.babytreeimg.com/foto/photos/82/95/47/5f62a532fb6726cc6996_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-06-28 09:16:45

增加主页效果讲座-5
图片逐渐打开收一点



代码:<MARQUEE scrollAmount=3 direction=left behavior=slide width=720 height=540>
<MARQUEE scrollAmount=3 direction=right behavior=slide width=620 height=540>
<DIV align=center><IMG src="http://pic02.babytreeimg.com/foto/photos/30/05/54/5f62a532c1b9ec4b2aa81_b.jpg">
</DIV></MARQUEE></MARQUEE>
注意:width=720 height=540 是图片的宽度和高度;width=620  是图片收后的宽度,和前面比较图片收了100px

文文跳跳

发表于2010-06-29 20:43:51

增加主页效果讲座-6
渐放渐收
 

代码: <MARQUEE scrollAmount=3 direction=down height=540>
<MARQUEE scrollAmount=3 direction=up height=540>
<DIV align=center><IMG src="http://pic02.babytreeimg.com/foto/photos/17/89/84/5f62a532dbb9ec4b2dd58_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-06-29 20:45:23



代码:<MARQUEE scrollAmount=3 direction=up height=540>
<MARQUEE scrollAmount=3 direction=down height=540>
<DIV align=center><IMG src="http://pic04.babytreeimg.com/foto/photos/31/59/15/5f62a53194b9ec4b2fc04_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-06-29 20:46:38


代码:<MARQUEE scrollAmount=3 direction=right width=720 height=540>
<MARQUEE scrollAmount=3 direction=left width=720 height=540>
<DIV align=center><IMG src="http://pic01.babytreeimg.com/foto/photos/12/09/74/5f62a535eb9ec4b1b2dc_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-06-29 20:47:59


代码:<MARQUEE scrollAmount=3 direction=left width=720 height=540>
<MARQUEE scrollAmount=3 direction=right width=720 height=540>
<DIV align=center><IMG src="http://pic05.babytreeimg.com/foto/photos/35/14/44/5f62a532ecb9ec4b174fc_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-06-30 20:15:37

 
增加主页效果讲座-7
图片移动打开
 
代码如下:
<MARQUEE scrollAmount=2 direction=up behavior=alternate height=720>
<MARQUEE scrollAmount=2 direction=up height=540>
<DIV align=center><IMG src="http://pic05.babytreeimg.com/foto/photos/56/94/49/5f62a53302b9ec4b15447_b.jpg"></DIV>
</MARQUEE></MARQUEE>




文文跳跳

发表于2010-06-30 20:21:56

图片晃动上移
代码:
<DIV align=center>
<MARQUEE scrollAmount=2 behavior=alternate width=740 height=540>
<MARQUEE scrollAmount=2 direction=up width=720 height=540><IMG src="http://pic04.babytreeimg.com/foto/photos/41/67/83/5f62a531ccb9ec4b11495_b.jpg">
</MARQUEE></MARQUEE></DIV>

 

文文跳跳

发表于2010-06-30 20:25:21

图片停顿移动


代码:<MARQUEE scrollAmount=3 behavior=alternate width="100%">
<MARQUEE scrollAmount=3 width="98%">
<DIV align=center><IMG src="http://pic02.babytreeimg.com/foto/photos/79/00/19/5f62a531fb9ec4b136c7_b.jpg">
</DIV></MARQUEE></MARQUEE>

文文跳跳

发表于2010-07-01 22:45:35

增加主页效果讲座-7
图片靠拢











 










 


代码:<MARQUEE scrollAmount=2 direction=down>
<DIV align=center>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
</DIV></MARQUEE>
<MARQUEE style="FILTER: flipv(enabled=1)" scrollAmount=2 direction=down>
<DIV align=center>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
</DIV></MARQUEE>

文文跳跳

发表于2010-07-01 22:49:13

图片分开











 










 

代码:<MARQUEE scrollAmount=2 direction=up>
<DIV align=center>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
</DIV></MARQUEE>
<MARQUEE style="FILTER: flipv(enabled=1)" scrollAmount=2 direction=up>
<DIV align=center>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
<IMG src="http://pic01.babytreeimg.com/foto/photos/92/12/56/5f62a531dab40d0f0841e_b.jpg"><br><br>
</DIV></MARQUEE>

文文跳跳

发表于2010-07-03 09:28:19

增加主页效果讲座-8
用代码给图片加透明边框


 
 

代码
:<DIV style="position:relative; top:0px; left:0px; width:420px; height:500px;overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px">
<img src="http://pic01.babytreeimg.com/foto/photos/86/20/59/5f62a532bab9ec4b25047_b.jpg" width=420 height=500><br></div>
<div style="position: absolute; top: 0px; left: 0px">
<table width="420" height="500" border="20" cellspacing="0" cellPadding="0" style="filter: Alpha(Opacity=43,Style=0)">
<tbody>
<tr>
<td width=100% align="center">
</td></tr></tbody></table></div></DIV>



文文跳跳

发表于2010-07-03 09:29:49


 
 

代码:

<DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 490px; POSITION: relative; TOP: 0px; HEIGHT: 370px">
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><IMG height=370 src="http://pic03.babytreeimg.com/foto/photos/86/20/59/5f62a53b1b9ec4b231fe_b.jpg" width=490><BR></DIV>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=370 cellSpacing=0 cellPadding=0 width=490 border=20>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=310 cellSpacing=0 cellPadding=0 width=430 border=20>
<TBODY>
<TR>
<TD align=middle width="100%">

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

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

文文跳跳

发表于2010-07-03 09:31:10


 
 

代码:<DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 490px; POSITION: relative; TOP: 0px; HEIGHT: 370px">
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><IMG height=370 src="http://pic04.babytreeimg.com/foto/photos/30/05/54/5f62a538bb9ec4b2c746_b.jpg" width=490><BR></DIV>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=370 cellSpacing=0 cellPadding=0 width=490 border=15>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=330 cellSpacing=0 cellPadding=0 width=450 border=5>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE style="FILTER: Alpha(Opacity=43,Style=0)" height=320 cellSpacing=0 cellPadding=0 width=440 border=10>
<TBODY>
<TR>
<TD align=middle width="100%">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></DIV></DIV>
 

月月亲宝贝

发表于2010-07-03 23:28:07

 好难懂啊~ 我想改变我的空间,可是我不懂怎么弄~
相关贴子
上海发现第11例甲型H1N1流感确诊病例上海第二例甲流疑似病例确诊 新增一疑似1M超大的趴趴熊哦,绝对让你爱不释手
玩具欣赏不错的十大儿童玩具最危险排行
宝宝主页特效、像框背景、挂件、信纸一应俱全(论...:宝宝主页特效、像框背景、挂件、信纸一应俱全规则不是鸟笼