個人網(wǎng)站的設(shè)計與實現(xiàn)

/福建兒童發(fā)展職業(yè)學(xué)院畢業(yè)論文（設(shè)計）(個人網(wǎng)站的設(shè)計和實現(xiàn))姓名：學(xué)號：系別：人文科學(xué)系專業(yè)：初等教化（信息技術(shù)方向）年級：2009級指導(dǎo)老師：2011年10月30日目錄TOC\o"1-3"\h\u1.引言 12.系統(tǒng)構(gòu)架 12.1AdobeDreamweaverCS5簡介 12.2ASP技術(shù) 22.3Access數(shù)據(jù)庫軟件 23.系統(tǒng)概要設(shè)計 33.1網(wǎng)站整體設(shè)計 33.2留言板設(shè)計 33.3數(shù)據(jù)庫建立 34.具體設(shè)計 54.1靜態(tài)網(wǎng)頁設(shè)計 64.2動態(tài)頁面的制作 74.3鏈接頁面的制作 94.4其他頁面的建立 105.測試 106.結(jié)束語 11個人網(wǎng)站的設(shè)計和實現(xiàn)摘要：隨著國際互聯(lián)網(wǎng)的普及，人們已經(jīng)越來越不滿意于在internet上閱讀信息了。希望能夠更深化的參和其中，擁有自己的網(wǎng)站。我們可以在網(wǎng)絡(luò)這個平臺上更好的呈現(xiàn)自我。個人網(wǎng)頁的設(shè)計和實現(xiàn)不僅能夠讓我們更好的和外界溝通，溝通；還能夠突出自己的特性和風(fēng)格，增加個人魅力和自信。該探討課題主要探討現(xiàn)在人們的個人網(wǎng)站的實現(xiàn)。該課題主要是介紹了如何開發(fā)個人網(wǎng)站。

