網(wǎng)站設(shè)計與制作畢業(yè)論文

1、<p><b>　　1緒論</b></p><p><b>　　1.1 課題背景</b></p><p>　　隨著互聯(lián)網(wǎng)的迅猛發(fā)展，越來越多的用戶希望在互聯(lián)網(wǎng)上得到即時的、實用的信息。與此同時，隨著互聯(lián)網(wǎng)的發(fā)展，越來越多的用戶已經(jīng)能夠適應(yīng)基于瀏覽器的應(yīng)用程序，即Web應(yīng)用，也有越來越多的用戶嘗試在Web服務(wù)上進行自己的應(yīng)用程序，因此，A

2、SP.NET程序的Web開發(fā)正受到越來越多人的青睞。機電工程學院網(wǎng)站本身就是一個基于Web的網(wǎng)站，其較強的交互性、方便性和可維護性使得用戶可以更快、更好的獲取自己需求的各種信息，而管理員也可以更加輕松地進行網(wǎng)站管理和網(wǎng)站維護。</p><p>　　1.2 本課題的目的及意義</p><p>　　機電工程學院網(wǎng)站設(shè)計與實現(xiàn)是一項小規(guī)模的社會性的課題，即給青島濱海學院機電工程學院建設(shè)一個實用性

3、和宣傳性的網(wǎng)站。其主要目的就是為廣大師生提供一個可以更方便、更快捷、更實效的獲取所需信息的平臺。通過這次實踐活動，一是讓學生自己能夠?qū)⒆约韩@取的書面知識和社會實際有機結(jié)合，從而能夠提高學生的實踐能力，增強學生的實際能力，當然對其以后的就業(yè)或者其他方面都有一定的幫助；二是機電工程學院自身通過這個網(wǎng)站向用戶提供學院的一些重要的信息，例如：學院簡介、站內(nèi)新聞、師資隊伍、專業(yè)設(shè)置等，更好更便捷的滿足用戶的信息需求，同時也起到了很好的宣傳作用。&

4、lt;/p><p>　　1.3 國內(nèi)外研究現(xiàn)狀</p><p>　　就計算機這個行業(yè)的發(fā)展來看，相對比較，西方國家發(fā)展的要早一些，當然，西方國家的網(wǎng)站建設(shè)比起國內(nèi)也要早一些，因此，國外的網(wǎng)站設(shè)計無論是在工具方面還是在技術(shù)方面也都要比國內(nèi)的好很多。就我們以前或者是現(xiàn)在使用的網(wǎng)站建設(shè)工具來看，絕大多數(shù)都是由國外的軟件公司開發(fā)設(shè)計的，然后經(jīng)過漢化才進入到中國市場，因此，對于許多工具的一些插件，一些很

5、好的功能在國內(nèi)并沒有得到很好的利用，與此同時，這就會使得國內(nèi)的網(wǎng)站行業(yè)在設(shè)計和制作網(wǎng)站的許多環(huán)節(jié)不能夠很好的達到要求，相對而言，就會落后于國外網(wǎng)站行業(yè)很多。隨著經(jīng)濟和社會的不斷發(fā)展，客戶對網(wǎng)站的要求也越來越高，以及網(wǎng)站設(shè)計師們不斷的提升自己，使得網(wǎng)站行業(yè)有了更大的競爭力。</p><p>　　西方國家網(wǎng)站建設(shè)飛速發(fā)展的因素有以下幾點：</p><p>　　一、西方國家擁有電腦的家庭，企業(yè)眾

6、多，網(wǎng)民人數(shù)占總?cè)丝诘?/3以上，優(yōu)質(zhì)的經(jīng)濟條件和龐大的網(wǎng)民群體首先就為網(wǎng)站這一行業(yè)的發(fā)展創(chuàng)造了一個良好的環(huán)境。</p><p>　　二、西方國家開放、自由的教育環(huán)境使得這一行業(yè)的設(shè)計師們的想象力豐富，優(yōu)美的動畫外加精美的圖片使得網(wǎng)站這個行業(yè)更加具有宣傳性，其市場具有很大的空間。</p><p>　　三、基本上所有的編程語言都跟英語有關(guān)，例如：c語言、c#語言等。而西方國家的母語本身就是英

7、語，這樣，西方國家的編程環(huán)境又有了很好的一個發(fā)展優(yōu)勢。</p><p>　　我國計算機行業(yè)的發(fā)展比較落后，雖然到目前為止上網(wǎng)人數(shù)已有很大的提高，但是總體比率還不是很高，同時，絕大多數(shù)人還都沒有看到網(wǎng)絡(luò)的發(fā)展前景，這樣就使得中國的網(wǎng)站行業(yè)發(fā)展空間還不是很大，不過最近幾年有所改善，隨著網(wǎng)店的推出、政府部門網(wǎng)站的建設(shè)，在一定程度上推動了這一行業(yè)的發(fā)展，但是人們還是普遍沒有看到其宣傳效應(yīng)。另外國內(nèi)的編程環(huán)境以及設(shè)計師們狹

8、小的想象空間也是阻礙中國網(wǎng)站行業(yè)發(fā)展的一個重要因素。</p><p>　　1.4 研究采用的相關(guān)技術(shù)綜述</p><p>　　本系統(tǒng)是基于ASP.NET的機電工程學院網(wǎng)站，主要采用VS2008+SQL進行開發(fā)的。</p><p>　　ASP.NET是一種統(tǒng)一的Web平臺，它提供了生成企業(yè)級應(yīng)用程序所必須的全部服務(wù)，用戶可以使用公共語言運行庫兼容的語言來建立ASP.N

