相关文章
网站建设网页导航上用CSS标志当前页效果的实现
北京网页设计HTML中meta作用
北京网站设计用ASP+CSS实现随机背景
北京网站制作DreamwaverMX与ASP.NET(四)
北京网站建设Flash MX 2004 制造像素字体
企通互联Flash视频教程:3.10 导入声音
网站制作用Dreamweaver自带的行为制作弹出菜单
网站设计DW MX实例:动态广告管理
企通互联用Dreamweaver MX制作导航下拉菜单
网站建设html编辑器的回车换行问题解决方案
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 网页设计顶级网页配色教程(连载4)网页配色与网页布...
网页设计顶级网页配色教程(连载4)网页配色与网页布...
作者: 北京网站建设 日期:2008-02-27 08:06:37 来源: http://www.qitongnet.com
对于初学者来说只了解前面的网页配色的基本方法是根本不可能在网页中运用好颜色的,因为网页配色的成功与网页布局有着相当紧密的联系。可以说网页的布局与配色是在网页设计时同步进行的,它们互相依赖。 了解网页布局: 网页中有很多元素比如标志、广告图、文字内容,这些元素按照不同的位置被组合在网页浏览器的视图当中便构成了我们所看见的网页,而网页元素排列出的这种结构就是我们要说的网页布局。 其实网页布局是很自由的,网页中依靠表格或者层来定位网页元素,而无论是表格还是层都是矩形,也就是说你不可能在网页中以矩形以外的其它形状的表格或者层来定位网页元素。这样的话你只要按喜好来排列好这些方块就OK了。 企通互联网页布局与网页配色 下面还是通过一些实例来解释它们之间的关系吧:
网页设计网页元素之导航分析:
在这张网页中的导航是Flash制作的,之所以要配两种颜色是因为网站标志与导航链接被合在了一起,通过同时改变导航色2的明暗度、饱和度与色相将其标志所在范围的导航色变成了与蓝色系相近的属于青色系的导航色1,从而达到了突出标志的目的。 导航背景是导航色1向导航色2的过渡,由于是相近色系,所以过渡很自然,所以这里有一个色彩使用的方法要掌握,那就是可以使用相近的两个色系的颜色来做自然的渐变效果。 导航元素中有三个地方用到了突出色红色,分别是标志的中间、导航的右下边,导航下的电视机。导航的右下边用一个红色的图案是用来平衡导航条的空间感,也就是填补导航条空的地方,否则这些空地就显得突兀了,导航条上的两个栏目条也一样是为了充实导航条空间,使其看起来更美观。从这里你也可以学习到色彩平衡的方法了。 www.qitongnet.com 那个电视机的红色和标志中间的红色是为了突出显示,吸引目光。红色的电视机下面正好是用户登录版块,这使得浏览者能很容易的发现这个版块。 仅次于红色突出程度的橙色也可以算是突出色,同时它也是用来平衡导航左边太多的红色所带来的视觉刺激,在导航下的中间和右边配色上同属于红色系的橙色也可以去掉一些单调乏味的感觉。 网站建设 导航条下文字的黑色也是用来充实网页空间和平衡色感的。至于灰色底纹背景当然也是为了丰富视觉效果而存在的。 你可以通过去掉或者替换上面原有的颜色来观察各个色彩在这个元素中所起的作用。 北京网页设计网页内容版块区域的配色分析: 这些区域大多是以明暗度和饱和度稍强蓝色为环境色,这样红色做为突出色就更显眼了。 网站制作 北京网站制作 由于网页右边的蓝色块太重,所以可以看到其左边加入了相应的立体版块背景和一些色彩稍重的图案及图片。请注意,在网页的左右两边的图片所使用的颜色并不一样,但却看不出有多少不和谐的地方,这就是配色的能力。 总之,在进行网页配色时要避免产生单调、古板的感觉。 上面说的是实用型的网页布局与配色,下面再来看看其它类型网页的布局与配色,这样你就能更了解网页布局与网页配色间的关系了。
网站设计本文引用的地址为蝶虫网络工作室原创
网页设计网页元素之导航分析:
在这张网页中的导航是Flash制作的,之所以要配两种颜色是因为网站标志与导航链接被合在了一起,通过同时改变导航色2的明暗度、饱和度与色相将其标志所在范围的导航色变成了与蓝色系相近的属于青色系的导航色1,从而达到了突出标志的目的。 导航背景是导航色1向导航色2的过渡,由于是相近色系,所以过渡很自然,所以这里有一个色彩使用的方法要掌握,那就是可以使用相近的两个色系的颜色来做自然的渐变效果。 导航元素中有三个地方用到了突出色红色,分别是标志的中间、导航的右下边,导航下的电视机。导航的右下边用一个红色的图案是用来平衡导航条的空间感,也就是填补导航条空的地方,否则这些空地就显得突兀了,导航条上的两个栏目条也一样是为了充实导航条空间,使其看起来更美观。从这里你也可以学习到色彩平衡的方法了。 www.qitongnet.com 那个电视机的红色和标志中间的红色是为了突出显示,吸引目光。红色的电视机下面正好是用户登录版块,这使得浏览者能很容易的发现这个版块。 仅次于红色突出程度的橙色也可以算是突出色,同时它也是用来平衡导航左边太多的红色所带来的视觉刺激,在导航下的中间和右边配色上同属于红色系的橙色也可以去掉一些单调乏味的感觉。 网站建设 导航条下文字的黑色也是用来充实网页空间和平衡色感的。至于灰色底纹背景当然也是为了丰富视觉效果而存在的。 你可以通过去掉或者替换上面原有的颜色来观察各个色彩在这个元素中所起的作用。 北京网页设计网页内容版块区域的配色分析: 这些区域大多是以明暗度和饱和度稍强蓝色为环境色,这样红色做为突出色就更显眼了。 网站制作 北京网站制作 由于网页右边的蓝色块太重,所以可以看到其左边加入了相应的立体版块背景和一些色彩稍重的图案及图片。请注意,在网页的左右两边的图片所使用的颜色并不一样,但却看不出有多少不和谐的地方,这就是配色的能力。 总之,在进行网页配色时要避免产生单调、古板的感觉。 上面说的是实用型的网页布局与配色,下面再来看看其它类型网页的布局与配色,这样你就能更了解网页布局与网页配色间的关系了。 网站设计本文引用的地址为蝶虫网络工作室原创