easyUI是非常常用的的WEB前端開發框架，在easyUI裏面提供了很多的版本，有離線版也有在線版。由於用它來開發網站前端非常簡單方便，因此受到廣泛的歡迎。現在我們來看看如何使用easyUI佈局頁面。
（01）創建HTML文檔雙擊桌面上的Dreamweaver圖標，打開Dreamweaver軟件，點擊軟件中菜單欄的【文件】-->【新建】-->【HTML】創建一張HTML類型的頁面。
（02）保存頁面快捷鍵【ctrl+s】保存頁面，會彈出【保存位置】，一般是保存在站點中或者www文件夾裏面。輸入文件名並選擇保存文件的類型，然後點擊確定按鈕即可。
（03）引入js文件easyUI裏面有很多的組件，要想利用這些組件直接開發前端頁面的話，就需要引入相關的js文件。我們要佈局頁面，用到的組件是【layout】，那麼要引入4個js文件，如下圖所示：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>
（04）打開EasyUI+1.3+中文幫助手冊【EasyUI+1.3+中文幫助手冊】網上有很多的版本，內容都大同小異，隨意下載一份即可，下載這個的目的是裏面有很多的解析和例子可以參考。
（05）頁面佈局我們創建【整個頁面的佈局】，那麼找到手冊中的【佈局面板】裏面就有一些簡單的例子和代碼，複製粘貼到Dreamweaver文件的body裏面。如果還未下載手冊的人可以參考如下代碼：<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>
（06）預覽效果點擊Dreamweaver工具欄中的【地球圖標】--【預覽在360se】或者其他的瀏覽器，在瀏覽器中預覽效果。
（07）修改代碼我們可以對代碼進行修改，比如去掉【East】面板，然後更改下各個方向中的標題。
（08）再次預覽效果修改完成之後，保存下頁面，然後再次預覽下效果，可以看到標題已經改變了，還可以根據實際的需求往裏面添加內容進去。
EasyUI+1.3+中文幫助手冊中的代碼並不是一層不變的，我們可以根據實際的需求，對代碼進行增加和刪除等操作。要注意理解代碼的意思，才能更加靈活的運用。
酷知知識幫
