体育馆系统——前端设计

 本文转自:广东海洋大学体育馆管理系统 开发日记(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
        整个项目的源代码将在最后一篇文章里发布,系统有很多不完善的地方,有兴趣而且有时间的朋友可以一起去完善一下,并写一下开发日记记录自己的开发历程。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章