网站制作中网站背景设计的重要性

网站制作中如果你的网站背景设计的出色，与网站融为一体，并且富有特色与吸引力，那么你的网站在同行出便会出类拔萃，在网络营销效果上会占据优势。其实对于网站制作技术人员来说，网站背景的设计处理并不是件容易的事情，需要考虑的事情有很多，而且在设计的时候还需要考虑不同的浏览器的兼容问题。如果不考虑网站在不同分比率显示器下的兼容性，我们几乎可以忽略网站背景不计算。但实际上这是不可能的，因为虽然电脑显示器的屏幕越来越宽，但是分辨率规格却越来越多。而且我们永远都不会知道网站的访问者会用什么样的电脑，什么样的显示来浏览网站。所以，在网站设计的时候一定考虑到不同访问环境下，网站所给用户带来的感受。因为网站最终是要给用户看的，而且是给不同的用户去浏览，为了满足不同用户对网站访问的需求，在网站设计的时候只有通过巧妙的背景搭配来实现最大程度的兼容。

网站背景巧妙设计可以突出网站色彩风格

苏州网站制作专家马可波罗技术人员强调说：网站色彩的搭配对于网站的重要性是显而易见的，不同的网站设计人员对于色彩的理解以及对于色彩的运用水平是不同的。对于一个网站来说，色彩视觉效果处理的好，就会吸引用户长时间的浏览你的网站，更有兴趣做进一步的了解。而且，颜色的应用在网站设计中占据了相当的比重，所以我们看到一些设计感不错的网站，多半颜色运用的都十分出彩。除去网站主体的色彩应用需要高度讲求和谐之外，网站背景色的合理运用亦非常重要。如果网站主体色彩比较清淡，那么适度浓重的背景色彩，就会让网站感觉非常干净清爽。我们通常所说的好花还需绿叶配，其就是这个道理，其意味着网站上的任何一块色彩，哪怕是网站的背景色也绝非微不足道。

网站背景设计应注重形成网站特有的气势

网站靠什么吸引用户?富有冲击力的色彩搭配是其一，网站的结构同样十分重要。现在有不少的网络公司都在提倡营销型网站建设，作为苏州网站建设第一品牌，马可波罗也逐渐强化这个观念。只要我们稍许留心就会发现，富有营销力的网站设计最大的特点就是构图大气，通常通过比较有对比性对大图片，夸张的展示足以吸引用户关注。而网站背景作为网站设计的主要组成元素，合适的素材应用就会让网站即可显的与众不同，更有气势和吸引力。当然这里有一个前提，那就是网站背景图片或者色彩的选择必须有机的融合到网站的整体设计中，而不可孤立的展现。

阿飞供稿

苏州网站设计

转载请保留链接

谢谢!

怎样给网站加上背景图片？

1.去网上搜索2个自己喜欢的图片，1个图片用来作为整个网页的背景，另一个图片可以进行重叠组成网页的背景。

学哥找了2个大尺寸的图片和2个小尺寸图片，如下图目录所示：

在index.html所在的目录下创建一个images目录，将4个图片全部放进去。

2.给技术经验的表格增加一个表头，标题分别是：技术类别，技术点，经验年数。文字加粗显示。

在技术经验的表格的第一行增加一个tr，里面增加3个td，然后复制一个CSS样式td1，改名为tdh，增加设置文字粗体，背景色设置为淡灰色。

css代码修改如下：

html代码修改如下：

刷新页面：

可以看到，表头的文字加粗，并且背景色为半透明浅灰色。

设置tdh的background-color:rgba(200,200,200,0.6);，这是一个新的写法，通过CSS的函数rgba可以设置一个RGBA颜色，这种颜色值带有一个alpha通道，可以设置颜色的透明度，也就是可以透过当前颜色的比率是多少。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

rgba(200,200,200,0.6);就是一个灰色的，透明度为0.6的一个半透明浅灰色。

因为整个body的背景色也是灰色的，因此这里就看不出来tdh的背景色是半透明的，可以来调整body的背景为一个图片，就能看出来是半透明的了。

设置背景图片

之前讲了通过设置body的background-color属性来设置整个网页的背景色。

背景色设置有时候局限性比较大，很多网站都采用图片来设置背景图片，可以做到让网页更美观。

设置背景图片的CSS属性是像这样的：

background-image: url(./images/background.jpg);

