3793697103web页面设计规范

Web页面设计规范编 号：版 本 号：受控状态：作 者：分 发 号： 第 41 页 共 41 页文档修改历史记录文档修改记录日 期版本号更改人更改内容文档审核记录日 期版本号审核人审核意见目 录1引言51.1目的51.2范围51.3缩略术语51.4参考资料52WEB页面框架内容52.1页面框架52.2页面布局62.2.1布局原则62.2.2布局要求62.2.2.1页面分割62.2.2.2页面结构72.2.2.3页面展现82.2.2.4页面美化82.3页面字体92.4边距92.5表格92.6段落排版102.7Frame102.8其他页面元素113页面风格113.1风格分类113.2页面风格应用124WEB页面交互124.1页面元素焦点切换124.1.1信息填写124.1.2鼠标交互响应124.2页面信息交互144.2.1操作结果确认144.2.2其他规则144.3页面信息提示144.4键盘响应支持165WEB页面通用规范175.1一般页面功能175.1.1新增175.1.2修改175.1.3删除175.1.4查询175.1.5取消185.1.6保存185.1.7重置185.1.8返回185.1.9分页185.1.10全选185.2一般页面规则185.2.1默认值185.2.2必填值195.2.3界面传递195.2.4窗口嵌套195.2.5输入框操作195.2.6在线帮助功能195.2.7菜单功能要求205.2.8快捷键功能205.2.9快捷键的限制215.2.10页面的规范性215.2.11系统易用性225.2.12输入安全性要求225.2.13独特性要求235.2.14多窗口的应用与系统资源236页面编程技术使用规范246.1页面元素命名246.2DHTMLx控件256.3Flex控件267页面资源规格说明267.1图标267.2图片267.3多媒体278附录288.1基于DHX的CSS规格示例288.1.1表格CSS示例288.2典型应用的页面示例281 引言1.1 目的本文用于规范我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。1.2 范围本规范适用于公司所有的商业软件产品。1.3 缩略术语DHMLX：web页面的UI控件1.4 参考资料2 WEB页面框架内容2.1 页面框架WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu”。如图：图 12.2 页面布局2.2.1 布局原则对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计，首先需要考虑用户在浏览web页面时视觉流向上的要求：图 2从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu”来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功能导航的，和“Menu”出的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处于页面中心位置的内容部分，最后用户的视线落在WEB页面的底部。2.2.2 布局要求2.2.2.1 页面分割以上面图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：l 首先，将页面按照3*3的方式进行分割，如下图：l 在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；l 在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；l 在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；2.2.2.2 页面结构页面的布局中，各个区域大小的定义方式是不同的，请见下图：图 3在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，以1024*768的分辨率做为基准，其中：l Head区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px，如果有menu区，则调整为？px；l Menu区域，和“head”的配置要求是一样的，宽度按照100%设置，高度结合“head”的高度设置来确定，一般占？px；l Sidebar区域，宽度是结合与“content”之间的黄金切分比例，按照固定像素的方式确定的，一般占？px；高度是按照比例方式来设置的；l Content区域，高度和宽度方向布局都是按照比例方式来设置的；l Foot区域，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px；2.2.2.3 页面展现对于页面布局来说，除了上述要求外，还需要考虑如下要求：l 能自适应1024*768、800*600两种分辨率；l 界面层次不超过3层；l 默认窗口设置下，不应出现水平、垂直滚动条；l 当界面内容超出显示区域时，以浮动层的形式显示；还有，对于用户的感官而言，屏幕对角线相交的位置是用户直视的地方，而页面正上方四分之一处为易吸引用户注意力的位置，所以在放置页面时要注意利用这两个位置。要求：l 父页面或主页面的中心位置应该设计在对角线焦点附近；l 子页面的位置应该靠近主窗体的左上角或正中；l 需要多个子页面弹出时，应该依次向右下方偏移，以显示窗体出标题为宜；l 在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能；2.2.2.4 页面美化界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。建议和要求：l 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度；l 布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；l 同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上忌用太长的名称；l 按钮的大小要与界面的大小和空间要协调；l 避免空旷的界面上放置很大的按钮；l 放置完控件后界面不应有很大的空缺位置；l 字体的大小要与界面的大小比例协调， 通常使用的字体12px；l 前景与背景色搭配合理协调，反差不宜太大，主色要柔和，最好少用深色，如大红、大绿等，可以借用Windows界面色调；l 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；l 界面风格要保持一致，字的大小、颜色、字体要相同，需要艺术处理或有特殊要求的地方建议使用图片表现；l 如果窗体支持最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放；l 系统对话框页面不应该支持缩放，即右上角只有关闭功能；l 通常父窗体支持缩放时，子窗体没有必要缩放；l 如果能给用户提供自定义界面风格，则由用户自己选择颜色、字体等；2.3 页面字体页面字体属性的设置在相应的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示例。2.4 边距WEB页面和其中的表格都应该设定边距，避免页面元素紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。例如：图 42.5 表格对于表格，其属性的设置同样在CSS中进行定义。表格使用最多的情况是显示装在的数据，由于有很多表项需要在页面中完整显示，因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行，这样表格不仅能够将数据完整地显示，而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容，所以为了保证表格的宽度不被挤变形，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以显示，光标停留后，详细内容再在浮动层显示。其他要求：l 表头中的数据应水平/垂直居中对齐。l 表单中内容如为定长，则为居中显示；如为不固定的中英文内容，则为居左显示；如为数值形式，则为居右显示。l 表格的表头应采用不同于表格内容的背景颜色，并要求对比明显；l 表格表头的文字应采用加粗，或不同于表格内容的字体；l 表格中相邻行需要通过两种有一定对比差异的浅色作为背景色；l 各个页面的表格边框风格需要统一，建议设置细边框；l 表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示；l 对于表格的嵌套尽量控制在三层以内，并且禁止使用表格来进行页面布局。有关表格属性的具体设置请参见附录中的CSS示例。2.6 段落排版在WEB页面中，“content”部分是展示页面正文的区域，当段落是由纯文字构成时：l 正文一行字数最好不超过50，首页的标题文字以8-20字为佳。l 行距建议用百分比来定义，常用的两个行距的值是line-height:120%或150%；l 对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。l 文字和背景对比要足够明显，保证最弱文字的可读性。在使用<p>标签，需要对应有</p>，并且要求设置margin，使得段落文字的前后左右能够有合适的空白区。可在CSS中设置：p margin: 18px 6px 6px 18px;，分别定义了上、右、下、左的空白区大小。首行缩进时，禁止使用“&nbsp;”，而是在CSS中设置text-indent，例如：p text-indent: 2em; 。在一段完整的文字中请尽量不要使用<br> 来人工干预分段；对于margin，为了防止由于采用默认的margin值而导致的页面排版问题，推荐所有标签定义为：margin: 0; 当采用竖排文字时，推荐使用writing-mode。通过设置两个属性值：lr-tb和tb-rl，并结合direction完成文字竖排，lr-tb指的是文字方向为：左-右、上-下，tb-rl是指上-下、右-左。2.7 FrameFrame是能够将一个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，表示框架宽度部分边缘所保留的空间，要求设置？2.8 其他页面元素l 按钮，要求按钮上显示的文字能够准确表达功能含义；l 单选框，默认选择一个，和所关联的文字的间距应该在3px；l 多选框，默认全不选，所关联的文字应该能够准确表达选择的含义，和控件的间距应该在3px；l 下拉框，给出默认选择，并且默认选择显示出“默认全部”或“请选择”等文字提示；l 图片，默认为显示出代表图片文件的图标，或是缩略图；l 多媒体，默认为显示出代表多媒体文件的图标；有关这些页面元素的具体属性设置请参见附录中的CSS示例。3 页面风格WEB页面的风格是指WEB页面通过对页面布局、字体、配色、页面元素排列的融合来传达给用户的、含有主观感受。页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进去，从而形成符合特定用户要求的页面风格。3.1 风格分类Web应用的页面风格内容包括：l 布局，不仅仅是系统入口主页的布局，而是所有页面；l 颜色，按照风格主题来设置页面中包含的颜色及其表现；l 页面元素，按照风格主题来确定页面元素的大小、形状和交互响应行为；l 图标，按照风格主题来定制表示各类功能的图标；l 提示窗口，是页面交互的主要形式，需要按照风格主题来定制；具体风格分类的定义，待定。3.2 页面风格应用具体风格应用的定义，待定。4 WEB页面交互4.1 页面元素焦点切换在WEB页面中，为了提高和用户之间的互动，需要在各类页面元素获得焦点和失去焦点的时候，在如下场景中采用页面交互的方法有：4.1.1 信息填写对输入信息验证：如果需要校验填写内容，则需要在输入框失去焦点时进行数据有效性的判断，并在输入框后给出提示。如图：对输入信息提示：在一组需要被验证的数据填写时，如果有必填项，需要在输入框后面给出标志，并对填入的规则加以说明。如图：如果输入框内有默认的文字，当输入框获得焦点时，需要将输入框内的文字处于全选状态。如图：4.1.2 鼠标交互响应对鼠标在页面中所产生的事件进行处理，当页面元素获得焦点、被点击、失去焦点时，则需要控件本身在颜色、大小或形状上的变化给与响应，亦可以添加声音响应。下面是各种情况下的鼠标交互示例：例如：- 按钮：按钮颜色改变、或形状，或字体改变，如图：鼠标放上获得焦点前：鼠标放上获得焦点后：- 链接：字体变粗、或字体变色、或背景变色，如图：鼠标放上获得焦点前：鼠标放上获得焦点后：- 页签：获得焦点的页签颜色变化，或页签的大小和里面的字体变大，如图：鼠标放上获得焦点前：鼠标放上获得焦点后：- 输入框，输入框的边框变色；鼠标放上获得焦点前：鼠标放上获得焦点后：- 表格，表格中行的底色改变；鼠标放上获得焦点前：鼠标放上获得焦点后：- 等待响应：当由于载入大量数据等原因，使得用户需要等待一定时间，需要将鼠标指针的形状变成时间漏斗的形状、或其他表示鼠标不可操作的样子来提醒用户等待。如图：对于我们所使用的有关鼠标交互响应的规范，将结合页面风格在附录中给出说明。4.2 页面信息交互4.2.1 操作结果确认在提交数据，或是载有数据的页面关闭，或其他需要和用户进行确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：l 提示确认输入信息正确：弹出对话框，并将已填写的内容列出，要求用户确认内容的正确性，给出“确定”和“取消”的选择按钮；l 提示确认数据更改是否保存：弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出“是”和“否”的选择按钮；l 提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出“是”和“否”的选择按钮；l 确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除的操作，给出“确定”和“取消”的选择按钮；4.2.2 其他规则对于信息交互过程中，其他需要遵守的规则有：l 重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；l 容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；l 与正在进行的操作无关的按钮应该加以屏蔽，例如：按钮背景为灰色显示；l 对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会；l 非法的输入或操作应有足够的提示说明；l 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待；4.3 页面信息提示在web页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：l 警告信息l 禁止信息l 操作执行成功信息l 操作执行失败信息l 错误信息l 帮助信息l 提示信息这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式，对话框的页面结构如下图：图标区按钮 1按钮 2标题区提示信息区l 标题区：简要给出此次提示信息的性质，例如：警告：操作非法！l 图标区：给出和此次提示信息性质匹配的图标；l 提示信息区：给出此次提示信息的具体内容；l 按钮区：给出供用户进行选择的按钮；对于对话框的背景颜色，要求和系统的整体风格选取的颜色一致，而右上角的操作区只保留关闭一个可操作功能，最小化和最大化的功能将不显示。对应采用的图标的图例为：警告信息：禁止操作信息：操作成功信息：操作失败信息：错误信息：帮助信息：提示信息：提示信息内容要求：l 提示信息中如有标点符号，统一为全角符号；l 提示信息如有主语，统一为您；l 在重要或复杂的操作成功后，给予提示信息；l 有后续操作的操作在成功后，也需给予提示信息，说明当前的状态。l 提示信息不宜太长，宽度应不超过当前窗口宽度的1/2，当超过此比例时，请视具体情况进行换行；l 当功能按钮为图片按钮时，光标停留需给予浮动提示信息；4.4 键盘响应支持由于用户有时候还需要结合键盘进行操作，所以页面需要提供一些简单的键盘支持，例如：“Esc”、“Enter”、“Tab”“Space”，系统应对这些键值作出响应。其中：l Esc，“取消”当前操作；l Enter，“确认”或进行下一步操作或提交；l Tab、或Shift+tab能够在页面元素中按照一定次序切换焦点，遵循从左上至右下的原则；其他快捷键的支持，需要根据项目的实际情况来定义。5 WEB页面通用规范5.1 一般页面功能5.1.1 新增当新增一条或多条记录，要求：l 新增的记录必须排在首页首行。l 提交失败后必须保存用户已经输入的内容，以便再次提交。l 提交时需对主要标识字段进行重复值、空值（空格）判断。l 新增内容提交失败后，须保留用户修改的内容，以便再次修改提交；l 需对主标识字段进行重复值、空值（空格）判断；5.1.2 修改当进行单条或多条记录的修改时，要求：l 如界面存在复选按钮，勾选多条记录进行修改时，每次只能对一条记录进行修改，默认修改内容为第一条的提示信息；l 修改后加载的内容应为的实际内容，而不再为默认值；l 修改完成后须回到原记录所在位置，且刷新显示修改后的值；l 修改内容提交失败后，须保留用户修改的内容，以便再次修改提交；l 在查询条件下修改后返回，如不满足查询条件则不显示；l 需对主标识字段进行重复值、空值（空格）判断；5.1.3 删除当删除一条或多条记录，要求：l 必须有确认删除的提示信息；l 删除成功后刷新，不显示删除的记录；l 删除成功后，返回到原记录所在页面，如果原记录所在页不存在时，则返回上一页。l 当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息；5.1.4 查询当按照条件查询时，要求：l 每次查询后定位到原页面；l 每次查询后保留当前查询条件；l 当查询条件较多时，需要配置“重置”按钮提供使用；l 当未查询到任何记录时，需给予未查找到相关记录的提示信息；l 除了用户明确要求不需要外，需提供模糊查询及组合查询功能；5.1.5 取消当进行取消当前修改并返回时，要求：l 在数据量较多的页面中，当进行了修改后，取消请给予提示；l 取消返回到原记录所在状态；5.1.6 保存当保存内容时，要求：l 当保存所费的时间较长时，需给出保存进度界面的提示；l 须控制不可以重复保存；5.1.7 重置重置是恢复变更前的状态，要求：l 必须保证重置后与初始进入此页面时一致性；5.1.8 返回当需要返回前一个页面时，要求：l 当从一个页面点击按钮或链接进入子页面时，子页面必须提供返回按钮；5.1.9 分页 当需要分页显示数据时，要求：l 当对查询结果进行分页时，分页的同时需要能够执行查询功能；l 当页数较多时，允许输入具体页数进行查询；5.1.10 全选当在一个页面上存在多个同类内容的复选框时，需要提供全选的功能，要求：l 勾选全选，则选中当前页面所有记录；l 去掉当前页面某个记录的勾选，则全选也去掉勾选；l 刷新页面后，自动去掉已勾选的记录及全选的勾选；5.2 一般页面规则5.2.1 默认值各个页面都会存在默认值。要求：l 打开一个新界面，光标默认停留在第一个待输入的文本框中；l 当选择下拉框不存在默认值时，则默认为“请选择”，当存在默认值时，请显示默认值；l 单选按组钮默认值5.2.2 表单元素选择表单元素选择要求主要集中在select,radio：l 性别，5个以下类别列表选择用radio比较合适l 部门列表，用select比较合适5.2.3 必填值对界面必填项的要求：l 界面的必填项必须以红色*号标识出来。l 当必填项没有填写时，可在光标准备移走时，在文本框后以“请输入”红色文字标识；l 当界面排列较紧时，如果必填项没有填，可以通过弹出信息的方式来提示，或者光标移走时弹出，或者最后提交时弹出。但确定后必须停留在第一个待输入的文本框中；5.2.4 界面传递对于程序执行过程中，会出现父窗体与子窗体参数同步传递的情况，规则是：l 当父窗体与子窗体都存在同样的查询条件时，父窗体已输入的查询条件必须被带到子窗体中；l 当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回，但必须刷新父窗体的数据；l 关闭父窗体必须连同子窗体一同关闭；l 子窗体的大小不能超过父窗体，且不要遮住父窗体的主要信息；5.2.5 窗口嵌套针对多层页面窗口的嵌套情况，要求：l 如果存在多层嵌套页面窗口，每层页面窗口弹出时都自动往右下移动一点点，以保证不遮盖上层页面窗口标题为准；l 页面窗口嵌套层次最好不超过3层；5.2.6 输入框操作对于输入框操作的限制，规则是：l 只允许输入数字的输入框需要控制其它字符的输入，或在输入非法值时给予提示，或在输入框内不再捕获非法值；l 只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提示；l 当输入的内容达到了字段的长度限制时，不显示新输入的的数值，并提示不允许再输入，而不是保存后自动截断；l5.2.7 在线帮助功能系统应该提供详尽而可靠的在线帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。要求：l 帮助文档中的性能介绍与说明要与系统性能配套一致；l 更新系统版本时，对作了修改的地方在帮助文档中要做相应的修改；l 操作时要提供及时调用帮助的快捷方式，常用F1；l 在界面上即时调用帮助时，应该能够及时定位到与该操作相对应的帮助位置，也就是说帮助要有即时的针对性；l 最好提供目前流行的联机帮助格式或HTML帮助格式；l 用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助索引；l 如果没有提供软件书面的帮助文档，最好能够有打印帮助的功能；l 在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式；5.2.8 菜单功能要求菜单是界面上最重要的元素，菜单位置按照按功能来组织。要求：l 菜单通常采用“常用-主要-次要-工具-帮助”的位置排列，符合Windows风格的要求；l 常用的有“文件”、“编辑”，“查看”等，需要系统有这些选项；l 下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开；l 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列；l 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边；l 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列；l 菜单深度一般要求最多控制在三层以内；l 对常用的菜单要有快捷命令方式，组合原则见5.2.8；l 最好能够对和正在进行的操作无关的菜单项能够屏蔽，也可采用动态加载方式即只有需要的菜单才显示；l 菜单前的图标不宜太大，与和相应的字高保持一致；l 主菜单的宽度要接近，字数最好不应多于四个；l 主菜单数目不应太多，最好为单排布置；5.2.9 快捷键功能在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在Windows及其应用软件中的快捷键功能大多是一致的，可以根据实际情况考虑实现。要求：l 面向事务的组合有: Ctrl-D 删除、Ctrl-F 寻找、Ctrl H替换、Ctrl-I 插入、Ctrl-N 新记录、Ctrl-S 保存、 Ctrl-O 打开；l 列表: Ctrl-R 、Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件；l 编辑: Ctrl-A全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢复操作；l 文件操作: Ctrl-P 打印；Ctrl-W 关闭；l 系统菜单:Alt-A文件；Alt-E编辑；Alt-T工具；AltW窗口；AltH帮助。l MS Windows保留键: Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认操作 ；Esc 取消按钮/取消操作 ；Shift-F1 上下文相关帮助；l 按钮中：可以根据系统需要而调节，以下只是常用的组合。Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。这些快捷键也可以作为开发中文应用软件的标准，但亦可使用汉语拼音的开头字母；5.2.10 快捷键的限制由于IE本身的一些原因，需要避免一些不必要的错误，故对其进行拦截限制。要求：l 在用户没有提供明确需求情况下，限制F5、IE工具栏、退格键（仅限页面不限输入框）、Ctrl+N的使用；l 根据功能需要，限制右键菜单的使用；5.2.11 页面的规范性通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。规范要求：l 常用菜单要有命令快捷方式。l 完成相同或相近功能的菜单用横线隔开放在同一位置。l 菜单前的图标能直观的代表要完成的操作。l 菜单深度一般要求最多控制在三层以内。l 工具栏要求可以根据用户的要求自己选择定制。l 相同或相近功能的工具栏放在一起。l 工具栏中的每一个按钮要有及时提示信息。l 一条工具栏的长度最长不能超出屏幕宽度。l 工具栏的图标能直观的代表要完成的操作。l 系统常用的工具栏设置默认放置位置。l 工具栏太多时可以考虑使用工具厢。l 工具厢要具有可增减性，由用户自己根据需求定制。l 工具厢的默认总宽度不要超过屏幕宽度的1/5。l 状态条要能显示用户切实需要的信息，常用的有：l 目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。l 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。l 状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。l 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。l 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。右键快捷菜单采用与菜单相同的准则。5.2.12 系统易用性易用性是指页面上的功能遵从惯例，例如：按钮名称易懂，用词准确，并与同一界面上的其他按钮易于区分，能望文知意。这样，使得用户不用查阅帮助就能知道该页面上的功能并进行相关的正确操作。要求：l 打开一个新界面，光标默认停留在第一个待输入的文本框中；l 完成相同或相近功能的按钮放置在一起，减少鼠标移动的距离，常用按钮要支持快捷方式；l 按功能将界面划分局域块，用Frame框括起来，并要有功能说明或标题；l 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能；l 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前，位置也应放在窗口上较醒目的位置；l 同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示；l 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab；l 默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作；l 可写控件检测到非法输入后应给出说明并能自动获得焦点；l 按钮键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式；l 复选框和选项框按选择几率的高底而先后排列；l 复选框和选项框要有默认选项，并支持Tab选择；l 选项数相同时多用选项框而不用下拉列表框；l 界面空间较小时使用下拉框而不用选项框；l 选项数较少时使用选项框，相反使用下拉列表框；l 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼；5.2.13 输入安全性要求在界面上需要建立一些规则来控制输入的出错几率，会大大减少系统因用户人为的错误引起的破坏，开发者应当尽量周全地考虑到各种可能发生的问题，使出错的可能降至最小，例如：当程序出现保护性错误而退出系统，会使用户对软件失去信心，因为这意味着用户要中断思路，并费时费力地重新登录，而且已进行的操作也会因没有存盘而全部丢失。因此需要在页面设计时应对输入按照规则进行校验。要求：l 排除可能会使程序非正常中止的错误；l 应当检查用户录入无效的数据；l 采用相关控件限制用户输入值的种类；l 当用户面临的选择是两个或多个选一时，请采用单选框，而当选择的可能再多一些时，可以采用复选框；l 当选项特别多时，可以采用列表框，下拉式列表框；l 确保未经授权或没有意义的操作不能进行；l 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽；l 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态；l 对一些特殊符号的输入，与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符，并提前给出输入提示；l 对错误操作最好支持可逆性处理，如取消系列操作；l 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作；l 对可能造成等待时间较长的操作应该提供取消功能；l 特殊字符常有；;'"><，'：""、|+=)-(_*&&%$#!，.。?/还有空格；l 在读入用户所输入的信息时，应根据需要选择是否去掉前后空格，例如：有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理；5.2.14 独特性要求如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用要求：l 安装界面上应有单位介绍或产品介绍，并有自己的图标；l 主界面，最好是大多数界面上要有公司图标；l 登录界面上要有本产品的标志，同时包含公司图标；l 帮助菜单的"关于"中应有版权和产品信息；l 公司的系列产品要保持一致的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致；5.2.15 多窗口的应用与系统资源设计良好的软件不仅要有完备的功能，而且要尽可能的占用最低限度的资源，因此在出现多窗口的情况下需要避免下述一些情况。要求：l 在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口；l 在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源；l 关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统；l 尽量防止对系统的独占使用；6 页面编程技术使用规范6.1 页面元素命名在使用javaScript来进行页面动态控制编程时，需要对程序中的页面元素和功能操作的名称引用进行约定：页 头：header 外 套： wrap 页 脚： foot内 容： content页面主体：main容 器： container标 题： title当前的：current主导航： mainnav 顶导航： topnav子导航： subnav 边导航： sidebar 左导航： leftsidebar 右导航： rightsidebar 栏目：column 面包屑： breadcrumb (即页面所处位置导航提示）菜 单：menu 子菜单：submenu 菜单内容：menucontent菜单容量：menucontainer按 钮： button表 单：form页 签：tab 文章列表：list 滚 动：scroll 提示信息：msg 摘 要：summary 标 签：tag标签文字：tagTitle标签内容：tagContent当前标签：tagCurrent/currentTag搜索范围：range图    标：icon当前位置：currentPath列 定 义：column1of3 (三列中的第一列)               column2of3 (三列中的第二列)                column3of3 (三列中的第三列)商 标： label旗 志： logo标 语： banner注 释： note搜 索： search搜索关键字：keyword登 陆： Login注 册：regsiter 热 点：hot 新 闻：news 下 载：download 打 印：print版 权：copyright服 务：service 友情链接：friendlink 版 权：copyright 小技巧：tips 栏目标题：title 加 入：joinus 指 南：guild 服 务：service 状 态：status 投 票：vote 合作伙伴：partner其它相关注意事项1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写，除非一看就明白的单词6.2 DHTMLx控件控件的命名控件的外观属性控件使用规则6.3 Flex控件控件的命名控件的外观属性控件使用规则7 页面资源规格说明7.1 图标图标需要按照用途分类来定义：l 通用类l 业务相关类l 风格类图标应采用矢量图来表示，在创建时需要考虑的属性有：l 色彩l 大小l 形状l 图案l 动作状态建立在统一的资源库中。7.2 图片这里所规范的图片是在WEB应用中使用的预置图片，需要定义图片的属性：l 图片的格式l 图片的尺寸l 图片的分辨率l 图片的内容l 图片的表现方式（ps处理的要求）l 图片的大小建立在统一的资源库中。7.3 多媒体和对图片的要求类似。建立在统一的资源库中。8 附录8.1 基于DHX的CSS规格示例8.1.1 表格CSS示例8.2 典型应用的页面示例-下面是赠送的excel操作练习 不需要的下载后可以编辑删除（Excel 2003部分）第一章 公式和函数l （1）打开当前试题目录下文件excel-10.xls；（2）利用函数计算每个人各阶段总成绩，并利用函数计算各阶段的平均成绩；（3）“平均成绩”行数字格式都为带一位小数（例如0.0）格式；（4）同名存盘。步骤：n 文件在各阶段总成绩单元格内，点插入，点函数，在对话框中选择求和函数“SUM”，在对话中Number1内点右侧的按钮，将出现另外一个对话框，在文件中选择需要求和的单元格，然后点该对话框的右侧按钮，点确定（完成一个总成绩求和后，利用填充柄完成其他的总成绩求和，或者重复上面的顺序）在平均成绩单元格内，点插入，点函数，选择算术平均值函数AVERAGE，出现对话框后，采用求和时的相同方法，完成操作选中平均成绩行，点右键点设置单元格，点数字，在分类项下点数值，设小数位为1，n 确定保存l （1）打开当前试题目录下文件excel-13.xls；（2）根据工作表中给定数据，按“合计=交通费+住宿费+补助”公式计算“合计”数，并计算交通费、住宿费和补助的合计数；（3）所有数字以单元格格式中货币类的“￥”货币符号、小数点后2位数表现（如：￥2,115.00格式）；（4）同名存盘。打开当前试题目录下文件excel-13.xls在合计下的一个单元格内输入“=交通费（在该行的单元格，假如说是E3）+住宿费（同上）+补助（同上）”，回车（其他的合计可以采用填充柄完成，或者重复上面的顺序）利用求和函数，参考1中的方法完成交通费、住宿费和补助的合计选择文件中的所有数字单元格，点右键，点设置单元格格式，点数字，点货币，选择货币符号为“￥”，设置小数点后为2位，确定保存文件本题完成l （1）打开当前试题目录下文件excel-2.xls；（2）根据工作表中数据，计算“总成绩”列的数据。总成绩=一阶段成绩×0.3+二阶段成绩×0.3+三阶段成绩×0.4；（3）“总成绩”列数据格式为小数点后2位小数（例：6.20）；（4）同名存盘。打开当前试题目录下文件excel-2.xls在总成绩下的一个单元格内输入“=一阶段成绩（在该行的单元格，假如说是E3）*0.3+住宿费（同上）*0.3+补助（同上）*0.4”，回车（其他的合计可以采用填充柄完成，或者重复上面的顺序）选中总成绩列的数据单元格，点右键，点设置单元格格式，点数字，点数值，设置小数点后为2位，确定保存文件本题完成l （1）打开当前试题目录下文件excel-3.xls；（2）计算“审定费”和“税后款”，“审定费=全书字数÷1000×3，税后款=审定费-审定费×5%”；（3）利用菜单将“审定费”和“税后款”列格式设置为货币类的“￥”货币符号、小数点1位（例￥1,280.0）；（4）同名存盘。打开当前试题目录下文件excel-3.xls在审定费下的一个单元格内输入“=全书字数（在该行的单元格，假如说是E3）/1000*3”，回车（其他的审定费可以采用填充柄完成，或者重复上面的顺序）在税后款下的一个单元格内输入“=审定费（在该行的单元格，假如说是F3）-审定费*5%”，回车（其他的税后款可以采用填充柄完成，或者重复上面的顺序）选中审定费及税后款列的数据单元格，点右键，点设置单元格格式，点货币，选择货币符号“￥”，设置小数点后为1位，确定保存文件本题完成l （1）打开当前试题目录下文件excel-8.xls；（2）利用函数计算“总成绩”，利用公式“平均成绩=总成绩÷3”来计算“平均成绩”；（3）同名存盘。打开当前试题目录下文件excel-8.xls在总成绩下的一个单元格，点插入，点函数，在对话框中选求和函数“SUM”，在对话中Number1内点右侧的按钮，将出现另外一个对话框，在文件中选择需要求和的单元格，然后点该对话框的右侧按钮，点确定（完成一个总成绩求和后，利用填充柄完成其他的总成绩求和，或者重复上面的顺序在平均成绩下的一个单元格内，输入“=平均成绩（在该行的单元格，假如说是B3）/3”，回车（其他平均成绩可以采用填充柄完成，或者重复上面的顺序）保存文件本题完成l （1）打开当前试题目录下文件excel-1.xls；（2）利用公式计算每个项目的“合计”；（3）“合计”列数据的格式和其它数据的格式相同；（4）同名存盘。打开当前试题目录下文件excel-1.xls在合计下的一个单元格，点插入，点函数，在对话框中选求和函数“SUM”，在对话中Number1内点右侧的按钮，将出现另外一个对话框，在文件中选择需要求和的单元格，然后点该对话框的右侧按钮，点确定（完成一个总成绩求和后，利用填充柄完成其他的总成绩求和，或者重复上面的顺序利用格式刷将合计的列的数据格式刷成与其他数据格式相同的格式（使用格式刷的方法是，先选中合计列外的其他任意一个单元格，点格式刷，然后再点需要刷成该样格式的单元格即可）保存文件本题完成l （1）打开当前试题目录下文件excel-6.xls；（2）计算出“净资产收益率”，净资产收益率=净利润÷净资产总额；（3）“净资产收益率”行以保留三位小数的百分数形式表现（如：32.310%）；（4）同名存盘。打开当前试题目录下文件excel-6.xls在净资产收益率下的一个单元格，输入“=净利润（在该行的单元格，假如说是B3）/净资产总额”，回车（完成一个单元格后，可以利用填充柄完成其他的单元格的操作，或者重复上面的顺序）选中净资产收益率列下的数据单元格，点右键，点设置单元格格式，点数字，单百分比，将小数位数设为3位，确定保存文件本题完成l （1）打开当前试题目录下文件excel-7.xls；（2）分别利用函数计算出“总成绩”、“平均成绩”；（3）平均成绩设置带两位小数格式（例如：78.00）；（4）同名存盘。打开当前试题目录下的excel-7.xls文件在总成绩对应的单元格内，点插入，点函数，在对话框中选择求和函数“SUM”，在对话中Number1内点右侧的按钮，将出现另外一个对话框，在文件中选择需要求和的单元格，然后点该对话框的右侧按钮，点确定（如果有多个总成绩项，完成一个总成绩求和后，利用填充柄完成其他的总成绩求和，或者重复上面的顺序）在平均成绩对应的单元格内，点插入，点函数，选择算术平均值函数AVERAGE，出现对话框后，采用求和时的相同方法，完成操作选中平均成绩对应的单元格，点右键，点设置单元格，点数字，点数值，设小数位为2，确定保存文件本题完成l （1）打开当前试题目录下文件excel-16.xls；（2）计算出“全套优惠价”，公式为：全套优惠价裸机价+入网费-送话费；（3）所有数字都以单元格格式中货币类的“￥”货币符号、小数点后1位小数表现（如：￥1,450.00）；（4）同名存盘。打开当前试题目录下文件excel-16.xls在全套优惠价对应的单元格，输入“=全套优惠价裸机价（在该行的单元格，假如说是B3）+入网费（同上）-送话费”，回车（如果有多个全套优惠价项，可以利用填充柄完成，也可以重复上面的顺序）选中所有的数字单元格，点右键，点设置单元格格式，点数字，点货币，选择货币符号为“￥”，设小数位为2位，确定保存文件本题完成l （1）打开当前试题目录下文件excel-71.xls；（2）利用函数计算奖金项的值，公式是“满工作量为40，满工作量的奖金为800元，工作量不足的奖金为600元”；（3）利用公式计算实发工资项的值，公式是“实发工资为基本工资加奖金，再减去住房基金和保险费”；（4）同名存盘。打开当前试题目录下文件excel-71.xls选中奖金项下的一个单元格，点插入，点函数，点IF函数，在对话框中，第一个条件格式内输入“该行工作量项下的单元格（比如是E3）>=40（即E3>=40）”，在