网站设想页面的标准

下面由尚品中国给各人分享一下网站方案的页面标准布局框架：



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示例。