網(wǎng)頁(yè)制作課程實(shí)踐報(bào)告

1、精選優(yōu)質(zhì)文檔-傾情為你奉上北京理工大學(xué)珠海學(xué)院計(jì)算機(jī)學(xué)院網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程實(shí)踐報(bào)告題目： 音樂(lè)網(wǎng) 姓 名： 林俊賢 羅曉明 潘文杰 學(xué) 院： 計(jì)算機(jī)學(xué)院 專 業(yè)： 軟件工程 班 級(jí)： 五班 學(xué) 號(hào)： 7 2 1 指導(dǎo)教師： 孫細(xì)斌 完成日期：2011年 12 月 20日任務(wù)書(shū) 2011 2012 學(xué)年第一學(xué)期學(xué)生姓名：林俊賢 羅曉明 潘文杰 專業(yè)班級(jí)： 軟件五班 指導(dǎo)教師： 孫細(xì)斌 工作部門(mén)： 計(jì)算機(jī)學(xué)院 一、 課程實(shí)踐題目音樂(lè)網(wǎng)二、課程實(shí)踐內(nèi)容（含技術(shù)指標(biāo)）設(shè)計(jì)與實(shí)現(xiàn)音樂(lè)網(wǎng)站。實(shí)現(xiàn)如下欄目及功能：1.曲風(fēng) 榜單：提供不同曲風(fēng)，榜單的歌曲。2.導(dǎo)航：提供歌手以及其相關(guān)歌曲，可根據(jù)名字索引。

2、3.專輯：提供不同專輯的信息，以及相關(guān)信息的下載。4.LOGO，導(dǎo)航，頁(yè)尾：運(yùn)用Flash、Fireworks、Photoshop等工具進(jìn)行設(shè)計(jì)。三、進(jìn)度安排序號(hào)實(shí)踐內(nèi)容時(shí)間安排1了解實(shí)踐課程要求，確定選題第14周2首頁(yè)及各頁(yè)面的布局設(shè)計(jì)與制作第15周3數(shù)據(jù)庫(kù)及功能實(shí)現(xiàn)，網(wǎng)站測(cè)試第16周4提交實(shí)踐報(bào)告，進(jìn)行答辯第17周四、基本要求1明確網(wǎng)站的欄目和功能，并確定各組員的分工；2. 運(yùn)用Flash、Fireworks、Photoshop等工具進(jìn)行Logo和導(dǎo)航欄的設(shè)計(jì)與制作；3. 使用Dreamweaver進(jìn)行各網(wǎng)頁(yè)設(shè)計(jì)制作，學(xué)會(huì)頁(yè)面的合理布局及各布局技術(shù)的使用；4. 進(jìn)一步掌握和運(yùn)用ASP技術(shù)進(jìn)

3、行網(wǎng)站開(kāi)發(fā)的能力；5. 數(shù)據(jù)庫(kù)的設(shè)計(jì)及訪問(wèn)；6. 學(xué)會(huì)網(wǎng)頁(yè)調(diào)試和測(cè)試的基本方法；7. 掌握書(shū)寫(xiě)課程實(shí)踐文檔的能力 (撰寫(xiě)課程實(shí)踐報(bào)告)。 課程負(fù)責(zé)人簽名： 年 月 日專心-專注-專業(yè)前言音樂(lè)可以讓人消除工作緊張、減輕生活壓力、避免各類慢性疾病等等，其實(shí)這些都是有醫(yī)學(xué)根據(jù)的。在醫(yī)學(xué)研究中發(fā)現(xiàn)，經(jīng)常的接觸音樂(lè)節(jié)奏、律動(dòng)會(huì)對(duì)人體的腦波、心跳、腸胃蠕動(dòng)、神經(jīng)感應(yīng)等等，產(chǎn)生某些作用，進(jìn)而使身人身心健康。音樂(lè)無(wú)形的力量遠(yuǎn)超乎個(gè)人想象，所以聆聽(tīng)音樂(lè)、鑒賞音樂(lè)，是現(xiàn)代人極為普遍的生活調(diào)劑。 音樂(lè)到底有哪些神奇的功能呢？對(duì)健康有多少幫助呢？下列是一些資料報(bào)導(dǎo)： 1. 音樂(lè)可以讓身體放輕松，好的音樂(lè)可以紓解壓力，

