朋友,我来教您做边框
楼主
风的韵律 2008-03-03 13:46:21
 其实,制作边框是很简单的一件事。对初学者来说,由于还不熟悉HTML代码,可以采用“照猫画虎”的办法进行学习。如果您不想在HTML方面进行深入的研究探讨,而只是满足自己编辑文章音画的需要,这种方式已经足够您用的了。我们在这里假定您会使用电脑的复制和粘贴功能。 

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


(注意:在实际操作中不需要把这些图片复制到编辑页面,因为在编辑页面这些图片是不能显示图片地址的)

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

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

    2、点击“居中”符号,然后点击编辑框右上角的“查看HTML源代码”左边的小框,显示,会出现<P align=center>&nbsp;</P>   您就可以开始制作了。
    第三步:复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码,我会尽快发在论坛的,可直接复制过来。另一种途径是将任何一个现成套装复制到自己的编辑页面,再点击“查看HTML源代码”左面的方框,就会显示完整的代码。

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

<BR>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=45 align=center background=http://bbs.xxjy.net/UploadFile/2005-12/20051224243462655.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224243470112.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224243470112.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224235325742.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224243470112.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224235343917.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=20 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224243462655.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224235396616.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://bbs.xxjy.net/UploadFile/2005-12/20051224235343917.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P><A title=新窗口打开 onfocus=this.blur() href="http://bbs.xxjy.net/UploadFile/2005-12/20051224235380233.jpg" target=_blank></A>&nbsp;</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>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P></TABLE>
<P>&nbsp;</P>

复制完成后,点击“查看HTML源代码”左面的方框,就会显示边框。这套代码做出来如下:
 


 

 

 

 

再点击“查看HTML源代码”左面的方框,显示全套代码,开始制作过程。

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

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

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

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

方法是:鼠标右键单击素材图片,在出现的界面的最下方有“属性”,左键单击,就会出现图片属性界面,复制其中的地址代码,用这个代码替换原来边框第一层的图片代码。我们用上面的第二幅图片地址http://www.616bbs.com/picture/xx9/bj/ltbj9/2.jpg作为新边框的第一层图案,替换原边框的第一层图案代码http://bbs.xxjy.net/UploadFile/2004-10/200410516193519.jpg 得到下面的效果:

 

 

 

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

 

 

 

如法炮制,用第6幅图片替换原边框的第3、第5、第7层图案,用第1幅图片替换原边框的第8层,用第5幅图片替换原边框的第6层。最终,我们得到了如下的新边框: 

 

 

 

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

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

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

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

 

 

 

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

 

 

 

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

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

 

 


 

ゴールドの薔薇と真珠

 

 

ゴールドの薔薇と真珠

 

 

ゴールドの薔薇と真珠

 

 

ゴールドの薔薇と真珠

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

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

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

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

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

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

<P align=center>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=45 align=center background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454980861.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454967795.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454983540.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454967795.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=2 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454983540.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=8 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454967795.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=10 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454983540.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=10 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910454947971.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=http://tietu.znrsw.com/UploadFile/2006-4/20064910425937759.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P><A title=新窗口打开 onfocus=this.blur() href="http://bbs.xxjy.net/UploadFile/2005-12/20051224235380233.jpg" target=_blank></A></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>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P></TABLE></P>
 

 

 

 

 

 


编辑 收藏 举报 主题管理
分享
Re:
2
冰玉陶然 2008-03-03 19:41:30
真漂亮.这么多代码,很复杂吧~~
编辑 回复此楼 举报 帖子管理
Re:
3
风的韵律 2008-03-04 06:57:14

引用 冰玉陶然 在 2008-3-3 19:41:30 时发表的内容:
真漂亮.这么多代码,很复杂吧~~

http://www.qcbl.me/post/topic.aspx?tid=2018400&p=1  ( 想学制作网页的朋友请进 ) 冰玉陶然,不想自己做边框也可以啊,你可以打开这个网址


---此回复由风的韵律在2008-3-4 15:46:18编辑
编辑 回复此楼 举报 帖子管理
Re:
4
风的韵律 2008-03-04 16:12:09

