这就是坤沙百度云:【音画教程】多层背景边框的做法

来源:百度文库 编辑:九乡新闻网 时间:2024/05/02 21:54:20
 
多层背景边框的做法
编制/归舟
HTML语言,就是一个公式,网上有很多关于这方面的知识,我就画下下面的公式,大家照着描就好了,    你只要在可以使用HTML功能的地方,把下面的“东西”照搬着放到里面就好:
这是个七层的公式,当然依次类推,你可以做的更多,或者你只要一层也可以啊:))
1第一层:

第二层:

第三层:


第四层:


第五层:


第六层:


第七层:


大家看见了吧,除了第一层有几个格式不一样,后面几个基本一样,就是限定的数字不一样,由你自己限定,做出来看着好看就好了,这是目的:))
注意,还有这个也是不一样的--background="http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg"*>,就是引号里面的。那个网址就是你自己想要放在自己网页里面的背景图片,你想想如果都用一种背景图片,我们干吗这么费劲地做七遍啊:))所以要选择不同的背景图片才可以显示层次感,才会丰富好看啊:)))当然,选择的时候几层要搭调,就的协调,才好看。大家看明白了吗?
上面介绍的就是背景的制作。
接下来,就要把自己喜欢的图片和文字加上---
也很简单,图片的最简单格式---

其中,要变化的和背景一样,就是图片的网址,和“500”、“400”。500指的是宽,你不想要那么宽,你可以设定成450、350。。。。。等。“400”指是的高,和宽的道理一样:)))
文字,要先规定它的颜色、字体和大小,一般格式如下:

看见里面,什么是颜色,什么是字体,什么是大小了吧,这也是随你喜好调整的:)))
在它的下面加自己的文字就好了,行和行用“
”就好了。
简单吧:)))
再下来就是放自己喜欢的音乐,常用格式如下:

可以调整的就是引号里面的“网址”--指你选择的歌的网址,播放器的大小尺寸。
最后收尾。就是加上下面的就好了。




有几层加几个:    

