理论上说网页背景可以是色块、图片等任意图片。实际制作中,我们要在考虑美观的同时考虑带宽问题。由于我们现在的网速实在很可怜,所以背景以及整个文件都要尽可能的小。一个网页无论多么美观实用,如果网页文件过大,导致网站打开速度慢,大多浏览者是没有耐心等下去的,最终都是关掉网页。结合现实情况,我们谈谈网页背景设计技巧和经验。
1. 纯色块的颜色背景
纯色块的颜色背景,制作是最为简单的,但同时也是最为常用和最为重要的。因为相对于图片背景来说,它在显示速度上有无与伦比的优势。
颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。
2.渐变色块背景
Dreamweaver处理图片背景时,都会自动使用平铺效果。我们可以利用这一规律用很小很小的一块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。
将其设为页面背景,经浏览器显示后,就成为整个页面从左到右,或从上到下的渐变颜色背景。
至于图片的制作,我们可以在Photoshop里制作好后,在Dreamweaver里插入。
3.图片背景
在网页文件的<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"的值就可以了。
4.复合背景
如果在“图片背景”的基础上再设置了<body>标签里的颜色背景,我们会看到什么呢?颜色背景还起作用吗?我们能看到图片浮于设定的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。
5.局部背景
前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。
最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子: <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}">
我们只要灵活应用,就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。
网页背景对整个网页来说真的很重要,大家在设计制作背景时,一定要注意。