阿貍空間網(wǎng)站的設計與制作個人網(wǎng)站畢業(yè)論文

1、畢 業(yè) 設 計（論 文）題目 阿貍空間的設計與制作 王甜甜 學號 學院 專業(yè) 計算機網(wǎng)絡技術 2013年5月20日23 / 32成績評議學號 王甜甜 專業(yè) 計算機網(wǎng)絡技術 題目 阿貍空間的設計與制作 指導教師建議成績：評閱教師建議成績：答辯小組建議成績：院答辯委員會評閱意見與評定成績：答辯委員會主任簽字（蓋章）： 年 月 日畢業(yè)設計開題報告學院專業(yè)計算機網(wǎng)絡技術學號王 甜題目阿貍空間的設計與制作選題目的和意義隨著科學技術的發(fā)展，互聯(lián)網(wǎng)技術也越來越先進，人們相互交流的方式也越來越多樣化。其中個人也是用戶使用最多的一種方式。個人為我們提供了一個更好的平臺。為了樹立個人在網(wǎng)絡上的形象，并且通過設計一

2、個個人；已達到個人推薦、展現(xiàn)自我的一個平臺，個人為交流提供綜合的網(wǎng)絡環(huán)境，同時也為個人的宣傳、發(fā)展、提供了一個平臺。設計背景如今的類型越來越多，現(xiàn)在有許多人設計自己的個性來增加與別人的交流。的設計已經(jīng)成為個人、企業(yè)公司等介紹自己的平臺，相互交流的會所。主要使用DreamWeaver、FireWorks、ASP.NET、SQLServer數(shù)據(jù)庫等一些軟件設計具有自己特色個人。設計提綱 本設計主要包括以下幾部分容：1基于框架建立的前臺頁面（包括主頁、個人簡介、留言板、忘記密碼、登錄、注冊等）。2基于代碼的后臺頁面（留言板管理、數(shù)據(jù)庫的修改、刪除，后臺代碼的查詢、修改、刪除等功能）。計劃進度1201

3、5年1月14日確定畢業(yè)設計的題目，提交開題報告。22015年1月16日2月10日查閱有關資料，深入學習相關開發(fā)工具。3. 2015年2月11日3月20日各功能模塊的代碼編寫并測試。4. 2015年4月15日前基本完成設計，完成畢業(yè)文論文初稿并提交。52015年4月16日5月5日完成論文二稿，并提交。62015年5月6日5月17日完成并提交論文三稿。72015年6月4日前組織院級答辯。指導教師意見 指導教師簽字：年月日指導教師意見序號項目要求滿分得分1選題設計選題符合本專業(yè)應用圍選題有現(xiàn)實價值，能反映設計對象的客觀需要設計目的明確、唯一設計任務有一定難度102考勤與態(tài)度畢業(yè)設計各階段工作按時完成

4、積極主動與指導老師溝通認真對待指導老師給出的意見103信息資料應用設計任務所需信息、資料使用充足信息資料的針對性、時效性、合理性強104工作量正文字數(shù)不少于5000字55理論知識綜合運用能力合理運用了相關學科的理論、思想、方法與規(guī)律文研究方法和手段的運用能力106分析問題的能力分析過程邏輯嚴謹結論表達明確107解決問題的能力形成完整解決問題的方案設計方案是否具有可行性方案的預期效果能夠達到設計的目的108設計撰寫質(zhì)量結構合理，層次清晰、邏輯性強文題相符，觀點、結論正確寫作規(guī)，圖表完備、整潔，符號統(tǒng)一，編號齊全設計容是否存在抄襲209可行性與創(chuàng)新性可應用性強在思想、構思、方法等方面有創(chuàng)新表現(xiàn)10

5、10其它5建議成績： 優(yōu) 良 中 與格 不與格總分注：總分為60分以下為不與格，6070分為與格，70分80分為中，80分90分為良，90分100分為優(yōu)。對設計的簡短評價 指導教師簽字 年 月 日評閱教師意見序號項目要求滿分得分1選題設計選題符合本專業(yè)應用圍選題有現(xiàn)實價值，能反映設計對象的客觀需要設計目的明確、唯一設計任務有一定難度102考勤與態(tài)度畢業(yè)設計各階段工作按時完成積極主動與指導老師溝通認真對待指導老師給出的意見103信息資料應用設計任務所需信息、資料使用充足信息資料的針對性、時效性、合理性強104工作量正文字數(shù)不少于5000字55理論知識綜合運用能力合理運用了相關學科的理論、思想、方