關(guān)鍵詞：個人網(wǎng)站；ASP；web1.引言目前關(guān)于INTERNET是我們聽到最多的部分就是萬維網(wǎng)（worldwideweb）。Web事實上由數(shù)十億單個頁面組成，這特別類似于我們創(chuàng)建的WORD文檔頁面。這就是WEB——它就是一大堆頁面。所謂的“頁”，“頁”中可能包括文字、圖像、圖形、聲音、動畫等。這些單個頁面會鏈接到其他頁面。通常一家企業(yè)或個人會創(chuàng)建統(tǒng)一的一組頁面，這些頁面彼此相關(guān)。相關(guān)頁面的集合就稱為網(wǎng)站。每個網(wǎng)站都有主頁，這個頁面就像一個書目。通常主頁就是網(wǎng)站的第一個頁面，不過有些網(wǎng)站還包含入口頁面，這有些類似于書本的扉頁，可以由這個入口頁面進入主頁。這次的課題探討，我的網(wǎng)站設(shè)計和整個特性化頁面生成系統(tǒng)主要由運用Dreamweaver開發(fā)的關(guān)聯(lián)規(guī)則采掘系統(tǒng)和利用IIS+ASP技術(shù)實現(xiàn)的特性化Web頁面生成器兩部分組成。二者通過數(shù)據(jù)庫服務(wù)器和Web服務(wù)器連接。2.系統(tǒng)構(gòu)架網(wǎng)站，一個全新而又時髦的名詞，正是有了多數(shù)的大小網(wǎng)站，才使互聯(lián)網(wǎng)能蓬勃發(fā)展。很多人都想擁有一個屬于自己的網(wǎng)站，因此，網(wǎng)站設(shè)計軟件成為目前最為流行的軟件之一。下面就介紹一下我開發(fā)個人網(wǎng)站所需的設(shè)計軟件以及開發(fā)環(huán)境。2.1AdobeDreamweaverCS5簡介AdobeDreamweaverCS5是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DreamweaverCS5是第一套針對專業(yè)網(wǎng)頁設(shè)計師特殊發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越閱讀器限制的充溢動感的網(wǎng)頁。2.2ASP技術(shù)ASP是ActiveServerPage的簡寫。ActiveServerPage是創(chuàng)建動態(tài)網(wǎng)頁的一個很好的工具，它起一種編程語言的作用，可以利用它編寫動態(tài)產(chǎn)生HTML的程序代碼。而且ASP也是服務(wù)器端腳本環(huán)境，可以用來創(chuàng)建交互式WEB頁并建立強大的的Web應(yīng)用程序。ASP技術(shù)能讓W(xué)eb開發(fā)員和網(wǎng)頁設(shè)計員快速地開發(fā)簡潔維護的動態(tài)Web主頁。用戶端只要運用可執(zhí)行HTML碼的閱讀器就可閱讀ASP所設(shè)計的網(wǎng)頁內(nèi)容。ASP所運用的腳本語言均在Web服務(wù)器端執(zhí)行，用戶端的閱讀器不須要執(zhí)行這些腳本語言。ASP不但功能強大，而且語法的編寫規(guī)則很簡潔。ASP運用簡潔易懂的腳本語言和HTML語言作為基礎(chǔ)語言，對腳本語言的類型沒有限制，運用的編輯器簡潔，運用像Windows的記事本這樣的一般文本編輯器即可。2.3Access數(shù)據(jù)庫軟件Access是Office軟件中用來管理數(shù)據(jù)庫的應(yīng)用軟件，它操作簡潔、功能全面，其存儲方式簡潔且便于管理和維護；既可以用來存放數(shù)據(jù)，也可以作為客戶端開發(fā)工具進行數(shù)據(jù)庫應(yīng)用系統(tǒng)開發(fā)，即可以開發(fā)小型軟件，也可以用來開發(fā)大型應(yīng)用系統(tǒng)。它可運行于各種MicrosoftWindows系統(tǒng)環(huán)境中，由于它繼承了Windows的特性，不僅易于運用，而且界面友好。它并不須要數(shù)據(jù)庫管理者具有專業(yè)的程序設(shè)計水平，任何非專業(yè)的用戶不必編寫代碼，就可以用它來創(chuàng)建功能強大的數(shù)據(jù)庫管理系統(tǒng)。本網(wǎng)站采納功能強大的MicrosoftAccess作為后臺數(shù)據(jù)庫，開發(fā)了一個小型的個人網(wǎng)站。圖2-1體統(tǒng)的結(jié)構(gòu)圖：系統(tǒng)概要設(shè)計3.1網(wǎng)站整體設(shè)計表3-1網(wǎng)站構(gòu)架圖布局網(wǎng)站布局網(wǎng)站風(fēng)格設(shè)計收集資料書目設(shè)計網(wǎng)頁設(shè)計策劃網(wǎng)站導(dǎo)航設(shè)計3.2留言板設(shè)計表3-2留言板構(gòu)架圖管理留言管理留言編輯留言刪除留言簽寫保存留言留言板系統(tǒng)讀取顯示留言回復(fù)留言3.3數(shù)據(jù)庫建立

