登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

壳子的博客

学无止境

 
 
 

日志

 
 

好客阿郎的音画制作【存档】  

2010-05-04 21:33:44|  分类: 音画边框制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自好客阿郎《音画制作》

 

好客阿郎音画制作

(一) 音画制作(边框)

1.第一层

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

内容

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

align=center表示居中。

cellSpacing=35 表示格间线宽度。格与格之间的线为格间线,它的宽度可以使

用<TABLE>中的CELLSPACING属性加以调节。

cellPadding=20 表示内容与格线之间的宽度。在<TABLE>中设置

CELLPADDING属性,用来规定内容与格线之间的宽度。

width="100%" 表示帖子的宽度,

图片地址

是帖子边框第一层的图片地址。

border=0 边框是用border属性来体现的,它表示表格的边框边厚度和框线。将

border设成不同的值,有不同的效果。

 

2.帖子第一层的HTML代码我们已经编写好了。现在开始编写第二层的代码。第二层代码要写在第一层代码的开头和结尾之间。即:

<TABLE ..............><TBODY><TR><TD align=center width="100%">第二层</TD></TR></TBODY></TABLE>

第一层:

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

第二层:

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%">

内容

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

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

 

3.第三层你会编辑了吗?如果你觉得很麻烦,你可以复制第二层的代码到第三层,只需更改<table>里的属性值和边框素材的图片地址就可以了。

第一层:

<TABLE align=center cellSpacing=35 cellPadding=20 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

第二层:

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%">

第三层

<TABLE cellSpacing=15 cellPadding=15 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

内容

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

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

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

 

4.依次类推,我们按照上面的方法把帖子的九层边框全部编辑出来。注意:有九个开头<TABLE ............ ><TBODY><TR><TD align=middle width="100%">,就必须有九个结尾</TD></TR></TBODY></TABLE>。表格嵌套必须仔细弄清里外层表格的关系,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力,发出来就会是一堆令你头痛地乱码。

<TABLE cellSpacing=35 cellPadding=20 width="100%" borderColorLight=#9c8482 background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=15 cellPadding=15 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=10 cellPadding=10 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=9 cellPadding=9 width="100%" background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=图片地址border=0> <TBODY> <TR> <TD align=center width="100%">

<font size=7 color=red face=新宋体><b>内容</b></font> </TD></TR></TBODY></TABLE>

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

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

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

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

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

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

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

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

 

5.帖子的边框我们已经编辑完成了。现在我们对编辑帖子边框的HTML代码做一下温习补充说明。

帖子边框语法中:

<TABLE cellSpacing=35 cellPadding=20 width="100%" background=http://bbs.guqu.net/UploadFile/2004-11/2004118215628588.bmp border=0> <TBODY> <TR> <TD align=center width="100%"> 内容(图片,文字) </TD></TR></TBODY></TABLE>

<TABLE>里的属性一般有:

align=center

cellPadding=

cellSpacing=

width="700"

background=

cellSpacing=

border=

cellPadding, cellSpacing,width,border 的取值可以根据编辑制作帖子的需要来调整,

最后一层表格

<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://bbs.guqu.net/UploadFile/2004-11/2004118213852340.bmp border=0> <TBODY> <TR> <TD align=center width="100%">

在<TABLE .......>的属性中并没有设制居中,而是把居中设制在<TD align="center" width="100%">里面。在<TD>里面的width="100%"是指表格里面内容占整个表格的100%,align="center"指表格里面的内容居中。这样在这个表格里的所有内容不用加居中符号align="center"它们也会是居中的,省去了很多象<p align="center"></p>,<div align="center"></div>,<center></center>的代码。为了使整个代码帖发表后在论坛里居中,只需在第一层表格的<table> 里加上居中align="center"就可以了。后面多层的居中align="center"就只加在<TD>里面。第一层表格中,<TABLE.......>里面的align="center"是指表格在整个页面处于居中。 width="100%" 是相对值,指整个表格的宽度。

在本论坛里发表帖子,如果不是全屏帖的话,整个帖子的宽度WIDTH不要超过700.

(二)音画制作(内容1) 

6.现在,我们在已编辑好的边框中加入内容.先加入饰图.

饰图地址:

http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp

http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp

http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp

代码:

