教你做音画边框

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







第二步：确定您要制作的边框的层数。边框可以根据需要可以是一层的（由于太单调，一般不采用），也可以是多层的，层数越多，边框结构越复杂，也越美，当然也不能没有限度，层数太多反而会显得零乱，以不超过13层为最佳。我们以9层为例进行学习。
过程：1、首先在网站登陆,进入发表文章编辑页面。
2、在文章编辑页面里点一下鼠标,再点工具栏中的“居中”，然后点击编辑框右上角的“查看HTML源代码”左边的小框打上勾，显示，会出现

 

   您就可以开始制作了。
第三步：复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码，一般音画论坛的网页资源栏目都可以找到，可直接复制过来。另一种途径是将任何一个现成套装复制到自己的编辑页面，再点击“查看HTML源代码”左面的方框，就会显示完整的代码。
我们先复制一套现成的套装代码：

复制完成后，“查看HTML源代码”前的去掉勾，就会显示边框。这套代码做出来效果如下：
显然，这套边框不是很好看。下面就告诉您如何将这个边框变成一套美丽的边框。
再把“查看HTML源代码前的小框打上，就会显示全套代码，开始制作过程。
这套代码的前六行就是第一层边框的代码。第一层代码是最重要的，因为一些基本参数要在这里确定。
有几个基本数据必须交代给大家。LEFT: 0px是边框与页面边界的距离，0即为与左边界重合，取负数边框就会突破页面左边界，取正数则边框右边就会突破页面右边界。
WIDTH: 762px是边框整体外延的宽度，762正好是正常页面的宽度。小于这个数边框就会在页面的两边留出空隙，大于这个数就会突破正常页面，变成宽幅边框，这个我们下面再学习。TOP: 0px是边框上延与页面顶部的距离，除非有特殊需要，一般取0，否则边框顶部与页面会出现空隙，不美观。cellSpacing=35 是第一层边框与第二层边框的距离，数字越大，边框最外层的宽度就越大，一般根据需要调整。http://xz2.2000y.net/314311/uploadpic/2006052815344215698.gif 就是第一层边框图片的代码。从第二层到第9层边框的代码是一样的，只是图片代码不同而已。从到下一个之间就是一层边框的代码。
下面我们着手对这个边框进行“改装”
第四步：逐层替换边框图案。首先复制我们事先在另一页面准备好的上面那些边框素材代码。
方法是：鼠标右键单击素材图片，在出现的界面的最下方有“属性”，左键单击，就会出现图片属性界面，复制其中的地址代码，用这个代码替换原来边框第一层的图片代码。我们用上面的第一幅图片地址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格式，否则不能用(就是每个图片地址代码的后缀）。
这个新边框的完整代码是：

题目     内容                       http://nnwkl.2000y.net/