【使用手册】
◆基本操作
左侧为页面树，用来组织页面关系。
右侧上方为组件工具。包括常规、框架、组合组件、自定义组件四部分。
右侧下方为属性窗口。
中间为页面设计器。
项目是以文件方式来存储的。包括主项目文件、相关页面、引用的文件。每个页面文件对应一个xml文件，如：page1.xml。
具体结构如下：
输入项目名称，选择支持的框架，单击确定。
选择存放项目的路径，输入主项目文件名称（可以是中文字符）。
选择主文件，单击打开即可。
关闭当前项目，同时关闭所有的页面。
最近使用的项目列表，可通过它直接打开项目。
包括项目名称、主题风格、框架、页面数量等属性。框架版本只有ext项目有效，可以在各版本之间切换。config文件名、索引文件名在单人设计时用默认值即可；在多人协作时使用，每个人可设置不同的文件名。
可单击主题风格按钮设置项目的配色风格。
每个页面文件对应一个xml文件。页面可组织为树形结构。
新加页面、新建子页面，选择页面模板，设置页面宽度，单击创建。
删除选中的页面，页面必须关闭后才能删除。如果页面节点下有子页面，则所有子页面都会被删除。
页面属性包括页面名称、生成的html文件名、页面类型，背景色、背景图像、重复方式、页面宽度、页面对齐方式、页面存储文件等属性。
页面类型：默认、弹出窗口、iframe页。
重复方式：repeat（横向纵向平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeat（不平铺、只显示一份）
习惯使用关闭全部页面按钮，使打开的页面很少，可更方便的找到对应的页面、并有效释放内存。
复制页面是最快、最有效的创建页面方式。可使用ctrl+c快捷键。注意：使用快捷键时要保证焦点在页面树上，防止和复制组件混淆。
粘贴页面包括三种，粘贴到同级页面最后一个节点位置、粘贴到子页面最后一个节点位置、粘贴到当前位置。默认ctrl+v时，粘贴到当前选中节点的同级最后一个节点。
生成当前打开的页面。选择目标文件夹。可选择是否生成后自动打开。
设置风格色调。
生成本项目的全部页面。选择目标文件夹。可选择是否生成后自动打开。
设置风格色调。
打开索引页面。需要打开已经生成的页面，又不想再生成一次、或者到资源管理器中寻找，可直接打开索引文件。
可以将系统中的页面导出为文件包。
可以将外部页面文件包导入到系统中。
◆页面设计
组合组件是由多个组件组成的，并不是单个的组件。系统内置了很多常用的组件组合，方便设计时使用，称之为组合组件。
组件工具中“自定义”部分也属于组合组件。
拖入设计器之后，组合组件的各个组件可以单独设置属性。如果想修改组合组件整体，可修改后保存为另一个自定义组合或组合组件。
可从组件工具中拖入组件、组合组件。
拖入时可直接放到页面上，也可放到容器上。
容器有两种状态，一种是设计状态，一种是移动状态，只有设计状态时可以拖入组件。
部分组件只能放到特定的容器中。ext菜单只能放到ext工具栏中。工具栏分隔条只能放到工具栏中。
主菜单一般直接放在页面上或者放在body区域中，否则下拉菜单时可能被容器挡住不能显示。当然，单级菜单不存在这个问题。
固定布局时，位置相对于容器都是固定的，可以任意拖拽组件位置、大小。而自动布局时，组件位置、大小会根据布局属性自动变化。所以，系统需要自适应浏览器、根据浏览器大小的变化而变化时，一般采用自动布局。
1、absolute绝对布局
完全手工设置组件位置，组件位置、大小相对于容器都是固定的。
2、border边框布局
边框布局是将容器划分为5个区域，东南西北中。使用时为父容器指定border布局，为子组件设置区域（东南西北中）（east、south、west、north、center）。子组件会根据设置来对齐。
有少于5或多于5个区域时，依然根据这个规则来自动布局。
3、fit自适应布局
容器设置为fit时，内部组件会充满容器。
4、anchor锚固布局
容器布局为anchor时，内部组件会根据相对宽度、相对高度自动变化。
5、accordion手风琴布局
一般用于这种抽屉式容器。
6、hbox水平布局
一般用于容器中横向排列组件。
7、vbox垂直布局
一般用于容器中纵向排列组件。
部分布局中可使用相对宽度、相对高度来设置组件尺寸比例。边框布局、水平布局、垂直布局、锚固布局中都可以使用。
如果容器是HBox，相对宽度对应的是ext的flex属性。组件实际宽度 = 容器宽度*(本组件相对宽度/所有相对宽度之和)
例如：容器内三个组件相对宽度分别设置为1、2、2，
表示这3个元素占的宽度分别为1/(1+2+2)、2/(1+2+2)、2/(1+2+2)
如果容器是VBox，相对高度对应的是ext的flex属性。组件实际高度 = 容器高度*(本组件相对高度/所有相对高度之和)
例如：容器内三个组件相对高度分别设置为1、2、2，
表示这3个元素占的宽度分别为1/(1+2+2)、2/(1+2+2)、2/(1+2+2)
jquery的布局主要使用“布局容器”、“布局区域”。支持border布局，同ext布局一致（详情见“固定布局、自动布局”）。
另外，“布局容器”可有左自适应对齐、右自适应对齐、居中对齐；相对高度、相对宽度。“块”组件可以左对齐、右对齐、居中对齐；相对高度、相对宽度。这些属性可以结合使用来实现页面的整体布局。
提供以下八种选择组件方式：
- 单击选择单个组件。
- 在页面上，可通过鼠标左键框选来选择多个组件；
- 在容器中，按住ctrl然后用鼠标左键框选来选择组件。
- 按住shift，然后单击组件，可多选或不选组件。
- ctrl+A选择全部组件。
- 选中容器，然后选择所有子组件。
- 选择单个组件，然后选中父组件。
- 打开主菜单，组件->组件列表，选中组件。
在固定布局中需要对组件位置、大小进行调整。通常通过拖拽改变组件的位置、大小。也可通过属性设置修改左、上、右、下、宽、高。
组件边缘被挡住无法拖拽调整时，可使用属性设置。
微调几个像素时，可使用快捷键调整。shift+箭头用于调整大小；ctrl+箭头用于调整位置。
还可以使用对齐功能来调整位置、大小。
组件对齐包括：左对齐、右对齐、上对齐、下对齐、等高、等宽、水平等距、垂直等距。
对齐时以第一个选中的组件为准。
使用复制组件方式来设计页面是最快、最有效的方式，大部分情况都可以通过复制相同、相似的组件来设计页面。
可通过主菜单、快捷菜单、快捷按钮、ctrl+C等方式来复制、粘贴组件。
注意：粘贴组件时，如果在页面中粘贴，粘贴位置还是原来的位置，可能不在当前显示的页面范围内，需要翻页才能看到组件。
删除选中的组件，可用del键、菜单、快捷按钮来删除组件。注意删除表格、数据表格时，二者如果处于编辑状态，则删除操作为删除表格内容，而不是删除组件。
容器组件、表格、数据表格等组件移动的时候，需要切换为移动状态再移动；其他组件可直接拖拽来移动。
通过设置属性左、上来移动组件。
通过ctrl+箭头来移动组件。
系统提供了大部分常用的表格操作。可用于表格制作、table布局。
具体功能包括（具体操作方式与excel类似，这里不做具体介绍）：
- 插入表格，设置表格行数、列数；
- 插入行、插入列、删除行、删除列；
- 拆分单元格、合并单元格、剪切单元格、复制单元格、粘贴单元格；
- 删除内容、清除所有内容；
- 水平对齐、垂直对齐；
- 行高、列宽、平均分布行高、平均分布列宽；
- 鼠标框选、全选。
注意：
- 表格状态分为编辑状态、移动状态、无焦点状态。按下快捷键时，如果处于编辑状态，会操作单元格内容；如果是移动或无焦点状态，会操作组件。
- 删除组件、删除单元格内容、要分清楚。
数据表格而用于展示数据。
具体功能包括（具体操作方式与excel类似，这里不做具体介绍）：
- 插入表格，设置表格行数、列数；
- 调整列宽；
- 增加行、插入行、增加列、插入列、删除行、删除列；
- 剪切单元格、复制单元格、粘贴单元格；
- 删除内容、清除所有内容；
- 鼠标框选、全选。
注意：
- 表格状态分为编辑状态、移动状态、无焦点状态。按下快捷键时，如果处于编辑状态，会操作单元格内容；如果是移动或无焦点状态，会操作组件。
- 删除组件、删除单元格内容、要分清楚。
图片组件加载图片之后，如果修改了大小，想回到原始大小，可使用该功能。也可以重新选择图片来恢复大小。
页面设计时，容器嵌套情况非常多，而且很多容器没有边框，所以“选中父节点”功能非常重要，可通过它来确定容器嵌套情况。
容器内部一般会有很多组件，而且内部嵌套也比较复杂，需要复制组件、或者更换容器时，可以通过该功能选中容器内所有子组件进行操作。
属性设置时，一般数值型属性需要回车以生效。
可通过单击标签查看属性说明。
可视化调整tab顺序。html中只有部分组件有tab顺序，所以只显示有tab顺序的组件。如果不设置tab顺序，系统会默认为载入顺序。
可通过按钮调整顺序。
组件列表显示所有组件，包括容器嵌套关系。
可用它来清晰的看到组件间的父子关系；也可通过组件列表来找到某个组件。
组件可设置多种样式，不同的样式会生产不同的html组件。
可设置要打开的页面，设置目标。树、列表、菜单等组件可对每个项单独设置链接、目标。
链接：要打开的页面。
目标包括：_self、_blank、_parent、_top、指定框架。
- _blank：在新窗口中打开被链接文档。
- _self：默认。在相同的框架中打开被链接文档。
- _parent：在父框架集中打开被链接文档。
- _top：在整个窗口中打开被链接文档。
- 指定框架：在指定的框架中打开被链接文档。
窗口组件可设置“默认打开”属性，设为true时，页面加载时自动弹出窗口。
如果在页面运行时打开窗口，需要写脚本来实现。注意：html5、jquery和ext打开窗口的方式不同。
例如，要通过按钮来打开弹出窗口。为按钮增加打开窗口事件即可。
第一步：
右键—>代码，打开代码窗口。选中button，右键->增加事件。
第二步：（如果是html5、jquery项目）
选择onclick事件
事件编辑窗口输入： opendilogs()
保存。
切换到脚本窗口
单击插入代码按钮，选择javascript常用——打开关闭窗口，选中打开窗口部分，单击插入选中部分。然后将#page1_jDialog1修改为对应的窗口名即可。
第三步（如果是ext项目）：
选择click事件
选中ext常用->打开关闭窗口，在事件编辑窗口插入下图代码，插入后修改窗口名称，注意格式为窗口名称+_obj
图标提供了以下几种类型：
- column：柱状图；
- bar：线条图；
- line：折线图；
- pie：饼图；
- area：面积图；
- point：散点图；
- doughnut：环状图；
- gauge：表盘图；
- radar：雷达图。
使用图表时，可使用“组合组件”中的图表组件，每个类型都默认了简单的示例，可参照示例来设计图表。
数据列类型包括：x、y、value，分别对应x轴的取值、y轴的取值、对应的数值。
数据类型包括：string字符型、int整形、float浮点型。
x轴设为年份，类型为string；y轴设为收入，类型为int。value无需设置。柱状图、线条图、折线图、饼图、面积图、散点图、环状图都只设置x、y即可。
x为最小值，y为最大值，value为当前值。
x轴为产品，类型为string；y轴为特性，类型为string；value为值int。
页面注释可用于编写任何文档。比如与页面相关的功能描述、业务规则、数据字典等。如果使用表格，可在word中做好后复制过来。
可在生成页面后的页面索引文件中打开页面注释。
框架用于引用页面，以便最好的复用页面。可以将通用的页面、部分页面区域用框架来引用。这样，大量相同的地方需要修改时，修改一处即可。
一般建议使用iframe框架来引用页面。
系统虽然内置了部分常用框架，但设计时尽量少用。
F8：查看整页
F9：生成本页面
F10：生成全部页面
ctrl+箭头：移动组件
shift+箭头：调整组件大小
箭头：组件间移动
ctrl+S：保存
ctrl+X：剪切
ctrl+C：复制
ctrl+V：粘贴
ctrl+A：全选
F2：重命名
F1：帮助
◆高级页面设计
使用Html组件可在指定位置插入一段html代码，这样理论上为本设计系统提供了任何可能。
拖入设计器后打开“编辑html”属性。
源码界面：
可以在页面中使用事件、编写代码，引用外部文件。
页面设计器中，右键—>代码，打开代码窗口。可以在页面中加入事件、写脚本、引用外部文件。
脚本嵌入方式：脚本可以嵌入html页面中，也可以存为独立的文件。
脚本嵌入位置：嵌入html页面中时，可以放在body前、body后、body中，或者html前（比如asp脚本的引用）。
脚本类型：可嵌入任何html支持的脚本，如javascript、vbscript、asp、php等。选择none的时候还可以嵌入任何自定义的脚本格式。
添加事件
脚本编写：
代码模板
引用文件：
和页面代码不同，脚本组件可以放在页面body的任何位置，比如某个容器部分，也可以在容器部分引用某个外部文件。
可以在页面中编写代码，引用外部文件。使用时与代码功能基本相同。
将脚本组件拖入设计器中，单击脚本属性编辑。
◆自定义组件、模板
可以将当前打开的页面保存为模板，保存到指定的分类上。
还可为模板指定预览图片。
可以将当前打开的页面保存为组合组件。可以保存到组合组件分类下，也可以保存到自定义组合组件下。一般使用时建议保存到自定义下。
还可为组合组件指定预览图片。
模板管理功能用来维护模板。具体功能包括：增加预览文件、删除预览文件、增加分类、修改分类、修改模板名称、删除分类、删除模板、上移、下移等功能。
可以将系统中的模板导出为文件包。
可以将外部模板导入到系统中。
组合组件管理功能用来维护组合组件。具体功能包括：增加预览文件、删除预览文件、增加分类、修改分类、修改组件名称、删除分类、删除组件、上移、下移等功能。
可以将系统中的组合组件导出为文件包。
可以将外部组合组件包导入到系统中。
包括删除、重命名、增加预览图片、删除预览图片等功能。
可以将系统中的自定义组合组件导出为文件包。
可以将外部自定义组合组件包导入到系统中。
◆常用技巧
- 选中容器，点击选中所有子组件按钮
- 剪切组件（ctrl+X）
- 拖入新容器，粘贴
- 先选中旧容器，再选中新容器，然后按下等宽按钮、等高按钮
- 删除旧容器
- 将新容器放到指定位置
单击属性标签即可。
选中类似的页面，然后ctrl+c，再重复按下ctrl+v，可瞬间建多个页面。
最常用的是选中容器内的所有组件：选中容器，然后单击“选中所有子组件”按钮。
多层父容器的嵌套时，单击选中父组件即可。
系统提供以下八种选择组件方式：
- 单击选择单个组件。
- 在页面上，可通过鼠标左键框选来选择多个组件；
- 在容器中，按住ctrl然后用鼠标左键框选来选择组件。
- 按住shift，然后单击组件，可多选或不选组件。
- ctrl+A选择全部组件。
- 选中容器，然后选择所有子组件。
- 选择单个组件，然后选中父组件。
- 打开主菜单，组件->组件列表，选中组件。
可以先将父容器改为absulute绝对定位，调整内容，调整完之后再改过来。
对于同一类型页面，先用绝对定位排好，再慢慢的试各种自动布局。自动布局看似复杂，其实挺容易，多试几次就熟悉了。
方法一：复制同类型组件，选中父容器，粘贴。
方法二：将组件放到空白处，剪切，然后选中父容器，粘贴。
方法三：先将容器布局改为绝对布局absolute，拖拽大小，找出空位，然后拖入组件。
移动一个像素：ctrl+箭头。或者直接在属性栏输入数字。
调整大小：shift+箭头。
粘贴组件时，如果在页面中粘贴，粘贴位置还是原来的位置，可能不在当前显示的页面范围内，需要翻页才能看到组件。
也可用组件列表来选中组件，然后修改属性左、上。
选中组件，然后将属性宽、高改的小点，然后再用鼠标调整。
可以做好模板从word中复制过来。
一般来说高手应该是做的又快、又漂亮。单从原型制作、页面设计来说，尽量找现成的模板，尽量使用复制页面、复制组件来设计页面，这是迈向高手行列的最佳途径。
微简论坛提供大量的模板、组合、图片、图标。
以三人协作为例：
1、将项目分成三部分，没人负责设计一部分。
2、各自新建一个项目。打开项目属性，各自设置自己的config文件名、索引文件名。三人不能相同。
3、生成html页面的目录要放到同一目录中。
4、将生成的目录放在svn、cvs等版本控制软件的同一位置。每个人上传时都直接覆盖该目录即可。
5、最后给开发人员的时候，开发人员需要手工合并一下。
注意：项目源文件要放在不同的位置。共享部分可以单独做一个项目，打开链接时直接使用外部链接即可