9、ET應(yīng)用程序，本系統(tǒng)則采用了相對于VB應(yīng)用更為廣泛的C#語言進行代碼的編寫。ASP.NET提供了更易于編寫、結(jié)構(gòu)更清晰的代碼，使代碼更加干凈，用ASP.NET 進行開發(fā)變得非常簡單。與此同時，ASP.NET對各種不同的瀏覽器也提供了較好的支持。</p><p>　　在數(shù)據(jù)庫的選擇方面，考慮到學院的服務(wù)器環(huán)境，以及網(wǎng)站規(guī)模，還有個人擅長，選擇了SQL2005數(shù)據(jù)庫，SQL2005數(shù)據(jù)庫十分強大，其便利性、穩(wěn)定性以及

10、安全性更受廣大企業(yè)的青睞。</p><p><b>　　2需求分析</b></p><p>　　由于網(wǎng)站建設(shè)有前臺和后臺之分，前臺是面對普通用戶，而后臺則是面對網(wǎng)站管理員，因此，在需求方面我們主要從普通用戶功能和管理員功能進行分析。對于網(wǎng)站的用戶需求分析，主要是對機電工程學院網(wǎng)站的主要用戶進行調(diào)查，即對機電工程學院學生和老師進行調(diào)查，因為機電工程學院本身就是身邊比較熟

11、悉的院系，所以調(diào)查用戶需求是比較方便的，但是由于一些客觀條件和其它因素，對學生這一塊的調(diào)查比較充分，對老師的調(diào)查相對來言有些不足，所以用戶需求分析這方面還是有所欠缺的，還需要改進。另外還通過對其它類似性的學院網(wǎng)站進行調(diào)查，借鑒它們好的設(shè)計思想。</p><p>　　2.1 普通用戶功能</p><p>　　普通用戶功能需求如下：</p><p>　?。?）機電工程學

12、院的所有信息總攬</p><p>　　普通用戶可以從前臺頁面瀏覽機電工程學院公布的所有信息，例如：學院簡介、師資隊伍、專業(yè)設(shè)置、科研成果、考研專升本、聯(lián)系方式等信息。</p><p>　?。?）瀏覽機電工程學院公布的站內(nèi)新聞、公告等詳細信息并對網(wǎng)站進行投票、留言等</p><p>　　普通用戶可以瀏覽到機電工程學院公布的站內(nèi)新聞、公告等詳細信息，并且可以對網(wǎng)站進行在

13、線投票、留言。</p><p><b>　?。?）在線投票</b></p><p>　　由于本身并不是專業(yè)人士設(shè)計和制作的網(wǎng)站，所以網(wǎng)站在運行過程中難免會存在各種各樣的問題，例如：打開速度、頁面美工、網(wǎng)站欄目、內(nèi)容方面，對于這些可以改善的問題，希望用戶可以做出相應(yīng)的投票，從而更好的完善網(wǎng)站。</p><p><b>　?。?）發(fā)表留言

14、</b></p><p>　　在原機電工程學院網(wǎng)站的模塊設(shè)計方面，增加了留言板模塊，普通用戶可以在此留言，給機電工程學院網(wǎng)站留言或是提一些意見,同時也可以瀏覽或者評論其他用戶的留言。</p><p><b>　　2.2 管理員功能</b></p><p>　　對于這種性質(zhì)的學院網(wǎng)站，按照需求分析，一般只需要設(shè)置兩種管理員即可，一種是

15、超級管理員，管理所有信息，包括用戶信息管理、新聞信息管理、公告信息管理、專業(yè)信息管理、教師信息管理和留言板管理。另一種是普通管理員，主要管理新聞、公告、專業(yè)、教師信息。</p><p>　　后臺管理的功能需求如下：</p><p><b>　?。?）用戶信息管理</b></p><p>　　超級管理員可以對所有管理員的信息進行查看、修改和刪除用

16、戶操作，同時也可以添加管理員信息。</p><p><b>　?。?）新聞信息管理</b></p><p>　　管理員可以對各種新聞信息進行相關(guān)管理，例如刪除、編輯。管理員還可以通過發(fā)布新聞來添加機電工程學院的各種新聞信息。</p><p><b>　　（3）公告信息管理</b></p><p>　

17、　管理員可以對公告信息進行相關(guān)管理，例如刪除、編輯。管理員還可以通過新增公告來添加機電工程學院的公告信息。</p><p><b>　　（4）專業(yè)信息管理</b></p><p>　　管理員可以對現(xiàn)有專業(yè)信息進行相關(guān)管理，例如刪除、編輯。管理員還可以通過新增專業(yè)來添加機電工程學院的專業(yè)信息。</p><p><b>　?。?）師資信息

18、管理</b></p><p>　　管理員可以對師資隊伍信息進行相關(guān)管理，例如刪除、編輯。管理員還可以通過新增教師來添加機電工程學院的師資隊伍信息。</p><p><b>　?。?）留言信息管理</b></p><p>　　管理員可以對留言板留言進行查看、刪除留言詳情。</p><p><b>　　

