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打开可以看到代码中<frame>标签是框架中一个页桢，可以在页桢里嵌入一个独立的子页面（如上图的红色和蓝色的部分）。<frameset>标签可以包含多个<frame>的同时，也可以嵌套多个<frameset>。 <html> <head> </head> <frameset rows="72,*" cols="*" > <frame name="topFrame" src="topFrame.html"> <frameset cols="310,*" rows="*"> <frameset rows="160,*" cols="*" > <frame name="leftFrame" src="index_custom.jsp"> <frame name="leftDownFrame" src="leftDownFrame.html"> </frameset> <frame name="mainFrame" src="mainFrame.html"> </frameset> </frameset> </html> 图 2 首先页面被最外层的frameset分为上下两部分，上下两部分的大小由标签中属性rows指定（如图三）。rows="72,*"表示上部分占有72个像素，下半部分占有其余的像素，两部分由逗号分隔，*代表其余的所有值。上半部分嵌入的页面是topFrame.html，其余下半部分还有待分隔。 <html> <head> </head> <frameset rows="72,*" cols="*" > <frame name="topFrame" src="topFrame.html"> <frameset cols="310,*" rows="*"> ... ... ... ... ... ... </frameset> </frameset> </html> 图3 其次上一步中的下半部分又被一个frameset分为左右两部分（如图4），左右两部分的大小由标签中属性cols指定。cols="310,*"表示左部分占有310个像素，右部分占有其余的像素，两部分由逗号分隔，*代表其余的所有值。左边的子部分仍继续有待分割，右子部分嵌入的页面是mainFrame.html。 <html> <head> </head> <frameset rows="72,*" cols="*" > <frame name="topFrame" src="topFrame.html"> <frameset cols="310,*" rows="*"> <frameset rows="160,*" cols="*" > ... ... ... ... ... ... </frameset> <frame name="mainFrame" src="mainFrame.html"> </frameset> </frameset> </html> 图4 最后，上一步中左子部分又被一个frameset分为上下两部分（如图5），上部分占有160像素，下部分占有其余的大小。上部分嵌入的是我们的index_custom.jsp，下部分嵌套的是leftDownFrame.html。 <html> <head> </head> <frameset rows="72,*" cols="*" > <frame name="topFrame" src="topFrame.html"> <frameset cols="310,*" rows="*"> <frameset rows="160,*" cols="*" > <frame name="leftFrame" src="index_custom.jsp"> <frame name="leftDownFrame" src="leftDownFrame.html"> </frameset> <frame name="mainFrame" src="mainFrame.html"> </frameset> </frameset> </html> 图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 <frameset rows="*" cols="300,*" > <frame name="leftFrame" src="index_custom.jsp"> <frame name="rightFrame" src="clientpage.html"> </frameset> 图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 <frameset rows="*" cols="300,*" > <frame name="leftFrame" src="../index_custom.jsp"> <frame name="rightFrame" src="page/clientpage.html"> </frameset> 图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，定位到相应位置的<img>标签，将标签中的文件名替换为新图片的文件名，然后再调整相应的图片大小即可，图片大小都以像素为单位。区域1的标签 <img src="/portal/template/images/<%=Common.getPortalTop(language)%>" width="700" height="177"> 区域2的标签 <img src="<%=Resource.getString("Login_Left_Image_1", language)%>" width="229" height="342" border="0" usemap="#Map"> 区域3的标签 <img src="./template/images/03.gif" width="95" height="189"> 区域4的标签 <img src="./template/images/04.gif" width="95" height="189"> 区域5的标签，注意同时替换掉下面两个标签 <img src="<%=Resource.getString("Login_Bottom_Image_1", language)%>" width="471" height="153" usemap="#Map1"> <img src="<%=Resource.getString("Login_Bottom_Image_5_2", language)%>" width="471" height="153"> 区域6的标签 <img src="/portal/template/images/<%=Common.getPortalBot(language)%>" width="700" height="31"> C. 区域2为一张图片，对应FAQ和热线的两个部分含有两个热区，如果替换该页面，同时注意对热区的修改。 2. 热区和链接的修改 A. FAQ和热线的两个部分含有两个热区，用于连接到其他页面，对应为<map>标签元素。 B. 在同一个<map>元素中可包含任意多个<area>元素，嵌套的<area>元素对应一个热区的shape属性用于指定热区的形状，coords属性用与指定热区的位置，href属性用于指定热区链接的页面。coords值的格式取决于shape标签属性的值。其中，rect代表矩形，circle代表圆形，poly代表多边形。如图10 <map name="Map"> <area shape="rect" coords="29,208,190,249" href="./<%=Resource.getString("Index_Faq",language)%>"> <area shape="rect" coords="31,278,191,316" href=""> </map> <AREA SHAPE="rect" COORDS="0,0,82,126" HREF="/workshop/aaa"> <AREA SHAPE="circle" COORDS="90,58,3" HREF="/workshop/bbb"> <AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60, 281,75,288,91,267,87,253,89,237,81,229,64,228,54" HREF="/workshop/ccc"> 图10 C. 如果用户想在自己的替换图片中增加热区，可以先定义好<map name="yourMap">标签，并且在相应的图片的<img>元素的属性usemap="# yourMap"中引用相应的热区。如果删除热区，删除相应<img>元素属性usemap即可。 3. 用文本替换图片还可以将区域1，2，3，4，5，6图片的位置替换为文本，但要注意文本的字体，大小，对齐方式和样式等属性。如图例10中红框圈住的部分所示，可以将对应<img>标签元素替换为文本文字。图10 <td width="45%" class="tDarkred15" align="center"> 细致区分客户需求 精心构建产品质量 为客户和合作伙伴提供真诚服务 对产品和服务质量承担最终责任 </td> 图11 2007-04-27 H3C机密，未经许可不得扩散第9页, 共9页

展开阅读全文