網(wǎng)頁設(shè)計課程設(shè)計報告---游戲類網(wǎng)站設(shè)計制作

1、<p>　　網(wǎng)頁設(shè)計課程設(shè)計報告</p><p><b>　　游戲類網(wǎng)站設(shè)計制作</b></p><p>　　院 系 物理與材料科學(xué)學(xué)院 </p><p>　　專 業(yè) 電子信息工程 </p><p>　　學(xué) 生 班 級 2007級1班

2、</p><p>　　姓 名 ？？？ </p><p>　　學(xué) 號 ？？？ </p><p>　　指導(dǎo)教師單位 ？？？ </p><p>　　指導(dǎo)教師姓名 ？？？ </p><p&

3、gt;　　指導(dǎo)教師職稱 ？？？ </p><p><b>　　20？？年？？月</b></p><p><b>　　游戲類網(wǎng)站設(shè)計制作</b></p><p>　　電子信息工程專業(yè)2007級 ？？</p><p>　　摘要：網(wǎng)站主頁的版頭主要是根據(jù)專題游戲類網(wǎng)站的框架

4、和模式而設(shè)計的，再用上flash以及對圖片運用PS技術(shù)進行修改，使版頭更加美觀形象。本網(wǎng)站主要介紹奇跡MU這一款游戲的具體情況，通過各個分模塊詳細介紹與游戲相關(guān)的各種設(shè)計，如游戲的經(jīng)驗倍數(shù)、升級點數(shù)、刷怪設(shè)置、物品掉落概率、游戲裝備設(shè)置等等；在注冊帳號頁面，利用ASP+T-SQL語言，與SQL連接進而實現(xiàn)游戲帳號注冊；除此之外；其它頁面還可以實現(xiàn)游戲帳號管理、與游戲相關(guān)的下載以及英雄排行等相關(guān)信息的查看。設(shè)計的各功能模塊與其它其它專題游

5、戲類網(wǎng)站風(fēng)格相似。設(shè)計制作本網(wǎng)站所用的所有資源，均來自互聯(lián)網(wǎng)。</p><p>　　關(guān)鍵詞：首頁，注冊帳號，帳號管理，下載中心</p><p><b>　　設(shè)計目的:</b></p><p>　?。?）進一步掌握Dreamweaver課程所學(xué)的理論知識。</p><p>　?。?）熟悉常用的網(wǎng)頁設(shè)計技巧，并掌握相關(guān)內(nèi)容，

6、使用其進行網(wǎng)頁設(shè)計。</p><p>　　設(shè)計技術(shù)指標(biāo)與要求:</p><p>　?。?）制作表格以及圖片插入；</p><p>　?。?）制作圖片鏈接以及文字鏈接。</p><p>　?。?）制作圖像熱區(qū)鏈接。</p><p>　?。?）利用JavaScript腳本制作幻燈展示圖。</p><p&

7、gt;　　（5）利用JavaScript腳本實現(xiàn)頁面與SQL連接。</p><p><b>　　目錄</b></p><p>　　前言…………………………………………………………………………………………1</p><p>　　1 游戲類網(wǎng)站設(shè)計制作 …………………………………………………………………1</p><p>

8、　　1.1 設(shè)計思想 …………………………………………………………………………1</p><p>　　1.1.1 設(shè)計方案………………………………………………………………………1</p><p>　　1.1.2 設(shè)計所需的資源………………………………………………………………1</p><p>　　1.1.3 組織結(jié)構(gòu)圖……………………………………………………

9、………………2</p><p>　　2 首頁效果預(yù)覽 …………………………………………………………………………2</p><p>　　3 分頁效果預(yù)覽 …………………………………………………………………………4</p><p>　　4 網(wǎng)頁設(shè)計關(guān)健部分代碼 ………………………………………………………………5</p><p>　　5 設(shè)

10、計體會 ………………………………………………………………………………6</p><p>　　參考文獻 …………………………………………………………………………………6</p><p><b>　　前言</b></p><p>　　隨著計算機網(wǎng)絡(luò)的飛速發(fā)展，網(wǎng)站種類也越來越多，不僅有企業(yè)展示網(wǎng)站、電子商務(wù)網(wǎng)站，還有專門供瀏覽者休閑娛樂的游戲網(wǎng)站