19、3系統(tǒng)總體設(shè)計</b></p><p>　　3.1 系統(tǒng)設(shè)計原則</p><p>　　系統(tǒng)總體設(shè)計主要采用軟件工程基本思想，設(shè)計過程中主要遵從以下幾條原則：</p><p><b>　　一、實用性原則</b></p><p>　　作為Web應(yīng)用程序，實用性應(yīng)為其遵循的首要原則。機電工程學院網(wǎng)站是針對青島濱海學

20、院機電工程學院制作的，因此，本設(shè)計過程中應(yīng)充分考慮到機電工程學院的情況，具體情況具體分析，為機電工程學院全體師生制定最實用最方便的互動平臺。</p><p><b>　　二、安全性原則</b></p><p>　　本系統(tǒng)在設(shè)計過程中應(yīng)充分考慮到系統(tǒng)運行安全，盡量避免一切可能出現(xiàn)的錯誤，對未知錯誤也應(yīng)具有一定的處理能力。</p><p><

21、b>　　三、模塊化原則</b></p><p>　　本系統(tǒng)的設(shè)計應(yīng)充分采用模塊化設(shè)計，便于日后功能的擴展與修改，同時還能增強系統(tǒng)的安全性。</p><p>　　3.2 系統(tǒng)總體功能結(jié)構(gòu)</p><p>　　系統(tǒng)總體功能結(jié)構(gòu)如圖3-1所示。</p><p>　　圖3-1 系統(tǒng)總體功能結(jié)構(gòu)圖</p><p&g

22、t;　　由系統(tǒng)總體功能結(jié)構(gòu)圖可以看出，系統(tǒng)的主要功能是前臺的信息瀏覽、在線投票、留言以及后臺信息的管理?？傮w來說系統(tǒng)主要包括兩大模塊，即前臺模塊和后臺模塊，而前臺模塊又有很多模塊組成，比如：留言板、在線投票、公告欄、學院簡介、新聞動態(tài)、專業(yè)設(shè)置、師資隊伍、科研成果、考研專升本、學生工作、科研工作等，后臺也包括多個模塊，比如：用戶管理、新聞管理、師資管理、專業(yè)管理、留言板管理等。</p><p>　　3.3 系統(tǒng)實

23、體關(guān)系模型</p><p>　　本系統(tǒng)的實體關(guān)系模型是對用戶需求進行分析之后得到的，此處采用E-R（實體-關(guān)系）圖的形式來表現(xiàn)系統(tǒng)實體關(guān)系模型。</p><p>　　注：實體用 表示；屬性用 表示，其中帶有下劃線的屬性為主屬性；聯(lián)系用 表示。</p><p>　　實體與實體間的關(guān)系有三種：1:1 、1：N 、M：N 。</p&g

24、t;<p>　　圖3-2 普通用戶實體E-R圖</p><p>　　圖3-3 超級管理員用戶實體E-R圖</p><p>　　圖3-4 普通管理員用戶實體E-R圖</p><p>　　圖3-6 發(fā)布關(guān)系E-R圖</p><p><b>　　3.4 數(shù)據(jù)庫設(shè)計</b></p><p>

25、　　3.4.1 數(shù)據(jù)表邏輯結(jié)構(gòu)設(shè)計</p><p>　　注：帶下劃線的屬性為主屬性</p><p>　　管理員表user（管理員編號Id，管理員姓名userId,管理員密碼userPsd，</p><p>　　管理員權(quán)限limit）</p><p>　　新聞表wen（新聞編號Id，新聞標題Bt，新聞發(fā)布日期Data，新聞內(nèi)容Nr，</p

26、><p>　　新聞類型Type，圖片路徑1Picpath1，圖片路徑2Picpath2）</p><p>　　公告表gonggao（公告編號Id，公告內(nèi)容Contain，公告發(fā)布日期Data）</p><p>　　專業(yè)表zhuanye（專業(yè)編號Id，專業(yè)標題Title，專業(yè)內(nèi)容Content1，</p><p>　　專業(yè)發(fā)布日期Data）<

27、/p><p>　　師資表teachers（教師編號Id，教師姓名Name1，教師簡介Content2，</p><p>　　教師信息發(fā)布日期Data，教師照片路徑Picpath）</p><p>　　留言表post1（留言編號id，留言主題list,留言人姓名Name，留言時間Date，</p><p>　　留言回復register，回復人姓名N

28、owname，聯(lián)系方式QQ Email，</p><p><b>　　留言內(nèi)容Text)</b></p><p>　　投票表toupiao（選項編號sx，選項名稱item，投票次數(shù)num）</p><p>　　3.4.2 數(shù)據(jù)表物理結(jié)構(gòu)設(shè)計</p><p>　　表3-1 管理員表（user）</p>&l

29、t;p>　　表3-2 新聞表（wen）</p><p>　　表3-3 公告表（gonggao）</p><p>　　表3-4 專業(yè)表（zhuanye）</p><p>　　表3-5 師資表（teachers）</p><p>　　表3-6 留言表（post1）</p><p>　　表3-7 投票表（t

