商务部电话:0755-33101350
技术部电话:0755-33122630
公司动态NEWS
当前位置: 首页 > 公司动态

网站制作之网页背景设计技巧

发布时间:2012-06-13 09:56:28 浏览次数:8164
更多

网站制作之网页背景设计技巧


  一个主页的背景就相当于一个房间里的墙壁地板一样,网站制作中的背景设计是相当重要的。好的背景不但能影响访问者对网页内容的接受水平,还能影响访问者对整个网站的印象。不同的网站,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。什么样的背景设计才是好的设计呢?

  1. 颜色背景

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

  <body bgcolor="color">

  其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

  2.局部背景

  最为常见的是在表格的设计当中,我们可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。代码:

  <HTML><HEAD><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">

  3.复合背景

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

  4.沙纹背景

  主要特点是整个页面的背景可以看作是局部背景的反复重排,沙纹背景其实属于图片背景的范畴。这类背景中以沙纹状的背景是为常见,所以我将其统称为沙纹背景。初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是却发现浏览器上显示出来的不只仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处置图片背景时的规律方法,利用这一规律我可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。

  沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下:

  <body background="picture">其中的"picture"表示背景图片的URL路径。

  5.条状背景

  与沙纹背景所不同的只让图片在一个方向上重复排列。以在竖直方向上排列为例,条状背景与沙纹背景是比较相似的适用于页面背景在水平或竖直方向上看是重复排列的而在另一方向上看则是没有规律的也是利用浏览器对图片背景的自动重复排列。首先用图像处置软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。

  <body background="picture">将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

  6.照片背景

  把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。这里我们用上一点简单的CSS。在网页文件的<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"的值就可以了。

专业网站建设,网站制作,品牌网站建设,品牌网站设计,专业网站建设,专业网站设计,企业网站建设,企业网站设计,外贸网站建设,外贸网站设计,营销网站建设,营销网站设计,O A 管理系统, ERP企业管理系统,B 2B B2C 行业网站开发,大型门户网站制作,购物网站制作,企业网站制作网站策划。