方案简介：
为规范公司软件系统界面，为用户提供整体统一的界面方案，强化公司形象，并带给用户丰富的软件使用体验，制作系统主题文件规范方案。
本方案以B/S架构的软件系统和框架式的界面组织方案为模版进行系统主题文件的说明以及规范。
一、界面整体架构
二、主题各文件组织方案
四、界面各元素以及各元素之间样式定义
正文：
一、界面整体架构
在通用的形式下，公司软件系统界面架构采取两栏式布局，如图：
上部为head区，其中包括banner与navigator，其中banner区一般放置系统标题与插件下载图标，navigator为主导航区。
中间内容为两栏式布局，在首页上根据系统的不同而不同，而在二级页面上左边部分为二级导航区，右边部分为主内容区。
下部为foot区，以放置建议使用方式为主。
二、主题各文件组织方案（分条列出）
1、系统用户界面部分以主题方式存放，不建议在主题之外的文件中应用样式与布局代
码。如果有特殊样式为灵活定义，在页面中定义样式前应注释出为页面中哪一元素定义样式。
2、为了带给用户更好的使用体验并形成统一的产品界面风格，系统分为多个主题方案，给用户提供不同的选择方式。
3、系统每个主题文件夹下包含至少六个文件（文件夹），分别为images文件夹、、common.css界面通用样式文件、main.css主界面样式文件、subpage.css二级界面布局文件、common.skin普通控件样式文件和custom.skin定制样式文件。
4、因为我们的软件系统框架明显，并且页面的分级比较简单。因此采用按页面的级别来定义个页面样式。因此将样式文件分为三个，分别为commom.css，main.css，subpage.css。
5、可以单独定义某一页面中的某些元素的样式，但这些定义应该单独列出并放置在主题文件夹下。
6、 images文件夹 作为存放图片和flash的文件夹，为了优化系统页面载入速度和减少引用错误，其中图片除所包含颜色信息较多且要求显示效果较高时以 .jpg 格式存放以外，其余全部必须以 .gif 格式存放。Flash以 .swf 格式存放。
7、 commom.css 作为界面通用元素样式定义文件，文件内容为系统各页面通用元素的定义，例如链接样式、系统字体和背景等定义。
8、 main.css 作为系统初始界面框架元素样式定义文件。
9、 subpage.css 作为二级页面中各元素的定义文件。
10、common.skin 作为非定制化控件样式定义专用文件。
11、custom.skin 作为定制化控件样式定义专用文件。
三、注释及css代码书写规范
1、注释规范
1）css文件开头部分应添加注释如下：
/*
姓名 日期
********************************************
******* css文件所定义的页面名字 *******
********************************************
*/
2）css文件内部组织形式
css定义时，整体性元素和块级元素分开定义，并均在各级元素定义时加入注释。
实例如下：
/*-----------------------
主体部分
-----------------------*/
selector{property: value}
/*-----------------------
块级部分
-----------------------*/
/*-----------------------
块名称
-----------------------*/
3）各选择符注释示例
/*---------------选择符所定义样式元素名字-----------------------*/
selector{property: value}
如果某元素是专门为某一页面设计布局，则应在定义之前加入注释。
2、css代码书写示例
selector
{
property: value；
}
3、尽量用多维选择符定义样式来取代给每一个元素都赋给ID，以减少ID的复杂度，并同时使css文件更易读。
四、界面各元素以及各元素之间样式定义
元素按照由整体到细节的进行定义，同时按照文件组织方式的形式进行分类。
1、 commom.css 界面通用元素样式定义文件
此文件为界面通用元素样式定义文件，系统中的一些通用的元素样式定义建议放在
此文件中。在系统中每一个页面几乎都要调用此样式文件。
常用选择符及其属性：
body：系统默认字体样式（font-size、color、family、weight）以及布局方式（text-indent、align、vertical-align、word-spacing、line-height），背景（background），页面整体在屏幕中的位置（margin）
链接：链接分为三种形式----通用链接、主导航链接和侧导航链接。
在此全部定义。属性有链接字体size、color、family、text-decoration。主导航与侧导航链接还涉及到链接的背景（background）、边框（border）、外间距（margin）。同时链接的样式应分为四次定义，且定义顺序固定为a、a.link、a.visited、a.active、a.hover。
表格：表格大致分为两种形式----展示数据的表格和放置页面中各表单的表格。
展示数据的表格：属性主要有表格边框（border-color、style、width）、表头样式（thead）、表元样式（文字（align、vertical-align、color、size、）、表元间距（margin）、表元内容（padding 、border-collapse））
放置表单表格：在web标准中并不建议将表单的位置属性直接用css定义，相反这时候对于表单的定位来说，表格的作用就很明显。属性主要有边框（border），与其他元素间距（margin），背景（background-color）。
2、main.css 系统初始界面框架元素样式定义文件
系统初始主界面由三大块组成---head头部、page内容部分、foot底部。
1） head头部
head部分分为两块，banner和 glonav。banner部分以标题和背景图片为组织元素，直接定义即可。glonav为主导航，已经在common.css文件中定义。
2） page内容部分
page内容部分根据具体的形式而定，但是在内容部分所需要展示的表格或者gridview都将在common.css和skin文件中定义
3） foot底部
foot底部主要放置一些使用帮助和链接信息。
3、subpage.css 二级页面中各元素的定义文件
二级页面与主页面一样也分为三个部分，其中head与foot的内容一样，不同的是在page内容部分将有两个主要部分，分为sidebar和mainbody。其中sidebar部分的侧导航已经在common.css文件中定义，所以只需要定义sidebar的背景与定位。
mainbody区域放置系统的主要内容。其中以表单和gridview为主，放置表单的表格已经在common.css文件中定义，而表单本身样式的定义则将在skin文件中定义。
4、common.skin 非定制化控件样式定义专用文件
本文件主要定义系统中通用控件样式，包括各种表单和.net提供的各类控件。我们的系统开发中主要用到的控件及其属性如下：
Button：button本身背景图片（background），未选中状态，鼠标滑过状态（hover），点击之后状态（visited）,button的大小可以通过滑动门技术动态控制。
Treeview：常用到的属性主要有层次结构展开的级别数（Expandlevel），当前在树视图控件中选定的树节点（selectednode），背景（color），
GridView：样式定义可参照放置数据的表格的样式定义属性进行定义。
常用表单（Text、Textarea、Radio、Checkbox、Select、Password）：表单的定义包括边框（border-color，width，style，height,），背景（background-color,image）,大小（width,height）,字体（font-color,size,family）。
在表单的定义中，每一个元素的定义中都应该包括表单与其他元素之间的关系，即margin属性定义。
5、custom.skin 定制化控件样式定义专用文件
定制化控件样式定义文件专门定义一些特殊样式。
6、页面中框架元素命名规范（通用）：
类别选择器的定义应该以功能为主，不应以此类别样式为名，防止当类别样式变化时也要相应修改类名
命名方式为
页面整体（Body）：层容器（Container）
页面头部（Head）：主菜单（Menu） Banner（Banner）
内容部分（Page）：侧边栏（SideBar） 主题内容（MainBody）
页面底部（Foot）：页面底部
7、一些通用表单与控件样式建议
表单与控件是系统的主要组成部分，所以表单或者控件的样式的统一规范能够使系统界面风格比较统一，增加可用性。比较重要的几点是：
1 各类型表单之间的间距
2 表单与表述表单内容文字之间的间距
3 包含内容表格的padding
4 表单中在默认状态下应包括提示性文字，这样极大地增加了用户使用系统的可使用性
4671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
