页面布局-使用HTML模板布局

1、示例说明

本例将制作一个如下图所示的页面，该页面包含一个参数区与两个仪表。

2、制作前准备

首先准备页面的背景图片（下载： 1.png ）。
准备基础 HTML 模板（下载： demos.html ），该模板中第6行就是参数区定义，第15与第16行是两个资源区的定义。
准备仪表资源

3、实现步骤

下面步骤中涉及到静态 HTML 页面的修改，推荐使用一些简单的 HTML 编辑工具来做此操作，比如Dreamweaver等工具。
步骤1：修改HTML模板，在第一行设置背景图片为准备好的图片。

步骤2：修改HTML模板，修改参数区的位置（注意下图中的 bofid 属性）。修改的方法就是将参数区对应 TD元素的位置改为使用绝对定位，覆盖在背景图设想的参数位置上（小技巧：可以先拖动一个绝对定位的DIV到相应位置上，这样就能获得区域定位位置信息）。

步骤3：参考步骤2，修改资源放置的位置（每一处用来放置资源的位置用 bofid 属性标识）。这步骤完成后新的HTML模板就完成了。

步骤4：先把底图放入服务器的相应目录，比如webapps\smartbi\vision\img目录下。然后进入Smartbi的“定制管理->资源定制”模块，然后点击“新建页面”。

为便于后期的升级维护，不要修改或向 Smartbi 的目录下添加文件，最好是参考“插件开发框架”文档，创建一个项目上自己的扩展包，将上述图片文件放到自己的项目扩展包中。

步骤5：在页面定制向导的第二步中，进入“布局管理 -> 增加HTML布局”，然后上传我们前面制作好的布局文件。

步骤6：选择新上传的模板后，进入“第三步：添加资源”应该看到如下图的情况。注意：这时候如果没看到底图，则是步骤 4 的图片没放好；若是完全空白不能拖动资源，则是前三步的模板修改有误。