網路程式設計期末專案 Master Drummer 資工3A B97570011 陳天盛
網站簡介
Why “Master Drummer” ? 由於我在大一、大二時，曾在熱音社組 團擔任鼓手，因為對爵士鼓的熱愛，因此希 望能做一個有關於爵士鼓的網頁。 “Master Drummer”，顧名思義就是大師 級的鼓手，希望有一天我也能成為大師級鼓 手的一份子!!
網站架構圖 Main.html Database Iframe register.html dynamicRegister.php login.html dynamicLogin.php Database search.php homepage.html masterDrummer.html playDrum.html acheiveMaster.html download.html
主頁(main.html)
支援瀏覽器 建議：Firefox、Opera Chrome 和 Safari 於 playDrum.html 頁面會有些許問題 尚未測試：IE9
技術應用
基本應用 XHTML Javascript DOM 皆有應用到
課外應用(1) HTML5： CSS3： <audio>：爵士鼓音效播放 rgba(5%,5%,5%,0.6) 背景函式，參數分別為R G B 和 透明度 border-radius：調整border的四個角落為圓角 text-shadow：字體加上陰影 opacity：元件透明度 background-size：調整背景圖大小 overflow-y：調整上下捲軸是否顯示
課外應用(2) JQuery： animate()函式，讓選單由橫向展開(閉合)，並搭配透 明度變化 tricky：因為網頁的主題position是relative，不可用 CSS調整width，所以在開啟網頁時，就會偷偷啟動 了animate()來 調整width......
課外應用(3) Database： 用 AppServe 架了一個資料庫，並且到 http://www.no-ip.com/ 申請了無IP的網址服務，用來定位浮動IP。 資料庫內只有記錄user資料，共有id, name, password, email, sex 5個欄位。
課外應用(4) PHP： 搭配資料庫，完成註冊、登入、查詢的功能，並且 使用課本CH23.7章的dynamic content來驗證使用者輸入 是否正確。
課外應用(5) YUI： 使用 Tabview 做出頁籤的效果
課外應用(6) ( I ) 嵌入youtube videobar ： 嵌入youtube ： (含Google Search 和 Google Search Ajax) 由youtube api所提供的範例，用迴圈分別設定 search key並建立多個videobar，分別放置各個鼓手介 紹網頁。
課外應用(7) - Youtube ( II ) 嵌入youtube 播放器： (含Google Ajax) 由youtube api所提供的範例，用一個dropdownlist加上 一個按鈕來「即時」更換影片的內容(更換影片id)
課外應用(8) - Facebook 嵌入facebook「讚」按鈕