网页色彩设计原理

 更新时间:2016年9月20日 19:02  点击:2043

    色彩的运用在网页中的作用真是太重要了,有些网页看上去十分典雅、有品位,令人赏心悦目,但是页面结构却很简单、图象也不复杂,这主要是色彩运用得当,因此我特地将本来属于图象制作内的色彩作为一个独立拦目来介绍。
   1、色彩基本概念
  自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色,而其他所有颜色均属于彩色。任何一种彩色具有三个属性:
   (1)色相(Hue):
  也叫色泽,是颜色的基本特征,反映颜色的基本面貌。
   (2)饱和度(Saturation):
  也叫纯度,指颜色的纯洁程度。
   (3)明度(Brightness或Lightness或Luminousity):
  也叫亮度,体现颜色的深浅。
  非彩色只有明度特征,没有色相和饱和度的区别。
   2、色彩的三原色
  电脑屏幕的色彩是由RGB(红、绿、蓝)三种色光所合成的,而我们可通过调整这三个基色就可以调校出其它的颜色,在许多图像处理软件里,都有提供色彩调配功能,你可输入三基色的数值来调配颜色,也可直接根据软件提供的调色板来选择颜色。

   3、电脑影像的色彩
  电脑影像的色彩是经由位元(BIT)的计算和组合而来,单纯的黑白图像是最简单的色彩结构,在电脑上用到1位元的资料,虽说只有黑色和白色,但仍能透过疏密的矩阵排列,将黑与白组合成近似视觉上的灰色调阶。
  灰阶(Grayscale)的影像共有256个阶调,看起来类似传统的黑白照片;除黑、白二色之外,尚有254种深浅的灰色,电脑必须以8位元的资料,显示这256种阶调。 
  全彩(Fullcolor)是指RGB三色光所能显示的所有颜色,每一色光以8位元表示,各有256种阶调,三色光交互增减,就能显示24BIT的1677万色(256*256*256=16,777,216),这个数值就是电脑所能表示的最高色彩,也就是通称的RGBTureColor。
  8位元色是指具有256种阶调,或256种色彩的影像,而我们在常常见到GIF格式的图象文件就是带有256种色彩的图象文件。若要把24位元的全彩图片转成256色的8位元,通常必须经过索引的步骤(Indexed),也就是在原本24位元的1677万色中,先建立颜色分布表(histogram),然后再找出最常用的256种颜色,定义出新的调色盘,最后再以新色盘的256色取代原图。
  让我们看看每一位元色包含多少种颜色:
   1位 2种颜色
   2位 4种颜色
   4位 16种颜色
   8位 256种颜色
   16位 65536种颜色
   24位 1677万种颜色
   32位 1677万种颜色和256级灰度值
   36位 687亿种颜色和4096级灰度值
 通常所称的标准VGA显示模式是8位显示模式,即在该模式下能显示256种颜色;而高彩色(Hi Color)显示是16位显示模式,能显示65536种颜色,也称64K色;还有一种真彩色(True Color)显示模式是24位显示模式,能显示1677万种颜色,也称16M色,这是现在一般PC机所能达到的最高颜色显示模式,在该模式下看到的真彩色图象的色彩已和高清晰度照片没什么差别了。在图形制作片中我们已提到过色彩在页面中的重要性,在页面中尽量使用看上去比较淡雅、简洁的色彩;比如背景尽量少用灰暗、深沉的色彩(除非特殊需要),并且根页面的主题来选择主色调,可能有一些不搞美术的朋友不知道色彩代表的含义,请参阅下表:
   红色:代表热情、奔放、喜悦、庆典
   黑色:代表严肃、夜晚、沉着;
   黄色:代表高贵、富有
   白色:代表纯洁、简单
   蓝色:代表天空、清爽
   绿色:代表植物、生命、生机
   灰色:代表阴暗、消极
   紫色:代表浪漫、爱情
   棕色:代表土地
   上面举出的是几种主要色彩的含义,希望对你有所帮助。




    在浏览网页的时侯,常常可以看见一些“当前网站上的人数是XXX人”的在线人数同计。如何用ASP来做一个呢?首先,分析一下它的做法,一般来说,这些线上人数统计都是指一个时段内的访客人数统计。比如(5分钟内,10分钟内)而这个时间的长短,是由设计者设定的。
  在这个时段内同计各个不同IP的访客总数,就可以得出当前的线上人数了,但这里有一个精确问题需要解决,至于用什么办法来精确地统计,那就是各人不同的做法了,比如可以用自动提交的页面,隔一段时间读取COOKIES等等,而在ASP中,有一个更好的技巧,就是使用session对象来统计,这里介绍一下gobal.asa这个文件,这是一个很重要的一个文件,请看看它的结构。
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
sub Application_OnStard
End Sub
sub Application_OnEnd
End Sub
</SCRIPT>
  当有一个会话发生时(用户浏览网页,向Web服务器发出请求)那么,如果自服务器启动后第一个用户的话,就会同时发生Application_OnStard和Session_OnStart这两个事件,之后,再有别的用户发出请求的话,就只发生Session_OnStart这个事件,而session的生存期是多长,是可以设定的,Session.timeout=X(分钟)
  好了,有了这个很好用的方法,我们就能准确地统计出在线人数了,而人数总计是用一个application变量来保存,当在第一个会话开始时,在Application_OnStard事件中放置一条清空计数器的语句application("online")=0,然后,在Session_OnStart事件中,放置一条增加在线人数的语句
