1、杭州職業技術學院 畢業設計（論文）（2010屆）題 目 個人音樂網站的設計系 別 專 業 班 級 姓 名 指導教師 2010年5 月20 日目 錄第1章 開發目標及內容 31.1 設計原則1.2 設計目標第2章 系統概述 52.1 系統配置需求2.2 開發要求2.3 整體框架結構2.4 技術方案第3章 系統環境配置 63.1 JSP運行環境的配置3.2 Microsoft Office Access 2003的安裝3.3 Macromedia Dreamweaver 8的安裝3.4建立站點第4章 設計過程144.1 留言板設計4.2 留言板流程圖4.3 靜態頁面設計第5章 設計心得24參考文獻

2、 25附錄或相關資料致謝個人音樂網站的設計與開發【摘要】本網站設計的主要內容是通過Dreamwerver 8網頁設計軟件來制作網頁中的文字、圖像、表格、表單、動畫和視頻等。Dreamwerver 8是一款專業的HTML編輯器，用于對Web站點、Web頁和Web應用程序進行設計、編輯和開發。通過JSP技術和數據庫Microsoft Office Access 2003這兩種軟件相結合可以實現留言板動態，瀏覽網頁者可以在我的留言板里留言，管理員可以刪除留言和回復留言。【關鍵詞】Dreamweaver；Access；JSP。第1章 開發目標及內容1.1 設計原則1.網頁內容簡單易讀我設計的網頁規劃合

3、理。這就意味著,規劃文字與背景的搭配很重要。不能使背景的顏色沖淡了文字的視覺效果,不用色彩對比強烈的色彩組合,因為讓人看網頁覺得很費勁。一般來說,淺色背景配合深色文字最佳。這個要求最好別把文字的字體設地過小,也不能過大。文字過小看起來難受;文字過大,或者文字視覺效果變化頻繁,讓人看起來不舒服。此外,文本內容應左對齊,而不是居中。按照平時的閱讀習慣，文本內容大都居左,標題一般居中,這符合讀者地閱讀習慣。2.網頁的導航清晰我設計的所有超鏈接都清晰無誤地標識出來,像圖像按鈕,都有清晰醒目的標識,讓讀者一目了然。鏈接文本的顏色用默認的:未訪問的為藍的，點擊過的為紫的。所以,我設計的文本鏈接文字或圖標與

4、頁面的其他文字有所區分,導向功能十分清晰。3.網頁風格很個性化頁面上所有的圖像、文字，背景顏色、字體、標題等我都加入了自己的風格,整體看上去非常簡潔又突出了作者的個性。這樣讀者看起來順暢,會對我的網頁留下一個專業的印象。4.頁面容量不應太大調查表明,如果一個網站的頁面在10秒之內顯示不出來,用戶會很快失去對該網站的興趣。如果用戶不能夠迅速地瀏覽我的網站,那么這個網站的設計就是不成功的。因此我在設計之前計算好了頁面容量的分配及大小。5.頁面內容要獨一無二我設計的網頁內容不落俗套,重點突出“個性”兩字,所以我在設計網站內容時結合了自身的實際情況。網上的許多個人網站,內容雜亂,題材千篇一律,從頭到尾

5、找不出一絲個性。所以,我在設計網頁時,十分注重內容的選擇。選擇內容要盡量做到少而精但必須突出個性,只有充滿個性的網站才能吸引更多的讀者。 1.2 設計目標用一目了然的鏈接，讓讀者可以更好更快地瀏覽我的內容，設計列表菜單導航，可以從中選擇相應的標題，導航簡單清晰地向讀者顯示，在 “音樂介紹”中，向讀者詮釋了音樂的本質。在首頁上列出的文字和內容，讀者看完后如果有什么建議或意見，可以在我的首頁里登錄菜單中的“給我留言”鏈接中留下留言，讀者不用注冊和登錄，只要輸入昵稱和留言即可發表留言。管理員輸入密碼進入留言板，就可以回復讀者發表的留言，也可以刪除留言。讀者只要點擊首頁的推拉門式菜單中的“E-mail

