个人资料
正文

石头制贴讲座之三(边框底图和滚动图片/字幕)

(2010-08-12 07:19:33) 下一个
石头制贴讲座之三(边框底图和滚动图片/字幕) 2009-06-21 00:37:58
[ 打印 ]
阅读 ()评论 (0)
评论
目前还没有任何评论
登录后才可评论.
不想让你哭



总想对你有些话要说
可不知道该说些什么
总想给你带来些欢乐
可不知道你喜欢什么
过了一夜又多了一天
时间让人变得好心烦
不知何时又才能见面
难道就这样天各一边
我不想让你哭 我也不想认输
只想用我的爱 再次把你留住
谁的眼泪随风飘向了远处
那也是我在为你祝福
我不想让你哭 我也不想认输
只想用我的爱 再次把你留住
如果爱情就是 我这场的赌注
输了你也就等于 输了全部



下载链接


叮呤呤,上课了。看看这个豪华贴子,貌似很复杂,其实很简单。我没有使用一个flash, 但是很有动感,所有的东西都在动,今天要给同学们介绍一个很重要的html语句:Marquee还是一句一句的讲,讲到哪里就说那里吧。

第一句:定义边框和底图

这句话定义了边框和底图。可以看到这个边框是两道浅蓝色的框框加了一条闪闪星星的带子。这不是从谁家抄袭来的,是俺的原创,大家可以发挥改成不同的颜色不同的图。两个浅蓝色边框是两个嵌套的table, 所以这句话里重复出现了两次table,tbody, tr和td。但是注意要把内补丁设置成为8不能是0,这样才能显示出来星星闪的夹层,也就是cellpadding=8星星闪是怎么出来的呢,实际上就是一个小gif图片:

图片地址是:http://i42.tinypic.com/6tedmw.gif
我只要在第一个table里面把这个图片设置成底图就行了。
background=http://i42.tinypic.com/6tedmw.gif
第二个table的底图是另外一个小图片:

图片地址是:http://www.sucai123.com/sucai/img4/639/b057.gif
第二个table覆盖了第一个table的大部分,只露一个8像素的边边,所以就能看到星星闪闪的一条带子了。
另外注意这两个table, 我定义的宽度是100%, 不是实际的多少pixel, 而是一个百分数,意思就是你给我多大的宽度我就占多大的宽度好了,所以发贴时候会看着宽一些,再博客里看会窄一些,取决于网页给了贴子多大的宽度了。
这个边框大家可以任意发挥,你可以用不同颜色,两个框框分别是用不同颜色也好看,可以用三个边框,四个边框,可以调节宽度,让它窄一点也行,底图可以换成不同的图片。
图片可以在网上找,搜索一下网页素材,就一大堆一大堆的图。

第二句:歌曲标题来回动

现在就要介绍这个Marquee, 基本语法就是marquee你想要动的东西/marquee
marquee有很多参数可以设定,就定了你要动的东西怎么动,往哪个方向动,来回循环还是就一次,运动的速度等等。
这里我想让这个“不想让你哭”动起来,来回动,那我就设置marquee的behavior是alternate就好了。另外还有scroll, slide两种属性,scroll, 就是一圈一圈的走,slide就是像幻灯片一样走一次就完了,你可以自己尝试一下看看效果。
在这句里面我还定义了字体的显示,font这个句法是来定义字体的,在它的style定义句中,我把自号定为40号,另外我加上了影子,影子的效果是灰色的, shadow(color=gray),要注意用firefox是看不出来这个阴影效果的。宽度是50%显示,这样子就在table内部中央50%的宽度内来回走了,字体本身的颜色是和边框相同的颜色,你也可以用其它颜色。lineheight就是行间句,150%就是空行1.5,但因为“不想让你哭“就一行,所以没用。字体我定义的是华文彩云,但是如果你的电脑是英文系统有没有安装中文字体,你是看不出来空心的华文彩云字体的。

第三句:图片slide show

还是这个marquee, 让这些图片动起来形成slideshow效果,注意高度要定义成图片高度,宽度是80%,也就是要显示在表格中央80%的宽度区域内。方向是向左,loop是控制它无限次的运转,scrollamount控制速度,数字越小越动的慢,可以自己调试,我这里用的是3。注意图片是提前找好的,并且改成了统一大小并上传的。图片的显示用img src就行了。

第四句: 滚动歌词

接下来是滚动歌词了,还是依旧使用marquee来使文字运动起来,只不过是向上滚动显示,速度是1。行间距是两倍,对字体的定义和歌名的定义有几处不同,字号要小,阴影效果变成了闪光效果,还是灰色,但是是在字的周围包了一层灰色,firefox还是看不到的。字体定义成为华文行楷。自体本身的颜色我设成了红色:crimson
我这里有一个英文颜色名称对照表,你可以参考:
http://school.21tx.com/2005/08/15/12819.html

第五句:播放器

哈哈,偷懒啦,到文学城发新贴的地方去搞个自动生成的code就行了。
链接:http://web.wenxuecity.com/BBSAdd.php?SubID=ktv

第六句:下载链接和结束

提供一个歌曲文件超级链接,以供听不到音乐的人下载收听。结束句就是结束第一句里面的两个table,现在table里面东西就都写完了。
整个贴字没有使用一个flash, 没有使用一个div模块,纯靠html语言来搞效果,也不错。
[打印]