jQuery Mobile 入門案例
【HTML5 完全入門】課程資訊頁(1)- 檔案組成

【HTML5 完全入門】課程資訊頁案例

【HTML5完全入門】課程資訊頁本身包含三個主要的頁面,彼此關係如下:


下表列舉三個頁面的功能:

說明
home.html
包含四天課程綱要連結,提供其它兩個頁面的連結。
singup.html
報名頁,報名方法的相關資訊,提供其它兩個頁面的連結。
abut.html
關於課程頁,此課程的簡要說明,提供其它兩個頁面的連結。

為了方便使用者檢視,這三個頁面同時配置彼此的連結功能。其中課程清單頁是內容最複雜的檔案,同時涵蓋了四天的課程內容資訊,並且根據日期進行分頁配置。而報名頁以及關於頁則比較單純,僅顯示相關的內容資訊。

以下從課程清單頁開始逐一討論其內容構,以下為此頁檔案所需的架構:


此頁面以清單樣式顯示四天的課程內容連結,當使用者瀏覽時,可以點選任一天以快速檢視此天的課程細節,而在每一天的課程頁,除了直接回到首頁,還能依序切換至前後緊鄰的其它日期課程頁。

課程清單主頁與其它四個分頁,所有的內容均配置於同一個網頁檔案 home.html 中,並且以 data-rloe=page 樣式進行分頁。

【HTML5 完全入門】課程資訊頁案例


沒有留言: