这部分跟报表模板设置布局是极其类似的，不管是布局的种类和操作方式，都差不多，这里就不再对如何使用布局做过多的介绍。
容器的有一个设置，叫布局方式，是需要了解一下的。假设拖入一个田型容器，就将页面分成四块，此时可以在每一块拖入很多组件，这些组件的布局方式有三种可选：流式布局、块式布局、固定布局。即，田型容器的4块区域，每一块区域都可以指定各自的布局方式，且互不干扰。
那么三种布局方式分别有什么不同呢？
注：蓝色字体是尚未用到过的组件
组件名称
组件标识
作用
文本
text1
用来显示文本内容，例如页面底部显示单位名称地址等信息；
按钮
button1
链接
anchor1
用来点击打开链接、也可以用来触发点击执行事件(同按钮)，例如点击按钮打开系统个人设置页面；
图片
image1
用来显示图片，例如在页面顶部显示公司logo图片；
单行输入框
input1
多行输入框
textarea1
用来输入多行字符数字；
单选按钮
radio1
用来做页面上的单选；
复选框
checkbox1
用来做页面上的多选；
简单面板
easypanel1
标签页
tabctrl1
标签形式显示展示内容，例如门户模板中的选项卡风格；
面板
panel1
带标题的简单面板，其空白区域可以与简单面板一样拖入容器或组件，标题部分可以设置文本和图标，像内网首页中的各个模块
磁贴
metro1
用来点击打开链接，功能类似于链接组件，但是可以加图标，且大小风格只有两种可选，例如win8风格门户用到的组件就是磁铁；
表单
form1
用于form表单提交，例如在门户上上传一个excel文件；（暂未开发好）
子窗口
iframe1
用来显示链接的内容，例如酷黑风格里面，点击顶部按钮，在下面的子窗口显示子页面的内容；
Flash视频
flash1
用来显示flash视频动画；
菜单
menu1
用来在门户上形成菜单，第一层横向平铺，第二层开始都为树形，菜单任何节点都可以设置资源链接；例如门户模板中的酷橙风格顶部标签，就是用的菜单组件；
滚动文本
xslidertext1
用来在门户上滚动播放文字的，例如在门户右上角滚动播放公司信息；
轮换图片
xsliderimg1
用来滚动播放一组图片，并且图片可以设置打开链接；
树
xtree1
用来显示树形结构，任何树形结构都能设置资源链接，例如门户中树形结构显示报表，就需要用到树组件；
列表
xlist1
用来在门户上，以表格的形式列出一些信息；
可编辑下拉框
xeditcombo1
以下拉的编辑方式来选择要输入的值，如果下拉选项中没有符合条件的，也可以自行输入。可以用在一些条件过滤或搜索的页面中
简单列表框
xlistbox1
同下拉列表框一样也是给出几个选项以供选择的，但这个是始终显示所有选项的那种选择框
下拉列表
xlistcombobox1
功能同可编辑的下拉框，只是只能选下拉选项中提供的值，不能自行输入
带按钮输入框
xeditbrowser1
同单行输入框的功能，且在后面带有一个按钮，用于选择输入
工具条
xcoolbar1
一排工具按钮组成的组件，系统中的很多页面都能看到的那种效果，用于配置类似系统页面的
日历
xcalendar1
日历，选择日期用的，一般不单独使用，最多也会是作为日历下拉框配合使用
日历下拉框
xcalendarcombo1
选择日期用的一个组件，如可以作为参数替代报表模版的参数面板
月历
xmenology1
同日历
月历下拉框
xmenologycombo1
同日历下拉框
数值输入框
xspinner1
后面带增大减小按钮的数值输入框，作为微调数值用
滑块
xslider1
同数值输入框一样也是一种数值型输入组件，但它不是微调，而是从在起止值间拖动调整
编辑滑块
xeditslider1
同滑块，增加手工输入的调整，用于比滑块拖动更精确的调整
前提：布局块的布局方式设置是"固定布局"；
任何一个组件选中后，右键属性中都有两个设置项：叠放次序、定位方式
叠放次序：置于顶层、置于底层、上移一层、下移一层；这个比较好理解，当出现多个组件相互覆盖的时候，可以设置多个组件之间的叠放次序。
定位方式：水平左（中、右）定位，竖直上（中、下）定位，是当分辨率变化的时候，用来指定组件位置的定位标准。例如水平右定位，组件跟外容器的相对位置的以右边距为准，在设计界面，组件与容器右侧距离20个像素的距离，那么水平右定位的话，在预览的时候，不管分辨率如何，组件都跟右侧保持20个像素的距离；门户有右上角的注销按钮，一般情况下都会选择水平右定位。
2个脚本如下：
（最简单的方法，用模板，在模板的基础上换图片，这里为了保证介绍的完整性，所以从空页面开始）
2.2.1需求
在动手开始设置前，首先要有一个需求的草图，这样就可以按照草图去设计页面的布局和组件了
2.2.2新建&布局
拖入水平容器组件，并编辑容器分成上中下三个部分。上下两块固定高118，中间块最小高度设置为63%（根据实际情况，调整大小），没有合适的背景图片，可以用容器背景色代替，分别对三块分区设置不同的背景色，如下：
为了方便组件的布局，将上中下三块的布局方式都设置成"固定布局"，设置的方法是，在某容器上，右键菜单"布局方式/固定布局"：
2.2.3logo+文本
需求中的logo、公司名称、公司信息，指需要拖入图片或者文本组件到相应位置即可，只需要注意一下各组件的定位方式，操作非常简单，效果如下：
2.2.44个必备组件设置
注意：这里还用到了简单面板组件，上图中看到的组件，都是放在简单面板组件内的，做样做的目的是方便排版和布局，设置简单面板定位方式为水平中定位、竖直中定位。
根据上面步骤中拖入组件的组件标识，去修改相应的脚本参数，然后将脚本粘贴到页面属性中的加载完成和自定义脚本，脚本如下：
最后还需要设置一个门户的缩略图，可以在设计界面截图，将该图上传服务器，并通过"门户配置/预览图片"指定为缩略图：
设置之后，在门户预览里面，就可以华丽丽的变身啦！
展示报表的组件有两个：标签组件、子窗口组件；BI门户是用来展示报表的，这两个组件的重要性，你懂的～
常见报表展示的结构：树形、标签、菜单、标签+树、菜单+树；
（注意这列之列出到报表展示结构，隐含的任何一种结构都需要子窗口或者标签来显示报表内容）
另说明：建议在模板基础上去设计门户，如果从空页面开始制作门户，你会发现门户是脚本的天下，慎用！
在上图中就做了一个很简单的菜单+子页面的的门户，第一页page0.esp是默认的门户主页，第二页page1.esp是一个子页面
在page0.esp设计成上下结构的布局，上面拖入一个菜单组件（双击即可编辑菜单内容），下面拖入一个子窗口组件，组件标识为iframe1；
首页就展示一个kpi报表，配置链接如下（报表链接可以拾取）：
../../resource/EBI$12$4IKKVTRUO0T4C0UIY5U5O4IL76ISSCTQ$1$MINFKBSK4UVMUUIITZXTSEF5YKIQ9PDI.rpttpl
第二页就展示page1.esp的内容，配置链接如下（子页面链接可以拾取）：
../../esmain/portal/portal.dofilepath=/root/portals/pages/esp/CDS/page1.esp
还有一个关键步骤：菜单的两个节点的"打开方式"设置都需要输入子窗口的组件标识iframe1，这样才能让展示内容指定在该子窗口显示；
顶部的标签用菜单组件实现，希望初次刷新菜单第一项默认为选中状态，如下图所示：
在菜单组件的"属性/事件/加载完成"设置脚本如下：
注意：bi最新版中，该设置无须在借助脚本，可以在菜单属性中设置了
如上图所示，左侧树，右侧为展示区域，展示区域可以是标签组件也可以是子窗口组件，但是如何点击树上的节点，让展示的内容在指定的区域去展示呢？还是需要在一段脚本来支持的。
脚本写在树组件的"属性/事件/鼠标单击"中.
如果是树+TAB标签，脚本内容如下：
如果是树+子窗口组件，脚本：
门户模板中有一种是：选项卡组合导航树风格，这个模板主要用到的就是标签组件+树组件，其中有一个重要的特点就是标签组件每增加一个标签，系统将自动为该标签添加树组件和子标签
在标签组件的"属性/事件/加载完成"设置脚本如下，就能自动实现上述效果：
Q：为什么每个标签页下面自动加载的组件是树组件+标签（隐藏头部），而不是树组件+子窗口呢？用标签有什么好处呢？
A:子窗口组件是每次设置显示的页面时，之前的页面是被丢了的，新页面需要重新下载显示，如果来回切换标签，每一次切换都需要重新下载显示；而标签页，每个标签里面其实是有一个类似于子窗口组件的东西，我切换树节点的页面时，只有第一次显示这个页面时需要下载，切到其它页面时我先不丢，只是隐藏起来，等下次再切过来的时候直接显示，这样就不需要重新下载显示了
在树形结构的门户中，右侧展示报表的标签组件，每点击一个新的节点，就会在右侧新增一个标签页，也就是以新增标签页的形式来展示报表，那么这个标签组件上可以配置邮件菜单，在标签上鼠标右键就弹出菜单选项"关闭/关闭其他/关闭所有"，如下图所示：
这个右键菜单的功能，也是通过脚本实现的。实现的方法：在标签组件的"属性/事件/加载完成"配置脚本如下：
如上图所示，树形结构的门户中，左侧导航树右侧报表展示标签，中间分割线可以鼠标左右拖动来调整左侧树的宽度。
该功能之需在容器外层的源代码添加一个参数data-relayout="true"；
方法：选中树形组件，点击工具栏"选中上层"，一般是点击两次，就会定位到容器外层，记住容器外层的组件标识（下图中为container3）
然后切换到门户的源代码，找到container3这一行代码，在这行代码中添加参数data-relayout="true"即可。
其他设置要点：
要实现上图所示的功能，点击导航树上的图标，收拢导航树，再点击就能展开，首先需要在图标的"属性/事件/鼠标单击"设置脚本如下：
其他设计要点：
常用的搜索框、欢迎信息、计算按钮、返回按钮等一般定位方式都是水平右定位。以下不再对定位方式一一说明。
<#=login.name#>,您好！(文本组件)
底部搜索框（图片组件）+搜索按钮（图片组件）+搜索内容输入框（单行输入框组件）
其中搜索图标"属性/事件/鼠标单击"设置脚本：
注意：搜索功能需要另外定制化的脚本，这里的搜索并未真正实现搜索功能，新版门户模板中已经去掉搜索框的设计
链接组件，设置链接内容为../../resource/ES$9$personal（可拾取）；
链接组件，设设置"属性/事件/鼠标单击"的脚本如下：
链接组件，设置"属性/事件/鼠标单击"的脚本如下：
新建一个标签+树形的门户，2个标签，第一个标签放一个首页，第二个标签放一般报表的导航树。
新建一个门户之后，可以通过简单的拖拽，就达到以下效果：
如本文2.3.3树型+标签（子窗口）中所述，树形中的报表资源能够准确在标签页中显示，是需要由脚本来指定。
在树组件的鼠标单击脚本中，将脚本粘贴进来即可：
这几个简单的步骤就把一个门户设计好了。
当然这些步骤实现的是最简单的门户，为了让门户更好看，实用性更强，我们还可以做更多的完善，例如：
图片区域使用tab页
按钮使用脚本
1.自定义xxx2.单人审批xxx",500);【鼠标移出】XFloatHint.hideFloatHint(500);
注意：新版程序中已经在菜单的属性中实现了该功能，无须脚本。