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

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

留言板設(shè)計(jì)數(shù)據(jù)庫建立網(wǎng)站用到的后臺(tái)文件文件名作用與功能備注登陸后臺(tái)首頁管理文章后臺(tái)刪除功能后臺(tái)發(fā)布功能后臺(tái)數(shù)據(jù)庫文件后臺(tái)心情管理后臺(tái)后臺(tái)認(rèn)證：只允許瀏覽者進(jìn)入頁面瀏覽，在對(duì)回復(fù)留言和新聞的增加、刪除這些管理時(shí)都需要對(duì)用戶的身份進(jìn)行認(rèn)證，即需要管理員提供后臺(tái)管理的用戶名和密碼，該用戶名和密碼保存在相對(duì)應(yīng)的數(shù)據(jù)庫中。

4.詳細(xì)設(shè)計(jì)首先網(wǎng)站的策劃，因?yàn)槲抑谱鞯氖莻€(gè)人的網(wǎng)站，所以面對(duì)的對(duì)象是自己周圍熟悉的同學(xué)朋友，主題和內(nèi)容就是自己日常生活瑣事，還有跟好朋友有個(gè)交流溝通的平臺(tá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ì)的：快樂世界：是一個(gè)體現(xiàn)個(gè)性的板塊內(nèi)容，放置一些我比較喜歡的優(yōu)秀文章或者我覺得很有意義的小故事還有圖片供大家欣賞。（其他幾個(gè)頁面也是類似的，只是介紹的方向不同）。擁抱陽光：展示一些自己近期的生活照。心情動(dòng)態(tài)：讓朋友可以對(duì)我當(dāng)天的心情有一個(gè)直觀快捷的了解方式。留言板：設(shè)計(jì)一個(gè)留言板作為和朋友交流的紐帶，這樣可以隨時(shí)促進(jìn)朋友之間的情感，又因?yàn)槭亲约涸O(shè)計(jì)的，比較有保密性，分享快樂和秘密的地方。靜態(tài)網(wǎng)頁設(shè)計(jì)現(xiàn)在整體的布局已經(jīng)明確了，可以進(jìn)行網(wǎng)頁的設(shè)計(jì)了。mil-融mil-融IT*甜虱I原甲的豐山令壬去姿樂了.罠車面站相甘的iffltf,?再也T=S國(guó)?壯癢的〒假這是我網(wǎng)站首頁的效果，接下來，我就簡(jiǎn)單演示一下這個(gè)主頁的制作過程。首先，運(yùn)行Dreamwearcs5,接著就是頁面的布局了，選擇“插入表格”然后根據(jù)你的需要?jiǎng)澐?，選擇你所需的表格行列數(shù)。如圖：

然后依次在你所劃分的位置插入你所需要的圖片等等。這樣一個(gè)簡(jiǎn)單有漂亮的網(wǎng)頁的劃分就完成了.動(dòng)態(tài)頁面的制作在我的整個(gè)網(wǎng)站中，動(dòng)態(tài)頁面占了很重要的部分。首先，我根據(jù)我的個(gè)人主頁所要實(shí)現(xiàn)的功能我制作好了我的數(shù)據(jù)庫，接下來，我就把我設(shè)定系統(tǒng)的DSN（數(shù)據(jù)源名稱）的方法來講講。DSN是用來確定數(shù)據(jù)庫所在的位置以及數(shù)據(jù)庫的相關(guān)屬性的。使用DSN的優(yōu)點(diǎn)是，如果我要移動(dòng)數(shù)據(jù)庫檔案的位置或是使用其他類型的數(shù)據(jù)庫的時(shí)候，我只要重新設(shè)定DSN即可，不需要去修改原來使用的程序。下面，我就演示我在自己的電腦上配置DSN的過程：?jiǎn)?dòng)控制面板，雙擊“管理工具”下的“數(shù)據(jù)源（ODBC）”，如圖所示：■曇計(jì)算管理200^/7/1412:412KB300^/7/1412:422KE扛|事件查著器200^/7/1412:422KB200&/7/1412:412KE粵.訣配置200劉7/1412:412KE2009/7/1412:412KB命那服務(wù)2TO/7/1412;462KB在打開的“數(shù)據(jù)源（ODBC）”對(duì)話框中選擇“系統(tǒng)DSN”標(biāo)簽，然后單擊添加”按鈕，如圖：TT°D取數(shù)曙瀛匪器用戶Mi系貌畫文件D即|呃動(dòng)晴跟腔蠢釘壽票統(tǒng)埶據(jù)源伯〕：票統(tǒng)埶據(jù)源伯〕：確定取消應(yīng)用如稱助在彈出的“創(chuàng)建新數(shù)據(jù)源”對(duì)話框中，選擇數(shù)據(jù)庫的驅(qū)動(dòng)程序?yàn)椤癕icrosoftAccessDriver(*.mdb)"，然后單擊“完成”按鈕，如圖:豈建新數(shù)吏源選擇您想為其安裝數(shù)據(jù)源的碾動(dòng)程陣CS)<容稱DriverDriverDriverDriverDriv容稱DriverDriverDriverDriverDriv已:rMicrvsQfAMicrvsQfAMicrvsQfAMicrvsQfA已呂s(：+：.mdbjd￡昭(*.dtf)el(：+：.兀l「：i

