介紹

這是一個記帳用的網站,首先輸入網址後,會有一個使用者註冊和登入的頁面:

誠如簡介說的,因為是一個簡單的實做,所以沒有多方驗證,註冊的email純粹是個使用者資訊,不會有認證用的email,註冊和登入都會導向記帳的首頁,也就是在簡介展示的那張圖:

這張圖分成上下兩個部份。上面的地方有banner(全黑)和標語,左上角有一個選單;當這網站越發龐大時,可以透過那個選單連去別的頁面:

但是這網站目前只有記帳功能,所以只有Close和Logout是有用的。而正中間那個按鈕則是記帳軟體的精華,所有的收入支出都從這個按鈕輸入:

種類有許多項,在報表中會有對應的icon,按下輸入後資料就會存入資料庫中。下面那塊則是主視覺,分成當日、當週和當月報表。當日報表的下方有箭頭可以切換顯示的日期,而週報表則是以直條圖顯示每週的支出狀況,起始值5000其實是從資料庫內當月的收入欄位取出的,每個月會重置一次。右邊的當月報表則是將月支出透過圓餅圖來呈現,會顯示各個類別佔支出的百分比。主視覺下面還有:

會有一個當週的支出列表,讓人知道當週在每個類別的花費。在月報表處則是會列出當月的Top 5,以便檢視這些高額支出的狀態。另外,月報表也是有箭頭可以切換呈現月份。 最下方則是版權聲明,本站所有的模板和樣式幾乎都是從W3拿出來的,用的也幾乎是W3的CSS,因此暫時放在下面。

results matching ""

    No results matching ""