6、法與規(guī)律文研究方法和手段的運用能力106分析問題的能力分析過程邏輯嚴謹結論表達明確107解決問題的能力形成完整解決問題的方案設計方案是否具有可行性方案的預期效果能夠達到設計的目的108設計撰寫質(zhì)量結構合理，層次清晰、邏輯性強文題相符，觀點、結論正確寫作規(guī)，圖表完備、整潔，符號統(tǒng)一，編號齊全設計容是否存在抄襲209可行性與創(chuàng)新性可應用性強在思想、構思、方法等方面有創(chuàng)新表現(xiàn)1010其它5建議成績： 優(yōu) 良 中 與格 不與格總分注：總分為60分以下為不與格，6070分為與格，70分80分為中，80分90分為良，90分100分為優(yōu)。對設計的簡短評價 指導教師簽字 年 月 日摘 要隨著互聯(lián)網(wǎng)的飛速發(fā)展，

7、電腦網(wǎng)絡已應用到各個領域，普與到千家萬戶,無論是國還是國外都迅速的發(fā)展起來。現(xiàn)在，網(wǎng)絡已經(jīng)成為人們快速獲取信息、發(fā)布信息和傳輸信息的主要渠道，成為每個人生活中的一部分，同時網(wǎng)絡也提供了一個很好的信息交換平臺。目前，網(wǎng)頁設計和建設成為新時代的一個熱點。網(wǎng)絡已經(jīng)滲透到各個領域，無論是企業(yè)還是個人，網(wǎng)絡為我們提供了很好的信息交流平臺。政府利用宣傳自己的政策、企業(yè)利用宣傳自己的形象、學校利用宣傳自己的教育、個人利用展示自己的個性風采。越來越多的人都希望擁有自己的個性，展現(xiàn)自己的個性風采。通過建設個人，我們可以展示自己，與別人交流學習，求職等等。本主要從個人的數(shù)據(jù)庫的設計方面和網(wǎng)頁設計三劍客入手，實現(xiàn)個

8、人系統(tǒng)的主頁瀏覽模塊、后臺管理員登錄模塊、留言板模塊、前臺會員登錄模塊、會員注冊模塊與身份驗證模塊等方面設計，從設計的主頁、界面設計方面研究，并探討了運用數(shù)據(jù)庫技術，基于ASP.NET的動態(tài)網(wǎng)頁設計和SQLServer數(shù)據(jù)庫進行個人的設計與實現(xiàn)，針對要實現(xiàn)這些方面的技術，此文將一一簡單介紹其設計思想和設計方法。關鍵詞：ASP.NET；SQLServer；個人；留言板ABSTRACTWith the rapid speed development of Internet, the network computer network has been applied to various field

9、s more and more, popular both in domestic and foreign families to rapid development. Now network has quick access to information, publishing information and the main channel to transmit information, become a part of life, everyone at the same time the network also provides a good information exchang

10、e platform.At present, web design and website construction has become a focus in the new era. Network has already penetrated into every field, whether business or personal, Internet provides us with very good communication platform. Use website propaganda their government policies, enterprise use we

11、bsite propaganda their image, schools use website propaganda education, personal use of your own website to show your personality. More and more people want to have his own personality website, showing their own personality. Through the construction of personal website, we can show ourselves and com

12、municate with others learning, job search, etc.My personal website is mainly from the website database design and web design of the three musketeers, achieving personal website system backstage administrator login, message board module, member login, registration and authentication aspects such as d

13、esign, from the home page of website design, interface design, research, and probes into the use of database technology, dynamic web design based on ASP.NET and is essentially digital personal website design and implementation of the database, in view of the technology to achieve these aspects, this

14、 article will introduce one by one the design idea and design method.KEY WORDS:ASP.NET；SQLServer；Personal Website；Message board目 錄引言11概述21.1軟件的選用與簡介21.2選題的目的和意義21.3課題研究的主要簡介22設計準備32.1設計愿望32.2設計背景42.3確定主題62.4確定形象62.5確定風格62.6確定容63各模塊簡介73.1首頁模塊73.2我的朋友83.3大學之旅83.4美文欣賞93.5可愛收藏94具體實現(xiàn)與分析94.1靜態(tài)設計94.1.1站點的建