6、”就可以發E-mail給我。通過以上兩種途徑就可以實現讀者和我的交流，簡單方便。利用Photoshop圖像制作軟件創造出自己網站的LOGO，處理圖片等。通過Dreamwerver 8網頁設計軟件來制作網頁中的文字、圖像、表格、表單等。通過JSP技術和數據庫Microsoft Office Access 2003這兩種軟件相結合可以實現動態留言板功能。第2章 系統概述2.1 系統配置需求1.硬件需求CPU：PentiumIII 2.0Ghz以上內存：512MB以上硬盤剩余空間：2GB以上2.軟件需求操作系統：Windows 2000 Server或Windows XP Professional

7、SP2Web服務器：Tomcat5.0以上數據庫：SQLServer2000，或者Microsoft Office Access 20032.2 開發要求此個人網站需達到以下軟件要求和硬件要求：1) 頁面清晰，用戶使用方便；2) 系統安全、穩定，硬件需求較低；3) 各項功能完整，注冊、登陸、數據庫更新等；4) 開發成本低，風險小，效益高。2.3 整體框架結構網頁標題|導航-留言板登錄|內容-返回首頁|返回首頁2.4 技術方案圖片處理技術方案使用Adobe Photoshop圖像制作軟件對圖片進行加工處理，我使用的Photoshop版本是Photoshop8.0.1制作個人網站的LOGO的步驟：

8、打開Photoshop，在電腦目錄中打開如下JPG圖片。圖2.2 JPG圖片我要在上面添加幾個字，制作個人網站的標志，使用Photoshop左邊的工具欄圖2.3 工具欄里的“文字工具”即可在圖片上添加文字及設置字體大小和顏色，再使用“移動”工具，將文字移動要自己想要的位子，完成后如下圖所示。圖2.4 圖片添加文字第3章 系統環境的構建3.1 JSP運行環境的配置本人開發的環境是“Windows XP Professional SP2+Tomcat 5.5.25。JSP運行環境需要JDK的支持，需要安裝兩個軟件：JDK和Tomcat。3.1.1 配置Java運行環境安裝了JDK以后，就建立好了運

9、行環境，這里安裝的是JDK1.6.0_02。后面的所有步驟均采用系統的默認值，安裝完畢以后，Java的運行環境就在計算機上建立好了。3.1.2 配置JSP運行環境安裝完JDK以后，安裝Web服務器Tomcat，這里用的版本是Tomcat 5.5.25，安裝向導的第二步是安裝選項。Service選項是將Tomcat安裝成操作系統的一項服務，可以從“控制面板”中的“管理工具”中選擇“服務”啟動和停止該Web服務。這里按照Normal選項的默認設置，不選擇該服務。下面一步是選擇安裝路徑，按照系統默認的路徑就可以。接下來選擇默認的服務端口8080，在Password框中輸入密碼，這里輸入“system

10、”。下一步選擇JDK的路徑，本人選擇安裝的JDK的主目錄“F:j2sdk1.4.2”。按照默認的選項進入下一步，開始拷貝文件。安裝完畢后，在安裝目錄中選擇“Startup”啟動Web服務器。稍等片刻，可以在任務欄看到Tomcat的服務圖標。該圖標代表已經開始在8080端口提供Web服務，打開瀏覽器，在地址欄輸入“http:/localhost:8080”,可以看見Tomcat的歡迎界面。只要看到這個界面，就說明安裝成功，并且JSP的運行環境就全部配置完畢。需要注意的是：在安裝Tomcat時，如果系統中已經有其他的應用程序已經占有了8080端口，則在啟動Tomcat時會失敗，比如：在安裝Tomc

11、at之前已經安裝了Oracle數據服務器，它也提供Web服務，占用的也是8080端口。可以通過修改 Tomcat的服務端口來解決這一問題。3.1.3 配置Tomcat本人Tomcat安裝在F盤的Program Files目錄下，“F:Program Files Tomcat 5.5.25”,其中bin目錄存放系統的可執行文件，common目錄和shared目錄都有存放Tomcat運行的一些Java包和類庫。Temp目錄存放Tomcat運行的一些臨時文件。有3個目錄是需要經常訪問的：conf目錄存放Tomcat服務的配置信息，比如服務端口、虛擬目錄等；webapps目錄存放JSP程序文件；wor

