网站首页/网页设计列表/内容

页面中要素间的色彩搭配

网页设计2023-06-20阅读
Adobe Dreamweaver,简称“DW”,中文名称梦想编织者,最初为美国Macromedia公司开发,2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

网页中的几个关键要素,例如导览列与小标题、网页标志(LOGO)与横幅(Banner)、背景与文字,以及超链接的颜色应该如何协调,都是网页配色时需要认真考虑的问题。
网页中要素间的色彩搭配

导览列与小标题:这是网站的导游。浏览者在不同的网页中跳转,要了解网站的架构与内容,都必须通过导览列或页面中的某些小标题。所以导览列与小标题可以使用具有跳跃性的色彩,吸引浏览者的目光,让人感觉架构清晰、层次分明。

网站背景为白色,导览列使用网站的标准色——蓝色为背景色,使导览列在网页中更加明显,如图所示:

导览列与小标题

网页标志(LOGO)与横幅(Bannner):是宣传网站最重要的工具,所以这两个部分一定要在页面上脱颖而出。怎样做到这一点呢?可以将它们做的像象形文字,色彩跟网页的主题分离。有时为了更突出,也可以使用与主题色相反的颜色。

网站LOGO和Ba rlner都使用与背景色相反的白色,如此可以牢牢抓住浏览者的视线,如图所示:

网页标志

背景与文字:如果网站中使用了背景色,不需要考虑前景文字的配色问题。一般网站中文字占了相当大的比重,所以背景可以选择彩度或明度较低的色彩,文字采用较为突出的亮色,让人一目了然。背景与文字:如果网站中使用了背景色,不需要考虑前景文字的配色问题。

一般网站中文字占了相当大的比重,所以背景可以选择彩度或明度较低的色彩,文字采用较为突出的亮色,让人一目了然。

当然,有些网站为了让浏览者对其留下深刻的印象,会在背景上做文章,例如,一页空白页的某处用了大块的亮色,给人豁然开朗的感受。为了吸引浏览者的视线,突出背景,那么文字就要显得暗一些,如此才能跟背景跳脱,便于阅读。

网站使用红色为背景,运用白色文字使文字突出,又不破坏整体效果,如图所示:
背景与文字

背景与文字:如果网站中使用了背景色,不需要考虑前景文字的配色问题。一般网站中文字占了相当大的比重,所以背景可以选择彩度或明度较低的色彩,文字采用较为突出的亮色,让人一目了然。

当然,有些网站为了让浏览者对其留下深刻的印象,会在背景上做文章,例如,一页空白页的某处用了大块的亮色,给人豁然开朗的感受。为了吸引浏览者的视线,突出背景,那么文字就要显得暗一些,如此才能跟背景跳脱,便于阅读。

网站使用红色为背景,运用白色文字使文字突出,又不破坏整体效果,如图所示:

超链接

以上就是有关网页中要素间的色彩搭配课程,希望对你有所帮助。

 


Adobe Dreamweaver使用所见即所得的接口,亦有HTML(标准通用标记语言下的一个应用)编辑的功能,借助经过简化的智能编码引擎,轻松地创建、编码和管理动态网站。

……

相关阅读