個人商業(yè)網(wǎng)站的創(chuàng)作與實(shí)現(xiàn)畢業(yè)論文定稿

1、<p><b>　　江西科技師范大學(xué)</b></p><p><b>　　畢業(yè)設(shè)計（論文）</b></p><p>　　2013年 5 月 14 日</p><p><b>　　目 錄</b></p><p><b>　　1.引言1</b>

2、</p><p>　　1.1.課題來源1</p><p>　　1.2.系統(tǒng)現(xiàn)狀及發(fā)展趨勢1</p><p>　　1.3.系統(tǒng)開發(fā)的目的和意義2</p><p>　　2.關(guān)鍵技術(shù)介紹2</p><p>　　2.1.MVC模式介紹3</p><p>　　2.2.ASP介紹3&

3、lt;/p><p>　　2.3.Dreamweaver介紹3</p><p>　　2.4.PHOTOSHOP介紹4</p><p>　　2.5.CSS+DIV介紹4</p><p>　　3.系統(tǒng)需求分析5</p><p>　　3.1.系統(tǒng)目標(biāo)5</p><p>　　3.2.系統(tǒng)

4、可行性分析6</p><p>　　3.2.1.系統(tǒng)可行性分析方法6</p><p>　　3.2.2.技術(shù)可行性分析6</p><p>　　3.2.3.經(jīng)濟(jì)可行性分析6</p><p>　　3.2.4.可行性分析結(jié)論6</p><p>　　3.3.系統(tǒng)需求分析6</p><p&g

5、t;　　3.3.1.系統(tǒng)需求分析概述6</p><p>　　3.4.系統(tǒng)功能需求分析7</p><p>　　4.系統(tǒng)總體設(shè)計7</p><p>　　4.1.系統(tǒng)總體設(shè)計方法7</p><p>　　4.2.系統(tǒng)整體框架圖7</p><p>　　4.3.整個系統(tǒng)功能模塊圖8</p>&

6、lt;p>　　4.3.1.數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計10</p><p>　　4.4.開發(fā)環(huán)境13</p><p>　　5.系統(tǒng)設(shè)計和實(shí)現(xiàn)13</p><p>　　5.1.系統(tǒng)模塊設(shè)計13</p><p>　　5.1.1.Flash特色頁面的實(shí)現(xiàn)13</p><p>　　5.1.2.周杰倫相冊的實(shí)現(xiàn)

7、16</p><p>　　5.1.3.音樂試聽功能的實(shí)現(xiàn)18</p><p>　　5.1.4.視頻觀看功能的實(shí)現(xiàn)19</p><p>　　5.1.5.新聞瀏覽功能的實(shí)現(xiàn)21</p><p>　　5.1.6.自動變化隱現(xiàn)功能的實(shí)現(xiàn)22</p><p>　　5.1.7.主頁友情鏈接 排行榜以及新聞自動浮

8、動功能的實(shí)現(xiàn)23</p><p>　　5.2.網(wǎng)站測試25</p><p>　　5.2.1.網(wǎng)站運(yùn)行環(huán)境25</p><p>　　5.2.2.鏈接測試25</p><p>　　5.2.3.檢查布局的一致性25</p><p>　　6.總結(jié)與展望25</p><p>　　6.

9、1.關(guān)于網(wǎng)站建設(shè)的總結(jié)25</p><p>　　6.2.關(guān)于網(wǎng)站建設(shè)的展望26</p><p><b>　　7.結(jié)束語26</b></p><p><b>　　致 謝27</b></p><p><b>　　參考文獻(xiàn)28</b></p><

10、;p>　　個人商業(yè)網(wǎng)站的創(chuàng)作與實(shí)現(xiàn)</p><p>　　摘要：為了推動未來未來個人網(wǎng)站的快速形成,我們的社會應(yīng)該降低文化創(chuàng)意領(lǐng)域的創(chuàng)業(yè)門檻。最近關(guān)于個人商業(yè)網(wǎng)站甚至偶像個人網(wǎng)站的議論非常多,其中對此最敏感的當(dāng)屬偶像網(wǎng)站個人站長。為個人偶像創(chuàng)作的商業(yè)網(wǎng)站體現(xiàn)的是對個人偶像明星的崇拜與致敬,大多數(shù)的明星商務(wù)論壇都是是以個人網(wǎng)站的形態(tài)開始的。本文就個人偶像商業(yè)網(wǎng)站的設(shè)計與制作，以軟件工程的方法對全過程進(jìn)行了分析與

11、研究.</p><p>　　Web站點(diǎn)是向用戶或潛在客戶提供信息(包括產(chǎn)品和服務(wù))的一種方式，其多代表的是大部分個人對偶像的信息掌握的欲望與期望，它所代表的一般就是信息提供與功能實(shí)現(xiàn)，所以一般體現(xiàn)在偶像明星的音樂試聽實(shí)現(xiàn)與視頻功能實(shí)現(xiàn)，如果還要加一句的話，那可能就是通過后臺登陸實(shí)現(xiàn)商業(yè)購買音樂版權(quán)以及實(shí)現(xiàn)最新音樂試聽以及下載時所體現(xiàn)的商業(yè)購買行為，這種行為所代表的是個人通過商業(yè)網(wǎng)站的一種自給自足的方式，實(shí)現(xiàn)了自我

