下边由酷站科技给大伙儿共享一下网站设计的网页页面标准合理布局架构：

1、网页页面架构

WEB的网页页面架构就是指组成详细网页页面的组织架构。一般是由下列三一部分组成：Head，Main，Foot，一些情况下出自于合理布局的必须，在“Head”下边还会继续再加上用以网页页面作用导航栏的“Menu”。如图所示：




2、合理布局标准

针对WEB运用而言，网页布局是和web应用的功能分区相对性应的，而且针对网页页面中每个一部分中间的分割占比也必须遵循一定的标准。
网页布局的设计方案，最先必须考虑到客户在访问web页面时视觉效果流入上的规定：



从视觉效果流入上看，客户最先见到的是网页页面“Head”一部分的左边，一般那边是标志这一WEB运用的Logo；随后是陈列设计WEB运用关键作用的“Menu”来用以导航菜单；接下去客户将看的是处在网页页面左边的“sidebar”，一般这儿也是用以网页页面作用导航栏的，和“Menu”出的挑选相映衬，这儿的內容能够根据相近树形结构构造的方法展现更加详尽的作用；接下去是处在网页页面管理中心部位的內容一部分，最终客户的视野落在WEB网页页面的底端。

3、网页页面切分

以上边图例的合理布局方法为例子，依照一般web页面设计方案时需遵照的方式 ，并融合黄金比例占比的方式 ：

最先，将网页页面依照3*3的方法开展切分，如下图：


在高宽比方位上，对上端1/3地区依照黄金比例的方式 分离出来head和menu的地区；
在总宽方位上，对中间左侧1/3地区依照黄金比例的方式 分离出来sidebar的地区，剩余的室内空间交给content地区；
在高宽比方位上，对下边1/3地区依照黄金比例的方式 分离出来foot的地区；

4、网页页面构造

网页页面的合理布局中，每个地区尺寸的界定方法是不一样的，请见下面的图：



在网页布局中，对每个作用地区的分割是依照“清晰度”和“占比”方法来开展的，以1024*768的屏幕分辨率作为标准，在其中：

• Head区域，总宽是依照占比方法设定的，总宽依照100%设定，高宽比选用所占的固定不动清晰度值来明确的，一般占？px，如果有menu区，则调节为？px；
• Menu地区，和“head”的配备规定是一样的，总宽依照100%设定，高宽比融合“head”的高宽比设定来明确，一般占？px；
• Sidebar地区，总宽是融合与“content”中间的金子分割占比，依照固定不动清晰度的方法明确的，一般占？px；高宽比是依照占比方法来设定的；
• Content地区，高宽比和总宽方位合理布局全是依照占比方法来设定的；
• Foot地区，总宽依照100%设定，高宽比选用所占的固定不动清晰度值来明确的，一般占？px;

5、网页页面呈现

针对网页布局而言，除开所述规定外，还必须考虑到以下规定：

能响应式1024*768、800*600二种屏幕分辨率；
页面层级不超过3层；
默认设置对话框设定下，不可出現水准、竖直网页滚动条；
当页面內容超过显示信息地区时，以波动层的方式显示信息；

也有，针对客户的感观来讲，显示屏直线交叉的部位是客户注视的地区，而网页页面上方四分之一处为易吸引住客户专注力的部位，因此在置放网页页面时要留意运用这两个部位。

规定：
父网页页面或主页面的管理中心部位应当设计方案在直线聚焦点周边；
子网页页面的部位应当挨近主文本框的左上方或正中间；
必须好几个子网页页面弹出来时，应当先后向右下角偏位，以显示信息文本框出题目为宜；
在网页页面上边四分之一处置放客户的logo、关键作用导航栏和一些系统软件实际操作作用；

6、网页页面清理

页面应当尺寸合适艺术美学见解，觉得融洽舒服，能在合理的范畴内吸引住客户的专注力。

提议和规定：

• 宽度贴近金子点占比，切勿宽度比例失衡、或总宽超出长短；
• 合理布局要有效，不适合过度聚集，也不可以过度宽阔，有效的运用室内空间；
• 同一页表面的按键尺寸应当一致，不一样网页页面的按键尺寸尽可能相仿，按键上不宜过长的名字；
• 按键的尺寸要与页面的尺寸和室内空间要融洽；
• 防止宽阔的页面上置放非常大的按键；
• 置放完控制后页面不需有非常大的缺口部位；
• 字体样式的尺寸要与页面的尺寸占比融洽， 一般应用的字体样式12px；
• 市场前景与背景颜色配搭有效融洽，差距不适合很大，基本色要温和，最好是少用深棕色，如大红色、大绿等，能够使用Windows页面色彩；
• 大中型系统软件常见的基本色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；
• 用户界面要保持一致，字的尺寸、色调、字体样式要同样，必须造型艺术解决或有特别要求的地区提议应用照片主要表现；
• 假如文本框适用利润最大化或变大时，文本框上的控制还要伴随着文本框而放缩；切勿只变大文本框而忽视控制的放缩；
• 系统软件提示框网页页面不应该适用放缩，即右上方仅有关掉作用；
• 一般父文本框适用放缩时，子文本框沒有必需放缩；
• 假如能给客户出示自定用户界面，则由客户自身选色、字体样式等；

6、网页页面字体样式

网页页面字体样式特性的设定在相对的CSS中开展界定，网页页面文本编号规定是UTF-8，在要求字体样式特性时，必须设定：简体中文选用“宋体字”，英语选用“Arial”或“verdana”，CSS文档中的font-family里边务必确保有“宋体字”。

针对网页页面特性中文字大小的设定，必须內容的不一样级別来设定，一般：

• “Head”中题目文本，20px；
• “Menu”中的导航栏文本，14px；
• “Sidebar”中的文本，12px；
• “Content”中的文章正文，12px或14px，题目；
• “foot”中的文本，12px或10px；

相关网页页面字体样式特性的实际设定参照附则中的CSS实例。