浮木云随笔小记（2）--静态界面搭建

上次简单记录了浮木云的基本知识，本次我将按照自己掌握的基础知识搭建静态页面。

1、创建应用

我先根据模版中心的订单管理系统搭建一个简单的Web静态页面，是关于订单管理的页面。因为不涉及其他页面，所以子应用可以直接略过。

2、导航配置

接下来给自己所创建的应用配置一个导航菜单，导航菜单我就配置一个侧边导航。选择侧边导航，同时对导航的顶部高度、侧边宽度和导航主题进行配置。

在子应用配置中将原有的logo图片去掉，上传相应的logo图片，并填写对应的子应用名称。

接着配置导航样式，导航样式主题分为四种：默认、清新绿、暗黑黄和自定义，我这里选择的是自定义，保存菜单导航配置之后，这样就可以对自己的菜单导航样式进行自定义配置，仿照模版选择合适的颜色：

样式配置过后，配置菜单导航数据，新增菜单主题，这里我根据模板的侧边导航配置一样的导航。

3、创建页面

菜单导航配置过后，整个页面的框架已经搭建好，接下来创建新的页面，可以看到菜单导航配置之后的页面效果。

4、搭建框架布局

根据浮木云的快速入门，放置弹性容器，先将整个页面的框架布局定义好，这样就可以在对应的框架布局中填充对应的内容。

5、页面内容填充

5.1上方框架布局内容填充

（1）根据订单管理系统的布局填充统计块的内容，该框架包括两块内容，一块是统计块内容，一块是通知内容，因此要内置两个弹性容器，分别放置订单管理的统计块内容和通知内容。
（2）为了让整个统计块内容表达清晰，排列整齐，统计块的弹性容器自动换行调整为“否”，然后分别放置5个小的弹性容器，用来填充图片，“未发货”，“已出货”，“已完成”和“已延期”，可以发现这5个小的弹性容器都在一排。
（3）将放置图片的弹性容器高度和宽度分别设为100px，横向对齐和纵向对齐分别设置为居中对齐，并在内外边距的外边距设置50，盒子边盒的四角分别设置为10，这样放置图片的弹性容器布局就已经定义好了。（4）填充“未发货”，“已发货”，“已完成”和“已延期”的弹性容器中的外边距设置为50，高度可直接设置为百分之一百，宽度设置为15%，且横向对齐和纵向对齐分别调整为“居中对齐”。

接下来就是对统计块的容器中填充图片和文字。
（1）选中填充图片的弹性容器，在“背景样式”设置背景颜色，并上传背景图片，图片是在别的网站随便下载的logo，从本地上传上来。
（2）在填充文字的弹性容器的自动换行改为“是”，这样子在小弹性容器填充文字和数字时，都会分别占据一行。
（3）放置两个文字组件，在“属性配置”中分别填写文字和数字。在“样式配置中”可以根据需求在文字样式中对所填写的文字和数字对“字体大小”，“字体粗细”，“字体样式”和“字体颜色”对文字进行样式配置。

接下来就要对“通知”的弹性容器进行内容填充了，跟上述搭建步骤是一样的，这里就不做过多介绍了，具体展示效果如下图所示：

5.2下方框架布局内容填充

（1）对下方弹性容器进行内容填充，包括两部分内容：“查询”和“表格”，因此要在下方弹性容器再放置两个小的弹性容器用来填充“条件查询”和“表格”，将弹性容器的自动换行改为“是”。
（2）在放置“条件查询”的弹性容器中查询容器，并在“查询容器”中分别放置两个“输入框”和一个“下拉框”，分别在“属性配置”中对“输入框”和“下拉框”填写将对应的“标签”进行修改。

（3）在放置表格的弹性容器中放置“高级表格”组件，高度和宽度分别设置为百分之百，确保表格占据整个弹性容器。接下来在“扩展设置”中分别对“基础列设置”， “表格列设置”“按钮设置”和“表格数据设置”分别配置。
① “基础列设置”包括“多选框”，“序号”和“功能栏”进行配置。

② “表格列设置”就是对表格的字段内容进行填充：

③ “按钮设置”就是对添加对应的按钮名称，例如“编辑”，“详情”，“删除”。

④ “表格数据设置”就是对表格的数据内容进行填充，可以批量导入，也可以直接在线填充，当然在线填充的方式就会比较繁琐，可以根据数据量的大小选择不同的填写方式。

表格组件内容填充完毕后，可以看一下成果图啦！

总的来说，效果还不错，虽然是仿照模版中心的模版，但是对于我这个不是专业的产品经理我觉得这样的效果已经很ok了，对于我来说这个软件能够满足我的大部分需求，更何况产品小白呢？大家也来试一下吧。
本次针对搭建页面做了简单的介绍，但是很多细节性的问题我会在后续的记录分享中持续输出，让大家跟我一样爱上这款国产化软件，同时成为一个专业的产品经理。