网页布景规划技巧大全

网页中的布景规划是适当重要的，尤其是对于个人主页来说，一个主页的布景就适当于一个房间里的墙面地板相同，好的布景不但能影响访问者对网页内容的承受程度，还能影响访问者对整个网站的印象。假如你经常留意他人的网站，你应该会发现在不同的网站上，乃至同一个网站的不同页面上，都会有各式各样的不同的布景规划。究竟都有哪些不同款式的布景，还有它们的规划办法都是怎样的呢，现在就由我来为咱们作一个比较完整的总结。

　　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;background-attachment:fixed;background-position:50% 50%}--＞＜/style＞

　　这样，在网页页面中，就能够看到你的相片坐落页面的正中间，并且在拉动浏览器窗口的翻滚条时，相片依然坐落页面的正中间而不随页面内容一起翻滚。假如你觉得相片坐落页面的正中间不满意，你也能够随意地调整它在页面中的方位，只需求调整"background-position"的值就能够了。

　　5.复合布景

　　假如你在练习上面的“相片布景”时“不小心”也设置了＜body＞标签里的色彩布景，那么你看到了什么？色彩布景还起作用吗？对，你能看到你的相片浮于你设的色彩布景之上，二者能够一起正常地显现出来。这便是复合布景的魅力，更为吸引人的是，当你所设置的图片布景因为某种不可知的因素而不能正常显现的时分，浏览器能够主动用你所设置的色彩布景取而代之。它的规划办法，就不必我再多说了吧！

　　6.部分布景

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

　　最为常见的是在表格的规划当中，咱们可认为表格设置一个不同于页面的布景，乃至在不同的表格单元中，咱们也能够设置各个表格单元自己的布景。请看下面这个表格比如：

＜table border="1" width="240" height="101" bgcolor="#C0C0C0"＞ 
＜tr＞ 
＜td width="80" height="46" bgcolor="#00FFFF"＞＜/td＞ 
＜td width="80" height="46"＞＜/td＞＜td width="80" height="46" bgcolor="#00FF00"＞＜/td＞ 
＜/tr＞ 
＜tr＞ 
＜td width="80" height="47" bgcolor="#FFFF00"＞＜/td＞ 
＜td width="80" height="47" bgcolor="#FF0000"＞＜/td＞ 
＜td width="80" height="47" bgcolor="#FF00FF"＞＜/td＞ 
＜/tr＞ 
＜/table＞

　　在浏览器中的显现作用如图所示,能够看到,不但对于表格整个来说有不同于页面的布景,便是每一个单元格也能够设置各不相同的布景。

　　除此之外，咱们还能够单独为某个文字阶段设置布景，乃至为这个文字阶段中的某几个文字设置自己的布景，是不是有点适当不错，这也需求用上一些CSS。请先看一下下面的这个比如：

　　＜HTML＞＜HEAD＞＜TITLE＞不仅仅是页面的布景＜/TITLE＞＜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}"＞

　　记住毛主席有这么一首诗："＜div＞坐地日行八万里，巡于遥看一千河。＜/div＞"巨人便是了不起，……几万里就出去了。＜/P＞＜/BODY＞＜/HTML＞

　　在浏览器中的显现作用如图所示，现在是不是有点振奋了，啊，本来文段也能够有自己的布景。只需你乐意，你就可认为页面的任何一个部分界说自己的布景，从而把页面打扮得更加漂亮和吸引人。

　　说到这，关于网页布景规划的问题也就说得大概也就差不多了，但新的者对布景规划的留意，毕竟，布景对网页来说实在是太重要了，当然，网站还是要以内容为榜首的