30、oupiao）</p><p>　　4系統(tǒng)詳細設(shè)計與實現(xiàn)</p><p>　　為確保系統(tǒng)運行的安全性，提交數(shù)據(jù)庫的所有輸入值都使用前臺正則表達式驗證控件驗證字符的合法性（如字符輸入框和Email格式等），同時使用后臺代碼驗證輸入字符串是否為空。由于本文的篇幅限制，在本文中只介紹實現(xiàn)主要功能的頁面。</p><p><b>　　4.1 主頁的設(shè)計</b

31、></p><p>　　首頁頁面(shouye.aspx)效果如下（圖4-1和圖4-2）：</p><p>　　圖4-1 主頁上半部分效果圖</p><p>　　圖4-2 主頁下半部分效果圖</p><p>　　主頁按照整體效果來看主要可以劃分為四部分。</p><p>　　第一部分是頂部的一個快捷鏈接區(qū)域，包括

32、設(shè)為首頁、收藏本站、留言板和登錄四個快捷鏈接，點擊設(shè)為首頁即可將本站設(shè)置為首頁。</p><p>　　設(shè)為首頁效果圖如下圖4-3：</p><p>　　圖4-3 設(shè)為首頁效果圖</p><p>　　點擊收藏本站即可將本站收藏在本地收藏夾內(nèi)。</p><p>　　添加到收藏夾效果圖如下圖4-4所示：</p><p>　　

33、圖4-4 添加到收藏夾效果圖</p><p>　　留言板和登錄鏈接后面會重點講述。</p><p>　　第二部分是網(wǎng)站頂部的banner圖片，重點是凸顯出機電工程學院的圖標和名稱，因為機電工程學院本身是下屬于青島濱海學院的一個機構(gòu)設(shè)置，所以要標明這一點，在圖片的由上部添加有青島濱海學院的標志。</p><p>　　第三部分是網(wǎng)站中間部分，即主要內(nèi)容區(qū)域。左側(cè)部分菜單

34、設(shè)計選擇豎拉菜單，menu菜單包括首頁、學院概況、學院新聞、專業(yè)設(shè)置、師資隊伍、科研工作、學生工作、特色專業(yè)、精品課程和聯(lián)系我們。緊接著下面會有一個快捷鏈接區(qū)域，主要是對各學院的鏈接以及各種學習、就業(yè)方面的鏈接。中間部分主要是由學院簡介、學院標志語、師資隊伍、專業(yè)設(shè)置、科研成果和考研專升本等欄目組成。右側(cè)部分包括日歷、公告欄、在線投票和學院熱線欄目。</p><p>　　第四部分是網(wǎng)站底部的footer部分，這部

35、分主要是著名版權(quán)等。</p><p>　　這里重點要提出的是內(nèi)容區(qū)域的右側(cè)部分，設(shè)計了一個在線投票模塊，用戶可以通過在線投票對網(wǎng)站進行評價，提出建議等，具體主要是對網(wǎng)站的打開速度、頁面美工、網(wǎng)站欄目和內(nèi)容方面投票，當選擇某一項時，點擊投票按鈕，即可投票成功。</p><p>　　投票成功效果圖如下圖4-5所示：</p><p>　　圖4-5 投票成功效果圖</

36、p><p>　　在線投票部分的關(guān)鍵代碼如下所示：</p><p>　　protected void Button1_Click(object sender, EventArgs e)</p><p><b>　　{</b></p><p>　　SqlConnection con = new SqlConnection(Con

37、figurationManager. ConnectionStrings ["ConnectionString"].ConnectionString);</p><p>　　con.Open();</p><p>　　string strsql = "select * from toupiao order by sx";//選擇所有項并按選項編號進行

38、排序</p><p>　　SqlCommand cmd = new SqlCommand(strsql, con);</p><p>　　SqlDataReader dr = cmd.ExecuteReader();</p><p>　　dr.Read();</p><p>　　int n1 = Convert.ToInt16(dr[1])

39、+ 1;</p><p>　　SqlCommand cmd2 = new SqlCommand();</p><p>　　SqlCommand cmd1 = new SqlCommand();</p><p>　　cmd2.Connection = con;</p><p>　　cmd2.CommandText = "update

40、toupiao set num='" + n1.ToString() + "' where item='" + dr[0] + "'"; //修改所選項的總數(shù)</p><p>　　for (int i = 0; i < 4; i++)</p><p><b>　　{</b>&l

41、t;/p><p>　　dr.Read();</p><p>　　if (CheckBoxList1.Items[i].Selected)</p><p><b>　　{</b></p><p>　　int n = Convert.ToInt16(dr[1]) + 1; </p><p>　　cmd1

42、.Connection = con;</p><p>　　cmd1.CommandText = "update toupiao set num='" + n.ToString() + "' where item='" + dr[0] + "'"; //修改投票總數(shù) </p><

43、p>　　} </p><p><b>　　}</b></p><p>　　dr.Close();</p><p>　　cmd1.ExecuteNonQuery();</p><p>　　cmd2.ExecuteNonQuery();</p><p>　　con.Close(

44、);</p><p>　　Response.Write("<script>alert('投票成功!')</script>");</p><p>　　CheckBoxList1.ClearSelection();</p><p><b>　　}</b></p><p&

45、gt;　　protected void Button2_Click(object sender, EventArgs e)</p><p><b>　　{</b></p><p>　　Response.Redirect("toupiao.aspx");</p><p><b>　　}</b></p

