即使是菜鸟,也能配置出一个网站

对于刚进入IT行业的你,是否会觉得配置出一个像样的公司网站是很大的挑战?如果你有相同的感受,那么今天读过这篇文章之后,你的心情将会舒畅很多,因为我这名技术入门者,根据下面的方法很容易的配置出了网站,在此把方法推荐给大家。

wKioL1cLaAaRgcXNAAaUnmrwRQk175.png

配置出上图的网站只需AEAI Portal门户集成平台即可,门户集成平台可以作为企业的应用中心,或者企业应用的入口面板,在统一的界面上聚合现有各业务系统的数据、功能、界面,为各类用户如:合作伙伴、客户、公司领导、员工提供多渠道(如:PC、移动设备等)方式访问接入,AEAI Portal门户集成平台中自带了综合门户、知识门户、信息门户、移动门户等样例,即使是菜鸟也可以轻松配置出像样的网站。

具体步骤:

1.  门户创建

安装好AEAIPortal介质后,进入后台管理,详细安装及进入步骤请参见AEAI Portal门户集成平台技术手册,本文不做过多讲解。

输入系统管理员的账户和密码(演示账户:admin密码:admin)登录。

wKiom1cLZ47DfIyhAAGWHnZldN8757.png

登入后点击门户管理,跳转到以下界面:

wKiom1cLZ7GRzYOeAADnhu5GWfU478.png

点击新增创建门户,填入内容,点击保存创建门户成功;在这里设置编码为06,名称为公司网站02,类型选择登入前,默认主题选择公司网站主题,是否有效选择有效,写好后点击保存,如图:

wKioL1cLaIvAG9qHAABzGOi1AaY172.png

wKiom1cLZ9mSRj2KAABdydCPsqI929.png

之后我们在导航管理页面中就可以看见刚才建立的公司网站2了。

wKioL1cLaKuDP3GzAAB-K5qSrfQ299.png

下一步将创建的公司网站2添加到菜单栏“返回门户”下,双击管理导航,在弹出的这个页面中找到返回门户的文件夹,选中并点击新增链接,如图:

wKiom1cLaEHi44qiAAB2vXBN1Yw405.png

wKiom1cLaELwxmXdAACLin2sFVs940.png

   弹出如下窗口,填写上面输入的信息就可以了。

wKioL1cLaSWRnsqUAAAnt3OCZ-8238.png

wKiom1cLaHOSuyf8AABsDYNY_eI046.png

2.  页面创建

  接下来要对“公司网站2”的页面进行配置了,首先我们在“公司网站2”的导航下建立页面,先添加首页,添加方法如下:

  双击导航管理里面的“公司网站2”进入编辑模式。在“公司网站2”下新增页面,首先点击“新增页面”并进行编辑,输入内容如下图:

wKiom1cLaK3TzWrTAABmKgjYSJY594.png

wKioL1cLaWDiKryuAAAnKXmPadY479.png

  这里需要注意的是,本文中的网站布局是根据数通畅联软件真实网站的布局为例的,实际的可以根据需要自行定义布局。

我们还需要创建产品家族、解决方案、技术服务、新闻资讯等页面。下面只举一个创建产品家族的例子,其他页面创建方法与之相同。

点击新增目录,创建产品家族目录,并在产品家族目录下添加产品分类的目录,之后再产品分类下添加单个产品的页面,方法同上

wKioL1cLabHCAjykAABl1ZFWLGQ653.png

wKiom1cLaP6AyrINAAAgUIFdUSM296.png

wKioL1cLabOBWK9CAAByYXdkCXM279.png

wKiom1cLaQDiQMUpAAAjJCzHQhE504.png

wKiom1cLaQCC_LvfAAB0jmUTMRA592.png

wKioL1cLabTz8GcOAAAq2IRG0d4424.png

下面是编辑好的图片。

wKiom1cLaTPjvoKGAAHc5lees8w340.png

3.  页面布局

这里以公司网站首页为例进行演示,通过添加行容器和列容器设计我们需要的页面整体布局。

wKioL1cLagLThh93AAC8_R45McM488.png

点击页面布局,弹出下图:

wKiom1cLaWfRLwn4AABdXm-xsNs561.png

首页需要4个行容器,和7个列容器。现在布局中有2个行容器,所以点击拆分按钮wKiom1cLaX7gZp_nAAABBRqaOCA139.png拆分成4个行容器。拆分方法如下:

wKioL1cLakDQnycPAABcFEEJYHQ644.png

wKiom1cLaY3RTqrgAAASsRFEjcw566.png

wKioL1cLakHDVzYFAABLzD9QOB0500.png

