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

資料內(nèi)容僅供您學(xué)習(xí)參考，如有不當(dāng)之處，請聯(lián)系改正或者刪除。個人網(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.引言當(dāng)前關(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頁面生成器兩部分組成。二者經(jīng)過數(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è)計軟件成為當(dāng)前最為流行的軟件之一。下面就介紹一下我開發(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)站。3.系統(tǒng)概要設(shè)計3.1網(wǎng)站整體設(shè)計布局網(wǎng)站布局網(wǎng)站風(fēng)格設(shè)計收集資料目錄設(shè)計網(wǎng)頁設(shè)計策劃網(wǎng)站導(dǎo)航設(shè)計3.2留言板設(shè)計管理留言管理留言編輯留言刪除留言簽寫保存留言留言板系統(tǒng)讀取顯示留言回復(fù)留言3.3數(shù)據(jù)庫建立網(wǎng)站用到的后臺文件:文件名作用與功能備注admin.asp登陸后臺index.asp首頁admin_article.asp管理文章后臺Delartcat.asp刪除功能后臺post.asp發(fā)布功能后臺myworld.mdb數(shù)據(jù)庫文件后臺admin_diary.asp心情管理后臺后臺認證:只允許瀏覽者進入頁面瀏覽,在對回復(fù)留言和新聞的增加、刪除這些管理時都需要對用戶的身份進行認證,即需要管理員提供后臺管理的用戶名和密碼,該用戶名和密碼保存在相對應(yīng)的數(shù)據(jù)庫中。

4.詳細設(shè)計首先網(wǎng)站的策劃,因為我制作的是個人的網(wǎng)站,因此面正確對象是自己周圍熟悉的同學(xué)朋友,主題和內(nèi)容就是自己日常生活瑣事,還有跟好朋友有個交流溝通的平臺,互相了解的小天地。這樣就沒有什么特別高的創(chuàng)意要求,只要溫馨,簡潔大方就好了。當(dāng)然,如果你要設(shè)計的是一個面向大眾的個人展示平臺,那就要求新穎的創(chuàng)意了。針對我自己的個人網(wǎng)站,我主要從下面幾點進行設(shè)計的:快樂世界:是一個體現(xiàn)個性的板塊內(nèi)容,放置一些我比較喜歡的優(yōu)秀文章或者我覺得很有意義的小故事還有圖片供大家欣賞。(其它幾個頁面也是類似的,只是介紹的方向不同)。擁抱陽光:展示一些自己近期的生活照。心情動態(tài):讓朋友能夠?qū)ξ耶?dāng)天的心情有一個直觀快捷的了解方式。留言板:設(shè)計一個留言板作為和朋友交流的紐帶,這樣能夠隨時促進朋友之間的情感,又因為是自己設(shè)計的,比較有保密性,分享快樂和秘密的地方。4.1靜態(tài)網(wǎng)頁設(shè)計現(xiàn)在整體的布局已經(jīng)明確了,能夠進行網(wǎng)頁的設(shè)計了。這是我網(wǎng)站首頁的效果,接下來,我就簡單演示一下這個主頁的制作過程。首先,運行Dreamwearcs5,接著就是頁面的布局了,選擇”插入——>表格”然后根據(jù)你的需要劃分,選擇你所需的表格行列數(shù)。如圖:然后依次在你所劃分的位置插入你所需要的圖片等等。這樣一個簡單有漂亮的網(wǎng)頁的劃分就完成了.4.2動態(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的過程:1.啟動控制面板,雙擊”管理工具”下的”數(shù)據(jù)源(ODBC)”,如圖所示:2.在打開的”數(shù)據(jù)源(ODBC)”對話框中選擇”系統(tǒng)DSN”標簽,然后單擊”添加”按鈕,如圖:3.在彈出的”創(chuàng)立新數(shù)據(jù)源”對話框中,選擇數(shù)據(jù)庫的驅(qū)動程序為”MicrosoftAccessDriver(*.mdb)”,然后單擊”完成”按鈕,如圖:4.在出現(xiàn)的”O(jiān)DBCMicrosoftAccess安裝”對話框,在”數(shù)據(jù)源名”文本框中輸入我的這個網(wǎng)站的數(shù)據(jù)庫的名稱:myworld,單擊”數(shù)據(jù)庫”欄中的”選擇”按鈕選擇我的這個網(wǎng)站根目錄中我已經(jīng)建好的數(shù)據(jù)庫myworld.mdb,然后單擊”確定”按鈕,如圖:5.這時,我發(fā)現(xiàn)系統(tǒng)數(shù)據(jù)源名稱中已經(jīng)多了一個”myworld.mdb”,這就是我的網(wǎng)站要使用的數(shù)據(jù)庫。單擊”確定”按鈕,這樣,我就完成了數(shù)據(jù)源的創(chuàng)立過程。如圖:弄好這些后,打開dreamwear,將數(shù)據(jù)庫與網(wǎng)頁進行連接。打開數(shù)據(jù)庫,連接好數(shù)據(jù)庫,并將數(shù)據(jù)庫中的內(nèi)容分別拽入到表格中的適當(dāng)位置,這樣,數(shù)據(jù)庫中的內(nèi)容就顯示在里面了。4.3鏈接頁面的制作鏈接的概念:鏈接也稱超級鏈接,是指從一個網(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)頁。在瀏覽器里光標移到超級鏈接的地方就會變成手型4.4其它頁面的建立一樣的,根據(jù)首頁的制作方式來制作其它頁面,這里我們要特別注意的就是制作網(wǎng)站的四個基本原則:對齊、親密性、重復(fù)性和對比。對齊就是指頁面上的元素相互之間對齊。親密性原則就是指元素相互靠近,放置在領(lǐng)進位置上時所建立起來的關(guān)系。重復(fù)的概念就是指,在整個項目中重復(fù)某些元素,從而將所有分離的部分聯(lián)系在一起。網(wǎng)站整個看上去要體現(xiàn)統(tǒng)一性,體現(xiàn)出相同的理念。對比能夠把你的目光吸引到頁面上,讓你為之注目。使元素形成對比能夠吸引人的視線瀏覽頁面,并建立一個信息層次體系,讓你能夠查閱眾多信息并從中挑出你真正需要的信息。4.5數(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)和字段的分析。Admin(系統(tǒng)管理員)表:心情版塊的管理表:內(nèi)容管理表:留言管理表:5.系統(tǒng)實現(xiàn)一個好的網(wǎng)站建設(shè)好了之后是不能立即發(fā)布的,因為由于在程序開發(fā)和頁面制作的過程中難免會出現(xiàn)誤差,因此在正式發(fā)布前經(jīng)過測試找出網(wǎng)頁中的漏洞是非常重要的一個環(huán)節(jié)。在這之前需要進行一段時間的測試。為什么測試顯得這么重要呢?沒有經(jīng)過測試的頁面會出現(xiàn)那些問題呢?下面將從幾個不在IIS服務(wù)器未改變”默認網(wǎng)站”默認路徑的前提下,執(zhí)行第二步。在IE地址欄里輸入http://localhost/qiqi/qiqi/,就能訪問系統(tǒng)的前臺首頁面。測試的項目。我主要就如下幾個方面進行探討:性能測試,安全性測試,穩(wěn)定性測試,瀏覽器兼容性測試,可用性/易用性測試,鏈接測試,代碼合法性測試。在我的個人網(wǎng)站的測試過程中,在數(shù)據(jù)庫的鏈接,還有圖片的相對位置都出現(xiàn)了很多的錯誤,還好,經(jīng)過我自己的修改,現(xiàn)在已基本消除了這種現(xiàn)象。這是在地址欄中輸入http://localhost/qiqi/qiqi/跳出來的頁面。6.結(jié)束語兩個多月的畢業(yè)設(shè)計已告一段落,到此,我制作的個人網(wǎng)站已經(jīng)基本完成。但由于畢業(yè)設(shè)計時間較短,本人的能力有限,導(dǎo)致于我無法讓我的數(shù)據(jù)庫和網(wǎng)站進行正確的相聯(lián)接,這個系統(tǒng)還有許多不足的地方。這些都有待于進一步改進。