文档介绍：神州商桥网
Web页面设计规范
版本号：
作 者:******@
文档修改历史记录
文档修改记录
日期
版本号
更改人
更改内容
2012/9/21
wanghyi
文档审核记录
日期
版本号
审核人
审核意见
引言 5
目的 5
范围 5
缩略术语 5
参考资料 5
WEB页面框架内容 5
页俑框架 5
页俑布局 6
布局原贝U 6
布局要求 6
页面分割 6
页面结构 7
页面展现 8
页面美化 8
页面字体 9
边距 9
表格 9
段落排版 10
Frame 10
其他页面元素 11
页面风格 11
风格分类 11
页俑风格应用 12
WEB页面交互 12
页俑元素焦点切换 12
信息填写 12
鼠标交互响应 12
13
操作结果确认 13
其他规则 13
页|可信息提不 14
键盘响应支持 16
WEB页面通用规范 16
一般页俑功能 16
新增 16
修改 16
删除 17
查询 17
取消 17
保存 17
重置 17
返回 17
分页 17
全选 18
一般页面规则 18
默认值 18
表单元素选择 18
必填值 18
界俑传递 18
窗口嵌套 19
输入框操作 19
菜单功能要求（此项针对后台管理） 19
快捷键功能（此项针对后台管理） 19
快捷键的限制（此项针对后台管理） 20
网站易用性（此项针对后台管理） 20
页面编程技术使用规范 21
页俑元素命名 21
DHTMLX 控件 22
Flex 控件 23
页面资源规格说明 23
图标 23
图片 23
多媒体 24
附录 25
基于DHX的CSS规格示例 25
表格CSS示例 25
典型应用的页俑示例 25
1引言
本文用于规范“神州商桥网”关于Web页面的设计工作，明确在设计中所要遵循的准 则和方法，Web页面中各个元素的规格要求，确保所实现的Web页面在风格、结构和功能 上的统--，提升网站的外在品质。
本规范适用于“神州商桥网”前台页面和后台页面。
2 WEB页面框架内容
WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head,Main, Foot,有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu”。 如图：
#Head
#Main
#Foot
对于WEB应用来说，页面布局是和Web应用的功能区相对应的，并且对于页面中各个 部分之间的切分比例也需要遵守一定的规则。
页面布局的设计，首先需要考虑用户在浏览Web页面时视觉流向上的要求：
（3） #Foot
图2
从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个 WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu”来用于页面导航；接下来用 户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功能导航的，和“Menu”出 的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处 于页面中心位置的内容部分，最后用户的视线落在WEB页面的底部。
以上面图示的布局方式为例，按照通常Web页面设计时所遵循的方法，并结合黄金分 割比例的方法：
• 首先，将页面按照3*3的方式进行分割，如下图：
在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；
在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩 下的空间留给content区域；
在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；
页面的布局中，各个区域大小的定义方式是不同的，请见下图:
在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，以 1024*768的分辨率做为基准，其中：
• Head区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的固
定像素值来确定的，一般占140px,如果有' men