网页设计中网页布局十五种方式

网页设计的网站不仅是企业开展电子商务的基础设施和信息平台，也是企业无形资产的组成部分，宣传和反映企业形象和文化。色彩的搭配、文字的变化、图片的处理等都是网页设计不可忽略的因素，其中还有一个非常重要的因素—网页的布局。下面网站建设公司科盛网络科技就有关网页布局谈论一下。

网页设计网站不仅是企业开展电子商务的基础设施和信息平台,也是企业的无形资产的一部分,促进和反映企业形象和企业文化。颜色的搭配,文字的变化,图像的处理等因素，都是网页设计不能忽视,其中也有一个非常重要的因素——web页面的布局。下面就有创新互联科技网络小编有关网页布局进行展开讨论。

1、“口”型布局

这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。

2、拐角型

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、“国”字型

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

5、“T”结构布局

所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。

这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。

6、POP布局

POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。

综合框架型： 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7、封面型

这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8、 对称对比布局

顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。

9、“三”型布局

这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。

10、左右框架型

这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

11、上下框架型

与上面类似，区别仅仅在于是一种上下分为两页的框架。企业向用户和网民提供产品和服务的一种方式是通过网页设计的网站, 可以说网页设计是十分重要，网页的布局影响到了网页的精彩。以上对网页的布局进行了简单的介绍，只有掌握好，才能设计出精彩的网页。

12、变化型

即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

13、“川”字形布局

整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，大限度地突出主页的索引功能。

14、Flash布局

这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。

15、“匡”字形布局

这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

有了这些类型，那么就有思路做符合自己网站建设，网站设计制作中网页版面设计步骤：

1.页面尺寸

页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600;分辨率在800×600的情况下，页面的显示尺寸为780×428个象素;分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，以方便访问者浏览。

2.整体造型

什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。

3.页头(头部)

页头(头部)又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。

4.文本

文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

分享标题：网页设计中网页布局十五种方式
网页地址：https://www.cdcxhl.com/news/172845.html

成都网站建设公司_创新互联，为您提供关键词优化、云服务器、外贸网站建设、定制网站、App开发、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联