application("online")=application("online")+1,而在Session_OnEnd事件相应地放一条减少在线人数的语句,令计数值减一。
  这样,这个文件就改为如下
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
application("online")=application("online")+1
End Sub
Sub Session_OnEnd
application("online")=application("online")-1
End Sub
sub Application_OnStard
application("online")=0
End Sub
sub Application_OnEnd
application("online")=0
End Sub
</SCRIPT>


  接下来编一个显示图形数字的程序,把在线人数显示在指定的页面上。这样就能得出在人数了
*online.asp
<% @language="vbscript" %>
<%
tmp=application("online")
tmp=Cstr(tmp)
dim disp(20)
dim images(20)
dbbits=len(tmp)
for i= 1 to dbbits
disp(i)=left(right(tmp,i),i-(i-1))
next
for i=dbbits to 1 step -1
images(i)="<img src="&"http://xxxx.com.cn/pic"&"/"&disp(i)&".gif>"
response.write "document.write('"&images(i)&"');"
next
%>


  上面的程序很简单,这里不作分析了,请大家自己阅读一下。在调用在线统计的页面上用一句script语句引用online.asp文件,以显示图形统计器。
   <script language="JavaScript" src="http://xxxx.com.cn/online.asp"></script>
  现在可以了,记住要点,你必须把gobal.asa放在正确的web应用程序根目录上,而最好单独为这个统计新建一个web应用程序,不要与其它别的程序混乱了,不然得出的数据是不准确的,而把这个程序修改为多用户的在线统计也很简单。这样就可以提供在线统计服务了,如何实现请又大家去思考一下吧....




<      BMP位图格式
  最典型的应用BMP格式的程序就是Windows的画笔。文件几乎不压缩,占用磁盘空间较大,它的颜色存储格式有1位、4位、8位及24位,该格式是当今应用比较广泛的一种格式。但缺点是该格式文件比较大,所以只能应用在单机上,不受网络欢迎。
  GIF格式
  该图形格式却在Internet上被广泛地应用,原因主要是256种颜色已经较能满足主页图形需要,而且文件较小,适合网络环境传输和使用。
  JPEG格式
  可以用不同的压缩比例对这种文件压缩,其压缩技术十分先进,对图像质量影响不大,因此可以用最少的磁盘空间得到较好的图像质量。由于它优异的性能,所以应用非常广泛,而在Internet上,它更是主流图形格式。
  PCX格式
  PCX格式是ZSOFT公司在开发图像处理软件Paintbrush时开发的一种格式,存储格式从1位到24位,它是经过压缩的格式,占用磁盘空间较少。由于该格式出现的时间较长,并且具有压缩及全彩色的能力,所以PCX格式现在仍是十分流行。
  PSD格式(Photoshop格式)
  Adobe公司开发的图像处理软件Photoshop中自建的标准文件格式就是PSD格式,在该软件所支持的各种格式中,PSD格式存取速度比其它格式快很多,功能也很强大。由于Photoshop软件越来越广泛地应用,所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。
  TIFF格式
  TIFF格式具有图形格式复杂、存储信息多的特点。3DS、3DS MAX中的大量贴图就是TIFF格式的。TIFF最大色深为32bit,可采用LZW无损压缩方案存储。
  PNG格式
  PNG(Portable Network Graphics)是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点。PNG最大色深为48bit,采用无损压缩方案存储。著名的Macromedia公司的Fireworks的默认格式就是PNG。
  SVG格式(现在最火热的图像文件格式)
  SVG是Scalable Vector Graphics的首字母缩写,含义是可缩放的矢量图形。它是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。该软件提供了制作复杂元素的工具,如渐变、嵌入字体、透明效果、动画和滤镜效果,并且可使用平常的字体命令插入到HTML编码中。SVG被开发的目的是为Web提供非栅格的图像标准。
  SVG格式的优势
  SVG是一种矢量图形格式,SVG提供了GIF和JPEG所不能提供功能优势:
  1.放大 用户可以任意放大图形显示,但不会牺牲锐利度、清晰度、细节等。
  2.文字状态依然保留 文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制,用户将会看到和他们制作时完全相同的画面。
  3.小文件 平均来讲,SVG文件比那些JPEG和GIF格式的文件要小很多,因而下载也很快。
  4.显示独立性 SVG图像在屏幕上总是边缘清晰,并且可以使用你打印机的分辨率进行打印。不论是300 dpi,600 dpi还是更高,你都不会体验到难看的锯齿的点阵效果。
  5.超级颜色控制 SVG提供一个16百万颜色的调板,支持ICC颜色描述
