• 帮助
    • 博客
    • 相册
    • 网盘
    • 超市
    • Xer吧
  • 登录
  • 注册
【调查】网盘升级,您希望增加哪些功能?    【公告】X5dj网络硬盘升级公告(更新)    【公告】X5dj网站网络硬盘用户使用协议    【公告】关于定期清理长期未登录网站的用户网盘文件的通知    【公告】十一,精彩一路随行---X5dj半月刊2008年第18期上线    【公告】一边DIY,一边赚积分!--模板DIY共享功能上线!    【公告】新增用户操作记录展示功能,帮助您更好的与朋友们互动    【公告】X5dj新功能汇总贴:新增“密码目录”功能上线    【公告】X5dj.com相册/网盘上传工具发布    
  • 首页

  • 博客

  • 相册

  • 网盘

  • 人际关系网

loading...
教你作播放器特效 < 上一篇 下一篇 > 佛说爱情
简单快速制作边框
yidixiaoyu 发表于: 2008-07-05 09:47 来源:原创  X度:8  浏览:(203)  评论:(13)
收藏 | 复制地址 | [举报此文章] |  大 中 小 |  引用 删除 修改
  
简单快速制作边框

编写:随缘

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

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

           

              (一)                (二)        (三) (四)       (五)     

(注意:在实际操作中不需要把这些图片复制到编辑页面,因为在编辑页面这些图片是不能显示图片地址的。你在平时收集一些你喜欢的资料,并把这些资料上传到你的空间作为备用。)

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

    操作过程:

  1、首先在网站登陆。打开管理页面后,鼠标左键点击左上角的“发布新文章”,进入文章编辑页面。

    2、然后点击编辑框右上角的“查看HTML源代码”左边的小框,显示,您就可以开始制作了。如果用的是“16789网站”则点击左下角的“源代码”按钮进入源代码编辑状态就可以进行粘贴代码制作边框了。
    第三步:复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码,一般在各网站的网页资源栏目里都可以找到,可直接复制过来。另一种途径是将任何一个现成套装复制到自己的编辑页面,再点击“查看HTML源代码”左面的方框,就会显示完整的代码。

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


<TABLE width=100% cellSpacing=45 align=center background=第一层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第二层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第三层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第四层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第五层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第六层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第七层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第八层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第九层边框图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P>
<P align=center>&nbsp;</P>
<P></P></TABLE>


 

    复制完成后,点击“查看HTML源代码”左面的方框,如果用的是“16789网站”则点击左下角的“源代码”按钮进入源代码编辑状态就可以进行粘贴代码就会显示边框。这套代码做出来如下:
 

 

 

 

    再点击“查看HTML源代码”左面的方框,去掉方框里的勾。如果用的是“16789网站”则点击左下角的“源代码”旁边的“编辑”按钮进入展示编辑状态就可以进行粘贴代码显示全套代码,开始制作过程。

    这套代码的前六行就是第一层边框的代码。第一层代码是最重要的,因为一些基本参数要在这里确定。


    有几个基本代码和数据必须交代给大家。

  1、WIDTH: 762px 是边框整体外延的宽度,762正好是正常页面的宽度。小于这个数边框就会在页面的两边留出空隙,大于这个数就会突破正常页面,变成宽幅边框,这个我们下面再学习。

  2、TOP: 0px 是边框上延与页面顶部的距离,除非有特殊需要,一般取0,否则边框顶部与页面会出现空隙,不美观。

  3、cellPadding=0 是第一层边框与第二层边框的距离,数字越大,边框最外层的宽度就越大,一般根据需要调整。  第一层图片地址的代码就是第一层边框图片的代码。从第二层到第9层边框的代码是一样的,只是图片代码不同而已。从<TBODY>到下一个<TBODY>之间就是一层边框的代码。

  4、cellSpacing=45  的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。

    5、LEFT: 0px 是边框与页面边界的距离,0即为与左边界重合,取负数边框就会突破页面左边界,取正数则边框右边就会突破页面右边界。这个在以后制作宽屏边框时会讲到。

     6、align=center 表示的是居中。

    7、background=图片地址  表示在此处插入图片的绝对地址。

    8、border=0 表示的是边框的外装饰效果。

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

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

    方法是:到你准备的空间里拿到你想替换图片的绝对地址替换原边框的第一层图片地址的代码。这里我们就用教材里的(2)号图片,替换以后得到下面的效果:


 

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


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


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

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

    朋友们仔细观察可以在每一层边框代码中都有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格式,否则不能用(就是每个图片地址代码的后缀)。

 
系统分类:其他
标签:其他   专业   
推送: 无分类 归类:综合

