個人網(wǎng)站的設(shè)計與實現(xiàn) 蘇州技師學(xué)院信息工程系2012屆畢業(yè)設(shè)計論文

PAGEPAGE25蘇州技師學(xué)院2012屆畢業(yè)設(shè)計（論文）個人網(wǎng)站的設(shè)計與實現(xiàn)院（系）信息工程系專業(yè)高級計算機網(wǎng)絡(luò)技術(shù)班級信息0706班姓名周軍指導(dǎo)教師華康起迄日期3月1日～6月10日摘要：這幾年，許多新名詞涌入我們的視野：博客、圈子、播客、WAP等。這些都預(yù)示著我們進入了一個新的互聯(lián)網(wǎng)階段web2.0，它是相對web1.0的新的一類互聯(lián)網(wǎng)應(yīng)用的總稱，是一次從核心內(nèi)容到外部應(yīng)用的革命[10]。這個階段發(fā)展迅速，互聯(lián)網(wǎng)應(yīng)用趨于多樣化，其中變化最大的是由web1.0網(wǎng)站創(chuàng)造內(nèi)容的時代變?yōu)橛捎脩魟?chuàng)造內(nèi)容的web2.0時代。在web2.0應(yīng)用中，博客(Blog)是web2.0核心應(yīng)用中最典型、最流行的代表之一，也是web2.0技術(shù)應(yīng)用的最直觀的表現(xiàn)，是web2.0精神和理念的具體體現(xiàn)。Abstract:These

years,manynewwordscomeintoourvision:blogs,podcasts,WAPcircleandsoon.AlltheseareasignthatwehadenterintoanewInternet--web2.0.Comparedwithweb1.0,itisanewstageofthe

Internetandtherevolutionfromcorecontent

toexternalapplications.Withthedevelopment

inthistime,

theapplicationsof

Internet

tenddiversification,thebiggestdifferentisthechangefromthecreationofweb1.0tocreationofuser.Inweb2.0applications,theBlogisthemosttypicalandrepresentiveone.Itisalsotheperformanceofspiritand

ideaof

web2.0.

