学习网页制作：网页背景设计全攻略

更新时间：2016年9月20日 19:05 点击：1782

网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现在就由我来为大家作一个比较完整的总结。
　

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

</style>
　

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

　　5.复合背景
　

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

　　6.局部背景
　

　　前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢？让我们来看看网友54雨寒的高见吧！

　　一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

　　1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

　　2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

　　3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

　　4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

　　二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

　　1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

　　2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

　　3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

　　4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

　　三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

　　1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

　　2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

　　四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

　　1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

　　2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

　　3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

　　五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

　　1、在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

　　2、在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

　　3、在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

　　六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

　　1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

　　2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

　　3、在白色中混入少量的蓝，给人感觉清冷、洁净。

　　4、在白色中混入少量的橙，有一种干燥的气氛。

　　5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉

　　6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香

我相信随着网络技术的普及，现在已经有很多朋友都在 Internet 建立了自己的 “家园” ，但你有没有为那奇低无比的访问量而着急呢！有没有想过改变这种现状呢？今天我就向大家介绍两款不同的软件，通过他们一定能够让你的家园更美丽。

　　A、网页特效：AnFY

　　要知道“家园” 不受欢迎的很大程度是因为里面没有炫丽夺目的网页效果，而有的只是平淡无奇的文字,毫无生气的图片等，而现在首先要向你介绍的 AnFY 就是一款可以化腐朽为神奇的网页特效制作软件（http://www.anfyteam.com/ln/chisimp/ajdownl.html）。
将软件下载并且安装之后，我们就可以从开始菜单中启动它了。软件通过向导的方式来建立各种不同的特效，因此我们使用起来不是很复杂。

　　首先选择要制作的特效所属的大范围，这里一共有六大类供我们可以选择，其中由上到下对应的中文意思是横幅/幻灯片，数学效果图，图形特效， 3D动画，菜单,其它。在每一种其中又包括了相关的几种类型，例如我们这里先选择图形特效（Image effects），然后在下拉菜单中选择 “Water”（水波），这也就是图形特效下的一个具体类型，这个时候如果你对所选择的类型制作出来到底是一个什么样的效果还不是很清楚的话，可以点击“Applet preview”来预览程序默认的效果。如果觉得这样还可以的话，那么就可以点击“next”进入下面的设置了（如图1）。

　　在这里我们就要来添加具体的图形和详细的设置了，点击上方的“Browse”来添加一张自己定义的图片，例如自己的照片啊，然后设置“Resolution”，值为1的时候是默认值，如果该值为2则表示放大一倍，而Width、Heighth的值也会自动随之变化。(如图2)

　　至于其它的设置值建议大家在初次使用时都保持默认值，就这样根据向导一直点击“Next”一直到(如图3)所示的界面，这个时候我们的Java特效就基本制作完成了，这个时候就可以点击“Preview”来预览我们制作出来的水纹波动的效果，如果没有什么修改的话，就可以把该代码复制之后插入到具体的Html页面中去了

　　提示:使用前请把大写状态下"＜＞"改为小写状态下的"<>"

　　01.让背景图不滚动

　　IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:

　　〈Body Background="图片文件" bgproperties="fixed"〉

　　02.让你的网页无法另存为

　　＜noscript＞＜iframe src=http:///htmldata/2005-12-26/*＞＜/iframe＞＜/noscript＞

　　03.让IFRAME框架内的文档的背景透明

　　＜iframe src="about:＜body style='background:transparent'＞" allowtransparency＞＜/iframe＞

　　04.禁止右键：

　　＜body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()"＞

　　05.进入页面后立即自动刷新？

　　＜meta http-equiv="refresh" content="120;url=http://"＞

　　http://,这是你自己的网址。

　　06.打开窗口即最大化

　　＜script language="JavaScript"＞

　　＜!-- Begin

　　self.moveTo(0,0)

　　self.resizeTo(screen.availWidth,screen.availHeight)

　　// End --＞

　　＜/script＞

　　07.能隐藏IFRAME的滚动条吗？我知道的三种方法:

　　1. 设置iframe scrolling="no"

　　2. 被包含页body应用overflow:hidden

　　3. 被包含页的body标签加scroll="no"

　　08.加入背景音乐

　　＜bgsound src="http:///htmldata/2005-12-26/mid/windblue[1].mid" loop="-1"＞只适用于IE ＜embed src="http:///htmldata/2005-12-26/music.mid" autostart="true" loop="true" hidden="true"＞对Netscape ,IE 都适用

　　09.嵌入网页

　　＜iframe name="tt" src="http:///htmldata/2005-12-26/webjx.html" width="450" height="287" scrolling="Auto" frameborder="0"＞＜/iframe＞

　　10.跳转

　　＜meta http-equiv="refresh" content="3;URL=list.htm"＞

　　11.滚动

　　＜MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4＞网页教学网滚动文字＜/marquee＞

　　12.细线分隔线

　　＜hr noshade size=0 color=#C0C0C0＞

　　13.过度方式

　　＜meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)"＞

　　Duration的值为网页动态过渡的时间，单位为秒。

目前，china.com主页日常更新的有五方面内容："头条链接"、"频道精选"、"专题特集"、 "图片推荐"和"精彩推荐"。

一、头条链接

头条链接数量为9条，推荐内容以时事新闻为主，约占6-8条，若有重要的体育、娱乐、IT等新闻，也可在该位置推荐。推荐数量和选择性由新闻部决定。推荐邮箱：news@sz.china.com。

二、频道精选

    1. 推荐内容要紧扣频道名称，应尽量避免和其他频道内容的冲突。真正做到体现频道本色。
    2. 推荐内容要符合社会、政治以及道德舆论主流，尽量避免有损党和政府形象、血腥暴力、色情低俗的内容。
    3. 推荐内容一定要注明信息来源（即便是网友原创也要注明），并保证不牵扯版权问题。
    4. 推荐内容的标题字数限制在16字以内。链接必须是终极页面的URL。
    5. 一定要等推荐内容镜像到北京才可发送邮件推荐。
    6. 推荐内容发送到统一邮箱：best@sz.china.com。

三、专题特集
专题特集推荐内容是各频道制作的较大型的专题或专栏。在主页陈列的时间一般较长。专题页面的数量通常不少于10页。

学习网页制作：网页背景设计全攻略

相关文章

阁下可能感兴趣的内容

推荐阅读