一,网页背景设计全攻略网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。
1.颜色背景 颜色背景的设计是更为简单的,但同时也是更为常用和更为重要的,因为相对于图片背景来说,它有**的显示速度上的优势。在网页文件中,一般通过标签来指定页面的颜色背景,其HTML 语法为: 其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、 #000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。 颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的更佳视觉搭配等等。
2.沙纹背景 沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。 初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不**是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。 读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使更后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下: 其中的"picture"表示背景图片的URL路径。
3.条状背景 条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。 以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过 将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。
4.照片背景 把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的 CSS。在网页文件的……之间加入下面的CSS语句: 这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。
5.复合背景 如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!
6.局部背景 前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。 更为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子: 在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。 除此之外,我们还可以单前几为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子: STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}"> 记得毛主席有这么一前几诗:" 坐地日行八万里,巡于遥看一千河。 "伟人就是了不起,… …几万里就出去了。 在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。 说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为前几的。
二. 网页色彩搭配的内涵 网页的色彩搭配往往是网友们感到头疼的问题,尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢?让我们来看看网友54雨寒的高见吧!
(一)、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,更为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。 1、 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。 2、 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。 3、 在黄色中加入少量的黑,其色感和色性变化更大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 4、 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。 1、 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。 2、 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格更为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 1、 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。 2、 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。 3、 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。五、紫色的明度在有彩色的色料中是更低的。紫色的低明度给人一种沉闷、神秘的感觉。 1、 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。 2、 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。 3、 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。 1、 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。 2、 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。 3、 在白色中混入少量的蓝,给人感觉清冷、洁净。 4、 在白色中混入少量的橙,有一种干燥的气氛。 5、 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉 6、 在白色中混入少量的紫,可诱导人联想到淡淡的芳香三,网站建设 1、 构思篇 着手做主页之前一定要对自己将来的主页有个完整的构思,切忌随心所欲,想到什么做什么。那样的话,要么做到一半就难以为继,半途而废,要么作出的主页也是杂乱无章。 首先,应为自己的主页确定一个主题,如关于电脑、音乐等,以防做成一个大杂烩,不仅加大了寻找素材的难度,而且也为将来网站的维护带来困难。其次,应该给自己的主页确定几个栏目,并依据这 些栏目,设计出整个网站的主体框架,这个框架应保证访客浏览主页时,随时能到他想去的任何一个栏目。再次,要注意背景与正文颜色的对比度以提高页面的可读性,并注意把更重要的信息放在显眼的地 方。更后,就是关于页面布局的构思,包括使用普通页面还是采用框架,何处插入图片、文字或超级链接等。这些可由个人自己确定,这将形成整个网站的风格。但有一点一定要注意,应尽量使页面保持整 洁,标识清晰,切忌凌乱, 宁可少放些东西,否则,容易让访客不知所措。 2、 准备篇 作主页是个系统工程,要涉及许多方面。因此在不具备一些条件的情况下千万不要着手。简单的说必须具备以下条件: 1、 方便的上网途径,制作主页的素材、工具相当一部分来自网上。而且主页还要在上网调试中不断完善,即使完成主页后,还要经常地上网维护. 2、 至少一个E- mail 信箱。(可不要告诉我说你没有哦!)。 3、 申请到一个理想的免费主页存放空间。这一点比较关键,因为它不仅是将来主页的存放场所,而且主页上一些功能的实现还要依赖于这些场所所提供的服务。然而要申请到理想的场所还是不容易的。判断存 放场所好坏的标准有以下几条: ①接通速度,②服务器稳定性,③是否提供CGI(公共网关接口)权限及安装Microsoft Frontpage Server Extension,④ 提供空间的大小(一般应选择10M以上),然而据我的尝试发现,国内几十家存放空间提供商中更大部分已停止接受新的申请(多由于空间不足或担心影响接入速度),在综合考虑个方面因素之后,我将向?蠹彝萍鲆韵铝郊遥汉
网页设计攻略,一点见解,望见笑。