目錄第一章緒論………...41.1需求分析 4市場分析 4商業(yè)分析 51.2個人網(wǎng)站應(yīng)該如何發(fā)展 51.2.1定位內(nèi)容 5定位服務(wù)群體 5定位發(fā)展方向和策略 51.3設(shè)計背景 61.4設(shè)計概況 7第二章網(wǎng)站設(shè)計 72.1風格和創(chuàng)意設(shè)計 7風格 8創(chuàng)意 8第三章網(wǎng)站主頁 93.1個人主頁設(shè)計與要點 9簡潔性 9一致性 9對比性 9色彩均衡性 103.2個人相冊功能 10相冊風格及思維 11相片修改技巧 11設(shè)計前的準備工作 113.3留言板功能 123.3.1個人體悟 13留言板代碼 14第四章網(wǎng)站設(shè)計難點 154.1用戶注冊功能 1541.1用戶注冊模塊代碼 174.2用戶登錄功能 19用戶登錄模塊代碼 19第五章設(shè)計總結(jié) 21參考文獻…………22致謝 ………………22緒論1.1需求分析隨著互聯(lián)網(wǎng)的高速發(fā)展和web2.0時代的到來，越來越多的網(wǎng)站如雨后春筍般涌現(xiàn)出來。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)表的權(quán)威報告顯示，截至09年6月底，我國網(wǎng)站數(shù)達到287.8萬個。網(wǎng)站數(shù)量的劇增，導(dǎo)致競爭的加劇。于是越來越多的，尤其是個人，開始對網(wǎng)站的發(fā)展前景表示擔憂。甚至有人斷言，個人網(wǎng)站的時代已經(jīng)過去。1.1.1市場分析雖然我國網(wǎng)站在數(shù)量上已經(jīng)達到百萬規(guī)模，但并不表明我國網(wǎng)站行業(yè)的市場已經(jīng)完全飽和。根據(jù)前述的權(quán)威報告顯示，截至09年6月底，我國網(wǎng)民數(shù)達到3.38億，網(wǎng)絡(luò)普及率25.5%。這個數(shù)據(jù)說明了兩個問題。第一個，我國的網(wǎng)民數(shù)量是非常龐大的。第二個，我國的網(wǎng)民數(shù)量增長潛力還是很大的。那么，個人網(wǎng)站的發(fā)展空間也肯定是有的。1.1.2商業(yè)分析個人網(wǎng)站與商業(yè)網(wǎng)站相比并沒有絕對的優(yōu)勢與劣勢。商業(yè)網(wǎng)站的優(yōu)勢在于資金的充足可以為其帶來更廣泛的宣傳與推廣，人力的充足可以給其帶來更大的數(shù)據(jù)和信息量，以及技術(shù)上的優(yōu)勢可以為其帶來更先進的功能。但這些，并不是一個網(wǎng)站最核心的價值。網(wǎng)站最核心的價值在于給網(wǎng)民帶來最有價值的信息或服務(wù)。但沒有哪一個網(wǎng)站敢于承認我所有的服務(wù)、信息、功能都會得到所有網(wǎng)民的青睞。正所謂眾口難調(diào)。那么，這就給個人網(wǎng)站帶來了空間。個人網(wǎng)站的優(yōu)勢在于小成本運營，不需要耗費大量資金去請人力、物力。這樣，個人網(wǎng)站就擺脫了投入與回報問題的困擾。只需要用心做出自己的特色就行了。而由于中國網(wǎng)民的龐大，不同網(wǎng)民又有不同的喜好與要求，那么一個有特色的個人網(wǎng)站也肯定能夠從這龐大的網(wǎng)民群體分一杯羹。而由于個人網(wǎng)站基本可以忽略成本的問題，那么只要個人網(wǎng)站能從中爭取一小部分市場，哪怕是個小蝦米，獲得的收益也是非?？捎^的。1.2個人網(wǎng)站應(yīng)該如何發(fā)展1.2.1定位內(nèi)容應(yīng)該做好定位。由于個人網(wǎng)站在資金、技術(shù)、人力等方面的不足，個人網(wǎng)站一定要避免去與大型的商業(yè)網(wǎng)站競爭。而要從自身的優(yōu)勢、長處出發(fā)，做出自己的特色。為一小部分特定的人群帶去最有價值的服務(wù)和信息。這是大型的商業(yè)網(wǎng)站所不能觸及到的。因此，個人網(wǎng)站的定位應(yīng)突出小而精、要有自己的特色，要保證網(wǎng)站內(nèi)容的質(zhì)量。1.2.2定位服務(wù)群體應(yīng)定位好網(wǎng)站服務(wù)群體。要分析你的網(wǎng)站主要是給哪一群體提供信息和服務(wù)。會得到哪一群體的歡迎的青睞。這些群體分布在哪里，通常在哪些地方或網(wǎng)絡(luò)聚集。最有做好這樣的定位，才能做出相應(yīng)的推廣方案。1.2.3定位發(fā)展方向和策略要規(guī)劃好網(wǎng)站的發(fā)展方向和策略。你的網(wǎng)站現(xiàn)在是什么樣子，服務(wù)群體是誰，下一步會是什么樣子，服務(wù)群體是誰。第一步是爭取那部分人群，下一步是爭取哪部分人群。我認為，一個新的小站的比較合理的發(fā)展策略應(yīng)該是先爭取那部分新誕生的網(wǎng)民，然后再去爭取那些老網(wǎng)民，同其他同類網(wǎng)站競爭。據(jù)統(tǒng)計，我國每年新誕生的網(wǎng)民接近一億。所以，如果能在這些新網(wǎng)民中爭取一部分市場對網(wǎng)站的發(fā)展則是非常有利的。而且新網(wǎng)民對網(wǎng)絡(luò)更有新鮮感，如果你能在第一時間向這些新網(wǎng)民呈現(xiàn)你的網(wǎng)站，那么很可能他以后上網(wǎng)就會認準你的站。就像百度作為中國最早的中文搜索引擎，其市場地位一直難以被技術(shù)資金方面都有絕對優(yōu)勢的google取代。我覺得，重要的原因就在于他在第一時間搶占了最新的搜索市場。1.3設(shè)計背景網(wǎng)站設(shè)計是一門新興的邊緣性職業(yè)，如今全球信息技術(shù)和互聯(lián)網(wǎng)經(jīng)濟的高速發(fā)展，使網(wǎng)站設(shè)計同其他諸如動畫設(shè)計，程序開發(fā)，電子商務(wù)等等一系列職業(yè)一樣應(yīng)運而生。網(wǎng)站如同一個門面，從個人主頁，公司企業(yè)，政府部門以致國際組織等等，無不將網(wǎng)站作為自己向外界展示形象，傳達信息的窗口。正是互聯(lián)網(wǎng)為信息交換提供了廣泛的平臺，對這種新興的信息傳播介質(zhì)感興趣的人們也越來越多，無以數(shù)計的網(wǎng)站的出現(xiàn)，豐富了這個世界和人們的生活。各種類型的網(wǎng)站如個人網(wǎng)站，企業(yè)網(wǎng)站，娛樂網(wǎng)站，門戶網(wǎng)站的誕生如雨后春筍。越來越多的人們志興于網(wǎng)站設(shè)計，互連網(wǎng)絡(luò)上各類網(wǎng)站就是由這些專業(yè)的，或者不專業(yè)的，職業(yè)的，或者愛好的網(wǎng)頁設(shè)計人員進行開發(fā)設(shè)計，然而畢竟林子長成了森林，里面鳥也多了起來，良莠不齊的設(shè)計人員所做出的作品也是魚龍混雜。隨著軟件業(yè)尤其是繪圖的應(yīng)用軟件以及網(wǎng)頁設(shè)計的軟件的不斷升級，使用起來愈加方便。打個比方：原來的網(wǎng)頁全是如同文本編輯一樣，圖片的定位就相當困難，往往要求助于表格，很多時候就要表格加表格，表格里插表格，這就需要熟練的掌握表格的應(yīng)用。而且還很難達到目標，有時不得不更改一些自己的目標。這有時是牽一發(fā)而動全身的。現(xiàn)在呢？在Dreamweaver和Frontpage2000出現(xiàn)后，采用了高級的Dhtml技術(shù)以層的形式和定位功能將這個問題輕松的解決了。個人網(wǎng)站致力于為廣大用戶提供優(yōu)質(zhì)的互動交流平臺,提高網(wǎng)站的知名度和訪問量，從而獲得為個人網(wǎng)站提供更多展示的機會，提升自己網(wǎng)站的價值。為了滿足網(wǎng)站信息管理系統(tǒng)的要求，實現(xiàn)系統(tǒng)靜態(tài)與動態(tài)頁面的相互分離。論文首先論述了系統(tǒng)的開發(fā)背景和設(shè)計目標，并對系統(tǒng)開發(fā)所采用的技術(shù)進行相應(yīng)的簡單介紹。在系統(tǒng)分析中，對系統(tǒng)的模型進行簡單分析，明確系統(tǒng)的操作流程，并對系統(tǒng)進行可行性分析，確定在目前的條件下，開發(fā)網(wǎng)站信息管理系統(tǒng)是可行的。在需求分析結(jié)果的基礎(chǔ)上，對系統(tǒng)的功能模塊進行劃分。接著對系統(tǒng)中的數(shù)據(jù)庫進行模型設(shè)計，包括數(shù)據(jù)流圖、實體聯(lián)系圖及數(shù)據(jù)表結(jié)構(gòu)。在系統(tǒng)的設(shè)計與實現(xiàn)中，確定系統(tǒng)的開發(fā)思想以及開發(fā)環(huán)境，并對系統(tǒng)中的JavaBean和Servlet代碼進行設(shè)計。最后給出了系統(tǒng)中模塊的詳細設(shè)計與實現(xiàn)，并對系統(tǒng)模塊涉及到的關(guān)鍵源代碼進行了詳細的分析。經(jīng)過調(diào)試運行后表明，系統(tǒng)可以滿足用戶創(chuàng)建個人網(wǎng)站的各項要求。1.4設(shè)計概況隨著網(wǎng)民數(shù)量的飛速增長，個人主頁網(wǎng)站也在快速的增加。目前各大網(wǎng)站都相繼推出了博客頻道，把個人網(wǎng)站推向了高潮。個人網(wǎng)站作為一種新的表達方式，它傳播大量的智慧、意見和思想。從某種意義上說，它也是一種新的文化的象征，個人網(wǎng)站的出現(xiàn)和繁榮，真正體現(xiàn)了網(wǎng)絡(luò)的知識價值，標志著互聯(lián)網(wǎng)發(fā)展邁向更高的階段。本學(xué)期學(xué)的web數(shù)據(jù)庫原理，正是數(shù)據(jù)庫和web網(wǎng)站技術(shù)的結(jié)合使用。本課題為Web應(yīng)用的管理系統(tǒng)，目的在于可以讓用戶更方便、快捷的發(fā)布信息，實現(xiàn)便利、人性化的信息交流平臺，運用Access數(shù)據(jù)庫和Dreamweaver8.0開發(fā)平臺。DreamweaverV8.0提供了一種基于組件的、可擴展的且易于使用的方法，用于構(gòu)建、部署和運行供所有在瀏覽器或移動設(shè)備中使用web應(yīng)用。Dreamweaver8.0繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實用的網(wǎng)頁。Access它具有界面友好、易學(xué)易用、開發(fā)簡單、接口靈活等特點，是典型的新一代桌面數(shù)據(jù)庫管理系統(tǒng)。其個人主頁包括用戶的登錄、注冊和個人日志、相冊、留言板一共五個模塊。第二章網(wǎng)站設(shè)計2.1風格和創(chuàng)意設(shè)計網(wǎng)站的整體風格及其創(chuàng)意設(shè)計是站長們最希望掌握，也是最難以學(xué)習的。難就難在沒有一個固定的程式可以參照和模仿。給你一個主題，任何兩人都不可能設(shè)計出完全一樣的網(wǎng)站。當我們說："這個站點很cool，很有個性！"那么，是什么讓你覺得很cool呢？它到底和一般的網(wǎng)站有什么區(qū)別呢？本文試圖用最簡明的語言來說明：1.風格是什么，如何樹立網(wǎng)站風格？2.創(chuàng)意是什么，如何產(chǎn)生創(chuàng)意？2.1.1風格抽象是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志，色彩，字體，標語），版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價值，存在意義，站點榮譽等等諸多因素。舉個例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴肅的。這些都是網(wǎng)站給人們留下的不同感受。風格是獨特的，是站點不同與其他網(wǎng)站的地方?；蛘呱?，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨有的。風格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個站點的個性，情緒。是溫文儒雅，是執(zhí)著熱情，是活潑易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”，你可以用人的性格來比喻站點。有風格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風格的網(wǎng)站后你能有更深一層的感性認識，比如站點有品位，和藹可親，是老師，是朋友。如何樹立網(wǎng)站風格呢？我們可以分這樣幾個步驟：第一，確定本論文風格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內(nèi)容的質(zhì)量和價值性。這是最基本的，無須置疑。第二，你需要徹底搞清楚自己希望站點給人的印象是什么。第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。風格的形成不是一次定位的，你可以在實踐中不斷強化，調(diào)整，修飾，直到有一天，網(wǎng)友們寫信告訴你："我喜歡你的站點，因為它很有風格！2.1.2創(chuàng)意創(chuàng)意是網(wǎng)站生存的關(guān)鍵。這一點相信大家都已經(jīng)認同。創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？創(chuàng)意是引人入勝，精彩萬分，出奇不意的；創(chuàng)意是捕捉出來的點子，是創(chuàng)作出來的奇招這些講法都說出了創(chuàng)意的一些特點，實質(zhì)上，創(chuàng)意是傳達信息的一種特別方式。比如Webdesigner(網(wǎng)頁設(shè)計師)，我們將其中的E字母大寫一下:wEbdEsigEr，感覺怎么樣，這其實就是一種創(chuàng)意！創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美國廣告學(xué)教授詹姆斯的研究，創(chuàng)意思考的過程分五階段：1.準備期--研究所搜集的資料，根據(jù)舊經(jīng)驗，啟發(fā)新創(chuàng)意；2.孵化期--將資料咀嚼消化，使意識自由發(fā)展，任意結(jié)合；3.啟示期--意識發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；4.驗證期--將產(chǎn)生的創(chuàng)意討論修正；5.形成期--設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。網(wǎng)站主要實現(xiàn)功能個人網(wǎng)站是一個集計算機網(wǎng)絡(luò)技術(shù)、多項信息辦公自動化等功能于一體的交流平臺，系統(tǒng)的主要功能實現(xiàn)如下表所示：數(shù)據(jù)流程圖該圖是從用戶的角度開始的，瀏覽用戶可以更好的瀏覽個人網(wǎng)站的信息。個人網(wǎng)站包括：管理系統(tǒng)模塊包括：注冊模塊包括：登陸模塊包括：數(shù)據(jù)庫設(shè)計1．用戶信息表：2．留言板管理員信息表：3.留言板用戶信息表：第三章網(wǎng)站主頁3.1個人主頁設(shè)計與要點新建動態(tài)ASP網(wǎng)頁shgy.asp，在設(shè)計視圖中，插入表格，在“屬性”面板中“背景圖像”選擇所需要的背景圖片。在單元格中輸入標題、內(nèi)容，在屬性中選擇超鏈接，選擇所要顯示文章的具體位置。3.1.1簡潔性從人記憶能力角度來說，由于人的大腦一次最多可記憶五到七條信息，因此如果希望人們在看完你的頁面后能留下印象，最好也應(yīng)該用一個簡單的關(guān)鍵詞語或圖像吸引他們的注意力。給用戶在需要的頁面空間上留白，就像大畫家的畫作留白是恰到好處的那樣，不是整個頁面充斥著信息、圖片就是好的；懂得通過留白來塑造簡潔。3.1.2一致性對于一個人的個人主頁來說，它的各個頁面要求是一致的。這個一致反映在功能導(dǎo)航、元素設(shè)計、顏色、字體、顏色字體對比等方面的。一個模版表達一種風格，用戶選擇這種模版，其實是用戶個性的反映；他希望通過模版來反映自己的特性，在以后的“人際交流”中可以明顯地識別自己和找到自己的同好。一致性還體現(xiàn)在和網(wǎng)站整體風格的趨同性上，不是簡單的顏色統(tǒng)一，因為用戶需要不同的背景色來映襯自己，而是設(shè)計原則上的一致。3.1.3對比性為什么有些網(wǎng)頁，看起來內(nèi)容很多，但是給人的感覺還是簡潔的呢？這就是因為網(wǎng)頁設(shè)計時注重到了對比性，它是需要表現(xiàn)的內(nèi)容多和間接性要求的調(diào)和者。簡單來說，注意網(wǎng)頁上導(dǎo)航和內(nèi)容，不同位置的字體，不同地段的留白，顏色的突出和淡化等，是對比性必須注意的地方。我覺得校內(nèi)網(wǎng)的個人首頁在對比性上做的比較好，它既滿足了學(xué)生們對于自身所有信息的直白關(guān)注又做好了簡潔，對比是做了很大的貢獻的。3.1.4色彩均衡性其實色彩是包含在前面三個屬性中的，但是它是對用戶視覺沖擊力最大，最能影響用戶喜歡意愿度的一個元素。要想你的網(wǎng)站吸引人，一個色彩敏感而能夠把握用戶體驗的美工是必須的。一般每頁使用的字體不超過三種，一個頁面中使用的顏色少于256種。除了注意和學(xué)習一般的顏色沖突外，可以多多借鑒國外網(wǎng)站的顏色搭配和布局。圖4-1個人主頁主界面3.2個人相冊功能登錄成功后，頁面跳轉(zhuǎn)到個人主頁界面。在主頁上顯示個人日志和相冊的框架，點擊個人相冊即可進入個人相冊界面。點擊圖片即通過鏈接會顯示Flash相冊，可一頁頁翻動圖片，使相冊逼真動人。個人相冊是一個展現(xiàn)自我和體現(xiàn)個人網(wǎng)站設(shè)計水平的一個重要部分，所以我們在設(shè)計個人相冊時可不能馬馬虎虎隨便設(shè)計。3.2.1相冊風格及思維3風格先仔細看看照片毛片小樣，理解照片的風格及攝影師拍攝主題或想法，邊看邊構(gòu)思設(shè)計思路。根據(jù)設(shè)計風格及相冊設(shè)計標準，先設(shè)計自己固定或擅長的模版和手法，先易后難。如先去運用手法(跨頁設(shè)計、融合版面、立體效果版面、主題、黑白變調(diào)、粗顆粒、水彩、素描效果、色塊、線條、文字的運用最后準備套版或準備2-3個版面進行創(chuàng)意設(shè)計或綜合目錄等手法，滿足美工張數(shù)與P數(shù)的平衡。)對于以上手法要能熟練運用，舉一反三的效果，及手法運用，及效果的選片技巧(平時積累。)要會靈活運用照片本身的設(shè)計元素和主題，多變多嘗試。3照片虛化的處理1．把照片做小。2．把照片做大，進行淡化、虛化，做為背景。再重復(fù)做一張小照片，做成虛實的對比，增強視覺效果。3.以效果的形式呈現(xiàn)，如粗顆粒、水彩、油畫、素描等，通過效果轉(zhuǎn)移對比照片的視線。4．運用工具欄里的銳化工具適當調(diào)整像素大小銳化。3.2.2相片修改技巧把修片難度大的照片盡量做小，減少修片量與修片的效果真實性。穿幫部位基本分部為：女：1.胸部穿幫；2.頭上發(fā)夾；3.腰或背面的大別針、夾子、紗破損、美目貼脫落、背景臟等方面；男：1.拉鏈；2.頭發(fā)中露出頭皮；3.其他為非主題拍入。修片方法：修片使用工具一般如運用圖章修片要求不透明度設(shè)定在百分之30-90均可，或用修補工具等多種手法，視個人習慣而定，一般以效果和效率相匹配即可。修片時注意方法?？上刃揞^臉部，其修服裝，再修背景，這樣能把握大局，也不宜有漏項，修飾以“影響美感”為主題內(nèi)容進行處理和修飾，不要修小不修大。3.2.3設(shè)計前的準備工作將素材庫進行分類整理，如婚紗、中文、圖案、效果、寫真、兒童、合家歡等。要選適合自己風格的東西，整理歸類，便于隨時找到運用。建立照片風格、手法、套系、效果等樣照文件夾，平時取長補短、不斷完善，做到靈活運用。熟練和精通PHOTO的工具和性能及快捷鍵的使用。對于有些固定版面及需設(shè)計的手法，用PHOTO作成可調(diào)整的“動作”模式，歸案備用，減少工作量，提高工作效率。對于美工的張數(shù)與P數(shù)問題，結(jié)合自己的習慣與別人的方法，以刪減法進行，最后進行檢查，確保別多做或少做。如文件較多或設(shè)計相冊本數(shù)較多的情況，可將文件按制作單要求先進行張數(shù)的分類，逐本解決制作。要學(xué)會時間管理與控制，對于設(shè)計風格及速度要養(yǎng)成效果與效率相結(jié)合的辦法，提高效果。新建動態(tài)ASP網(wǎng)頁grxz..asp，在設(shè)計視圖中，插入表格，在表格中插入圖片，選擇所需要的照片。右擊圖片選擇“屬性”，選擇“創(chuàng)建鏈接”，選擇Flash相冊。則運行時就可看到生動的個人相冊。圖4-2個人相冊界面3.3留言板功能進入留言板功能，輸入名字，和所要留言的內(nèi)容，確定留言即可在頁面上顯示剛發(fā)表的留言內(nèi)容，同時會顯示個人頭像的圖片3.3.1個人體悟看到朋友光臨我的個人網(wǎng)站，真的好高興。我是來訪必復(fù)的，點擊對方的圖案進入到對方博客。哎呀，一大溜英文字母，寫的是什么？看不懂。既然來了，總得表示表示吧。點擊鼠標鍵往下拉，對方竟刪除了留言板。說實話很不想進去，因為看不懂啊，看不懂是沒有發(fā)言權(quán)的。但對方已到過我的博客，不留點什么是很過意不去的。你可以說我虛偽，但現(xiàn)實中的人不都這樣嗎？有些朋友是令人煩于應(yīng)付的，但人們?nèi)圆坏貌惶撆c委蛇，甚至投入大量的人力物力。在網(wǎng)絡(luò)中又不花費什么，只是多用一點時間而已。再說我不是對這些朋友沒有好感，只是他們發(fā)表的文章我看不懂。回訪是我應(yīng)該做的，禮尚往來嘛。進入對方的博客應(yīng)該是一種禮貌，在學(xué)校老師就經(jīng)常講要懂禮貌，進去后理所當然要留點什么。沒有巧舌如簧，只好寫上：拜訪朋友、祝永遠快樂、祝萬事如意之類的話。有時也感覺對不起朋友，但沒辦法，只能寫上這些，而這些寫在留言板上就行了。忽然感到留言板的重要性。以前總感到留言板沒什么用，對留言板的內(nèi)容也從未認真瞧過，反正知道對方來了，說了一些祝福的話，我做出回復(fù)就是了。對于一些博友博客中的內(nèi)容實在不感興趣，如廣告、名人緋事等，自己總也耐住性子瀏覽一下，并說出自己的看法。其實我很想在留言板上駐足的。只是想這樣對朋友不夠尊重。我是個封建禮教觀念很強的人，所以總是要進入對方博客看一下。碰到刪除留言板的博友，也往往會想：如果對方有留言板就好了。雖然明知即使對方有留言板自己也不會簡單從事。人有時真是個矛盾綜合體，但遇到這些英文文章，對方總不能說我不夠真誠了吧！我不是不想進入你的博客，而是我確實看不懂，我可以理直氣壯的說。但對方偏偏刪除了留言板，于是不得不十分懷念留言板。也仔細想過留言板的作用，心中對留言板也有了新的認識?？床欢畬Ψ降牟┛停诹粞园迳狭粞裕f些祝福的話，送一些溫馨給朋友；對不感性趣的博客，在留言板上留言，說些甜言蜜語，說明你來過了；對很長時間不更新博客的朋友，而你在他的博客里已找不到新的話題，寫下留言吧，證明你沒忘記他；對一些一直對自己敷衍的朋友，該留言就留言吧，必竟感情的投入應(yīng)該是雙方面的。對于博客我已付出我的真誠，雖然這些真誠令我有時感到迷惘，有時感到痛苦，但我始終不曾后悔。人總有一天會長大的，總有一天會有很多選擇在自己面前。圖4-3留言板界面3.3.2留言板代碼新建動態(tài)ASP網(wǎng)頁gwly.asp，在設(shè)計視圖中，插入表格，構(gòu)建留言板框架。在代碼視圖中輸入以下代碼部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>我的個人主頁</title><linkrel="stylesheet"type="text/css"href="css.css"media="screen"/><scripttype="text/javascript">functionOnClick(event){if(document.getElementsByName("name")[0].value==""){ document.getElementsByName("name")[0].value="匿名"; }if(document.getElementsByName("textName")[0].value==""){alert("請輸入內(nèi)容");return;}vartable;vartableList=document.getElementsByTagName("TABLE");for(vari=0;i<tableList.length;i++){if(tableList[i].name=="tableName"){table=tableList[i]break;}}varvalue=document.getElementsByName("textName")[0].value;varname=document.getElementsByName("name")[0].value;varindex=table.rows.length;table.insertRow(index);table.rows(index).insertCell(0);table.rows(index).cells(0).innerHTML="<tableclass='datalist'><tr><tdrowspan=2width='80'><imgsrc=images/head.jpg/></td><th>"+name+"</th></tr><tr><td>"+value+"</td></tr></table><hr/>";document.getElementsByName("textName")[0].value="";document.getElementsByName("name")[0].value="";}</script><linkrel="stylesheet"type="text/css"href="css.css"/></head>第四章網(wǎng)站設(shè)計難點4.1用戶注冊功能將用戶注冊表單資料提交到數(shù)據(jù)庫中。在寫入之前調(diào)用驗證模塊，對用戶填寫的資料進行驗證。如對兩次輸入的密碼是否一致進行驗證，對E-Mail地址是否含有@字符進行驗證，如果驗證失敗，提示出錯要求用戶重新輸入，賬號是否已經(jīng)存在，如果存在，自動轉(zhuǎn)向到注冊失敗頁面。在注冊表單中必填的字段有賬號（m_username）、密碼（m_passwd）、確認密碼（m_repass）、和電子郵件（m_email）。比較重要的驗證是兩次輸入密碼要一致，而且電子郵件格式必須正確。選擇checkform插件，在彈出的驗證對話框中選擇表單中要檢驗的控件。在注冊數(shù)據(jù)經(jīng)過客戶端合法性驗證之后，就是插入記錄。單擊“應(yīng)用程序\服務(wù)器行為”面板上左上角的加號（+）按鈕，在彈出的菜單中選擇“插入記錄”的命令。用戶的注冊信息提交到服務(wù)器端后，這些信息被保存在tRegister表中，每一位用戶的注冊信息對應(yīng)數(shù)據(jù)庫中的一條記錄，如表2-1所示。字段名數(shù)據(jù)類型長度必須字段允許空值備注ID自動編號YN用戶編號，主鍵User文本50YN用戶賬號Passwd文本50YN用戶密碼Email文本50YN用戶EmailQQ數(shù)字50NY用戶QQ，可不填MSN文本50NY用戶MSN，可不填表3-1Register數(shù)據(jù)表圖3-1用戶注冊界面41.1用戶注冊模塊代碼部分代碼如下：<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</title><styletype="text/css"><!--.STYLE5{font-family:Arial,Helvetica,sans-serif;font-size:10;}.STYLE6{font-size:10}.STYLE7{color:#FF0000}.STYLE8{color:#000000}--></style><scripttype="text/JavaScript"><!--functionMM_findObj(n,d){//v4.01varp,i,x;if(!d)d=document;if((p=n.indexOf("?"))>0&&parent.frames.length){d=parent.frames[n.substring(p+1)].document;n=n.substring(0,p);}if(!(x=d[n])&&d.all)x=d.all[n];for(i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for(i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers[i].document);if(!x&&d.getElementById)x=d.getElementById(n);returnx;}varargs=YY_checkform.arguments;varmyDot=true;varmyV='';varmyErr='';varaddErr=false;varmyReq;for(vari=1;i<args.length;i=i+4){if(args[i+1].charAt(0)=='#'){myReq=true;args[i+1]=args[i+1].substring(1);}else{myReq=false}varmyObj=MM_findObj(args[i].replace(/\[\d+\]/ig,""));myV=myObj.value;if(myObj.type=='text'||myObj.type=='password'||myObj.type=='hidden'){if(myReq&&myObj.value.length==0){addErr=true}if((myV.length>0)&&(args[i+2]==1)){//fromtovarmyMa=args[i+1].split('_');if(isNaN(myV)||myV<myMa[0]/1||myV>myMa[1]/1){addErr=true}}elseif((myV.length>0)&&(args[i+2]==2)){varrx=newRegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-z]{2,4}$");if(!rx.test(myV))addErr=true;}elseif((myV.length>0)&&(args[i+2]==3)){//datevarmyMa=args[i+1].split("#");varmyAt=myV.match(myMa[0]);if(myAt){varmyD=(myAt[myMa[1]])?myAt[myMa[1]]:1;varmyM=myAt[myMa[2]]-1;varmyY=myAt[myMa[3]];varmyDate=newDate(myY,myM,myD);if(myDate.getFullYear()!=myY||myDate.getDate()!=myD||myDate.getMonth()!=myM){addErr=true};}else{addErr=true}}elseif((myV.length>0)&&(args[i+2]==4)){//timevarmyMa=args[i+1].split("#");varmyAt=myV.match(myMa[0]);if(!myAt){addErr=true}}elseif(myV.length>0&&args[i+2]==5){//checkthis2varmyObj1=MM_findObj(args[i+1].replace(/\[\d+\]/ig,""));if(myObj1.length)myObj1=myObj1[args[i+1].replace(/(.*\[)|(\].*)/ig,"")];if(!myObj1.checked){addErr=true}}elseif(myV.length>0&&args[i+2]==6){//thesamevarmyObj1=MM_findObj(args[i+1]);if(myV!=myObj1.value){addErr=true}}}elseif(!myObj.type&&myObj.length>0&&myObj[0].type=='radio'){varmyTest=args[i].match(/(.*)\[(\d+)\].*/i);varmyObj1=(myObj.length>1)?myObj[myTest[2]]:myObj;4.2用戶登錄功能根據(jù)用戶提交的用戶名和密碼判別賬號是否合法。如果賬號密碼不匹配，轉(zhuǎn)向登錄失敗頁面，否則轉(zhuǎn)向登錄成功頁面。在提交前也需要合法性驗證，確保用戶輸入的用戶名和密碼不為空。在登錄表單中，要求用戶必須輸入用戶名和密碼，才能向服務(wù)器提交表單，也就是“用戶名稱”和“用戶密碼”文本框不能為空。用VBScript腳本完成驗證的功能。單擊“應(yīng)用程序\服務(wù)器行為”面板上左上角的加號（+）按鈕，在彈出的菜單中選擇“登錄用戶”對話框，分別在“用戶名字段”“密碼字段”下拉列表框中選擇登錄表單中對應(yīng)用戶名和密碼的文本框名稱，在“使用連接驗證”下拉列表框選擇數(shù)據(jù)庫連接“connMemSystem”，在“表格”下框中選擇用戶資料所在的數(shù)據(jù)表“Register”。圖3-2用戶登錄界面4.2.1用戶登錄模塊代碼部分代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>用戶登陸</title><styletype="text/css"><!--.STYLE1{ font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold;}.STYLE2{ font-family:Arial,Helvetica,sans-serif; font-size:12px;}--></style><scriptlanguage="VBScript"><!--functionform1_OnSubmit() iftrim(form1.m_username.value)=""then MsgBox"用戶名不能為空！",0+64,"系統(tǒng)提示" form1_OnSubmit=false exitfunction endif iftrim(form1.m_passwd.value)=