15、設與收集素材104.1.2HTML語言104.1.3用框架表格進行布局和排版114.1.4添加網(wǎng)頁元素114.1.5滾動的公告114.1.6典型的子頁設計過程124.2動態(tài)設計134.2.1數(shù)據(jù)庫的建立134.2.2建立會員登錄系統(tǒng)144.2.3建立留言板模塊184.2.4后臺部分195結論20參考文獻21致22引 言隨著科技的進步、時代的發(fā)展，計算機信息行業(yè)也逐步壯大，人們也越來越離不開各種各樣的信息，人們對信息的追求越來越迫切。作為網(wǎng)絡信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在互聯(lián)網(wǎng)上表現(xiàn)出了它與其重要的地位，并發(fā)揮著與其重要的作用，無論是國還是國外都迅速的發(fā)展和壯大，并被人們重

16、視。的迷人之處在于它綜合使用文本、圖像、聲音、動畫視頻信息和容，具有豐富的多媒體表現(xiàn)與互動特點。毋庸置疑，已成為最吸引人的也是最有效的信息傳遞的手段與方式。隨著網(wǎng)絡技術的逐步發(fā)展，各類紛紛出現(xiàn)，個人也成為了一種時尚，越來越多的人希望擁有自己的，開辟自己在網(wǎng)絡世界里的一片天地，展示自己的才華和風格。數(shù)據(jù)庫的規(guī)劃設計以與的頁面開發(fā)，都是對應要實現(xiàn)的功能而進行設計的，我將通過各種網(wǎng)頁制作以與數(shù)據(jù)庫設計工具作出能達到預期效果的數(shù)據(jù)管理系統(tǒng)以與頁面，使管理人員更加方便的，準確的對留言板進行正確的維護和更新；使個人成為我們與外界溝通和交流的平臺，讓更多的人了解自己，在以后的社會競爭中能起到自我推薦和自我展

17、示的作用。1 概述1.1軟件的選用與簡介Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver具有制作效率高、操作直觀、簡單易學、站點管理方便等無可比擬的控制能力優(yōu)勢，但它也同樣存在著難以精確達到與瀏覽器完全一致、不能實時更新、不能對大量信息進行更改、操作不方便、頁面原始代碼難以控制等不足。本設計選用的是DreamweaverCS4。ASP是一項微軟公司的技術，是一種嵌入網(wǎng)頁中的腳本，可由因特網(wǎng)

18、服務執(zhí)行的服務器端腳本技術。指Active Server Pages（動態(tài)服務器頁面），運行于IIS之中的程序。ASP.NET的前身ASP技術，是在IIS2.0上首次推出的。本設計用的是基于C#的ASP.NET技術。ASP.NET是基于通用語言編譯運行的程序，有著很強的適應性，C#編程語言語法靈活，功能強大，論述都基于C#的ASP.NET建立氣象數(shù)據(jù)庫查詢系統(tǒng)的構建與編程。ASP.NET有好多優(yōu)點：1、可管理性：ASP.NET 使用基于文本的、分級的配置系統(tǒng)，簡化了將設置應用于服務器環(huán)境和 Web 應用程序的工作。2、安全：ASP.NET 為 Web 應用程序提供了默認的授權和身份驗證方案。開

19、發(fā)人員可以根據(jù)應用程序的需要很容易地添加、刪除或替換這些方案。3、跟蹤和調(diào)試：ASP.NET 提供了跟蹤服務，該服務可在應用程序級別和頁面級別調(diào)試過程中啟用?？梢赃x擇查看頁面的信息，或者使用應用程序級別的跟蹤查看工具查看信息。4、增強的性能： ASP.NET 是運行在服務器上的已編譯代碼，與傳統(tǒng)的 Active Server Pages (ASP) 不同，ASP.NET 能利用早期綁定、實時 (JIT) 編譯、本機和全新的緩存服務來提高性能。1.2選題的目的和意義隨著Internet的迅速發(fā)展，我們已經(jīng)不再滿足于單單地進行瀏覽網(wǎng)頁，而是希望我們能更深入地參預到網(wǎng)絡中去，Internet的開放性

20、使得個人建立自己的成為可能，擁有自己的個性也越來越成為一種網(wǎng)絡時尚，同時創(chuàng)建一個能充分體現(xiàn)自我風格和自我特色的個人已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。我們更需要的是交流，交流能促進我們不斷的進步，并且融合別人的長處；讓我們能多一些渠道傾聽來自不同立場的聲音；設想一下我們的網(wǎng)絡，當每個人都擁有個人，不管是否在線，我們都能跨越時間、空間進行交流，因為這個中擁有我所有的一切，生活、想法、知識、思想；夢想和理想的狀態(tài)是個人門戶也是我們每個人的影子，它為每個人打點網(wǎng)絡上的一切，好多志同道合的朋友會在這里和你相識、相交、相知。1.3課題研究的主要簡介現(xiàn)在互聯(lián)網(wǎng)是社會發(fā)展的必然趨勢，很多人已經(jīng)意識到網(wǎng)絡強大生命力和

