网站设计

总结关于网站设计中背景应用技巧

网页中的背景设计是相称重要的,尤其是对于个人主页来说。

    一个主页的背景就相称于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。假如你常常留意别人的网站,你应该会发现在不同的网站上,甚至统一个网站的不同页面上,都会有各式各样的不同的背景设计。毕竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。
 
    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>
 
    在浏览器中的显示效果所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
 
    7、CSS背景平铺使用技巧
 
下面的例子中,设置了一个背景图片并且用background-position属性来控制它的位置,同时也设置了background-repeat为no-repeat。计量单位是像素。第一个数字表示x 轴(水平)位置,第二个是y 轴(垂直) 位置。
 
 
/* 例 1: 默认值 */
 
background-position: 0 0; /* 元素的左上角 */
 
 
/* 例 2: 把图片向右移动 */
 
background-position: 75px 0;
 
 
/* 例 3: 把图片向左移动 */
 
background-position: -75px 0;
 
 
/* 例 4: 把图片向下移动 */
 
background-position: 0 100px;

 


 
 
  背景定位属性可以用其它数值,枢纽词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。
 
 
  枢纽词是不用解释的。x轴上:
 
 
  ·* left
 
  ·* center
 
  ·* right
 
  y 轴上:
 
  ·* top
 
  ·* center
 
  ·* bottom
 
 
  顺序方面和使用像素值时的顺序几乎一样,首先是x轴,其次是y轴,像这样:
 
background-position: top right;
 
 
  使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:
 
 
  使用百分数定位时,实在是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和枢纽词定位时,使用背景图和元素的左上角为对齐基点。例如上例的background-position: 100% 50%; 就是将背景图片的100%(right) 50%(center)这个点,和元素的100%(right) 50%(center)这个点对齐。
 
 
终极的效果是笑容图片被定位在元素的最右边,离元素顶部是元素的一半,效果和 background-position: right center; 一样。
 
    除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相称不错,这也需要用上一些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>
 
    在浏览器中的显示效果所示,现在是不是有点高兴了,啊,原来文段也可以有自己的背景。只要你愿意,你就可认为页面的任何一个部门定义自己的背景,从而把页面梳妆得更加漂亮和吸惹人。
发布时间:2010-11-12 10:41:04