之后点击添加按钮wKiom1cLaaqQqo7kAAABt70fgWU810.png添加portlet,弹出下图,分组选择“内容展现”,之后双击HTML片段选中,这样一个片段就添加好了。

wKiom1cLadDTKXjaAABphhkhQY0768.png

wKioL1cLaoSzXENJAAB2JZ1EHww417.png

   因为公司网站首页的第一个行容器是播放图片,所以我们在内容展现中选择jQuery图片播放。

wKiom1cLafOAygpLAABTfYt1xmc140.png

wKioL1cLaqbCDPk9AAB3ktgNqXo125.png

  之后根据网站布局,需要在行容器中添加3个列容器,添加方法如下:点击“添加子容器”按钮wKioL1cLat6TBy7-AAACIaeBTi4520.png,填入需要子容器的个数,点击保存即可。

 

wKiom1cLajzyppd9AAB4tnDg3Zw503.png

wKiom1cLajyjBhatAAAT-_7AjY0061.png

wKioL1cLavDiTPofAAA8GR6ITfw310.png

之后添加的portlet,都为HTML片段,完成图如下,其他页面配置方法同上。

wKiom1cLal3w1hodAACXO9G5Nm8428.png

配置完成后我们看一下前端的显示页面,如图:

wKioL1cLayjiV3mUAADEpMVz6Lc772.png

下面配置产品家族下的产品总体介绍的页面布局,点击添加portlet按钮wKiom1cLao6SNAdOAAABwu1kIww554.png,分别添加三个portlet,第一个为“普通菜单列表”,后两个为HTML片段。

wKioL1cLa06wZAeCAAA38N7sjNw074.png

wKioL1cLa07zM7soAABUErYQZo0351.png

右边的布局只需添加一个portlet,选择信息正文就可以了。

wKiom1cLarawPjRxAAAx-dkXoTw867.png

  为了在网页显示的布局更好看,需要调节宽度比,点击设置宽度按钮wKiom1cLas-jIaHnAAABk4-0fes517.png,把宽度比设置成18%--82%

wKioL1cLa47D7wa3AAAkp2LVIUw192.png

wKioL1cLa4-C0DasAAA4b2OErxs963.png

 其他产品或方案的配置同上。

4.  Portlet编辑

  进入到页面进行portlet配置,在控制台选中编辑组件模式,进入“公司网站2”首页,切换到编辑状态,如图:

wKioL1cLa7zhJG1pAABJfUhGhgw161.png

wKiom1cLawmQoku-AAAmedT1Ouc000.png

编辑宽度为940、高度为400,是否内容选择“否”,数据URL需要到管理控制台的“数据模版”下的“静态数据”中查找,如图:

wKioL1cLa-Wi3eOvAABLx_Dok4s034.png

wKiom1cLazLDFNDOAACCYAS-hXw357.png

选中jQuery图片播放,右键进入编辑页面,如图:

wKiom1cLa0_B4mJBAABBbX6FMn8536.png

复制地址到上面的数据URL处,保存完成后JQuery图片播放配置成功,如图:

wKioL1cLbBujTg37AAAyVLJODEs465.png

wKiom1cLa3Hy3uOgAAitaEAi-nI620.png

之后编辑下面的HTML片段,进入编辑模式如图:

wKioL1cLbEShJnnWAAAY5PbKSow675.png

是否正文选择“是”,因为是一个HTML片段,内容正文ID到管理控制台内容管理菜单下的信息采编里去找相对应的内容。

wKioL1cLbFPBl8PnAAApbH1yO3Q310.png

  例如添加“产品信息”的内容,找到后双击进入编辑模式,点击复制ID信息。

wKiom1cLa8XAbFmJAACrBn9EmvA242.png

wKioL1cLbHnAym_vAABdDP9FALY131.png

将获得的ID填写到内容正文ID处,点击保存,如图:

wKiom1cLa-Kj3_wdAAAgDtn6Xuw886.png

wKiom1cLa-LSl3sbAAAgFEgmRNs038.png

首页剩余的HTML片段配置可以参照上面步骤进行配置,配置好后如下图。

wKioL1cLbKrQu9-QAAPeCz7klrw179.png

本文只简单介绍首页部分的配置,其它的配置方法同上即可,更多详细内容可以参见网站配置手册文档。

http://www.agileai.com/portal/website/01/res-share.ptml AEAI Portal产品介质下载地址

http://pan.baidu.com/s/1kUEAVA3 网站配置手册的下载地址

下载产品后安装,参照网站配置手册一步一步的去配置即可。

如果成功的配置出网站的话,下一步就参照技术手册学着更深入的去了解AEAI Portal的其他强大功能吧!

猜你喜欢

转载自agileai.iteye.com/blog/2290065