21、它在未來將要處于的重要地位。他們進行鉆研并且努力進入到一個新的空間、新的領域。其中包括你、我、他。在我們的日常、工作生活當中，能夠擁有一個自己的已經(jīng)成為越來越多的人的理想和驕傲。就這個課題的研究，因為是個人的，所以我只選擇了自己擅長和喜愛的容，在突出自己的風格個性和特點的同時，還應用了我們所學過的的設計技術和數(shù)據(jù)庫技術等。2 設計準備“個人要發(fā)展，要么是從我（自己）的需求出發(fā)，要么是從我周圍人的需求出發(fā)。”這是國著名的個人站長、手機之家站長高春輝說的。網(wǎng)頁設計是一門新興起的設計類，近幾年來隨著網(wǎng)絡的發(fā)展而逐漸受到人們的重視，它自己本身以網(wǎng)絡作為載體,把各種各樣的信息以最快捷、方便的方式傳達給大

22、家。一個項目的確立一般是建立在各種各樣的需求上面的，這是個人，所以這種需求一般來自于個人的實際需求，其中每個人的實際需求占了絕大數(shù)部分。因此如何更好地了解、分析需求，并且又能夠準確、清晰地以文檔的形式表達出來，保證開發(fā)過程以個人需求為目的正確項目開發(fā)方向進行。2.1設計愿望越來越多的人希望能夠真正參與到互聯(lián)網(wǎng)上，這就出現(xiàn)了越來越多的個人設計以與推廣的工作和任務。就我個人來說，我之所以在畢業(yè)設計的時候選擇這個課題是因為我自己也想擁有一個自己的個人，在互聯(lián)網(wǎng)上擁有我自己的一席之地，從而真正的參與到互聯(lián)網(wǎng)中去，做個網(wǎng)絡新時代的主人，同時也希望自己喜歡的一些東西能夠和大家一起分享，和互聯(lián)網(wǎng)上的朋友一起

23、分享。我所制作的個人大體可分為以下幾個功能：1.秘密收藏：在其中展示一些我喜愛的東西，包括衣服、飾品、帽子等。和大家分享這些東西，我只想讓大家進一步認識我和了解我，讓一些美好的東西我們大家能共同欣賞。2.留言板：這是一個大家談心交流的好地方，瀏覽者登錄以后在留言板中，你可以暢所欲言，和大家進行交流。對我留言，寫下你對本的意見、建議或者感受，也可以對我們感興趣的話題來展開討論，進行心與心的溝通。而且可以查看自己和查看別人的留言，看看別人的感受。但我增加了管理權限，我以管理員的身份可以對新加入的新容進行管理，即允許其加入和允許對其進行刪除操作等。歡迎大家來這里留言哦！3.會員登錄： 在這里可以進行

24、會員登錄操作，如果用戶還沒有注冊也可以進行注冊然后再登錄。在這里如果你忘記了自己的密碼還可以進行找回密碼的操作，并且可以修改和查看自己的相關信息。登錄后就可以進行留言操作。非常靈活，為會員提供了很大的方便。4.個人信息： 在這里，瀏覽者可以看到我自己的個人相關信息，包括興趣愛好、籍貫、缺點與喜愛的明星和喜愛的小動物。歡迎大家瀏覽我的個人信息！2.2設計背景使用工具簡介:IIS的簡要介紹:IIS是Internet Information Server的縮寫，它是微軟公司主推的一種Web服務器， 最新的版本是Windows2000/2003server里面包含的IIS 5.0或IIS 6.0，II

25、S與Window2000/2003 Server完全集成在一起， 因而用戶能夠利用Windows 2000/2003 Server和NTFS（NT File System，NT的文件系統(tǒng)）置的安全特性， 建立強大、靈活又安全的Internet和Intranet站點。 IIS的一個重要特性是支持ASP。IIS 3.0版本以后引入了ASP，可以很容易的貼動態(tài)容和開發(fā)基于Web的應用程序。如果是其他的Windows操作系統(tǒng)則需要用戶手動安裝IIS。下面以Windows XP 為例，說明IIS的安裝步驟：IIS的安裝步驟：1.依次打開：控制面板-添加/刪除程序-添加/刪除Windows組件，勾選Int

