思考如何以jQuery Mobile設計行動網頁功能與介面

假設要幫系上老師設計行動版網頁，提供一些方向給大家參考：

[首頁]

1. 如果你有找到老師的半身照片，而且老師有一些座右銘之類的，或許可參考這個風格。其實只要上面一個 div 放照片，下面的座右銘用這種 listview 。
2. 如果你有找到老師的生活照，或許可參考這個風格。也是上面一個 div 放照片，下面用這種 listview，而且選項大概就是“教學”、“服務”、“研究”三大類。
3. 如果你要放老師實驗室logo或照片當首頁，或許可參考這個風格。也是上面一個 div 放照片，下面用三個獨立的 button，選項也是“教學”、“服務”、“研究”三大類。

[研究]
老師的研究大概就是先做 publication lists，原則上就以陣列呈現 listview為主。不過...

1. 但如果又要分不同年份或出版類別呈現，可能要做兩層 listsview，第一層是年份或出版類別，第二層才是一個年份或類別的發表清單，就像這樣。
2. 另一種可能的做法是用可收闔的清單方式來呈現每個年份或類別裡面的清單。
3. 而如果你像做頁面上方有頁籤分類的方式，那就可以用 Navbars來做頁籤，而頁籤點選後要跳到那一個page就要注意相關語法 。

無論以上何種方式, 在設計時要記要用 “陣列” 的概念來呈現喔!

[教學] 或 [服務]
如果老師有在YouTube上面放一些教學應片或演講影片，那就可以參考課堂例子，在教學或服務頁面有一個可呈現YouTube影片的方式。
進入教學或服務頁面後，若有需要用一個九宮格這樣呈現該類選項，要搭配Grid語法讓icon可平均擺放整齊。

為了設計出專業的行動版網站或手機APP，在畫面上適當安插夠水準的圖示可加分不少，所以大家一定要在設計頁面時善用一些專業圖庫來豐富畫面質感，像是 www.iconpng.com、www.taopic.com 。


一定要動手做!