网页设计的布局和用色技巧Word文档下载推荐.docx
《网页设计的布局和用色技巧Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《网页设计的布局和用色技巧Word文档下载推荐.docx（15页珍藏版）》请在冰豆网上搜索。
一般分辨率在800x600的情况下，页面的显示尺寸为：
780x428个象素；
分辨率在640x480的情况下，页面的显示尺寸为:
620X311个象素；
分辨率在1024X768的情况下，页面的显示尺寸为：
1007x600。
从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。
一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。
但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。
如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。
1.1.2整体造型
什么是造型，造型就是创造出来的物体形象。
这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。
虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：
矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。
比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；
圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；
三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；
菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。
虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
1.1.3页头
页头又可称之为页眉，页眉的作用是定义页面的主题。
比如一个站点的名字多数都显示在页眉里。
这样，访问者能很快知道这个站点是什么内容。
页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。
页头常放置站点名字的图片和公司标志以及旗帜广告。
1.1.4文本
文本在页面中出现都数以行或者块（段落）出现，它们的摆放位置决定者整个页面布局的可视性。
在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
1.1.5页脚
页脚和页头相呼应。
页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。
你能看到，许多制作信息都是放置在页脚的。
1.1.6图片
图片和文本是网页的两大构成元素，却一不可。
如何处理好图片和文本的位置成了整个页面布局的关键。
而你的布局思维也将体现在这里。
1.1.7多媒体
除了文本和图片，还有声音，动画，视频等等其它媒体。
虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。
1.2网页布局的方法
网页布局的方法有两种，第一种为纸上布局；
第二种为软件布局。
下面分别加以介绍：
1.2.1纸上布局法
许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。
这种不打草稿的方法不能让你设计出优秀的网页来。
所以在开始制作网页时，要先在纸上画出你页面的布局草图来。
准备一若干张白纸和一只铅笔，你要设计一个时尚站点。
*尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。
所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。
*造型的选择：
先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。
选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。
这样画下来，你会发现很乱。
其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。
还要注意一点，你不要担心你设计的布局是否能够实现。
事实上，只要你能想到的布局都能靠现今的HTML技术实现。
考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形（也可以是一条线段）。
*增加页头：
jpg是我们从.jpg和2.jpg得到的布局造型，那么我们该增加页头了。
一般页头都是位于页面顶部，所以我们为.jpg增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。
*增加文本：
页面的空白部分加别加入文本和图形。
因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。
*增加图片：
图片是美化页面和说明内容必须的媒体。
在这里把图片加入到适当的地方。
经过以上的几个步骤，一个时尚页面的大概布局就出现了。
当然，它不是最后的结果，而是你以后制作时的重要参考依据。
1.2.2软件布局法
如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。
这个软件就是Photoshop。
Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。
不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。
1.3网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
1.3.1“国”字型
也可以称为“同”字型，是一些大型网站所喜欢的类型。
即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到最多的一种结构类型。
1.3.2拐角型
这种结构与上一种只是形式上的区别，其实是很相近的。
网页最上面是标题及广告横幅，接下来的左侧是一窄列链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。
在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
1.3.3标题正文型
这种类型最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。
1.3.4.左右框架型
这是一种为分左右两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。
我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。
这种类型结构非常清晰，一目了然。
1.3.5.上下框架型
与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。
1.3.6综合框架型
是左右框架型和上下框架型的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
1.3.7封面型
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
1.3.8Flash型
其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
1.3.9变化型
即上面几种类型的结合与变化，比如网站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
1.4网页布局的技术
1.4.1层叠样式表的应用
在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。
CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。
你曾经无法实现的想法利用CSS都能实现。
目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。
你可以在网上找到许多关于CSS的介绍和使用方法。
当然，日趋炙热的WEB标准（XHTML+CSS）开是强烈推崇内容和表现相分离，并为下一代数据交换XML做为过渡（即XHTML）。
1.4.2表格布局
表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。
表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。
而且表格在定位图片和文本上比起用CSS更加方便。
表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。
对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），你会看到这个页面是如何利用表格的。
1.4.3框架布局
不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。
但从布局上考虑，框架结构不失为一个好的布局方法。
它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
布局指南并不是全部的网页布局技术，从某种意义上来说，引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。
1.5具体的网页布局
1.5.1关于第一屏
所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。
那么第一屏有多“大”呢？
其实这是未知的。
一般来讲，在800×
600的屏幕显示模式（这也是最常用的）下，在IE安装后默认的状态（即工具栏地址栏等没有改变）下，IE窗口内能看到的部分为778×
435像素。
一般来讲，我们以这个大小为标准就行了，毕竟在无法适合所有人的情况下，我们只能为大多数考虑了。
说了那么多，无非是一个标准的问题，接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。
其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
1.5.2有关导航栏的位置
导航栏能让我们在浏览时容易地到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。
一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435像素，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：
如果浏览者的第一屏很短，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的不确定性要大的多。
1.5.3什么样的布局是最好的
这是初学者问得最多的问题。
其实这要具体情况具体分析的：
如果内容非常多，就要考虑用“国字型”或拐角型；
如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；
那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；
而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面型是首选；
Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。
还没有提到的就是变化型了，我想这个读者应该自己把握了。
因为，只有不断的变化才会提高，才会不断丰富我们的网页。
第二章网页设计的用色技巧
2.1网页设计的色彩思考
人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。
色彩的心理效应发生在不同层次中。
有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念、信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不能忽视的。
对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即在高效率、快节奏的现代生活方式的条件下，这就需要做网页时把握人们在这种生活方式下用网络的一种心理需求。
作为网页设计师来说，做到有针对性的用色是相当重要的，因为网站往往是各种各样的，大公司、政府组织、体育组织、聊天的、新闻的、个人主页等等，不同内容的网页的用色应是有较大的区别。
所以要合理的使用色彩来体现出网站的特色，这是高明的做法。
例如：
做公司的网页，就不能仅仅使用一些不着边际的颜色来吸引人，而要让人一看到这个网站的用色就立即明确该公司的主题。
怎么能做到这一步呢？
我认为要从公司的标准色上入手。
一个公司的CI（企业形象识别）是灵魂，做网站往往是为了提升公司的形象。
因此把表现企业主题的标准色应用到网页中去，一定会给浏览者留下深刻的印象。
这就牵涉到标准色的组合应用上，要有一个色彩的基调问题，抓住自己的主色来配以不同的辅色这样既突出了主页的公司的特色，又能使页面呈现丰富多彩（这里要切忌多种色彩并重“花”的情况）。
这只是一种用色的参考，版面设计和内容也能体现出企业的形象，只是色彩更加容易达到引人注目的效果。
做到用色有的放矢之后，我们再回到平面设计上来，因为网页设计实际上就是平面设计，只不过目的性、时效性更强而已。
所以我们要把每一次网页设计都看成做平面设计。
不过也有一些不同，例如网页的外框是受电脑的屏幕所限制的，具有特定的比例。
同时也有一个与电脑的屏幕的颜色的搭配问题，这与普通的平面设计不会受到的任何限制有所不同。
但是用色上要求与规律网页设计里是一样的，即色彩的明暗、轻重、冷暖等等，以及调和色和对比色的应用等。
针对不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。
用色往往不是非常单纯的运用，还要考虑诸多因素，例如，访问者的类别、社会背景、心理需求和场合的差异等等，这就要求网页设计者要认真的分析网站的访问者的不同，并且要多听取反馈信息，总结他们满意或者是不满意的原因，综合考虑。
社会背景不同的人，各人的目的不同，他们对色彩的感受也不同，所以网站的用色就要考虑到多方面的需求，尽可能能的吸引各种注意力。
访问者如果大多是素质较高的人，就应该考虑用色考究，要有一定的品位，有所偏向。
网页设计的用色也要特别的关注流行色的发展。
每年日本或者欧美都要发布一批流行色，这是从大量的人们的喜好中挑选出来的。
关注它，并有心的研究它，而且努力的将这种观念应用到自己的设计中去，做一个色彩方面的有心人，就会使自己的网页富有朝气，更受欢迎。
同时多研究别人的用色，多看一些对网站的网友的评价是相当重要的。
做到这一点，能提高自己的色彩品位，多用一些受人喜爱的颜色，这样才能吸引人。
作为一名网页设计师是需要有自己的特色，例如自己钟爱的颜色，用色的一些独特的方面，这种是不要轻易的舍弃。
因为没有一点自己的特色的设计师就如同一台机器一样毫无生气，这是一大悲哀！
用别人喜欢的色彩是不会掩盖设计师的特色的，因为设计师用色往往是在保留自己的用色方式上才去采用一些比较让人接受的颜色。
所以我想网页的用色会在这种方式下日趋规范，日趋合理，逐渐让人感到一个又一个如同艺术品一样让人赏心悦目！
2.2网页设计用色技巧
对于网站设计而言，色彩的重要性尤其突出，不过经常被粗心的站长忽视。
我们经常说“第一映像最重要”，于是设计网站时，设计者经常会花很多精力制作一个“富于冲击力”的logo或者banner，当然，它们很重要。
但是，访问者访问网站时的第一映像实际上并不来自这些logo或者banner，而是——色彩！
2.2.1色彩的基础知识
色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。
其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。
色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；
而暖色（如红色）给人的感觉是热烈、火热。
冷暖色的巧妙运用可以让网站产生意想不到的效果。
色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。
一般情况下，各种色彩给人的感觉是：
1红色
分析：
红色色感温暖，性格刚烈内向，是一种对人刺激性很强的颜色。
红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动。
红色在各种媒体中被广泛的运用，除了具有较佳的明视效果外，更被用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。
另外，红色也常被用作警告、危险、禁止、防火等标识色。
搭配：
在网页颜色的应用中，单纯以红色为主色调的网站相对较少，多用作辅助色、点睛色，以达到陪衬、醒目的效果。
红色与少量黄色相搭配，会使其热力强盛，趋于躁动、不安，极富动感和张扬的个性。
红色与黑色的搭配在商业设计中被誉为商业成功色，在网页设计中也比较常见。
红黑搭配常被用于较前卫时尚、个性的娱乐休闲区网页中。
红色与灰色、黑色等暗色调搭配使用，给人以现代、激进的感觉。
粉红色是红色系中的冷色系，这类颜色的组合多用于女性主题，如化妆品、服装等，鲜嫩而充满诱惑，容易营造出柔情、娇媚、温柔、甜蜜、纯真、诱惑和艳丽等气氛。
2黄色
黄色是有彩色中最明亮的色彩，因此净化藏给人留下明亮、辉煌、灿烂、愉快、高贵和柔和的印象，同时又容易引起味觉上的条件反射，给人以甜美和香酥感。
黄色有着金色的光芒，有希望与功名等象征意义，还代表着土地，象征着权力，并且还带有神秘的宗教色彩。
黄色是明亮的且可以给人甜蜜和幸福感的颜色，在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品。
黄色在网页配色中使用最为广泛的颜色之一，黄色与其他颜色配合很活泼，有温暖感，代表快乐、希望、智慧和轻快。
黄色比较适合活泼跳跃、色彩绚丽的配色方案。
高亮度的黄色与黑色相结合可以得到清晰整洁的效果，这种配色在网页设计中经常会见到。
在配色时，黄色与绿色搭配会显得很有朝气和活力。
通常，在商品网站中使用黄色与红色搭配来渲染热闹气氛。
淡黄色几乎能与所有的颜色相搭配，但如果要达到醒目的效果，则不能将淡黄色放在其他的浅色上，尤其是白色，因为它将是人什么也看不见。
深黄色一般不予深红色及深紫色相搭配。
3蓝色
蓝色给人以沉稳的感觉，且具有深远、永恒、沉静、博大、理智、诚实和寒冷的意象。
同时，蓝色还能够营造出和平淡雅洁净及可靠等氛围。
在商业设计中强调科技、商务的企业形象时，大多选用蓝色当标准色。
蓝色是冷色系中最典型的代表，是网站设计中运用得最多的颜色。
蓝色会使人自然联想起大海和天空，所以会使人产生一种爽朗开阔和清凉的感觉。
浅蓝色具有淡雅、清新、浪漫和高贵的特性，常被用于化妆品、女性、服装网站的设计中，它也是最具凉爽、清新特征的色彩。
浅蓝色和绿色、白色的搭配在网页中是比较常见的，他们之间的搭配可以是页面看起来非常干净清澈，能体现出柔顺淡雅和浪漫的气氛。
蓝色是冷色系中的典型代表，而黄、红色是暖色系中最典型的代表，冷暖色系对比度大，较为明快，很容易感染、带动浏览者的情绪，具有很强的视觉冲击力。
深蓝色是沉稳的且较常用的色调，能给人以沉稳、冷静、严谨和成熟的心理感受。
它主要用于营造安稳、可靠及略带有神秘感的氛围，一般用于企业宣传类网站的设计中。
4绿色
在商业网页设计中，绿色所传递的是清爽、理想、希望和生长的意象，较符合服务业、卫生保健业、教育行业、农业类网页设计的要求。
绿色通常与环保意识有关，也经常使人联想到有关健康方面的事物。
绿色与人类息息相关，是自然之色，代表了生命与希望，也充满了青春与活力。
它生机勃勃，象征着生命。
它本身具有特定的与自然、健康相关的感受，所以也经常被用于与自然、健康相关的站点。
此外，绿色还经常用于一些公司的儿童站点或教育站点。
绿色具有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔顺、恬静、满足及优美的色彩。
绿色在黄色和蓝色之间，属于较中庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、宽容，可与多种颜色搭配而达到和谐的效果，也是网页中最为广泛的颜色之一。
绿色与红色、蓝色与黄色两组对比色搭配在一起，虽然听起来好像颜色很杂，但是只要协调搭配，就能起到意想不到的效果。
适当运用不同纯度的深绿和浅绿色并不刺目，反而可使页面看起来很有朝气和活力。
5紫色
紫色具有创造、谜、忠诚、神秘及稀有等内涵。
象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。
紫色通常被用于以女性为对象或以艺术品介绍为主的站点，但很多大公司的站点中也喜欢使用蕴含着神秘、尊贵和高尚的紫色。
紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。
随着白色的不断加入，也就不断产生不同层次的淡紫色，可使紫色的沉闷性格消失，变得优雅、娇气，并充满女性魅力。
不同色调的紫色可以营造出非常浓郁的女性化气息，而且在灰色这一突出颜色的衬托下，紫色可以显示出更大的魅力。
紫色与紫红色都是非常女性化的颜色，给人的感觉都是浪漫、柔和、华丽和高贵优雅，特别是紫红色更是女性化的代表颜色。
高彩度的紫红色可以表现出超凡的华丽，而低彩度的紫红色可以表现出高雅的气质。
紫色配合时尚的卡通人物，可以使页面具有非常强烈的现代感，给人以更深刻的印象。
6橙色
橙色的波长居于红和黄之间，橙色是十分活泼的光辉色彩，是最暖的色彩，给人以华贵而温暖、兴奋而热烈的感觉，也是令人振奋的颜色。
橙色具有健康、活力、勇敢和自由等象征意义，能给人以庄严尊贵神秘等感觉。
橙色会使人联想到金色的秋天以及丰硕的果实，因此是一种富足、快乐而幸福的色彩。
橙色适用于对视觉要求较高的时尚网站，也常被用于对味觉要求较高的食品网站，因为橙色也是容易引起食欲的颜色。
橙色是可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春的活力又能实现稳重的效果，所以橙色在网页设计中的使用范围是非常广泛的。
使用了高亮度橙色的网页通常都会给人一种明朗和新鲜的感觉，而将浅黄色、黄色、黄绿色等邻近色与橙色搭配使用，通过不同明度和纯度的变化可以得到更为丰富的色阶通常都能得到非常好的视觉效果，只要在视觉上处理的井然有序，将会使整个页面看起来华
升级会员 