體育館系統——前端設計

 本文轉自：廣東海洋大學體育館管理系統 開發日記（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。
        整個項目的源代碼將在最後一篇文章裏發佈，系統有很多不完善的地方，有興趣而且有時間的朋友可以一起去完善一下，並寫一下開發日記記錄自己的開發歷程。