網路程式設計期末專案 Master Drummer 資工3A B97570011 陳天盛.

Presentation on theme: "網路程式設計期末專案 Master Drummer 資工3A B97570011 陳天盛."— Presentation transcript:

1 網路程式設計期末專案 Master Drummer 資工3A B 陳天盛

2 網站簡介

3 Why “Master Drummer” ? 由於我在大一、大二時，曾在熱音社組 團擔任鼓手，因為對爵士鼓的熱愛，因此希
望能做一個有關於爵士鼓的網頁。 “Master Drummer”，顧名思義就是大師 級的鼓手，希望有一天我也能成為大師級鼓 手的一份子!!

4 網站架構圖 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

5 主頁(main.html)

6 支援瀏覽器 建議：Firefox、Opera Chrome 和 Safari 於 playDrum.html 頁面會有些許問題
尚未測試：IE9

7 技術應用

8 基本應用 XHTML Javascript DOM 皆有應用到

9 課外應用(1) HTML5： CSS3： <audio>：爵士鼓音效播放
rgba(5%,5%,5%,0.6) 背景函式，參數分別為R G B 和 透明度 border-radius：調整border的四個角落為圓角 text-shadow：字體加上陰影 opacity：元件透明度 background-size：調整背景圖大小 overflow-y：調整上下捲軸是否顯示

10 課外應用(2) JQuery： animate()函式，讓選單由橫向展開(閉合)，並搭配透 明度變化 tricky：因為網頁的主題position是relative，不可用 CSS調整width，所以在開啟網頁時，就會偷偷啟動 了animate()來 調整width......

11 課外應用(3) Database： 用 AppServe 架了一個資料庫，並且到 申請了無IP的網址服務，用來定位浮動IP。 資料庫內只有記錄user資料，共有id, name, password, , sex 5個欄位。

12

13 課外應用(4) PHP： 搭配資料庫，完成註冊、登入、查詢的功能，並且 使用課本CH23.7章的dynamic content來驗證使用者輸入 是否正確。

14 課外應用(5) YUI： 使用 Tabview 做出頁籤的效果

15 課外應用(6) ( I ) 嵌入youtube videobar ： 嵌入youtube ：
(含Google Search 和 Google Search Ajax) 由youtube api所提供的範例，用迴圈分別設定 search key並建立多個videobar，分別放置各個鼓手介 紹網頁。

16 課外應用(7) - Youtube ( II ) 嵌入youtube 播放器： (含Google Ajax)
由youtube api所提供的範例，用一個dropdownlist加上 一個按鈕來「即時」更換影片的內容(更換影片id)

17 課外應用(8) - Facebook 嵌入facebook「讚」按鈕