下面由桔子科技为您详细讲解如何优化高效网页设计规范：

一、页面框架

Web页面的组织结构称之为页面框架，通常包含以下几个部分：Head、Main和Foot。在某些情况下，为了满足布局需求，还会在“Head”下方添加用于页面功能导航的“Men”。

二、布局原则

对于Web应用而言，页面布局与Web应用的功 能区域相对应，需要遵守一定的切分比例规则。设计页面布局时，首先要考虑用户浏览网页时的视觉流向：

1. 首先看到的是页面“Head”部分的左侧，通常这里展示Web应用的Logo；
2. 接着是陈列Web应用主要功能的“Men”，用于页面导航；
3. 然后是位于页面左侧的“sidebar”，通常也用于页面功能导航；
4. 再来是页面中心的内容部分；
5. 最后是WEB页面的底部。

三、页面分割

以常见的Web页面设计方法为主题，结合黄金分割比例：

1. 按照黄金分割比例进行页面分割，高度方向上，将上部1/区域划分为Head和Men区域；宽度方向上，将中部左侧1/区域划分为Sidebar区域，剩余空间分配给Content区域；
2. 高度方向上，将下部1/区域按照黄金分割比例划分为Foot区域。

四、页面结构

页面布局中，各个区域大小的定义方式包括“像素”和“比例”。以14*768分辨率为例：

1. Head区域：宽度按比例设置，高度采用固定像素值；
2. Men区域：与Head配置相同，宽度按比例设置，高度结合Head的高度确定；
3. Sidebar区域：宽度结合与Content之间的黄金切分比例，按照固定像素设置；高度按比例设置；
4. Content区域：高度和宽度方向布局均按比例设置；
5. Foot区域：宽度按比例设置，高度采用固定像素值。

五、页面展现

1. 适应14768、86两种分辨率；
2. 界面层次不超过X层；
3. 默认窗口设置下无水平、垂直滚动条；
4. 当界面内容超出显示区域时，以浮动层形式展示；
5. 利用屏幕对角线相交位置和页面正上方四分之一处放置重要元素。

六、页面美化

1. 长宽接近黄金分割比例，避免长宽比例失调或宽度超过长度；
2. 布局合理，空间利用得当；
3. 按钮大小协调一致，名称简洁；
4. 字体大小与界面相匹配；
5. 背景色与前景色搭配合理，主色柔和；
6. 界面风格保持一致；
7. 控件随窗体缩放。

七、页面字体

中文使用“宋体”，英文使用“rial”或“verdana”；在CSS中定义字体系列和大小；根据内容级别设置字体大小。