4、避免因自律神經(jīng)緊張失調(diào)而導(dǎo)致慢性疾病的產(chǎn)生。 2. 音樂(lè)可以敲開(kāi)封閉的心靈，紓解憂郁苦悶的心情，甚至音樂(lè)還可以做到某些程度的心靈治療。 3. 音樂(lè)可以刺激腦部，活化腦細(xì)胞，適當(dāng)?shù)囊魳?lè)刺激對(duì)腦部的活動(dòng)有很大的幫助，甚至達(dá)到防止老化的功效。 4. 音樂(lè)可以提升創(chuàng)造力、企劃力以及刺激右腦，尤其是古典樂(lè)曲，對(duì)右腦的訓(xùn)練與發(fā)展是很有幫助的。 5. 音樂(lè)可以幫助入眠、提高免疫力、增加神經(jīng)傳導(dǎo)速率、增強(qiáng)記憶力與注意力，讓人的身心都得到適度的發(fā)展、解放。 6. 音樂(lè)的旋律可以使嬰兒呼吸平靜、心跳減緩，讓嬰兒不再哭鬧不安，也可以刺激嬰兒的大腦思維能力，讓他更聰明。目錄第一章 需求分析1.1設(shè)計(jì)該網(wǎng)站的意義 隨著

5、人民生活水平的不斷提高，人民越來(lái)越學(xué)會(huì)了享受生活。音樂(lè)已成為人民生活中不可或缺的重要部分。我國(guó)著名音樂(lè)家洗星海就說(shuō)過(guò)：“音樂(lè)是人生中最大的快樂(lè)，音樂(lè)是生活中的一股清泉，音樂(lè)是陶冶性情的熔爐?！币魳?lè)在生活中的作用是不可估量的。音樂(lè)可以調(diào)劑緊張.單調(diào)的生活，使人民的神經(jīng)得到放松，有益于健康。音樂(lè)可以給人聽(tīng)覺(jué)以愉悅，凈化人的靈魂使人的神經(jīng)得到高度的享受。音樂(lè)是一種符號(hào)，聲音符號(hào)，表達(dá)人的所思所想。它是社會(huì)行為的一種形式，通過(guò)音樂(lè)人們可以互相交流情感和生活體驗(yàn)。所以，音樂(lè)已成為人們生活中一個(gè)重要組成部分。1.2分析客戶需求 雖然人們的生活水平在不斷的提高，但是生活中仍有一部分人覺(jué)得有壓力。那么，他們?cè)?/p>

6、如何去減減壓呢？音樂(lè)就是一個(gè)不錯(cuò)的選擇。當(dāng)你覺(jué)得煩惱時(shí)，不妨放下手頭上的工作，靜靜的聽(tīng)一會(huì)音樂(lè)。如今大部分企業(yè)都配置有電腦，當(dāng)企業(yè)的員工在工作一段時(shí)間后，感覺(jué)到身心疲憊時(shí)，許多人回選擇打開(kāi)網(wǎng)頁(yè)去聽(tīng)一聽(tīng)歌。而且，現(xiàn)在的很多學(xué)生都喜歡聽(tīng)歌，他們都會(huì)經(jīng)常到一些網(wǎng)站去淘歌。這就促使了一個(gè)又一個(gè)音樂(lè)網(wǎng)站的誕生。第二章總體設(shè)計(jì)2.1 整體結(jié)構(gòu)的設(shè)計(jì)頁(yè)面框架的設(shè)計(jì)：主頁(yè)包括LOGO，導(dǎo)航，頁(yè)尾，專輯區(qū)，曲風(fēng)，榜單等；主頁(yè)主要運(yùn)用到了Dreamware軟件的CSS+Div和層對(duì)其進(jìn)行排版，而LOGO，導(dǎo)航，頁(yè)尾的設(shè)計(jì)就運(yùn)用到了Filework,Flash等工具。其他每個(gè)子頁(yè)面的LOGO和導(dǎo)航還有頁(yè)尾都是與主頁(yè)

