網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)

信息工程學(xué)院--《網(wǎng)站設(shè)計(jì)與建設(shè)》課程設(shè)計(jì)報(bào)告PAGEPAGE3目錄摘要．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．Ⅱ第一章題目分析 2第二章設(shè)計(jì)概述 32.1功能概述 32.2系統(tǒng)流程圖 3第三章系統(tǒng)設(shè)計(jì) 43.1網(wǎng)站目錄結(jié)構(gòu)設(shè)計(jì) 43.2系統(tǒng)功能設(shè)計(jì) 43.3系統(tǒng)功能結(jié)構(gòu)圖 53.4首頁布局設(shè)計(jì) 6第四章詳細(xì)設(shè)計(jì) 74.1首頁 74.2首頁代碼實(shí)現(xiàn) 74.3相冊(cè)子頁 84.4相冊(cè)代碼實(shí)現(xiàn) 94.5音樂子頁 114.6音樂子頁代碼實(shí)現(xiàn) 114.8通訊錄子頁代碼實(shí)現(xiàn) 12第五章調(diào)試分析 165.1子頁錯(cuò)誤 165.2網(wǎng)站特效不顯示 165.3Div標(biāo)簽使用 17總結(jié) 18參考文獻(xiàn) 19致謝 20

第一章題目分析設(shè)計(jì)一個(gè)個(gè)人主頁來展示自己相關(guān)的信息，同時(shí)主頁內(nèi)也有一個(gè)登陸系統(tǒng)，該系統(tǒng)用于自己登陸來管理網(wǎng)站。每個(gè)人都有自己的一面，而每個(gè)人展示的方法都大不相同。對(duì)于一個(gè)個(gè)性不是時(shí)分鮮明的人來說，有一個(gè)自己的個(gè)人網(wǎng)站，會(huì)有一個(gè)很好的展示平臺(tái)。在這個(gè)平臺(tái)上可以曬自己的相片，也可以有一些名人名言?？梢园炎约焊信d趣的時(shí)事新聞添加到網(wǎng)站。每個(gè)人的愛好不同，富裕了的人有多種興趣和愛好，養(yǎng)鳥種花、逛街購物、尋朋訪友等等等等，現(xiàn)在興起的娛樂形式又出現(xiàn)了建個(gè)人網(wǎng)站的形式，打上個(gè)人資料、上傳個(gè)人照片、回復(fù)朋友留言、交流共同愛好，成為一種新型的時(shí)尚娛樂方式。這種個(gè)人網(wǎng)站沒有其他目的，他們把網(wǎng)站作為個(gè)人寵物，每天細(xì)心照料，傾注個(gè)人的熱情。而個(gè)人主頁對(duì)于我來說就是一個(gè)展示自我，同時(shí)又可以交到許多朋友的平臺(tái)。對(duì)于個(gè)性鮮明的我們，需要展示的平臺(tái)也越來越多。此時(shí)，互聯(lián)網(wǎng)這一交流平臺(tái)已經(jīng)成為年輕一代我們的平臺(tái)?？梢宰悴怀鰬舻馁徫?、訂餐和許多功能。一個(gè)個(gè)主頁可以讓我們充分來發(fā)揮自己的才能。

第二章設(shè)計(jì)概述2.1功能概述設(shè)計(jì)一個(gè)個(gè)人主頁，首頁可以有一個(gè)登陸管理該網(wǎng)站的登陸窗口。網(wǎng)站布局中主要有4部分，第一部分為頁面中間部分，此部分用于發(fā)布一些最新消息。網(wǎng)站右側(cè)，有一個(gè)滾動(dòng)的字幕欄，用于大家發(fā)表一些信息和心情。在滾動(dòng)欄下方有個(gè)自己用的鏈接部分，在主頁最下方是友情連接部分。導(dǎo)航欄部分有6個(gè)，分為首頁、相冊(cè)、哲理、留言、通訊錄和音樂欣賞。2.2系統(tǒng)流程圖首頁首頁相冊(cè)哲理音樂留言通訊錄圖2.2網(wǎng)站功能結(jié)構(gòu)圖