<TABLE cellSpacing=20 cellPadding=8 width="700" borderColorLight=#9c8482 background=第1层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第2层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=5 cellPadding=5 width="100%" background=第3层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第4层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=4 cellPadding=4 width="100%" background=第5层图片地址border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第6层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=3 cellPadding=3 width="100%" background=第7层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第8层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=第9层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp width="200" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp width="184" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp width="187" height="382"> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

 

7.现在我们继续向帖子边框中加入内容.加入帖子的主题"喝一碗孟婆汤 走一遍奈何桥".主题文字用文字设置语法来设定.

<FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #E6E8FA; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">喝一碗孟婆汤<br>走一遍奈何桥</FONT>

代码如下:

<TABLE cellSpacing=20 cellPadding=8 width="700" borderColorLight=#9c8482 background=第1层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第2层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=5 cellPadding=5 width="100%" background=第3层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第4层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=4 cellPadding=4 width="100%" background=第5层图片地址border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第6层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=3 cellPadding=3 width="100%" background=第7层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第8层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=第9层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp width="200" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp width="184" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp width="187" height="382"> <FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">喝一碗孟婆汤<BR>走一遍奈何桥</FONT> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

 

8.为了美化帖子,我们在帖子主题下面加入分隔图案. <TABLE cellSpacing=20 cellPadding=8 width="700" borderColorLight=#9c8482 background=第1层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第2层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=5 cellPadding=5 width="100%" background=第3层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第4层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=4 cellPadding=4 width="100%" background=第5层图片地址border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第6层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=3 cellPadding=3 width="100%" background=第7层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第8层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=第9层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp width="200" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp width="184" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp width="187" height="382">

 

<FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">喝一碗孟婆汤<BR>走一遍奈何桥</FONT> 

<img src="分隔图片地址" width="438" height="43">

<p align="center"><img src="分隔图片地址" width="196" height="138" border="0" alt=""></p>

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

注意加入的两张分隔图片语法:第二张分隔图片的调用语法中,加了一句<p align="center">.虽然帖子边框最里层(第九层)的<td width="100%" align="center">里已经设定了居中.但是如果第二张不设定<p align="center">的话,两张分隔图片将会执行帖子内容居中的命令,而会排成一行而居中.就不会上下排列而居中了.

(三)音画制作(内容2)

1.帖子做到这里,你发现了吧.边框就象一个容器,你只要把你想要编辑的内容放到里面去,边框就会根据你放入内容的增加而自动调整大小.现在我们开始加入图片.为了美观,先用HTML代码给图片做了边框.

在记事本里开始编辑图片边框的代码。颜色相同的代码为一层完整的开头和结尾。

第一层:

<TABLE align=center cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%">

第二层:

<TABLE cellSpacing=5 cellPadding=5 background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

第三层:

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=center width="100%">

第四层:

<TABLE cellSpacing=4 cellPadding=4 background=图片地址 border=0> <TBODY> <TR> <TD align=center width="100%">

第五层:

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%">

第六层:

<TABLE height=360 cellSpacing=0 cellPadding=0 width=480 background=http://bbs.guqu.net/UploadFile/2004-12/2004121120375912.bmp border=0> <TBODY> <TR> <TD align=center width="100%>

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

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

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

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

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

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

borderColorLight=#6080c0,是边框向光部分的颜色。borderColorDark=#000000,是边框背光部分的颜色。仔细看图片边框中,有凸起感的三层细边框效果,就是由这两个属性决定的。border=1是细边框的宽度。在第六层边框中,因为要给图片加透明FLASH,所以一定要用图片做第六层的内背景(灰色显示的地址部分)。

2.现在给加了边框的图片配上透明FLASH。

添加透明FLASH的语法如下:

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=动画地址 width=480 height=360 type=application/x-shockwave-flash quality="high" wmode="transparent">

其实你没有必要理解这些语法的含义,你只需复制套用。并把红色部分更换成你所想要的透明FLASH地址即可。width=480,height=360,是设定透明FLASH的宽度和高度的。你可根据需要改变其大小。但是FLASH的宽度和高度最好要与图片的高度和宽度相符。其他代码无须改动。

代码如下: 