url是一个CSS函数，里面参数是图片的目录路径。

一般采用相对目录路径，也就是假设index.html存放在哪一个目录下，则在这个目录下创建一个images目录，将background.jpg文件放到images目录里面去。

修改css文件的body的样式，增加background-image，同时删除bigtitle的width属性，因为div默认就是宽度为100%，为了防止该属性对背景图片的干扰，所以删除掉不必要的属性。

css代码修改如下：

刷新页面：

可以看到技术经验的表格的背景色是半透明的，但是4个大标题的背景色不是半透明的，将它也改为半透明色。

修改CSS样式bigtitle的background-color属性值为半透明颜色值。

css代码修改如下：

刷新页面：

可以看到，大标题的背景色都是半透明的颜色了，这样看起来比较美观了。

制作网页的时候怎么设置背景？

第一步，

在桌面上点击鼠标右键，依次点击“属性”、“外观”、“高级”按钮。

第二步，

在打开的“高级”对话框中，在“项目”下拉列表里选择“窗口”。

第三步，

再打开右边对应的“颜色”列表，选择其中的“其他”一项，在打开的对话框里，把“色调”的参数设置为85，把“饱和度”参数设置为90，把“亮度”参数设置为205。再点击“确定”退出设置。

第四步，打开ie浏览器，选择“工具”栏中的“internet选项”，点击“辅助功能”按钮，在“不使用网页中指定的颜色”前打钩。

全部步骤完成后，网页、文件夹、文本文档里的背景颜色都变成了绿色。其中，色调、饱和度和亮度的参数值，还可以根据个人的喜好稍作修改，让自己用电脑的候最舒服。

html网页制作中如何设置背景图片（如何引用）

1、首先打开Atom编辑器导入项目文件夹，先创建一个index.html的文件。定义一下html文件的主信息：

2、然后填写自己的网页内容， 设置一下样式，直接在body后面加上background="图片名字"即可插入图片：

3、最后来到浏览器，刷新一下网页，这样就会显示背景了：

如何设计网页背景

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

5.复合背景

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

6.局部背景

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

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

tableborder=1width=240height=101bgcolor=#C0C0C0tr

tdwidth=80height=46bgcolor=#00FFFF/td

tdwidth=80height=46/td

tdwidth=80height=46bgcolor=#00FF00/td/trtr

tdwidth=80height=47bgcolor=#FFFF00/td

tdwidth=80height=47bgcolor=#FF0000/td

tdwidth=80height=47bgcolor=#FF00FF/td/tr/table

在浏览器中的显示效果可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。

除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些CSS。请先看一下下面的这个例子：HTMLHEADTITLE不仅仅是页面的背景/TITLE

STYLETYPE=text/css!--BODY{

BACKGROUND:#FFFFDD;COLOR:red}div{

BACKGROUND:red;

COLOR:white}--/STYLE/HEADBODY

PSTYLE=BACKGROUND:blackurl(../images/bg.jpg);COLOR:black}

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

在浏览器中的显示效果现在是不是有点兴奋了，啊，原来文段也可以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，从而把页面打扮得更加漂亮和吸引人。

说到这，关于网页背景设计的问题也就说得大概也就差不多了，但新的网页制作技术也在不断涌现，说不定今天你看了这篇文章，明天就觉得它太过时了。

如何制作网页背景啊？

3.设置网页的背景图像

网页的背景色和背景图选择得好，会是页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？

很简单，一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。这里我们不谈论图片的制作了。

当你有了一幅可以自然拼接的图像后，在Dreamweaver中，我们可以设置background图片。

打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下：

BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF"

这里的images/back001.gif就是BACKGROUND的值，其图像文件名为一个URL。 当然我们可以在源代码中直接加入上面的代码。

下面是一个小例子。假如我们有了一幅适合做背景的小图，文件为back001.gif，下面就可以重新编写HTML代码了。

HTML

HEAD

TITLE欢迎洪恩在线/TITLE

/HEAD

BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF"

PFONT FACE="Arial" SIZE="5" COLOR="#0000ff"12亿中国人的网上学校/FONTFONT FACE="5" COLOR="#0000ff"电脑乐园/FONT/P

/BODY

/HTML

下面是这段代码产生的显示效果：

怎么样？如果你选择的背景图片质量很高的话，背景会更漂亮的。

你可以参照：洪恩在线