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

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

2、</p><p>　　姓 名 ？？？ </p><p>　　學(xué) 號(hào) ？？？ </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è)計(jì)制作</b></p><p>　　電子信息工程專業(yè)2007級(jí) ？？</p><p>　　摘要：網(wǎng)站主頁的版頭主要是根據(jù)專題游戲類網(wǎng)站的框架

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

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

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

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

8、　　1.1 設(shè)計(jì)思想 …………………………………………………………………………1</p><p>　　1.1.1 設(shè)計(jì)方案………………………………………………………………………1</p><p>　　1.1.2 設(shè)計(jì)所需的資源………………………………………………………………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è)計(jì)關(guān)健部分代碼 ………………………………………………………………5</p><p>　　5 設(shè)

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

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

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

13、戲登陸器下載、游戲客戶端下載、游戲客戶端補(bǔ)丁包下載等）；贊助我們（內(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è)計(jì)所需的資源</p><p>　　

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

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

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

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

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

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

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

21、，兌換積分，該項(xiàng)功能，比較特殊，玩家在游戲，玩家首先要在游戲中，刷到可以兌換積分的相應(yīng)的寶石及材料，然后再到網(wǎng)站登錄并選擇此項(xiàng)功能方可實(shí)現(xiàn)；等等。</p><p>　　4 網(wǎng)頁設(shè)計(jì)關(guān)健部分代碼</p><p>　　以下所示代碼為實(shí)現(xiàn)游戲帳號(hào)注冊(cè)時(shí)相關(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è)計(jì)體會(huì)</b></p><p>　　通過本次網(wǎng)頁課程

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

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