文件,RGB,渐变和蒙版。
  6.交互性和智能化 因为SVG是基于XML的,它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。


    你可能已经注意到,现在许多网站的首页上都有这么一个链接“按这里将本站设为首页”(这里的首页指的是浏览器的起始页)。
    不但大的ISP,ICP这么做,一些个人主页也推出这一“服务”以招揽网友。
  具体是如何实现这个功能的呢?我来帮你剖析一下:
  点击那个超链接会显示下载一个名为lspace.reg的文件,下载后双击它,便会修改你的注册表,然后当你再打开浏览器的时候,起始页就发生了变化。(一听到修改注册表,许多网友就比较"怵",会不会把windows给弄坏了。)
  别怕,我们来打开lspace.reg看看(用最普通的notepad记事本就可以打开),发现内容如下:
  REGEDIT4
  [HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMain]
  "Start Page" = "http:///"
  [HKEY_CURRENT_USERSoftwareNetscapeNetscape NavigatorMain]"Home Page" = "http:///"
  原来就两条,第一条设置IE的star page;第二条设置NC的home page(没什么花头噢:)。后面跟的URL就是你主页的网址!


<     在我们全面考虑好网站的栏目,链接结构和整体风格之后,我们就可以正式动手制作首页了。有这么一句俗语:"良好的开端是成功的一半"。在网站设计上也是如此,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上,全凭首页设计的"功力"了。所以,首页的设计和制作是绝对要重视和花心思的。阿捷的经验是:一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期,以免出现全部做好以后再修改,那将是最浪费精力的事。
  这里,先插一个“封面”的问题。封面是指没有具体内容,只放一个logo点击进入或者只有简单的图形菜单的首页。
是否需要为站点设计一个“封面”?阿捷的个人观点是:没必要!除非你是很艺术类的站点,或者可以确信内容独特,可以吸引浏览者进一步点击进入的站点,否则的话,封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速,有价值的信息,如果等待xx分钟,只显示出一个粗劣的“ENTER”图标,那么相信没有人会再耐心等待进入下一页。
  因为首页的重要性,我将着重用8篇文章来仔细讨论有关首页设计的方方面面,大致提纲如下:
  ○版面布局的窍门
  ○色彩的搭配
  ○字体的设置和表格的嵌套
  ○细微之处见功力
  ○考虑不同的浏览器和分辨率
  ○设计好你的banner和位置
  ○meta标签的重要性
  ○首页设计的小建议
  今天,只是关于首页设计的一个引子。让我们来大致了解一下首页设计的步骤。首页,从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的,如何设计好一个首页呢?一般的步骤是:
    ●确定首页的功能模块
    ●设计首页的版面
    ●处理技术上的细节
    一).确定首页的功能模块。
  首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:
网站名称(logo), 广告条(banner), 主菜单(menu),
新闻(what"s new), 搜索(search), 友情链接(links),
邮件列表(maillist),计数器(count), 版权(copyright).
  选择哪些模块,实现哪些功能,是否需要添加其他模块都是首页设计首先需要确定的。
     二).设计首页的版面
  在功能模块确定后,开始设计首页的版面。就象搭积木,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就看你的创意和想象力了。
  设计版面的最好方法是:找一张白纸,一支笔,先将你理想中的草图勾勒出来,然后再用网页制作软件实现。
  三).处理技术上的细节   
  我经常收到的来信问题就是:我制作的主页如何能在不同分辨率下保持不变形,如何能在IE和NC下看起来都不至于太丑陋,如何设置字体和链接颜色....等等,我将在下面几篇文章里为大家详细介绍。
  首页设计是整个网站设计的难点和关键,我希望能够通过和大家的交流,总结出一套较为合理易学的设计方法,从而举一反三,使我们能够更加轻松的完成整个站点的设计制作。


[!--infotagslink--]

相关文章

  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • Photoshop做色彩缤纷的插画卡通字效果教程

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下色彩缤纷的插画卡通字效果的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来跟着小编一起看一...2016-09-14
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • photoshop设计一张节约用水环保主题海报制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小...2016-09-14
  • PS/AE渐变工具色带波纹色彩过渡不均匀怎么办?

    PS或者AE中我们在使用渐变工具时,会发现渐变的过渡不均匀,出现明显的波纹,也就是色带(色阶),怎么能很好地优化这个问题呢?(之所以说优化,因为此问题不可能完全解决,只能说能让色...2017-01-22
  • c#实现51单片机频率计的代码分享(数字频率计设计)

    c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • photoshop设计蜘蛛侠纹理文字效果制作教程

    今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程,各位想知道具体制作步骤的使用者们,那么大家下面就来跟着小编...2016-09-14
  • Photoshop设计武侠风毛笔字效果教程

    今天小编在这里就来给Photoshop的这一款软件的使用者们说下设计武侠风毛笔字效果得教程,各位想知道到底该怎么射击制作的使用者们,那么下面就快来跟着小编一起看一看制...2016-09-14