網(wǎng)頁制作課程實踐報告

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

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

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

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

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

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

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

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

9、/p> <p>. <a href="流行.asp">流行</a> <a href="鋼琴.asp">鋼琴</a> <a href="發(fā)燒音樂.asp">發(fā)燒音樂</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">古典音樂</a> <a href="鋼琴.asp">佛教音樂</a> .|</p> <p>&nbsp;</p> <p> . <a href="鋼琴.asp">爵士</a> <a href="鋼琴.asp">二胡</a>

11、 <a href="鋼琴.asp">胎教音樂</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="熱門歌曲.asp">熱門歌曲</a> <a href="最新歌曲.asp">最新歌曲</a> <a href="榜單經(jīng)典老歌.asp">金典老歌</a> .|</p> <p>&nbsp;</p> <p>.<a href="經(jīng)典老歌.asp">熱門專輯</a> <a href="經(jīng)典老歌.asp">最新專輯</a>

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

14、;3.2 LOGO，頁尾，導航條 采用了Flash、Fireworks、Photoshop等軟件對網(wǎng)頁的Logo，頁尾以及導航條進行設計以及修飾。采用Fireworks設計了一個動態(tài)LOGO和頁尾。Logo、導航代碼：<div id="Layer1"><img src="音樂網(wǎng)logo.gif" width="1035" height="440" /> <div id="Layer2"><img src="導航.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="華語女歌手.asp" target="_parent" /><area

16、shape="rect" coords="175,32,182,37" href="#" /><area shape="rect" coords="225,65,405,114" href="華語男歌手.asp" /><area shape="rect" coords="451,41,580,91" href="華語男歌手.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="華語女歌手.asp" /><area shape="rect" coords="

18、830,31,1006,85" href="華語男歌手.asp" /></map></div></div>3.3專輯使用Dreamware運用CSS+Div對頁面進行布局，其頁面風格與主頁相似，點擊不同的專輯有對不同專輯的介紹，另外還提供了歌曲的下載。專輯代碼：<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">劉力揚</a></div> <div id="Layer13"><span class="STYLE4"><a href="專

22、輯3.asp">任賢齊</a></span></div></div>3.4數(shù)據(jù)庫 數(shù)據(jù)庫里有一個表用來儲存用戶信息的，在Dreamweaver里的checkregister頁面中應用程序下的服務器行為用了“命令”來對數(shù)據(jù)庫進行的鏈接，還有做了一個login頁面、register頁面進行登錄與注冊。會將注冊的信息儲存在數(shù)據(jù)庫中。命令代碼：<%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">賬號</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">注冊</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">賬號</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