网页设计的要点与布局策略

网页设计毕业论文第八篇：网页设计的要点与布局策略

 

　　摘要：在进行网页的设计前，首先要对网页按照合理的方式进行布局，也就是所谓的“网页布局”。“网页布局”的意思就是按照一定的方式对即将出现在网页中元素进行定位，网页布局对网页的精彩与否可以起到决定性的作用。网页布局直接关系到网页页面内容的编排和页面的布局排版。本文主要探讨网页设计常用的布局方法。

 

　　关键词：网页设计; 页面布局; 排版;

 

　　网站作为媒体平台的一种，影响极为广泛。用户可以根据自身的需求在各大门户网站上搜索自己需要的信息，门户网站以网页的形式将用户的搜索内容展示在网站上，网页是构成网站的基本要素，网站的布局也是吸引用户的关键因素。一般来说，网站布局可以大致分为拐角型、国字型、标题正文型、框架型、封面型等，对于网页设计人员而言，如何将种类繁杂的信息恰当、合理的放入到网页中，是页面布局首要考虑的。

 

　　一、网页设计的要点

 

　　当前互联网的类型主要有以下几种：社区类型网站、展示查询型的网站、企业门户网站、企业涉外网站、购物型网站、门户综合信息型网站、行业协会门户网站、交易型网站、政府门户网站等。根据类型的不同，设计需要注意的要点不同，但是大多会具备一定的基础信息，如标志，导航条、页尾等。下面以社区类型网站和企业品牌网站为例说明。

 

　　（一）社区类型网站

 

　　社区类型网站较为典型的如人人网、校内网等，在页面布局上有很多相似的因素，组成元素主要包括：登录页面、网站内容、页尾、宣传标语等。

 

　　（二）企业品牌网站

 

　　对于此类网站而言，最主要的职能有两种一是展示企业的形象，二是信息传递。网站布局设计时若单纯注重形象展示就会忽略信息传递的功能。当前有大量的企业门户网站在打开时首页显示的是全屏的形象展示幻灯片，用户很难在第一时间检索到需要了解的信息。因此，网站上的网页设计在作为品牌形象传递的同时，也需要让用户在首次访问时就可以找到自己需要查找的信息。网站页面布局好坏直接取决于网页的页面布局与信息设计，在进行页面布局时，应充分考虑用户的浏览习惯，将网页的核心内容通过有序、合理的布局展示给用户。在浏览页面时，人的第一视觉往往并不是页面中心，而是根据母语的阅读习惯，遵从大脑的指示，按照从上到下、从左到右的阅读习惯进行浏览，在阅读陌生页面时，最先看到的一般是左上角的内容，因此在进行页面布局时，最重要的内容要放在页面左上角的地方进行展示，重要的信息放在重要的模块上，网页布局也需要考虑到网站运营，以满足网站盈利的最终目的。在网站的页面布局上可应用7±2的原则，即人类在短时间内只能记忆5-9个事物，在页面上尽量不要显示过多的内容。网页布局需要注意的事项总结起来主要有以下三点：一是一个网页展示的信息量不宜过多，给用户识别的区域内容文字应简洁；二是将页面的主体功能放在重要的位置，其他功能放在其他的位置；三是不要让必要但不必须的功能（自身利益的功能）强行占据主体的位置。

 

　　二、网页布局方法

 

　　目前，网站编程人员最常用的网页设计布局方法有5种：表格布局、软件设计布局、框架布局、层布局、DIV+CSS布局。

 

　　（一）表格布局

 

　　对于大部分的初学者来说，表格布局是最常用的布局方式，表格布局的优点是方便页面内容定位和对齐，且表格内可以嵌套，但嵌套一般不会超过三层，否则会增加解析时间，导致用户在进行网页浏览时，影响网速，插入表格后可以将与表格相对应的文字、图片和其他的内容置于相应的单元格内，这样，基本布局就完成了，表格布局的优点是简单直接，但表格布局效率比较慢，也容易出现格式错误，造成排版混乱。例如可以将网页分为标题、网站标志、导航栏、内容展示区、网站尾部。

 

　　（二）软件设计布局

 

　　利用图像处理软件，可以生成网页格式。图像处理软件可以设计出较为美观的网页，且由图像处理软件生成的网页较为稳定。软件设计布局的缺点在于，如果某一个网页页面里面含有大量的图片，容易影响显示速度，另外转化成网页后，对网页的修改并不方便。

 

　　（三）框架布局

 

　　框架也是常用的布局工具之一，框架的优点是可以将一个浏览器的窗口划分为多个小窗口。这样一个大的网页文档可以做成多个小网页文档，每一个小的网页文档就可以放在对应的小窗口里。优点方便做小网页文档，需要时就以超级链接的方式调入小网页文档于窗口中，解决了信息冗余，节省了网站的空间。框架布局最常见的使用情况是一个框架显示导航，而另外一个框架显示有内容的文档，框架布局最常见的用途是导航。

 

　　（四）层布局

 

　　层也是网页的重要组成元素在之一，层可以在网页上的任意位置进行定位，同时层也是一个载体，层的优点是能够较为灵活的放置内容，将网页的二维平面拓展到三维。层可以对页面上的其他元素进行复杂重叠的布局，但是层也具有十分很明显的局限性。一般来说，层漂浮于页面的顶端，因此在使用过程中往往需要一个与位置相对应的坐标才能将自己固定在页面的某一位置上。如果页面出现改变，例如当浏览器的窗口发生缩放等情况时，层的位置往往会出现误差，进而导致页面发生错位。因此在使用层之前，首先要找到层的相对对象，避免错位问题的出现。层除了可以用来进行页面布局外，还可以前后放置在页面上，还可以用来隐藏其他层面，层的主要功能包括：实现元素的精准定位，元素可随意的放置，层可以随意叠加也可以隐藏。

 

　　DIV+CSS布局：表格布局是利用表格和表格嵌套的方式来对网页的内容进行定位。随着人们审美的提升，页面布局技术不断提高，当前CSS已经成为网页布局中的核心技术。CSS不仅可以表现网页内容，还可进行页面的整体布局。DIV+CSS布局就是通过CSS定义的大小不等的盒子及盒子嵌套来对网页内容进行定位。因此CSS盒子模式是DIV+CSS网页布局的核心，在这其中DIV表示层，CSS表示层叠样式表。DIV+CSS布局的优点是较为简单、网页内容与表现相互分离、多浏览器支持。

 

　　三、总结

 

　　每一种网页布局的方法都有各自的优势和劣势，在进行页面布局时，往往不是单独使用某一项布局方法，而是将几种布局方式结合在一起，只有这样才能对页面布局进行合理的安排，设计出既美观又布局合理的页面，此种综合布局方法可以较好的体现每种布局方法的优势，避免其可能造成的各种问题。

 

　　参考文献

 

　　[1]韦巍.计算机网页设计中的布局与排版研究[J].现代信息科技,2018(06):23-24.

　　[2]甘年妹.网页设计中版面布局设计与色彩搭配研究[J].电脑迷,2018(03):224-225.