网页布局与用色浅谈.docVIP

网页布局与用色浅谈 　　[摘要]网络已经影响到了我们生活和工作的方方面面，每天都有很多浏览网页。政府，学校，企业，甚至个人都有自己的网页。其实制作网页并不神秘，而在制作过程中，网页的布局和用色的非常重要。介绍了网页布局的设计方法和颜色搭配的技巧问题。 　　[关键词]布局 色彩 用色 　　中图分类号：TP3 文献标识码：B 文章编号：1002－6908（2007）0520054－01 　　 　　网页不同的布局设计和颜色搭配会产生不同的视觉效果，直接影响到浏览者对网页的第一印象。精彩的网页往往布局整体美观，色彩搭配协调，令浏览者赏心悦目，流连忘返。那么，怎样设计布局和搭配颜色更合理呢？下面，我就此谈论一下。 　　网页布局就是安排网页组成元素，如：文字、图片的位置。报刊和杂志的排版样式值得我们学习借鉴，但又不可原样照抄，毕竟网页有它自己的特点。网页的布局通常是根据网站的类型设计的，不同的网站有不同的风格，但基本都有以下几个部分：网页标题，页眉，网站标识，导航栏，内容板块和页脚。 　　1．网页标题 显示在浏览器的标题栏中，用于说明网页的内容。 　　2．页眉 位于页面的上方，通常放置用户注册和登录的表单。 　　3．网站标识 相当于企业的商标。一般显示于页眉下方，目的是加深浏览者对网站的印象。标识代表了网站的形象，在网站的宣传推广方面作用巨大，因此标识一般是经过精心设计的。 　　4．导航栏 相当于网站向导。一般显示在和标识相邻的位置上。提供网站内容的索引，帮助浏览者快速查找网页信息。导航栏形式多样，可以是文字、图片或按钮。 　　5．内容版块 网页的的主体。内容是网页的精髓，通常是有方向性的。可以根据网页内容再划分栏目版块。只有丰富多彩的网页内容，才能吸引浏览者的点击。 　　6．页脚 位于页面的下方。一般放置网站的版权信息、联系方式等。 　　网页布局大致可以归纳为以下几种类型： 　　1．“国”字型 也称“同”字型。结构特点是：页面上方放置网站标识、导航栏或横幅广告条。接下来页面内容版块分为左、中、右3栏。中间较宽，两边较窄。页面下方放置网站的版权信息、联系方式等。多数网站采用这种布局，结构清晰，整齐直观。 　　2．“匡”字型 也称拐角型。结构特点是：页面上面是网站标识、导航栏或横幅广告条，左侧或右侧是一窄列链接等，右方或左方是很宽的正文，下面是一些网站的辅助信息。 　　3．上下型 页面分为上下两大版块，其中每一版块都具有“国”字型或“匡”字型。 　　4．左右型一种左右为分别两页的框架结构，一般左窄右宽。左面是导航链接，右面是正文内容。大部分的大型论坛都是这种结构，一些企业网站也喜欢采用。这种类型结构清晰，一目了然。 　　5．自由型 页面布局就像杂志的封面或宣传海报，自由随意。可以放置设计精美的图片和按钮作为链接。 　　网页布局的设计通常分为以下几个步骤： 　　1．确定主题 首先需要确定网页的目的，或者说网页的类型。例如：政府类网站，新闻类网站，学校类网站或娱乐类网站等。不同类型的网站采用的布局也不尽相同。政府类网站就不宜采用自由型布局。 　　2．构思布局 网页最初呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在这个阶段，可以参考他人的布局结构，借鉴他人的布局经验。当然一定要有自己的创新，发挥想象力，结合实际，尽量特点鲜明、整齐大方。 　　3．绘制草图 设计布局就像写作文一样，可以先打草稿。绘制草图就是想象中的布局实际化的过程。绘制草图时不必考虑细节，只要勾勒出大体轮廓即可。 　　4．确定布局 这个阶段的设计方案应该是比较完备的，除了一些细节之外，其他内容应接近网页的实际浏览效果。 　　网页布局的实现技术： 　　1．使用表格 很多网页设计师喜欢采用表格实现页面规划布局。我们随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它，你会看到这个页面是如何利用表格的。 　　使用表格的缺点是无法实现自由移动，因为最初创建表格是为了显示表格数据，而不是用于对 Web 页进行布局。页面下载速度也受影响。 　　2．使用框架框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。 　　3．使用 CSS 样式 可以在HTML代码中手动插入 div 标签并对其应用 CSS 定位样式，也可以使用层来创建布局。层是被分配了绝对位置的 HTML 页面元素 － 具体地说，是 div 标签或任何其他标签。 　　网页的色彩是树立网站形象的关键之一,起着画龙点睛的作用。作为一个网页设计师，只有掌握色彩构成原理，熟知各色彩间的相互关系及各种颜色的心理作用，结合平面