<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=5 cellPadding=5 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=4 cellPadding=4 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE height=360 cellSpacing=0 cellPadding=0 width=480 background=主图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=动画地址 width=480 height=360 type=application/x-shockwave-flash quality="high" wmode="transparent">

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

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

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

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

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

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

3.这一步,我们继续把加了边框和透明FLASH的图片放到上面我们已经编辑好的帖子大边框里去。

代码如下:

<TABLE cellSpacing=20 cellPadding=8 width="700" borderColorLight=#9c8482 background=第1层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第2层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=5 cellPadding=5 width="100%" background=第3层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第4层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=4 cellPadding=4 width="100%" background=第5层图片地址border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第6层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=3 cellPadding=3 width="100%" background=第7层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第8层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=第9层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp width="200" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp width="184" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp width="187" height="382">

  <FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">喝一碗孟婆汤<BR>走一遍奈何桥</FONT> 

<img src="分隔图片地址" width="438" height="43">

<p align="center"><img src="分隔图片地址" width="196" height="138" border="0" alt=""></p>

 <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=5 cellPadding=5 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=4 cellPadding=4 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE height=360 cellSpacing=0 cellPadding=0 width=480 background=主图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=动画地址 width=480 height=360 type=application/x-shockwave-flash quality="high" wmode="transparent"></TD></TR></TBODY></TABLE>

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

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

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

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

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

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

4.同样道理.为保持帖子的整体协调一致.这个帖子里的所有图片的边框,都用同样的代码来修饰.我们只需把刚才已经编辑好了的图片边框代码复制.更改其中第六层的图片地址和与图片叠加的透明FLASH的地址就可以了.

继续把编辑了边框和透明FLASH的图片向帖子大边框里添加.别忘了图片之间还要加上一张分隔图片哦.代码如下:

<TABLE cellSpacing=20 cellPadding=8 width="700" borderColorLight=#9c8482 background=第1层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第2层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=5 cellPadding=5 width="100%" background=第3层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第4层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=4 cellPadding=4 width="100%" background=第5层图片地址border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=2 cellPadding=2 width="100%" background=第6层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=3 cellPadding=3 width="100%" background=第7层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#6080c0 background=第8层图片地址 border=1> <TBODY> <TR> <TD align=center width="100%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background=第9层图片地址 border=0> <TBODY> <TR> <TD align=center width="100%"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214031293.bmp width="200" height="382">

<IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118222128672.bmp width="184" height="382"><IMG src=http://bbs.guqu.net/UploadFile/2004-11/2004118214033222.bmp width="187" height="382">

<FONT style="FONT-SIZE: 35pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">喝一碗孟婆汤<BR>走一遍奈何桥</FONT>

<img src="分隔图片地址" width="438" height="43">

<p align="center"><img src="分隔图片地址" width="196" height="138" border="0" alt=""></p>

 <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=5 cellPadding=5 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=4 cellPadding=4 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE height=360 cellSpacing=0 cellPadding=0 width=480 background=主图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=动画地址 width=480 height=360 type=application/x-shockwave-flash quality="high" wmode="transparent"></TD></TR></TBODY></TABLE>

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

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

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

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

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

<p align="center"><img src="分隔图片地址" width="196" height="138" border="0" alt=""></p>

 <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=5 cellPadding=5 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=4 cellPadding=4 background=图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0 background=图片地址 border=1> <TBODY> <TR> <TD align=middle width="100%"> <TABLE height=360 cellSpacing=0 cellPadding=0 width=480 background=主图片地址 border=0> <TBODY> <TR> <TD align=middle width="100%"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=动画地址 width=480 height=360 type=application/x-shockwave-flash quality="high" wmode="transparent">

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

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

按上面的方法,把所有要用的图片加上边框和透明FLASH以及分隔图片,在帖子里加上文字和有背景音乐的FLASH,结束部分注明编辑作者.设置好在页面显示的FLASH。然后全部放进帖子大边框里.这样一张完整的HTML特效代码帖子就编辑完成了。

(四)音画制作(内容3)

框内加上文字代码:

 <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0