圖3-3實體E-R圖：留言板信息留言板信息管理管理管理個人網(wǎng)站后臺管理系統(tǒng)管理員網(wǎng)頁信息編輯留言刪除留言用戶名密碼修改文章增加文章刪除文章網(wǎng)站用到的后臺文件：表3-4后臺文件部分圖：文件名作用和功能備注admin.asp登陸后臺index.asp首頁admin_article.asp管理文章后臺Delartcat.asp刪除功能后臺post.asp發(fā)布功能后臺myworld.mdb數(shù)據(jù)庫文件后臺admin_diary.asp心情管理后臺后臺認證：只允許閱讀者進入頁面閱讀，在對回復(fù)留言和新聞的增加、刪除這些管理時都須要對用戶的身份進行認證，即須要管理員供應(yīng)后臺管理的用戶名和密碼，該用戶名和密碼保存在相對應(yīng)的數(shù)據(jù)庫中。4.具體設(shè)計首先網(wǎng)站的策劃，因為我制作的是個人的網(wǎng)站，所以面對的對象是自己四周熟識的同學(xué)摯友，主題和內(nèi)容就是自己日常生活瑣事，還有跟好摯友有個溝通溝通的平臺，相互了解的小天地。這樣就沒有什么特殊高的創(chuàng)意要求，只要溫馨，簡潔大方就好了。當然，假如你要設(shè)計的是一個面對大眾的個人展示平臺，那就要求新奇的創(chuàng)意了。針對我自己的個人網(wǎng)站，我主要從下面幾點進行設(shè)計的：歡樂世界：是一個體現(xiàn)特性的板塊內(nèi)容，放置一些我比較喜愛的優(yōu)秀文章或者我覺得很有意義的小故事還有圖片供大家觀賞。（其他幾個頁面也是類似的，只是介紹的方向不同）。擁抱陽光：展示一些自己近期的生活照。心情動態(tài)：讓摯友可以對我當天的心情有一個直觀快捷的了解方式。留言板：設(shè)計一個留言板作為和摯友溝通的紐帶，這樣可以隨時促進摯友之間的情感，又因為是自己設(shè)計的，比較有保密性，共享歡樂和隱私的地方。4.1靜態(tài)網(wǎng)頁設(shè)計現(xiàn)在整體的布局已經(jīng)明確了，可以進行網(wǎng)頁的設(shè)計了。圖4-1網(wǎng)站首頁效果圖：這是我網(wǎng)站首頁的效果，接下來，我就簡潔演示一下這個主頁的制作過程。首先，運行Dreamwearcs5，接著就是頁面的布局了，選擇“插入——>表格”然后依據(jù)你的須要劃分，選擇你所需的表格行列數(shù)。如圖：圖4-2網(wǎng)頁分欄圖：然后依次在你所劃分的位置插入你所須要的圖片等等。圖4-3網(wǎng)頁分欄效果圖：這樣一個簡潔有美麗的網(wǎng)頁的劃分就完成了.4.2數(shù)據(jù)庫設(shè)計本設(shè)計是采納ASP結(jié)合Access數(shù)據(jù)庫平臺的一個個人網(wǎng)站。網(wǎng)站開發(fā)的性能要求是實現(xiàn)網(wǎng)站的智能化。本設(shè)計能實現(xiàn)以下功能：心情版塊的增、刪、改和留言板的實現(xiàn)及一些靜態(tài)網(wǎng)頁的閱讀。網(wǎng)站的數(shù)據(jù)庫建設(shè)在這個網(wǎng)站的設(shè)計過程中占有特別重要的位置。其中，我們應(yīng)當要考慮到的問題有：系統(tǒng)管理員：系統(tǒng)管理員具有對整個網(wǎng)站發(fā)布，數(shù)據(jù)庫的管理，信息管理，人員管理的最高權(quán)限。包括心情的增、刪、改，留言的回復(fù)、刪除。以上的功能只能是管理員才有權(quán)限操作。閱讀者：信息的最終閱讀者，他們是不具有任何權(quán)限的一般用戶。在設(shè)計數(shù)據(jù)庫過程中，必需考慮到各種信息存放，更新。所以數(shù)據(jù)庫必需能最大限度的滿意各種信息的輸入輸出。以下為后臺數(shù)據(jù)庫的各表的結(jié)構(gòu)和字段的分析。表3-5Admin（系統(tǒng)管理員）表：表3-6心情版塊的管理表：表3-7內(nèi)容管理表：表3-8留言管理表：5系統(tǒng)實現(xiàn)5.1動態(tài)頁面的制作在我的整個網(wǎng)站中，動態(tài)頁面占了很重要的部分。首先，我依據(jù)我的個人主頁所要實現(xiàn)的功能我制作好了我的數(shù)據(jù)庫，接下來，我就把我設(shè)定系統(tǒng)的DSN（數(shù)據(jù)源名稱）的方法來講講。DSN是用來確定數(shù)據(jù)庫所在的位置以及數(shù)據(jù)庫的相關(guān)屬性的。運用DSN的優(yōu)點是，假如我要移動數(shù)據(jù)庫檔案的位置或是運用其他類型的數(shù)據(jù)庫的時候，我只要重新設(shè)定DSN即可，不須要去修改原來運用的程序。下面，我就演示我在自己的電腦上配置DSN的過程：啟動限制面板，雙擊“管理工具”下的“數(shù)據(jù)源（ODBC）”。在打開的“數(shù)據(jù)源（ODBC）”對話框中選擇“系統(tǒng)DSN”標簽，然后單擊“添加”按鈕。在彈出的“創(chuàng)建新數(shù)據(jù)源”對話框中，選擇數(shù)據(jù)庫的驅(qū)動程序為“MicrosoftAccessDriver（*.mdb）”，然后單擊“完成”按鈕。在出現(xiàn)的“ODBCMicrosoftAccess安裝”對話框，在“數(shù)據(jù)源名”文本框中輸入我的這個網(wǎng)站的數(shù)據(jù)庫的名稱：myworld,單擊“數(shù)據(jù)庫”欄中的“選擇”按鈕選擇我的這個網(wǎng)站根書目中我已經(jīng)建好的數(shù)據(jù)庫myworld.mdb，然后單擊“確定”按鈕。這時，我發(fā)覺系統(tǒng)數(shù)據(jù)源名稱中已經(jīng)多了一個“myworld.mdb”，這就是我的網(wǎng)站要運用的數(shù)據(jù)庫。單擊“確定”按鈕，這樣，我就完成了數(shù)據(jù)源的創(chuàng)建過程。如圖：圖5-1數(shù)據(jù)源添加勝利圖：弄好這些后，打開dreamwear，將數(shù)據(jù)庫和網(wǎng)頁進行連接。打開數(shù)據(jù)庫，連接好數(shù)據(jù)庫，并將數(shù)據(jù)庫中的內(nèi)容分別拽入到表格中的適當位置，這樣，數(shù)據(jù)庫中的內(nèi)容就顯示在里面了。5.2鏈接頁面的制作鏈接的概念：鏈接也稱超級鏈接，是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，所指向的目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片、電子郵件地址、文件、甚至是應(yīng)用程序?？梢苑譃槲淖郑跋?，郵件，文件下載這幾種鏈接。在網(wǎng)頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。1、在網(wǎng)頁中選中要做超級鏈接的文字或者圖片。2、在屬性面板中單擊黃色文件夾圖標，在彈出的對話框里選中相應(yīng)的網(wǎng)頁文件就完成了。做好超級鏈接屬性面板出現(xiàn)鏈接文件顯示。3、按F12預(yù)覽網(wǎng)頁。在閱讀器里光標移到超級鏈接的地方就會變成手型5.3其他頁面的建立一樣的，依據(jù)首頁的制作方式來制作其他頁面，這里我們要特殊留意的就是制作網(wǎng)站的四個基本原則：對齊、密切性、重復(fù)性和對比。對齊就是指頁面上的元素相互之間對齊。密切性原則就是指元素相互靠近，放置在領(lǐng)進位置上時所建立起來的關(guān)系。重復(fù)的概念就是指，在整個項目中重復(fù)某些元素，從而將全部分別的部分聯(lián)系在一起。網(wǎng)站整個看上去要體現(xiàn)統(tǒng)一性，體現(xiàn)出相同的理念。對比可以把你的目光吸引到頁面上，讓你為之注目。使元素形成對比能夠吸引人的視線閱讀頁面，并建立一個信息層次體系，讓你能夠查閱眾多信息并從中挑出你真正須要的信息。下面要給大家介紹我的設(shè)計中的部分代碼：5.4計數(shù)器的設(shè)計