12、欲望的實(shí)現(xiàn)，也有自我價值的實(shí)現(xiàn)，是一個很好的雙向或單向的音樂交流與購買網(wǎng)站實(shí)現(xiàn)。所以個人商業(yè)網(wǎng)站，我們也可以稱其為“音樂主題網(wǎng)站”，圍繞著周杰倫先生的個人圖片及音樂的展播投入了大量的設(shè)計與創(chuàng)作，能夠很好體現(xiàn)個人商業(yè)網(wǎng)站的特點(diǎn)與優(yōu)勢。</p><p>　　關(guān)鍵詞：ASP；個人商業(yè)網(wǎng)站的創(chuàng)作與實(shí)現(xiàn)；HTMl純文本網(wǎng)頁；Dreamweaver；CSS；系統(tǒng)的設(shè)計與開發(fā)；Hyper text</p><

13、;p><b>　　引言</b></p><p>　　在線聽音樂適合年輕一代以及潮流的一代.它給人們提供了查找音樂的便利和下載音樂的快速,尤其對于喜愛各種音樂的人來說,可以省掉很多時間. 音樂網(wǎng)站的設(shè)計有動態(tài)與靜態(tài)之分還有可簡可繁.本人制作的是靜態(tài)音樂網(wǎng)站。而本網(wǎng)站使用了CSS+DIV網(wǎng)頁布局。外加了js特效而成的原創(chuàng)作品。</p><p>　　這個音樂網(wǎng)站體現(xiàn)

14、的主要特色是在運(yùn)用的技術(shù)HTML文本創(chuàng)作網(wǎng)站和css方式以及DIV布局，在接下來的論文分析中，我會主要的 介紹這些技術(shù)的產(chǎn)生與成功運(yùn)用。關(guān)于js特效也會有較大篇幅教科書式的介紹，讓讀者能夠更好的了解分析一篇成功的論文的意義或重要性。</p><p><b>　　課題來源</b></p><p>　　World Wide Web是Internet上發(fā)展最快的領(lǐng)域，最初W

15、WW的發(fā)展目的礙于通過網(wǎng)絡(luò)來傳輸，一個可以同時顯示文字，聲音，圖形及影響的多媒體系統(tǒng)，是得網(wǎng)絡(luò)上的信息實(shí)現(xiàn)交換，不僅僅局限于文字模式，Web是在超文本基礎(chǔ)上面形成的巨大信息網(wǎng)，Web時有許多的站點(diǎn)構(gòu)成。在這種背景下各種企業(yè)，公司，學(xué)校等的網(wǎng)站誕生了，這種網(wǎng)站一般都體現(xiàn)與表達(dá)了這個企業(yè)或單位的基本信息與 環(huán)境。</p><p>　　在21世紀(jì)的今天，越來越凸顯出來的網(wǎng)站泛濫問題引起了社會的思考，個人網(wǎng)站的出現(xiàn)更加體

16、現(xiàn)了網(wǎng)站的普及以及技術(shù)的公眾化。青少年會在青春期特別迷戀或者說喜歡自己所向往的偶像明星或者對象。本課題的出現(xiàn)體現(xiàn)的當(dāng)下最流行的偶像明星周杰倫的一個個人音樂網(wǎng)站，并不是想通過這個網(wǎng)站來達(dá)到宣傳個人主義的目的而是通過個人明星的網(wǎng)站的建設(shè)更加體現(xiàn)js特效以及asp語言的特殊應(yīng)用，讓網(wǎng)頁不止停留在HTML這種古老的年代。</p><p><b>　　系統(tǒng)現(xiàn)狀及發(fā)展趨勢</b></p>

17、<p>　　個人商業(yè)網(wǎng)站，即Individual Commercial Website System 。它利用計算機(jī)技術(shù)，使各種音樂與偶像愛好者能夠更好的與偶像接觸，從而形成由計算機(jī)網(wǎng)絡(luò)技術(shù)構(gòu)成的服務(wù)于普通的音樂愛好者的一個商業(yè)網(wǎng)站系統(tǒng)。</p><p>　　明星個人商業(yè)網(wǎng)站在國內(nèi)外很多地方使用已經(jīng)相當(dāng)?shù)钠毡?，國外的該類網(wǎng)站系統(tǒng)發(fā)展的相對比較成熟。在國內(nèi)，計算機(jī)使用比較盛行，有一些名人的個人網(wǎng)站發(fā)展的比

18、較成熟。如現(xiàn)在讓大家耳熟能詳?shù)狞S曉明，周杰倫，以及許嵩等明星的個人網(wǎng)站或論壇。這些給粉絲或者音樂或者電影愛好者（潛在消費(fèi)者）帶來極大的方便。但由于人們的生活水平越來越高，對自己關(guān)注的各類偶像明星的信息也越來越在意與要求具體，現(xiàn)行的許多綜合型網(wǎng)站或論壇已經(jīng)無法滿足各類社會網(wǎng)民的需要與要求，許多功能還亟待完善與更新。雖然國內(nèi)的大部分個人商業(yè)網(wǎng)站維護(hù)與保持較不完善，但在我國科技迅速發(fā)展的今天，其發(fā)展前景將十分令人期待。尤其是在近幾年，伴隨著計

19、算機(jī)網(wǎng)站建設(shè)技術(shù)在社會上的高速普及，越來越多的人能夠單獨(dú)的完成一個網(wǎng)站的建立與維護(hù)，讓明星個人網(wǎng)站的更新與升級的呼聲也越來越高，在這種背景與氛圍下面一個良好界面，功能齊全，互動方式齊全的網(wǎng)站是對一個明星藝人形象的維護(hù)與基本尊重。對于專業(yè)方向出現(xiàn)的HTML，css，div，以及jsp技術(shù)要求也越來越高。</p><p>　　系統(tǒng)開發(fā)的目的和意義</p><p>　　伴隨著21轟炸性量信息時代