26、ernet信息服務（IIS），然后單擊信息按鈕。2.在打開的Internet信息服務（IIS）對話框中勾選所有項。3.單擊“確定”按鈕后，再單擊“下一步”按鈕。在光驅(qū)中放入Windows XP的安裝盤，安裝完畢后，可以測試一下安裝是否成功，在瀏覽器地址欄中輸入”localhost”,如果安裝成功則會出現(xiàn)歡迎畫面。A的簡要介紹:Active Server Pages（ASP）是服務器端腳本編寫環(huán)境，使用它可以創(chuàng)建和運行動態(tài)、交互的 Web 服務器應用程序。使用 ASP 還可以組合 HTML頁、VBScript腳本命令和JavaScript腳本命令等，是創(chuàng)建交互的 Web 頁和基于 Web 的功能

27、強大的應用程序。 由于腳本程序是在服務器上運行而不是在客戶端上運行，所以傳送到瀏覽器上的 Web 頁是在 Web 服務器上生成的，所以不必擔心瀏覽器能否處理腳本。Web 服務器已經(jīng)完成了所有腳本的處理，并將標準的 HTML 頁面?zhèn)鬏斀o瀏覽器。由于只有腳本的結果返回到瀏覽器，所以服務器端的腳本不容易被別人復制。用戶并看不到創(chuàng)建他們正在瀏覽的頁的腳本命令。ASP的運行環(huán)境：ASP只能用于下列Web ServerIIS Microsoft Personal Web ServerASP的編程語言：ASP可以使用VBScript和JavaScript進行程序的編寫。ASP文件，ASP的文件后綴名為.AS

28、P，用以區(qū)別于同樣可以包含Script的HTML 文件。一個*.ASP文件是一個文本文件， 可以包括下列元素的任意組合： 文本（text） HTML標志（tags） Script命令 ASP：不需要任何HTML的tag保存在文件中，起一個見名知意的名字，文件的后綴一定要改為.ASP ，然后再上傳到服務器上一個有執(zhí)行權的目錄下（例如wwwroot）。ASP訪問數(shù)據(jù)庫的原理ASP是服務器端腳本執(zhí)行的環(huán)境，可用來產(chǎn)生和執(zhí)行動態(tài)的高性能的WEB服務器程序。當用戶使用瀏覽器來請求ASP主頁時，WEB服務器作出響應，調(diào)用ASP引擎來執(zhí)行ASP文件，并解釋其中的腳本語言（javascript或vbscrip

29、t），并通過ODBC連接數(shù)據(jù)庫，由數(shù)據(jù)庫訪問組件ADO（active data objects）完成數(shù)據(jù)庫操作，最后ASP生成包含有數(shù)據(jù)查詢結果的HTML主頁返回用戶端并顯示。SQL Server的簡要介紹：SQL Server是微軟公司開發(fā)的數(shù)據(jù)庫產(chǎn)品，SQL Server2000被廣泛使用，很多電子商務、企業(yè)的部信息化平臺等等都是基于SQL Server產(chǎn)品的。今天的商業(yè)環(huán)境要求不同類型的數(shù)據(jù)庫的性能、可伸縮性與可靠性是基本的要求，而進入市場時間也非常的關鍵。除了這些核心企業(yè)品質(zhì)外，SQL Server2000還為數(shù)據(jù)庫的管理和分析提供了方便，非常靈活和易于操作。我此次的畢業(yè)設計就選用的是

30、SQL Server2000。完全的Web支持:SQL Server2000提供了Web以標準為基礎的擴展數(shù)據(jù)庫編程功能。豐富的XML和Internet標準支持允許使用置的存儲過程以XML的格式輕松存儲和檢索數(shù)據(jù)。還可以使用XML更新程序，更容易地進行插入、更新和刪除記錄的操作。2.3確定主題 做，首先必須要解決的就是容的問題，即是確定的主題。如果自己在某些方面越有興趣，或掌握的資料越多，就可以做一個自己感興趣的東西。你可以有自己的見解，做出自己的特色。當然，也可以推銷自己，讓別人了解自己，和別人進行溝通和交流，展示一些自己的東西，讓大家更好地了解自己。對于容主題的選擇，要做到小而精，即主題定

31、位要小，且容要精。不要去試著作一個包羅萬象的站點，這往往會失去你的的特色，也會帶來很大的勞動，給的與時更新帶來更大的困難。我的主題是以我個人相關的資料來制作的，介紹了我自己。2.4確定形象形象的設計可以從的LOGO、的色彩、的字體宣傳語等這些方面著手。色彩，給人的第一印象來自于視覺的沖擊，不同的色彩搭配會產(chǎn)生不同的效果，并可能影響到訪問者的情緒?！皹藴噬省敝傅氖悄荏w現(xiàn)形象和延伸涵的色彩，給人們一種以整體統(tǒng)一的感覺。我個人的色彩是以淺藍色色為主，淺藍色的字體和淺色的圖像給人一種舒服的感覺，仿佛生活在虛幻的世界里。 字體，和標準色彩一樣，標準字體是指用于標題、主菜單的一些特有字體。為了體現(xiàn)所特有

