Portal用户定制页面说明书.doc

文档名称
文档密级

Portal主页定制主要通过两种途径，一种是用户提供完整的主页只需要我们将输入表单嵌入即可；另一种是只对现有H3C默认主页做局部修改。
一 用户指定页面
提供了定制页面index_custom.jsp，该页面仅仅包括认证页面中的输入表单部分（如下图蓝色部分）。当用户指定或提供其认证主页时（如下图三个红色部分），可以将index_custom.jsp页面通过frame框架的方式嵌入到用户页面中。

图1 example.html

如上图例子所示，页面被划分为4个部分，每个部分都是个独立的页面，其中浅蓝色的输入表单部分就是index_custom.jsp，其余部分都为用户指定的页面。所有页面可以通过frame框架组织起来，整个框架的布局可以由用户调整，每框架中每个frame的大小也可以由用户指定。这个框架页面为example.html。
这个例子中将index_custom.jsp嵌入到了example.html，可以用文本编辑器将example.html打开可以看到代码中标签是框架中一个页桢，可以在页桢里嵌入一个独立的子页面（如上图的红色和蓝色的部分）。标签可以包含多个的同时，也可以嵌套多个。

t rows="72,*" cols="*" >

"mainFrame" src="mainFrame.html">

图 2
首先页面被最外层的frameset分为上下两部分，上下两部分的大小由标签中属性rows指定（如图三）。rows="72,*"表示上部分占有72个像素，下半部分占有其余的像素，两部分由逗号分隔，*代表其余的所有值。上半部分嵌入的页面是topFrame.html，其余下半部分还有待分隔。

... ...
... ...
... ...

图3
其次上一步中的下半部分又被一个frameset分为左右两部分（如图4），左右两部分的大小由标签中属性cols指定。cols="310,*"表示左部分占有310个像素，右部分占有其余的像素，两部分由逗号分隔，*代表其余的所有值。左边的子部分仍继续有待分割，右子部分嵌入的页面是mainFrame.html。

... ...
... ...
... ...

图4
最后，上一步中左子部分又被一个frameset分为上下两部分（如图5），上部分占有160像素，下部分占有其余的大小。上部分嵌入的是我们的index_custom.jsp，下部分嵌套的是leftDownFrame.html。

rameset rows="160,*" cols="*" >

图5

1. 这样通过frameset嵌套另一个frame或frameset的方式，就可以将我们的输入表单页面和用户的指定页面组合起来，生成frameset框架页面。
2. 将frame框架页面和用户的指定首页放置到iMC安装目录下\client\web\apps\portal的目录下，需要注意frame框架页面中引用的其余页面用的是相对路径。
例如：如果框架页面example.html，输入表单页面index_custom.jsp，用户的指定页面为clientpage.html，都放在\portal的目录下，则框架页面example.html中对其余页面引用的路径如图6

图6
其中属性frame元素的属性src中的页面路径是相对于“iMC安装目录下\client\web\apps\portal”这个目录的。如果将框架页面example.html放在“iMC安装目录下\client\web\apps\portal\userdir\”目录，用户页面clientpage.html也放在“iMC安装目录下\client\web\apps\portal\userdir\page”目录下，输入表单index_custom.jsp在“iMC安装目录下\client\web\apps\portal”则引用路径如图7

图7
3. 登录iMC配置台，进入Portal服务管理>>Portal设备配置>>端口组信息配置中的默认认证页面改为“uerdir/example.html”（针对上面图7的路径）就可以推出自定义的认证页面

图8
4. Portal服务器中提供了默认的中英文例子
/portal/userindex/template/example1.html:是一个嵌入了index_custom.jsp的中文例子
/portal/userindex/template/example1_en.html:是一个嵌入了index_custom.jsp的英文例子

二 用户修改H3C Portal的默认主页index_default.jsp
如果用户没有提供或指定完整的主页，仅想在我们提供的默认主页做局部的修改，这种情况下Portal服务器允许在特定的地方做一些特定的改动。
H3C Portal的默认主页index_default.jsp的结构如图9所示，红色区域1，2，3，4，5，6为图片，
其中区域2的图片包含两个热区用黄色方框标识，对应到主页中是链接到FAQ和热线部分，蓝色区域是用户输入表单，用于显示用户名密码按钮等元素。

图9
1. 将图片替换为图片
A. 将新的图片放置到iMC安装目录下\client\web\apps\portal\template\images\目录下
B. 用文本编辑工具如dreamweaver或ue打开index_default.jsp，定位到相应位置的标签，将标签中的文件名替换为新图片的文件名，然后再调整相应的图片大小即可，图片大小都以像素为单位。
区域1的标签

区域2的标签
" width="229" height="342" border="0" usemap="#Map">
区域3的标签

区域4的标签

区域5的标签，注意同时替换掉下面两个标签
" width="471" height="153" usemap="#Map1">
g src="<%=Resource.getString("Login_Bottom_Image_5_2", language)%>" width="471" height="153">
区域6的标签

C. 区域2为一张图片，对应FAQ和热线的两个部分含有两个热区，如果替换该页面，同时注意对热区的修改。
2. 热区和链接的修改
A. FAQ和热线的两个部分含有两个热区，用于连接到其他页面，对应为<map>标签元素。
B. 在同一个元素中可包含任意多个元素，嵌套的元素对应一个热区的shape属性用于指定热区的形状，coords属性用与指定热区的位置，href属性用于指定热区链接的页面。coords值的格式取决于shape标签属性的值。其中，rect代表矩形，circle代表圆形，poly代表多边形。如图10

">
<area shape="rect" coords="31,278,191,316" href="">

HREF="/workshop/ccc">
图10
C. 如果用户想在自己的替换图片中增加热区，可以先定义好标签，并且在相应的图片的元素的属性usemap="# yourMap"中引用相应的热区。如果删除热区，删除相应元素属性usemap即可。
3. 用文本替换图片
还可以将区域1，2，3，4，5，6图片的位置替换为文本，但要注意文本的字体，大小，对齐方式和样式等属性。如图例10中红框圈住的部分所示，可以将对应标签元素替换为文本文字。

图10
lass="tDarkred15" align="center">