第三章系統(tǒng)設(shè)計(jì)3.1網(wǎng)站目錄結(jié)構(gòu)設(shè)計(jì)網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄。例如：在用frontpage98建立網(wǎng)站時(shí)都默認(rèn)建立了根目錄和images子目錄。目錄的結(jié)構(gòu)是一個(gè)容易忽略的問題，大多數(shù)站長都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的上傳維護(hù)，內(nèi)容未來的擴(kuò)充和移植有著重要的影響。在網(wǎng)站設(shè)計(jì)過程中把站點(diǎn)的目錄設(shè)在本地磁盤D盤下的未命名站點(diǎn)3，在本目錄下有圖片存放文件夾，視頻存放文件夾，文本存放文件等。如圖3.1圖3.1目錄結(jié)構(gòu)3.2系統(tǒng)功能設(shè)計(jì)系統(tǒng)功能中有很多功能，主要功能有滾動(dòng)字幕來讓大家發(fā)表自己的看法，和一些交流信息。社區(qū)熱帖部分用于發(fā)表一些最新信息，相冊(cè)子頁顯示一些照片。哲理模塊添加了一些人生哲理文章，音樂子子頁有自己喜歡的歌曲，可以添加和替換，留言板，通訊錄部分記錄聯(lián)系電話和一些信息。3.3系統(tǒng)功能結(jié)構(gòu)圖首頁首頁相冊(cè)哲理音樂留言通訊錄瀏覽相片管理相片查看文章修改添加樂音欣賞查看通訊錄修改添加信息

3.4首頁布局設(shè)計(jì)在進(jìn)行制作前，對(duì)網(wǎng)站首頁有一個(gè)整體的布局設(shè)計(jì)，熟話說人要臉，樹要皮。而且一個(gè)好的網(wǎng)站首頁會(huì)第一眼吸引到瀏覽該網(wǎng)站的游客,這就要求我們的首頁有一個(gè)好的布局設(shè)計(jì)。布局如圖3.3圖3.3首頁布局

第四章詳細(xì)設(shè)計(jì)4.1首頁首頁主要是顯示的一些信息和連接，按照事先畫好的布局圖來進(jìn)行布局設(shè)計(jì)。效果如圖4.1圖4.14.2首頁代碼實(shí)現(xiàn)在主頁設(shè)計(jì)過程中主要用到了滾動(dòng)字幕，登陸框，DIV功能和超鏈接，關(guān)鍵代碼如下：DIV<tdvAlign="bottom"align="middle"width="88"height="1"><palign="center"><ahref="xc.html"><imgonMouseOver="this.src='images/myhome_1.gif'"onMouseOut="this.src='images/myhome.gif'"src="images/myhome.gif"border="0"width="70"height="26"><divstyle="position:relative;left:3px;top:-20px;z-index:99;width:50px;">相冊(cè)</div>滾動(dòng)字幕<marquee

id="scrollArea"

height="150"

width="380"

loop="-1"

scrollamount="1"

scrolldelay="50"

direction="up"

onMouseOver=scrollArea.stop()

onMouseOut=scrollArea.start()>滾動(dòng)內(nèi)容</marquee>

4.3相冊(cè)子頁在相冊(cè)子頁中，用到了類似于windows圖片預(yù)覽里的幻燈片功能，在每個(gè)圖片框中添加圖片地址，然后修改坐標(biāo)，修改圖片切換時(shí)間等。效果如圖4.44.4相冊(cè)代碼實(shí)現(xiàn)關(guān)鍵代碼如下：for(vari=1;i<counts+1;i++){document.write('<ahref="javascript:changeimg('+i+');"id="xxjdjj'+i+'"class="axx"target="_self">'+i+'</a>');}document.write('</div></div>');change_img();</script>