F*nd口不(：+：.db)P；ar且qFoxFirc?MicrosottAccessDriver.mdb)MicrusuttAcc已于刁一TTEib亡廠〔耳.miTb；iMicrusuftdB；遼亡Di'iver(:+:.dbt)/Ippp玉面1[完成][取消]在出現(xiàn)的“ODBCMicrosoftAccess安裝”對(duì)話框，在“數(shù)據(jù)源名”文本框中輸入我的這個(gè)網(wǎng)站的數(shù)據(jù)庫的名稱：myworld,單擊“數(shù)據(jù)庫”欄中的“選擇”按鈕選擇我的這個(gè)網(wǎng)站根目錄中我已經(jīng)建好的數(shù)據(jù)庫，然后單擊“確定”按鈕，如圖：用的數(shù)據(jù)庫。單擊“確定”按鈕，這樣，我就完成了數(shù)據(jù)源的創(chuàng)建過程。如圖：弄好這些后，打開dreamwear，將數(shù)據(jù)庫與網(wǎng)頁進(jìn)行連接。打開數(shù)據(jù)庫，連接好數(shù)據(jù)庫，并將數(shù)據(jù)庫中的內(nèi)容分別拽入到表格中的適當(dāng)位置，這樣，數(shù)據(jù)庫中的內(nèi)容就顯示在里面了。鏈接頁面的制作鏈接的概念：鏈接也稱超級(jí)鏈接，是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，所指向的目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片、電子郵件地址、文件、甚至是應(yīng)用程序?？梢苑譃槲淖?，影像，郵件，文件下載這幾種鏈接。在網(wǎng)頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會(huì)跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。1、在網(wǎng)頁中選中要做超級(jí)鏈接的文字或者圖片。2、在屬性面板中單擊黃色文件夾圖標(biāo)，在彈出的對(duì)話框里選中相應(yīng)的網(wǎng)頁文件就完成了。做好超級(jí)鏈接屬性面板出現(xiàn)鏈接文件顯示。3、按F12預(yù)覽網(wǎng)頁。在瀏覽器里光標(biāo)移到超級(jí)鏈接的地方就會(huì)變成手型其他頁面的建立一樣的，根據(jù)首頁的制作方式來制作其他頁面，這里我們要特別注意的就是制作網(wǎng)站的四個(gè)基本原則：對(duì)齊、親密性、重復(fù)性和對(duì)比。對(duì)齊就是指頁面上的元素相互之間對(duì)齊。親密性原則就是指元素相互靠近，放置在領(lǐng)進(jìn)位置上時(shí)所建立起來的關(guān)系。重復(fù)的概念就是指，在整個(gè)項(xiàng)目中重復(fù)某些元素，從而將所有分離的部分聯(lián)系在一起。網(wǎng)站整個(gè)看上去要體現(xiàn)統(tǒng)一性，體現(xiàn)出相同的理念。對(duì)比可以把你的目光吸引到頁面上，讓你為之注目。使元素形成對(duì)比能夠吸引人的視線瀏覽頁面，并建立一個(gè)信息層次體系，讓你能夠查閱眾多信息并從中挑出你真正需要的信息。數(shù)據(jù)庫的設(shè)計(jì)本設(shè)計(jì)是采用ASP結(jié)合Access數(shù)據(jù)庫平臺(tái)的一個(gè)個(gè)人網(wǎng)站。網(wǎng)站開發(fā)的性能要求是實(shí)現(xiàn)網(wǎng)站的智能化。本設(shè)計(jì)能實(shí)現(xiàn)以下功能：心情版塊的增、刪、改和留言板的實(shí)現(xiàn)及一些靜態(tài)網(wǎng)頁的瀏覽。網(wǎng)站的數(shù)據(jù)庫建設(shè)在這個(gè)網(wǎng)站的設(shè)計(jì)過程中占有非常重要的位置。其中，我們應(yīng)該要考慮到的問題有：系統(tǒng)管理員：系統(tǒng)管理員具有對(duì)整個(gè)網(wǎng)站發(fā)布，數(shù)據(jù)庫的管理，信息管理，人員管理的最高權(quán)限。包括心情的增、刪、改，留言的回復(fù)、刪除。以上的功能只能是管理員才有權(quán)限操作。瀏覽者：信息的最終瀏覽者，他們是不具有任何權(quán)限的普通用戶。在設(shè)計(jì)數(shù)據(jù)庫過程中，必須考慮到各種信息存放，更新。所以數(shù)據(jù)庫必須能最大限度的滿足各種信息的輸入輸出。以下為后臺(tái)數(shù)據(jù)庫的各表的結(jié)構(gòu)和字段的分析。Admin（系統(tǒng)管理員）表：Iadm-in;表宇段名稱數(shù)據(jù)類型":i-ijTiin_i-i自動(dòng)堀號(hào)自動(dòng)生成編號(hào):kiiiTiinn=dJTi&文本管理員的姓営:iiijTiirLjiiEEWijfii文未管理員的甕碼pisesiit埶寶頁碼tud：iWCijUIlI保存當(dāng)曰登錄埶重tudaytim?曰期/時(shí)間詡當(dāng)曰登錄的時(shí)囘關(guān)創(chuàng)立時(shí)間sqtup_timy曰期/時(shí)間心情版塊的管理表：口day;表字段営稱勘據(jù)糞型hiid自動(dòng)編號(hào)自動(dòng)生成漏號(hào)帀d_-i：=Lt總曰期丿時(shí)間存啟半曰曰期dcorLtent備逹存敝心情內(nèi)容內(nèi)容管理表：

