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

1、<p><b>　　江西科技師范大學</b></p><p><b>　　畢業(yè)設計（論文）</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.關鍵技術介紹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)目標5</p><p>　　3.2.系統(tǒng)

4、可行性分析6</p><p>　　3.2.1.系統(tǒng)可行性分析方法6</p><p>　　3.2.2.技術可行性分析6</p><p>　　3.2.3.經(jīng)濟可行性分析6</p><p>　　3.2.4.可行性分析結論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)總體設計7</p><p>　　4.1.系統(tǒng)總體設計方法7</p><p>　　4.2.系統(tǒng)整體框架圖7</p><p>　　4.3.整個系統(tǒng)功能模塊圖8</p>&

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29、的編修與繪圖工具，可以更有效的進行圖片編輯工作。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”，通常又稱為“風格樣式表（Style Sheet），它是用來進行網(wǎng)頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統(tǒng)一地控制HTML中各標志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。</p><p>　　當我們把 CS

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

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

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

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

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

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

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

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

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

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

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

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

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

44、的設計，也就是設計系統(tǒng)總的處理方案，又稱系統(tǒng)概要設計。在系統(tǒng)設計階段需要回答的中心問題是“如何做？”，即通過給出新系統(tǒng)物理模型的方式描述如何實現(xiàn)在需求分析中規(guī)定的系統(tǒng)功能。它對整個網(wǎng)站系統(tǒng)功能進行分析，并劃分和構建系統(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ù)庫邏輯結構設計</b></p><p>　　邏輯結構設計階段的任務是將概念結構設計階段所得到的概念模型轉換為具體DBMS所能支持的數(shù)據(jù)模型（即邏輯結構），并對其進行優(yōu)化。</p><

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

47、/p><p><b>　　表6 財務表定義</b></p><p>　　表7 往來人員表定義</p><p><b>　　開發(fā)環(huán)境</b></p><p><b>　　⑴．硬件環(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>　?、牵浖h(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)設計和實現(xiàn)</b></p><p><b>　　系統(tǒng)模塊設計</b></p><p>　　F

50、lash特色頁面的實現(xiàn)</p><p>　　為了體現(xiàn)美觀性與實用性，本系統(tǒng)采用了特色flash引導開始index畫面方法。</p><p>　　flash登錄界面如圖5.1所示：</p><p>　　圖4 用戶登錄界面</p><p>　　以下為實現(xiàn)點擊flash頁面兩個鏈接時運用到的代碼：</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>　　當跳過flash頁面，點擊鏈接后看到如圖5.3所示界面。</p><p><b>　　圖5 系統(tǒng)主界面</b></p><p>　　圖6 成員系統(tǒng)主界面</p><p>　　這些界面的實現(xiàn)用到了框架，通過使用框架，可以在同一個

57、瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架?？梢允褂脩暨x擇每個菜單項后，界面的基本框架不發(fā)后改變，而只改變左邊的子菜單項和中間的內(nèi)容顯示項。</p><p>　　以下代碼是實現(xiàn)大類菜單項的重要函數(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>　　周杰倫相冊的實現(xiàn)</b></p><p>　　在flash和index界面這樣的背景下面，接下來相信觀眾與粉絲最熱切想知道的便是關于偶像明星的個人海報寫真描述。為了方便瀏覽，也為了方便用戶使用。用戶可直接在主頁中點擊“杰式靚相”，也可以點擊主頁浮動變化窗中的圖片超鏈。</p>&

73、lt;p>　　相冊的實現(xiàn)主要還是一個觸發(fā)的js特效，通過點擊相冊左右翻頁實現(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>　　音樂試聽功能的實現(xiàn)</b></p><p>　　在相冊功能的初步實現(xiàn)基礎上面再加上一個音樂試聽功能大概是對海報設計功能的最基本尊重。音樂試聽功能主要應用的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)頁的控制與主導，其中主要的功能的實

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

90、好的詮釋了超級鏈接視頻播放的功能，體現(xiàn)了很好的網(wǎng)站視頻播放功能</p><p>　　如圖5.6視頻觀看界面：</p><p>　　圖9 視頻觀看界面</p><p>　　以下代碼為添加整個視頻過程用到的表格table td tr等標簽，還有存在的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>　　新聞瀏覽功能的實現(xiàn)</b></p><p>　　整個框架的應用沒有什么改變，還是有banner以及l(fā)ogo以及導航欄。這些都是不變的框架，體現(xiàn)了很好的可控制性與可操作性。周杰倫中文網(wǎng)中的新聞試

102、看功能旨在運用一個網(wǎng)頁頁面能夠讓讀者能夠瀏覽最新的新聞以及趣事。</p><p>　　如圖5.8所示為新聞瀏覽界面：</p><p>　　圖10 新聞瀏覽界面</p><p>　　以下為選擇嵌入表格的各種小表格產(chǎn)生的部分代碼。</p><p>　　<bgsound src="../music/蒲公英的約定 木吉他獨奏版.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='設為主頁'><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)，點擊新聞滾動上面的新聞排行也可以實現(xiàn)新聞瀏覽。</p><p>　　自動變化隱現(xiàn)功能的實現(xiàn)</p><p&

112、gt;　　自動隱現(xiàn)功能的實現(xiàn)體現(xiàn)的是自動無觸發(fā)性的更新新聞與變化新聞，運用了website.css 樣式和預先編好的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>　　主頁友情鏈接 排行榜以及新聞自動浮動功能的實現(xiàn)</p><p>　　如題功能的實現(xiàn)需要依靠強大的jsp特效功能。</p><p>　　如圖5.10所示為三個功能實現(xiàn)界面：</p><p>　　圖12 三功能實現(xiàn)界面</p><p>　　以下為實現(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、版專輯購買 預購版本還有存貨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)身 關懷弱勢家庭小朋友04-28</a></LI&

126、gt;</p><p>　　<LI class="text120"><a href="the little news.html">04/28 周杰倫現(xiàn)身Harry Winston 上海旗艦館獻唱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ā)起正版公益"復仇者計劃" 全力反擊盜04-26</a></LI></p><p>　　<LI><a href="the little news.html">04/21 周董嚴正澄清事 杰威爾:尾牙都不唱 婚禮更不會唱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=&