下面由桔子科技为大家分享一些网站页面布局优化的技巧：

1. 精确页面框架规划

网页的页面框架是构成完整页面的组织结构，通常包括三部分：Head、Main、Foot，有时根据布局需要会在“Head”下方添加用于页面功能导航的“Men”。

2. 掌握布局原则

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

3. 页面分割技巧

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

4. 设置页面结构

页面布局中各区域大小定义方式不同，各功能区域的切分按照“像素”和“比例”进行。以14*768分辨率作为基准，Head区域宽度按比例设置，高度采用所占的固定像素值确定；Men区域和Head配置要求一致，宽度同样按比例设置，高度结合Head高度设置；Sidebar区域宽度结合与Content之间的黄金切分比例，以固定像素的方式确定；内容区域Height和宽度方向布局均按比例设置；Foot区域宽度按照1%设置，高度根据所占的固定像素值确定。

5. 页面展示优化

除了以上要求外，还要考虑以下方面：支持14*768、8*6两种分辨率；界面层次不超过7层；默认窗口设置下不应出现滚动条；当内容超出显示区域时以浮动层形式展示；注意利用屏幕对角线相交位置和页面正上方四分之一处作为用户直视的地方，设计页面时要考虑这两个位置。

要求：父或主页面的中心位置应设计在对角线焦点附近；子页面靠近主窗体的左上角或中间；多个子页面弹出时依次向右下方偏移以显示标题；页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能等。

6. 页面美化

界面大小符合美学观点，感觉协调舒适，在有效范围内吸引用户注意力。建议和要求：长宽接近黄金分割比例，布局合理，按钮大小一致，字体大小与界面大小比例协调，前景与背景色搭配合理等。

7. 设置页面字体属性

页面文字编码要求为UTF-8，在CSS中设置字体时需要确保有“宋体”字体；对于内容不同级别进行字体大小的设置通常：“Head”标题文字px，“Men”导航文字14px，“Sidebar”文字1px，“Content”正文1px或14px，“Foot”文字1px。

通过以上页面布局优化技巧，相信能够帮助网页达到更好的展示效果。