网页设计怎么设置背景

一个网站是由许许多多网页组成的，网页是网站的主心骨。一个精美的网页不仅仅是依靠图文并茂的视觉展示，更重要的是网页的架构和布局，合理的布局才能让网页易于用户接受。接下来小编告诉你网页设计怎么设置背景。

颜色背景

颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过标签来指定页面的颜色背景

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

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

沙纹背景

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

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

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

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

条状背景

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

以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。

照片背景

把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的，没有做不到的，这里我们用上一点简单的CSS。

这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。

复合背景

如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么?颜色背景还起作用吗?对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧!

局部背景

前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。

最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。

现在的流行趋势是什么?

就像服装和发型会变，网页设计的风格也在变。对于背景来说，趋势的变化尤其突出。

目前，大量的网站在首屏采用了大图。一些背景是清晰、写实的(如照片和插图)，而另一些则可能是抽象隐晦的。大尺寸的、虚化或模糊的图也随处可见。

色块背景也很流行，但已经不是通常那种永不过时的黑和白。很多设计师使用强烈、浓重的颜色来帮助网站内容从背景中突显出来。

最后，图案和纹理也用得很多。不过形状的大小最近改变了不少。越来越多的网站在背景中采用大块的图案，而此前曾经流行的则是小的图案。大面积的图案与低反差的内容带来一种很微妙的感觉。细微的纹理背景也非常流行，用以给设计增添真实的感觉。

清晰的图像

使用逼真、清晰的图像从来不会过时，但是流行与否则取决于使用的方法。越来越多的此类图像现在是直接作为背景，而不是作为其它背景之上的照片。插图也日渐流行。同样，色彩是非常重要的，因为它决定了插图的品质。

模糊或虚化的图像

使用虚化或模糊图的情况会有些复杂。它只有在图片本身品质很好的情况下才会带来好的效果，如果为了掩饰图片质量的低劣而去虚化，效果会适得其反。一般我们需要要很清楚为什么要把一张图虚化。有时候非常明显的模糊会有很好的效果(像 Humaan 网站中柔化的山峰)，而有时候只需要轻微的虚化就足够了

色块

明亮的颜色正在开始流行并越来越引起注意。大量设计师选择利用颜色来创造出深度和对比。

黑或白

黑和白是经典的背景色，用起来也简单。你可以很容易为字体产生对比效果(即使是很小的字)，并且永不过时。如果加上一些细微的空间处理，黑色或是白色背景便会看起来更时尚。Foundry Co. 用到了线条来起强化的作用，而 Designing Monsters 在黑暗色调上用了大面积的对比色(黑白反差)。

图案或纹理

不要担心采用浓烈的图案背景。大块的、重复拼接的图案现在随处可见。细腻的纹理可以给设计增加真实感。此类流行设计的关键在于恰当的反差对比。请看 Alfred 网站的紫色，你可能要仔细地查看才能注意到背景中交叉的图案。

1、“国”字型： 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2、拐角型： 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型： 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5、上下框架型： 与上面类似，区别仅仅在于是一种上下分为两页的框架。

6、综合框架型： 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7、封面型： 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8、Flash型： 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9、变化型： 即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

1、显示器的分辨率

这个由科技发展和用户购买力及喜好决定，其数据取决于统计。

2、操作系统

毫无疑问目前是Windows的天下，其中Windows7占绝大多数。

3、网页浏览器

IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。

4、个人定制

主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式，但是总体上这部分应该属于高级用户，绝大部分用户依旧会使用操作系统和浏览器的默认样式。

所以计算一屏大小应基于以下原则：

1、一屏指绝大部分用户的浏览器显示网页的有效可视区域。

2、一屏的计算环境是Windows7和浏览器均处于默认样式。

3、由于IE无论是否超过一屏都存在纵向滚动条的位置，Firefox和Opera是在页面超过一屏的时候出现纵向滚动条，且浏览绝大部分网页都有纵向滚动条的存在，所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。

4、由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏，而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页，所以一屏大小在Firefox中指多窗口的控制栏存在时。

网页设计标准尺寸：

1. 最保守最有兼容性的网页设计尺寸为：779×432 ，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2. 1024×768下，网页宽度保持在1002以内，如果满框显示的话，高度是612눯之间，就不会出现水平滚动条和垂直滚动条。

3. 在ps里面做网页可以在800×600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560左右。

4. 在PS里做的图到了网上就不一样了，颜色等等方面，因为web上面只用到256web安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象。