12、l目錄存放JSP文件在運行時被編輯譯成的二進制文件。建立個人網站設計時所需要的文件夾：在“F:Program FilesApache Software FoundationTomcat 5.0shiyinping”中建立“ROOT”和“素材”文件夾，在ROOT文件夾里分別建立data，doc，img，pic，swf，WEB-INF文件夾。素材文件夾里存放是制作個人網站所需的.jpg和.gif圖片文件，ROOT里存放的是.jsp文件，data里存放的是.mdb數據庫文件，doc里存放的是.doc文本文件，img存放的是制作留言板頁面所需的.jpg和.gif文件，pic存放的是制作個人網站所需的.

13、jpg和.gif文件，swf存放的是.avi視頻文件。安裝完Tomcat時，在地址欄輸入“http:/localhost:8080”,自動打開了某一個文件，該文件是在“webapps”目錄下“ROOT”目錄中的“index.jsp”文件。在實際的使用中，一般需要更改兩個基本配置：服務端口和網站的根路徑。修改這兩個配置都在conf目錄的server.xml文件中。1. 修改服務端口利用記事本或者其他的文本編輯器打開server.xml文件，將port=“8080”修改為port=“8090”修改完畢后，保存該文件，然后重啟Tomcat服務器，這樣Tomcat就在8090端口提供服務了，通過“ht

14、tp:/localhose:8090”訪問Tomcat2. 修改網站的根路徑在server.xml中找到第215行，找到根目錄的配置信息，其中appbase設置了當前的網站目錄對應服務器物理路徑的地址修改前備份server.xml文件，將215行的webapps修改成某地址，我的目錄是“wangchao”這時利用“http:/local:8090”訪問的物理路徑是“wangchao”，因此在“F:Program Files Tomcat 5.5.25wangchao”里建立ROOT目錄，在ROOT目錄下建立WEB-INF目錄，重啟Tomcat服務器，從瀏覽器查看該目錄的內容。3.1.4 測試運

15、行環境第一個測試程序是Hello World程序，用記事本輸入三行，JSP區分大小寫，每條語句后面有分號，將該程序放到F:Program Files Tomcat 5.5.25wangchaoROOT文件夾中。在瀏覽器中輸入“http:/local:8090/ceshi1.jsp”，顯示結果如圖，說明JSP環境運行成功。圖3.1 測試JSP運行環境3.2 Microsoft Office Access 2003的安裝本人制作個人網站時留言板使用的數據庫軟件是Microsoft Office 2003版本，安裝步驟按照提示即可完成。3.3 Macromedia Dreamweaver 8的安裝本

16、人制作個人網站時制作網頁使用的軟件是Macromedia Dreamweaver 8，安裝步驟按照提示即可完成。3.4 建立站點完成以上3個軟件的安裝與配置，我們就可以建立站點了。3.4.1 定義站點啟動Dreamwerver 8，執行“站點”里的“管理站點”命令，打開“管理站點”對話框。單擊“新建”按鈕，選擇“站點”項，打開“站點定義”對話框，這里給站點起名為“tianlaiyinyue”。單擊“下一步”按鈕繼續。圖3.2 建立站點3.4.2 選擇服務器技術在彈出的窗口中進行服務器腳本技術的有關設置，在下拉列表中選擇“JSP”項，完成后單擊“下一步”按鈕繼續。圖3.3 站點定義3.4.3 選

17、擇存放的本地文件夾接著設置站點文件夾，因為現在是在本地測試，而且站點在“F:Program Files Tomcat 5.5.25wangchaoROOT”文件夾下，所以設置如圖所示。單擊“下一步”按鈕繼續。圖3.4 選擇文件夾3.4.4 設置本機測試的URL現在設置測試的URL，由于是在本機測試，因此設置本機測試的根目錄如圖所示。單擊“下一步”按鈕繼續進行設置。由于是在本機測試，并不需要遠程服務器參與，所以選擇“否”項。圖3.5 設置本機測試的URL單擊“下一步”按鈕繼續。窗口顯示了剛才所填寫的信息，目的是讓我們確認一下。如果發現有錯，可以單擊“上一步”按鈕返回修改設置，確認無誤后就可以單擊