4.5音樂子頁在音樂子頁中添加了一個(gè)音樂播放器，可以進(jìn)行音樂播放，同時(shí)帶有列表功能，效果如圖4.5圖4.54.6音樂子頁代碼實(shí)現(xiàn)關(guān)鍵代碼如下:<embedsrc="音樂地址"autostart="1"loop=-1type="application/x-mplayer2"width="400"height="64"></embed>4.7通訊錄子頁在通訊錄子頁中用了一個(gè)DIV標(biāo)簽來控制，可以用代碼的添加來添加信息，同時(shí)在每個(gè)表中添加了文字過多顯示滾動(dòng)。效果如圖4.7圖4.74.8通訊錄子頁代碼實(shí)現(xiàn)關(guān)鍵代碼如下：<tablewidth="462"border="1"align="left"cellspacing="0"bordercolor="#996633"><tr><tdwidth="35"nowrapclass="STYLE2"><divalign="left"class="STYLE3">序號(hào)</div></td><tdwidth="85"nowrapclass="STYLE2"><divalign="left"class="STYLE6">姓名</div></td><tdwidth="180"nowrapclass="STYLE2"><divalign="left"class="STYLE6">學(xué)校</div></td><tdwidth="150"nowrapclass="STYLE2"><divalign="left"class="STYLE6">專業(yè)</div></td><tdwidth="100"nowrapclass="STYLE2"><divalign="left"class="STYLE6">手機(jī)</div></td><tdwidth="100"nowrapclass="STYLE2"><divalign="left"class="STYLE6">QQ</div></td><tdnowrapclass="STYLE2"><divalign="left"class="STYLE6"><spanclass="STYLE3">校內(nèi)<strong>（有/沒有）</strong></span></div></td><tdwidth="150"nowrapclass="STYLE2"><divalign="left"class="STYLE7"><divalign="left"class="STYLE2">想說的話</div></div></td></tr><trbordercolor="#996633"><tdalign="center"valign="middle"class="STYLE2"><divalign="left"class="STYLE7"><spanclass="STYLE3"><strong>1</strong></span></div></td><tdwidth="85"class="STYLE2"> <divclass="STYLE3"style="WIDTH:85;HEIGHT:30;BACKGROUND-COLOR:transparent;OVERFLOW:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong><AHREF="xiugai4.asp?ID=1">宋澤明</A></strong></span></div> </div></td><tdwidth="180"class="STYLE2"> <divclass="STYLE3"style="WIDTH:180;HEIGHT:30;BACKGROUND-COLOR:transparent;OVERFLOW:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong>吉林工程技術(shù)師范學(xué)院</strong></span> </div></div></td> <divalign="left"> <spanclass="STYLE3"><strong>75196386</strong></span> </div> </div></td><tdwidth="120"class="STYLE2"> <divstyle="WIDTH:150;HEIGHT:30;BACKGROUND-COLOR:transparent;overflow-y:auto;scrollbar-face-color:#FFFFFF;scrollbar-shadow-color:#885C10;scrollbar-highlight-color:#F8ECD8;scrollbar-3dlight-color:#885C10;scrollbar-darkshadow-color:#F8ECD8;scrollbar-track-color:#F8ECD8;scrollbar-arrow-color:#885C10"> <divalign="left"> <spanclass="STYLE3"><strong>無</strong></span> </div></div></td><trbordercolor="#996633"><tdalign="center"valign="middle"class="STYLE2">

第五章調(diào)試分析5.1子頁錯(cuò)誤在制作子葉相冊(cè)時(shí)，相冊(cè)中部分圖片加了特效。但是在調(diào)試過程中發(fā)現(xiàn)圖片并不顯示，而且無特效。查找問題，發(fā)現(xiàn)代碼中圖片添加位置不對(duì)，而且并未調(diào)長寬。調(diào)試后，改正問題。截圖如圖5.1圖5.15.2網(wǎng)站特效不顯示在調(diào)試過程中發(fā)現(xiàn)有部分特顯沒有顯示，在網(wǎng)上詢問，發(fā)現(xiàn)沒有控件被阻止了。允許后特顯顯示截圖如5.2圖5.25.3Div標(biāo)簽使用在使用div過程中發(fā)現(xiàn)無法控制文字在圖片上的位置，而且圖片的位置也會(huì)發(fā)生偏移。檢查后發(fā)現(xiàn)是圖層坐標(biāo)控制不對(duì)，重新調(diào)整坐標(biāo)后文字顯示在圖片上。如圖5.3圖5.3

總結(jié)雖然此次課程設(shè)計(jì)的時(shí)間急促，但是這個(gè)收獲應(yīng)該說是相當(dāng)大的。一開始我們從參考書上找來了課題，但是畢竟是參考書，做到后來發(fā)現(xiàn)很多程序都是不完整的，這讓我們傷透了腦筋。參考書畢竟只是一個(gè)參考，設(shè)計(jì)這種東西最后還是要靠自己動(dòng)腦筋。然后整個(gè)設(shè)計(jì)通過了軟件和硬件上的調(diào)試，應(yīng)該說這是通過我們小組成員的共同努力和動(dòng)腦完成的，雖然內(nèi)容并不是很復(fù)雜，但是我們覺得設(shè)計(jì)的過程相當(dāng)重要，學(xué)到了很多，收獲了很多。通過這次課程設(shè)計(jì)我們也發(fā)現(xiàn)了自身存在的不足之處，雖然感覺理論上已經(jīng)掌握，但在運(yùn)用到實(shí)踐的過程中仍有意想不到的困惑，經(jīng)過一番努力才得以解決。我覺得課程設(shè)計(jì)反映的是一個(gè)從理論到實(shí)際應(yīng)