32、的風格，可以根據(jù)自已的所表達的涵，選擇更貼切的字體。我的個人的標準字體是華文彩體。給人一種沉穩(wěn)而不失俏皮的感覺。2.5確定風格風格是抽象的，指的整體形象給瀏覽者留下的綜合感受。這個“整體形象”包括的LOGO、的色彩、的字體、的標語等許多因素。是可以平易近人的、生動活潑的，也可以是嚴肅專業(yè)的。但不管是在色彩、技術、文字、布局、還是交互方式上，只要能由此讓瀏覽者明確的看出這是你的所獨有的，這就形成了一種風格。風格是有人性的，它通過的色彩、技術、文字、布局、交互方式等可以綜合概括出一個的自己的個性；我的風格是以舒服為主，給人一種舒舒服服的感覺。2.6確定容我的個人大體上包括了一些容：首頁、我的朋友、

33、美文欣賞、大學之旅、秘密收藏、會員登錄、會員注冊、留言板等常用容，方便的大家的瀏覽。3各模塊簡介一個的首頁其實是一個文檔，當一個服務器收到一臺電腦上網(wǎng)絡瀏覽器的信息連接請求時，便會向這臺電腦發(fā)送這個文檔。當在瀏覽器的位址列輸入域名，而并未指向特定目錄或檔案時，通常瀏覽器會打開的首頁。 首頁往往會被編輯的很易于了解該所提供的所有資訊，并引導互聯(lián)網(wǎng)用戶瀏覽其他部分的容。這部分容一般被認為是一個目錄性質(zhì)的容，我的個人的首頁給大家一目了然的感覺，打開首頁就可以了解我的個人的設計風格還可以看到一些特定的功能，大家可以盡情地瀏覽其中的信息。首頁的大致圖如下圖3.1所示：基本信息首頁我和朋友我的朋友我的旅游

34、優(yōu)美文章大學之旅美文欣賞可愛收藏可愛飾品和衣 服瀏覽者給我留言圖3.1 首頁框圖展示首頁框圖展示了我的整個設計頁面的架構，主要包括首頁、我的朋友、大學之旅、美文欣賞、秘密收藏和用戶登錄這幾部分，給瀏覽者一種一目了然的感覺。點擊每一部分可以進入相應的界面，可以具體瀏覽其中的信息。而且左邊有滾動字幕，點擊可以瀏覽具體的容。歡迎大家瀏覽！3.1首頁模塊介紹了一些關于我自己的基本信息，比如、生日、興趣愛好等。希望大家可以進一步的了解我。如下圖3.2所示：3.2我的朋友介紹了我和我的朋友的一些事和一些去過的地方，里面有我和朋友照片，大家可以參考一下。這里面有我的高中同學和大學同學還有我的閨蜜。第一頁用了

35、一個滾動的圖片展示了我和我的朋友們在一起的照片，下面寫了一些關于贊美朋友的話語。記得有個人說過情人是一時的，而朋友卻是一輩子的，那些深重的友情永遠都會埋在我們的心底，永遠都不會磨滅。所以我愿意把它拿出來跟大家一起分享，讓我們共同珍惜我們的友誼。第二頁用FireWorks做了一個膠卷型的流動的照片，顯示了一些我的朋友們。那些美麗的時刻我將永遠把它留下來。第三頁顯示了我的大學的朋友們，他們給我大學的生活留下了美好的記憶。3.3大學之旅在這里介紹了一部分我在上大學期間去過的一些地方，拍下了一些優(yōu)美的風景，那些給我留下美好回憶的地方我都把他們記載下來。里面有照片和文字簡介，大家可以做個參考，也去欣賞那

36、里的優(yōu)美風景。第一頁插入了一個spry折疊面板，介紹了去滿城漢墓旅游時的一些照片。并且介紹了一些關于滿城漢墓的一些信息。第二頁插入了幾去空中花園游玩時的照片，并附加了空中花園的一些相關信息。第三頁介紹了競秀公園，并插入了幾競秀公園的照片，也對競秀公園作了簡單的介紹。3.4美文欣賞在美文欣賞這部分中列舉出了幾篇優(yōu)美的文章供瀏覽者欣賞。這些文章中有講述關于人生哲理的，講述了人生的悲歡離合，人生旅途的不順利；有關于愛情的，介紹了男女之間刻骨銘心的感人愛情故事；還有介紹關于朋友之間的深厚友誼以與一些勵志的文章，激勵那些正在追逐夢想的人有一顆不怕失敗、永不言敗、愈挫愈勇的心。以上都是本人認為比較優(yōu)美的文