绿色边框

 
 
 
 
 
喜欢就是你的

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



 



---此回复由风的韵律在2008-3-4 16:25:54编辑
编辑 回复此楼 举报 帖子管理
Re:
5
风的韵律 2008-03-04 16:41:53

 

 

 


 

 

 

 
 

 

 

 

 

 

 

 

 

 

 

 

    

 

 

 

编辑 回复此楼 举报 帖子管理
Re:
6
2012-02-24 15:22:30
x而马路,就是那土壤上方的花床,[url=http://t.qq.com/a1978695772]北京治白癜风最好医院[/url],这柔软的满是芬芳的温床上开满了鲜花,各种颜色大大小小的花,这些花姿态各异,代表了人类无极无限的愿望,[url=http://t.qq.com/a1923135046]北京治疗白癜风医院[/url],有欲望,有渴望,还有希望。我看见更多的人流在城市四周汇集成一个旋涡,这旋涡的中心无法到达,[url=http://www.haolaba.com/beijing/yiliao/13420295.html]北京治疗白癜风医院[/url],人们如同一窝群体出动的蜜蜂在花床上打滚,不由自主的跟随着,我也猛扎进去,fejruihgdfjghd
编辑 回复此楼 举报 帖子管理
Re:
7
dan1223 2012-03-09 13:02:15
确定您要制作的边框的层数。边框可以根据需要可以是一层的(由于太单调,一般不采用),也可以是多层的,曾数越多,[url=http://www.ic98.com/service/837/8373260.html]北京白癜风医院[/url],边框结构越复杂,也越美,当然也不能没有限度,层数太多反而会显得零乱,以不超过13层为最佳。fejruihgdfjghd
编辑 回复此楼 举报 帖子管理
Re:
8
wuming 2012-03-15 11:14:34
也不管别人欢不欢迎它,总是想来就来,想走就走,这就是雨。
   下雨了,孩子爸爸在睡觉,我和孩子坐在过道玩,孩子腿上盖这小被子玩Ipad,我坐在旁边玩手机。
    雨滴一点一点在划落,落在水窝中,激起一片片的水泡,伴随着新落下的雨点,和先前的雨水混在一起,柔和而美丽,炎炎夏日,偶尔也是需要清凉一下的。
    有人把雨比作人生的四季,真是太恰当不过了,春雨温柔而悄然无声,夏雨滂沱而豪放,秋雨忧伤而咏叹,冬雨的深沉,到了冬天,雨的形体变为片片白雪,与双鬓斑白的老人银发一色。
    听这雨声,看着雨滴,[url=http://t.qq.com/wxwjyywmm25027?preview]初期白癜风能治好吗[/url],忽然看到孩子拼图拼到一起,嘴角上扬稚嫩的小脸,内心的幸福感油然而生,好惬意。
    生活中的幸福感和快乐感就是这么的简单,只要愿意就触手可及。?
编辑 回复此楼 举报 帖子管理
9
13077935972 2021-12-17 11:16:02

开奖网 农用抗生素及其他微生物药物(如麦角菌产生的具有药理活性的麦角碱类,有收缩子宫的作用)等。根据其种类的不同,抗生素的生产有多种方式,如青霉素由微生物发酵法进行生物合成,磺胺、喹诺酮类等

英国乐透8 可用化学合成法生产;还有半合成抗生素,是将生物合成法制得的抗生素用化学、生物或生化方法进行分子结构改造而制成的各种衍生物。细菌的细胞壁主要由多糖、蛋白质和类脂类构成,具有维持形态、抵抗渗透压变化

澳洲幸运5 内酰胺类抗生素能和这种蛋白结合从而抑制细胞壁的合成,所以PBPs也是这类药物的作用靶点。以这种方式作用的抗菌药物包括青霉素类和头孢菌素类,但是频繁的使用会导致细菌的抗药性增强。一些抗菌素与细胞的细胞膜

编辑 回复此楼 举报 帖子管理
快速回复:您还没有登录,请先[登录][注册]

沪公网安备 31011702004894号 

辽ICP备14001340号-3