您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>编贴教程>>>教你做音画边框(新手)
教你做音画边框(新手)
发表日期:2007-3-31 8:27:00 出处:未知 作者:未知 发布人:nnwkl 已被访问 5115

本教程适合新学员初学边框代码

  在本站“各种背景图片”里有你要的背景素材,也可以到其它网站寻找您认为满意的素材。背景素材一般是共享的。其实,制作边框是很简单的一件事。对初学者来说,由于还不熟悉HTML代码,可以采用“照猫画虎”的办法进行学习。如果您不想在HTML方面进行深入的研究探讨,而只是满足自己编辑文章音画的需要,这种方式已经足够您用的了。我们在这里假定您会使用电脑的复制和粘贴功能。 

    第一步:选择一套背景素材图片备用。它是编制边框的“材料”。

第二步:确定您要制作的边框的层数。边框可以根据需要可以是一层的(由于太单调,一般不采用),也可以是多层的,层数越多,边框结构越复杂,也越美,当然也不能没有限度,层数太多反而会显得零乱,以不超过13层为最佳。我们以9层为例进行学习。

    过程:1、首先在网站登陆,进入发表文章编辑页面。

    2、在文章编辑页面里点一下鼠标,再点工具栏中的“居中”,然后点击编辑框右上角的“查看HTML源代码”左边的小框打上勾,显示,会出现<P align=center>&nbsp;</P>   您就可以开始制作了。
    第三步:复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码,一般音画论坛的网页资源栏目都可以找到,可直接复制过来。另一种途径是将任何一个现成套装复制到自己的编辑页面,再点击“查看HTML源代码”左面的方框,就会显示完整的代码。

    我们先复制一套现成的套装代码:

<P align=center>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=35 align=center background=http://xz2.2000y.net/314311/uploadpic/2006052815344215698.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=18 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815405219193.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=4 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815372597151.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=14 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815422499465.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=4 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815372597151.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=4 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815443266359.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=12 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815405219193.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=4 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006052815443266359.gif border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2005072409042181063.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></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></P></TD></TR></TBODY>
<P></P>
<P></P>
<P></P>
<P></P></P>

复制完成后,“查看HTML源代码”前的去掉勾,就会显示边框。这套代码做出来效果如下:

 
 
 

显然,这套边框不是很好看。下面就告诉您如何将这个边框变成一套美丽的边框。

再把“查看HTML源代码前的小框打上,就会显示全套代码,开始制作过程。

这套代码的前六行就是第一层边框的代码。第一层代码是最重要的,因为一些基本参数要在这里确定。
有几个基本数据必须交代给大家。LEFT: 0px是边框与页面边界的距离,0即为与左边界重合,取负数边框就会突破页面左边界,取正数则边框右边就会突破页面右边界。

WIDTH: 762px是边框整体外延的宽度,762正好是正常页面的宽度。小于这个数边框就会在页面的两边留出空隙,大于这个数就会突破正常页面,变成宽幅边框,这个我们下面再学习。TOP: 0px是边框上延与页面顶部的距离,除非有特殊需要,一般取0,否则边框顶部与页面会出现空隙,不美观。cellSpacing=35 是第一层边框与第二层边框的距离,数字越大,边框最外层的宽度就越大,一般根据需要调整。http://xz2.2000y.net/314311/uploadpic/2006052815344215698.gif 就是第一层边框图片的代码。从第二层到第9层边框的代码是一样的,只是图片代码不同而已。从<TBODY>到下一个<TBODY>之间就是一层边框的代码。

下面我们着手对这个边框进行“改装”

第四步:逐层替换边框图案。首先复制我们事先在另一页面准备好的上面那些边框素材代码。

方法是:鼠标右键单击素材图片,在出现的界面的最下方有“属性”,左键单击,就会出现图片属性界面,复制其中的地址代码,用这个代码替换原来边框第一层的图片代码。我们用上面的第一幅图片地址http://xz2.2000y.net/314311/uploadpic/2006111116250046964.jpg作为新边框的第一层图案,替换原边框的第一层图案代码http://xz2.2000y.net/314311/uploadpic/2006052815344215698.gif 得到下面的效果:

 
 
 

用第二幅图片替换第二层、第4层和第6层的边框图片,得到:


 
 
 

