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

1、計算機網(wǎng)絡(luò)課程設(shè)計報告設(shè)計題目： 個人網(wǎng)站 系 別： 計算機工程學(xué)院 專 業(yè)： 計算機科學(xué)與技術(shù)專業(yè) 班 級： 計算機1086班 學(xué)生姓名: 呂文達 學(xué) 號: 1081301615 起止日期: 2011年6月20日2011年6月26號指導(dǎo)教師： 徐成杰，單勁松，楊松，顧相平設(shè)計任務(wù)書課題名稱個人網(wǎng)站制作程序設(shè)計設(shè)計目的熟悉 ，HTML及www相關(guān)技術(shù)；掌握靜態(tài)網(wǎng)頁及動態(tài)網(wǎng)頁設(shè)計方法；掌握網(wǎng)頁布局方法；提高網(wǎng)絡(luò)程序設(shè)計能力。實驗環(huán)境PC機，Window XP以上操作系統(tǒng)編程語言（如C+，Java等）任務(wù)要求要求學(xué)生結(jié)合課程體系的實際需求及實踐能力、實驗條件等外部因素，選擇恰當?shù)脑O(shè)計課題，既體現(xiàn)網(wǎng)

2、絡(luò)基本原理，又能反映實際組網(wǎng)及編程能力。學(xué)生完成設(shè)計任務(wù)后，按要求提交課程設(shè)計報告，課程設(shè)計報告規(guī)范化，并能夠反映課程設(shè)計的實際內(nèi)容。工作進度計劃序號起止時間工 作 內(nèi) 容115周制定課程設(shè)計計劃，編寫課程設(shè)計指導(dǎo)書21016下發(fā)任務(wù)，學(xué)生選題，分組，查閱資料317上機系統(tǒng)調(diào)試，完成系統(tǒng)設(shè)計，課程設(shè)計答辯418書寫課程設(shè)計報告，上交報告電子及打印文檔指導(dǎo)教師：徐成杰，單勁松 楊松 顧相平 2011 年 05 月 摘要： 21世紀是信息高速發(fā)達的時代，網(wǎng)絡(luò)作為當今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。擁有個人網(wǎng)站是時代發(fā)展的趨勢。有人預(yù)測過不了幾年，幾乎每個都會有自己的網(wǎng)

3、站，就象現(xiàn)在手機一樣普及。而且網(wǎng)站就象我們個人的身份證一樣，成為我們生活中不可缺少的一部分。個人網(wǎng)站可以做任何自己想做的事情，而且使人與人，人與社會之間的溝通交流更加的方便，成為社會中不可缺少的一部分。本網(wǎng)站主要是利用Microsoft Dreanweaver8制作而成，充分運用Dreamweaver的一些基本功能，加入了Java語言、ActiveX與腳本、書簽、超鏈接、文字動態(tài)特效、時間軸，以及利用Flash制作。關(guān)鍵詞：個人網(wǎng)站設(shè)計；規(guī)劃；技術(shù)目錄TOC o 1-2 h u HYPERLINK l _Toc6281 1 設(shè)計題目 PAGEREF _Toc6281 1 HYPERLINK l

4、 _Toc22835 2 設(shè)計目的與意義 PAGEREF _Toc22835 1 HYPERLINK l _Toc23922 3 設(shè)計原理及方案 PAGEREF _Toc23922 1 HYPERLINK l _Toc24175 3.1 HTML簡介 PAGEREF _Toc24175 1 HYPERLINK l _Toc20736 3.2 設(shè)計原則 PAGEREF _Toc20736 2 HYPERLINK l _Toc31907 3.3 網(wǎng)頁的風(fēng)格 PAGEREF _Toc31907 2 HYPERLINK l _Toc996 3.4 網(wǎng)頁的組織與安排 PAGEREF _Toc996 2

5、HYPERLINK l _Toc21266 4 詳細設(shè)計 PAGEREF _Toc21266 3 HYPERLINK l _Toc27748 5 可行性分析 PAGEREF _Toc27748 7 HYPERLINK l _Toc10957 6上傳測試 PAGEREF _Toc10957 7 HYPERLINK l _Toc13221 總 結(jié) PAGEREF _Toc13221 8 HYPERLINK l _Toc25427 致 謝 PAGEREF _Toc25427 9 HYPERLINK l _Toc29267 參考文獻 PAGEREF _Toc29267 10 HYPERLINK l _

