网页设计版面布局结构

在网页设计中，对网页进行合理的布局和划分是建立网页框架的首要步骤。通过版面布局可以确立网站的风格，突出网站的创意。通常，网页的布局结构有以下几种。

①“左右”布局。即将网页分为左右两个部分，左半部分设置为导航栏，右半部分则列举详细内容。这种结构比较直观，但由于信息含量有限，不适用于制作大型网站。这类结构在论坛和企业网站运用较多。

②“T”形布局。即页面顶部为横条网站标志和广告条，左面是主菜单，右面显示内容的布局，使网页整体看起来有如字母“T”。这是网页设计中使用广泛的布局方式，它的优点是页面结构清晰、主次分明，缺点是规矩呆板。

③“门”形布局。即页面上部是网站的标志和广告条，中间显示主要内容，左面是主菜单，右面显示友情链接等。这类布局虽然能够充分利用版面，为受众提供大量信息；但是页面看起来会感觉拥挤，缺乏灵活性。

④“口”形布局。页面结构与“门”形布局相似，页面上下各有一个广告条，中间是主要内容，左边是主菜单，右边是友情链接等。

标签：网页设计版面布局结构

网页设计所用的知识点

虽然网页种类繁多，形式内容各有不同，但网页的基本构成要素大体相同，包括标题(Logo)、导航、文本、图片、动画、超链接、表单、音视频等，网页设计就是要将上述构成要素有机整合，表达出美与和谐。下面是网页设计所用的知识点的介绍，希望对您有所帮助。

认识网页与网站

网页(Web Page)实际上是一个文件，网页经由网址(URL)来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。

网站(Web Site)是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站;有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页(Home Page)。例如，当浏览者输入搜狐网站地址“www.sohu.com”后出现在第一个页面，即sohu网站的首页，如图1.1所示。浏览者可以根据首页的导航进入其他页面，了解更多内容。

网页的基本构成要素

虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标题(Logo)、导航、文本、图片、动画、超链接、表单、音视频等。网页设计就是要将上述构成要素有机整合，表达出美与和谐。

网站建设的基本流程

规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。

网页版式设计

网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。

网页布局

网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。

1.分栏式结构

2.区域分布式结构

3.无框架局限式结构

导航设计

导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。

导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。

导航设计应遵循以下原则：

让用户了解当前所处的位置;

让用户能根据走过的路径，确定下一步的前进方向和路径;

不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息;

让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径;

让用户清楚地了解整个网站的结构概况，产生整体性感知;

网页风格设计

同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。本节将结合实例从网页配色、文字艺术两个方面对网页风格设计进行具体分析。

网页配色

设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。下面介绍一些网页配色的具体经验。

运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感，如图1.10所示。IBM网站运用蓝色系营造出蓝色海洋的感觉。

使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富，如图1.11所示。