费玉清模仿汪峰视频:快速学会制作边框[随缘] - 海之韵音画网站|音画|动画|教学|

来源:百度文库 编辑:九乡新闻网 时间:2024/04/27 17:14:23
快速学会制作边框[随缘]
发表日期:2010年2月8日  出处:网络  作者:随缘  本页面已被访问 10580 次
HTML语言基础知识 快速学会制作边框
编写:随缘
其实,制作边框是很简单的一件事。对初学者来说,由于还不熟悉HTML代码,可以采用“照猫画虎”的办法进行学习。如果您不想在HTML方面进行深入的研究探讨,而只是满足自己编辑文章音画的需要,这种方式已经足够您用的了。我们在这里假定您会使用电脑的复制和粘贴功能。
第一步:选择一套背景素材图片备用。它是编制边框的“材料”。背景素材一般是共享的。
(1)

(2)
 (3)   (4)
边框上方的装饰图片

边框中间的装饰图片

动态文字
(注意:在实际操作中不需要把这些图片复制到编辑页面,因为在编辑页面这些图片是不能显示图片地址的。你在平时收集一些你喜欢的资料,并把这些资料上传到你的空间作为备用。)
第二步:确定您要制作的边框的层数。边框可以根据需要可以是一层的(由于太单调,一般不采用),也可以是多层的,层数越多,边框结构越复杂,也越美,当然也不能没有限度,层数太多反而会显得零乱,以不超过13层为最佳。我们以9层为例进行学习。
操作过程:
1、首先在网站登陆。打开管理页面后,鼠标左键点击左上角的“发布新文章”,进入文章编辑页面。
2、然后点击编辑框右上角的“查看HTML源代码”左边的小框,显示,您就可以开始制作了。如果用的是“16789网站”则点击左下角的“源代码”按钮进入源代码编辑状态就可以
进行粘贴代码制作边框了。
第三步:复制边框代码。复制边框代码一般有两种途径。一是现成的套装代码,一般在各网站的网页资源栏目里都可以找到,可直接复制过来。另一种途径是将任何一个现成套装
复制到自己的编辑页面,再点击“查看HTML源代码”左面的方框,就会显示完整的代码。
我们先复制一套现成的套装代码:
第一层边框图片地址 border=0>






























到下一个之间就是一层边框的代码。
4、cellSpacing=45  的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。
5、LEFT: 0px 是边框与页面边界的距离,0即为与左边界重合,取负数边框就会突破页面左边界,取正数则边框右边就会突破页面右边界。
6、align=center 表示的是居中。
7、background=图片地址  表示在此处插入图片的绝对地址。
8、border=0 表示的是边框的外装饰效果。
下面我们着手对这个边框进行“改装”
第四步:逐层替换边框图案。首先复制我们事先在另一页面准备好的上面那些边框素材代码。
方法是:
1、我们用教材里的(一号)号图片的绝对地址替换原边框的第一层图片地址的代码。
2、用第(二)号图片替换第二层、第4层、第6层和第八层的边框。
3、用第(三)幅图片替换原边框的第3、第5、第7层和第九层边框。
新边框是做出来了,但仔细一瞧,这个新边框仍然是不尽如人意。问题在哪里呢?
第五步:  "照猫画虎”完了之后,我们要对这个新边框进行再一次的修饰。那就是:调整各层之间的距离。
朋友们仔细观察可以在每一层边框代码中都有cellSpacing=    的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。
我们对各层边框的宽度作如下调整:第一层调整为60,第2、4、6、8层调整为10,第3、5、7层调整为8,第8层调整为6。
第9层,也就是最里面我们用来贴文字和贴图的部分,这个数字通常为零,可以根据文字和贴图内容的要求无限制拉长。这个新边框好看多了吧?但仍没有结束。我们发现第8层和第9层边框之间的过渡有些别扭,解决的办法是:在每一层边框代码的结尾处有border=0 的代码,把后面的0改为1,就会在两层图案间出现一个窄条,起到突出两层边框之间过渡鲜明的作用,我们把第2、4、6、8层边框结尾处的border=0改为border=1。
到这里,新边框就等于基本完成了,最后就是将框内的装饰图案贴进去。
第六步:装饰框内空间。最后一步是要把装饰图案贴进框内,这一步可以直接将装饰图片的地址复制,然后点击图片粘贴按钮将图片插进框内。这样我们就做好了一个漂亮的边框了。
您对这个新边框还满意吗?您可以根据这些步骤“照猫画虎”地练习,熟练后就可以运用自如了!
最后完成的边框效果如下
注意事项:
1、边框素材选择色彩要相近,(最好是同一色像的),反差太大反而不好看。但也不能
完全没有色差,那样会显得单调呆板。
2、最里层的图案最好使用单色或略有变化的图案,因为这里要粘贴文字和图片。
3、每一段代码之间都留有一个字母的间隙,要留够,否则这一层图案就不显示。
4、制作边框用的图片素材必须是jpg或gif格式,否则不能用(就是每个图片地址代码
的后缀)。