11、。隨著越來越多年輕、龐大的用戶群加入游戲陣營，大師的游戲網(wǎng)站就去而生。</p><p>　　專題游戲類網(wǎng)站是游戲類網(wǎng)站中最常見的，通常是某一款游戲的相關(guān)內(nèi)容，其特點是專業(yè)性較強，界面精美。本設(shè)計報告內(nèi)容就是關(guān)于一款名叫奇跡MU的專題游戲網(wǎng)站。</p><p>　　1 游戲類網(wǎng)站設(shè)計制作</p><p><b>　　1.1 設(shè)計思想</b>&

12、lt;/p><p>　　1.1.1 設(shè)計方案</p><p>　　方案：網(wǎng)站首頁（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、新聞公告、游戲介紹、與子頁面相關(guān)的圖片鏈接以及文字鏈接等等）；注冊帳號（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、游戲帳號注冊、頁面與SQL連接等）；帳號管理（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、游戲帳號登陸、頁面與SQL連接等）；下載中心（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、游

13、戲登陸器下載、游戲客戶端下載、游戲客戶端補丁包下載等）；贊助我們（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、管理者心聲、贊助服務(wù)等）；英雄排行（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、游戲各服務(wù)區(qū)相關(guān)英雄排行列表、與SQL連接等）；戰(zhàn)盟排行（內(nèi)容包括：頂部導(dǎo)航欄、游戲精美截圖、游戲各服務(wù)區(qū)相關(guān)的各大戰(zhàn)盟排行列表、與SQL連接等）</p><p>　　1.1.2 設(shè)計所需的資源</p><p>　　

14、Dreamweaver8,Potoshop7.0,Flash8,SQL2000企業(yè)版</p><p>　?。?）Dreamweaver8用于實現(xiàn)對網(wǎng)頁內(nèi)容的設(shè)計排版等；</p><p>　?。?）Potoshop7.0用于實現(xiàn)對網(wǎng)頁內(nèi)容所需圖片的技術(shù)處理； </p><p&g

15、t;　?。?）Flash8用于實現(xiàn)網(wǎng)頁內(nèi)容所需FLASH的設(shè)計；</p><p>　?。?）SQL2000企業(yè)版用于實現(xiàn)游戲帳號、人物角色等相關(guān)信息的儲存。</p><p>　　1.1.3 組織結(jié)構(gòu)圖</p><p><b>　　2 首頁效果預(yù)覽</b></p><p>　　圖1 首頁預(yù)覽第一部分</p>

16、;<p>　　上示圖1為網(wǎng)站主頁的版頭，制作版頭主要有幾下幾點關(guān)?。阂唬瑢?dǎo)航欄為圖片鏈接，從導(dǎo)航欄，可以實現(xiàn)從主頁到注冊帳號、帳號管理、下載中心和英雄排行等分頁面的鏈接；二，導(dǎo)航下面的圖片模塊，利用PS對游戲的截圖進行技術(shù)，讓網(wǎng)站訪問者在第一時間，享受到視覺上的刺激，同時，利用PS在圖片上合適的位置，添加描述游戲本身屬性的關(guān)健字，更讓網(wǎng)站訪問者在享受到視覺沖激的同時，對游戲的版本和游戲的規(guī)則等有了一個大概的了解；三，F(xiàn)LA

17、SH動畫效果，兩個游戲角色手拿武器對決的場面，讓網(wǎng)站訪問者的視覺沖激加深了層次；四，F(xiàn)LASH鏈接，一個閃亮的圓形注冊按鈕，其作用不僅增強了視覺效果，也實現(xiàn)了對注冊頁面的鏈接；等等。</p><p>　　圖2 首頁預(yù)覽第三部分</p><p>　　上示圖2為網(wǎng)站主頁中底部分，主要顯示信息為與游戲相關(guān)的各項設(shè)置。圖示左邊，首先看到的，是關(guān)于游戲的幾大特色，如鑲嵌系統(tǒng)，鑲寶裝備，讓玩家清楚了

18、解到，在游戲中，可以實現(xiàn)對游戲裝備進行寶石鑲嵌，娛樂的感覺將會不言而喻；其次可以看到友情鏈接內(nèi)容，長城寬帶、中國電信、中國聯(lián)通……不管網(wǎng)站訪問者是以為何種方式與互聯(lián)網(wǎng)連接的，皆可以訪問本網(wǎng)站，同時也能成功鏈接并且登陸游戲，享受自己的娛樂生活。圖示右邊，網(wǎng)站訪問者可以從其所展示的內(nèi)容，對游戲有一個相對較詳細的了解，游戲版本一欄，清楚地告訴了訪問者關(guān)于游戲的版本、經(jīng)驗倍數(shù)和各職業(yè)升級點數(shù)；新人出生一欄，明了地讓訪問者知道，各種職業(yè)出生后可以

