1.4.1　第一阶段

1.4.1　第一阶段

实现：登录和主页面的设计。

（1） 使用HubilderX 创建web项目，命名为“CMSProject”，如图1.1所示。

图1.1

（2） 在各个文件夹中导入EasyUI 框架初始需要的css和js及需要的图片等，如图1.2所示。

图1.2

（3） 将index页面重名命名为Login页面，实现登录效果，如图1.3所示。

图1.3登录页面

在文件中写入以下代码如下所示。

完成登录页面效果。

（4） 新建html文件，命名为Main.html，设计主页面，效果如图1.4所示。

图1.4　主页面

（5） 所设计的系统为办公系统，其页面设计应清晰的展示功能菜单与操作界面为主，再兼顾头部用于展示横幅与登录等相关操作和脚部的基本信息。故一般使用jQuery+EasyUI完成两栏式布局，可以见表1.2的整体布局概览。

表1.2

（6） 在第5步新建文件下写入如下代码，完成效果。