下面由桔子科技为大家分享一份网页布局方案范本，助您高效设计出美观实用的网站页面。

1、网页结构

网页结构是指构成完整页面的组织形式。通常包括以下几部分：Header，Main，Footer，有时为了布局的需要，在“Header”下方还会添加用于页面功能导航的“Menu”。

2、布局原则

对于网页应用来说，网页布局需要与网页的功能区域相对应，并对页面中各个部分的切分比例遵循一定的规则。网页布局的设计，首先要考虑用户在浏览网页时视觉流向的要求：从视觉流向上看，用户首先看到的是页面的顶部的左侧，通常那里是标识该网页应用的Logo；然后是展示网页应用主要功能的“Menu”用于页面导航；接下来用户将看到的是位于页面左侧的“Sidebar”，通常这里也是用于页面功能导航的，与“Menu”中的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是位于页面中心位置的内容部分，最后用户的视线落在网页页面的底部。

3、页面分割

以下图示的布局方式为例，按照通常网页设计所遵循的方法，并结合黄金分割比例的方法：首先将页面按照*的方式进行分割，在高度方向上，对上部1/2区域按照黄金分割的方法分出Header和Menu的区域；在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出Sidebar的区域，剩下的空间留给Content区域；在高度方向上，对下部1/4区域按照黄金分割的方法分出Footer的区域；

4、页面结构设计

页面的布局中，各个区域大小的定义方式是不同的。在网页布局中，对各个功能区域的切分是按照“像素”和“比例”的方式进行进行的。以1440*768的分辨率作为基准，其中：

Header区域，宽度按照1%的比例设置，高度采用固定像素值来确定，一般占100px；如果有Menu区，则调整为80px；
Menu区域，与“Header”的配置要求一样，宽度按照1%的比例设置，高度结合“Header”的高度设置来确定，一般占80px；
Sidebar区域，宽度是结合与“Content”之间的黄金切分比例进行设定的，一般占200px；

5、网页展现效果

除了上述要求外，还需要考虑以下要求：能自适应1440*768、720*1280两种分辨率；界面层次不超过4层；默认窗口设置下，不应出现水平、垂直滚动条；当界面内容超出显示区域时，以浮动层的形式显示；还有，对于用户的感官而言，屏幕对角线相交的位置是用户直视的地方，而页面正上方四分之一处为易吸引用户注意力的位置，所以在放置网页时要注意利用这两个位置。

6、网页美化

界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。建议和要求：长宽接近黄金分割比例，避免长宽比例失调或宽度超过长度；布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上忌用太长的名称；按钮的大小要与界面的大小和空间协调；避免在空旷的界面上放置很大的按钮；

7、文字字体设置

页面文字编码要求是UTF-8，在规定字体属性时，需要设置：中文采用“宋体”，英文采用“Arial”或“Verdana”，CSS文件中的font-family里面必须保证有“宋体”。对于页面属性中字体大小的设置，需要内容的不同级别来设置，通常：“Header”中标题文字，24px；“Menu”中的导航文字，14px；“Sidebar”中的文字，12px；“Content”中的正文，12px或14px，标题；