20、的到來，信息的種類、數(shù)量越來越多，容量也越來越大。對于出現(xiàn)的各類網(wǎng)絡(luò)癱瘓與擁擠問題當(dāng)今社會越來越凸顯出來，這就尤其體現(xiàn)在了社會名人的個人網(wǎng)站對于網(wǎng)絡(luò)網(wǎng)民所造成的困擾與擔(dān)憂。在競爭越來越激烈的今天，隨著科學(xué)技術(shù)的不斷提高,計算機(jī)科學(xué)日漸成熟，其強(qiáng)大的功能已為人們深刻認(rèn)識。計算機(jī)已進(jìn)入人類社會的各個領(lǐng)域并發(fā)揮著越來越重要的作用。而使用計算機(jī)對網(wǎng)絡(luò)信息管理已經(jīng)成為一種趨勢，使用計算機(jī)軟件編輯名人個人商業(yè)網(wǎng)站，搭建個人網(wǎng)站的優(yōu)良框架與形式已經(jīng)成

21、為必然。周杰倫中文網(wǎng)就是在這樣環(huán)境下應(yīng)運(yùn)而生，其開發(fā)的整體任務(wù)是實(shí)現(xiàn)明星個人信息的系統(tǒng)化、規(guī)范化、科學(xué)化，從而達(dá)到有效名人生活信息公開的目的。因此，開發(fā)這樣一個網(wǎng)站是非常有必要的。</p><p>　　在制作網(wǎng)頁的過程中，使用了js特效，產(chǎn)生的一些圖片切換特效，使用了csss+div的方式為主體，使用了行為這一功能，能夠以最好的方式回敬社會上面支持個人明星的群眾與團(tuán)體。</p><p>&

22、lt;b>　　關(guān)鍵技術(shù)介紹</b></p><p>　　本設(shè)計構(gòu)架采用MVC分層設(shè)計思想，分別為模型層、視圖層、與控制層，這樣的目的是使項(xiàng)目耦合度低、可擴(kuò)展性高，便于維護(hù)。</p><p>　　其中模型層則表示現(xiàn)實(shí)事物所抽象出的代碼數(shù)據(jù)庫模型，由于本設(shè)計所設(shè)計的數(shù)據(jù)量較小，所以后臺數(shù)據(jù)庫采用Access數(shù)據(jù)庫。</p><p><b>　

23、　MVC模式介紹</b></p><p>　　MVC（Model、 View、 Controller），是一種軟件設(shè)計的思想典范，是把數(shù)據(jù)顯示與業(yè)務(wù)邏輯分離的方法。如圖2.1所示：</p><p>　　圖1 MVC設(shè)計思想</p><p>　　MVC思想把WEB項(xiàng)目分成三層，視圖層、模型層、控制器：</p><p><b&

24、gt;　　ASP介紹</b></p><p>　　ASP是一種服務(wù)器端腳本編寫環(huán)境，可以用來創(chuàng)建和運(yùn)行動態(tài)網(wǎng)頁或Web應(yīng)用程序。ASP網(wǎng)頁可以包含HTML標(biāo)記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁中添加交互式內(nèi)容（如在線表單），也可以創(chuàng)建使用HTML網(wǎng)頁作為用戶界面的web應(yīng)用程序。</p><p>　　Dreamweaver介紹</p>&l

25、t;p>　　Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令人無法想象。進(jìn)階表格編輯功能使用戶簡單的選擇單格、行、欄或作不連續(xù)的選取。甚至可以排序或格式化表格群組。Dreamweaver 支持精準(zhǔn)定位，可輕易轉(zhuǎn)換成表格的圖層以拖、拉、置、放的方式進(jìn)行版面配置。所見即所得 Dreamwea

26、ver成功整合動態(tài)式視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支持能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT，Tango與自行發(fā)展的應(yīng)用軟件。當(dāng)使用Dreamweaver設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，使得不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。</p><p>　　夢幻模版和XML Dreamweaver將內(nèi)容與設(shè)計分開，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作

27、網(wǎng)頁編輯。建立網(wǎng)頁外觀的模版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容。即使不小心改變既定的樣式，也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計的網(wǎng)頁，可以呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支持和鼠標(biāo)換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器指示功能

28、，Dreamweaver可以告知在不同瀏覽器上執(zhí)行的效果如何。當(dāng)有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站上下載它的描述檔，便可得知詳盡的成效報告。</p><p>　　PHOTOSHOP介紹</p><p>　　Adobe Photoshop，簡稱“PS”，是一個由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多

29、的編修與繪圖工具，可以更有效的進(jìn)行圖片編輯工作。2003年，Adobe將Adobe Photoshop 8更名為Adobe Photoshop CS。因此，最新版本Adobe Photoshop CS6是Adobe Photoshop中的第13個主要版本。</p><p><b>　　CSS+DIV介紹</b></p><p>　　級聯(lián)樣式表（Cascading St

30、yle Sheet）簡稱“CSS”，通常又稱為“風(fēng)格樣式表（Style Sheet），它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計的。比如，如果想讓鏈接字未點(diǎn)擊時是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。</p><p>　　當(dāng)我們把 CS

31、S-P 用到 DIV 中去以后，我們就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以后可用JavaScript來控制它， 比如說移動它或改變它的一些性質(zhì)等等。</p><p>　　給層次取什么名字是隨意的，名字可以是任何英文字母和數(shù)字，但第一個必須是字母。有兩種把 CSS-P 應(yīng)用到