37、章，希望瀏覽者也喜歡！左邊是滾動的字幕，也是優(yōu)美的文章，大家點擊直接可以欣賞。如下圖3.3所示：圖3.3 美文欣賞展示3.5可愛收藏在可愛收藏這部分中展示了一些可愛的衣服、帽子、項鏈、耳環(huán)等首飾。并使用到了Dreamweaver中的鼠標經(jīng)過圖像技術，是瀏覽者有一種變幻感！為那些愛美的朋友們提供了一個參考。其中里面還有一些模特的展示，可以看見模特穿上那些衣服的效果，使愛美麗的朋友們對那些衣服的樣式有一個更清晰的認知。這些衣服、帽子和首飾等都是本人自己喜歡的，希望大家也喜歡。如果大家有更好更漂亮的衣服、帽子、首飾等，歡迎給我留言，讓我們大家一起來分享這些。4具體實現(xiàn)與分析4.1靜態(tài)設計先用Drea

38、mweaver進行布局和排版。4.1.1站點的建設與收集素材創(chuàng)建本地站點的具體操作步驟如下：要制作一個，第一步操作都是一樣的，就是要創(chuàng)建一個“站點”，這樣可以使整個的結構清晰地展現(xiàn)在面前，避免了以后復雜的管理。 打開Dreamweaver從菜單中選擇“站點/新建站點”在彈出的對話框中填寫目錄和指定文件夾，輸入站點名稱和默認的存放圖像的位置。在文本框中輸入自己已經(jīng)想好的名稱“個人”。填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁，所以選擇上面的一項“否，我不想使用服務器技術?！眴螕簟跋乱徊健?，進入下一個步驟。 在此選項中有兩個選擇，選擇推薦的“編輯我的計算機上的本地副本，完

39、成后再上傳到服務器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾“E:/web555”。之后單擊“下一步“，進入下一個步驟。這一步是如何設置連接到遠程服務器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，這樣，一個站點就算建好了。收集素材：收集一些所需要的素材，比如圖片、動畫、文字等。做前的一些準備工作也是很重要的。只有有了充足的準備我們才能把做好。因此在做前我們必須把做的過程中可能所需的所有的材料都準備好，這樣才能做出讓自己和大家都滿意的，而不至于在做的過程中亂了

40、手腳。圖片的LOGO如下圖4.1所示：圖4.1LOGO圖展示4.1.3 HTML語言要想建出專業(yè)的Web頁面，就要學會利用HTML來編寫網(wǎng)頁。HTML(Hypertext Markup Language)超文本標記語言，是用于編寫網(wǎng)頁的主要語言。它是純文本的類型的語言，語法非常的簡單。它通過對各種標記、元素、屬性、對象等的設置來建立與圖形、聲音、視頻等多媒體信息以與對其它超文本的。一般典型網(wǎng)頁應該包括如下HTML代碼：其中，與之間是網(wǎng)頁的標題，一般被顯示在瀏覽器的標題欄中。與之間可以聲明和定義變量、方法，還可以加入java-script/vb-script等一些腳本語言。與之間是網(wǎng)頁的主要容，

41、任何網(wǎng)頁元素都可以加入其中。例如在主體中可以加入與標簽是定義了一個層，加入與標簽是定義字體樣式，加入標簽是定義一個CSS樣式等。4.1.4用框架表格進行布局和排版主頁面使用的是上方固定，左側嵌套的框架共四個網(wǎng)頁。然后在main、top和left每個網(wǎng)頁中又嵌套了一個表格那是整個版面看起來更加整齊、清晰。Top中的表格用來組織頁面頭部的元素（下稱“頭表格”），在設計視圖下將鼠標光標置于網(wǎng)頁編輯區(qū)，點擊“插入”“表格”，設置2行、3列的表格，“表格寬度”1000像素，“邊框粗細”為1，點擊確定。選中表格在屬性控制面板中設置對齊方式為“居中對齊”。然后再將第二行單元格合并。并插入所需要的元素。Lef

