网页制作学习：网页色彩搭配内涵
一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1、 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2、 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
3、 在白色中混入少量的蓝，给人感觉清冷、洁净。
4、 在白色中混入少量的橙，有一种干燥的气氛。
5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉
6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香
商业清爽型的风格可以说是国外现在较流行的风格，国内也有不少模仿者，可是往往在色彩调配和细节方面有所欠缺。下面我们举几个商业清爽型网站的例子和大家一起学习一下。
特点评析：上面的网站利用方框构图，简洁明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明。
色彩方面多使用大面积浅灰度和白色，以衬托logo和配图的色彩鲜艳，配以高明度小小色块（如导航处）。
因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo和点缀出现，多用简洁明快的几何图形结合。
此类站点非常适合纯flash制作，制作简单，加上适当的动感和鼠标效果，增色不少。
特点评析：一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。
在大面积背景压住的情况下，图片明度越高越好。
画面应该有一个主色调。
注意左下角的logo，有意与背景色调相同，以免抢了视觉中心。很多人容易忽视这个问题。
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.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置?lt;body>标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧！
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的值为网页动态过渡的时间，单位为秒。
相关文章
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下色彩缤纷的插画卡通字效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看一...2016-09-14
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20- 本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍，需要的朋友参考下...2020-06-25
- ps软件是现在很多人比较喜欢的，通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子，具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
- 有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法，学会了就能做自己美美的证件照了哈哈！ 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
- PS或者AE中我们在使用渐变工具时，会发现渐变的过渡不均匀，出现明显的波纹，也就是色带（色阶），怎么能很好地优化这个问题呢？（之所以说优化，因为此问题不可能完全解决，只能说能让色...2017-01-22
- 这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 最近的一个项目中，需要将数据用日历方式显示，网上有很多的JS插件，后面为了自己能有更大的控制权，决定自己制作一个日历显示。如下图所示：一、计算数据 1、new一个Calendar类2、初始化两个下拉框中的数据，年份与月份3、初始...2015-11-24
- 这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
- ps软件使用对很多人来说是非常重要的，很多人还不知道使用ps怎么制作宣传单，下面文章就给大家介绍下ps怎么制作宣传单，喜欢次效果的一起来看看。。 首先，我们新建一个2...2017-07-06
- 本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25
- 本文为大家带来gif雪糕的制作方法，难度不大，可效果很漂亮哦，关注一聚教程网学起来！ 步骤： 1、使用AI新建一个1200*800的画布 2、使用矩形工具创建一个宽为250px，高度不...2016-12-21
- 现在专业性的网站越来越多，许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事，所以大家都想保护自己独创的...2016-09-20
- 关于利用ps制作非常精致的蓝色水晶按钮的教程小编在几年前就介绍过许多的相关教程了，今天我们一起再来看一篇水晶按钮制作效果吧。 最终效果 1、打开Adobe Photos...2016-09-14
- 这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 1、检查标题。2、检查版权信息，尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
- 在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。 方法一：作一个1X2的图。 半黑半白，再利用表格作成线。这种方法虽然麻烦...2016-09-20