上次簡單記錄了浮木雲的基本知識，本次我將按照自己掌握的基礎知識搭建靜態頁面。

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了，對於我來説這個軟件能夠滿足我的大部分需求，更何況產品小白呢？大家也來試一下吧。
本次針對搭建頁面做了簡單的介紹，但是很多細節性的問題我會在後續的記錄分享中持續輸出，讓大家跟我一樣愛上這款國產化軟件，同時成為一個專業的產品經理。