主題: 認識日本女排 NTOU 資工3B 黃振傑 NTOU 資工3A 蘇暉博

Presentation on theme: "主題: 認識日本女排 NTOU 資工3B 黃振傑 NTOU 資工3A 蘇暉博"— Presentation transcript:

1 主題: 認識日本女排 NTOU 資工3B 00157139 黃振傑 NTOU 資工3A 00157035 蘇暉博
網路程式設計 期末專案規劃 主題: 認識日本女排 NTOU 資工3B 黃振傑 NTOU 資工3A 蘇暉博

2 網站與一般網站不同點在哪裡？ 像我當初想認識日本女排的時候，首先面臨的問題便是背號上的英文名字與他們的漢字名字對應不起來，像是Kimura Saori 便是木村紗織。 而後為了瞭解他們的生涯戰績 所屬職業隊 以及擅長位置等等，便只能在知道名字後 一個個查維基百科或相關網站，而有關日本女排的戰績以及每年的球員名單也是如此。 那時就有在想如果 有一個網站 把所有跟日本女排的相關事蹟以及選手資料都包含在內，對他們的台灣粉絲來說一定非常方便。

3 網站主題: 認識日本女排 網站架構

4 HOME.html 設計者: 黃振傑 開頭放上日本女排久違32年再次進到前3的感人影片，在首頁當然是要先抓住瀏覽者的 心。
使用技術: HTML5, CSS,TABLE 設計者: 黃振傑

5 Japan volley history.html
列出日本女排歷屆團隊的戰績及陣容，以及球員個人奪得獎項。 並附上各大賽事以及各贊助商的LOGO與連結網站 使用技術: HTML5, CSS,TABLE 設計者: 黃振傑

6 Players.html 先以國家隊圖片介紹各明星球員 中間 iframe 他們最精華的排球影片
再來用TABLE做詳細的球員介紹的漢名英文名、背號、打得位置、 身高體重 最高打點 所屬職業隊等等 最後在放上 職業隊的圖片 使用技術: HTML5, CSS 設計者: 黃振傑 (每個球員都是我花了很大的心力與時間，去蒐集他們 精華圖片與影片， 所有基本資料也是從多個網站對比而寫出的)

7 Photos.html 提供很多張日本女排的比賽照、團體照、及其他許多更精采的照片， 並提供點小圖可以轉換成大圖的功能。
所放上去的圖片都是解析度大的照片 看起來絕對精采 使用技術: HTML5, CSS, JavaScript 設計者: 黃振傑

8 Vote.html 提供瀏覽者 對網頁提供的各球員進行投票，並會把票數累積上去。
不太會做server端的操作 剛好又看到網路上有供部落客iframe自己設計的免費投票表格 於是便直接使用 第一次進入可以做投票 而之後進入便只能看所有投票結果 以防灌票 使用技術: HTML5, CSS 設計者: 黃振傑

9 Game.html 遊戲主要是用了JavaScript 的canvas來畫卡牌跟框架的部分 判定點擊用了mouse event
計時器的功能用到interval來實做 最後的排名板用到localStorage來寫入玩家的排名及資料 使用技術: HTML5, CSS, JavaScript 設計者: 蘇暉博

10 Messageboard.html 關於我們兩位作者的自我介紹。 製作一個留言板 可以讓瀏覽者進行留言 或著是寫下對使用此網站的心得等等。
製作一個留言板 可以讓瀏覽者進行留言 或著是寫下對使用此網站的心得等等。 作者介紹的部分用了比較簡單的CSS跟HTML的語法 留言則是因為不太會做server端的操作所以直接上網申請一個免費的留言版再用iframe的方式加入 使用技術: HTML5, CSS, 設計者: 蘇暉博

11 暫定分工: END 黃振傑: 日本女排相關照片及詳細資料以及歷年戰績的蒐集與查詢 與製作PPT檔。
Home.html History.html Players.html Photos.html Vote.html 蘇暉博: 構思與設計小遊戲與留言版功能。 Game.html Messageboard.html END