6、Toc13607 附錄 PAGEREF _Toc13607 121 設(shè)計題目Thanatos house-個人網(wǎng)站設(shè)計2 設(shè)計目的與意義萬維網(wǎng)是計算機網(wǎng)絡(luò)應(yīng)用層的一個重要內(nèi)容，包含超文本傳送協(xié)議 和超文本標記語言HTML等內(nèi)容，本設(shè)計就是要學(xué)生通過對ASP（Active Server Pages）技術(shù)的學(xué)習(xí)設(shè)計一個具有個人特色的網(wǎng)站，從而掌握基本網(wǎng)頁的創(chuàng)建技術(shù)。 在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，人們已經(jīng)離不開了網(wǎng)絡(luò)，網(wǎng)絡(luò)已經(jīng)成為人與人，人與社會之間交流的一種形式，他能夠把事情的復(fù)雜化轉(zhuǎn)為簡單化。通過設(shè)計一個個人網(wǎng)站，以達到個人推薦、展現(xiàn)自我的

7、一個空間，個人網(wǎng)站為交流提供綜合的網(wǎng)絡(luò)環(huán)境，同時也為個人的宣傳，發(fā)展，提供了一個平臺。3 設(shè)計原理及方案3.1 HTML簡介 HOMEPAGE（主頁）是可以通過WWW查詢的Internet上WWW站點的首頁。從某種角度來看可以說是 電子廣告板、信息板，它包含了大量的信息。由于Internet一直以異乎尋常的速度發(fā)展，WWW在 信息交換查詢中的地位得到了很大提高，這就使HOMEPAGE的編寫變得十分重要。HOMEPAGE是以HTML格式寫成的，HTML不是WYSIWYG(所見即所得)的，不過HTML非常易學(xué)易用， 它以標簽（TAG）標示及排列各對象。而標簽本身則以號標識，標簽內(nèi)的內(nèi)容稱為(ELE

8、MENT),元素代表了標簽的意義。一般格式為：OBJECTOBJECT, 或者元素是與大小寫無關(guān)的。它很類似與工業(yè)標準的SGML（標準廣義標置語言），它的結(jié)構(gòu)可以歸為SGML文檔類型定義（DTD）。目前的版本是或。支持的Web瀏覽器有等。HTML寫HOME PAGE的方法可以參考相關(guān)的書籍。Web presentation Web表述，Web表述是包含許多連接在一起的用于表達某一目的的網(wǎng)頁的總稱。它是一個體系結(jié)構(gòu)。Web pages 網(wǎng)頁就是可以被瀏覽器訪問的單個HTML文件。Home Page 主頁是Web站點的首頁。即被訪問站點的第一個網(wǎng)頁。WWW- World Wide Web 全球資訊

9、網(wǎng)SGML - Standard Generalized Marked Language 標準廣義標記語言。 DTD- Document Type Definition 文件類型定義。DTD和SGML的關(guān)系，就象C+和計算機語言的關(guān)系。HTML - HyperText Markup Language 超文本標記語言。HTML is a SGML DTD.超文本標記語言是一種標準標記文件的定義。而在全球資訊網(wǎng)中所閱讀的文章，正是依照種這種標準。3.2 設(shè)計原則網(wǎng)頁的界面應(yīng)該保持統(tǒng)一，以保證頁面在瀏覽時有較高的下載速度，網(wǎng)頁的性能安全可靠，具有一定的開放性，易于管理，網(wǎng)頁的內(nèi)容便于擴充，實現(xiàn)信息資

10、源的有效共享。3.3 網(wǎng)頁的風(fēng)格網(wǎng)頁的風(fēng)格應(yīng)該統(tǒng)一，這樣才能夠突出網(wǎng)頁所要表述的主題，也同時能夠幫瀏覽者快速了解站點的結(jié)構(gòu)和瀏覽機制。網(wǎng)頁的色彩上應(yīng)該突出個性不失簡潔。整個頁面要具有個性，主題突出 。網(wǎng)頁的欄目保持相應(yīng)的一致，使瀏覽者對站點的結(jié)構(gòu)一目了然。3.4 網(wǎng)頁的組織與安排在我們要在網(wǎng)上發(fā)布信息和建立網(wǎng)頁之前首先注意以下幾個原則和建議，可能會有助與今后網(wǎng)頁的制作。在寫HomePage之前最好要明確寫HomePage的目的是什么，是個人信息、公司介紹、在線文檔、 購物目錄還是別的什么。有一個明確的目的對于Web presentation的組織很有好處。當然這并不是說沒有一個明確的目的就不能