18、“完成”按鈕。這時，站點就定義完成了，現在可以在Dreamweaver 8中進行網頁的設計了。第4章 設計過程4.1 留言板設計4.1.1 建立Access數據庫新建數據庫取名為users.mdb。新建表1（命名為message）表2（命名為users）如圖4.1所示圖4.1 表結構字段包括id（數字，該字段設為主鍵）、title（文本）、content（文本）、dt（日期/時間）、username（文本）、password（數字），其中content用來存放留言內容。 建立好數據庫后將users.mdb存放到C:Program FilesTomcat 5.5.25Webappswangcha

19、o文件夾下。4.1.2 建立數據源打開“控制面板”“管理工具”“數據源 (ODBC)”，選擇“系統DNS”選項卡，單擊添加，選擇“Dirver do Microsoft Access（*.mdb）”單擊完成，數據源命名為：login，單擊選擇按鈕，選擇新建數據庫位置后點確定。如圖所示圖4.2 配置ODBC數據源4.1.3 測試JSP和Access連接是否成功編寫代碼ceshi2.jsp, 如果看得到表格中的數據，說明連接數據庫成功。主要代碼如下：4.1.4 編寫留言板代碼本留言板是由8個JSP頁面組成，分別是顯示留言列表頁面（index.jsp即留言板首頁）、顯示留言頁面（list.jsp）、

20、留言頁面（lvmsg.jsp）、處理留言頁面（addmsg.jsp）、返回留言頁面（title.jsp）、登錄頁面（login.jsp）、處理登錄頁面（chklogin.jsp）、單條刪除處理頁面（drop.jsp）。將以上JSP文件存放到Tomcat 5.5.25wangchao文件夾下。（1）用戶發表留言程序流程圖：用戶進入留言板頁面index.jsp就直接可以在里面留言，無須注冊。圖4.3 發布留言流程部分代碼：if(showmas.equals(n)% （2）管理員進入留言板index.jsp，再進入留言管理login.jsp，登錄密碼就可以對留言進行添加。圖4.4 管理員功能4.2

21、留言板流程圖1.管理員操作流程圖圖4.5管理員操作流程圖4.3 靜態頁面設計1. 在個人網站首頁index.jsp的狀態欄里添加時間。制作方法：將以下代碼加入到HTML的之間即可function see() window.setTimeout(see(),1000); today = new Date(); self.status = today.toString(); 如圖所示：2.添加首頁背景音樂添加代碼即可，代碼如下：3.讓網頁的背景圖片永遠居中將以下代碼加入HEML的之間：4.動態漂浮特效!-var no = 12;var speed = 10;var heart = var flag

22、;var ns4up = (document.layers) ? 1 : 0;var ie4up = (document.all) ? 1 : 0;var dx, xp, yp;var am, stx, sty;var i, doc_width = 800, doc_height = 600;if (ns4up) doc_width = self.innerWidth;doc_height = self.innerHeight; else if (ie4up) doc_width = document.body.clientWidth;doc_height = document.body.cl

23、ientHeight;dx = new Array();xp = new Array();yp = new Array();amx = new Array();amy = new Array();stx = new Array();sty = new Array();flag = new Array();for (i = 0; i 0.5)?1:0;if (ns4up) / set layersif (i = 0) document.write(); else document.write(); elseif (ie4up) if (i = 0) document.write(); else

24、document.write();function helpor_net() for (i = 0; i doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;flagi=(Math.random() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.layersdot+i.top = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.layersdot+i.left

25、= xpi + amxi*dxi;setTimeout(helpor_net(), speed);function www_helpor_net() for (i = 0; i doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;stxi = 0.02 + Math.random()/10;styi = 0.7 + Math.random();flagi=(Math.random() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi

26、;document.alldot+i.style.pixelTop = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.alldot+i.style.pixelLeft = xpi + amxi*dxi;setTimeout(www_helpor_net(), speed);if (ns4up) helpor_net(); else if (ie4up) www_helpor_net();/- 第5章 設計心得歷經一個多月，在指導老師的幫助和自己的努力下，我排除了種種困難完成了此次個人音樂網站的設計。過程是艱辛的，但在完成畢業設計的那一刻，回想起這些天的辛苦，那都是值得的，現在