下面由桔子科技为大家分享网站设计的页面规范布局框架：1、页面框架

网站的页面框架是指构成完整页面的组织结构，通常包括以下三部分：Head，Main，Foot。在特殊情况下，还可能包含用于页面功能导航的“Men”。

2、布局原则

对于网站应用来说，页面布局与网页功能区域相对应，并遵循一定的切分比例规则。设计页面布局时，首先需考虑用户浏览web页面的视觉流向。从视觉效果来看，用户首先看到的是页面“Head”部分的左边，通常那里是标识这个WEB应用的Logo；然后是展示WEB应用主要功能的“Men”，用于页面导航；接着是位于页面左侧的“sidebar”，一般用作功能导航，与“Men”选择的选项相呼应，这里的内容可以通过类似树状结构的方式展示更详细的功能；之后是处于页面中心位置的内容部分；最后用户的视线落在WEB页面的底部。

3、页面分割

以上图示布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：首先，将页面按照黄金分割的方式进行分割。在高度方向上，对上部1/5区域按黄金分割比例分出head和men的区域；在宽度方向上，对中部左边1/3区域按黄金分割比例分出sidebar的区域，剩下的空间留给content区域；在高度方向上，对下部1/5区域按黄金分割比例分出foot的区域。

4、页面结构

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

- Head区域：宽度按比例设置（1%），高度采用所占的固定像素值确定，一般占100px。如有men区，则调整为120px；
- Men区域：与“head”配置要求相似，宽度按1%设置，高度结合“head”的高度设置确定，一般占80px；
- Sidebar区域：宽度结合与“content”之间的黄金切分比例，以固定像素方式确定，一般占200px；高度按比例设置；
- Content区域：高度和宽度方向布局都按比例设置；
- Foot区域：宽度按1%设置，高度采用所占的固定像素值确定，一般占60px。

5、页面展现

对于页面布局而言，除了上述要求外，还需要考虑以下几点：

- 可自适应14*768、8*6两种分辨率；
- 界面层次不超过4层；
- 默认窗口设置下，不应出现水平、垂直滚动条；
- 当界面内容超出显示区域时，以浮动层形式展现；
- 利用屏幕对角线相交位置和上方四分之一处用户直视的地方，放置页面元素。

6、页面美化

界面应大小适中，符合美学观点，感觉协调舒适，在有效范围内吸引用户的注意力。建议如下：

- 长宽接近黄金分割比例，避免长宽比例失调或宽度超过长度；
- 布局合理，不宜过于密集或空旷，合理利用空间；
- 同一页面上的按钮大小一致，不同页面的按钮大小尽量相近，按钮上名称不宜过长；
- 按钮的大小要与界面的大小和空间协调；
- 避免在空旷的界面上放置很大的按钮；
- 完成控件后界面不应有很大空缺位置；
- 字体大小与界面大小比例协调，通常使用1px字体；
- 前景与背景色搭配合理协调，反差不宜太大，主色要柔和，最好少用深色；
- 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#CCC"等；
- 界面风格保持一致，字的大小、颜色、字体相同。特殊要求处可使用图片表现；
- 如果窗体支持最大化或放大时，控件也要随着窗体缩放；
- 系统对话框页面不支持缩放，即右上角只有关闭功能；
- 通常父窗体支持缩放时，子窗体没有必要缩放；
- 如能提供用户自定义界面风格，则由用户自己选择颜色、字体等。

7、页面字体

页面字体属性的设置在相应的CSS中进行定义，页面文字编码要求是UTF-8。在设定字体属性时，需要如下操作：

- 中文采用“宋体”，英文采用“rial”或“verdana”。CSS文件中的font-family里面必须保证有“宋体”；
- 标题文字大小一般在“Head”区域确定为px；
- 导航文字大小在“Men”区域内为14px；
- 文字大小在“Sidebar”区域为1px；
- 正文大小在“Content”区域根据内容级别设置，一般选用1px或14px，标题采用14px；
- Foot区域文字大小设置为1px或1px。