32、DIV 的方法。當(dāng)我們把 CSS-P 用到 DIV 中去以后，我們就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以后可用JavaScript來控制它， 比如說移動它或改變它的一些性質(zhì)等等。</p><p>　　給層次取什么名字是隨意的，名字可以是任何英文字母和數(shù)字，但第一個必須是字母。

33、有兩種把 CSS-P 應(yīng)用到 DIV 的方法</p><p><b>　　系統(tǒng)需求分析</b></p><p>　　在軟件工程中，需求分析指的是在建立一個新的或改變一個現(xiàn)存的電腦系統(tǒng)時描寫新系統(tǒng)的目的、范圍、定義和功能時所要做的所有的工作。 </p><p><b>　　系統(tǒng)目標(biāo)</b></p><p&

34、gt;　　個人商業(yè)網(wǎng)站可為各種不同的明星歌迷或影迷建立登錄頁面，本網(wǎng)站主要實(shí)現(xiàn)以下幾個功能：</p><p>　　周杰倫的信息浮動與顯示，提高各類商業(yè)或者純理論性信息提供的效率，克服傳統(tǒng)論壇帶來的各類信息冗余以及重復(fù)率高的問題，減少紙張浪費(fèi)，實(shí)現(xiàn)低碳環(huán)保。</p><p>　　周杰倫音樂賞析，能夠?yàn)槊餍潜救说囊魳沸畔⑻峁┹^新的查詢與應(yīng)用，試聽音樂在這種情景下面的產(chǎn)生也能算是適時逢時。音樂歌

35、曲的自動排行也算得上是一種較為前沿的功能與總用。</p><p>　　系統(tǒng)界面簡潔美觀、易使用、易維護(hù)，能夠適用于非計算機(jī)人員使用。能夠完成對周杰倫新聞與信息存儲和查詢，并提供數(shù)據(jù)數(shù)據(jù)下載功能，可以查找、下載、試聽與瀏覽最近最新的官方信息。從而使面對一個龐大的名人信息數(shù)據(jù)庫時，依然可以全面、準(zhǔn)確、有效的了解到名人出席或缺席各種信息，及時掌握名人信息的動態(tài)變化，更方便地對網(wǎng)站商業(yè)的運(yùn)作進(jìn)行鋪墊。</p>

36、<p>　　可靠運(yùn)行，技術(shù)成熟。超級文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是名人個人網(wǎng)站盛行的原因之一，超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。</p><p><b>　　系統(tǒng)可行性分析</b>&l

37、t;/p><p><b>　　系統(tǒng)可行性分析方法</b></p><p>　　互聯(lián)網(wǎng)商業(yè)的普及應(yīng)用已經(jīng)成為網(wǎng)絡(luò)經(jīng)濟(jì)的大勢所趨。本章介紹的周杰倫中文網(wǎng)站是建立在用戶和明星信息之間的，用戶可以方便、快捷地查找到自己所需要了解的有關(guān)于周杰倫的信息。</p><p><b>　　技術(shù)可行性分析</b></p><p

38、>　　技術(shù)性上面網(wǎng)站提供給客戶了了解周杰倫的基本信息和各種音樂信息，使客戶能夠更好的在本站內(nèi)了解周杰倫。 技術(shù)可行性研究的任務(wù)，是從總體上鑒別和選擇技術(shù)系統(tǒng)，是研究現(xiàn)有的技術(shù)條件能否順利完成開發(fā)工作，軟、硬件配置能否滿足開發(fā)的需求等等。本系統(tǒng)的開發(fā)使用ACCESS+ASP+Dreamweaver+IIS作為系統(tǒng)開發(fā)工具和環(huán)境。</p><p>　　綜述，技術(shù)上面的眾多建立網(wǎng)站技術(shù)已經(jīng)成熟，可以投入開發(fā)。&

39、lt;/p><p><b>　　經(jīng)濟(jì)可行性分析</b></p><p>　　經(jīng)濟(jì)可行性分析需要估算新系統(tǒng)的成本效益分析，其中包括估計項(xiàng)目開發(fā)的成本，開發(fā)費(fèi)用和今后的運(yùn)行、維護(hù)費(fèi)用；估計新系統(tǒng)將獲得的效益，估算開發(fā)成本是否回高于項(xiàng)目預(yù)期的全部經(jīng)費(fèi)。所以可行性分析中非常重要的一環(huán)便是經(jīng)濟(jì)可行性分析，因?yàn)檫@種分析體現(xiàn)出了很好的實(shí)際應(yīng)用能力。</p><p&g

40、t;　　本次所做網(wǎng)站-周杰倫中文網(wǎng)的開發(fā)成本非常低，除了部分版權(quán)的問題的支付以外，成本代價僅體現(xiàn)在程序員對技術(shù)學(xué)習(xí)的前期投入與加深。而且運(yùn)行要求環(huán)境也非常的低，本次開發(fā)在win7系統(tǒng)下面進(jìn)行。但是總體來說運(yùn)行環(huán)境僅為win98以上版本即可。</p><p><b>　　可行性分析結(jié)論</b></p><p>　　綜上所述，開發(fā)的周杰倫名人信息管理網(wǎng)站非常的具有實(shí)用性，

41、在經(jīng)濟(jì)，系統(tǒng)，技術(shù)方面都體現(xiàn)了很好的可行性。所以，本系統(tǒng)可以進(jìn)行設(shè)計與開發(fā)。</p><p><b>　　系統(tǒng)需求分析</b></p><p><b>　　系統(tǒng)需求分析概述</b></p><p>　　將要做的是一個個人網(wǎng)站，主要做網(wǎng)站設(shè)計，因此建設(shè)網(wǎng)站的目的主要有兩個：一是使瀏覽者或潛在的客戶迅速了解明星個人大部分已經(jīng)完

