长春软件开辟WEB的页面框架是指组成完备页面的构造布局。通常是由以下三局部组成：Head，Main，Foot，有些时分出于结构的必要，在“Head”上面还会加上用于页面功效导航的“Menu”。

关于软件开辟公司WEB使用来说，页面结构是和web使用的功效区绝对应的，而且关于页面中各个局部之间的切分比例也必要恪守肯定的规矩。

页面结构的设计，起首必要思索用户在欣赏web页面时视觉流向上的要求：

从视觉流向上看，用户起首看到的是页面“Head”局部的左面，通常那边是标识这个WEB使用的Logo；然后是陈设WEB使用次要功效的“Menu”来用于页面导航；接上去用户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功效导航的，和“Menu”出的选择相照应，这里的内容可以经过相似树状布局的方法展示更为细致的功效；接上去是处于页面中心地位的内容局部，最初用户的视野落在WEB页面的底部。
 

l  在高度偏向上，对上部1/3地区依照黄金支解的办法分出head和menu的地区；

l  在宽度偏向上，对中部右边1/3地区依照黄金支解的办法分出sidebar的地区，剩下的空间留给content地区；

l  在高度偏向上，对下部1/3地区依照黄金支解的办法分出foot的地区；

在页面结构中，对各个功效地区的切分是依照“像素”和“比例”方法来举行的，以1024*768的辨别率做为基准，此中：

l  Head地区，宽度是依照比例方法设置的，宽度依照100%设置，高度接纳所占的牢固像素值来确定的，一样平常占？px，假如有menu区，则调解为？px；

l  Menu地区，和“head”的设置装备摆设要求是一样的，宽度依照100%设置，高度联合“head”的高度设置来确定，一样平常占？px；

l  Sidebar地区，宽度是联合与“content”之间的黄金切分比例，依照牢固像素的方法确定的，一样平常占？px；高度是依照比例方法来设置的；

l  Content地区，高度和宽度偏向结构都是依照比例方法来设置的；

l  Foot地区，宽度依照100%设置，高度接纳所占的牢固像素值来确定的，一样平常占？px；

1.1.1.1    页面展示

关于页面结构来说，除了上述要求外，还必要思索如下要求：

l  能自顺应1024*768、800*600两种辨别率；

l  界面条理不凌驾3层；

l  默许窗口设置下，不该呈现程度、垂直转动条；

l  当界面内容凌驾表现地区时，以浮动层的情势表现；

 

另有，关于用户的感官而言，屏幕对角线相交的地位是用户直视的地方，而页面正上方四分之一处为易吸援用户留意力的地位，以是在安排页面时要留意使用这两个地位。

要求：

l  父页面或主页面的中心地位应该设计在对角线核心左近；

l  子页面的地位应该接近主窗体的左上角或正中；

l  必要多个子页面弹出时，应该顺次向右下方偏移，以表现窗体出题目为宜；

l  在页面上方四分之一处安排用户的logo、次要功效导航和一些体系操纵功效；

 

1.1.1.2    页面丑化

界面应该巨细合适美学看法，觉得和谐安宁，能在无效的范畴内吸援用户的留意力。

发起和要求：

l  长宽靠近黄金点比例，切忌长宽比例失调、或宽度凌驾长度；

l  结构要公道，不宜过于麋集，也不克不及过于空阔，公道的使用空间；

l  统一页面上的按钮巨细应该分歧，差别页面的按钮巨细只管即便相近，按钮上忌用太长的称号；

l  按钮的巨细要与界面的巨细和空间要和谐；

l  制止空阔的界面上安排很大的按钮；

l  安排完控件后界面不该有很大的空缺地位；

l  字体的巨细要与界面的巨细比例和谐， 通常利用的字体12px；

l  远景与配景色搭共同理和谐，反差不宜太大，主色要柔和，最好罕用深色，如大红、大绿等，可以借用Windows界面色彩；

l  大型体系常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；

l  界面作风要坚持分歧，字的巨细、颜色、字体要相反，必要艺术处置或有特别要求的地方发起利用图片体现；

l  假如窗体支持最大化或缩小时，窗体上的控件也要随着窗体而缩放；切忌只缩小窗体而疏忽控件的缩放；

l  体系对话框页面不该该支持缩放，即右上角只要封闭功效；

l  通常父窗体支持缩放时，子窗体没有须要缩放；

l  假如能给用户提供自界说界面作风，则由用户本人选择颜色、字体等；

 

1.2    页面字体

页面字体属性的设置在响应的CSS中举行界说，页面笔墨编码要求是UTF-8，在划定字体属性时，必要设置：中文接纳“宋体”，英文接纳“Arial”或“verdana”，CSS文件中的font-family内里必需包管有“宋体”。

关于页面属性中字体巨细的设置，必要内容的差别级别来设置，通常：

n  “Head”中题目笔墨，20px；

n  “Menu”中的导航笔墨，14px；

n  “Sidebar”中的笔墨，12px；

n  “Content”中的注释，12px或14px，题目；

n  “foot”中的笔墨，12px或10px；

 

有关页面字体属性的详细设置拜见附录中的CSS示例。