`
zhaohaolin
  • 浏览: 1012618 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

WEB界面开发规范(转)

    博客分类:
  • JAVA
 
阅读更多

页面设计规则

页面命名规则

1、每个功能页面在系统中配置菜单时统一使用index.jspindex.html。例如客户管理配置的URLhttp://Server:Port/cc/custmgr/index.jsp

2、每个页面的title必须设置为和菜单配置中相同的中文,例如在菜单项中配置为“客户管理”,则此页面的title也要设置为“客户管理”。

3、对于JSP页面都需要在页面的最开始部分增加以下语句

<%@ page contentType="text/html; charset=UTF-8" %>

4、对于HTML页面都需要在页面的最开始部分增加以下语句

<meta http-equiv="Content-Language" content="zh-cn">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

5、对于页面中控件的属性设置都需要用双引号包括起来。

控件命名规则

页面编码过程中用到的所有控件命名都需要遵循相应规则,方便程序的可读性。采用控件类型缩写前缀(小写)+英文单词(第一个字母大写)的方法来命名每一个控件。具体规则如下:

控件类型

前缀

Button

btn

Form

frm

Select

sel

TextArea

txt

Input

ipt

Image

img

DIV

div


变量定义规则

页面编码过程中用到的所有变量定义都需要遵循相应规则,方便程序的可读性。采用数据类型缩写前缀(小写)+英文单词(第一个字母大写)的方法来命名每一个变量。具体规则如下:


 

数据类型

前缀

整数

i

小数

f

字符

s

布尔

b

日期

d

数组

arr


 

函数定义规则

页面编码过程中用到的所有函数定义都需要遵循相应规则,方便程序的可读性。采用前缀(fuc+英文单词(第一个字母大写)的方法来命名每一个函数。

例如:fucAcceptOrder


 

CSS文件使用

  • 页面的规范

关键字

说明

body

页面内容基本样式

  • 表格的规范

关键字

说明

table

表格的基本样式

  • 层的规范


 

关键字

说明

div

层的基本样式

  • 链接的规范


 

关键字

说明

a

超链接的基本样式


 

  • DataGrid的规范

关键字

说明

table.datatable

数据表的基本样式

table.datatable thead

数据表的页眉样式

table.datatable tbody

数据表的表格体样式

table.datatable tfoot

数据表的页脚样式

table.datatable tr.row_odd

数据表的奇数行样式

table.datatable tr.row_even

数据表的偶数样式

table.datatable tr.row_selected

数据表的选中行样式

table.datatable tr.row_active

数据表的当前激活表格的选中行样式

table.datatable td.indicate

数据表的指示器样式

  • 下拉表格的规范

关键字

说明

table.dropdowntable

下拉表格的基本样式

table.dropdowntable thead

下拉表格的页眉样式

table.dropdowntable tbody

下拉表格的表格体样式

table.dropdowntable tfoot

下拉表格的页脚样式

table.dropdowntable tr.row_odd

下拉表格的奇数行样式

table.dropdowntable tr.row_even

下拉表格的偶数行样式

table.dropdowntable tr.row_selected

下拉表格的选中行样式

  • 编辑框


 

关键字

说明

.editor

编辑框的基本样式

.editor_active

激活的编辑框的基本样式

  • 按钮

关键字

说明

.button

按钮的基本样式

.button_down

被按下按钮的基本样式

  • 数据导航条控件

关键字

说明

table.datapilot

数据导航条的基本样式

  • 树状列表控件

关键字

说明

table.tree

树状列表的基本样式

table.tree tr.row_odd

树状列表奇数行的基本样式

table.tree tr.row_even

树状列表偶数行的基本样式

table.tree tr.row_selected

树状列表当前行的基本样式

table.tree tr.row_rightclick

树状列表的响应当前鼠标右击的行基本样式

table.tree .expandbutton

树状列表展开按钮的基本样式

table.tree .icon

树状列表的图标样式

  • 字段标题控件

关键字

说明

.fieldlabel

字段标题的样式

  • 数据标签控件

关键字

说明

.datalabel

数据标签的基本样式

  • 标签页控件

关键字

说明

.tabset

标签页的基本样式

.tab

标签页中的单个标签的样式

  • 菜单控件

关键字

说明

table.menu

菜单的基本样式

table.menu tr

菜单行的基本样式

table.menu tr.row_selected

菜单选中行的基本样式

table.menu tr.row_disabled

菜单无效行的基本样式

 

  • 菜单工具条控件

关键字

说明

table.menubar

菜单工具条的基本样式

table.menubar .button

菜单工具条中按钮的基本样式

table.menubar .button_active

菜单工具条中当前按钮的基本样式

table.menubar .button_hot

菜单工具条相应鼠标的按钮的基本样式

  • 下拉选单的边框控件

关键字

说明

.dropdown_frame

下拉选单的边框的样式

  • 日历控件

关键字

说明

.calendar

日历控件的基本样式

.calendar .title

日历控件页眉的基本样式

.calendar .footer

日历控件页脚的基本样式

.calendar .cell_day

日历控件日期单元格的基本样式

.calendar .cell_selected

日历控件当前单元格的基本样式

.calendar .cell_trailing

日历中前月和后月的日期单元格的基本样式


<!--EndFragment-->
分享到:
评论

相关推荐

    WEB界面开发规范[总结].pdf

    《WEB界面开发规范详解》 在软件开发领域,特别是Web应用开发中,界面设计与实现的规范至关重要。它不仅影响着用户体验,也关乎代码的可维护性和团队协作效率。本篇将深入探讨WEB界面开发的一些关键规范,涵盖页面...

    Web界面设计规范(Web Form的UI设计)

    界面设计的目的是为了使最终设计出来的 Web 界面风格一致化,提高开发者之间的协作效率,减少开发时间和成本,提高用户体验。但是,随着 Web 界面的发展,界面设计的重要性也日益增加。因此,制定一份完整的界面设计...

    OA界面开发规范OA界面开发规范

    《OA界面开发规范》 在信息化时代,OA(Office Automation)系统的界面开发规范显得尤为重要,它不仅关乎用户体验,还直接影响到工作效率和系统易用性。本文档主要针对凯欣达协同办公自动化管理系统_WEBOA的界面...

    WEB界面开发规范--更好的开发web应用程序 

    综上所述,良好的Web界面开发规范能够确保代码的整洁、可读性和一致性,从而提升开发效率,减少出错概率,并为用户提供更佳的交互体验。遵循这些规则,开发者能够更好地组织和管理他们的代码,创建出高效、易用的Web...

    日企软件工程师Web界面设计规范

    该规范适用于所有参与Web界面开发的软件工程师,包括前端开发者、UI设计师以及项目管理者。无论是开发企业内部应用还是对外发布的公共平台,都需要遵循这些规范。 三、文件命名规范 文件命名应清晰、简洁且具有描述...

    Java web开发规范

    Java Web开发规范是软件开发团队在进行Web应用项目时遵循的一系列规则和标准,旨在确保项目的可维护性、可扩展性和一致性。以下是对这个规范的详细解读: 1. **前言**: Java Web开发规范的前言部分强调了制定规范...

    WEB界面标准化开发规范.pdf

    WEB界面标准化开发规范.pdf

    Web应用界面设计规范

    通过建立一套完整的Web界面设计规范体系,可以确保设计的一致性和专业性。 #### 四、界面设计开发流程 - **开发流程概述**:界面设计的开发流程一般包括需求分析、设计草图、原型制作、用户测试等多个阶段。每个...

    WEB部分开发界面编程规范

    本文档《中国移动一级业务运营支撑系统清算中心容灾扩容工程界面编程规范》正是为了指导开发者遵循一套标准的编程和设计原则,从而实现高质量的WEB界面开发。 【开发流程】 开发流程通常包括以下几个关键步骤: 1....

    网管系统WEB界面标准化开发规范.doc

    2. **主要内容及约束范围**:规范的主要内容涵盖了页面设计原则、编码规范、页面布局以及界面元素定义等多个方面,适用于所有的网管系统Web界面开发项目。约束范围包括但不限于界面的视觉样式、交互逻辑、功能实现等...

    网管系统WEB界面标准化开发规范.pdf

    ### 网管系统WEB界面标准化开发规范解析 #### 一、概述 “网管系统WEB界面标准化开发规范”是中国移动福建公司针对其内部网管系统制定的一套详细且全面的技术文档,旨在确保所有相关网管系统具备一致性和标准化的...

    WEB前端开发规范文档

    ### WEB前端开发规范文档知识点详解 #### 一、概述 WEB前端开发规范文档旨在通过制定一系列标准化的操作流程和规范,提升开发效率与质量,确保项目的可持续性和可维护性。该文档详细介绍了WEB前端开发的基本准则、...

    Web应用界面设计规范[整理].pdf

    Web 应用界面设计规范 一、软件界面规范的重要性及其目的 在软件开发过程中,界面设计规范扮演着非常重要的角色。它可以使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以...

    web项目整体开发流程及规范

    为了确保项目的高效、稳定和可持续发展,"web项目整体开发流程及规范"是至关重要的。以下将详细介绍这些方面: 首先,我们需要理解项目开发的生命周期,这通常包括需求分析、设计、编码、测试和维护五个阶段。 1. ...

    开发部web界面设计规范.pdf

    Web界面设计规范是开发部门制定的一套指导原则,旨在确保网站的用户友好性、一致性和易维护性。规范包括了目录结构、命名规则、布局等多个方面,以下是对这些知识点的详细说明: 1. **目录结构规范**: - **目录...

    WEB前端开发规范文档.docx

    **WEB前端开发规范** 规范的目的在于提升开发团队的协作效率,确保后台开发人员能便捷地添加新功能,并使前端开发者在后期的优化和维护中更加高效。为了达到这个目标,前端开发人员必须按照本规范进行页面开发。若...

Global site tag (gtag.js) - Google Analytics