体育馆系统——前端设计

 本文转自：广东海洋大学体育馆管理系统 开发日记（10）——前端设计 - 郭剑锋 - 云代码空间http://yuncode.net/article/a_50f4d7e4edc2393

 

        本文主要内容是web前端设计，包括html，css，js，jsp等技术。页面采用div+css布局，前台模板均是jsp页面，但不能直接访问，而是通过控制器调用，后面将会讲到。整个系统分为两大部分——用户前台和管理员后台。用户前台使用红色作为主色调，体现体育的激情；管理员后台用了蓝色作为主色调。

GYM配色示意图

        下面先制作页面公共部分。

header.jsp

        header.jsp包括了页面头部和导航栏，footer.jsp包括了页面底部的相关信息和版权信息，这些每个页面都要用到，因此我把他们放在WebRoot/include里面，然后每个页面的头部和尾部都用<%@ include file="include/header.jsp"%>和<%@ include file="include/footer.jsp"%>来引用。这样做好处有两点，一是提高了代码的重用性，“以代码重用为荣，以复制粘贴为耻”；二是不会导致一处修改，每个文件都要修改。

        接下来就是前台主页的设计了。
index.jsp

        这里用到的jstl标签可以暂时忽略。因为现在是前端设计，不考虑后端传送的数据，只考虑如何显示，如何布局。另外用到了一个图片幻灯片播放，这是网上找来的一个代码，稍作修改即可使用。
        代码底部的var def = "1"; 表示当前页面导航栏的第一个标签高亮。例如var def = "2"; ，那么体育赛事标签高亮。这样做的好处是导航栏可以放到公共引用文件中，但在不同的页面下会高亮对应的标签，用户一看就知道自己当前在哪里。
        关于css类和id的命名，一般涉及布局方面的用id，因为这一般只出现一次；其余的考虑重复使用，都用class。命名方式是单词之间用“-”隔开。具体css文件可下载打包文件查看。

广东海洋大学体育馆管理系统首页

        至此主页模板制作完成。其他模块模板制作过程类似，下面仅给出注册和登录的页面源代码。

        效果图如下：

广东海洋大学体育馆管理系统主注册页面

广东海洋大学体育馆管理系统登录页面

 

        接下来就是管理员后台页面的前端设计了。管理员后台的所有页面、css以及js文件都放在WebRoot/admin目录下，目的是更好地管理和跟前台区分，不然写代码过程中会很容易混乱。这里跟前台设计过程差不多，但因为是后台，所以设计尽可能简洁。

广东海洋大学体育馆管理系统后台首页

 

        这个系统中有很多地方需要显示列表信息，例如场地列表，器材列表，用户列表......所有的表格都采用统一的无边框风格。

无边框表格

        所有页面的目录结构如下

  
用户前台目录结构                        管理员后台目录结构

        每个模块下都有一个index.jsp，这是每个模块的首页，一般用于显示该模块下的信息。比如WebRoot/ground/index.jsp显示所有场地的列表。

        其实前端设计大部分工作量就是布局，以及调试css，直到跟原设计大致一样。写代码前一定要有一个大致的设计思路，比如配色，风格，页面整体布局，文件目录结构......不然的话做出来的网页会不协调，而且容易导致大量的返工。至于css的运用技巧和页面布局需要平时多观察，多积累。大家平时看到不错的网页，可以看看它的源代码；也可以多到这里逛逛http://yuncode.net/list/web，有什么好的源码别忘了保存到自己的代码库里http://yuncode.net/mylib。
        整个项目的源代码将在最后一篇文章里发布，系统有很多不完善的地方，有兴趣而且有时间的朋友可以一起去完善一下，并写一下开发日记记录自己的开发历程。