7、相同。結(jié)構(gòu)圖：登錄頁(yè)面主頁(yè)注冊(cè)頁(yè)面登錄失敗頁(yè)面主頁(yè)歌手曲風(fēng)榜單專輯今日推薦歌手歌曲各類曲風(fēng)榜單歌曲各類專輯2.2 欄目設(shè)計(jì)說(shuō)明 因?yàn)榇司W(wǎng)站是一個(gè)音樂(lè)網(wǎng)站，音樂(lè)是必須有的，但有音樂(lè)時(shí)怎樣讓用戶更好的聽(tīng)到自己喜歡的音樂(lè)呢？所以欄目的設(shè)計(jì)就變得很重要了。首先，要有導(dǎo)航，讓用戶有一個(gè)首要想聽(tīng)的歌手是男的還是女的，什么國(guó)家的。所以導(dǎo)航就有華語(yǔ)男歌手、華語(yǔ)女歌手、華語(yǔ)組合、歐美男歌手、歐美女歌手。如果對(duì)歌手沒(méi)什么要求的話，另外還有不同曲風(fēng)、不同榜單的欄目可以選擇。更或許用戶現(xiàn)在很矛盾不知道聽(tīng)什么歌曲比較好時(shí)，這樣，這里還有今天推薦的最新歌曲，還有推薦的流行專輯讓用戶在矛盾的同時(shí)也能找到舒適的曲目。音樂(lè)網(wǎng)站

8、主旨是為了讓用戶能放松心情，舒展壓力，讓用戶聽(tīng)后感覺(jué)到舒適、幸福吧。欄目的主要有：logo、導(dǎo)航、專輯、曲風(fēng)、榜單、今日推薦、頁(yè)腳等組成。第三章詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)3.1曲風(fēng)、榜單曲風(fēng)和榜單還有今日推薦這三部分的做法是類似的，它的子頁(yè)面都是用到了CSS+Divl來(lái)布局整個(gè)頁(yè)面的，然后部分用到層來(lái)鑲嵌內(nèi)容。頁(yè)面的LOGO和頁(yè)尾與主頁(yè)相同，以粉紅色為背景。點(diǎn)擊進(jìn)去就能看到不同曲風(fēng)，各種排行榜的歌曲。曲風(fēng)代碼：<div class="STYLE1" id="qufeng"> <p class="STYLE5">曲風(fēng)<

9、/p> <p>. <a href="流行.asp">流行</a> <a href="鋼琴.asp">鋼琴</a> <a href="發(fā)燒音樂(lè).asp">發(fā)燒音樂(lè)</a> <a href="經(jīng)典老歌.asp">經(jīng)典老歌</a> .| </p> <p>&nbsp; </p> <p>. <a href="古箏.asp">古

10、箏</a> <a href="鋼琴.asp">鄉(xiāng)村</a> <a href="鋼琴.asp">古典音樂(lè)</a> <a href="鋼琴.asp">佛教音樂(lè)</a> .|</p> <p>&nbsp;</p> <p> . <a href="鋼琴.asp">爵士</a> <a href="鋼琴.asp">二胡</a>

11、 <a href="鋼琴.asp">胎教音樂(lè)</a> <a href="鋼琴.asp">兒童歌曲</a> .| </p> <p>_</p></div>榜單代碼：<div class="STYLE2" id="bangdan"> <p>&nbsp;</p> <p class="STYLE5">榜單 </p> <p>.<

12、a href="熱門(mén)歌曲.asp">熱門(mén)歌曲</a> <a href="最新歌曲.asp">最新歌曲</a> <a href="榜單經(jīng)典老歌.asp">金典老歌</a> .|</p> <p>&nbsp;</p> <p>.<a href="經(jīng)典老歌.asp">熱門(mén)專輯</a> <a href="經(jīng)典老歌.asp">最新專輯</a>

13、 <a href="經(jīng)典老歌.asp">電視劇歌曲</a>.|</p> <p>&nbsp;</p> <p> .<a href="經(jīng)典老歌.asp">熱門(mén)歌手</a> <a href="經(jīng)典老歌.asp">情歌對(duì)唱</a> <a href="經(jīng)典老歌.asp">新媒體流行榜</a>|</p> <p>_ </p></div>

14、;3.2 LOGO，頁(yè)尾，導(dǎo)航條 采用了Flash、Fireworks、Photoshop等軟件對(duì)網(wǎng)頁(yè)的Logo，頁(yè)尾以及導(dǎo)航條進(jìn)行設(shè)計(jì)以及修飾。采用Fireworks設(shè)計(jì)了一個(gè)動(dòng)態(tài)LOGO和頁(yè)尾。Logo、導(dǎo)航代碼：<div id="Layer1"><img src="音樂(lè)網(wǎng)logo.gif" width="1035" height="440" /> <div id="Layer2"><img src="導(dǎo)航.jpg" width=

15、"1034" height="127" border="0" usemap="#Map" lowsrc="專輯1.asp" /><map name="Map" id="Map"><area shape="rect" coords="12,36,176,91" href="華語(yǔ)女歌手.asp" target="_parent" /><area

