網(wǎng)頁設(shè)計課程設(shè)計報告

1、<p>　　《 web開發(fā)標準 》</p><p><b>　　課程設(shè)計報告</b></p><p>　　系別： 信息管理與工程系 </p><p>　　專業(yè)： 軟件技術(shù) </p><p>　　課程設(shè)計題目：空間小窩</p><p>　　指導(dǎo)教師：

2、 </p><p>　　小組成員： </p><p>　　2012 年 11 月 27 日</p><p><b>　　目錄</b></p><p>　　引言······

3、····················2</p><p>　　系統(tǒng)分析············

4、············3 </p><p>　　1、功能分析···················

5、;···········3</p><p>　　2、模塊劃分····················

6、83;·········3</p><p>　　3、詳細介紹及效果圖·····················

7、83;····4 </p><p>　　4、設(shè)計特色···························

8、···12</p><p>　　5、參考網(wǎng)站····························

9、83;·12</p><p>　　總結(jié)··························13 </p><p>　　1

10、、遇到的問題·····························13</p><p>　　2、心得體會·

11、83;····························13</p><p>　　3、期望···&#

12、183;····························14</p><p><b>　　引言</b>&l

13、t;/p><p>　　網(wǎng)站在現(xiàn)如今社會中，已是很普及的東西了。通過網(wǎng)站我們可以獲得更多的知識和能力。經(jīng)過本學(xué)期對web設(shè)計基礎(chǔ)這門課程的學(xué)習，對網(wǎng)頁設(shè)計以及相關(guān)代碼的使用有了深入的了解，在學(xué)期末制作課程設(shè)計主題為個人網(wǎng)站的網(wǎng)頁，對其設(shè)計并實現(xiàn)。</p><p>　　本網(wǎng)站主要圍繞個人為中心展開，除了介紹一些本人的基本信息外，還包括音樂、日志、相冊、時光軸、視頻、留言等模塊.本網(wǎng)站內(nèi)容充實， 在

14、設(shè)計上運用了div+css布局 表格、表單、層、flash javascript特效（可以使網(wǎng)頁更加生動美觀）、ajax、超鏈接等技術(shù)。分頁面上運用了導(dǎo)航條。插入了動態(tài)圖片以及視頻等給網(wǎng)增加了美觀度，在首頁的設(shè)計上本著簡單易懂的原則，用戶只要點擊鏈接就能看到自己想看到的連接內(nèi)容。網(wǎng)站的頁面有些設(shè)置了背景音樂，使訪問者在瀏覽的同時還能欣賞到悠揚的旋律。</p><p><b>　　一、系統(tǒng)分析與設(shè)計&l

15、t;/b></p><p><b>　　功能分析</b></p><p>　　本課程設(shè)計為制作個人網(wǎng)站。個人網(wǎng)站是一個展示個人風采的平臺，個人網(wǎng)站的美觀與內(nèi)容同等重要。一個優(yōu)秀的個人網(wǎng)站應(yīng)該能夠吸引瀏覽者，結(jié)構(gòu)和內(nèi)容都要求合理，功能要求齊全。本網(wǎng)站頁面較為美觀，共有13個頁面，分為三級。通過一級頁面即首頁可以進入到想要進入的二級頁面。二級頁面為瀏覽者提供以下功能

16、：查看主人日志、音樂、相冊、主人的個人信息、心情說說、給主人留言等。還給用戶提供了登錄注冊頁面。三級頁為瀏覽者提供分享推薦日志和視頻功能。</p><p><b>　　模塊劃分</b></p><p><b>　　網(wǎng)站結(jié)構(gòu)如下：</b></p><p>　　本網(wǎng)站共劃分我9個模塊，分別為：主頁、日志、相冊、音樂、心情、時

17、光軸、自我介紹（個人檔）、留言板、登錄注冊等模塊頁面。網(wǎng)站的結(jié)構(gòu)成樹形，一個模塊為一個網(wǎng)頁，可通過超鏈接一一進入每個頁面。</p><p>　　3、詳細介紹及效果圖</p><p><b>　　進入動畫</b></p><p>　　此頁面是應(yīng)用了flash動畫，下載的flash動畫放在flash8里進行修改，得到自己想要的效果，再對其進行超鏈接

18、（在動作面板里加入代碼：</p><p>　　on(release)</p><p>　　{getURL("zhuye.html","_self()")}）</p><p><b>　　主頁</b></p><p>　　首頁風格布局都比較簡單，應(yīng)用到了div+css布局。采用盒子模

19、式，將頁面分為上下兩部分。先用fireworks做出需要的圖片，然后在box中插入圖片做背景，頁面的下部分為flash。Flash為自己制作的，主要應(yīng)用到按鈕元件。</p><p>　　注冊此頁面應(yīng)用到了div+css布局、將頁面分為左中右三部分。先用fireworks做出需要的圖片，然后插入圖片做背景，利用JavaScript技術(shù)驗證注冊。</p><p><b>　　音樂&l

20、t;/b></p><p>　　此頁面應(yīng)用到了div+css布局。將頁面分為上中下三部分，里面采用多個div標簽，先用fireworks做出需要的圖片，然后在body中插入圖片做背景，導(dǎo)航為flash，flash為自己制作，主要應(yīng)用到按鈕元件，在相應(yīng)的div里加層并對其定位然后顯示隱藏層，此頁面添加了背景音樂。（未能實現(xiàn)在線聽歌）</p><p><b>　　相冊</