42、成或正在進(jìn)行的通告新聞及相關(guān)的資料，這就要求網(wǎng)站的文字要簡練，盡量減少大篇幅的文字?jǐn)⑹?，?xiàng)目效果圖要精彩，當(dāng)然網(wǎng)頁的頁面效果也要漂亮，以使瀏覽者或潛在的客戶感覺到網(wǎng)站的設(shè)計水平高；二是使瀏覽者或潛在的客戶迅速了解公司對業(yè)務(wù)的一般操作流程，以便能夠與公司方便快捷地進(jìn)行聯(lián)系和溝通，減少不必要的中間環(huán)節(jié)及由此帶來的麻煩。</p><p><b>　　系統(tǒng)功能需求分析</b></p>

43、<p>　　商業(yè)網(wǎng)站系統(tǒng)隨著中國經(jīng)濟(jì)的高速發(fā)展發(fā)生了巨大的變化。專做明星消息發(fā)布的專業(yè)網(wǎng)站隨著群眾消費(fèi)水平的增長迅速成長起來，但同時也帶來了這一行業(yè)激烈的競爭。</p><p><b>　　系統(tǒng)總體設(shè)計</b></p><p><b>　　系統(tǒng)總體設(shè)計方法</b></p><p>　　總體設(shè)計即對有關(guān)系統(tǒng)全局問題

44、的設(shè)計，也就是設(shè)計系統(tǒng)總的處理方案，又稱系統(tǒng)概要設(shè)計。在系統(tǒng)設(shè)計階段需要回答的中心問題是“如何做？”，即通過給出新系統(tǒng)物理模型的方式描述如何實(shí)現(xiàn)在需求分析中規(guī)定的系統(tǒng)功能。它對整個網(wǎng)站系統(tǒng)功能進(jìn)行分析，并劃分和構(gòu)建系統(tǒng)功能模塊。</p><p><b>　　系統(tǒng)整體框架圖</b></p><p>　　網(wǎng)站系統(tǒng)整體框架圖如圖4.1所示：</p><p

45、>　　圖2 系統(tǒng)整體框架圖</p><p><b>　　整個系統(tǒng)功能模塊圖</b></p><p><b>　　數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計</b></p><p>　　邏輯結(jié)構(gòu)設(shè)計階段的任務(wù)是將概念結(jié)構(gòu)設(shè)計階段所得到的概念模型轉(zhuǎn)換為具體DBMS所能支持的數(shù)據(jù)模型（即邏輯結(jié)構(gòu)），并對其進(jìn)行優(yōu)化。</p><

46、;p>　　個人商業(yè)網(wǎng)站系統(tǒng)數(shù)據(jù)庫各表的具體定義如下：</p><p>　　表1 用戶信息表定義</p><p>　　表2 日記回復(fù)表定義</p><p>　　表3 日記信息表定義</p><p>　　表4 財務(wù)小類表定義</p><p><b>　　表5 賬戶表定義</b><

47、/p><p><b>　　表6 財務(wù)表定義</b></p><p>　　表7 往來人員表定義</p><p><b>　　開發(fā)環(huán)境</b></p><p><b>　?、牛布h(huán)境</b></p><p>　　內(nèi)存：2G 以上； CUP：Inter

48、 i2310 2.27GHz以上 ； 硬盤：500G。</p><p><b>　?、疲僮飨到y(tǒng)</b></p><p>　　Microsoft Windows XP/7</p><p><b>　　⑶．軟件環(huán)境</b></p><p>　　數(shù)據(jù)庫：Microsoft Office Acces

49、s 2003。</p><p>　　開發(fā)工具：Adobe Dreamweaver cs4，F(xiàn)lash CS5.0，PhotoShop CS5.0，Eclipse, IE9等。</p><p><b>　　系統(tǒng)設(shè)計和實(shí)現(xiàn)</b></p><p><b>　　系統(tǒng)模塊設(shè)計</b></p><p>　　F

50、lash特色頁面的實(shí)現(xiàn)</p><p>　　為了體現(xiàn)美觀性與實(shí)用性，本系統(tǒng)采用了特色flash引導(dǎo)開始index畫面方法。</p><p>　　flash登錄界面如圖5.1所示：</p><p>　　圖4 用戶登錄界面</p><p>　　以下為實(shí)現(xiàn)點(diǎn)擊flash頁面兩個鏈接時運(yùn)用到的代碼：</p><p>　　&l

51、t;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>　　<html xmlns="http://www.w3.org/1999/xhtml&qu

52、ot;></p><p>　　<style type="text/css"></p><p><b>　　body {</b></p><p>　　margin-left: 5px;</p><p>　　margin-top: 0px;</p><p>　　m

53、argin-right: 0px;</p><p>　　margin-bottom: 0px;</p><p>　　background-color: #000;</p><p>　　background-image: url(html/images/baclground.jpg);</p><p><b>　　}</b>

54、;</p><p><b>　　</style></b></p><p><b>　　<head></b></p><p>　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu

55、ot; /></p><p>　　<title>周杰倫中文網(wǎng) 全球最大的杰迷中心</title></p><p>　　<style type="text/css"></p><p>　　#FlashID {</p><p>　　text-align: center;</p&g

56、t;<p><b>　　}</b></p><p>　　當(dāng)跳過flash頁面，點(diǎn)擊鏈接后看到如圖5.3所示界面。</p><p><b>　　圖5 系統(tǒng)主界面</b></p><p>　　圖6 成員系統(tǒng)主界面</p><p>　　這些界面的實(shí)現(xiàn)用到了框架，通過使用框架，可以在同一個