采納ASP編程的方式實現(xiàn)訪問者第幾次光臨本站。首先在代碼的起始部分寫如下代碼：<%Response.buffer=true%>，意為先將頁面先輸出到緩沖區(qū)。然后在底部計數(shù)器部分寫下如下代碼：

<%

dimnum’先定義一個變量

num=request.cookies("num")’從客戶端獲得COOKIES變量并賦值給num變量

ifnum=""then’推斷假如客戶端COOKIES變量為空，則賦值1，否則加1。num=1

else

num=num+1

endif

response.write"你是第"&num&"次訪問本站"’利用response.write語句向客戶瑞輸出response.cookies("num")=num’把變量num賦值給cookies

response.cookies("num").expires=#2030-1-1#’設(shè)定cookies過期日期

%>

制作計數(shù)器時，肯定要在代碼的最寫<%Response.buffer=true%>5.5添加記錄的設(shè)計echo"字段數(shù)據(jù)編輯<br>" echo"<tablewidth=600border=0cellpadding=5cellspacing=1bgcolor=#CCCCCC><tr><td>" echo"<formaction='?key=edit&table_name="&names&"&primarykey="&keys&"&primarykeyvalue="&iif(action<>"add",rs(keys),"")&"'method='post'name='editor'>" echo"<br>" echo"<inputtype=hiddenname=actionvalue=save>" echoiif(action="add","","<inputtype=submitvalue=保存onclick=this.form.action.value='save';> ") echo"<inputtype=buttonvalue=添加onclick=if(confirm('的確要添加當前為新記錄嗎?')){this.form.action.value='new';this.form.submit();};> " echo"<inputtype=buttonvalue=上一條onclick=""this.form.action.value='pre';this.form.submit();""> " echo"<inputtype=buttonvalue=下一條onclick=""this.form.action.value='next';this.form.submit();"">  " echo"<ahref='?key=view&table_name="&names&"'>表結(jié)構(gòu)</a>  " echo"<ahref='?key=sql&sql=select*from"&names&"&table_name="&names&"&primarykey="&keys&"'>表閱讀</a>  " echo"<ahref='?'>主界面</a><br>"5.6設(shè)置當前頁的記錄數(shù)subshowselect(sql) dimpage,pageUrl,strdel,geturl pageSize=request("pageSize") '設(shè)置每頁顯示的記錄數(shù) ifpageSize=""ornotisNumeric(pageSize)thenpageSize=50 '推斷是否刪除 ifrequest("keylog")<>""then strdel="deletefrom"&request("table_name")&"where"&request("primarykey")&"="&request("keylog") response.Writestrdel conn.execute(strdel) geturl="?"&replace(request.QueryString,"&keylog="&request("keylog"),"") response.Redirectgeturl endif5.7設(shè)置當前顯示的頁數(shù)page=request("page") ifpage=""ornotisNumeric(page)thenpage=1 pageUrl="?key=sql&sql="&sql ifrequest("primarykey")<>""andrequest("table_name")<>""then pageUrl=pageUrl&"&table_name="&request("table_name")&"&primarykey="&request("primarykey") endif5.8設(shè)置頁面的大小設(shè)計 <selectname="pageSize"> <% ifrequest("pageSize")<>""andisNumeric(request("pageSize"))then echo"<optionvalue='"&request("pageSize")&"'selected>"&request("pageSize")&"</option>" else echo"<optionvalue='50'>50</option>" endif %> <optionvalue="10">10</option> <optionvalue="20">20</option> <optionvalue="30">30</option> <optionvalue="40">40</option> <optionvalue="50">50</option> <optionvalue="60">60</option> <optionvalue="70">70</option> <optionvalue="80">80</option> <optionvalue="90">90</option> <optionvalue="100">100</option> </select>六、測試一個好的網(wǎng)站建設(shè)好了之后是不能馬上發(fā)布的，因為由于在程序開發(fā)和頁面制作的過程中難免會出現(xiàn)誤差，所以在正式發(fā)布前通過測試找出網(wǎng)頁中的漏洞是特別重要的一個環(huán)節(jié)。在這之前須要進行一段時間的測試。測試的項目。我主要就如下幾個方面進行探討：性能測試，平安性測試，穩(wěn)定性測試，閱讀器兼容性測試，可用性/易用性測試，鏈接測試，代碼合法性測試。在我的個人網(wǎng)站的測試過程中，在數(shù)據(jù)庫的鏈接做的不好，很多圖片的相對位置都出現(xiàn)了很多的錯誤，還好，經(jīng)過我自己的修改，現(xiàn)在已基本消退了這種現(xiàn)象。下面是關(guān)于連接數(shù)據(jù)庫的部分代碼：連接數(shù)據(jù)庫之前，首先必需聲明一個對象來作為數(shù)據(jù)庫和ASP程序之間的媒介，對象的聲明方式如下：Setconn=server.Createobject(“ADOBO.Connection”)Createobject是server對象中建立的函數(shù)，利用上面書寫的方法，即可建立一個和數(shù)據(jù)庫交換數(shù)據(jù)的對象，這種對象稱為connection對象。Conn是一個要和數(shù)據(jù)庫溝通的對象變量。對象建立完成后，還要打開通道和數(shù)據(jù)庫作連接才算是連接完成。通過ADO連接access數(shù)據(jù)庫實例代碼如下：<