Web页面设计规范号：编号：本版受控状态：者：作号：发分文档修改历史记录文档修改记录日期版本号更改人更改内容文档审核记录日期版本号审核人审核意见目录1引言6目的61.1范围61.2缩略术语61.36参考资料1.4WEB页面框架内容26页面框架2.1662.2页面布局62.2.1布局原则2.2.2布局要求72.2.2.1页面分割72.2.2.2页面结构82.2.2.39页面展现2.2.2.410页面美化2.3页面字体11边距2.411表格2.512段落排版132.6132.7Frame其他页面元素2.814页面风格153153.1风格分类页面风格应用153.2页37共页3第4WEB页面交互15164.1页面元素焦点切换4.1.116信息填写4.1.2鼠标交互响应164.2页面信息交互184.2.1操作结果确认184.2.2其他规则18页面信息提示4.319键盘响应支持4.421WEB页面通用规范522一般页面功能5.1225.1.1新增225.1.2修改225.1.3删除225.1.4查询235.1.5取消235.1.6保存235.1.7重置235.1.8返回235.1.9分页235.1.10全选245.2一般页面规则245.2.1默认值245.2.2必填值24页37共页4第5.2.3界面传递2525窗口嵌套5.2.4255.2.5输入框操作5.2.6在线帮助功能255.2.7菜单功能要求265.2.8快捷键功能275.2.9快捷键的限制275.2.10页面的规范性285.2.11系统易用性29305.2.12输入安全性要求5.2.13独特性要求315.2.14多窗口的应用与系统资源3132页面编程技术使用规范632页面元素命名6.1356.2DHTMLx控件356.3控件Flex页面资源规格说明357图标357.1图片7.236多媒体367.3附录837基于DHX的CSS8.1规格示例378.1.1表格CSS示例378.2典型应用的页面示例37页37共页5第引言目的本文用于规范我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。范围本规范适用于公司所有的商业软件产品。缩略术语DHMLX：web页面的UI控件参考资料WEB页面框架内容页面框架WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu”。如图：图1页面布局布局原则页37共页6第对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计，首先需要考虑用户在浏览web页面时视觉流向上的要求：图2从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu”来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功能导航的，和“Menu”出的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处于页面中心位置的内容部分，最后用户的视线落在WEB页面的底部。布局要求页面分割以上面图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：页37共页7第首先，将页面按照3*3的方式进行分割，如下图：在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；页面结构页面的布局中，各个区域大小的定义方式是不同的，请见下图：页37共页8第3图在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，以1024*768的分辨率做为基准，其中：设置，高度采用所占的固定区域，宽度是按照比例方式设置的，宽度按照100%Head；menu区，则调整为？px，如果有像素值来确定的，一般占？px设置，高度结合100%区域，和“head”的配置要求是一样的，宽度按照Menu；”的高度设置来确定，一般占？px“head”之间的黄金切分比例，按照固定像素的方式区域，宽度是结合与“contentSidebarpx；高度是按照比例方式来设置的；确定的，一般占？区域，高度和宽度方向布局都是按照比例方式来设置的；Content设置，高度采用所占的固定像素值来确定的，一般占？100%Foot区域，宽度按照px；页面展...