57、瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨(dú)立于其他的框架?？梢允褂脩暨x擇每個菜單項(xiàng)后，界面的基本框架不發(fā)后改變，而只改變左邊的子菜單項(xiàng)和中間的內(nèi)容顯示項(xiàng)。</p><p>　　以下代碼是實(shí)現(xiàn)大類菜單項(xiàng)的重要函數(shù),head文件如下：</p><p><b>　　</table> </b></p><p&g

58、t;<b>　　</td></b></p><p>　　<td height="29" colspan="16" valign="bottom" background="images/index_09.jpg"></p><p>　　<table width=

59、"100%" border="0" cellspacing="0" cellpadding="0"></p><p><b>　　<tr> </b></p><p>　　<td height="24" align="center&quo

60、t;><font color="#FFFFFF" class="top10">｜ <a href="index1.html" class="top10" onFocus="if(this.blur)this.blur()">本站首頁</a> </p><p>　?。?<

61、;a href="jaystory.html" class="top10">杰倫資料</a> ｜ <a href="haobao.rar" class="top10" onFocus="if(this.blur)this.blur()">推薦資源</a> </p><p>

62、　?。?<a href="jieshiliangxiang.html" class="top10" onFocus="if(this.blur)this.blur()">動畫海報</a> </p><p>　　｜ <a href="music thing.html" class="top10&q

63、uot;>杰聞軼事</a> ｜ <a href="listen to jay.html" class="top10">杰式魅聲</a> ｜ <a href="look ou jay.html" class="top10">視頻欣賞</a> ｜ <a href="the litt

64、le news.html" class="top10">新聞試看</a> ｜ </font><span class="top10"><font color="#FFFFFF"><a href="index1.html" class="top10">全國后援會<

65、;/a> ｜<a href="index1.html" class="top10"> 會員登錄</a></font></span><font color="#FFFFFF" class="top10"> ｜</font></td></p><p>

66、;<b>　　</tr></b></p><p><b>　　</table> </b></p><p><b>　　</td></b></p><p>　　<td> <img src="images/分隔符.gif" widt

67、h="1" height="29" alt=""></td></p><p><b>　　</tr></b></p><p><b>　　<tr> </b></p><p>　　<td colspan="4

68、"> <img src="images/index_10.jpg" width="219" height="32" alt=""></td></p><p>　　<td height="32" colspan="16" valign="bo

69、ttom" background="images/index_11.jpg"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="text-shadow2"></p><p>&l

70、t;b>　　<tr> </b></p><p>　　<td width="20" height="24">&nbsp;</td></p><p>　　<td>你現(xiàn)在的位置是：<strong>杰倫中文網(wǎng)首頁</strong></td></

71、p><p><b>　　</tr></b></p><p>　　</table> </td></p><p>　　<td> <img src="images/分隔符.gif" width="1" height="32" alt=&quo

72、t;"></td></p><p><b>　　周杰倫相冊的實(shí)現(xiàn)</b></p><p>　　在flash和index界面這樣的背景下面，接下來相信觀眾與粉絲最熱切想知道的便是關(guān)于偶像明星的個人海報寫真描述。為了方便瀏覽，也為了方便用戶使用。用戶可直接在主頁中點(diǎn)擊“杰式靚相”，也可以點(diǎn)擊主頁浮動變化窗中的圖片超鏈。</p>&

73、lt;p>　　相冊的實(shí)現(xiàn)主要還是一個觸發(fā)的js特效，通過點(diǎn)擊相冊左右翻頁實(shí)現(xiàn)瀏覽海報功能。</p><p>　　如圖5.4所示為“杰式靚相”界面:</p><p>　　圖7 杰式靚相界面</p><p>　　以下是js特效的jqery.min.js和lrtk.js的部分代碼：</p><p>　　])];c.fn.attr.call(

74、a,b,true)}else a=[f.createElement(a[1])];else{a=sa([d[1]],[f]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}return c.merge(this,a)}else{if(b=s.getElementById(d[2])){if(b.id!==d[2])return T.find(a);thi

75、s.length=1;this[0]=b}this.context=s;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a);return c.merge(this,</p><p>　　a)}else return!b|

76、|b.jquery?(b||T).find(a):c(b).find(a);else if(c.isFunction(a))return T.ready(a);if(a.selector!==w){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2"

77、;,length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){var f=c();c.isArray(a)?ba.

78、apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;i</p><p>　　"find")f.selector=this.selector+(this.selector?" ":"")+d;else if(b)f.selector=this.selector+".&q

79、uot;+b+"("+d+")";return f},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this

80、.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(",")

