UCML Web项目样式说明.doc

UCML Web项目文件样式说明一、 Tab页Tab页的展现主要是由脚本文件TabStrip.htc文件提供的，Tab页的样式和图片的定义也是在TabStrip.htc中定义的，所有如果想要修改Tab页的样式需要修改TabStrip.htc文件。Tab页在主要有三种状态：选中状态、未选中状态、鼠标移到Tab页签上三种状态，所以如果要修改Tab页的样式要设置这三种状态的样式及图片。Tab页在平台自带的三种皮肤下的样式如下图：l 缺省皮肤：Skin/ucmlstd/l Vista皮肤：Skin/Vista/l Office2007皮肤：Skin/Office2007/以上三个Tab页的状态分别是：选中、鼠标移到Tab上及未选中状态。每一个Tab页标签军事有三个图片（左侧图片、文字背景图片、右侧图片）组成，如下图：对应三种状态下图片的路径为：1、选中状态：说明图片路径TabStrip.htc中的变量定义左侧图片皮肤目录/css/newportalgreen_left.gif缺省皮肤是：Skin/ucmlstd/Images/ 03_01.gifTabStripSelectedLeftPic文字背景图片皮肤目录/css/newportalgreen_center.gif缺省皮肤是：Skin/ucmlstd/Images/ 03_02.gifTabStripSelectedBgPic右侧图片皮肤目录/css/newportaltitle_green.gif缺省皮肤是：Skin/ucmlstd/Images/ 03_03.gifTabStripSelectedRightPic2、未选中状态：说明图片路径TabStrip.htc中的变量定义左侧图片皮肤目录/css/newportaltitle_leftgray.gif缺省皮肤是：Skin/ucmlstd/Images/ 02_01.gifTabStripDefaultLeftPic文字背景图片皮肤目录/css/newportaltitle_centergray.gif缺省皮肤是：Skin/ucmlstd/Images/ 02_02.gifTabStripDefaultBgPic右侧图片皮肤目录/css/newportaltitle_grey.gif缺省皮肤是：Skin/ucmlstd/Images/ 02_03.gifTabStripDefaultRightPic3、鼠标移到Tab状态：说明图片路径TabStrip.htc中的变量定义左侧图片皮肤目录/css/newportaltitle_left_w.gif缺省皮肤是：Skin/ucmlstd/Images/ 01_01.gifTabStripHoverLeftPic文字背景图片皮肤目录/css/newportaltitle_center_w.gif缺省皮肤是：Skin/ucmlstd/Images/ 01_02.gifTabStripHoverBgPic右侧图片皮肤目录/css/newportaltitle_grey_w.gif缺省皮肤是：Skin/ucmlstd/Images/ 01_03.gifTabStripHoverRightPic4、Tab页标签空白处背景图片：皮肤目录/css/newportaltitle_bg.gifTab页标签上的文字是直接在TabStrip.htc中定义的，可以在TabStrip.htc中搜索“FONT-SIZE:8pt”，然后修改。二、 ToolBar工具栏按钮ToolBar工具栏的展现主要是由脚本文件toolbar.htc文件提供的，ToolBar工具栏上的控件类型有以下几种：按钮、标签、文本框、下拉框、单选按钮及分隔符等。ToolBar工具栏上的控件类型有以下几种设置：1、 按钮、标签可以在平台中设置文字前显示的图片2、 文本框可以设置款宽度3、 工具栏上的按钮也有三种状态：选中状态、未选中状态、鼠标移到按钮上三种，但是标签、文本框、下拉框及分隔符只有未选中状态的样式，按钮和单选按钮才有三种状态ToolBar工具栏在平台自带的三种皮肤下的样式如下图：l 缺省皮肤：Skin/ucmlstd/l Vista皮肤：Skin/Vista/l Office2007皮肤：Skin/Office2007/ToolBar工具栏的样式调整主要涉及以下位置：下面将依次说明ToolBar工具栏的背景及控件样式调整1、 背景修改：在Vista皮肤和Office2007皮肤下：其背景一幅图片，位于是在“皮肤目录/css/ newportal_toolbar_bg.jpg”在缺省模式下Toolbar背景是在HTC文件中控制，可以搜索：oBody.style.cssText=FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5 , endColorstr=#c6c1c1, GradientType=0);然后修改背景色。2、 ToolBar工具栏前的符号，该符号是在TabStrip.htc中设置的，可以搜索：otd1.innerHTML=+ ; 可以修改颜色3、 ToolBar上的按钮：ToolBar上的按钮的的样式有：选中状态、缺省状态、鼠标移动三种状态，这三种状态的样式均是在文件中设定的，启动缺省模式直接在toolbar.htc文件中设定的，如果修改缺省模式需要直接修改文件；在非缺省皮肤下ToolBar上的按钮下是由样式+图片(图片包括按钮左图片、背景图片、按钮右图片)组成的。定义样式的变量为：按钮缺省样式变量：_BuiltInDefaultStyle按钮选中样式变量：_BuiltInSelectedStyle鼠标移动样式变量：_BuiltInHoverStyle分隔符样式变量：_szSeparatorHorizStyle在非缺省模式皮肤下的图片为：图片位置图片路径图片示例按钮左图片皮肤目录/css/ newportalbutton_leftfinal.jpg按钮背景图片皮肤目录/css/ newportalbutton_middlefinal.jpg按钮右图片皮肤目录/css/ newportalbutton_rightfinal.jpg注意每一个图片均是两种状态，可以参考BPObjectSkinVistacss下的图片来制作，注意图片大小最好和原来保持一致。4、 弹出下拉选择图片(缺省皮肤下没有此设置) ：弹出下拉选择图片是皮肤目录下的“皮肤目录/css/ newportaltoolbarlistbutton.gif”文件。5、 “设置可见按钮”图片(缺省皮肤下没有此设置)：设置可见按钮前的图片是皮肤目录下的“皮肤目录/css/ newportaltoolbarhead.gif”文件，字体颜色及大小可以在TabStrip.htc搜索“newportaltoolbarhead.gif”进行调整。缺省皮肤下是没有此设置。6、 下拉设置(缺省皮肤下没有此设置)下拉选项中的设置大部分是在样式“皮肤目录/css/ toolbarpopupmenu.css”文件中设置的，样式及位置如图(右侧红色部分为样式名称)：附样式文件说明：/*下拉整体样式*/.popupMenuwidth:100%;background-color: #064f66;padding-left: 1px;padding-top: 1px;padding-right: 1px;padding-bottom: 1px;filter:shadow(color=#66aeb7,direction=135); /*下拉选项部分的表格背景色*/.popupMenuTablefilter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#13b7e2, EndColorStr=#056882) Alpha(opacity=120);/*下拉选项部分的单元格选项*/.popupMenuTable TDfont-family:MS Shell Dlg;font-size: 12px;cursor: default;/*下拉选项部分的字体*/ .fontclass color:white;/*下拉选项部分的一行*/.popupMenuRowheight: 21px;background-image:url(NewPortalToolbarpopuponhover_bg.gif);/*设置可见的按钮的单元格*/.popupMenuRowHeaderheight: 23px;background-image:url(NewPortalToolbarpopupheader_bg.jpg)/*鼠标移动*/.popupMenuRowHoverheight: 21px;background-image:url(NewPortalToolbarpopuponhover_bg.gif);background-position:0 21;/*filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#A5B6D4, EndColorStr=#FFFFFF) Alpha(opacity=120);*/.popupMenuSepbackground-color: #A6A6A6;height:1px;width: 100%;position: relative;left: 0px;三、 列表格式列表格式的展现主要是由脚本文件UCMLDBGrid.htc文件提供的，列表格式的全部样式定义均在“皮肤目录/css/ucmlapp.css”中，列表格式主要包括列表背景、列头、数据区域、状态栏三个主要地方，列表格式在三种皮肤下的展现如图：l 缺省皮肤：Skin/ucmlstd/l Vista皮肤：Skin/Vista/l Office2007皮肤：Skin/Office2007/列表格式的样式调整主要涉及以下位置：1、 列头样式列头样式名称为：UCML-Grid-Header。2、 奇数行样式列头样式名称为：UCML-Grid-AltRow。3、 偶数行样式列头样式名称为：UCML-Grid-Row。4、 空白处背景样式空白处的样式也是列表格式的背景样式，样式名称为：UCML-F。5、 状态栏样式列头样式名称为：UCML-GRID-StatusBar。6、 焦点单元格样式列头样式名称为：UCML-FocusCell。7、 列表格式中一些常见控件的样式：文本输入框：样式名称：UCML-ET，但是在程序中控制了它的边框颜色，可以在UCMLDBGrid.htc中搜索“l_oInput.style.border = 2px solid #ffbd69;”，手动修改。四、 编辑和查询视图组件样式编辑格式的展现主要是由脚本文件UCMLEdit.htc文件提供的，编辑格式的全部样式定义均在“皮肤目录/css/ucmlapp.css”中，列表格式编辑格式背景、标签单元格样式、标签文本样式、文本输入单元格、文本输入框(包括Lable、Input、DropDownList、TextArea)样式，如下图：1、 背景样式背景样式包括单元格空白处的背景，样式名称为：UCML-Header。2、 标签单元格样式标签单元格是指里面显示文本（例如字段名称）等所在的单元格的样式，样式名称为：UCML-LabelCell。3、 标签文本样式标签文本是指单元格内文本（例如字段名称）等的样式，样式名称为：UCML-LabelText，注意此处并不能设置文字的颜色及大小，文字的颜色及大小是在页面的aspx源代码中定义的。4、 文本输入单元格文本输入单元格是指控件所在的单元格的样式，样式名称为：UCML-InputCell。5、 文本输入框文本输入框是指控件。包括Lable、Input、DropDownList、TextArea等基本控件，还包括HTML编辑器、日期选择等复合控件，暂时不对复合控件作介绍，只介绍简单控件：控件类型样式名称Lableucml-inputLabelInputucml-inputframeDropDownListUCML-DropDownListTextAreaucml-textareaframe五、 树形视图组件样式树形视图组件的展现主要是由脚本文件treeview.htc文件提供的，树的可调整样式比较少，主要包括列表背景、缺省树节点（非选中节点）、选中节点三个：1、 背景背景的样式文件是“皮肤目录/css/ucmlapp.css”，样式名称是UCML-TreeBody。2、 缺省树节点（非选中节点）节点样式的定义是在脚本文件中定义的，如果调整需要修改treeview.htc文件：Treeview.htc里由下面这行程序控制g_stylesdefaultstyle = strFont + display:inline-block; color: black; text-decoration:none; cursor: hand; overflow:hidden;3、 选中节点Treeview.htc里由下面这行程序控制g_stylesselectedstyle = color: highlighttext; background-color:redhighlight;六、 主页面框架主页面框架主要包括三部分：头部、左侧导航区域、右侧三部分，在下面的两个章节中介绍。七、 主页面头部框架主页面的头部框架是由页面TopMenu.aspx（TopMenu.aspx.cs位于OtherSource中）提供展现。在三种皮肤下的展现如图：l 缺省皮肤：Skin/ucmlstd/l Vista皮肤：Skin/Vista/l Office2007皮肤：Skin/Office2007/下面分别介绍一下三种皮肤下样式及图片的修改：1、 缺省皮肤：Skin/ucmlstd/在缺省皮肤下TopMenu结构比较复杂：1.1左侧的公司LOGO图标是由三部分图片组成：图片位置图片路径左Skin/ucmlstd/images/top_ucml_01.gif中Skin/ucmlstd/images/ logo.gif右Skin/ucmlstd/images/top_ucml_03.gif1.2右侧的产品LOGO区也是由三部分图片组成：图片位置图片路径左Skin/ucmlstd/images/top_ucml_04.gif中Skin/ucmlstd/images/MainTitle_Logo.gif右Skin/ucmlstd/images/top_ucml_05.gif1.3门户入口门户入口区域也是由多部分组成：1.3.1 左侧的样式名称是：main_title，背景图片是：Skin/ucmlstd/images/top_ucml_07.gif1.3.2 右侧的样式背景图片是Skin/ucmlstd/images/top_ucml_08.gif1.3.3 门户入口左侧的所用到的样式文件是Skin/ucmlstd/css/ TopMenu.css，背景图片是：Skin/ucmlstd/css/ tableft6.gif，鼠标移动样式名称为：tabsIdivhover，鼠标离开样式名称为：tabsIdiv1.3.4 门户入口右侧的所用到的样式文件是Skin/ucmlstd/css/ TopMenu.css，背景图片是：Skin/ucmlstd/css/ tabright6.gif，鼠标移动样式名称为：tabsIdivhoverspan，鼠标离开样式名称为：tabsIdivspan门户入口的文字调整可以在Skin/ucmlstd/css/ TopMenu.css中调整。1.4系统信息提示样式名称为：today_welcome，可以在Skin/ucmlstd/css/ucmlapp.css中调整。背景图片是Skinucmlstdcssoffice_ToolBar_Bg.gif1.5系统按钮区域背景图片是Skinucmlstdcssoffice_ToolBar_Bg.gif1.6门户入口下拉菜单模块门户入口下拉菜单模块的样式文件是在Skinucmlstdcsspopupmenu.css中2、 Vista皮肤：Skin/Vista/在Vista皮肤下TopMenu结构为1.1左侧的公司LOGO图标和产品LOGO区是由一个图片组成：SkinVistanewportalnewportalheader.jpg1.2门户入口1.2.1门户入口左侧的所用到的样式文件是Skin/Vista/css/ TopMenu.css，背景图片是：Skin/Vista/css/ tableft6.gif，鼠标移动样式名称为：tabsIdivhover，鼠标离开样式名称为：tabsIdiv1.3.4 门户入口右侧的所用到的样式文件是Skin/Vista/css/ TopMenu.css，背景图片是：Skin/Vista/css/ tabright6.gif，鼠标移动样式名称为：tabsIdivhoverspan，鼠标离开样式名称为：tabsIdivspan门户入口的文字调整可以在Skin/Vista/css/ TopMenu.css中调整。1.3系统信息提示样式名称为：today_welcome，可以在Skin/Vista/css/ucmlapp.css中调整。背景图片是SkinVistacssnewportaltop_middle_bg.jpg1.5系统按钮区域背景图片是SkinVistacssnewportaltop_middle_bg.jpg1.6门户入口下拉菜单模块门户入口下拉菜单模块的样式文件是在SkinVistacsspopupmenu.css中3、 Office2007皮肤：Skin/Office2007/可以参考Vista皮肤的介绍进行修改八、 左侧Outlook导航菜单区域(不包括里面的树形导航)左侧导航菜单区域的页面文件是：outlook