海之韵音画网http://www.52hzy.net/
请点击这里跟我学制作
快速学会制作边框[随缘] - 海之韵音画网站|音画|动画|教学| 水波制作器的下载安装和使用[随缘] - 海之韵音画网站|音画|动画|教学| 文字的放大和缩小[随缘] - 海之韵音画网站|音画|动画|教学| 初级教材<飘落的枫叶>[随缘] - 海之韵音画网站|音画|动画|教学| 初级教材〈蝴蝶飞舞>[随缘] - 海之韵音画网站|音画|动画|教学| 初级教材〈飘动的白云〉[随缘] - 海之韵音画网站|音画|动画|教学| 高级教材《整点音乐报时钟》效果[随缘] - 海之韵音画网站|音画|动画|教学| 大图音画《幻望》主体背景的制作 - 海之韵音画网站|音画|动画|教学| 【PS教程】卷轴展开动画效果制作 - 海之韵音画网站|音画|动画|教学| PS教程:制作水墨荷花 - 海之韵音画网站|音画|动画|教学| 忧见,落梅如雪 - 海之韵音画网站|音画|动画|教学| 春思 - 海之韵音画网站|音画|动画|教学| 春雨 - 海之韵音画网站|音画|动画|教学| 如何用Flash制作透明背景的GIF动画 - 海之韵音画网站|音画|动画|教学| 『等待』实例教程(单图音画) - 海之韵音画网站|音画|动画|教学| UG5截取电影片段转GIF动画 - 海之韵音画网站|音画|动画|教学| 叶之语(风的故事) - 海之韵音画网站|音画|动画|教学| 幽泉碧荷(风的故事) - 海之韵音画网站|音画|动画|教学| 最后一场涅槃 - 海之韵音画网站|音画|动画|教学| 涉水为你轻歌 - 海之韵音画网站|音画|动画|教学| 你若是幸福我便是晴天 - 海之韵音画网站|音画|动画|教学| 爱的供养 - 海之韵音画网站|音画|动画|教学| 走向远方(风的故事) - 海之韵音画网站|音画|动画|教学| 教你解密网页源文件 - 海之韵音画网站|音画|动画|教学|





 



复制完成后,点击“查看HTML源代码”左面的方框,如果用的是“16789网站”则点击左下角的“源代码”按钮进入源代码编辑状态就可以进行粘贴代码就会显示边框。这套代码,再点击“查看HTML源代码”左面的方框,去掉方框里的勾。
这套代码的前3行就是第一层边框的代码。第一层代码是最重要的,因为一些基本参数要在这里确定。
有几个基本代码和数据必须交代给大家。
1、WIDTH: 1000px 是边框整体外延的宽度,1000像素是宽屏页面的宽度。小于这个数边框就会在页面的两边留出空隙,大于这个数就会突破正常页面,变成宽幅边框。
2、TOP: 0px 是边框上延与页面顶部的距离,除非有特殊需要,一般取0,否则边框顶部与页面会出现空隙,不美观。
3、cellPadding=0 是第一层边框与第二层边框的距离,数字越大,边框最外层的宽度就越大,一般根据需要调整。  第一层图片地址的代码就是第一层边框图片的代码。从第二层到第9层边框的代码是一样的,只是图片代码不同而已。从