81、)},map:function(a</p><p><b>　　音樂試聽功能的實(shí)現(xiàn)</b></p><p>　　在相冊功能的初步實(shí)現(xiàn)基礎(chǔ)上面再加上一個音樂試聽功能大概是對海報設(shè)計功能的最基本尊重。音樂試聽功能主要應(yīng)用的background自己觸發(fā)的backgroundsound函數(shù)添加本地音樂，然后通過photoshop創(chuàng)作的圖片添加絢麗效果。</p>

82、<p>　　如圖5.5所示為杰式魅聲界面：</p><p>　　圖8 音樂試聽界面</p><p>　　以下是head文件的部分代碼：</p><p><b>　　<HTML></b></p><p><b>　　<HEAD></b></p><

83、;p>　　<TITLE>listen to jay</TITLE></p><p>　　<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"></p><p>　　<style type="text/

84、css"></p><p><b>　　<!--</b></p><p><b>　　td {</b></p><p>　　text-align: left;</p><p>　　vertical-align: top;</p><p>　　font-f

85、amily:Tahoma;</p><p>　　font-size:9px;</p><p>　　color:#666254;</p><p><b>　　}</b></p><p><b>　　form</b></p><p><b>　　{</b>&

86、lt;/p><p>　　margin:0px;</p><p><b>　　}</b></p><p><b>　　a {</b></p><p>　　text-decoration: underline;</p><p>　　color:#666254;</p>

87、<p><b>　　}</b></p><p><b>　　a.1 {</b></p><p>　　text-decoration: none;</p><p>　　color:#A3A4A4;</p><p><b>　　}</b></p><p

88、><b>　　a.2 {</b></p><p>　　text-decoration: underline;</p><p>　　color:#565245;</p><p><b>　　}</b></p><p>　　以上代碼僅僅代表的是head文件對整個網(wǎng)頁的控制與主導(dǎo)，其中主要的功能的實(shí)

89、現(xiàn)與音樂的試聽還要通過查閱body函數(shù)的各種功能的實(shí)現(xiàn)。</p><p><b>　　視頻觀看功能的實(shí)現(xiàn)</b></p><p>　　在整個網(wǎng)站功能不斷成熟化與完整化的實(shí)現(xiàn)，越來越多的目光會朝向視頻功能的實(shí)現(xiàn)，因?yàn)橐曨l觀看功能的實(shí)現(xiàn)體現(xiàn)的是對一個歌手藝人的一種魅力最好體現(xiàn)。其中運(yùn)用到的超級鏈接為本地的視頻文件jieshi.flv.通過dreamweaver的自帶功能很

90、好的詮釋了超級鏈接視頻播放的功能，體現(xiàn)了很好的網(wǎng)站視頻播放功能</p><p>　　如圖5.6視頻觀看界面：</p><p>　　圖9 視頻觀看界面</p><p>　　以下代碼為添加整個視頻過程用到的表格table td tr等標(biāo)簽，還有存在的css加上dive格式的過程：</p><p>　　</table></td&

91、gt;</p><p>　　<td> <img src="images/分隔符.gif" width="1" height="29" alt=""></td></p><p><b>　　</tr></b></p><p&

92、gt;<b>　　<tr> </b></p><p>　　<td colspan="4"><img src="images/index_112.jpg" width="218" height="29"></td></p><p>　　<

93、td height="32" colspan="16" valign="bottom" background="images/index_11111.jpg">&nbsp;</td></p><p>　　<td>&nbsp;</td></p><p>&

94、lt;b>　　</tr></b></p><p><b>　　<tr> </b></p><p>　　<td height="500" colspan="20" rowspan="30" background="images/index_1133.jp

95、g"><div id="apDiv1"></div></p><p>　　<div id="apDiv4"></p><p>　　<div class="divbiao" id="apDiv5"></p><p>　　<

96、;div id="apDiv6"></p><p>　　<hr align="center"></p><p>　　<div id="apDiv7">&nbsp;&nbsp;周杰倫2004無與倫比演唱會《擱淺》</div></p><p><b

97、>　　</div></b></p><p>　　<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="652" height="524" id="FLVPlayer"></p><p>　

98、　<param name="movie" value="FLVPlayer_Progressive.swf" /></p><p>　　<param name="quality" value="high"></p><p>　　<param name="wmode&quo

99、t; value="opaque"></p><p>　　<param name="scale" value="noscale"></p><p>　　<param name="salign" value="lt"></p><p>　　

100、<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Halo_Skin_3&amp;streamName=../music/周杰倫演唱會版《擱淺》&amp;autoPlay=false&amp;autoRewind=false" /></p>

101、<p>　　<param name="swfversion" value="8,0,0,0"</p><p><b>　　新聞瀏覽功能的實(shí)現(xiàn)</b></p><p>　　整個框架的應(yīng)用沒有什么改變，還是有banner以及l(fā)ogo以及導(dǎo)航欄。這些都是不變的框架，體現(xiàn)了很好的可控制性與可操作性。周杰倫中文網(wǎng)中的新聞試

102、看功能旨在運(yùn)用一個網(wǎng)頁頁面能夠讓讀者能夠?yàn)g覽最新的新聞以及趣事。</p><p>　　如圖5.8所示為新聞瀏覽界面：</p><p>　　圖10 新聞瀏覽界面</p><p>　　以下為選擇嵌入表格的各種小表格產(chǎn)生的部分代碼。</p><p>　　<bgsound src="../music/蒲公英的約定 木吉他獨(dú)奏版.mp

103、3" autostart=true loop="-1"/></p><p><b>　　</head></b></p><p>　　<body bgcolor="#000000" topmargin="0" marginheight="0"><

104、;/p><p>　　<td colspan="12" rowspan="3"><img src="images/index_01.jpg" width="758" height="41" alt=""></td></p><p>　　<

105、;td colspan="8"> <img src="images/index_02.jpg" width="242" height="12" alt=""></td></p><p>　　style="cursor:hand;" onClick="jav

106、ascript:window.external.AddFavorite('http://www.GCooler.com','『 vce yang 』')" onFocus="if(this.blur)this.blur()" title='加入收藏'><img src="images/index_03.jpg" alt=&quo

107、t;" width="74" height="17" border="0"></a></td></p><p>　　<td colspan="3"><a style="cursor:hand;" onClick="this.style.behavi