11、寫主頁。也可以在制作中建立目的。只是那樣工作量會比較大。會有一些重復(fù)的工作。可以用自己所熟悉的文字編輯器來編輯它，例如EDIT、VI、WS、Word等，(但一定要以純文本方式保存，瀏覽器只識別純文本格式的文件)不一定要用其它的新穎編輯器。只要通過一些簡單的標注，就可以讓文章生動和活潑起來，這就是HTML的特色。Thanatos house”網(wǎng)頁設(shè)計Thanatos house的主頁面構(gòu)圖如下：首頁中包含了導(dǎo)航欄目：如首頁、音樂播放、日志、個人檔案、相冊，一些共享音樂及其下載、大家平時一些感興趣作品的欣賞、一些網(wǎng)友可以用來舒緩心情的經(jīng)典網(wǎng)站、一些關(guān)于我們大家的信息等等。其中音樂推薦中主要的是給大

12、家推薦一些新歌及本人比較喜歡的或是經(jīng)典的歌曲，忙碌之余不妨聽點歌曲，讓心靈休憩一下；日志：發(fā)布一些文章，主要是勵志方面及生活中需要注意的一些情況，大家何時何地一起參加野外活動，最近有哪些展會活動什希望能給大家一點幫助；個人檔案：因為是個人網(wǎng)站，感覺有必要介紹一下自己的基本情況，以及關(guān)于本專業(yè)的相關(guān)知識；相冊：提供一些著名攝影能夠舒緩心情，大家比較感興趣的生活的連接；4 詳細設(shè)計詳細設(shè)計階段的根本目標是確定應(yīng)該怎樣具體地實現(xiàn)所需要的達到的目標，也就是說詳細設(shè)計后的下一步，應(yīng)該是編號程序的過程,詳細設(shè)計不是具體地編寫程序，而是設(shè)計出程序的“藍圖”，然后根據(jù)“藍圖”來編寫程序，所以詳細設(shè)計的好壞，直

13、接影響到編程的效率。 本次設(shè)計主要用到的技術(shù)有：文字的動態(tài)效果的實現(xiàn)，本地鏈接，網(wǎng)站間的鏈接，時間軸的使用，flash動畫的插入，背景音樂，背景圖片，及鼠標的特效等。在制作過程中，為了使網(wǎng)頁更加美觀，會用到flash,photoshop等技術(shù)。具體設(shè)計如下：主頁的設(shè)計：在圖片區(qū)內(nèi)，選出幾副圖片，組合成項。主頁使用的技術(shù)主要有：文字動態(tài)效果，鼠標特效，本地鏈接，背景音樂等。效果如下：圖4-1點擊主頁界面的“心情按鈕”，會出現(xiàn)下圖所示界面（圖4-2所示）：圖4-2點擊主頁面的“日志按鈕”，會出現(xiàn)下圖所示界面（圖4-3所示）：圖4-3點擊日志界面的“雨中漫步”就會出現(xiàn)下圖所示界面（圖4-4所示)：圖

14、4-4點擊主頁面的“資料按鈕”，會出現(xiàn)下圖所示界面（圖4-5所示）：圖4-5點擊主界面的“聯(lián)系按鈕”，會出現(xiàn)下圖所示界面（圖4-6所示）：圖4-6 5 可行性分析現(xiàn)代遠程高等教育系統(tǒng)是使用計算機進行網(wǎng)上日常教學(xué)工作的系統(tǒng)。通過使用計算機技術(shù)、信息技術(shù)、數(shù)據(jù)庫技術(shù)，來提高網(wǎng)絡(luò)學(xué)院的工作質(zhì)量和工作效率為目標，利用先進的硬件設(shè)備，對網(wǎng)絡(luò)教學(xué)日常工作的各個教學(xué)環(huán)節(jié)實行計算機管理、控制和遠程授課。在該項目的可行性研究與計劃工作中，通過對網(wǎng)絡(luò)工作環(huán)境進行的實地調(diào)查和管理工作人員的交流，對學(xué)生日常學(xué)習(xí)的情況、教師工作流程、所完成的任務(wù)和存在的問題的研究，認為目前本網(wǎng)站的建設(shè)是完全可行的。6上傳測試網(wǎng)站建設(shè)完