21、b></p><p>　　此網(wǎng)頁用div+css布局，先用fireworks做出需要的圖片，然后在插入圖片做背景，設(shè)置相應(yīng)樣式。在設(shè)計顯示隠藏，（對行為進行設(shè)置）在對應(yīng)位置設(shè)置鏈接。</p><p><b>　　時光軸</b></p><p>　　此網(wǎng)頁應(yīng)用到了div+css布局。將頁面分為上中下三個大部分，再分為若干個小部分， 用f

22、ireworks做出需要的圖片，然后在插入圖片做背景，在相應(yīng)位置輸入文章標題并設(shè)置鏈接。導(dǎo)航為flash，flash為自己制作，主要應(yīng)用到按鈕元件。</p><p><b>　　視頻</b></p><p>　　這兩個頁面做法簡單，div布好局，把視頻格式轉(zhuǎn)換好，插入相應(yīng)位置即可。</p><p><b>　　個人資料</b&g

23、t;</p><p>　　此頁面布局簡單，應(yīng)用到了div+css布局、先用fireworks做出需要的圖片，然后插入圖片做背景，導(dǎo)航為flash，flash為自己制作，主要應(yīng)用到按鈕元件。在相應(yīng)區(qū)域輸入對應(yīng)文字。</p><p><b>　　留言板</b></p><p>　　此頁面應(yīng)用到了div+css布局、flash等技術(shù)。將頁面分為上中下

24、三部分。做法簡單</p><p><b>　　心情說說</b></p><p>　　本頁面比較簡單，僅用到div+css布局和超鏈接。將頁面分為上中下三部分。用fireworks做出需要的圖片，然后插入圖片做背景。在相應(yīng)區(qū)域輸入對應(yīng)文字。</p><p><b>　　日記</b></p><p>　

25、　此頁面應(yīng)用到了div+css布局、將頁面分為上中下啊、三部分。先用fireworks做出需要的圖片，然后插入圖片做背景，再相應(yīng)的地方做相應(yīng)的鏈接。導(dǎo)航為flash，flash為自己制作，主要應(yīng)用到按鈕元件。</p><p><b>　　日記</b></p><p>　　此頁面做法簡單，利用div+css布局，加入背景圖片，在相應(yīng)的文字區(qū)域添加文字，導(dǎo)航為flash，

26、flash為自己制作，主要應(yīng)用到按鈕元件。</p><p><b>　　4、設(shè)計特色</b></p><p>　　特色顧名思義就是要有自己的特色和別人與眾不同的，本網(wǎng)站完全為個人靈感，完全想象。本網(wǎng)站頁面較為美觀，風格溫馨美好。頁面優(yōu)美可人，符合大數(shù)人個性特點。功能比較完善。</p><p><b>　　5、參考網(wǎng)站</b>

27、;</p><p><b>　　***</b></p><p><b>　　總結(jié)</b></p><p><b>　　1、遇到的問題</b></p><p>　　在本網(wǎng)站的制作過程中遇到了不少問題，列舉如下：</p><p>　　<1>如何設(shè)

28、整個個人網(wǎng)站的背景音樂（最后只實現(xiàn)了每個頁面單獨的背景音樂）</p><p>　　<2>不知如何更好的利用JavaScript。</p><p>　　<3>在模板中插入層，層無法定位。（最后實現(xiàn)了）</p><p>　　<4>在制作flash導(dǎo)航添加鏈接。（最后實現(xiàn)）</p><p>　　<5>

29、添加JavaScript播放器沒能實現(xiàn)。</p><p>　　這些問題有些是通過查找資料，同學(xué)幫忙而實現(xiàn)了，還有的沒能實現(xiàn)，希望在以后的學(xué)習中能一個個解決。</p><p><b>　　2、心得體會</b></p><p>　　剛開始要做這個課程設(shè)計時，不知道要干嘛，沒有思路沒有一點概念一直沒有確定主題。最后就犯了個錯誤沒有選好主題，導(dǎo)致最后的

30、網(wǎng)站沒有自己想象的那么完美大方，讓自己有點遺憾和失望，這個對我來說是個很好的教訓(xùn)，以后一定要做好充分的準備。</p><p>　　我感覺要想做好一個網(wǎng)站必須得要有很好的思路再做好準備工作，必須收集大量的資料，然后就是要對網(wǎng)站有計劃有想法，最后就是要耐心、認真、信心，這樣才能做出優(yōu)秀的網(wǎng)站設(shè)計。</p><p>　　就這次的課程設(shè)計我的心得體會：</p><p>　　

31、很感謝這次課程設(shè)計讓我看到了自己獨立的一面，也讓我有了一次很好的鍛煉，不動手就不知道自己能做的怎么樣，在這次設(shè)計中，我讓自己對網(wǎng)站的知識更加的富裕。以前知道的知識現(xiàn)在能更好的利用了，以前不知道的，我也通過查找資料，詢問同學(xué)讓自己知道，從而讓我擴展了更多的知識，這是值得高興的事，更加值得高興的是發(fā)現(xiàn)自己已經(jīng)不知不覺的喜歡上了這門課程，發(fā)現(xiàn)自己對開發(fā)網(wǎng)站很感興趣了，所以我這次課程設(shè)計是成功的，雖然做的不是很好但畢竟是第一個個人網(wǎng)站。相信在以

32、后的日子中我做的網(wǎng)站會越來越好的。我相信自己。在此我得感謝我的指導(dǎo)老師（崔新會老師）謝謝老師對我的指點與教育。謝謝老師！辛苦了！</p><p><b>　　期望</b></p><p>　　在這次課程設(shè)計中，對自己做的還是很多不足的地方，沒有自己想象的效果好，但是還是學(xué)到了很多知識擴展了思路，以后我會更加的努力，在平時學(xué)習中不斷的積累經(jīng)驗，不斷的發(fā)現(xiàn)問題而從中得到更