网页背景工作设计全攻略.pdfVIP

网页背景设计全攻略 作者： 网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁 地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果 你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样 的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现在就由我来为 大家作一个比较完整的总结。 　　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;backg round-attachment:fixed;background-position:50% 50%}--/style 　　这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时， 照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可 以随意地调整它在页面中的位置，只需要调整background-position的值就可以了。 　　5.复合背景 　　如果你在练习上面的 “照片背景”时 “不小心”也设置了body标签里的颜色背景，那么你看到了什 么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出 来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常 显示的时候，浏览器能够自动用你所设置的