用第三幅图片替换原边框的第3、第5、第9层,用第四幅图片替换原边框的第7层。用第五幅图片替换原边框的第8层,最终,我们得到了如下的新边框: 

 
 
 

新边框是做出来了,但仔细一瞧,这个新边框仍然是不尽如人意。问题在哪里呢?

第五步:“照猫画虎”完了之后,我们要对这个新边框进行再一次的修饰。那就是:调整各层之间的距离。

朋友们仔细观察可以在每一层边框代码中都有cellSpacing=    的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。

我们对各层边框的宽度作如下调整:第一层调整为45,第2、4、6层调整为8,第3、5层调整为2,第7、8层调整为20,获得如下的效果:

 
 
 

第9层,也就是最里面我们用来贴文字和贴图的部分,这个数字通常为零,可以根据文字和贴图内容的要求无限制拉长。这个新边框好看多了吧?但仍没有结束。我们发现第8层和第9层边框之间的过渡有些别扭,解决的办法是:在每一层边框代码的结尾处有border=0的代码,把后面的0改为1,就会在两层图案间出现一个窄条,起到突出两层边框之间过渡鲜明的作用,我们把第8层边框结尾处的border=0改为border=1,就最终得到了如下的效果:

 
 
 

到这里,新边框就等于基本完成了,最后就是将框内的装饰的插图贴进去。

第六步:装饰框内空间。最后一步是要把装饰图案贴进框内,这一步可以直接将装饰图片复制粘贴进框内,而不用通过复制代码的繁琐步骤。我们将上面备用图片贴到框内,完成这个套装的编制过程:

题目
 
 
内容
 
 
 
 
 
 
 
 
 
 
 

http://nnwkl.2000y.net/

 

 

您对这个新边框还满意吗?您可以根据这些步骤“照猫画虎”地练习,熟练后就可以运用自如了!

注意事项:

      1、边框素材选择色彩要相近,反差太大反而不好看。但也不能完全没有色差,那样会显得单调呆板。

      2、最里层的图案最好使用单色或略有变化的图案,因为这里要粘贴文字和图片。

      3、每一段代码之间都留有一个字母的间隙,要留够,否则这一层图案就不显示。

      4、制作边框用的图片素材必须是jpg或gif格式,否则不能用(就是每个图片地址代码的后缀)。

这个新边框的完整代码是:

<P align=center>
<TABLE style="TABLE-LAYOUT: fixed" cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD style="WORD-WRAP: break-word"><FONT color=#3300ff size=4>
<P align=center>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=45 align=center background=http://xz2.2000y.net/314311/uploadpic/2006111116250046964.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116255791509.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116285250783.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116255791509.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116285250783.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116255791509.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=20 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116225561741.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=20 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116265765318.gif border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://xz2.2000y.net/314311/uploadpic/2006111116285250783.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<CENTER><FONT color=#8fbc8f size=7>题目</FONT></CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f>内容</FONT></CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER><FONT color=#8fbc8f></FONT>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER><IMG src="http://xz2.2000y.net/314311/uploadpic/2006111116263794454.jpg"></CENTER>
<CENTER>
<P align=center><A title=点击图片看全图 href="http://nnwkl.2000y.net/" target=_blank <P align="center"><FONT color=#ff8c00 size=5><STRONG><IMG alt="" src="http://xz1.2000y.net/314311/uploadpic/2005052023253455333.gif" onload="javascript:if(this.width>screen.width-333)this.width=screen.width-333" border=0></STRONG></FONT></A></P>
<P align=center><A href="http://nnwkl.2000y.net/"><FONT color=#bdb76b size=5>http://nnwkl.2000y.net/</FONT></A></P>
<P align=center>&nbsp;</P></CENTER></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></P></TD></TR></TBODY>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P></FONT></TR></TABLE></P></TD></TR>
<TR>
<TD borderColor=#ffffff width="100%">
<HR SIZE=1>
</TD></TR></TBODY></TABLE></P>


 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



304623620
(2007-12-19 13:44:00)

一时看不懂,不过还是要谢谢你了,我会慢慢学的。


叶子
(2007-6-15 12:38:00) [58.216.1.]

谢谢了,你辛苦了

 发表评论:共有 2 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