网页背景设计全攻略(1) 来源：中国站长学院 | 作者：风未起时 | 时间：2005-4-23 10:30:12 | 浏览： 人次 收藏到新浪 ViVi 收藏到 365KEY 收藏到我摘 字号选择 大 中 小 / 双击滚屏 单击停止 网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们 的设计方法都是怎样的呢，现在就由我来为大家作一个比较完整的总结。1.颜色背景颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过标签来指定页面的颜色背景，其 HTML 语法为：其中的color表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如 blue、yellow、black 等等，还可以用颜色的 十六进制表示方法，如#0000FF、#FFFF00、#000000 等等，此外还可以用百分比值法和整数法，其效果都是一样的。颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。2.沙纹背景沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的 HTML 语法如下：其中的picture表示背景图片的 URL 路径。3.条状背景条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。也通过将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。4.照片背景把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，没有做不到的，这里我们用上一点简单的 CSS。在网页文件的之间加入下面的 CSS 语句:这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整background-position的值就可以了。网页背景设计全攻略(2) 来源：中国站长学院 | 作者：风未起时 | 时间：2005-4-23 10:31:12 | 浏览： 人次 收藏到新浪 ViVi 收藏到 365KEY 收藏到我摘 字号选择 大 中 小 / 双击滚屏 单击停止 5.复合背景如果你在练习上面的“照片背景”时“ 不小心”也设置了标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的 颜色背景取而代之。它的设计方法，就不用我再多说了吧！6.局部背景前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢？回答是肯定的。最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。请看下面这个表格例子：在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些 CSS。请先看一下下面的这个例子：不仅仅是页面的背景记得毛主席有这么一首诗：坐地日行八万里，巡于遥看一千河。伟人就是了不起，几万里就出去了。在浏览器中的显示效果如图所示，现在是不是有点兴奋了，啊，原来文段也可以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，从而把页面打扮得更加漂亮和吸引人。说到这，关于网页背景设计的问题也就说得大概也就差不多了，但新的网页制作技术也在不断涌现，说不定今天你看了这篇文章，明天就觉得它太过时了。笔者写这篇文章，目的是引起广大网页制作者对背景设计的注意，毕竟，背景对网页来说实在是太重要了，当然，网站还是要以内容为第一的。网页设计中排版与布局小基础 来源：中国站长学院 | 作者：yuyu3007 | 时间：2005-3-23 20:59:40 | 浏览： 人次 收藏到新浪 ViVi 收藏到 365KEY 收藏到我摘 字号选择 大 中 小 / 双击滚屏 单击停止 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出 MUD来比 喻。可是，红花还需要绿叶陪衬。想想，若 MUD 不只是单纯的文本，还有画面出来， 那么，它所吸引的何止现在的这些 MUD 迷呢？ 那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么， 自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？我们的主页，说到底，只是一个 800*600 的画面，那么，我们要怎么对它进行安排 才合理呢？ 首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设 计，是一种有目的的创造。若在动手之前并不了解自己将要做什么及要怎么做， 而只是一味的靠操作 PHOTOSHOP 的滤镜而达到一种特效的话，那么，最终做出来的 东西最多局部看得觉得挺不错的，但全局就显得太复杂了。 页面上的构成，如果要让别人一眼望去觉得很 BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型。 构成形式里，有空间构成（平面构成和立体构成） 和时间构成（静和动）。 我们的创作，就是要协调这里面的种种关系，顺应视觉 感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有 着如下的部件： 点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的 面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。 线：点集合在一起就形成线。 面：一个平面。 体：一个物体。一般是指物体占据的空间，有三维形状。 那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。 两个点相距不远而且形状不等时，一般由小向大看。 近距离的点引起面的感觉。 灵活运用点，可使你的页面有一些本质上的变化。 当点占据不同的空间时，它所引起的感觉是不同的。 （1） 居中引起视觉集中注意 。 （2） 上引起下跌落感。 （3） 在上左或上右引起不安定感。 （4） 下方中点，产生踏实感。 （5） 左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。 在下方的东西，一般联想到大地。 在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。 而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但 适当运用部梢源锏揭恍厥庑 ?这个要靠个人的感觉。 面，指的是二度空间里的形。 面又分为几何形和任意形，我个人比较喜欢任意形，因为它往更具人情味。 几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么： （1） 圆形：运动及和谐美 （2） 矩形：单纯而明确，稳定 （3） 平行四边形：有向一方运动的感觉。 （4） 梯形：最稳定，令人联想到山。 （5） 正方形：稳定的扩张。 （6） 正三角形：平稳的扩张。 （7） 倒三角形：不安定，动态及扩张、幻想。 我们在日常生活中所看到的东西，都是由于形与形、图与底的相互关 系。图形之间，图底之间，正由于对比产生差异而被我们所感知所接 受。 图与底的视差越大，图形越清晰，对视觉的冲击力越大。 那么，平面上 有那么多的东西，我怎么才能够确定它是否是最主要的呢？请看：易于 成为视觉中心 的条件： （1） 居于画面中心。 （2） 垂直或水平的比倾斜更易成为中心。 （3） 被包围。 （4） 相对于其它图形较大的。 （5） 色感要素强烈。 （6） 熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点。 可以把自己认为最主要的东西做大一点，突出一点，色彩鲜艳一点，其它的东西小 而且色调不要那么鲜明，以免抢了主题的风头 。 注意：图与底之间的关系是很重要的。 如果我们确定了背景，再确定主题，在做页面时不注意而将图与底的关系设置为 1：1，那么，我们也许发现，底与图的力场争夺非常激烈，即有时底被我们认为是图。它们之间的关系只是相对，而非绝对。一般来说，底要大于图，而图要鲜于底。 一副图，我们怎样才认为它是美的呢？这涉及到形、声、色的有机结合，打动视知 觉，使观者产生美的共鸣。一般来说，有如下几点： （1） 稳定性：我们的视知觉总是试图找一个平衡点，若找不到则产生混乱。 （2） 对称性：相应的部位等量，易产于统一的秩序感，但比较单调，可采用增加 局部动势的方法，以取得鲜明、生动的效果。 （3） 非对称平衡：可以平衡为基础，调整尺寸形态结构。或者以形态各异的形， 经视觉判断，放置在确定的位置，以得到预想的平衡。这个和个人的审美有关系。 事实上，通过上述的一些方法，我们主要是为了创造秩序，使相互的东西能够在 没有互相干扰的系统中起作用。 混乱与秩序之间的对照唤起了我们的视知觉，我们于是通过平衡、比例、节奏、 协调，在迷乱中建立秩序，形成我们自己的风格。 形成自己作品的独特气质。 而如果注意自己作品的律动性，即旋律性，可通过重要一个基调实现，对于整个 页面应该有画龙点晴之效。 但要清楚的认识到，并非所有的节奏都产生律动性，有时候，听到一些音乐时觉 得它是垃圾，原理是一样的。 旋律要有情感因素，富于变化而又统一的节奏和总体的和谐。 流动的旋律，活泼、明快、自由、变化、生机勃勃。 也要注意到，反复、周而 复、单纯或渐变重复虽给人以视觉印象，但过于单调会使人疲劳并产生厌烦。必须 在反复中寻找动与静的完美结合，寻求单纯与复杂、细腻与奔放、定向与不定向之 间的对比，在构成方式上多探索，多借鉴，求新求变。 以下介绍这方面的方