给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
教你作播放器特效 < 上一篇 下一篇 > 佛说爱情
用户回复
风摇城  发表于:2008-07-05 10:09  引用 删除 修改 (1楼)
你真厉害!
感恩才会快乐,快乐才是生命的意义所在!欢迎光临我的主页:http://www.x5dj.com/风摇城
---这里有不少幽默笑话,美图好文,希望能给大家带来快乐、享受、思考和启迪。
 
风摇城  发表于:2008-07-05 10:09  引用 删除 修改 (2楼)
你真厉害!
感恩才会快乐,快乐才是生命的意义所在!欢迎光临我的主页:http://www.x5dj.com/风摇城
---这里有不少幽默笑话,美图好文,希望能给大家带来快乐、享受、思考和启迪。
 
梧桐居士  发表于:2008-07-05 10:14  引用 删除 修改 (3楼)
学习了,谢谢.
悄悄的我走了,正如我悄悄的来;我挥一挥衣袖,不带走一片云彩。
 
yidixiaoyu  发表于:2008-07-05 10:32  引用 删除 修改 (4楼)

下面是引用风摇城于2008-7-5 10:09:15发表的:
你真厉害!


我也在学习,希望朋友们都能学会、会用,把自己的博文装点的更美....
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
yidixiaoyu  发表于:2008-07-05 10:34  引用 删除 修改 (5楼)

下面是引用梧桐居士于2008-7-5 10:14:43发表的:
学习了,谢谢.


诗人来了,谢谢光临哦...
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
心若蓝天  发表于:2008-07-05 10:42  引用 删除 修改 (6楼)
谢谢
静谧的天宇,每颗星都有自已的轨迹。
 
秋夜无烟  发表于:2008-08-27 12:12  引用 删除 修改 (7楼)
来学习,,谢谢朋友!
 
yidixiaoyu  发表于:2008-08-27 19:35  引用 删除 修改 (8楼)

下面是引用心若蓝天于2008-7-5 10:42:33发表的:
谢谢


别客气哦~~
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
yidixiaoyu  发表于:2008-08-27 19:36  引用 删除 修改 (9楼)

下面是引用秋夜无烟于2008-8-27 12:12:33发表的:
来学习,,谢谢朋友!


欢迎你~~
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
LXYZ  发表于:2008-09-22 19:28  引用 删除 修改 (10楼)
学习!
此功能需激活邮箱后生效。
 
yidixiaoyu  发表于:2008-09-28 16:44  引用 删除 修改 (11楼)

下面是引用LXYZ于2008-9-22 19:28:00发表的:
学习!


欢迎你!!
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
沉静  发表于:2008-10-02 01:54  引用 删除 修改 (12楼)
收藏了。。。向你学习!
温一壶月光,与心儿干杯!!!
 
yidixiaoyu  发表于:2008-10-03 18:19  引用 删除 修改 (13楼)

下面是引用沉静于2008-10-2 1:54:28发表的:
收藏了。。。向你学习!


喜欢自己拿哦,共同进步~~
给自己一个理由,抹去尘封,让年华闪光给.自己一点时间,观海听涛,尽享生活美妙.给自己一个坐标,宁静淡远, 真诚面对.给自己一个归宿,丰富人生,放飞心情~~。
 
首页 上一页 1 下一页 尾页 共 1 页
评分与快速回复

博主推荐
  • · 中 秋 祝 福
  • · 简单快速制作边框
  • · 朋友,有空来坐坐
  • · 如何在图片中加入文字?
  • · “淡”是人生最深的滋味
  • · 教你从网盘下载喜欢的歌曲...
  • · 没有你的日子我.......
  • · 对话....
相关文章
  • ·爱尚新娘形象设计工作室地址和联系方式
  • ·[BL]高H小受老师学生....们攻
  • ·[ML]高H 校园贵公子之三傲君夺爱
  • ·[BL]白起(南康)--但愿人长久
  • ·什么是连锁销售?-连锁销售100问
  • ·注册公司:您适合注册什么样的企业?(申畅企登)
  • ·普通款如何化腐朽为神奇?
  • ·可不可以不跳
  • · 网络营销,向大师偷招
  • ·删QQ相册图标
  • ·中国首块自主研发会议系统芯片问世
博友热推
  • 网盘升级,您希望增加哪些功能?
  • X5dj网络硬盘升级公告(更新)
  • 真正的自我,就是要敢于放弃自我
  • 人在压力之下,真的会失声痛哭吗
  • 爱的信与不信,有时很难把握权衡
  • 兔斯基都说了,孤独就是一种态度
  • 人生种种皆为梦,数十年后尽化空
  • 一个简单的教育方式让我困惑至今
  • 为什么故事的结局总是那么完美呢
  • 社会是可以改造,但历史不容改变
关于我们 | X5dj动态 | 加入我们 | 友情链接 | 官方日志 | 免责声明 | 举报不良信息
北京开创明天科技有限公司 版权所有 京ICP证040979号