Jart:寶段茗稱勘據(jù)堂型9art_id自動(dòng)編號(hào)自動(dòng)生成編號(hào)arttitk存領(lǐng)文章的標(biāo)題art_d鼻te日期/時(shí)間存啟文章的上倍時(shí)間art_|二口骯保存文章的內(nèi)容3Tt_k&J"i,i,ui-il存損文章的蕓謹(jǐn)字|#|留言管理表：■Hword:表宇段名稱丨勘據(jù)類型Iw_nam已emailvrjirl*?_content■A^tiTiew_nam已emailvrjirl*?_content■A^tiTie*?.注■匚on+ctl'hatime自動(dòng)蝙號(hào)文本間

寸

nH自動(dòng)生成編號(hào)存頷留言者的姓容存故留言者的由P箱存敢留言者的網(wǎng)址保存留言時(shí)間存敖管理員回夏留言的內(nèi)容保存管理員回復(fù)的時(shí)間5.系統(tǒng)實(shí)現(xiàn)一個(gè)好的網(wǎng)站建設(shè)好了之后是不能立即發(fā)布的，因?yàn)橛捎谠诔绦蜷_發(fā)和頁面制作的過程中難免會(huì)出現(xiàn)誤差，所以在正式發(fā)布前通過測(cè)試找出網(wǎng)頁中的漏洞是非常重要的一個(gè)環(huán)節(jié)。在這之前需要進(jìn)行一段時(shí)間的測(cè)試。1．為什么測(cè)試顯得這么重要呢沒有經(jīng)過測(cè)試的頁面會(huì)出現(xiàn)那些問題呢下面將從幾個(gè)不在IIS服務(wù)器未改變“默認(rèn)網(wǎng)站”默認(rèn)路徑的前提下，執(zhí)行第二步。2．在IE地址欄里輸入，就能訪問系統(tǒng)的前臺(tái)首頁面。3．測(cè)試的項(xiàng)目。我主要就如下幾個(gè)方面進(jìn)行探討：性能測(cè)試，安全性測(cè)試，穩(wěn)定性測(cè)試，瀏覽器兼容性測(cè)試，可用性/易用性測(cè)試，鏈接測(cè)試，代碼合法性測(cè)試。在我的個(gè)人網(wǎng)站的測(cè)試過程中，在數(shù)據(jù)庫的鏈接，還有圖片的相對(duì)位置都出現(xiàn)了很多的錯(cuò)誤，還好，經(jīng)過我自己的修改，現(xiàn)在已基本消除了這種現(xiàn)象。

這是在地址欄中輸入結(jié)束語兩個(gè)多月的畢業(yè)設(shè)計(jì)已告一段落，到此，我制作的個(gè)人網(wǎng)站已經(jīng)基本完成。但由于畢業(yè)設(shè)計(jì)時(shí)間較短，本人的能力有限，導(dǎo)致于我無法讓我的數(shù)據(jù)庫和網(wǎng)站進(jìn)行正確的相聯(lián)接，這個(gè)系