19、獲贈的自由分配屬性點的數(shù)量；從積分商店一欄，訪問者可以獲知，在游戲中，從積分商店里可以采購到何種類型的物品；積分獲得一欄使讀者掌握在游戲中如何獲得積分的方法；刷怪設(shè)置、寶石爆率和卓越爆率這幾欄，是所有游戲玩家關(guān)注的重要信息，玩游戲，一定要升級，刷怪設(shè)置讓玩家獲知在哪個地圖可以激情地刷經(jīng)驗，而寶石的爆率以及卓越爆率，更讓玩家瘋狂沖級的同時，增加大量的意外驚喜；等等。</p><p><b>　　3 分頁

20、效果預(yù)覽</b></p><p>　　圖3 分頁預(yù)覽第三部分</p><p>　　上示圖3為分頁實現(xiàn)主要作用部分，該部分可實現(xiàn)游戲帳號注冊以及游戲帳號相關(guān)的管理等等。如上圖所示，玩家在網(wǎng)頁成功登錄之后，就要可以對下拉菜單的選項功能進行選擇。各項功能，均由ASP代碼結(jié)合頁面設(shè)計實現(xiàn)：帳號登陸，為游戲玩家實現(xiàn)帳號登陸，而找回密碼，剛是為了忘記游戲帳號密碼的部分玩家提供案例保障服務(wù)

21、，兌換積分，該項功能，比較特殊，玩家在游戲，玩家首先要在游戲中，刷到可以兌換積分的相應(yīng)的寶石及材料，然后再到網(wǎng)站登錄并選擇此項功能方可實現(xiàn)；等等。</p><p>　　4 網(wǎng)頁設(shè)計關(guān)健部分代碼</p><p>　　以下所示代碼為實現(xiàn)游戲帳號注冊時相關(guān)新區(qū)的選擇：</p><p>　　<SCRIPT type=text/javascript></p

22、><p><b>　　<!--</b></p><p>　　function MM_swapImgRestore() { //v3.0</p><p>　　var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i

23、++) x.src=x.oSrc;</p><p><b>　　}</b></p><p>　　function MM_preloadImages() { //v3.0</p><p>　　var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();</p><p

24、>　　var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)</p><p>　　if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}</p><p><b>

25、　　}</b></p><p>　　function MM_findObj(n, d) { //v4.01</p><p>　　var p,i,x;</p><p>　　if(!d) d=document;</p><p>　　if((p=n.indexOf("?"))>0&&parent

26、.frames.length) {</p><p>　　d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}</p><p>　　if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.fo

27、rms[i][n];</p><p>　　for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);</p><p>　　if(!x && d.getElementById) x=d.getElementById(n); retur

28、n x;</p><p><b>　　}</b></p><p>　　function MM_swapImage() { //v3.0</p><p>　　var i,j=0,x,a=MM_swapImage.arguments; </p><p>　　document.MM_sr=new Array; </p&g

29、t;<p>　　for(i=0;i<(a.length-2);i+=3)</p><p>　　if ((x=MM_findObj(a[i]))!=null)</p><p>　　{document.MM_sr[j++]=x; </p><p>　　if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}</p>

30、<p><b>　　}</b></p><p><b>　　//--></b></p><p><b>　　</SCRIPT></b></p><p><b>　　5 設(shè)計體會</b></p><p>　　通過本次網(wǎng)頁課程

31、設(shè)計學(xué)習(xí)，本人對以下內(nèi)容更加熟識：</p><p>　?。?）對表格在網(wǎng)頁設(shè)計中的運用更加熟練；</p><p>　?。?）對標(biāo)簽DIV的認識和了解進一步深化；</p><p>　?。?）對FORM在網(wǎng)頁設(shè)計中的運用有了初步認識；</p><p>　?。?）對利用ASP語言實現(xiàn)網(wǎng)站與數(shù)據(jù)庫連接有了初步認識。</p><p&

32、gt;　　以上所述，即本人在本次網(wǎng)頁課程設(shè)計學(xué)習(xí)中的體會。</p><p><b>　　參考文獻</b></p><p>　　[1]何琛.中文版Dreamveaver8網(wǎng)頁設(shè)計經(jīng)典商用案例.上海:上?？茖W(xué)普及出版社,2007年6月第一版.ISBN978-7-900423-88-7/TP.43.</p><p>　　[2]銳博科技.Dreamve