16、shape="rect" coords="175,32,182,37" href="#" /><area shape="rect" coords="225,65,405,114" href="華語(yǔ)男歌手.asp" /><area shape="rect" coords="451,41,580,91" href="華語(yǔ)男歌手.asp" /><area shape="rect

17、" coords="613,65,793,121" href="#" /><area shape="rect" coords="781,119,782,124" href="#" /><area shape="rect" coords="787,121,793,122" href="華語(yǔ)女歌手.asp" /><area shape="rect" coords="

18、830,31,1006,85" href="華語(yǔ)男歌手.asp" /></map></div></div>3.3專輯使用Dreamware運(yùn)用CSS+Div對(duì)頁(yè)面進(jìn)行布局，其頁(yè)面風(fēng)格與主頁(yè)相似，點(diǎn)擊不同的專輯有對(duì)不同專輯的介紹，另外還提供了歌曲的下載。專輯代碼：<div class="STYLE7" id="Layer4">推薦專輯 <div id="Layer8"><a href="專輯4.asp"><

19、;img src="4.jpg" width="198" height="160" border="0" /></a><div class="STYLE4" id="Layer14"><a href="專輯4.asp">郭易</a></div> <div id="Layer12"><span class="STYLE4"><

20、;a href="專輯2.asp">五月天</a></span></div> <div id="Layer9"><a href="專輯5.asp"><img src="5.jpg" width="198" height="160" border="0" /></a><div class="STYLE4" id="Layer15&qu

21、ot;><a href="專輯5.asp">任家萱</a></div> </div> </div><div class="STYLE4" id="Layer11"><a href="專輯1.asp">劉力揚(yáng)</a></div> <div id="Layer13"><span class="STYLE4"><a href="專

22、輯3.asp">任賢齊</a></span></div></div>3.4數(shù)據(jù)庫(kù) 數(shù)據(jù)庫(kù)里有一個(gè)表用來(lái)儲(chǔ)存用戶信息的，在Dreamweaver里的checkregister頁(yè)面中應(yīng)用程序下的服務(wù)器行為用了“命令”來(lái)對(duì)數(shù)據(jù)庫(kù)進(jìn)行的鏈接，還有做了一個(gè)login頁(yè)面、register頁(yè)面進(jìn)行登錄與注冊(cè)。會(huì)將注冊(cè)的信息儲(chǔ)存在數(shù)據(jù)庫(kù)中。命令代碼：<%set Command1 = Server.CreateObject("ADODB.Command")Command1.ActiveConnection = MM_lo

23、gin1_STRINGCommand1.CommandText = "INSERT INTO test (userid,password,address,sex,photo) VALUES ('" + Replace(Command1_euserid, "'", "''") + "','" + Replace(Command1_epassword, "'", "''") + "',

24、9;" + Replace(Command1_eaddress, "'", "''") + "','" + Replace(Command1_esex, "'", "''") + "','" + Replace(Command1_ephoto, "'", "''") + "') "Command1

25、.CommandType = 1Command1.CommandTimeout = 0Command1.Prepared = trueCommand1.Execute()%>登錄用戶代碼：<form METHOD="POST" ACTION="<%=MM_LoginAction%>" id="form1" name="form1"> <table width="285" height="106" border="1"&g

26、t; <tr> <td width="82"><div align="center">賬號(hào)</div></td> <td width="167"><label> <div align="center"> <input name="textid" type="text" class="test1" id="textid" /> &l

27、t;/div> </label></td> </tr> <tr> <td><div align="center">密碼</div></td> <td><div align="center"> <input name="textpw" type="password" class="test1" id="textpw" /> <label

28、></label> </div></td> </tr> </table> <p>&nbsp;</p> <p> <input name="Submit" type="submit" class="text" value="登錄" /> <a href="register.asp">注冊(cè)</a> </p> </form>插入記錄代碼

29、：<form METHOD="POST" ACTION="<%=MM_LoginAction%>" id="form1" name="form1"> <table width="285" height="106" border="1"> <tr> <td width="82"><div align="center">賬號(hào)</div>&

30、lt;/td> <td width="167"><label> <div align="center"> <input name="textid" type="text" class="test1" id="textid" /> </div> </label></td> </tr> <tr> <td><div align="center

31、">密碼</div></td> <td><div align="center"> <input name="textpw" type="password" class="test1" id="textpw" /> <label></label> </div></td> </tr> </table> <p>&nbsp;</p> <p> <input name="Submit" type="submit" class="text" value="登錄" /&g