background=图片地址 border=1>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=5 cellPadding=5
background=图片地址 border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0
background=图片地址 border=1>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=4 cellPadding=4
background=图片地址 border=0>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 borderColorLight=#6080c0
background=图片地址 border=1>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE height=360 cellSpacing=5 cellPadding=5 width=450 align=center
background=图片地址 border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=10 direction=up>
<CENTER><FONT style="FONT-SIZE: 22pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">遥远的铃声轻颤, <BR>在天边渺茫的响起,<BR>再沉落…… <BR>那是奈何桥上,<BR>亡魂不舍昼夜的歌声……<BR>奈何桥上,<BR>孟婆悠悠端起汤碗……<BR>来者形形色色,<BR>有木然,有平静,有狰狞,有恐惧……<BR>半推半就,颤颤微微……<BR>汤端一饮而尽,<BR>终究没人逃的脱,<BR>终究要喝的一点不少,<BR>一点不多……<BR>孟婆悠悠收汤碗……<BR>前生再怎么深恋,<BR>走在这奈何桥上也是步履稳稳,<BR>丝毫不乱……<BR>心静如镜,心沉如石……<BR>桥这边寂寂无声……<BR>因为心死,<BR>失了往生的记忆……<BR>桥那边哀哀呛天……<BR>因为心动,<BR>忘不掉今世的缠缠绵绵<BR>“来生,再续前缘”……<BR>孟婆偶尔听到飘至耳边的声言,<BR>浅浅一笑……<BR>低头看那一锅汤,<BR>一锅普通的汤……<BR>只因加了一味叫遗忘的调料,<BR>也抵过了曾经的山盟海誓<BR>记忆小舟搁浅……<BR>苍海一栗<BR>大风大浪已是过眼云烟……<BR>偶尔觉得<BR>许多今生从未做过<BR>却似曾相识的事……<BR>没有什么磐石真的不移,<BR>世间最残酷的事是等待……<BR>等待,是一生最初的苍老……<BR>等到昙花再开<BR>等到风景看透<BR>饮尽孟婆汤的刹那,<BR>没有和着泪水吞咽……<BR>这一生,牵她的手,<BR>爱了,就牢牢的、牢牢的靠近<BR>不要在茫茫人海中丢了彼此<BR>还是……<BR>你是你,我是我,互不相欠,各奔幸福……<BR>即使梦中遇见了也不要打招呼,<BR>笑笑,然后擦肩过<BR>或者让我一生都拥有着你,<BR>或者我们永远都不要相见……<BR>
</FONT></CENTER></MARQUEE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

注明作者和在页面呀显示的FLASH:

<TABLE cellSpacing=10 borderColorDark=#6080c0 cellPadding=10 borderColorLight=#000000 border=1>
<TBODY>
<TR>
<TD>
<FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e6e8fa; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">=制作=</FONT>
</TD></TR></TBODY></TABLE><P><BR></P>

<EMBED style="LEFT: 0px; WIDTH: 1000px; POSITION: absolute; TOP: 420px; HEIGHT: 450px" align=right src=flash地址 type=application/octet-stream ;; quality="high" wmode="transparent">

<EMBED style="LEFT: 310px; WIDTH: 500px; POSITION: absolute; TOP: 525px; HEIGHT: 400px" align=right src=flash地址 type=application/octet-stream ;; quality="high" wmode="transparent">

 

加在页面上的FLASH 的定位是一个难点。需要反复实验多次才能比较准确的定位在你想要的位置上。

定位页面上的FLASH要注意调整的数值:

LEFT: 0px; 表示FLASH离左边的距离。值设为0px,则FLASH从左边最顶端开始出现。

TOP: 420px; 表示FLASH离顶端即IE浏览器的距离。设置不同的值,会使FLASH出现在帖子的不同位置。

WIDTH: 1000px; 表示FLASH范围的宽度。

HEIGHT: 450px; 表示FLASH范围的高度。

最后还是要提醒一下:编辑代码一定要简明干净。无用,多余的代码要清除掉。否则即浪费空间又影响速度。帖子发表以后,如果反复按编辑键在发帖栏里编辑多次的话,系统会自动向帖子里的内容之间增加换行代码<br>.导致内容(比如图片)之间的间隔越来越大。从而影响帖子的美观。所以要注意删除多余的<br>。在记事本里编辑就不会出现这种情形。

                              存档千岛湖比赛照片收藏

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客

 

好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
好客阿郎的音画制作【存档】 - 地狱壳子 - 壳子的博客
 

 


  评论这张
 
阅读(871)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018