到此,一个漂亮的网页就在你的手下做成功了,呵~~~~试试看,是不是很很简单哦:)))
注意,在做的时候,把所有的*号,去掉,那是为了在讲的时候,发在网页上不会显现出来是真实的图片了:)))--W我已把上面的*号去掉了:)
===========================下面的你可以不看,看了也没坏处:))
<*html> 是开头标记,指明下面是HTML语言编写的。
<*head><*bgsound src="http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3*><*/head>
是指HTML文件主题,一般音乐文件也可以插在此处。反正隐藏的音乐无论放在什么地方都可以的。
相关属性调整:
[align="center"] 表格的摆放位置(水平),可选值为: "left", "right", "center"
[border="0"] 表格边框的厚度,不同浏览器有不同的内定值,故请指明。
[cellpadding="0"] 文字内容与格线的距离。
[cellspacing="15"] 表格格线的厚度,数值越大,显示就越厚。
[width="540"] 表格宽度,接受绝对值(如 80)及相对值(如 80%)。
[background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"]表格的背景图片,(与" bgcolor "不要同用)。
在<*td>里面的[width="100%"]是指表格里面内容占整个表格的100%,[align="center"]指表格里面的内容居中.
注明:最后一层表格,<*table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"*><*tr><*td width="100%" align="center"*>
在<*table .......>的属性中勿须设制居中,把居中设制在<*td width="100%" align="center"*>里面。在<*td>里面的"width="100%"是指表格里面内容占整个表格的100%,*align="center"*指表格里面的内容居中,这样在这个格里的所有内容不用加居中符号它们也是居中的,省去了很多代码。
为了使整个代码帖发表后在论坛里居中所以只用在第一层表格的<*table> 里加上居中就可以了,后面多层的居中就加在<*td>里面。第一层表格中,<*table .......>里面的*align="center"*是指表格在整个页面处于居中,*width="540"* 是指整个表格的宽度。
下面是帖子内容文字的代码:
<*FONT face=隶书 color=#FFFF00 size=5*>
[face=隶书] 指字体
[color=#FFFF00] 指文字颜色
[size=4] 指文字大小,数值越大文字越大
文字中间<*br>是换行符号
说明:
背景层的代码如下:<*table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"*><*tr><*td>
没用背景图片也没用背景颜色,只用了边框的颜色的属性。
[bordercolorlight="#C9B976"] 表格边框向光部分的颜色
[bordercolordark="#C9B976" ]表格边框背光部分的颜色
由于在整个内容部分的表格层里的<*td width="100%" align="center"*>中设制了居中,所以这个表格中的内容都会居中,在这里的图片边框表格和图片代码中都不需要再设制居中了。图片也只用调整宽和高了。
图片的代码如下:<*img border="0" src="http://211.147.4.138/upload/00/80/54/88/805488_1076739938031.jpg" width="320" height="240"*>
注明:在每张图片层的结尾处都不要忘了收尾<*/TD><*/TR><*/TABLE>,用了几个表格来加框这里就要有几个收尾。
在主题内容的图片和文字完了之后,由于前面把整个帖子的内容加了表格的,所以这里在内容图片文字完结之后不要忘了收尾<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table>
这里用了三个<*table>就要有三个<*/table> 来结尾.这样主题内容算是完成了。后面的就加一些装饰的图,签上名字等`````再来就是帖子结尾了。最前面的我用了七层表格做为帖子背景,这里收尾也要有七个层。
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table>
说明:看起来好像是用了四层表格,其实只用了两层,同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。
原代码如下:









说明:
这种效果其实有好几种方法做出来,但是在我认为这种是最简单的,只是金色背景那层(第二层)表格的宽是100%其它属性值一律为0。主要是在第三层,第三层的宽width的取值要是99%,而第三层的td里的width属性要是100%。
源代码如下:










说明:这个好像没什么特别的,就是把四个角上的框架图用表格分开。
源代码:









说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。
源代码:









") 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。
源代码:









最后把表格的相关属性再全都说明一下。
的参数设定(常用):


HTML语言,就是一个公式,网上有很多关于这方面的知识,我就画下下面的公式,大家照着描就好了,    你只要在可以使用HTML功能的地方,把下面的“东西”照搬着放到里面就好:
这是个七层的公式,当然依次类推,你可以做的更多,或者你只要一层也可以啊:))
1第一层:

第二层:

第三层:


第四层:


第五层:


第六层:


第七层:


大家看见了吧,除了第一层有几个格式不一样,后面几个基本一样,就是限定的数字不一样,由你自己限定,做出来看着好看就好了,这是目的:))
注意,还有这个也是不一样的--background="http://bbs.hnol.net/theimg/2004-6-20/18/200462018101221105.jpg"*>,就是引号里面的。那个网址就是你自己想要放在自己网页里面的背景图片,你想想如果都用一种背景图片,我们干吗这么费劲地做七遍啊:))所以要选择不同的背景图片才可以显示层次感,才会丰富好看啊:)))当然,选择的时候几层要搭调,就的协调,才好看。大家看明白了吗?
上面介绍的就是背景的制作。
接下来,就要把自己喜欢的图片和文字加上---
也很简单,图片的最简单格式---

其中,要变化的和背景一样,就是图片的网址,和“500”、“400”。500指的是宽,你不想要那么宽,你可以设定成450、350。。。。。等。“400”指是的高,和宽的道理一样:)))
文字,要先规定它的颜色、字体和大小,一般格式如下:

看见里面,什么是颜色,什么是字体,什么是大小了吧,这也是随你喜好调整的:)))
在它的下面加自己的文字就好了,行和行用“
”就好了。
简单吧:)))
再下来就是放自己喜欢的音乐,常用格式如下:

可以调整的就是引号里面的“网址”--指你选择的歌的网址,播放器的大小尺寸。
最后收尾。就是加上下面的就好了。




有几层加几个:    

到此,一个漂亮的网页就在你的手下做成功了,呵~~~~试试看,是不是很很简单哦:)))
注意,在做的时候,把所有的*号,去掉,那是为了在讲的时候,发在网页上不会显现出来是真实的图片了:)))--W我已把上面的*号去掉了:)
===========================下面的你可以不看,看了也没坏处:))
<*html> 是开头标记,指明下面是HTML语言编写的。
<*head><*bgsound src="http://www.6uc.com/ycb/jiaoshi/g-yyj/music/20.mp3" loop=3*><*/head>
是指HTML文件主题,一般音乐文件也可以插在此处。反正隐藏的音乐无论放在什么地方都可以的。
相关属性调整:
[align="center"] 表格的摆放位置(水平),可选值为: "left", "right", "center"
[border="0"] 表格边框的厚度,不同浏览器有不同的内定值,故请指明。
[cellpadding="0"] 文字内容与格线的距离。
[cellspacing="15"] 表格格线的厚度,数值越大,显示就越厚。
[width="540"] 表格宽度,接受绝对值(如 80)及相对值(如 80%)。
[background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553878.jpg"]表格的背景图片,(与" bgcolor "不要同用)。
在<*td>里面的[width="100%"]是指表格里面内容占整个表格的100%,[align="center"]指表格里面的内容居中.
注明:最后一层表格,<*table border="0" cellpadding="0" cellspacing="0" width="100%" background="http://www.xqwuyu.com/UploadFile/2004-6/200462902553907.jpg"*><*tr><*td width="100%" align="center"*>
在<*table .......>的属性中勿须设制居中,把居中设制在<*td width="100%" align="center"*>里面。在<*td>里面的"width="100%"是指表格里面内容占整个表格的100%,*align="center"*指表格里面的内容居中,这样在这个格里的所有内容不用加居中符号它们也是居中的,省去了很多代码。
为了使整个代码帖发表后在论坛里居中所以只用在第一层表格的<*table> 里加上居中就可以了,后面多层的居中就加在<*td>里面。第一层表格中,<*table .......>里面的*align="center"*是指表格在整个页面处于居中,*width="540"* 是指整个表格的宽度。
下面是帖子内容文字的代码:
<*FONT face=隶书 color=#FFFF00 size=5*>
[face=隶书] 指字体
[color=#FFFF00] 指文字颜色
[size=4] 指文字大小,数值越大文字越大
文字中间<*br>是换行符号
说明:
背景层的代码如下:<*table border="2" cellpadding="0" cellspacing="2" bordercolorlight="#C9B976" bordercolordark="#C9B976"*><*tr><*td>
没用背景图片也没用背景颜色,只用了边框的颜色的属性。
[bordercolorlight="#C9B976"] 表格边框向光部分的颜色
[bordercolordark="#C9B976" ]表格边框背光部分的颜色
由于在整个内容部分的表格层里的<*td width="100%" align="center"*>中设制了居中,所以这个表格中的内容都会居中,在这里的图片边框表格和图片代码中都不需要再设制居中了。图片也只用调整宽和高了。
图片的代码如下:<*img border="0" src="http://211.147.4.138/upload/00/80/54/88/805488_1076739938031.jpg" width="320" height="240"*>
注明:在每张图片层的结尾处都不要忘了收尾<*/TD><*/TR><*/TABLE>,用了几个表格来加框这里就要有几个收尾。
在主题内容的图片和文字完了之后,由于前面把整个帖子的内容加了表格的,所以这里在内容图片文字完结之后不要忘了收尾<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table>
这里用了三个<*table>就要有三个<*/table> 来结尾.这样主题内容算是完成了。后面的就加一些装饰的图,签上名字等`````再来就是帖子结尾了。最前面的我用了七层表格做为帖子背景,这里收尾也要有七个层。
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table><*/td><*/tr><*/table>
<*/td><*/tr><*/table>
说明:看起来好像是用了四层表格,其实只用了两层,同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。
原代码如下:









说明:
这种效果其实有好几种方法做出来,但是在我认为这种是最简单的,只是金色背景那层(第二层)表格的宽是100%其它属性值一律为0。主要是在第三层,第三层的宽width的取值要是99%,而第三层的td里的width属性要是100%。
源代码如下:










说明:这个好像没什么特别的,就是把四个角上的框架图用表格分开。
源代码:









说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。
源代码:









") 说明:
把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。
源代码:









最后把表格的相关属性再全都说明一下。
的参数设定(常用):


width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。
border="1"
表格边框的厚度,不同浏览器有不同的内定值,故请指明。
cellspacing="2"
表格格线的厚度
cellpadding="2" 表格格线与内容的间隔。
align="CENTER"
表格的摆放位置(水平),可选值为: left, right, center
valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。
background="myweb.gif"
表格的背景图片,与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色,与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。
border="1"
表格边框的厚度,不同浏览器有不同的内定值,故请指明。
cellspacing="2"
表格格线的厚度
cellpadding="2" 表格格线与内容的间隔。
align="CENTER"
表格的摆放位置(水平),可选值为: left, right, center
valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。
background="myweb.gif"
表格的背景图片,与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色,与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。