越来越多的企业在创业初期就开始了自己公司的网站建设之路，而说到网站建设就不得不提到网页布局，网页布局对于网站建设来说无疑是重要的，那么怎样做好网页的布局呢?下面就来学习一下。
怎样做好网页的布局
1.网页设计的页面尺寸：
页面的尺寸其实和显示器的大小以及分辨率有着很大的关系，一般来说，分辨率在640*480的情况下，页面的显示尺寸为:620*311个象素;分辨率在800*600的情况下，页面的显示尺寸为：780*428个象素;分辨率在1024*768的情况下，页面的显示尺寸为：1007*600，从以上数据中我们可以看出，分辨率越和页面大小是呈正比关系，即分辨率越高则页面越大。而当用户打开网站网页时，其浏览器也会占领一部分空间，这样留给网页的空间就会对应的缩小，这是我们在网页制作中需要关注的问题，另外还有，在浏览器选择关闭的时候网页页面也会对应的增大，这样和浏览器未关闭时候的网页大小是不同的。
有的人说，及时网页对于显示器来说有点大，用户也是可以向下拖动网页来获取内容的，其实不然，因为要用户主动向下拖网页的前提是你的网页内容足够吸引人，而我们对用户在没有把握的情况下*将网页设计成合适的大小，方便浏览者进行浏览。
2.网页设计的整体造型：
整体造型指的也是页面的整体形象，就是呈现给浏览者的*印象，这在无形中也关系着用户的喜欢与否，所以在网页的设计过程中应当尽量选择层叠有序的。对于显示器和浏览器是矩形的特点，网页的设计可以呈现矩形、圆形等与自然界中相似形状的运用。而图形的不同其实给人的感觉也不尽相同。例如，矩形，矩形代表着规则和正式通常会被运用到*网站等较为正式的网站中;例如，圆形，圆形给人的感觉是团结温暖柔和的，所以常被运用到关于时尚的网站中……所以不同类型的网站我们要根据其性质做不同形状的选择。
3.网页设计的页头：
页头其实就是页眉，通常是会做显示主题之用，所以页头的内容一定要简洁明了，让浏览者一下就明白网站的中心是什么，所以我们在网页的设计中可以将网站名称和公司标志或者中心广告放置在页头，让用户能够一目了然。
4.网页设计的文本：
在过去，因为技术的原因使得文本的放置灵活性较小，只能放置在固定的地方，而随着新技术的兴起，文本已经可以按照自己的要求进行自由放置了。所以我们在放置文本的时候可以结合网页整体的设计进行，这样既能保证文本的有效性被用户*的接受，又能够保证整体网页的美观。
5.网页设计制作的图片：
一个图文并茂的网页中文本和图片一个都不能少，所以在文本归置好之后还要处理好图片，文本和图片相得益彰才能够呈现一个出彩的网页。
6.网页设计制作的多媒体：
随着动态网页的兴起，人们在设计制作网页时也会加入一些声音和动画以此来丰富网站的体验，合理的多媒体的运用能够让网页看起来更加生动富有生机。是现代网站丰富体验的不可或缺的手段之一。
7.网页设计的页脚：
页脚和页眉应该呈现相互呼应的特征，页眉一般被放置点睛信息，页脚就要放置一些作者或者公司信息了。这样首尾相互呼应才能*限度的让网页看起来完整有序。
网站该如何布局好首页
一、确定首页主题
首页是网站的核心页面，网站的主题主要是首页确定的，所以在首页中需要让用户了解网站是做什么的。在网站设计上犀牛云主张通过网站的标题、关键词的描述来为企业展示主要内容。这样用户在搜索引擎上看到的搜索结果就是企业的网站标题与与描述的内容。此外，首页主题也是网站SEO推广非常重要的一项内容，搜索引擎上会展示企业的网站信息，就是企业设置的网站主题。
二、设置首页导航
首页导航是对网站内容的一个细分，这样方便用户根据自己的需求选择要浏览的栏目。导航该如何设置呢?网站导航要做到分类清晰，逻辑清晰，用户想了解到内容放在导航里面。
对于页面很多的网站，导航栏目之间不要重复，*了也不要有相似的词，避免让用户产生误会，导致网站逻辑混乱。设计导航栏的时候可以体现这个企业的大概信息，现在比较流行的导航栏是下拉+图片文字的方式去表现。这样浏览者可以一目了然的了解企业的概括和产品的信息。
一般企业的导航，主要包括首页、产品服务、优势亮点、公司新闻、关于我们、联系我们这些通用类的栏目。这里犀牛云建议可以把这公司简介和联系我们这两个栏目做成一个，强调企业的实力雄厚，产品的质量，打消用户对企业的不信任，*通过联系我们来获得电话咨询。互联网上有许多导航栏目做的很好的网站，这里可以参考网上的优化网站的导航栏目划分方法。
导航的上方应该有企业网站的LOGO，还有联系方式(可以是QQ也可以是电话，要是可复制的)，这样能让用户一眼就看到，避免到时候到处找联系方式在哪，其次导航上做的词应该要是你这个行业用户所需要的内容，你可以依靠百度下拉框和推广助手来挖用户需求词。
三、重视banner条设计
如果首页是一个网站的核心，那么banner就是网站首页的核心。当人们打开一个网站的首页，最醒目的就是banner条。所以犀牛云在为企业设计banner条时，尽量确保图片和自己的产品相符合，然后用文字加以说明。这样的好处是用户仅看banner条就能知道网站的主题，也进一步的对产品有初步的了解。
banner首先主题要明确，色彩搭配要明亮干净，与整个页面要相协调，做到能吸引用户去点击，这样才能更好的宣传，推广产品和新功能。
banner是首页的核心，一般只做企业里*代表性，用户需求量*的产品，让用户一眼就能看明白，这个就是他要找的，banner图片的链接应该跳转到相关产品的页面，首屏的其他内容可以做仅次于banner图片上的主要产品，但不建议经常去更新，应该按行业用户的需求走势去更新。另外在这里说一下，有一部分企业居然在banner上放一些风景啊、抽象图片这一类很难让人看懂的图片，这样做是极度浪费首屏的大好资源。
四、合理安排首页内容
首页的内容重要性就不再多说。如果说网站首页banner、导航等一些元素是网站的重要内容，那么网站首页的内容就是重中之重。网站banner、导航只是用户*印象，如果要提高网站的转化率，还是要从内容建设。站长需要先对用户群的需求进行分析，把用户关注最多的内容放在首页最重要的位置，这样会降低用户的跳出率，有利于提高网站的转化。
首屏之后的几屏主要做次于首屏的产品或者服务，一般来说用户拉到第二屏第三屏注意力肯定是没有在首屏时候集中了，所以后面几屏做的产品要强调出产品的优势、卖点，并且在产品旁边要出现转化入口，及时抓住用户，不让用户流失。
五、适当布置转化工具
适当布置转化工具，是很多网站容易疏忽的事情。这就相当于踢足球*忘了临门一脚进球，实在非常可惜。一般而言，设置的转化工具包括电话、QQ、百度商桥、第三方客服工具、在线留言、在线注册等。
六、注意网站整体颜色和底部的布局
网站的背景颜色是非常容易被忽略的，不是所有的颜色都能通用于每个行业的网站，就比如做婚纱摄影的，一般都是以白色占据大部分，也可以填充一点红色蓝色，如果使用黑色，灰色这样的颜色，就会觉得很奇怪，很想马上关掉网站，不会有看下去的欲望。赢商网络建议网站底部要保持简洁，不要做太多乱七八糟的东西，其实做上友情链接就够了，最多在底下再次强调一下你公司的联系方式。
网页版面设计步骤和布局技巧 一、设计网页分辨率选择
随着电脑的发展，显示器是越来越大，分辨率也是越来越高，为了照顾所有不同显示器的用户，把网站的制作尺寸规范就定在1280*768下，网页宽度保持在1200-1004以内，高度还是以根据需要制作的内容在定，如果只想网页只在一屏内显示，不要上下滚动条， 一般高度是600-635像素之间, 就不会出现垂直滚动条。很多人浏览网站时间比较长就会感觉到眼睛疲劳，当然，这不仅仅是时间的问题，有的时候还可能是因为我们没有选择到一个比较好的分辨率。目前网络上的网站很多使用的都是778个宽度的像素，但是事实上像素低于800就已经让人感觉到非常的压抑了。所以说我们在做网站的时候一定要选择一个比较舒适的分辨率，这样人们在浏览网站的时候才不会带来眼睛的负担，从而能够在网站上面停留的时间更长。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家，除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你*能在上面做上页面内部连接，以方便访问者浏览。
二、适当的穿插图片广告
图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。现在互联网在人们生活中普及，所以网络上也有各种各样的铺天盖地的广告，但是很多广告却骑到了负面作用，让人们看着感觉特别的烦恼。一段文字和一张图片，甚至一个图标……在你进行布局的时候，由于你的素材并不是立刻手到擒来，你的布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让你陷入“框架陷阱”。所以在插入广告的时候一定要合理的设计，当然，最重要的就是广告的画面一定不要影响人们对网站的阅读，很多广告都是浮窗式的，但是一定要保证这些广告不会覆盖出网络上面的文字。而且广告的数量一定不要太多，这样也就不会使人们感到反感。
三、做好焦点
为什么摄影师拍的照片看着很舒服，因为他们可以找到焦点。但任何一件好的平面作品，一定是有焦点的。就像我们谈到过，十字准星型的视觉结构习惯将焦点置于中心位置，要制造一个焦点的办法有很多，简言之，就是制造冲突。想象你在一个人群稀疏的大厅，突然有两个人高声争论什么，这时引起了几个人围观，这个情景就在原本安静的人流中制造了一个关注焦点。同样，在视觉领域也是如此，利用对比冲突应该是一种最有效的制造焦点的方式。
对于焦点的认识我们也不应局限于是一个“点”，它是一块正吸引你的视线所投射的区域。它还可以分为实焦点和虚焦点，实焦点是在虚焦点之上更为精准的投射存在。除了色彩，其他任何属性都可以经由对比形成焦点，这时你要做的，就是注意焦点不应太多。也因此，除了焦点以外，设计中的其他元素都要保持一种相似性。这里我们总结一下能用于进行对比属性，这些属性之间形成的对比越大，冲突越大。
空间：充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放
形式：简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎
结构：井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工
纹理：细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝
位置：顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外
方向：垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字
尺寸：大-小、长-短、窄-宽、扩大-收缩、深-浅
颜色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和(深色)-无色(素色)
密度：透明-晦暗、稠密-稀薄、液体-固体
重力：轻-重、稳定-不稳定
设计师在做设计时，其实并不会将这些规范提前设定在大脑中，而是经过经验的积累而形成一种潜在的直觉，这份清单的意义并不是需要你记下它，而是浏览完后，在设计的任何场合的提醒。比如一份作品完成后，可以看看究竟焦点是否足够吸引，哪些元素需要进一步调整。焦点突出的前提是非焦点区域的元素尽量保持一致。制造冲突似乎手到擒来，但是要保持一致却需要步步为营。
