iMCV7EIAPortal自定义页面定制典型的案例.docx

一、组网需求：iMC UAM从V7版本开始除了改名为EIA外，还新增了很多功能特性，其中包括“终端页面定制功能”，之前版本如果客户有自定义Portal页面的需求，工作量很大，可能还涉及付费定制。而V7 EIA版本开始，提供的“终端页面定制功能”缺省提供了丰富的Portal页面模板，包括PC和PHONE两种终端类型模板，用户可以非常方便地修改模板，包括增加链接、文字格式、背景图片等操作。本文详细介绍了Portal页面定制的操作方法。二、组网图：无。三、配置步骤：Portal页面定制是指以直观的方式去绘制页面。只需要用鼠标进行单击、拖拽等一些简单操作，即可轻松完成页面的绘制。页面定制仅将生成的Portal页面呈现给终端用户，原有的Portal认证逻辑不变。1.? Portal页面定制的两种方式1.1使用EIA的Portal页面定制工具定制Portal页面，详细介绍如下：1)EIA的Portal页面定制工具菜单栏说明上图为EIA的Portal页面工具的菜单栏，说明如下：增加区段单击【增加区段】菜单，会在页面编辑窗口区域增加一个编辑层，操作员可以对此层进行任意编辑。如下图所示：预览预览查看页面生成效果。推荐使用IE10,Chrome,Firefox进行页面定制。注：在IE10以下预览Phone定制页面进不支持模板背景色渐变的风格显示。IE9以下有支持按钮，输入框圆角的显示。不同手机浏览器显示的页面效果有所不同，因此Phone定制页面效果以实际显示在手机屏幕的效果为准。保存保存绘制的页面，当单击绘制窗口中【保存】菜单时，会将定制页面中的内容保存至数据库中，下次打开绘制页面可以继续绘制。发布单击【发布】菜单后，页面中的定制内容将会从数据库中取出保存至相应的jsp文件中并发布到各个服务器。同时注意，定制页面保存只是保存当前定制到数据库中，而发布命令执行的是先保存后发布。设置单击【设置】菜单则弹出设置窗口，如下图所示：“显示服务类型”即是否显示登录框中的服务类型选项。如不显示则要设置“缺省域名”。“显示访客预注册链接”即在认证页面中显示“访客预注册”链接字样。关闭关闭绘制窗口，功能等同于绘制窗口左上角的关闭按钮，在关闭绘制窗口时，系统会弹出确认关闭窗口对话框，确认后才能关闭绘制窗口。2)EIA的Portal页面定制工具工具栏说明单个层的整体编辑工具栏：????????????????????? 进入层的富文本编辑状态，单击后呈被解锁状态，当这个锁状图呈被锁状态才可以对层的整体内容进行编辑。：设置层在屏幕水平居中。：设置层与屏幕等宽。：设置层与屏幕等高。：设置层位于页面的最顶部显示。：设置层位于页面的最底部显示。：设置层位于页面的最左边显示。：置层位于页面的最右边显示。：设置层的层叠顺序，即设置层的z-index值。注：设置层级后，处于上面的区段面板会遮挡处于下层的区段面板，造成点击不到处于下层的面板。：设置层内容的透明度。注：设置透明度为100%后(完全透明)，在访问发布后的定制页面在IE下是能透过透明区段，点击到透明区段下面的其它区段对象，此为IE的bug，在Chrome和Firefox下不存在鼠标穿透透明区段的现象。：设置该层嵌入框架页，点击该工具后会弹出一个链接窗口，要求输入链接地址，iframe的主要作用是显示你输入的网址的内容。：设置层的背景颜色，背景颜色的设置除了可以选择颜色面板中提供的颜色之外，还可以在颜色面板的“#”号后面输入相对应的颜色值进行颜色设置，如果选择none则为透明色。如图所示颜色面板:：设置层的背景图片。若我们准备的图片还没有上传到图片列表中，则我们可以点击图片列表中“增加图片”链接去上传图片，完成后就可以在图片列表中看到我们上传的图片；：设置层的背景图片如何铺排。二级菜单如图所示:铺排方式： 无背景 :　 背景图不显示 横向纵向平铺 :　 默认值。背景图像在纵向和横向上平铺 不平铺 :　 背景图像不平铺 横向平铺 :　 背景图像仅在横向上平铺 纵向平铺 :　 背景图像仅在纵向上平铺 ：设置层的边框宽度、样式、及颜色。二级菜单如图所示:样式：设置边框样式，none为无边框样式，边框样式的选择项所图所示：宽度：设置边框宽度，可以根据需要设置边框的宽度。边框宽度选项如图所示：颜色：设置边框颜色，边框颜色设置和背景色的设置方法一样，也是在弹出的颜色面板中进行设置。也可以自己输入颜色值进行设置。：设置层的全部文本内容的行间距。菜单项如图所示：：层内部文本统一设置字体，对在富文本编辑状态下已设置字体的文本无效。：层内部文本统一设置字号，对在富文本编辑状态下已设置字号的文本无效。注：在调整定制页面中按钮字号大小时，可能出现按钮文本被遮挡显示不完整的现象。此时可以通过调整文本行间距的方式，使得按钮文字完整并垂直居中显示。：层内