隨著對浮木雲軟體設計開發平臺的深入瞭解，發現浮木雲真的是一個很人性化的工具。前兩次對浮木雲的佈局容器、彈性容器和柵格容器進行了簡單的瞭解，同時也知道這些容器是頁面是設計框架的基礎，本次我會根據自己對容器的瞭解進行的一個簡單的頁面框架構建。
感興趣的小夥伴可以直接去他們的官網https://www.fumucloud.com/瞭解試用。
1、示例頁面框架佈局
頁面設計的好與壞完全取決於頁面的框架佈局是否設定的有層次。只有把頁面框架搭建好，才能更好的填充頁面內容，保證頁面簡潔美觀。接下來，我們就浮木雲模板中心的“通用資料管理系統”的‘工作臺’頁面來看一下如何確定頁面框架佈局。工作臺示例圖如下：
從圖中我們可以看出框架呈上下分佈，上層容器的框架左右分佈，下層容器分為三部分。
2、確定頁面框架佈局
如何形成上述最基本的頁面框架佈局呢？首先你自己心裡要有一個草圖，你要清楚你的頁面設計大概是什麼樣子？怎麼分佈？然後再確定該怎麼設定容器的引數讓幾個容器的位置排列如上圖所示的樣子。
2.1上下佈局
為了方便頁面框架佈局的管理，首先放置一個彈性容器，用來巢狀上下分佈的兩個彈性容器，同時要將該彈性容器的自動換行設定為“是”。放置兩個彈性容器，對其進行引數設定，引數設定包括其寬度、高度和內外間距。兩個容器的寬度自然是跟外層巢狀的彈性容器的寬度是一樣的，高度是根據自己的內容定義特定的高度，上下佈局之間一定是要有一定的間距分隔開，保證佈局排列整齊簡潔，將上層容器下外間距設定一定的數值，這裡設定的“20”。這樣，初步的上下佈局框架已經定義好了：
2.2上層容器佈局
我們觀察示例圖的上層分佈是左右分佈，即放置兩個容器，每個容器的寬度在上層容器具有一定的佔比，從頁面內容分佈來看，兩個容器的佔比是3:1，因此我們將左邊容器的寬度設定為75%，右邊容器的寬度設定為25%，同樣的，為了保證頁面佈局左右分佈層次分明，設定兩個容器之間的外間距，具體數值可以根據自己的需求定義兩個容器的間距，這裡是將右邊容器的左外間距定義為“20”，示例圖如下：
2.3、下層容器佈局
下層容器佈局的示例圖分為三部分，即放置三個彈性容器，三個彈性容器的寬度佔比比例和是1，這裡是將前兩個的容器寬度設定為37%，最後一個容器寬度設定為26%，同時設定三個容器之間的間距，這裡分別設定第二個容器和第三個容器的左外間距是20，保證三個容器之間的間距是相等。當然，在這裡容器的高度我個人認為是暫時無法確定的，你可以先設定的初始的值，但千萬要記住，在填充頁面內容之前，一定不要將容器的高度值設定為自適應，否則在高度自適應的情況下容器為成為一條線，你拖拽元件都無處安放（前車之鑑切記切記）。下層的容器佈局示例圖如下：
好了，頁面框架設計就介紹到這裡，這樣看來，容器的框架設計是不是很簡單？從上述的圖例我們也能明顯看出，好的框架佈局設計明顯讓你的頁面設計事半功倍！