音画帖制作与代码解释
本帖被 落拓居士 执行加亮操作(2007-06-07)
这里把题目标为解释,有些托大了,其实我对这也不算很了解,但大家相互参详也是好的,当然,我在这里说的不对,大家别扔我鸡蛋就是了,我吃太多蛋会长胖滴。 套个俗语:闲言不讲,书归正传。
前言: 音画帖,大家已经有所了解了,声音,图片,动画,加点什么滚动文字什么的,嗯,当然有更多的特效也蛮好,嗯嗯,非常好。 音画帖用的是html代码,其中套用了大量的css样式。而因为是在论坛发帖,由于论坛原来已经设置有CSS样式了,因此,在论坛发帖与做网页是不太一样的。 如何在本地测试音画帖:用记事本编辑好你的代码,点文件,另存为,在这里保存类型选为所有文件,然后修改文件名后缀,把txt换为htm,这样保存出来的文件就是网页文件,可以在你的电脑里双击查看效果。如果在打开此网页文件时,出现提示:为了保护你的安全,internet exporer已经限制.....单击此处查看选项。这时就单击它,然后选择允许阻止的内容,这时弹出安全警告,选是。这样才能加载出网页里的flash,音乐。。。
正文: 1.简单的音画帖,如何显示大图片,相当的大,比读帖框还要大?没问题,用表格就可以了,把图片放在表格里,做表格背景也可,直接显示也可。 例如: <table style="position: relative;left:-200px; top: 10px;width:1000px;height:1000px; border:1px;" background=http://xxxx.jpg > <tr><td> <marquee scrollamount=1 direction=up width=300 height=500> <font color=red size=4> 我已经好几天深夜不能眠都为了谁<br> 我只是心疼你哭肿的双眼多可怜<br> 如果情已决裂你伤心欲绝他没感觉<br> 他早已空了心对你的深情都看不见<br> 取一瓢深蓝色苦苦的湖水<br> 化成一滴蓝色的眼泪<br> 滴落在你眉间能解开情结<br> 还会让你心如止水<br> </font> </marquee> </td></tr> <tr><td> <EMBED style="FILTER: xray(); WIDTH: 300px; HEIGHT: 30px" src="音乐地址" type=audio/x-mpegurl volume="0" loop="-1" autostart="true" ></EMBED> </td></tr> </table>
下面就详解上面的代码: <table style="position: relative;left:-200px; top: 10px;width:1000px;height:1000px; border:1px;" background=http://xxxx.jpg > 这是定义表格的位置,宽高,以及背景的代码. <table 表示定义的是表格. style=" "这是表格的样式,所有的表格样式代码都放在里面,样式之间用分号隔开. position:relative 这是定义这个表格的位置,此代码定义的是表格在当前表格里的相对位置.也就是说这个表格是相对于它外围表格的位置,因为我们论坛也是由表格组成的,读帖时可以看到,左边显示的是会员头像与一些资料,右边表格里显示的才是帖子内容.因此,这个代码就很重要,不然你帖出来的表格可能只会显在右边阅读框里,超出的就不会显出来了. left:-200px; 这个是表格左边的位置,为什么要设成-200呢,因为是相对于阅读框来说,向左再移动200像素,就基本上是浏览器最左边了. top: 20px; 定义表格的上方位置,为什么设为20,这样的话, 发出来的帖子大约不会把发帖人的头像档住. width:1000px;这是定义表格的宽为1000像素.(一般我们的显示器像素是1024X768,也就是说宽为1024,这里定义1000,基本上这个表格就把屏幕宽度占满了.(当然可根据需要设置) height:1000px表格的高度为1000像素.(可根据需要设置) border:1px表格的边框线条宽度为1像素.如果设置为0,就可以隐藏表格线了. background=http://xxxx.jpg background是设置表格背景图片,后面的=http://xxx.jpg就是图片地址. <tr><td> 这里是设置表格一个行,一个列.表格必须有行与列才能成立,不然无效.
<marquee scrollamount=1 direction=up width=300 height=500> 这是设置滚动文字(图片)的代码. <marquee 表示你定义的是让对相移动 scrollamount=1 移动速度,取值一般从1-5,数字大的滚动快. direction=up 移动方向.up表示从下向上移动,还有down,left,right 就是上下左右.
<font color=red size=4> 设置文字的样式.这是简单设置. color=red表示字的颜色为红色,可以用别的颜色的英文,比如blue...也可以用色码,如color=#7777CC等. size=4表示文字的大小.可以自行设定.
<br>表示换行.在使用了html代码后,手动换行是无效的,文字换行要用<br>,当然也可以设置别的样式而不需要使用<br>,以后再讲.
</font> 表示文字的样式到此结束.在此后面的文字将不受上面设置限制而显示成别的样式了. </marquee>滚动对相到此结束,此代码后的文字,图片等不再受此控制. </td></tr> 列与行到此结束 <tr><td> 新增一行一列 <EMBED style="FILTER: xray(); WIDTH: 300px; HEIGHT: 30px" src="音乐地址" type=audio/x-mpegurl volume="0" loop="-1" autostart="true" ></EMBED> 以上是插入音乐的代码(mp3,wma,mid这几种音乐用此代码.) <EMBED 表示是设置的播放器对象. style=" " 这是设置样式,与上面表格设置样式时一样. FILTER: xray();这是设置播放器的显示效果,这里用的是一种滤镜效果.(此代码可以省略,则显示默认效果) WIDTH: 300px; 播放器的宽度 HEIGHT: 30px 播放器的高度 如果要隐藏播放器,把上面两项的值设为0就可以了. src=音乐地址 设置你的音乐地址 type=audio/x-mpegurl volume="0" 设置打开音乐时,声音为最大值.如果省略此代码,则打开音乐时声音为默认值. loop="-1" 音乐永久循环.去掉此代码,则音乐播放一次后停止. autostart="true" 打开网页时自动播放音乐.如果不想让它自动播放,可以把true换为0 </EMBED>播放器设置结束 </td></tr> 此列,此行结束 </table> 表格结束.
需要注意的是:代码有开始,就要有结束,这是代码的完整性,不然发出的帖子将可能严重变形.(虽然你在本地测试时没出错,但论坛有更多的样式定义好了,如你多加了定义,或是多加了结束语句,会导致论坛显示界面错乱)
暂时写到这里.希望对大家有所帮助.
|