界面主题设计指南

By 天纵国际软件
2019-1-2 0:00:00

界面主题设计指南

界面主题包括三部分组成，登录界面、系统主页、个人门户，这三个方面系统均提供了多种风格供选择，用户也可自己修改CSS设计自己个性化主题。下面对这三个方面一一描述：

一、登录界面

在“系统管理-系统设置”中选择登录界面样式，有三种样式供选择：

0-右置

1-中间

2-花式

以上三种布局方式用户可以通过修改CSS和图片文件，演变成其他各种个性化样式，加入自己公司的LOGO，LOGO图片文件存放在WEB目录下files\images文件夹中。

二、系统主页

用户可通过更改图标和CSS文件修改界面主题，界面样式基本存放在WEB目录下Skins文件夹中，APP的样式文件存放在APP目录下css、images两个文件夹中。

系统提供了以下几种界面方案供选择，用户可以在“系统管理-系统设置-界面风格”中进行选择。下面介绍这几个界面方案的使用。也可以在角色管理和用户管理中去设置界面风格，系统按用户-角色-系统的顺序去比较界面风格，如果用户自定义了自己的主页风格或URL，则按用户选择的主页，如果没有，去角色设置去找，如果角色中也没设置，那就用系统设置的主页。这样用户可以根据自己的喜好和自己电脑的分辨率去设置自己的主页风格。

1-简洁图标式

将菜单收缩起来，以扩大操作界面大小，此方案为默认界面方案，界面如下：

左侧是控制面板，上面几个按钮是日常事务类，如我的主页、内部邮件、工作流、账户管理、系统管理、帮助。左侧底端一个按钮为业务菜单按钮，点击展出业务系统菜单面板。

2-滑动隔板式

此样式同OUTLOOK控制面板，左侧是隔板样式展示菜单，此样式适用于只有一个系统的情况，菜单只有两层，且分辨率在1366*768以上的屏幕。

3-TAB标签式

此样式通过TAB标签控制菜单，菜单只有一层的情况，如果是两层，也可以，但是不太观。此界面方案建议分辨率在1366*768以上。界面如下：

4-左侧树形式

此样式通过树控制菜单，可以适应任意层次的模块结构。此界面方案建议分辨率在1366*768以上。界面如下：

5-花式界面方案

此样式分上下左右几个部分，虽然操作界面比以上几种小了点，但可以自己设置界面背景，加强美观，此样式适合那些对界面美观有特殊要求的客户，可以用于2-3层次的模块结构。如果是3层，则为多系统，需要在“开发平台-系统设置”中选择“此平台上有多个系统”选项。此界面方案建议分辨率在1366*768以上。界面如下：

如果是多个系统，左上侧LOGO下有一个切换系统的按钮，点击切换到其他系统中。左侧控制面板可以收缩起来，以扩大操作界面，几个日常事务按钮放到了右上角。

此界面方案可以通过更改样式文件更换不同风格。下面讲几个主要用到的文件及修改方法。

1．styleindex5.css是主页样式文件，以此可以修改背景图片和背景色、字体色。

2．datamanager.css是数据管理界面的框架样式，可以修改标题栏背景色以配合主题整体色调。主要要修改的元素为famheader、fambox、fam，可以修改其背景色或改为背景图片。

3.editformtable.css是数据编辑界面的框架样式，可以修改标题栏背景色以配合主题整体色调。主要要修改的元素为editfamheader、editfamheadernoline，可以修改其背景色或改为背景图片。

4. sxdivstyles.css是数据管理界面的框架样式，可以修改标题栏背景色以配合主题整体色调。主要要修改的元素为head，可以修改其背景色或改为背景图片。

除了上面默认的黑色调以外，系统还做了红、蓝、绿、冬雪、节日、党政六种色调样式，色调的样式文件分别为styleindex5_red.css、styleindex5_blue.css、styleindex5_green.css、styleindex5_winter.css、styleindex5_festival.css、styleindex5_party.css。可通过将文件名修改为styleindex5.css，替换默认的styleindex5.css文件进行引用。下面是其他三种色调的界面图片。

a.金秋主题(红)

b.科技主题（蓝）

c.春天主题（绿）

d.冬天主题

e.节日主题

f.党政主题

6-自定义界面方案

如果以上界面样式均不是你想要的，你可以自已设计框架页，并在“开发平台-系统设计”中将你设计的页面URL填上。下面有几组导航可供参考。

a.图标式流程导航

b.流程图式导航

c.WIN8风格磁贴式导航

以上三种方式制作代码见“自定义导航参考代码”，开发者可直接修改这些代码使用。

三、个人门户

个人门户是指登录WEB系统后第一个页面，有于存放当前用户急需办理的事务及工作提醒。天纵智能开发平台提供了多种个人门户方案供用户选择，用户也可自己设计个人门户页面接入进来。

1引用个人门户的方法

在“系统管理-基础管理-系统设置”的“自定义主页URL”中设置默认个人门户页面，直接将网页URL填入即可，空出不填，则为默认的微博式个人主页，如下图：

也可在角色管理中为各个角色设置个性化门户页面。进入“系统管理-权限管理-角色管理”，在“自定义门户页”中设置。
如果想更细致地设置个人门户，也可为每个用户设置个人门户，进入“系统管理-权限管理-用户管理”，在“自定义门户页”中设置。

个人门户引用顺序是，先找是否为此用户设置了个人门户，如果没，找此用户所属角色是否设置了角色门户，如果也没有，则采用整个系统的门户页面。

2平台提供的几种个人门户页面样式及使用方法

除了上面默认个人门户页面以外，平台还提供了另外几种个人门户界面供用户选择。

1）微博式列表+书签+上下滚动公告
引用URL为home2.aspx

此方案在默认方案基础上，右侧加上了两个自定义书签和一个滚动公告条，这几个自定义的地方均可自定数据源进行数据绑定，样式和图片也可以自行修改。此页面名称home2.aspx存放在WEB目录下common文件夹下，用户可以用记事本打开进行修改。
如果你的SQL语句中要引用系统参数，此页面后台提供了以下参数供调用，用户可以通过参数方式调用，系统提供参数如下：
$UserID：当前用户名，如果用户名和员工编号相同，也就是员工工号。
$UserName：当前用户姓名。
$UserDept：当时用户部门编号。
$UserDepts：当前用户部门及其下属部门，用“部门 IN ($UserDepts)”方式调用。
$UserDuty：当时用户职务编号。
$UserRole：当前用户系统角色。
$UserCompany：公司名

数据源可以直接用前端方式设置，可参考例子中的设置方式，如：
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:connstr %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 8 FID,LEFT(TITLE,13) AS TITLE FROM SITE_CMS WHERE CATEGORY IN (SELECT CNAME FROM SITE_MAP WHERE PARENTID='5') ORDER BY DATE_1 DESC"
runat="server"></asp:SqlDataSource>
数据库连接读取web.config中的连接connstr。

在自定义的数据中如果要弹出数据查看页面，有两种方式，一种是弹出一个新页面，另一种是弹出一个隐式DIV页面，象home2.aspx公告的例子就是这种，这时可以通过:
<a href='#' onclick="MyForm('viewform.aspx?tn=oa_news&id=<%# Eval("ID")%>');return false;" target="_blank"><%#Eval("F01")%>...</a>
这种方式引用。

以上数据源及弹出页面等设计方法对后面门户样式或你以后的自定义设计时均适用。

2）多书签式门户
引用URL为home3.aspx

标签图片源文件见本文件之“个人门户图片\box_220”文件夹，用户可以修改这些图片制作自己的标签。
数据源及弹出页面等设计方法同上。