wzyh

2.素材框:

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.
边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.
要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,
在http://www.3lian.com/gif/more/03/0301.html选了几款:

用第一张做背景图:
<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td>图与文字</td></tr></table>

用第一张做背景图:

图与文字

 

说明:
代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,
表格宽用了相对值90%,相对可显页面的90%.

下面把第二张做背景图,将格线设为5,width="100%".
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td>图与文字</td></tr></table>

将它放到前一张里:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>

<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td>图与文字</td></tr></table> 
 </td></tr></table>

图与文字

同理再将第三张放进去(格线为2):

图与文字

再将第四张放进去(格线为6):

图与文字

 

放一张图片进去看看效果:

 

[ 本帖最后由 wzyh 于 2007-12-20 23:15 编辑 ]

wzyh

 

 

 

代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" background="http://img4.3lian.com/sucai2/bj/123.gif"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://img4.3lian.com/sucai2/bj/115.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://img4.3lian.com/sucai2/bj/110.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://img4.3lian.com/sucai2/bj/124.gif"><tr><td> <img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=460>

 </td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table>

注:对应的颜色就是表格对应的开始标签和收尾标签.

 

[ 本帖最后由 wzyh 于 2007-12-20 23:27 编辑 ]

wzyh

三.背景图的特点及处理方法.

这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等.

用表格做的背景图,它的显示特点是:
当表格尺寸大于背景图原始尺寸时,会复制背景图.
当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.
为了看清楚效果,选一张人物图片做背景图:

 (原始尺寸为120X120)

注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了.

将它做背景图以后的效果:

 

代码：

<TABLE height=230 cellSpacing=0 cellPadding=0 width=390 background=http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

 

 

 

代码：

<table border="0" cellpadding="0" cellspacing="0" width="90" height="90" background="http://img03.taobao.com/bao/uploaded/i3/20070506/2f1/T1Q.dXXduqNdz1upjX.jpg_m.jpg"><tr><td></td></tr></table>

wzyh

处理背景图的方法:

1.选择花纹素材,如:

做背景后效果:

 

这样的图做背景被复制后不会变样.
素材库里这种类型的素材是很多的.

2.有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢?

根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.
而且放进去内容的大小必须小于他,以免撑大.

如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下:

 

这张图的原始尺寸是 800X600 ,要把它改小.

先下载到自己电脑的图片收藏夹里,
找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了.
结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif.
下面是按55%缩小后的大小(440X330):

 

用它做背景图,放一张图和几个字上去，表格也设为:（ width=440 height=330)

 

 

> 祝: 思雨1234万事如意 吉祥幸福

 

代码
<TABLE borderColor=#00ff00 height=330 cellSpacing=6 width=440 align=center background=http://up1.googletounion.com/data/aa/71/97/7/a/07/51/20071221_41d077f4e1f6cb5000ebU70GpQyaXKUl.jpg border=9>
<TBODY>
<TR>
<TD>
<P align=center> </P>
<P align=center><IMG src="http://club.lywww.com/attachments/day_070809/16O4ow==_hGCrnDOdE1yx.jpg" width=160> ></P><BR><BR><BR><BR>
<P align=center><FONT style="FONT-SIZE: 20pt" color=#b22222><B><PRE>  <FONT color=red> 祝:
 思雨1234万事如意 吉祥幸福</FONT></PRE></B></FONT></TD></TR></TBODY></TABLE>

[ 本帖最后由 wzyh 于 2007-12-21 00:28 编辑 ]

wzyh

四.图和文字放进框里的方法及注意点:

<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里.
代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高.
凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<br>,到满意为止,
也可用分段标签<p>......</P>,不够再加<br>,

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边.
再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点.
图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了:
<table ......><tr><td align=center>内容</td></tr></table>


五.做表格最容易犯的错误

<table ......><tr><td>内容</td></tr></table>

音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾</td></tr></table>,使得整个帖变形.
所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.


[ 本帖最后由 wzyh 于 2007-12-21 00:31 编辑 ]

wzyh

用工具做代码贴

用一个实例讲一下利用FrontPage做贴的过程

 

实例:

 

一生的守侯 盼着天快黑　在梦里和你相对 没有那流言　没有那是非 爱变得纯粹 你吻着我的嘴　眼里留下的泪 滋润了玫瑰　爱的花蕊 咸的爱情不会虚伪 等到天亮后　梦破碎 难把你找回 恨自己为何不能爱你到绝对 好想陪你到白头　一生和你永相守 害怕梦醒后　你飞走 不明白相爱的人还是要分手 好想厮守到白头　永远相偎不分手 今生来世放弃所有 不愿错过爱的人　一生守候 　 　下载 编辑:

 

一、 打开FrontPage ， 选择设计模式， 如图1




二、 表格——插入——表格，出现下图对话框，修改大小，布局等，如图2，点确定，出现图3模式






三、 重复第2步，再插入个表格，如图4设置（注意指定高度和宽度为即将插入图片的高与宽），点确定后出现两表格如图5






四、 光标位于小表格中，插入——图片——来自文件（选择你要放入的图片），如图6




五、 光标位于大表格中，上下添加文字，字体，字号，字色的更改如图7，添加完毕如图8






六、 光标位于文字下，表格——插入——表格（设置如图9，关键是1行2列），点确定，出现图10式样






七、 右键点击右边的那列——插入单元格，设置如图11，点确定出现图12






八、 光标位于左边那列，点击最下端的代码，如图13，这时出现大片代码，别急，在这片代码中找到光标的位置，直接插入<*EMBED src= http://www.ts49z.com/grzy/zl/wodeyinyue/陈淑桦-一生守侯.MP3 width=191 height=30 type=audio/x-pn-realaudio-plugin controls="ControlPanel" autostart="1">，这是试听代码（使用时去＊）。




九、 回到设计模式，光标点击位于右边的上列，再点击代码格式，用样在大片代码当中找到光标的位置，插入<*A href=" http://www.ts49z.com/grzy/zl/wodeyinyue/陈淑桦-一生守侯.MP3" target=_blank><*FONT face="华文行楷" color="#33CCCC" size="4" >下载<*/FONT><*/A> 这是下载链接代码（使用时去＊），如图14




十、 再次回到设计模式，在右边的下列，添加文字

十一、 现在你就可以点击代码模式，把那些令你头痛的代码复制粘贴到论坛，就ok啦。

wzyh

各式各样的播放器

提醒各位兄弟注意!!!复制代码试贴时一定要将播放器设为手动!!!否则

一旦播放器多了会产生一片嘈杂的声音,而且延缓网页打开的速度,切记!!!

几款最常用的播放器效果与代码

代码如下
<EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0">

代码如下
<EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true">

代码如下
<EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0">

代码如下
<EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0">

重要提示：

1 .WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整。
2. AUTOSTART="TRUE" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放。

wzyh

装饰美化你的播放器

有了基本的款式后，我们就可以根据自己的想象力，巧用HTML的表格，根据自己的图片素材，装饰美化自己的播放器啦。只要你有足够的创意，调整代码，就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。

首先我们可以为黑色播放器加上一个边缘
(中间红色的部分为原黑色播放器代码)

　

<TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><p  align=center><EMBED style="FILTER: Xray" src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

wzyh

　

代码如下
　

<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP: #ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted; BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5 border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<p  align=center><EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

wzyh

还可以将播放器置于一个单独的表格里，并加上表格的透明特效，播放器上的花纹就是表格的底图。

　

　

　

代码如下:
<TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<p  align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>