电能表厂家
免费服务热线

Free service

hotline

010-00000000
电能表厂家
热门搜索:
行业资讯
当前位置:首页 > 行业资讯

关于网页背景的设计技能

发布时间:2019-01-31 03:06:55 阅读: 来源:电能表厂家

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

一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对全部网站的印象。如果你常常注意他人的网站,你应该会发现在不同的网站上,乃至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完全的总结。

1.色彩背景

色彩背景的设计是最为简单的,但同时也是最为经常使用和最为重要的,由于相对图片背景来讲,它有无与伦比的显示速度上的优势。在网页文件中,一般通过<body>标签来指定页面的色彩背景,其HTML语法为:

<body bgcolor=color>

其中的color表示不同的色彩,可以用各种不同的色彩表示方法,比较经常使用的有直接用色彩的英文名称,如blue、yellow、black等等,还可以用色彩的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,另外还可以用百分比值法和整数法,其效果都是一样的。

色彩背景虽然比较简单,但也有很多地方需要注意,如要根据不同的页面内容设计背景色彩的冷暖状态,要根据页面的编排设计背景色彩与页面内容的最好视觉搭配等等。

2.沙纹背景

沙纹背景其实属于图片背景的范畴,它的主要特点是全部页面的背景可以看做是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。

初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不但仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这1规律我们可以用1小块图片作为页面背景,让它自动在页面上重复排列,铺满全部页面,从而使网页的体积大大减小。

读者到现在恐怕都已知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法以下:

<body background=picture>

其中的picture表示背景图片的URL路径。

3.条状背景

条状背景与沙纹背景是比较类似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另外一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。

以在竖直方向上排列为例,首先用图象处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过

<body background=picture>

将其设为页面背景,经浏览器显示后,就成为全部页面从左到右蓝白渐变的分栏色彩背景。固然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

4.照片背景

把自己或朋友的照片作为页面的背景让大家看到,是有点使人激动的事情,但浏览器对图片的自动重复排列却使这一欲望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的CSS。在网页文件的<head>……</head>之间加入下面的CSS语句:

<style type=text/css><!--body{background-image:url(g);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/g);COLOR:black}>

有这么一首诗:<div>坐地日行八万里,巡于遥看一千河。</div>了不起...</P></BODY></HTML>

在浏览器中的显示效果所示,现在是否是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部份定义自己的背景,从而把页面打扮得更加漂亮和吸引人。

说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断出现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引发广大网页制作者对背景设计的注意,毕竟,背景对网页来讲实在是太重要了,固然,网站还是要以内容为第一的。

西服批发

翡翠镯子

铁路电气化工程专业承包资质

定制公司t恤