42、t中再插入一個2行1列的表格，用來組織左邊頁面的主體容，其它屬性同頭表格。再填入所需容，并加入超。最后再在Main網(wǎng)頁中插入一個1行2列的表格，用來組織頁面的主要容元素。 “邊框粗細”為1，設置表格為顯示邊框。4.1.5添加網(wǎng)頁元素利用設置表格圖片、插入圖片等形式添加網(wǎng)頁圖片元素。利用鍵盤輸入或復制粘貼等方式添加文字，文字顏色設置為紅色。4.1.6滾動的公告無標題文檔 愛的一種解釋懂了淚水，就懂了人生！鞋店里的故事曲終人不散生命苦汁，如歡悲歌失敗，卻不曾??！為愛停留4.1.7典型的子頁設計過程如下圖4.2、4.3所示：圖4.2 大學之旅1圖4.3 大學之旅24.2動態(tài)設計當IIS和S

43、QLServer 2000還有Microsoft visual studio等工具軟件都安裝完畢后，再檢查運行無誤，一切就緒后便可開始進行動態(tài)的設計了。4.2.1數(shù)據(jù)庫的建立首先，附加數(shù)據(jù)庫（database）附加數(shù)據(jù)庫的界面如下圖4.4所示：圖4.4附加數(shù)據(jù)庫界面建立數(shù)據(jù)庫表，并且設置主鍵和外鍵并且定義各字段的名字，再添加相應的容。表如下表4.1所示：表4.1User表界面列名數(shù)據(jù)類型長度允許空UserIDint4UserNamenvarchar50Sexnvarchar2Passwordnvarchar50RealNamenvarchar50Emailnvarchar50Questionn

44、varchar100Answernvarchar504.2.2建立會員登錄系統(tǒng)登錄部分如下圖4.5所示：圖4.5 登錄界面具體實現(xiàn)代碼如下所示：using System.Data.SqlClient;public partial class login : System.Web.UI.Pageprotected void Page_Load(object sender, EventArgs e)protected void lnkRegister_Click1(object sender, EventArgs e)Response.Redirect(zhuce.aspx); /轉(zhuǎn)到注冊界面pr

45、otected void lnkGetpwd_Click(object sender, EventArgs e)Response.Redirect(Step1.aspx); /轉(zhuǎn)到找回密碼的第一步protected void btnReset_Click(object sender, EventArgs e)txtPwd.Text = ;txtUserName.Text = ; /清空你所填寫的所有信息protected void btnSubmit_Click(object sender, EventArgs e)if (Page.IsValid)string strConn = Syste

46、m.Configuration.ConfigurationManager.AppSettingsDSN;SqlConnection conn = new SqlConnection(strConn); /建立與數(shù)據(jù)庫的連接string userName = ;string pwd = ;userName = txtUserName.Text.Trim();pwd = txtPwd.Text.Trim();string sql;sql = select count(*)from Users where UserName= + userName + and Password= + pwd + ;

47、/從數(shù)據(jù)庫中查找那條記錄SqlCommand cmd = new SqlCommand(sql, conn);conn.Open();int ret = (int)cmd.ExecuteScalar();conn.Close();if (ret = 0)Response.Write(alert(登錄失敗!用戶名或密碼錯誤!);else if(txtUserName.Text=admin)Response.Redirect(main1.aspx); /如果用戶名等于admin，則跳到管理用戶界面SessionUserName = userName;Response.Redirect(main.a

48、spx); 注冊部分為還沒有注冊的用戶提供注冊機會，有多項是容必須填寫，注冊后可以進行留言可以留下對本的感受或者意見、建議。如果用戶丟失了密碼或者忘記了密碼還可以進行找回密碼的操作，找回自己原有的密碼。注冊部分界面如下圖4.6所示：圖4.6注冊界面具體實現(xiàn)代碼如下所示：public partial class zhuce : System.Web.UI.Pageprotected void Page_Load(object sender, EventArgs e)protected void btnSubmit(object sender, EventArgs e)string strConn

49、 = System.Configuration.ConfigurationManager.AppSettingsDSN;SqlConnection conn = new SqlConnection(strConn); /建立與數(shù)據(jù)庫的連接string userName =txtName.Text.Trim();string sql = select count(*)from Users where UserName= + userName + ;conn.Open();SqlCommand cmd = new SqlCommand(sql, conn);int n = (int)cmd.ExecuteScalar();if (n 0)Response.Write(alert(!); /如果這條記錄已存在則返回return;cmd mandText = INSERT INTO + Users(UserName,RealName,Sex,Password,Question,Answer,Email) + values(UserName,RealName,Sex,Password,Question,Answer,Email);cmd.Parameters.Add(UserName, SqlDbType.VarChar).