46、><p>　　點擊結(jié)果按鈕，即可查看投票結(jié)果，如下圖4-6所示：</p><p>　　圖4-6 在線投票結(jié)果效果圖</p><p>　　在線投票結(jié)果部分的關(guān)鍵代碼如下所示：</p><p>　　protected void Page_Load(object sender, EventArgs e)</p><p><

47、b>　　{</b></p><p>　　SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings ["ConnectionString"].ConnectionString);</p><p>　　con.Open();</p><p&g

48、t;　　string strsql = "select * from toupiao order by sx";</p><p>　　SqlCommand cmd = new SqlCommand(strsql, con);</p><p>　　SqlDataReader dr = cmd.ExecuteReader();</p><p>　　d

49、r.Read ();</p><p>　　int sum=Convert .ToInt16 (dr[1]); </p><p>　　string str="";</p><p>　　for(int i=0;i<4;i++)</p><p><b>　　{</b&g

50、t;</p><p>　　dr.Read();</p><p>　　str = "<table border=1 width=80%><tr><td width=30%>" + dr[0] + "</td><td width=20%>" + dr[1] + "</td>

51、<td width=20%>("+string.Format("{0:0.00%}", Convert.ToDouble (dr[1])/sum)+")</td><td width=30%><hr align=left size=10 color=#00655 width="+Convert. ToInt16 (dr[1])*10 + &quo

52、t;></td></tr></table>";</p><p>　　Label1.Text = Label1.Text + str;</p><p><b>　　}</b></p><p>　　Label1.Text = Label1.Text + "總投票人數(shù)：" + s

53、um.ToString();</p><p>　　dr.Close();</p><p>　　con.Close();</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　點擊返回按鈕即可返回至首頁，繼續(xù)瀏覽站內(nèi)信息和其它操作。

54、</p><p>　　4.2多模塊子頁的設(shè)計</p><p>　　4.2.1 學生工作等多模塊子頁頁面的設(shè)計 </p><p>　　學生工作頁面可以說是在整個網(wǎng)站中除了首頁以外另一個模塊稍多的頁面，它包括了學生工作的多方面信息，比如：學生實踐、黨團活動和學子風采信息，點擊每一個模塊底部的超鏈接都可以進入另一個子頁面進行瀏覽更多信息。</p><p

55、>　　學生工作頁面(zongxsgz.aspx)效果如下圖4-7：</p><p>　　圖4-7 學生工作頁面效果圖</p><p>　　科研工作頁面與此頁面類似，只需復制學生工作頁面即可，然后在<SelectParameters><asp:QueryStringParameter DefaultValue="****" Name="T

56、ype" QueryStringField="****" Type="String" /></SelectParameters>處稍作修改即可。</p><p>　　4.3普通子頁的設(shè)計</p><p>　　4.3.1 學院新聞等子頁頁面的設(shè)計 </p><p>　　學院新聞頁面(news.aspx

57、)效果如下圖4-8：</p><p>　　圖4-8 學院新聞頁面效果圖</p><p>　　學院新聞頁面詳細的記載了學院新聞動態(tài)的信息，點擊標題就可以進入瀏覽頁面了解其新聞的詳細信息。</p><p>　　其他子頁如師資隊伍、專業(yè)設(shè)置、科研成果、在研項目、學生競賽、學生實踐、黨團活動、學子風采等只需復制學院新聞頁面。</p><p>　　4.

58、3.2詳細頁面的設(shè)計 </p><p>　　詳細頁面是從主頁或者各子頁進入的，只需點擊發(fā)布的各種信息標題便可查看其詳細信息，即進入了詳細頁面詳細頁面記載了信息標題、信息發(fā)布時間、內(nèi)容等。</p><p>　　新聞詳細頁面（wenslist.aspx）部分效果如下圖4-9：</p><p>　　圖4-9 新聞詳細頁面效果圖</p><p>　　

59、教師詳細頁面（teacherslist.aspx）部分效果如下圖4-10：</p><p>　　圖4-10 詳細頁面部分頁面效果圖</p><p>　　4.4 留言板頁面設(shè)計</p><p>　　4.4.1 訪客留言頁面設(shè)計（liuyanban.aspx）</p><p>　　從頁面左上角點擊留言板，即進入了留言板頁面，打開留言板，你可以留言

60、或者是查看留言，如下圖4-11：</p><p>　　圖4-11 訪客留言板頁面效果圖</p><p>　　點擊我要評論，則進入普通用戶評論頁面，效果如下圖4-12：</p><p>　　圖4-12 訪客評論留言頁面效果圖</p><p>　　點擊我要留言，則進入訪客留言頁面，效果如下圖4-13：</p><p>　　

61、圖4-13 訪客留言頁面效果圖</p><p>　　在這里用戶可以輸入留言主題、內(nèi)容、姓名、聯(lián)系方式，點擊提交按鈕，即可留言成功，轉(zhuǎn)入瀏覽留言列表頁面。</p><p>　　當留言者在留言過程中出現(xiàn)某些留言項為空或是留言格式不正確時，會出現(xiàn)一些驗證信息的提示，效果如下圖4-14：</p><p>　　圖4-14 訪客留言頁面為空效果圖</p><

62、p>　　4.5 后臺管理頁面設(shè)計</p><p>　　4.5.1 登錄頁面的設(shè)計（login.aspx）</p><p>　　登錄頁面的效果圖如下4-15所示：</p><p>　　圖4-15 后臺登錄頁面效果圖</p><p>　　根據(jù)管理員功能需求，管理員因為身份的不同，所要完成的功能也不同，按其權(quán)限可劃分為超級管理員和普通管理員，

