<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>网页的色彩搭配</TITLE>
<style type="text/css">
.content{font-size:20px;
line-height:20px;
padding:5px 10px 5px 10px;
}
.title1{font-size:20px;
font-weight:bold;
height:40px;
text-align:center;
vertical-align: middle;
color:#759B00;
padding:5px 10px 5px 10px;
}
.bbold{font-size:17px;
color:#759B00;
font-weight:bolder;}
</style>
</HEAD>
<BODY><div class="title1">网页的设计原则</div>
<div class="content">
<P> 一个成功抓住用户“眼球”并最终带来经济效益的企业网站首先需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂 ，是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西，并非在软件的应用上，而是在我们对网页设计的理解以及设计制作的水平上，在于我们自身的美感以及对页面的把握上。 </P>
首先，我们要弄清楚网页设计的任务。
<P><SPAN class="bbold">一、设计的任务</SPAN> <BR>
设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。<BR>
网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类： <BR>
第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。<BR>
第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。<BR>
第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。 当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点，那就是客户的要求，它也属于设计的任务。<BR>
明确了设计的任务之后，接下来要想的就是如何完成这个任务了。<BR>
<BR>
<SPAN class="bbold">二、设计的实现</SPAN> <BR>
设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。 <BR>
设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。<BR>
接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作的过程中，我们会碰到许多问题，其中最敏感的莫过于页面的颜色了。<BR>
<BR>
<SPAN class="bbold">三、色彩的运用</SPAN> <BR>
色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。<BR>
我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。<BR>
色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。<BR>
单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。<BR>
但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。</P>
<P><SPAN class="bbold">四、网页布局类型</SPAN> <BR>
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。 <BR>
1、“国”字型：<BR>
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 <BR>
2、拐角型：<BR>
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 <BR>
3、标题正文型：<BR>
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。 <BR>
4、左右框架型：<BR>
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。<BR>
5、上下框架型：<BR>
与上面类似，区别仅仅在于是一种上下分为两页的框架。 <BR>
6、综合框架型：<BR>
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。 <BR>
7、封面型：<BR>
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 <BR>
8、Flash型：<BR>
其实这与封面型结构是类似的，只是这种类型采用目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。 <BR>
9、变化型：<BR>
即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。 <BR>
<STRONG> 有关导航栏的位置</STRONG><BR>
导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。 <BR>
<STRONG>什么样的布局是最好的</STRONG> <BR>
这是初学者可能会问的问题。其实这要具体情况具体分析的：比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页。 </P>
<P><SPAN class="bbold">五、造型的组合</SPAN> <BR>
在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。<BR>
通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现
普迅电力网页设计（html)实习资料
需积分: 4 130 浏览量
2011-06-23
00:47:12
上传
评论
收藏 7.33MB ZIP 举报
网页设计资料.zip （48个子文件） 
html参考手册.chm 632KB
OLTL 
right.html 939B topic color.html 6KB design.html 11KB menu.html 4KB zyflash.html 691B image 
BBS2.jpg 5KB BBS1.jpg 7KB zyt01.JPG 7KB
zyflash.swf 4.41MB filter1.jpg 23KB menu1.jpg 10KB filter0.jpg 53KB
arrow_off.gif 53B filter3.jpg 3KB zy04.jpg 4KB BBS0.JPG 14KB color.jpg 20KB zy03.jpg 14KB mreply.gif 2KB filter4.jpg 2KB arrow_on.gif 53B star.jpg 847B zy01.jpg 30KB Thumbs.db 107KB zy02.jpg 7KB zyt03.JPG 17KB zyt02.JPG 9KB arrow.jpg 393B BBS4.jpg 3KB postnew.gif 2KB starbg.jpg 599B zytop.jpg 36KB menu2.jpg 10KB style.css 390B filter2.jpg 4KB menu-bg.jpg 1KB BBS3.jpg 8KB zy.html 10KB filter.html 6KB filter1.html 6KB star.html 4KB images head.jpg 6KB Thumbs.db 8KB left.html 1KB index.html 798B top.html 890B HTML完全手册.chm 1.95MB资源评论
