下面由尚品中国给各人分享一下网站筹划的页面标准布局框架：
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示例。