目前主流分辨率处于1024X768以上,在此状态下,默认使用910的网页宽度。
特殊情况
1.信息量或图片量过大的情况,可以考虑加宽承载,给出两个参考尺寸:
950、990
2.搜索类信息页面,采用自适应屏幕方式
WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head,Main,Foot,有些时候出于布局的需要,在“Head”下面还会加上用于页面功能导航的“Menu”。如图:
图1
对于WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。
页面布局的设计,首先需要考虑用户在浏览web页面时视觉流向上的要求:
图2
从视觉流向上看,用户首先看到的是页面“Head”部分的左面,通常那里是标识这个WEB应用的Logo;然后是陈列WEB应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar”,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应,这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,最后用户的视线落在WEB页面的底部。
以上面图示的布局方式为例,按照通常web页面设计时所遵循的方法,并结合黄金分割比例的方法:
页面的布局中,各个区域大小的定义方式是不同的,请见下图:
图3
在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768的分辨率做为基准,其中:
对于页面布局来说,除了上述要求外,还需要考虑如下要求:
还有,对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。
要求:
界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。
建议和要求:
页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定字体属性时,需要设置:中文采用“宋体”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必须保证有“宋体”。
对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:
WEB页面和其中的表格都应该设定边距,避免页面元素紧贴边沿的情况发生,最小边距值为“3px”,默认边距值应在CSS中设定。
例如:
图4
在WEB页面中,“content”部分是展示页面正文的区域,当段落是由纯文字构成时:
在使用
标签,需要对应有
,并且要求设置margin,使得段落文字的前后左右能够有合适的空白区。可在CSS中设置:p{margin:18px6px6px18px;},分别定义了上、右、下、左的空白区大小。首行缩进时,禁止使用“ ”,而是在CSS中设置text-indent,例如:p{text-indent:2em;}。
在一段完整的文字中请尽量不要使用
来人工干预分段;
对于margin,为了防止由于采用默认的margin值而导致的页面排版问题,推荐所有标签定义为:margin:0;
当采用竖排文字时,推荐使用writing-mode。通过设置两个属性值:lr-tb和tb-rl,并结合direction完成文字竖排,lr-tb指的是文字方向为:左-右、上-下,tb-rl是指上-下、右-左。
Frame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法,切分后的每个窗口内容是通过指向URL来实现的。
Frame的标记是