63、而當管理員輸入正確的用戶名和密碼時，點擊登錄按鈕即可根據(jù)輸入信息與數(shù)據(jù)庫管理員用戶信息核對然后跳轉(zhuǎn)到不同的后臺管理頁面，其代碼如下：</p><p>　　protected void BtnOK_Click(object sender, EventArgs e)</p><p><b>　　{</b></p><p>　　if (!IsVali

64、d)</p><p><b>　　{</b></p><p><b>　　return;</b></p><p><b>　　}</b></p><p>　　SqlConnection con = new SqlConnection(ConfigurationManager.C

65、onnectionStrings["ConnectionString"].ConnectionString);</p><p>　　con.Open();</p><p>　　SqlCommand cmd = new SqlCommand();</p><p>　　cmd.Connection = con;</p><p>

66、;　　string s1 = "select * from [user] where userId='" + txtName.Text + "' and userPsd='" + txtPasswd.Text + "'";</p><p>　　SqlCommand cmd1 = new SqlCommand(s1, co

67、n);</p><p>　　SqlDataReader reader = cmd1.ExecuteReader();</p><p>　　if (reader.Read())</p><p><b>　　{ </b></p><p>　　// Response.Write("<script>

68、alert('用戶存在')</script>");</p><p>　　//// 用戶名存在</p><p>　　//// 判斷密碼</p><p>　　if (reader[1].ToString() != (txtPasswd.Text).ToString())</p><p><b>

69、　　{ </b></p><p><b>　　//密碼不正確</b></p><p>　　Response.Write("<script>alert('密碼不正確')</script>");</p><p><b>　　}</b></p>

70、;<p><b>　　else</b></p><p><b>　　{ </b></p><p><b>　　//密碼正確</b></p><p>　　if (reader["quanxian"].Equals("管理員"))</p>

71、<p>　　{ //是管理員</p><p>　　Response.Redirect("wengl1.aspx");</p><p><b>　　}</b></p><p><b>　　else</b></p><p>　　{ //不是管理員</p&g

72、t;<p>　　Response.Redirect("wengl.aspx");</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　el

73、se</b></p><p><b>　　{ </b></p><p><b>　　//用戶名不存在</b></p><p>　　Response.Write("<script>alert('用戶不存在')</script>");</p>

74、;<p><b>　　}</b></p><p>　　con.Close();</p><p><b>　　}</b></p><p>　　protected void BtnClear_Click(object sender, EventArgs e)</p><p><b&g

75、t;　　{</b></p><p>　　txtName.Text = "";</p><p>　　txtPasswd.Text = "";</p><p><b>　　}</b></p><p>　　當管理員輸入用戶名和密碼時，首先進行驗證，當管理員賬號或者密碼輸入的為

76、空的時候，效果如下圖4-16所示：</p><p>　　圖4-16 后臺登陸頁面為空效果圖</p><p>　　當管理員發(fā)現(xiàn)自己輸入信息不正確或是想重新輸入信息時，可點擊取消按鈕，即可將用戶名和密碼文本框里的內(nèi)容自動清空，便于重新輸入。</p><p>　　而當管理員賬號或者密碼輸入錯誤的時候，效果如下4-17 所示：</p><p>　　圖

77、4-17 后臺登陸頁面錯誤效果圖</p><p>　　4.5.2 管理用戶信息頁面設(shè)計（wengl.aspx）</p><p>　　超級管理員通過管理用戶這一功能可以查看到用戶的基本信息，如：用戶名、用戶密碼、權(quán)限，也可以做更改用戶信息、添加用戶的操作。</p><p>　　管理用戶信息頁面效果圖如下4-18：</p><p>　　圖4-18

78、 管理用戶信息頁面效果圖</p><p>　　管理員點擊用戶管理的刪除按鈕會將用戶的所有信息都刪除掉，并且會彈出如下對話框，點擊確定就會將其刪除。</p><p>　　管理員點擊更改按鈕，會彈出更改用戶信息的頁面，如圖4-19所示：</p><p>　　圖4-19 更改/添加用戶信息的效果圖</p><p>　　此頁也是管理員用來添加用戶的頁

79、面，網(wǎng)站管理員可以通過添加用戶的用戶名、用戶權(quán)限和用戶密碼來添加用戶。</p><p>　　當管理員輸入用戶名和密碼時，首先進行驗證，當管理員賬號或者密碼輸入的為空的時候，效果如下圖4-20所示：</p><p>　　圖4-20 輸入用戶信息為空的效果圖</p><p>　　當管理員輸入密碼不一致時，會提示</p><p>　　4.5.3 管

80、理新聞信息頁面設(shè)計（wengl.aspx）</p><p>　　管理新聞信息頁面效果圖如下4-21：</p><p>　　圖4-21 管理新聞信息頁面效果圖</p><p>　　點擊新聞管理的刪除按鈕會將新聞的所有信息都刪除掉，并且會彈出如下對話框，點擊確定就會將其刪除。</p><p>　　新增新聞是管理員用來添加新聞信息的，網(wǎng)站管理員可以

81、添加新聞的標題、類型和新聞的詳細內(nèi)容，新聞添加時間系統(tǒng)默認，點擊保存按鈕，即可保存并返回至新聞管理頁面。同時，當管理員點擊新聞管理頁面每條新聞欄里的編輯鏈接時，也會鏈接至此頁面，功能是修改原新聞信息。</p><p>　　新增新聞頁面效果圖如下4-22：</p><p>　　圖4-22 添加/編輯新聞信息的效果圖</p><p>　　同時當輸入信息為空時會提示信息不

82、能為空，當輸入信息錯誤或需要重新輸入時，點擊清除按鈕即可清空文本框內(nèi)的所有內(nèi)容。</p><p>　　4.5.4 管理公告信息頁面設(shè)計（gongggl.aspx）</p><p>　　管理公告信息頁面效果圖如下4-23：</p><p>　　圖4-23 管理公告信息頁面效果圖</p><p>　　新增公告是管理員用來添加公告信息的，網(wǎng)站管理員

83、可以添加公告的詳細內(nèi)容，新聞添加時間系統(tǒng)默認，點擊保存按鈕，即可保存并返回至公告管理頁面。同時，當管理員點擊公告管理頁面每條公告欄里的編輯鏈接時，也會鏈接至此頁面，即功能是修改原公告信息。</p><p>　　新增公告信息頁面效果圖如下4-24：</p><p>　　圖4-24 添加/編輯公告信息的效果圖</p><p>　　同時當輸入信息為空時會提示信息不能為空，

84、當輸入信息錯誤或需要重新輸入時，點擊清除按鈕即可清空文本框內(nèi)的所有內(nèi)容。</p><p>　　4.5.5 管理專業(yè)信息頁面設(shè)計（zhuanyegl.aspx）</p><p>　　管理專業(yè)信息頁面效果圖如下4-25：</p><p>　　圖4-25 管理專業(yè)信息頁面效果圖</p><p>　　新增專業(yè)是管理員用來添加專業(yè)信息的，網(wǎng)站管理員可以

85、添加專業(yè)的名稱和專業(yè)的詳細信息，專業(yè)添加時間系統(tǒng)默認，點擊保存按鈕，即可保存并返回至專業(yè)管理頁面。同時，當管理員點擊專業(yè)管理頁面每條專業(yè)欄里的編輯鏈接時，也會鏈接至此頁面，即功能是修改原專業(yè)信息。</p><p>　　新增專業(yè)信息頁面效果圖如下4-26：</p><p>　　圖4-26 添加/編輯專業(yè)信息的效果圖</p><p>　　同時當輸入信息為空時會提示信息不

86、能為空，當輸入信息錯誤或需要重新輸入時，點擊清除按鈕即可清空文本框內(nèi)的所有內(nèi)容。</p><p>　　4.5.6 管理師資隊伍信息頁面設(shè)計（teachersgl.aspx）</p><p>　　管理師資隊伍信息頁面效果圖如下4-27：</p><p>　　圖4-27 管理師資隊伍信息頁面效果圖</p><p>　　新增教師是管理員用來添加教師

87、信息的，網(wǎng)站管理員可以添加教師的姓名、教師簡介和教師的圖片信息路徑，教師添加時間系統(tǒng)默認，點擊保存按鈕，即可保存并返回至師資隊伍管理頁面。同時，當管理員點擊師資隊伍管理頁面每條專業(yè)欄里的編輯鏈接時，也會鏈接至此頁面，即功能是修改原教師信息。</p><p>　　新增教師信息頁面效果圖如下4-28：</p><p>　　圖4-28 新增/編輯教師信息的效果圖</p><p

88、>　　同時當輸入信息為空時會提示信息不能為空，當輸入信息錯誤或需要重新輸入時，點擊清除按鈕即可清空文本框內(nèi)的所有內(nèi)容。</p><p>　　4.5.7 管理留言頁面設(shè)計（liuyanlist.aspx）</p><p>　　普通用戶通過前臺頁面的留言板模塊可以對機電工程網(wǎng)站進行留言，管理員對這些留言則可以通過后臺的留言管理進行管理，管理留言頁面中記載了留言者的信息，例如，留言者的姓名

89、，留言時間，留言標題，還有留言者自己的聯(lián)系方式，點擊刪除按鈕可以對應(yīng)的刪除留言者的所有留言信息。</p><p>　　管理留言頁面效果圖如下4-29所示：</p><p>　　圖4-29 管理留言頁面效果圖</p><p><b>　　結(jié)　論</b></p><p>　　對于這次青島濱海學院機電工程學院網(wǎng)站的設(shè)計與開發(fā)，

90、我嚴格按照軟件工程的基本思想進行，系統(tǒng)地經(jīng)過需求分析、總體設(shè)計、詳細設(shè)計之后進行實際開發(fā)與實現(xiàn) ，系統(tǒng)功能基本達到了預(yù)期目標，同時系統(tǒng)的實用性、安全性、擴展性、穩(wěn)定性、完整性等也達到了一定的標準。經(jīng)過初步測試，系統(tǒng)運行良好。</p><p>　　通過這次的網(wǎng)站設(shè)計與開發(fā)，自己親身實踐，讓我在基于ASP.NET的Web應(yīng)用程序開發(fā)方面的能力有了很大的提高，無論是前臺的板塊設(shè)計、后臺的代碼編寫還是網(wǎng)站的總體規(guī)劃設(shè)計方

91、面都得到了很好的鍛煉。本次系統(tǒng)的研究也使我的軟件工程知識得到了進一步的強化和鞏固，使之更加系統(tǒng)化、條理化，有助于今后的學習和其他系統(tǒng)的開發(fā)，出于我自身的各種原因，在網(wǎng)站建設(shè)的很多地方還存在著很多的不足和缺陷，希望能夠通過大家的指導，使它不斷完善。</p><p>　　同時通過這次實踐，讓我自己也充分認識到無論做任何事情，只要肯努力，肯下功夫，都能夠做好。無論做什么，首先不能夠看輕了自己，更不能指望著靠誰來幫你完成

92、，其實只要你肯做，無論是做什么，都可以做好。相信自己一定行。</p><p><b>　　參考文獻</b></p><p>　　[1]邵良斌，劉好增，等. ASP.NET 3.5（C#）實踐教程[M]. 北京:清華大學出版社，2009.05</p><p>　　[2]魏菊霞，李志中，謝云，刁綾. ASP.NET 實踐教程[M]. 北京:清華大學

93、出版社，2010.04</p><p>　　[3] 陳季，馬永杰，李振先. ASP.NET實力指南與高級應(yīng)用[M].北京:中國鐵道出版社，2009.01</p><p>　　[4] 張樹亮，李超. ASP.NET+SQL Server網(wǎng)絡(luò)應(yīng)用系統(tǒng)開發(fā)案例精解[M]. 北京:清華大學出版社，2008.06</p><p>　　[5]鄧文淵.挑戰(zhàn)ASP.NET 2.0

94、for C# 動態(tài)網(wǎng)站開發(fā)[M]. 北京:機械工業(yè)出版社，2006.09</p><p>　　[6] 袁磊，陳偉衛(wèi). 網(wǎng)頁設(shè)計與制作實例教程[M].北京:清華大學出版社，2008.10</p><p>　　[7] 孫建知. 網(wǎng)絡(luò)程序設(shè)計案例教程:ASP.NET+SQL Server(C#實現(xiàn)) [J]. 北京:清華大學出版社，2008.06</p><p>　　[8

95、] 呂洋波. ASP.NET2.0寶典[M].北京: 電子工業(yè)出版社，2007.4</p><p>　　[9] 劉乃麗.精通ASP.NET2.0+SQL Server 2005項目開發(fā)[M].北京:人民郵電出版社，2007.5</p><p>　　[10] Mike O’Docherty.面向?qū)ο蠓治雠c設(shè)計[M].俞志翔，譯.北京:清華大學出版社，2006.4</p><

96、;p>　　[11] 王珊，薩師煊.數(shù)據(jù)庫系統(tǒng)概論[M].北京:高等教育出版社，2006.5</p><p>　　[12] 黃燕勤.淺談網(wǎng)站美化中Javascript的應(yīng)用[N].電腦報，2007-1-7(1)</p><p>　　[13] Imar Spaanjaars.ASP.NET 2.0經(jīng)典案例教程[M].北京:人民郵電出版社，2007.4</p><p&g

97、t;　　[14] 邱錦倫，曹文等.Visual C#.NET程序設(shè)計教程[M].北京:清華大學出版社，2006.9</p><p>　　[15] 崔良海.ASP.NET 2.0實用教程(C#版)[M].北京:人民郵電出版社，2008.5</p><p>　　[16] 金雪云譯.ASP.NET 2.0簡明教程(C#2005篇版)[M].北京:清華大學出版社，2009.3</p>

98、<p>　　[17] 靳華，胡鑫鑫譯. C#與.NET程序員面試寶典[M].北京:清華大學出版社，2010.9</p><p><b>　　致　謝</b></p><p>　　在完成本次畢業(yè)設(shè)計的過程中，我遇到了很多的問題和難題，尤其是剛開始的時候，幾乎是毫無頭緒，但是我得到了很多人的幫助和支持，在這里我要向他們說聲感謝，謝謝你們一直以來對我的幫助和支持。

99、</p><p>　　首先要感謝的是我的指導教師黃艷老師。本次畢業(yè)設(shè)計是在黃老師的悉心指導下完成的，從設(shè)計選題、初期的網(wǎng)站設(shè)計和制作規(guī)劃、網(wǎng)站調(diào)試、修改再到論文的修改乃至制作過程中遇到的很多問題的解決都少不了黃老師的細心指導和嚴格要求。黃老師以其嚴謹?shù)慕虒W態(tài)度和平和的指導語氣為我在網(wǎng)站設(shè)計和制作中提出了很多建設(shè)性的意見，這才使我的畢業(yè)設(shè)計如期完成。</p><p>　　接下來還要感謝那些幫

100、助我的同學們、機電工程學院的工作人員，在設(shè)計過程中他們給了我很多好的建議和意見，也幫助我解決了許多的難題，同時對我畢業(yè)論文的文本也有一定的幫助。</p><p>　　最后還要感謝那些曾經(jīng)教授我知識的許許多多的老師們，是他們教會了我如此多的知識，那些我以前看似不可能會用到的知識，在這次設(shè)計中也幫了我不少忙，我相信它們都是我的財富，以前用不到，現(xiàn)在用不到，總有一天它們會起作用，對我以后的學習和工作都會有幫助的，這些都