網路程式設計－期末專案 資工二Ｂ　Ｂ９７５７０１ 2 8　黃首翰 ~Rock your life~

Presentation on theme: "網路程式設計－期末專案 資工二Ｂ　Ｂ９７５７０１ 2 8　黃首翰 ~Rock your life~"— Presentation transcript:

1 網路程式設計－期末專案 資工二Ｂ　Ｂ９７５７０１ 2 8　黃首翰 ~Rock your life~

2 網路程式設計－期末專案 個人網站主題: rock your life 出於對音樂的喜愛以及高中時參加過吉 他社的影響，遂選擇介紹搖滾樂給大
家。

3 網路程式設計－期末專案 網站架構圖：

4 網路程式設計－期末專案 首頁： 　以自製的flash小動畫 來呈現 網頁外觀的css部份是引用css template模組

5 網路程式設計－期末專案 利用javascript的 getElementById ,onMouseover和
onMouseout來實作出當滑鼠移入時,英文轉換為中文的效果

6 網路程式設計－期末專案 aboutrock.html 一樣運用javascript的getElementById ,onMouseover和
onMouseout來實作出滑鼠移入後,圖片放大的效果

7 網路程式設計－期末專案 Music.html 上方搜尋欄可以打入要搜尋的歌曲，並用submit action的方式連到youtube
圖片點擊了會從左上角由小放大,利用到javascript,EVENT,DOM 大圖小圖皆同一張圖,用table的方式去存放。 本是用javascript的getElementsByTagName把img的大小固定,後來發現css的expression就可以做到。

8 網路程式設計－期末專案 點選別張圖片後，網頁右邊的div區塊會更改文字以及下方的音樂播放連結,下方的音樂播放實為youtube影片嵌入,只是江高度調整,只露出播放列。 更換文字的方法是用getElementById和innerHTML去做變化

9 網路程式設計－期末專案 接下來五頁皆是介紹不同類型的搖滾，放了許多youtube連結,右方兩塊div,上方連結到其他網站,而下方區塊是作為頁內書籤,點選可以到同一網頁中相對應的位置,並設有top可以返回網頁最上面。

10 網路程式設計－期末專案 五種背景顏色,利用Math.rand()和Math.floor()來讓使用者每次進入這個頁面都會隨機出現不同的顏色，並在body中onload這個function

11 網路程式設計－期末專案 利用之前作業的小遊戲,運用到javascript的function,css配置以及body onload。
下方的按鈕可以讓整個遊戲重新開始,利用的是javascript以及html的input type=button和onclick來呼叫函式。

12 網路程式設計－期末專案 ＴＨＥ　ＥＮＤ