对于表格,其属性的设置同样在CSS中进行定义。
表格使用最多的情况是显示装在的数据,由于有很多表项需要在页面中完整显示,因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行,这样表格不仅能够将数据完整地显示,而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度,当超出此显示宽度后,以……显示,光标停留后,详细内容再在浮动层显示。
其他要求:
l 表头中的数据应水平/垂直居中对齐。
l 表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;如为数值形式,则为居右显示。
l 表格的表头应采用不同于表格内容的背景颜色,并要求对比明显;
l 表格表头的文字应采用加粗,或不同于表格内容的字体;
l 表格中相邻行需要通过两种有一定对比差异的浅色作为背景色;
l 各个页面的表格边框风格需要统一,建议设置细边框;
l 表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示;
l 对于表格的嵌套尽量控制在三层以内,并且禁止使用表格来进行页面布局。
有关表格属性的具体设置请参见附录中的CSS示例。
在软件外包公司WEB页面中,“content”部分是展示页面正文的区域,当段落是由纯文字构成时:
l 正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
l 行距建议用百分比来定义,常用的两个行距的值是line-height:120%或150%;
l 对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。
l 文字和背景对比要足够明显,保证最弱文字的可读性。
在使用<p>标签,需要对应有</p>,并且要求设置margin,使得段落文字的前后左右能够有合适的空白区。可在CSS中设置:p{ margin: 18px 6px 6px 18px;},分别定义了上、右、下、左的空白区大小。
首行缩进时,禁止使用“ ”,而是在CSS中设置text-indent,例如:p { text-indent: 2em; }。
在一段完整的文字中请尽量不要使用<br> 来人工干预分段;
对于margin,为了防止由于采用默认的margin值而导致的页面排版问题,推荐所有标签定义为:margin: 0;
当采用竖排文字时,推荐使用writing-mode。通过设置两个属性值:lr-tb和tb-rl,并结合direction完成文字竖排,lr-tb指的是文字方向为:左-右、上-下,tb-rl是指上-下、右-左。
Frame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法,切分后的每个窗口内容是通过指向URL来实现的。
Frame的标记是<FRAMESET> <FRAME> ,而在使用Frame时,通常需要将其放在网页入口的html文件中,而不必放入 <BODY> 标记。<FRAMESET> 是用以划分框窗的,每一框窗由一个 <FRAME> 标记所标示,<FRAME>必须在<FRAMESET>范围中使用。
其中:
l <FRAMESET> 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
l <FRAME> 则只是设定某一个框窗内的参数属性。
使用Frame分割页面,需要按照2.1节“页面布局”中所描述的要求来设置<FRAMESET> 和<FRAME>,以完成对页面各个部分合理的切分。
对于<FRAMESET> 和<FRAME>中的一些属性设置,要求有:
l Name,表示Frame的名字,必须有定义;
l Framespacing,表示各个Frame之间空白距离,要求设置为非零,通常设置为5;
l Noresize,表示是否允许使用者通过拖拉改变Frame的大小,要求在Frame设置此参数;
l Scrolling,表示是否要显示卷轴,要求设置为“AUTO”
l Marginhight,表示框架高度部分边缘所保留的空间,要求设置?
l Marginwidth,表示框架宽度部分边缘所保留的空间,要求设置?
l 按钮,要求按钮上显示的文字能够准确表达功能含义;
l 单选框,默认选择一个,和所关联的文字的间距应该在3px;
l 多选框,默认全不选,所关联的文字应该能够准确表达选择的含义,和控件的间距应该在3px;
l 下拉框,给出默认选择,并且默认选择显示出“默认全部”或“请选择”等文字提示;
l 图片,默认为显示出代表图片文件的图标,或是缩略图;
l 多媒体,默认为显示出代表多媒体文件的图标;
有关这些页面元素的具体属性设置请参见附录中的CSS示例。
WEB页面的风格是指WEB页面通过对页面布局、字体、配色、页面元素排列的融合来传达给用户的、含有主观感受。
页面风格的选取除了需要考虑一般的用户感受外,还需要将用户所在环境的因素考虑进去,从而形成符合特定用户要求的页面风格。
Web应用的页面风格内容包括:
l 布局,不仅仅是系统入口主页的布局,而是所有页面;
l 颜色,按照风格主题来设置页面中包含的颜色及其表现;
l 页面元素,按照风格主题来确定页面元素的大小、形状和交互响应行为;
l 图标,按照风格主题来定制表示各类功能的图标;
l 提示窗口,是页面交互的主要形式,需要按照风格主题来定制;
具体风格分类的定义,待定。