荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: hawkwolves (十一狼), 信区: Homepage
标 题: 网页背景设计全攻略
发信站: BBS 荔园晨风站 (Tue Jun 6 11:22:59 2000), 转信
网页背景设计全攻略
蟋蟀 (05/10/2000)
(图略)
网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景
就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接
受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该
会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的
背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现
在就由我来为大家作一个比较完整的总结。
1.颜色背景
颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对
于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过
<body>标签来指定页面的颜色背景，其HTML语法为：
<body bgcolor="color">
其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有
直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制
表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数
法，其效果都是一样的。
颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容
设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉
搭配等等。
2.沙纹背景
沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作
是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统
称为沙纹背景。
初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却
发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的
反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一
小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页
的体积大大减小。
读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图
片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆
砌。其实现的HTML语法如下：
<body background="picture">
其中的"picture"表示背景图片的URL路径。
3.条状背景
条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看
是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景
的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的
水平条状图片，其长度与页面的宽度相当。也通过
<body background="picture">
将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分
栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。
。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但
浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，
没有做不到的，这里我们用上一点简单的CSS。在网页文件的<head>……</head>之
间加入下面的CSS语句:
<style type="text/css"><!--body{background-image:url(myphoto.jpg);
background-repeat:no-repeat;background-attachment:fixed;
background-position:50% 50%}--></style>
这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏
览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果
你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只
需要调整"background-position"的值就可以了。
5.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置了<body>标签里的颜色
背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设
的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸
引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，
浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说
了吧！
！
6.局部背景
前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容
设置属于它自己的背景呢？回答是肯定的。
最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景
，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。请看下面
这个表格例子：
<table border="1" width="240" height="101" bgcolor="#C0C0C0"><tr><td
width="80" height="46" bgcolor="#00FFFF"></td><td width="80"
height="46"></td><td width="80" height="46"
bgcolor="#00FF00"></td></tr><tr><td width="80" height="47"
bgcolor="#FFFF00"></td><td width="80" height="47"
bgcolor="#FF0000"></td><td width="80" height="47"
bgcolor="#FF00FF"></td></tr></table>
在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页
面的背景,就是每一个单元格也可以设置各不相同的背景。
除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中
的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些CSS。请
先看一下下面的这个例子：
<HTML><HEAD><TITLE>不仅仅是页面的背景</TITLE><STYLE
TYPE="text/css"><!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:
red;COLOR:white}--></STYLE></HEAD><BODY><P STYLE="BACKGROUND:black
url(../images/bg.jpg);COLOR:black}">
记得毛主席有这么一首诗："<div>坐地日行八万里，巡于遥看一千河。
</div>"伟人就是了不起，……几万里就出去了。</P></BODY></HTML>
在浏览器中的显示效果如图所示，现在是不是有点兴奋了，啊，原来文段也可
以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，
从而把页面打扮得更加漂亮和吸引人。
说到这，关于网页背景设计的问题也就说得大概也就差不多了，但新的网页制
作技术也在不断涌现，说不定今天你看了这篇文章，明天就觉得它太过时了。笔者
写这篇文章，目的是引起广大网页制作者对背景设计的注意，毕竟，背景对网页来
说实在是太重要了，当然，网站还是要以内容为第一的。
--
┏━┳━┳━┳━┳━┳━┳━┳━┓
┃当┃你┃你┃你┃去┃我┃我┃我┃ My e-mail:11_wolf@163.net
┃了┃跟┃也┃没┃做┃手┃要┃不┃
┃小┃在┃没┃有┃老┃敲┃把┃再┃
李┃尼┃身┃有┃讲┃和┃木┃你┃烦┃ My homepage:http://192.168.35.20
敖┃姑┃后┃哭┃话┃尚┃鱼┃忘┃恼┃
※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 192.168.35.20]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店