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

資料內(nèi)容僅供您學(xué)習(xí)參考，如有不當(dāng)之處，請(qǐng)聯(lián)系改正或者刪除。個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)摘要:隨著國(guó)際互聯(lián)網(wǎng)的普及,人們已經(jīng)越來(lái)越不滿(mǎn)足于在internet上瀏覽信息了。希望能夠更深入的參與其中,擁有自己的網(wǎng)站。我們能夠在網(wǎng)絡(luò)這個(gè)平臺(tái)上更好的展現(xiàn)自我。個(gè)人網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)不但能夠讓我們更好的與外界交流,溝通;還能夠突出自己的個(gè)性與風(fēng)格,增加個(gè)人魅力與自信。該研究課題主要研究現(xiàn)在人們的個(gè)人網(wǎng)站的實(shí)現(xiàn)。該課題主要是介紹了如何開(kāi)發(fā)個(gè)人網(wǎng)站。

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

4.詳細(xì)設(shè)計(jì)首先網(wǎng)站的策劃,因?yàn)槲抑谱鞯氖莻€(gè)人的網(wǎng)站,因此面正確對(duì)象是自己周?chē)煜さ耐瑢W(xué)朋友,主題和內(nèi)容就是自己日常生活瑣事,還有跟好朋友有個(gè)交流溝通的平臺(tái),互相了解的小天地。這樣就沒(méi)有什么特別高的創(chuàng)意要求,只要溫馨,簡(jiǎn)潔大方就好了。當(dāng)然,如果你要設(shè)計(jì)的是一個(gè)面向大眾的個(gè)人展示平臺(tái),那就要求新穎的創(chuàng)意了。針對(duì)我自己的個(gè)人網(wǎng)站,我主要從下面幾點(diǎn)進(jìn)行設(shè)計(jì)的:快樂(lè)世界:是一個(gè)體現(xiàn)個(gè)性的板塊內(nèi)容,放置一些我比較喜歡的優(yōu)秀文章或者我覺(jué)得很有意義的小故事還有圖片供大家欣賞。(其它幾個(gè)頁(yè)面也是類(lèi)似的,只是介紹的方向不同)。擁抱陽(yáng)光:展示一些自己近期的生活照。心情動(dòng)態(tài):讓朋友能夠?qū)ξ耶?dāng)天的心情有一個(gè)直觀快捷的了解方式。留言板:設(shè)計(jì)一個(gè)留言板作為和朋友交流的紐帶,這樣能夠隨時(shí)促進(jìn)朋友之間的情感,又因?yàn)槭亲约涸O(shè)計(jì)的,比較有保密性,分享快樂(lè)和秘密的地方。4.1靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)在整體的布局已經(jīng)明確了,能夠進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)了。這是我網(wǎng)站首頁(yè)的效果,接下來(lái),我就簡(jiǎn)單演示一下這個(gè)主頁(yè)的制作過(guò)程。首先,運(yùn)行Dreamwearcs5,接著就是頁(yè)面的布局了,選擇”插入——>表格”然后根據(jù)你的需要?jiǎng)澐?選擇你所需的表格行列數(shù)。如圖:然后依次在你所劃分的位置插入你所需要的圖片等等。這樣一個(gè)簡(jiǎn)單有漂亮的網(wǎng)頁(yè)的劃分就完成了.4.2動(dòng)態(tài)頁(yè)面的制作在我的整個(gè)網(wǎng)站中,動(dòng)態(tài)頁(yè)面占了很重要的部分。首先,我根據(jù)我的個(gè)人主頁(yè)所要實(shí)現(xiàn)的功能我制作好了我的數(shù)據(jù)庫(kù),接下來(lái),我就把我設(shè)定系統(tǒng)的DSN(數(shù)據(jù)源名稱(chēng))的方法來(lái)講講。DSN是用來(lái)確定數(shù)據(jù)庫(kù)所在的位置以及數(shù)據(jù)庫(kù)的相關(guān)屬性的。使用DSN的優(yōu)點(diǎn)是,如果我要移動(dòng)數(shù)據(jù)庫(kù)檔案的位置或是使用其它類(lèi)型的數(shù)據(jù)庫(kù)的時(shí)候,我只要重新設(shè)定DSN即可,不需要去修改原來(lái)使用的程序。下面,我就演示我在自己的電腦上配置DSN的過(guò)程:1.啟動(dòng)控制面板,雙擊”管理工具”下的”數(shù)據(jù)源(ODBC)”,如圖所示:2.在打開(kāi)的”數(shù)據(jù)源(ODBC)”對(duì)話框中選擇”系統(tǒng)DSN”標(biāo)簽,然后單擊”添加”按鈕,如圖:3.在彈出的”創(chuàng)立新數(shù)據(jù)源”對(duì)話框中,選擇數(shù)據(jù)庫(kù)的驅(qū)動(dòng)程序?yàn)椤盡icrosoftAccessDriver(*.mdb)”,然后單擊”完成”按鈕,如圖:4.在出現(xiàn)的”O(jiān)DBCMicrosoftAccess安裝”對(duì)話框,在”數(shù)據(jù)源名”文本框中輸入我的這個(gè)網(wǎng)站的數(shù)據(jù)庫(kù)的名稱(chēng):myworld,單擊”數(shù)據(jù)庫(kù)”欄中的”選擇”按鈕選擇我的這個(gè)網(wǎng)站根目錄中我已經(jīng)建好的數(shù)據(jù)庫(kù)myworld.mdb,然后單擊”確定”按鈕,如圖:5.這時(shí),我發(fā)現(xiàn)系統(tǒng)數(shù)據(jù)源名稱(chēng)中已經(jīng)多了一個(gè)”myworld.mdb”,這就是我的網(wǎng)站要使用的數(shù)據(jù)庫(kù)。單擊”確定”按鈕,這樣,我就完成了數(shù)據(jù)源的創(chuàng)立過(guò)程。如圖:弄好這些后,打開(kāi)dreamwear,將數(shù)據(jù)庫(kù)與網(wǎng)頁(yè)進(jìn)行連接。打開(kāi)數(shù)據(jù)庫(kù),連接好數(shù)據(jù)庫(kù),并將數(shù)據(jù)庫(kù)中的內(nèi)容分別拽入到表格中的適當(dāng)位置,這樣,數(shù)據(jù)庫(kù)中的內(nèi)容就顯示在里面了。4.3鏈接頁(yè)面的制作鏈接的概念:鏈接也稱(chēng)超級(jí)鏈接,是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系,所指向的目標(biāo)能夠是另一個(gè)網(wǎng)頁(yè),也能夠是相同網(wǎng)頁(yè)上的不同位置,還能夠是圖片、電子郵件地址、文件、甚至是應(yīng)用程序。能夠分為文字,影像,郵件,文件下載這幾種鏈接。在網(wǎng)頁(yè)中,單擊了某些圖片、有下劃線或有明示鏈接的文字就會(huì)跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁(yè)中去。1、在網(wǎng)頁(yè)中選中要做超級(jí)鏈接的文字或者圖片。2、在屬性面板中單擊黃色文件夾圖標(biāo),在彈出的對(duì)話框里選中相應(yīng)的網(wǎng)頁(yè)文件就完成了。做好超級(jí)鏈接屬性面板出現(xiàn)鏈接文件顯示。3、按F12預(yù)覽網(wǎng)頁(yè)。在瀏覽器里光標(biāo)移到超級(jí)鏈接的地方就會(huì)變成手型4.4其它頁(yè)面的建立一樣的,根據(jù)首頁(yè)的制作方式來(lái)制作其它頁(yè)面,這里我們要特別注意的就是制作網(wǎng)站的四個(gè)基本原則:對(duì)齊、親密性、重復(fù)性和對(duì)比。對(duì)齊就是指頁(yè)面上的元素相互之間對(duì)齊。親密性原則就是指元素相互靠近,放置在領(lǐng)進(jìn)位置上時(shí)所建立起來(lái)的關(guān)系。重復(fù)的概念就是指,在整個(gè)項(xiàng)目中重復(fù)某些元素,從而將所有分離的部分聯(lián)系在一起。網(wǎng)站整個(gè)看上去要體現(xiàn)統(tǒng)一性,體現(xiàn)出相同的理念。對(duì)比能夠把你的目光吸引到頁(yè)面上,讓你為之注目。使元素形成對(duì)比能夠吸引人的視線瀏覽頁(yè)面,并建立一個(gè)信息層次體系,讓你能夠查閱眾多信息并從中挑出你真正需要的信息。4.5數(shù)據(jù)庫(kù)的設(shè)計(jì)本設(shè)計(jì)是采用ASP結(jié)合Access數(shù)據(jù)庫(kù)平臺(tái)的一個(gè)個(gè)人網(wǎng)站。網(wǎng)站開(kāi)發(fā)的性能要求是實(shí)現(xiàn)網(wǎng)站的智能化。本設(shè)計(jì)能實(shí)現(xiàn)以下功能:心情版塊的增、刪、改和留言板的實(shí)現(xiàn)及一些靜態(tài)網(wǎng)頁(yè)的瀏覽。網(wǎng)站的數(shù)據(jù)庫(kù)建設(shè)在這個(gè)網(wǎng)站的設(shè)計(jì)過(guò)程中占有非常重要的位置。其中,我們應(yīng)該要考慮到的問(wèn)題有:系統(tǒng)管理員:系統(tǒng)管理員具有對(duì)整個(gè)網(wǎng)站發(fā)布,數(shù)據(jù)庫(kù)的管理,信息管理,人員管理的最高權(quán)限。包括心情的增、刪、改,留言的回復(fù)、刪除。以上的功能只能是管理員才有權(quán)限操作。瀏覽者:信息的最終瀏覽者,她們是不具有任何權(quán)限的普通用戶(hù)。在設(shè)計(jì)數(shù)據(jù)庫(kù)過(guò)程中,必須考慮到各種信息存放,更新。因此數(shù)據(jù)庫(kù)必須能最大限度的滿(mǎn)足各種信息的輸入輸出。以下為后臺(tái)數(shù)據(jù)庫(kù)的各表的結(jié)構(gòu)和字段的分析。Admin(系統(tǒng)管理員)表:心情版塊的管理表:內(nèi)容管理表:留言管理表:5.系統(tǒng)實(shí)現(xiàn)一個(gè)好的網(wǎng)站建設(shè)好了之后是不能立即發(fā)布的,因?yàn)橛捎谠诔绦蜷_(kāi)發(fā)和頁(yè)面制作的過(guò)程中難免會(huì)出現(xiàn)誤差,因此在正式發(fā)布前經(jīng)過(guò)測(cè)試找出網(wǎng)頁(yè)中的漏洞是非常重要的一個(gè)環(huán)節(jié)。在這之前需要進(jìn)行一段時(shí)間的測(cè)試。為什么測(cè)試顯得這么重要呢?沒(méi)有經(jīng)過(guò)測(cè)試的頁(yè)面會(huì)出現(xiàn)那些問(wèn)題呢?下面將從幾個(gè)不在IIS服務(wù)器未改變”默認(rèn)網(wǎng)站”默認(rèn)路徑的前提下,執(zhí)行第二步。在IE地址欄里輸入http://localhost/qiqi/qiqi/,就能訪問(wèn)系統(tǒng)的前臺(tái)首頁(yè)面。測(cè)試的項(xiàng)目。我主要就如下幾個(gè)方面進(jìn)行探討:性能測(cè)試,安全性測(cè)試,穩(wěn)定性測(cè)試,瀏覽器兼容性測(cè)試,可用性/易用性測(cè)試,鏈接測(cè)試,代碼合法性測(cè)試。在我的個(gè)人網(wǎng)站的測(cè)試過(guò)程中,在數(shù)據(jù)庫(kù)的鏈接,還有圖片的相對(duì)位置都出現(xiàn)了很多的錯(cuò)誤,還好,經(jīng)過(guò)我自己的修改,現(xiàn)在已基本消除了這種現(xiàn)象。這是在地址欄中輸入http://localhost/qiqi/qiqi/跳出來(lái)的頁(yè)面。6.結(jié)束語(yǔ)兩個(gè)多月的畢業(yè)設(shè)計(jì)已告一段落,到此,我制作的個(gè)人網(wǎng)站已經(jīng)基本完成。但由于畢業(yè)設(shè)計(jì)時(shí)間較短,本人的能力有限,導(dǎo)致于我無(wú)法讓我的數(shù)據(jù)庫(kù)和網(wǎng)站進(jìn)行正確的相聯(lián)接,這個(gè)系統(tǒng)還有許多不足的地方。這些都有待于進(jìn)一步改進(jìn)。