15、畢，最后要發(fā)布到Web服務(wù)器上，才能讓大家都能觀看?，F(xiàn)在上傳的工具有很多，有些網(wǎng)頁制作工具本身就帶有Ftp功能，利用這些Ftp工具，我本人推薦leapftp,可以很方便地把網(wǎng)站發(fā)布到自己申請的主頁存放服務(wù)器上?？?結(jié)網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點，無可置疑， 網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。而個人網(wǎng)站可以做任何自己想做的事情，而且使人與人，人與社會之間的溝通交流更加的方便，成為社會中不可缺少的一部分。本網(wǎng)站主要是利用Microsoft Dreanweaver8制作而成，充分運用Dreamweaver的一些基本

16、功能，加入了Java語言、ActiveX與腳本、書簽、超鏈接。本網(wǎng)站適用性強，只要對網(wǎng)站中的部分內(nèi)容進行簡單的修改，就能適合于大多數(shù)架設(shè)有內(nèi)部局域網(wǎng)的單位或家庭使用，也可為有興趣建立個人站點的人士提供參考與借鑒。在設(shè)計過程中，我了解了一個網(wǎng)站形成的基本過程和基本綱領(lǐng)構(gòu)架，加深了我對現(xiàn)在計算機技術(shù)、通訊技術(shù)、因特網(wǎng)技術(shù)等的認識，相信這些知識都將對我的工作帶來很大的幫助。這次設(shè)計似水無痕網(wǎng)站，對我來說是一個將所學(xué)知識從書本運用到實際操作的初次體驗。在這次的設(shè)計中雖然時間緊迫但我學(xué)會了很多，也感到自身知識的貧乏，同時也認識到了 理論與實踐間存在的巨大差距，有些看上去很簡單的問題，在動手去實踐時卻未必

17、會順利。一味的啃書并非是好的。只有理論與實踐相結(jié)合，才能更快的進步，學(xué)到更多的知識。希望在今后的努力中能做出更完善的設(shè)計。致 謝在這篇論文完成之際，在此我衷心的感謝我的指導(dǎo)老師楊松老師、徐成杰老師、單勁松老師、顧相平老師。這幾位老師在百忙之抽出時間來為我指導(dǎo)講解，并提出了許多寶貴的意見和建議，我的論文才得以順利完成。同時，要感謝淮陰工學(xué)院、計算機工程系提供的實踐機會，實驗室人員提供的實驗環(huán)境，同組同學(xué)的互幫互助，參考文獻的原作者。參考文獻1 吳濤.網(wǎng)站全程設(shè)計技術(shù)（修訂本）.北京：北京交通大學(xué)出版社，2 龍馬工作室.ASP+SQL Server組建動態(tài)網(wǎng)站實例精講.北京：人民郵電出版社，3 趙

18、增敏.ASP動態(tài)網(wǎng)頁設(shè)計.電子工業(yè)出版社，4 任學(xué)文/范嚴 任學(xué)文,范嚴編. HYPERLINK :/ bookuu /kgsm/ts/2007/02/07/1061793.shtml 網(wǎng)頁設(shè)計與制作.中國科學(xué)技術(shù)出版社，5 武創(chuàng)/王惠 t _blank 武創(chuàng),王惠.網(wǎng)頁設(shè)計探索之旅.電子工業(yè) t _blank 電子工業(yè)出版社，6 杜巧玲等編 杜巧玲. HYPERLINK :/ bookuu /kgsm/ts/2006/04/05/0482187.shtml 網(wǎng)頁設(shè)計超級夢幻組合.清華大學(xué) 清華大學(xué)出版社, 7 吳黎兵/羅云芳 吳黎兵,羅云芳.網(wǎng)頁設(shè)計教程. 武漢大學(xué) t _blank 武漢大學(xué)出版社，指導(dǎo)教師評語學(xué)號1081301615姓名呂文達班級計算機1086選題名稱A+課程設(shè)計序號評價內(nèi)容權(quán)重（%）得分1考勤記錄、學(xué)習(xí)態(tài)度、工作作風(fēng)與表現(xiàn)。 52自學(xué)情況：上網(wǎng)檢索機時數(shù)、文獻閱讀情況（筆記）。103論文選題是否先進，是否具有前沿性或前瞻性。54成果驗收：是否完成設(shè)計任務(wù)；能否運行、可操作性如何等。205報告的格式規(guī)范程度、是否圖文并茂、語言規(guī)范及流暢程度；主題是否鮮明、重心是否突出、論述是否充分、結(jié)論是否正確；是否提出了自己的獨到見解。306文獻引用是否合理