108、or='url(#default#homepage)';this.setHomePage('http://www.GCooler.com')" onFocus="if(this.blur)this.blur()" title='設(shè)為主頁'><img src="images/index_04.jpg" alt="&quo

109、t; width="78" height="17" border="0"></a></td></p><p>　　<td colspan="3"><a href="../index.html" onFocus="if(this.blur)this.blur(

110、)"><img src="images/index_05.jpg" alt="" width="90" height="17" border="0"></a></td></p><p>　　<td> <img src="images/分

111、隔符.gif" width="1" height="17" alt=""></td></p><p>　　為了更好的體現(xiàn)與重塑觀看新聞與瀏覽新事，本次新聞瀏覽在主頁上面也有體現(xiàn)，點(diǎn)擊新聞滾動上面的新聞排行也可以實(shí)現(xiàn)新聞瀏覽。</p><p>　　自動變化隱現(xiàn)功能的實(shí)現(xiàn)</p><p&

112、gt;　　自動隱現(xiàn)功能的實(shí)現(xiàn)體現(xiàn)的是自動無觸發(fā)性的更新新聞與變化新聞，運(yùn)用了website.css 樣式和預(yù)先編好的style.css.</p><p>　　如圖5.9所示為最新杰聞自動隱現(xiàn)窗口界面：</p><p>　　圖11 自動變化隱現(xiàn)界面</p><p>　　以下為自動變化隱現(xiàn)css格式的代碼：</p><p>　　<DIV

113、class=fpic></p><p>　　<A id=foclnk href="the little news.html" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION:

114、 absolute" height=300 alt="" src="images/index_123.jpg" width=400></A> </p><p>　　<DIV id=fttltxt </p><p>　　style="MARGIN-TOP: 305px; FLOAT: left; WIDTH:

115、 400px; TEXT-ALIGN: center"><A </p><p>　　href="the little news.html" target=_blank>杰倫最新專輯 我很忙</A></DIV></p><p>　　<DIV style="MARGIN-LEFT: 402px; WIDTH

116、: 65px"></p><p>　　<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A </p><p>　　href="the little news.html" target=_blank><IMG </p>

117、;<p>　　src="images/index_117.jpg" alt="" width=56 height=42 border="0"></A></DIV></p><p>　　<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=

118、playit();><A </p><p>　　href="the little news.html" target=_blank><IMG height=42 alt="" </p><p>　　src="images/index_118.jpg" width=56></A></D

119、IV></p><p>　　<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A </p><p>　　href="the little news.html" target=_blank><IMG height=42 alt="&q

120、uot; </p><p>　　主頁友情鏈接 排行榜以及新聞自動浮動功能的實(shí)現(xiàn)</p><p>　　如題功能的實(shí)現(xiàn)需要依靠強(qiáng)大的jsp特效功能。</p><p>　　如圖5.10所示為三個功能實(shí)現(xiàn)界面：</p><p>　　圖12 三功能實(shí)現(xiàn)界面</p><p>　　以下為實(shí)現(xiàn)不同功能時所用到的代碼：</p&g

121、t;<p><b>　　<tr></b></p><p>　　<td align="left"><ul></p><p>　　<LI><A href="the little news.html" title="★★5月主打《嘟嘟倫的貼紙本》 現(xiàn)已發(fā)售&

122、quot; target="_blank" class="text120">★★5月主打《嘟嘟倫的貼紙本》 現(xiàn)已發(fā)售12-25</A></LI></p><p>　　<LI class="text120"><a href="the little news.html">★《驚嘆號》臺

123、版專輯購買 預(yù)購版本還有存貨08-19</a></LI></p><p>　　<LI class="text120"><a href="the little news.html">★JayCn十周年慶典活動 精華版 11-08</a></LI></p><p>　　<LI

124、class="text120"><a href="the little news.html">05/07 2012福布斯中國名人榜出爐：周杰倫問鼎05-08</a></LI></p><p>　　<LI class="text120"><a href="the little news.

125、html">05/07 Hito流行音樂獎揭曉 周杰倫四獎成大贏家05-08</a></LI></p><p>　　<LI class="text120"><a href="the little news.html">04/28 愛心倫低調(diào)現(xiàn)身 關(guān)懷弱勢家庭小朋友04-28</a></LI&

126、gt;</p><p>　　<LI class="text120"><a href="the little news.html">04/28 周杰倫現(xiàn)身Harry Winston 上海旗艦館獻(xiàn)唱04-28</a></LI></p><p>　　<LI class="text120&qu

127、ot;><a href="the little news.html">04/26 黃秋生贊周杰倫EQ高夠古怪 評價張家輝像瘋子04-26</a></LI></p><p>　　<LI class="text120"><a href="the little news.html">04/26

128、周杰倫發(fā)起正版公益"復(fù)仇者計劃" 全力反擊盜04-26</a></LI></p><p>　　<LI><a href="the little news.html">04/21 周董嚴(yán)正澄清事 杰威爾:尾牙都不唱 婚禮更不會唱04-21</a></LI></p><p>　　<

129、;/ul></td></p><p><b>　　</tr></b></p><p>　　</table></td></p><p><b>　　</tr></b></p><p><b>　　</table>&

130、lt;/b></p><p>　　</marquee> </td></p><p>　　<td rowspan="2"> <img src="images/index_14.jpg" width="24" height="82" alt=""&

131、gt;</td></p><p>　　<td rowspan="9"> <img src="images/index_15.jpg" width="8" height="210" alt=""></td></p><p>　　<td co

132、lspan="8" rowspan="9"><img src="images/index_16a.jpg" alt="" name=slide width="600" height="210" border="0" usemap="#slideMap" class=&